/* ==========================================================================
   23 · RESEÑAS

   Dos cosas mandan en el aspecto de esta pantalla:

   1. LA RESEÑA ES UNA TARJETA, NO UNA FILA. Lo que hay que leer acá es un
      párrafo escrito por una persona, y un párrafo dentro de una celda de
      tabla se lee como un dato. Además la respuesta se escribe DEBAJO de la
      reseña y con la reseña a la vista: por eso el editor se abre en su sitio
      y no en un cajón, que taparía justo el texto que hay que contestar.

   2. LA CALIFICACIÓN SE VE ANTES DE LEERLA. Cada tarjeta lleva un filo de
      color a la izquierda —rojo de una y dos estrellas, ámbar de tres, verde
      de cuatro y cinco—. Con veinte tarjetas en pantalla, el filo dice dónde
      mirar sin leer una palabra, que es lo que un rótulo de texto no hace.

   El resto se toma prestado y no se reinventa: `.pts-caja` para las secciones,
   `.chapa` para los estados, `.eti` para los motivos y `.interruptor` para los
   ajustes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Las dos fichas de Google
   --------------------------------------------------------------------------
   Es el número que el restaurante ya conoce y mira: 4,7 con 213. Se pone
   arriba y grande porque es el marcador del partido, y al lado va la curva —
   sin la curva, un 4,7 no dice si se está subiendo o bajando, que es la única
   pregunta interesante.
-------------------------------------------------------------------------- */
.res-fichas {
  display: grid; gap: .9rem; margin-bottom: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}
.res-ficha {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1.5px solid var(--linea-sutil);
  border-radius: var(--radio-g); padding: 1.05rem 1.15rem 1rem;
}
/* El hilo de arriba ata la ficha a su sede sin gastar un rótulo de color. */
.res-ficha::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--rojo), var(--naranja));
}
.res-ficha__sede {
  display: flex; align-items: baseline; gap: .5rem; margin-bottom: .5rem;
}
.res-ficha__sede b { font-size: .95rem; font-weight: 700; }
.res-ficha__sede span { font-size: .74rem; color: var(--tinta-3); }

.res-ficha__cifra { display: flex; align-items: center; gap: .75rem; }
.res-ficha__nota {
  font-family: var(--display); font-size: 2.5rem; font-weight: 700;
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.res-ficha__lado { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.res-ficha__conteo { font-size: .82rem; color: var(--tinta-3); }
.res-ficha__conteo b { color: var(--tinta); font-variant-numeric: tabular-nums; }

/* Con Google conectado la curva se cambia por el ritmo —las barras de
   `tblMini`, las mismas del Resumen— y por el margen de la nota. */
.res-ficha__ritmo { margin-top: .6rem; }
.res-ficha__ritmo .tbl-mini { height: 34px; padding-top: .4rem; }
.res-ficha__ritmo-t { display: block; margin-top: .35rem; font-size: .74rem; color: var(--tinta-3); }
.res-ficha__ritmo-t b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.res-margen { display: grid; gap: .3rem; margin-top: .75rem; }
.res-margen__f {
  display: flex; align-items: center; gap: .45rem;
  font-size: .8rem; line-height: 1.35; color: var(--tinta-2);
}
.res-margen__f .ico { flex: none; width: .95em; height: .95em; }
.res-margen__f b { font-variant-numeric: tabular-nums; }
.res-margen__f--sube .ico { color: var(--naranja); }
.res-margen__f--baja .ico { color: var(--rojo); }
.res-ficha__curva { margin-top: .85rem; }
.res-ficha__curva svg { display: block; width: 100%; height: 42px; overflow: visible; }
.res-chispa__area { fill: var(--ambar-sua); }
.res-chispa__linea { fill: none; stroke: var(--naranja); stroke-width: 2;
                     stroke-linecap: round; stroke-linejoin: round; }
.res-chispa__fin { fill: var(--rojo); }

.res-ficha__pie {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--linea-sutil);
  font-size: .74rem; color: var(--tinta-3);
}
.res-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.res-delta--sube { color: var(--verde); }
.res-delta--baja { color: var(--rojo); }

/* La ficha sin dato no finge tenerlo. */
.res-ficha--vacia { border-style: dashed; }
.res-ficha--vacia .res-ficha__nota { color: var(--crema-3); }

/* --------------------------------------------------------------------------
   Las estrellas
   --------------------------------------------------------------------------
   Dibujadas y no escritas: «4★» se lee como un dato y cuatro estrellas se
   reconocen sin leer. Las apagadas quedan, para que se vea sobre cuántas es.
-------------------------------------------------------------------------- */
.res-est { display: inline-flex; gap: .1rem; vertical-align: -.1em; }
.res-est .ico { font-size: .92rem; color: var(--crema-3); }
.res-est .ico.res-est--on { color: var(--naranja); fill: var(--naranja); }
.res-est--g .ico { font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   La bandeja
-------------------------------------------------------------------------- */
.res-lista { display: grid; gap: .85rem; }

.res-t {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1.5px solid var(--linea-sutil);
  border-left: 3px solid var(--crema-3);
  border-radius: var(--radio); padding: 1rem 1.1rem;
  animation: plato-entra .4s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
.res-t--mala  { border-left-color: var(--rojo); }
/* La que abrió la notificación del celular: un anillo que se apaga solo, para
   que el ojo la encuentre sin que se quede marcada para siempre. */
.res-t--llega { animation: plato-entra .4s var(--ease) both, res-llega 2.4s var(--ease) .3s; }
@keyframes res-llega {
  0%, 35% { box-shadow: 0 0 0 3px var(--naranja), 0 12px 30px -12px rgba(240, 144, 30, .55); }
  100%    { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .res-t--llega { animation: none; box-shadow: 0 0 0 3px var(--naranja); }
}
.res-t--media { border-left-color: var(--naranja); }
.res-t--buena { border-left-color: var(--verde-cl); }
.res-t--archivada { opacity: .58; border-left-color: var(--crema-3); }

.res-t__cab { display: flex; align-items: flex-start; gap: .8rem; }
.res-t__av {
  width: 40px; height: 40px; border-radius: 13px; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 700;
  background: linear-gradient(145deg, var(--arena), var(--tinta-3));
}
.res-t__quien { flex: 1; min-width: 0; line-height: 1.3; }
.res-t__quien b { font-weight: 700; }
.res-t__meta {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-size: .77rem; color: var(--tinta-3); margin-top: .1rem;
}
.res-t__texto {
  margin: .8rem 0 0; font-size: .93rem; line-height: 1.6; color: var(--tinta-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.res-t__texto--sin { color: var(--tinta-3); font-style: italic; }
.res-t__etis { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .7rem; }
.res-t__acc {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  margin-top: .85rem; padding-top: .8rem; border-top: 1px solid var(--linea-sutil);
}
.res-t__acc .btn { font-size: .84rem; padding: .48rem .8rem; }
.res-t__sep { margin-left: auto; }

/* --------------------------------------------------------------------------
   La respuesta
-------------------------------------------------------------------------- */

/* Lo ya publicado. Va en crema y con un filo, no en un campo de texto: es
   texto que ya salió, no un formulario. */
.res-pub {
  margin-top: .85rem; padding: .75rem .9rem;
  background: var(--crema); border-radius: 12px;
  border-left: 3px solid var(--verde-cl);
}
.res-pub__t {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font-size: .69rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: .35rem;
}
.res-pub__c { font-size: .9rem; line-height: 1.55; white-space: pre-wrap; }
.res-pub--local { border-left-color: var(--naranja); }
/* Google la rechazó: lo dice debajo, en rojo y con el motivo. */
.res-pub__mal {
  display: flex; align-items: flex-start; gap: .4rem; margin-top: .55rem;
  font-size: .8rem; line-height: 1.45; color: var(--rojo-osc);
}
.res-pub__mal .ico { flex: none; margin-top: .15em; }

/* --------------------------------------------------------------------------
   Lo que trae una reseña de Google
   --------------------------------------------------------------------------
   La foto de perfil va ENCIMA de la inicial, no en su lugar: si Google no la
   sirve, el JS la quita y queda la letra sin que la tarjeta salte. Las fotos
   del cliente llevan caja fija: la lista no se mueve mientras cargan.
-------------------------------------------------------------------------- */
.res-t__av { position: relative; overflow: hidden; }
.res-t__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: var(--crema-2);
}
.res-t__trad { margin-top: .5rem; font-size: .84rem; color: var(--tinta-3); }
.res-t__trad summary { cursor: pointer; font-weight: 600; width: fit-content; }
.res-t__trad p { margin: .35rem 0 0; line-height: 1.5; font-style: italic; }
.res-t__medios { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .7rem; }
.res-t__medio {
  position: relative; width: 76px; height: 76px; flex: none;
  border-radius: 12px; overflow: hidden; background: var(--crema-2);
  display: grid; place-items: center; color: var(--tinta-3);
}
.res-t__medio img { width: 100%; height: 100%; object-fit: cover; display: block; }
.res-t__play {
  position: absolute; inset: auto .3rem .3rem auto;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(22,16,13,.7); color: #fff;
  font-size: .7rem;
}

.res-resp { margin-top: .85rem; animation: vista-entra .3s var(--ease) both; }
.res-resp__barra {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin-bottom: .6rem;
}
.res-resp__nota { font-size: .76rem; color: var(--tinta-3); line-height: 1.4; }
/* La caja de escribir: el texto y, debajo, la carita de los emojis y la
   cuenta — como la caja de WhatsApp, pero del alto de una respuesta. */
.res-resp__caja {
  background: var(--crema); border: 1.5px solid var(--linea); border-radius: 12px;
  transition: border-color var(--d-rapido) var(--ease), box-shadow var(--d-rapido) var(--ease);
}
.res-resp__caja:focus-within {
  border-color: var(--naranja); box-shadow: 0 0 0 4px var(--ambar-sua);
}
.res-resp textarea {
  display: block; width: 100%; min-height: 96px; resize: vertical;
  font: inherit; font-size: .91rem; color: inherit;
  background: transparent; border: 0; outline: none;
  padding: .7rem .85rem .2rem;
}
.res-resp__herr { display: flex; align-items: center; gap: .4rem; padding: 0 .5rem .3rem .35rem; }
.res-resp__emo {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--tinta-3); font-size: 1.2rem;
  transition: color .2s var(--ease), background .2s var(--ease), transform .25s var(--resorte);
}
.res-resp__emo:hover { color: var(--tinta); background: var(--crema-2); }
.res-resp__emo--on, .res-resp__emo--on:hover {
  color: #A8650E; background: var(--ambar-sua); transform: rotate(-8deg);
}
.res-resp__acc {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .6rem;
}
.res-resp__cuenta {
  margin-left: auto; font-size: .74rem; color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

/* Los emojis, debajo de la caja y no flotando: la tarjeta recorta lo que se
   sale. Por dentro son las piezas `.wapick__*` de 15-whatsapp.css. */
.res-pick {
  display: flex; flex-direction: column; height: min(290px, 50vh); margin-top: .5rem;
  background: var(--surface); border: 1px solid var(--linea); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(22, 16, 13, .1);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .3s var(--resorte);
}
.res-pick--on { opacity: 1; transform: none; }
.res-pick .wapick__cats { padding-top: .45rem; }
.res-resp__firma { font-size: .72rem; color: var(--arena); }

/* La banda de lo que no se redacta solo. Roja porque no es un aviso de
   sistema: es una reseña que necesita a una persona. */
.res-cuidado {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-top: .85rem; padding: .7rem .85rem; border-radius: 12px;
  background: var(--rojo-sua); color: var(--rojo-osc);
  font-size: .83rem; line-height: 1.5;
}
.res-cuidado .ico { flex: none; margin-top: .12em; color: var(--rojo); }
.res-cuidado b { color: var(--rojo); }

/* --------------------------------------------------------------------------
   En el sitio — el orden de la cinta de la portada
-------------------------------------------------------------------------- */
.res-sitio { display: grid; gap: .5rem; }
.res-sf {
  display: grid; grid-template-columns: auto 1fr auto; gap: .75rem;
  align-items: center;
  background: var(--surface); border: 1.5px solid var(--linea-sutil);
  border-radius: 13px; padding: .65rem .8rem;
}
.res-sf--off { opacity: .5; }
.res-sf__n {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: var(--crema-2); color: var(--tinta-3);
  font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.res-sf__t { min-width: 0; line-height: 1.35; }
.res-sf__t b { font-size: .88rem; }
.res-sf__t span {
  display: block; font-size: .78rem; color: var(--tinta-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.res-sf__acc { display: flex; gap: .25rem; align-items: center; }
.res-mover {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  color: var(--tinta-3); border: 1.5px solid var(--linea);
  transition: background var(--d-rapido) var(--ease), color var(--d-rapido) var(--ease);
}
.res-mover:hover { background: var(--crema-2); color: var(--tinta); }
.res-mover[disabled] { opacity: .3; pointer-events: none; }
/* El juego de iconos no trae flechas verticales: son las horizontales giradas.
   Un símbolo más en el sprite por algo que ya está dibujado no se justifica. */
.res-mover--sube .ico { transform: rotate(90deg); }
.res-mover--baja .ico { transform: rotate(-90deg); }

/* --------------------------------------------------------------------------
   Ajustes
-------------------------------------------------------------------------- */
.res-ajuste {
  display: grid; grid-template-columns: 1fr auto; gap: .6rem 1rem;
  align-items: center; padding: .85rem 0;
  border-top: 1px solid var(--linea-sutil);
}
.res-ajuste:first-of-type { border-top: 0; }
.res-ajuste__t b { display: block; font-size: .92rem; }
.res-ajuste__t span {
  display: block; font-size: .8rem; color: var(--tinta-3); line-height: 1.45;
  margin-top: .12rem;
}
.res-ajuste input[type="number"], .res-ajuste input[type="text"] {
  width: 92px; text-align: center; font: inherit; font-weight: 600;
  color: inherit; background: var(--crema);
  border: 1.5px solid var(--linea); border-radius: 10px; padding: .45rem .5rem;
  font-variant-numeric: tabular-nums;
}
.res-ajuste textarea {
  grid-column: 1 / -1; width: 100%; min-height: 84px; resize: vertical;
  font: inherit; font-size: .88rem; color: inherit; background: var(--crema);
  border: 1.5px solid var(--linea); border-radius: 12px; padding: .6rem .8rem;
}
.res-ajuste input:focus, .res-ajuste textarea:focus {
  outline: none; border-color: var(--naranja); box-shadow: 0 0 0 4px var(--ambar-sua);
}

/* El estado de las dos conexiones con Google. */
.res-conex { display: grid; gap: .55rem; }
.res-conex__f {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .85rem; border-radius: 12px; background: var(--crema);
}
.res-conex__i {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
}
.res-conex__f--ok  .res-conex__i { background: var(--verde-sua); color: var(--verde); }
.res-conex__f--no  .res-conex__i { background: var(--ambar-sua); color: #A8650E; }
.res-conex__t { flex: 1; min-width: 0; line-height: 1.4; }
.res-conex__t b { font-size: .88rem; }
.res-conex__t span { display: block; font-size: .78rem; color: var(--tinta-3); }
.res-conex__t code { font-size: .76rem; }
.res-conex__t span b { color: var(--tinta); font-size: inherit; }
.res-conex__f > .btn { flex: none; }
/* Las dos fichas van sangradas bajo la conexión: dependen de ella. */
.res-conex__f--sede { margin-left: 1.4rem; background: var(--surface); border: 1px solid var(--linea-sutil); }
.res-conex__acc { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
/* La carta en Google: las páginas en miniatura, con la forma de la foto (2:3). */
.res-carta { flex-wrap: wrap; }
.res-carta__mal { color: var(--rojo) !important; }
.res-carta__pags { display: flex; gap: .4rem; flex: none; }
.res-carta__pags img {
  display: block; width: 46px; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--linea); background: var(--surface);
}
.res-conex__acc .pts-nota { margin: 0; align-self: center; }

/* --------------------------------------------------------------------------
   24 · Pantalla angosta
-------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .res-ficha__nota { font-size: 2.1rem; }
  .res-t { padding: .85rem .9rem; }
  .res-t__acc .btn { flex: 1 1 auto; justify-content: center; }
  .res-t__sep { margin-left: 0; }
  .res-ajuste { grid-template-columns: 1fr; }
  .res-ajuste > :last-child { justify-self: start; }
  .res-sf { grid-template-columns: auto 1fr; }
  .res-sf__acc { grid-column: 1 / -1; justify-content: flex-end; }
  .res-conex__f { flex-wrap: wrap; }
  .res-conex__f > .btn { margin-left: calc(32px + .7rem); }
  .res-conex__f--sede { margin-left: 0; }
  .res-t__medio { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .res-t, .res-resp { animation: none; }
  .res-pick { transition: none; }
  .res-chispa__linea { transition: none; }
}

/* ==========================================================================
   «En Google», mes a mes
   ========================================================================== */
.res-mes__salto { flex-basis: 100%; height: 0; }
.res-mes { overflow-x: auto; margin: 0 -.2rem; }
.res-mes__t { font-variant-numeric: tabular-nums; min-width: 760px; }
.res-mes__t th, .res-mes__t td { padding: .6rem .75rem; text-align: right; white-space: nowrap; }
.res-mes__t thead th:first-child, .res-mes__t tbody th { text-align: left; }
.res-mes__t tbody th {
  font-size: .89rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tinta);
}
.res-mes__t small { display: block; font-size: .7rem; font-weight: 400; color: var(--tinta-3); }
.res-mes__t td small { display: inline; }
.res-mes__ahora { background: var(--crema); }
.res-mes__nada { color: var(--tinta-3); }
.res-mes__malas { color: var(--rojo); }

.res-fbarra { display: flex; flex-wrap: wrap; align-items: center; column-gap: .6rem; }
.res-fbarra .pastillas { margin-bottom: 0; }
.res-fbarra__fresco { margin-left: auto; }
@media (max-width: 640px) {
  .res-fbarra { display: block; }
  .res-fbarra .pastillas { padding-bottom: .35rem; }
  .res-fbarra__fresco { margin: .1rem 0 .6rem .4rem; }
}