/*
 * RESEÑAS Y ESTRELLAS — assets/css/resenas.css
 *
 * Se encola desde inc/resenas.php y SOLO en las tres pantallas del directorio:
 * la ficha del negocio, el archivo y la página de categoría. Va después de
 * directorio.css en la cascada, que es lo que permite retocar la rejilla de los
 * filtros y la tarjeta sin un solo `!important`.
 *
 * ---------------------------------------------------------------------------
 * LAS ESTRELLAS NO DEPENDEN DEL COLOR. NI UNA VEZ.
 * ---------------------------------------------------------------------------
 * La estrella llena y la vacía son FORMAS distintas —sólida y de contorno—, no
 * el mismo dibujo en dos tonos. Impreso en blanco y negro, en una pantalla al
 * mínimo de brillo al sol, o para el 1 de cada 12 hombres que no distingue
 * ciertos tonos, la barra se sigue leyendo. Y al lado va siempre la cifra
 * escrita, que es la segunda red: si las máscaras no cargan, el dato sigue ahí.
 *
 * Las dos capas se pintan con `background: currentColor` a través de `mask`,
 * nunca con un `fill` dentro del SVG. Es la misma regla que tokens.css aplica a
 * los iconos del tema: así el icono NO PUEDE tener color propio y es imposible
 * que se cuele un tono fuera de la paleta por la puerta de atrás.
 *
 * ---------------------------------------------------------------------------
 * PALETA: AZUL, BLANCO Y NEGRO. NADA MÁS.
 * ---------------------------------------------------------------------------
 * Ni una estrella dorada, que es lo que hace todo el mundo. El ámbar no está en
 * la paleta de este sitio y meterlo «porque las estrellas son amarillas» es
 * exactamente la deriva que tokens.css existe para impedir. Sobre papel claro
 * las estrellas son `--marca` (7,2:1); sobre la portada oscura de la ficha son
 * `--cielo` (7,1:1 sobre `--noche`). Las dos medidas contra el fondo REAL.
 */

/*
 * LA ESTRELLA HUECA.
 *
 * ESTO DEBERÍA VIVIR EN tokens.css, al lado de `--icono-estrella`, que es su
 * pareja: son las dos caras del mismo icono de marca. Está aquí porque
 * tokens.css lo están tocando otras manos en paralelo y añadir una línea a un
 * archivo compartido mientras otro lo reescribe es cómo se pierde trabajo.
 * Mudarla es una tarea de un minuto y queda anotada en el informe.
 *
 * Es el MISMO polígono que `--icono-estrella` —misma proporción, misma punta
 * arriba— dibujado con trazo en vez de con relleno. Que sean el mismo dibujo
 * importa: si la llena y la hueca no coinciden punto por punto, la barra se ve
 * temblorosa al pasar de una a otra.
 *
 * El trazo se pinta en negro dentro del SVG y eso da igual: una máscara solo
 * lee la OPACIDAD del dibujo, nunca su color. El color lo pone `currentColor`.
 */
:root {
  --icono-estrella-hueca: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpolygon%20points='12.00,1.00%2014.47,8.60%2022.46,8.60%2016.00,13.30%2018.47,20.90%2012.00,16.20%205.53,20.90%208.00,13.30%201.54,8.60%209.53,8.60'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ================================================================== */
/* LA BARRA DE ESTRELLAS                                               */
/* ================================================================== */

.lt-estrellas {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  color: var(--marca);
  font-size: var(--fs-chico);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  /* Un nombre de negocio largo no puede empujar la barra fuera de la tarjeta. */
  max-width: 100%;
  flex-wrap: wrap;
}

/* Sobre la portada oscura de la ficha. El azul de marca ahí da 2,3:1 y
   desaparece; el azul cielo da 7,1:1. */
.lt-estrellas--claro { color: var(--cielo); }

.lt-estrellas--chico { font-size: var(--fs-etiqueta); }

/*
 * LA BARRA NACE OCULTA y solo aparece si el navegador sabe recortar máscaras.
 * Sin la máscara, estas dos capas serían dos rectángulos azules sólidos: no un
 * fallo elegante, un borrón encima del dato. Con la barra oculta queda la
 * cifra, que es la información de verdad.
 */
.lt-estrellas__barra {
  position: relative;
  display: none;
  flex: none;
  width: 5.6em;    /* cinco celdas de 1.12em */
  height: 1.12em;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .lt-estrellas__barra { display: block; }
}

.lt-estrellas__huecas,
.lt-estrellas__llenas {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: currentColor;
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-position: left center;
          mask-position: left center;
  -webkit-mask-size: 1.12em 1.12em;
          mask-size: 1.12em 1.12em;
}

.lt-estrellas__huecas {
  width: 100%;
  -webkit-mask-image: var(--icono-estrella-hueca);
          mask-image: var(--icono-estrella-hueca);
}

/*
 * La capa llena se recorta con su ANCHO, que lo escribe PHP en tanto por
 * ciento. La máscara se repite desde la izquierda, así que un 86 % enseña
 * cuatro estrellas enteras y el 30 % de la quinta: media estrella se ve como
 * media estrella, no redondeada a la entera más cercana.
 */
.lt-estrellas__llenas {
  width: 0;
  overflow: hidden;
  -webkit-mask-image: var(--icono-estrella);
          mask-image: var(--icono-estrella);
}

.lt-estrellas__cifra {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.lt-estrellas__total {
  font-weight: var(--peso-texto);
  /* El recuento es dato secundario: se apaga, pero sobre papel claro
     `--apagado` da 6,3:1 y sigue pasando AA de sobra. */
  color: var(--apagado);
}

.lt-estrellas--claro .lt-estrellas__total { color: var(--niebla); }

/* ================================================================== */
/* ESTRELLAS EN LA TARJETA DEL LISTADO                                 */
/* ================================================================== */

/*
 * Va debajo de la línea de categoría y ciudad, no encima del nombre: lo primero
 * que busca el ojo en una rejilla es el nombre del negocio. La nota es el
 * segundo criterio, no el primero.
 */
.lt-dir-tarjeta__estrellas {
  display: block;
  margin-top: calc(var(--e-1) * -.5);
  margin-bottom: var(--e-1);
}

/* ================================================================== */
/* ESTRELLAS EN LA CABECERA DE LA FICHA                                */
/* ================================================================== */

/*
 * Es un enlace al bloque de reseñas: quien mira la nota nada más entrar quiere
 * leerlas. 44px de alto mínimo porque es una zona pulsable de verdad, no un
 * adorno.
 */
.lt-negocio-estrellas {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--e-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.lt-negocio-estrellas:hover,
.lt-negocio-estrellas:focus-visible {
  border-bottom-color: currentColor;
}

/* ================================================================== */
/* EL BLOQUE DE RESEÑAS DE LA FICHA                                    */
/* ================================================================== */

/* El ancla lleva el foco aquí al volver del envío; sin esto, el navegador
   dibuja un recuadro alrededor de toda la sección. */
.lt-resenas:focus { outline: none; }

.lt-resenas__aviso {
  padding: var(--e-2) var(--e-3);
  margin-bottom: var(--e-3);
  border-radius: var(--radio-chico);
  border-left: 4px solid var(--marca);
  background: var(--marca-claro);
  color: var(--tinta);
}

.lt-resenas__aviso p { margin: 0 0 var(--e-1); }
.lt-resenas__aviso p:last-child { margin-bottom: 0; }
.lt-resenas__aviso ul { margin: 0; padding-left: 1.2em; }

/* El aviso de error se distingue por el FILETE y por el texto, no solo por el
   color: en escala de grises los dos avisos siguen siendo distintos. */
.lt-resenas__aviso--mal {
  border-left-color: var(--alerta);
  background: var(--hueso-honda);
}

.lt-resenas__aviso--espera {
  margin: var(--e-2) 0;
  font-size: var(--fs-chico);
}

/* ---- Resumen: nota grande, barra y reparto ---- */

.lt-resenas__resumen {
  display: grid;
  gap: var(--e-2) var(--e-5);
  grid-template-areas:
    "nota"
    "barra"
    "reparto";
  padding: var(--e-3);
  margin-bottom: var(--e-4);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
}

@media (min-width: 620px) {
  .lt-resenas__resumen {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
      "nota  reparto"
      "barra reparto";
    align-items: center;
    padding: var(--e-4);
  }
}

.lt-resenas__nota {
  grid-area: nota;
  display: flex;
  align-items: baseline;
  gap: .35em;
  margin: 0;
}

.lt-resenas__cifra {
  font-family: var(--fuente-titulo);
  font-size: clamp(2.4rem, 6vw, 3.2rem);
  font-weight: var(--peso-titulo);
  line-height: 1;
  letter-spacing: var(--tracking-titulo);
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.lt-resenas__sobre {
  font-size: var(--fs-chico);
  color: var(--apagado);
}

.lt-resenas__barra-nota { grid-area: barra; }
.lt-resenas__barra-nota .lt-estrellas { font-size: 1.05rem; }

.lt-resenas__reparto {
  grid-area: reparto;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  min-width: 0;
}

/*
 * Cada fila lleva SU NÚMERO escrito además de la barra. Cuatro cincos y un uno
 * dan la misma media que cinco cuatros, y no son lo mismo: sin el reparto, la
 * cifra sola esconde justo el caso que al visitante le interesa ver.
 */
.lt-resenas__fila {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr) 2.5em;
  align-items: center;
  gap: var(--e-1);
  font-size: var(--fs-chico);
}

.lt-resenas__fila-nota { color: var(--apagado); }

.lt-resenas__fila-barra {
  height: 8px;
  border-radius: 999px;
  background: var(--hueso-honda);
  overflow: hidden;
}

.lt-resenas__fila-relleno {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--marca);
}

.lt-resenas__fila-cuantas {
  text-align: right;
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 419px) {
  /* A 360 la columna de la etiqueta se come la barra. Se estrecha la etiqueta
     antes que dejar la barra en cuatro píxeles. */
  .lt-resenas__fila { grid-template-columns: 5.4em minmax(0, 1fr) 2.2em; }
}

/* ---- La lista de reseñas ---- */

.lt-resenas__lista {
  list-style: none;
  margin: 0 0 var(--e-4);
  padding: 0;
  display: grid;
  gap: var(--e-3);
}

.lt-resena__caja {
  padding: var(--e-3);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
}

.lt-resena__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-1) var(--e-2);
  margin-bottom: var(--e-2);
}

.lt-resena__autor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-1) var(--e-2);
  margin: 0;
  min-width: 0;
}

.lt-resena__nombre {
  font-weight: var(--peso-fuerte);
  /* Un «nombre» de 300 caracteres sin espacios no puede romper la caja. */
  overflow-wrap: anywhere;
}

.lt-resena__texto p { margin: 0 0 var(--e-2); }
.lt-resena__texto p:last-child { margin-bottom: 0; }
.lt-resena__texto { overflow-wrap: anywhere; }

/* ---- La respuesta del negocio ---- */

/*
 * Sangrada, con filete a la izquierda y fondo tintado: se lee de un vistazo que
 * cuelga de la reseña de arriba y que no es otra reseña. El distintivo
 * «Responde el negocio» va con el mismo sello `--verificado` que el resto del
 * sitio, para que la señal de «esto está comprobado» sea siempre la misma.
 */
.lt-resena__respuesta {
  margin-top: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border-left: 3px solid var(--marca);
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
  background: var(--marca-claro);
}

.lt-resena__respuesta-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1);
  margin: 0 0 var(--e-1);
}

/* ---- «Responder como el negocio» ---- */

.lt-resena__responder { margin-top: var(--e-2); }

.lt-resena__responder-boton {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 44px;
  padding: 0 var(--e-2) 0 0;
  cursor: pointer;
  font-size: var(--fs-chico);
  font-weight: var(--peso-fuerte);
  color: var(--marca);
  /* Se quita el triángulo del navegador y se pone uno propio que gira: el de
     serie se pinta distinto en cada sistema y descuadra la línea. */
  list-style: none;
}

.lt-resena__responder-boton::-webkit-details-marker { display: none; }

.lt-resena__responder-boton::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 7px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform var(--transicion);
}

.lt-resena__responder[open] > .lt-resena__responder-boton::before {
  transform: rotate(90deg);
}

.lt-resena__responder-boton:hover { color: var(--marca-oscuro); }

/* ================================================================== */
/* LOS FORMULARIOS                                                     */
/* ================================================================== */

/*
 * Estilos propios y no los de `.lt-formulario`: esa pieza vive en resto.css,
 * que NO se encola en las pantallas del directorio. Reutilizar una clase que
 * aquí no existe deja el formulario en crudo y no da ningún error.
 */
.lt-resenas__nueva {
  padding: var(--e-3);
  margin-top: var(--e-4);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
}

@media (min-width: 620px) {
  .lt-resenas__nueva { padding: var(--e-4); }
}

.lt-resenas__nueva-titulo {
  margin: 0 0 var(--e-1);
  font-size: var(--fs-h4);
}

.lt-resenas__formulario {
  /* Medida de lectura: una caja de texto de metro y medio no se escribe, se
     pierde el principio de la línea. */
  max-width: var(--contenedor-texto);
  margin-top: var(--e-3);
}

.lt-resenas__campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 var(--e-3);
  border: 0;
  padding: 0;
}

/*
 * EL CAMPO TRAMPA TIENE QUE SEGUIR ESCONDIDO. ESTO YA SE VIO EN PANTALLA.
 *
 * `display: flex` de la regla de arriba GANA al `display: none` que el
 * navegador aplica por el atributo `hidden`, así que el campo «Deja este campo
 * vacío» salía a la vista en mitad del formulario. No es un fallo estético: una
 * persona lo rellena, y entonces la trampa la bloquea a ella y no al robot.
 *
 * El selector con `[hidden]` va DESPUÉS y con la misma clase, así que gana por
 * especificidad sin necesidad de `!important`.
 */
.lt-resenas__campo[hidden] { display: none; }

.lt-resenas__campo > label,
.lt-resenas__campo > legend {
  padding: 0;
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--apagado);
}

/* El asterisco de obligatorio no puede ser la ÚNICA señal —es un carácter que
   muchos lectores de pantalla no anuncian—, por eso los campos llevan también
   `required` y `aria-required`. Aquí solo se le da color de marca. */
.lt-resenas__obligatorio { color: var(--brasa-texto); }

.lt-resenas__control {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--marca-borde);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-weight: var(--peso-texto);
  /* 16px exactos: por debajo, Safari en iPhone hace zoom al enfocar el campo y
     descoloca toda la página. */
  font-size: 16px;
  line-height: 1.5;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

textarea.lt-resenas__control { resize: vertical; }

.lt-resenas__control:hover { border-color: var(--marca); }

.lt-resenas__control:focus-visible {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-claro);
}

/* ---- Las cinco estrellas del formulario ---- */

/*
 * El fieldset NO puede ser flex. Un `<legend>` dentro de un contenedor flex es
 * una caja especial que cada navegador coloca a su manera —en varios se sale de
 * la rejilla y el rótulo «Tu calificación» aparece descolocado—. Se deja en
 * bloque y las separaciones se dan a mano.
 */
.lt-resenas__nota { display: block; }
.lt-resenas__nota > legend { margin-bottom: 6px; }

.lt-resenas__nota-fila {
  /*
   * `relative` no es decorativo: los radios de abajo van en `absolute` para
   * esconderse, y sin un ancestro posicionado se colocan respecto a la PÁGINA
   * ENTERA. El resultado es que al llegar a las estrellas con el tabulador, el
   * navegador salta al principio del documento para «enseñar» un campo que
   * mide un píxel y está en otra parte. Con esto, el radio se queda pegado a su
   * estrella y el foco no mueve la página.
   */
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 6px;
}

/*
 * El radio se esconde a la vista pero SIGUE ESTANDO: nada de `display:none`,
 * que lo saca del tabulador y lo deja imposible de elegir con el teclado.
 */
.lt-resenas__nota-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lt-resenas__nota-etiqueta {
  /* 44x44: es una zona pulsable de verdad y con el pulgar hay que acertar. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  color: var(--marca);
  border-radius: var(--radio-chico);
}

.lt-resenas__nota-estrella {
  display: block;
  width: 28px;
  height: 28px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 28px 28px;
          mask-size: 28px 28px;
  -webkit-mask-image: var(--icono-estrella-hueca);
          mask-image: var(--icono-estrella-hueca);
  transition: transform var(--transicion);
}

/*
 * SIN MÁSCARAS NO HAY DIBUJO: se cae al número escrito.
 * Un cuadrado azul de 28px por estrella sería peor que no pintar nada, así que
 * en ese caso la etiqueta enseña su cifra en texto.
 */
.lt-resenas__nota-etiqueta::after {
  content: attr(data-cifra);
  font-weight: var(--peso-fuerte);
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .lt-resenas__nota-etiqueta::after { content: none; }
}

@supports not ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .lt-resenas__nota-estrella { display: none; }
}

/*
 * EL RELLENO ACUMULADO, EN DOS REGLAS.
 *
 *   1. En cuanto hay algo elegido, TODAS se llenan.
 *   2. Se vacían las que van DESPUÉS de la elegida.
 *
 * La segunda gana a la primera por especificidad, así que el orden en el
 * archivo no importa. `~ input + label` es lo que selecciona «las etiquetas de
 * los radios posteriores al marcado» sin necesidad de invertir el orden del
 * HTML —invertirlo haría que el tabulador y el lector de pantalla recorrieran
 * las estrellas de 5 a 1, que es peor que perder el adorno.
 */
.lt-resenas__nota-fila:has(.lt-resenas__nota-radio:checked) .lt-resenas__nota-estrella {
  -webkit-mask-image: var(--icono-estrella);
          mask-image: var(--icono-estrella);
}

.lt-resenas__nota-fila .lt-resenas__nota-radio:checked ~ .lt-resenas__nota-radio + .lt-resenas__nota-etiqueta .lt-resenas__nota-estrella {
  -webkit-mask-image: var(--icono-estrella-hueca);
          mask-image: var(--icono-estrella-hueca);
}

/* Donde `:has()` no existe se llena solo la elegida. Se pierde el efecto
   acumulado; no se pierde saber cuál está marcada. */
@supports not (selector(:has(*))) {
  .lt-resenas__nota-radio:checked + .lt-resenas__nota-etiqueta .lt-resenas__nota-estrella {
    -webkit-mask-image: var(--icono-estrella);
            mask-image: var(--icono-estrella);
  }
}

/*
 * EL ANILLO DE LA ELEGIDA, SIN DEPENDER DE NADA.
 *
 * Esta regla no usa `:has()` ni `@supports`, así que funciona en cualquier
 * navegador: la estrella marcada queda dentro de un recuadro. Es la red de
 * seguridad de las dos reglas de arriba — si el relleno acumulado no se pinta,
 * al menos se ve SIEMPRE cuál está elegida, que es el dato que hace falta para
 * poder enviar el formulario con confianza.
 */
.lt-resenas__nota-radio:checked + .lt-resenas__nota-etiqueta {
  background: var(--marca-claro);
  box-shadow: inset 0 0 0 2px var(--marca);
}

/* El foco del teclado tiene que verse: el radio está oculto, así que el anillo
   lo dibuja su etiqueta. Sin esto, quien navega con el tabulador no sabe en qué
   estrella está. */
.lt-resenas__nota-radio:focus-visible + .lt-resenas__nota-etiqueta {
  outline: 3px solid var(--marca);
  outline-offset: 2px;
}

.lt-resenas__nota-etiqueta:hover .lt-resenas__nota-estrella { transform: scale(1.12); }

/* ---- Paginación de las reseñas ---- */

.lt-resenas__paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
}

.lt-resenas__paginacion p { margin: 0; }

/* ================================================================== */
/* EL FILTRO POR CALIFICACIÓN DEL LISTADO                              */
/* ================================================================== */

/*
 * La barra de filtros de directorio.css se declara para CUATRO celdas
 * (`2fr 1fr 1fr auto`). Con la calificación son cinco, y cinco controles en
 * 768px salen de 140px cada uno: los nombres de categoría se cortan. Así que
 * entre 768 y 1100 la barra pasa a dos columnas con el buscador cruzado, y solo
 * a partir de 1100 se pone en una sola fila.
 */
@media (min-width: 768px) {
  .lt-dir-filtros--con-nota {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lt-dir-filtros--con-nota .lt-dir-filtros__campo--ancho {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  /* La columna de la calificación pide un poco más que las otras dos: su opción
     por defecto («Cualquier calificación») es la etiqueta más larga de la barra
     y a 1fr el navegador la recortaba a media palabra. */
  .lt-dir-filtros--con-nota {
    grid-template-columns: 1.6fr 1fr 1fr 1.15fr auto;
  }
  .lt-dir-filtros--con-nota .lt-dir-filtros__campo--ancho {
    grid-column: auto;
  }
}

/* ================================================================== */
/* MENOS MOVIMIENTO PARA QUIEN LO PIDE                                 */
/* ================================================================== */

@media (prefers-reduced-motion: reduce) {
  .lt-resenas__nota-estrella,
  .lt-resena__responder-boton::before,
  .lt-resenas__control {
    transition: none;
  }
  .lt-resenas__nota-etiqueta:hover .lt-resenas__nota-estrella { transform: none; }
}

/* ==================================================================== */
/* INTENTO DE DOBLE COLUMNA — RETIRADO 2026-08-14                        */
/* ==================================================================== */

/*
 * SE QUITO ENTERO. Queda anotado para que el siguiente no repita el camino.
 *
 * QUE SE PEDIA: en la portada, formulario y resenas en dos columnas, sin la
 * caja blanca, y la llamada final en su propia banda abajo.
 *
 * QUE SI SE CONSIGUIO Y SE MIDIO:
 *   · la caja blanca fuera —el fondo lo pinta `.lt-resenas__nueva` en ESTA
 *     hoja, que carga DESPUES de portada.css; por eso ninguna anulacion desde
 *     alli servia. No era especificidad, era orden de carga.
 *   · dos columnas funcionando: resenas x=124, formulario x=807.
 *   · texto legible sobre el azul: contraste 18.6:1.
 *
 * DONDE SE ROMPIO: al invertir las columnas —formulario a la izquierda— el
 * grid dejo de aplicarse y el formulario paso a ocupar los 1192px enteros, con
 * las resenas encima. La seccion se fue a 2079px. Revertir solo ese bloque no
 * lo devolvio: quedo el formulario a ancho completo igual.
 *
 * LO QUE HAY QUE HACER ANTES DE VOLVER A INTENTARLO: mirar la estructura real
 * del marcado —quien es hijo directo de quien— en vez de deducirla. Tres de
 * los cuatro fallos de hoy en esta seccion salieron de suponer la jerarquia.
 *
 * Mientras tanto la seccion vuelve a su estado original: apilada, con su caja
 * clara y legible. Funciona.
 */

/* ==================================================================== */
/* PORTADA: DOS COLUMNAS Y SIN CAJA BLANCA — 2026-08-14                  */
/* ==================================================================== */

/*
 * LA ESTRUCTURA REAL, MIRADA Y NO DEDUCIDA:
 *
 *   div.lt-contenedor
 *     ├─ div.lt-cabeza-seccion     el titulo
 *     ├─ div.lt-resenas__rejilla   las resenas
 *     ├─ div.lt-resenas__aporta    <- CONTIENE el formulario
 *     └─ div.lt-resenas__cierre    la llamada final
 *
 * AQUI ESTUVO EL FALLO DE AYER: se le puso `grid-column` a
 * `.lt-resenas__nueva`, que es NIETO del contenedor. El hijo directo es
 * `.lt-resenas__aporta`, y una propiedad de rejilla solo la obedece un hijo
 * directo. Por eso el formulario se iba a ancho completo por mucho que se le
 * insistiera.
 *
 * Y POR QUE ESTE ARCHIVO Y NO portada.css: el fondo blanco lo pinta esta hoja
 * mas arriba, y esta hoja se encola DESPUES. No era especificidad, era orden
 * de carga.
 *
 * `body.home` acota a la portada: en la ficha de un negocio la caja blanca es
 * correcta —fondo claro— y quitarla alli romperia 36 fichas.
 */

/* --- Fuera la caja blanca -------------------------------------------- */

body.home .lt-resenas__nueva {
  padding: 0;
  margin-top: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

body.home .lt-resenas__nueva-titulo { color: #fff; }

body.home .lt-resenas__nueva label {
  color: color-mix(in srgb, #fff 78%, transparent);
}

body.home .lt-resenas__nueva p,
body.home .lt-resenas__nueva small {
  color: color-mix(in srgb, #fff 58%, transparent);
}

body.home .lt-resenas__nueva input[type="text"],
body.home .lt-resenas__nueva input[type="email"],
body.home .lt-resenas__nueva textarea {
  background: color-mix(in srgb, #fff 8%, transparent);
  border: 1.5px solid color-mix(in srgb, #fff 26%, transparent);
  border-radius: 11px;
  color: #fff;
}

body.home .lt-resenas__nueva input::placeholder,
body.home .lt-resenas__nueva textarea::placeholder {
  color: color-mix(in srgb, #fff 46%, transparent);
}

body.home .lt-resenas__nueva input:focus,
body.home .lt-resenas__nueva textarea:focus {
  outline: none;
  background: color-mix(in srgb, #fff 15%, transparent);
  border-color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, #fff 18%, transparent);
}

body.home .lt-resenas__nueva textarea { height: 104px; min-height: 0; }

/* --- Dos columnas: formulario izquierda, resenas derecha -------------- */

@media (min-width: 1024px) {
  body.home .lt-resenas > .lt-contenedor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: start;
    column-gap: 48px;
  }

  /* Titulo y cierre, a lo ancho. Los dos hijos directos que lo son. */
  body.home .lt-resenas > .lt-contenedor > .lt-cabeza-seccion,
  body.home .lt-resenas > .lt-contenedor > .lt-resenas__cierre {
    grid-column: 1 / -1;
  }

  /* El formulario a la IZQUIERDA — sobre `__aporta`, el hijo directo. */
  body.home .lt-resenas > .lt-contenedor > .lt-resenas__aporta {
    grid-column: 1;
    grid-row: 2;
  }

  /* Las resenas a la derecha, una debajo de otra en su columna. */
  body.home .lt-resenas > .lt-contenedor > .lt-resenas__rejilla {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- El cierre, en su propia banda centrada -------------------------- */

body.home .lt-resenas__cierre {
  margin-top: 54px;
  padding-top: 40px;
  border-top: 1px solid color-mix(in srgb, #fff 12%, transparent);
  text-align: center;
}

body.home .lt-resenas__cierre .lt-btn { margin-inline: auto; }

/* --- FORMULARIO COMPRIMIDO Y TARJETAS QUE LLENAN EL ALTO -------------- */

@media (min-width: 1024px) {
  /*
   * El formulario ocupaba mas alto que las resenas de al lado y dejaba un
   * hueco a la derecha. Se aprieta el espaciado —no se quita ningun campo, que
   * todos hacen falta— y se deja que las tarjetas repartan el alto sobrante.
   */
  body.home .lt-resenas__nueva > * + * { margin-top: 12px; }
  body.home .lt-resenas__nueva textarea { height: 84px; }
  body.home .lt-resenas__nueva input[type="text"],
  body.home .lt-resenas__nueva input[type="email"] { padding-block: 10px; }

  /* Los textos de ayuda, mas juntos a su campo. */
  body.home .lt-resenas__nueva p,
  body.home .lt-resenas__nueva small { margin-top: 5px; font-size: .8rem; }

  /*
   * Las tarjetas ESTIRAN para igualar la columna del formulario.
   * `1fr` reparte el alto disponible entre las que haya: dos, tres o una.
   */
  body.home .lt-resenas > .lt-contenedor { align-items: stretch; }

  /*
   * UNA FILA POR RESENA, Y NUNCA MAS APRETADA QUE SU CONTENIDO.
   *
   * `1fr` a secas reparte el alto a partes iguales, y eso esta bien con dos
   * tarjetas. Con tres o mas empieza a apretarlas por debajo de lo que ocupa
   * su propio texto y las frases se cortan.
   *
   * `minmax(min-content, 1fr)` dice las dos cosas a la vez: reparte el hueco
   * sobrante, pero NUNCA por debajo de lo que la tarjeta necesita para
   * leerse. Con dos siguen igualadas; con cinco, cada una ocupa lo suyo y la
   * columna crece.
   */
  body.home .lt-resenas > .lt-contenedor > .lt-resenas__rejilla {
    grid-auto-rows: minmax(min-content, 1fr);
    align-content: stretch;
  }

  body.home .lt-resenas__ficha {
    display: flex;
    flex-direction: column;
  }

  /* El pie —nombre y fecha— al fondo de su tarjeta. */
  body.home .lt-resenas__ficha .lt-resenas__origen,
  body.home .lt-resenas__ficha .lt-resenas__nombre { margin-top: auto; }
}

/* --- LOS FILTROS DE RESENAS ------------------------------------------ */

/*
 * «Filtros de buenas y malas y de cuantas estrellas para que la gente pueda
 * ver.» Nacen ocultos y los enciende el guion: sin JavaScript no queda una
 * fila de botones muertos.
 */
.lt-resenas__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.lt-resenas__filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid color-mix(in srgb, #fff 24%, transparent);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.lt-resenas__filtro:hover { border-color: #fff; background: color-mix(in srgb, #fff 10%, transparent); }

.lt-resenas__filtro:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* El activo se invierte: se distingue por forma y por color, no solo color. */
.lt-resenas__filtro.is-activo {
  background: #fff;
  border-color: #fff;
  color: var(--noche, #071324);
}

.lt-resenas__filtro .lt-resenas__filtro-num {
  font-size: .68rem;
  opacity: .7;
}

.lt-resenas__ficha[hidden] { display: none; }

/* Cuando el filtro no deja ninguna. */
.lt-resenas__sinfiltro {
  margin: 0;
  padding: 22px;
  border: 1px dashed color-mix(in srgb, #fff 22%, transparent);
  border-radius: 12px;
  color: color-mix(in srgb, #fff 62%, transparent);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .lt-resenas__filtro { transition: none; }
}

/* --- LA RESPUESTA DEL EQUIPO DENTRO DE LA RESENA --------------------- */

/*
 * Va dentro de la tarjeta, sangrada y con filete a la izquierda: se lee como
 * lo que es —una respuesta a ESE comentario— y no como otra opinion mas.
 * El filete en azul de marca la firma visualmente sin necesidad de logotipo.
 */
.lt-resenas__respuesta {
  margin-top: 14px;
  padding: 12px 0 2px 14px;
  border-left: 3px solid var(--marca);
}

.lt-resenas__respuesta-quien {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 5px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--marca);
}

.lt-resenas__respuesta-fecha {
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--apagado);
}

.lt-resenas__respuesta-texto {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--tinta);
}

/* --- EL MEDALLON DE LA RESENA ---------------------------------------- */

/*
 * Circulo con la inicial de quien escribio y, encima, un sello de verificada.
 * Dos piezas en una: identifica a la persona y certifica la resena sin ocupar
 * mas sitio que un avatar.
 */
.lt-resenas__ficha .lt-resenas__medalla {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  margin-right: 12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--marca) 13%, var(--hueso, #F6F3EE));
  color: var(--marca);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.02em;
}

/* El sello, mordiendo la esquina inferior derecha del circulo. */
.lt-resenas__ficha .lt-resenas__medalla-sello {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 17px;
  height: 17px;
  color: var(--marca);
  /* Un halo del color de la tarjeta para que el sello se recorte limpio
     contra el circulo en vez de fundirse con el. */
  filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff);
}

/*
 * El pie de la tarjeta pasa a fila: medallon a la izquierda, nombre y fecha
 * apilados a la derecha. Antes eran dos lineas sueltas una debajo de otra.
 */
/*
 * EL PIE, EN REJILLA: medallon a la izquierda ocupando las dos filas, nombre
 * arriba y fecha abajo a su derecha.
 *
 * Estaba en `flex` con direccion COLUMNA y centrado, asi que el medallon salia
 * encima del nombre y todo el bloque al medio. Se vio en pantalla. Con `grid`
 * la colocacion es explicita —cada pieza dice su fila y su columna— en vez de
 * depender de heredar la direccion correcta.
 */
.lt-resenas__ficha .lt-resenas__pie {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: start;
  text-align: left;
  gap: 0 2px;
}

.lt-resenas__ficha .lt-resenas__medalla { grid-column: 1; grid-row: 1 / span 2; }
.lt-resenas__ficha .lt-resenas__nombre  { grid-column: 2; grid-row: 1; }
.lt-resenas__ficha .lt-resenas__origen  { grid-column: 2; grid-row: 2; }

.lt-resenas__ficha .lt-resenas__nombre {
  display: block;
  font-weight: 700;
}

.lt-resenas__ficha .lt-resenas__origen {
  display: block;
  font-size: .82rem;
  color: var(--apagado);
}

/* --- MOVIL: AIRE ENTRE LAS RESENAS Y EL FORMULARIO ------------------- */

/*
 * Apilados, «Escribe tu resena» quedaba pegado al borde de la ultima tarjeta:
 * parecia parte de ella. En escritorio no se notaba porque van en columnas
 * separadas, y por eso se colo — el hueco lo daba el `column-gap`, que solo
 * existe cuando hay dos columnas.
 *
 * Se pone en el propio bloque del formulario y no en la rejilla: asi el aire
 * viaja con el aunque manana cambie de sitio.
 */
@media (max-width: 1023px) {
  body.home .lt-resenas__aporta {
    margin-top: 40px;
    padding-top: 34px;
    border-top: 1px solid color-mix(in srgb, #fff 12%, transparent);
  }

  /* Las tarjetas tampoco se tocan entre ellas. */
  body.home .lt-resenas__rejilla { gap: 16px; }
}


/* Los campos que salen de la cuenta y no se tocan. Ver inc/resenas.php. */
.lt-resenas__campo--fijo .lt-resenas__control {
  background: #f2f4f7;
  color: #4b5563;
  cursor: default;
}

.lt-resenas__campo--fijo .lt-resenas__control:focus {
  outline: 2px solid #c2cad6;
  outline-offset: 1px;
}


/* Firmar como persona o como negocio. Ver inc/resenas.php. */
.lt-resenas__quien {
  border: 1px solid #dce1e9;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 16px;
}

.lt-resenas__quien legend {
  padding: 0 6px;
  font-size: .82rem;
  font-weight: 700;
  color: #6b7280;
}

.lt-resenas__quien-opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 44px para que un dedo acierte sin apuntar. */
  min-height: 44px;
  padding: 4px 2px;
  cursor: pointer;
}

.lt-resenas__quien-opcion span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.lt-resenas__quien-opcion small {
  font-size: .78rem;
  color: #6b7280;
}