/*
 * Estilos del widget en modo propio.
 *
 * Aquí no hay iframe que nos proteja: esto vive dentro del tema del cliente, y
 * cada tema es distinto. Tres reglas que se siguen en todo el archivo:
 *
 *  1. TODAS las clases empiezan por "loalia-". Ninguna es genérica.
 *  2. Se hereda del tema lo que debe heredarse (la tipografía y el color del
 *     texto), para que las reseñas parezcan parte de la web y no un pegote.
 *     Lo demás se fija, porque si no cada tema pinta una cosa.
 *  3. Nada de !important salvo donde un tema agresivo lo obliga: los enlaces
 *     de dentro del botón, que muchos temas repintan por su cuenta.
 *
 * Los colores salen de variables con respaldo, así que quien quiera puede
 * cambiarlos desde su tema sin tocar este archivo.
 */

.loalia {
  --loalia-tinta: currentColor;
  --loalia-linea: rgba(128, 128, 128, .24);
  --loalia-suave: rgba(128, 128, 128, .07);
  --loalia-marca: #5B2FD6;
  --loalia-estrella: #FFA41C;
  --loalia-radio: 12px;

  font-family: inherit;
  color: inherit;
  margin: 1.5em 0;
  container-type: inline-size;
}

.loalia * { box-sizing: border-box; }

.loalia-titulo {
  text-align: center;
  margin: 0 0 .8em;
  font-size: 1.35em;
  line-height: 1.25;
}

/* ── La insignia con la nota media ───────────────────────────────── */
/* 3.4.1: las once plantillas de Estética, las mismas que el widget de
   loalia.es (incluye/widget-partes.php las dibuja). El color de las
   estrellas lo pone --loalia-insignia-color, que escribe el plugin en línea
   con lo elegido; el resto hereda la tinta de la página. */
.loalia-insignia {
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 1.2em; font-family: inherit; color: inherit;
}
.loalia-ins-e { color: var(--loalia-insignia-color, #FFA41C); }
.loalia-ins-e-vacia { opacity: .28; }
.loalia-ins-estrellas { letter-spacing: .06em; line-height: 1; white-space: nowrap; }
.loalia-ins-fila { display: flex; align-items: center; }
.loalia-ins-pastilla { display: inline-flex; border-radius: 999px; background: rgba(127, 127, 127, .14); }
.loalia-ins-sello { display: inline-block; text-align: center; border: 2px solid currentColor; border-radius: 12px; opacity: .92; }
.loalia-ins-caja { display: inline-block; text-align: left; border: 1px solid rgba(127, 127, 127, .28); border-radius: 12px; min-width: 230px; max-width: 100%; }
.loalia-ins-barra {
  flex: 1; min-width: 60px; border-radius: 999px;
  background: rgba(127, 127, 127, .16); overflow: hidden; display: block;
}
.loalia-ins-barra-llena { display: block; height: 100%; background: currentColor; opacity: .55; border-radius: 999px; }
.loalia-ins-cubo { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.loalia-ins-cubo-1 { background: var(--loalia-insignia-color, #FFA41C); }
.loalia-ins-cubo-2 { background: var(--loalia-insignia-color, #FFA41C); opacity: .45; }
.loalia-ins-cubo-3 { background: currentColor; opacity: .18; }
.loalia-ins-arco-1 { stroke: var(--loalia-insignia-color, #FFA41C); }
.loalia-ins-arco-2 { stroke: var(--loalia-insignia-color, #FFA41C); stroke-opacity: .45; }
.loalia-ins-arco-3 { stroke: currentColor; stroke-opacity: .18; }
.loalia-ins-satis { display: flex; border-radius: 6px; overflow: hidden; background: rgba(127, 127, 127, .16); }
.loalia-ins-seg { display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; font-weight: 700; color: #1A1A22; }
.loalia-ins-seg-1 { background: var(--loalia-insignia-color, #FFA41C); }
.loalia-ins-seg-2 { background: var(--loalia-insignia-color, #FFA41C); opacity: .55; }
.loalia-ins-seg-3 { background: currentColor; opacity: .25; }
.loalia-ins-caras { display: flex; justify-content: center; margin-bottom: 8px; }
.loalia-ins-cara {
  flex: 0 0 auto;
  border-radius: 50%; overflow: hidden; background: rgba(127, 127, 127, .22);
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255, 255, 255, .85); font-weight: 700; opacity: .85;
}
.loalia-ins-confianza {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  border-radius: 8px; border: 1px solid var(--loalia-insignia-color, #FFA41C);
}
.loalia-ins-cita { margin-top: 10px; padding: 9px 13px; border-radius: 12px; background: rgba(127, 127, 127, .13); line-height: 1.45; }
.loalia-ins-resumen { display: inline-block; max-width: 420px; text-align: left; border-radius: 14px; background: rgba(127, 127, 127, .12); line-height: 1.55; }
.loalia-insignia strong { color: inherit; }
/* La nota compacta junto al título del producto (woocommerce.php) sigue
   siendo la sencilla de siempre: estas tres clases son solo suyas. */
.loalia-insignia-estrellas { color: var(--loalia-estrella, #FFA41C); letter-spacing: .08em; font-size: 1.6em; line-height: 1; }
.loalia-insignia-nota { font-weight: 800; font-size: 1.55em; line-height: 1; }
.loalia-insignia-total { opacity: .7; font-size: 1em; }

/* La nota junto al título del producto en WooCommerce. */
.loalia-nota-producto {
  /* 3.1.3: el color de estrella se define también aquí. Este bloque vive
     FUERA del widget (.loalia), así que sin esto la variable no existía y
     las estrellas heredaban el color del tema: en Woodmart, blanco sobre
     blanco (se veía «5,0 · 58 opiniones» sin estrellas). */
  --loalia-estrella: #FFA41C;
  display: flex; align-items: baseline; gap: .45em;
  flex-wrap: wrap; margin: 0 0 .8em; font-size: .95em;
}
/* El número y el enlace llevan el color de marca que el negocio eligió en la
   consola (--loalia-marca, puesto en línea desde woocommerce.php): en temas
   como Woodmart heredaban el color del texto de al lado y salían blanco sobre
   blanco. Con reserva oscura por si faltara la variable. */
.loalia-nota-producto .loalia-insignia-nota { color: var(--loalia-marca, #141A26); }
.loalia-nota-enlace { color: var(--loalia-marca, #141A26); opacity: .75; font-size: .92em; }

/* ── Las tarjetas ────────────────────────────────────────────────── */
.loalia-lista { display: grid; gap: 1em; }
@container (min-width: 620px) { .loalia-lista { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 960px) { .loalia-lista { grid-template-columns: repeat(3, 1fr); } }
/* Respaldo para navegadores sin container queries. */
@supports not (container-type: inline-size) {
  @media (min-width: 700px)  { .loalia-lista { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1040px) { .loalia-lista { grid-template-columns: repeat(3, 1fr); } }
}

.loalia-tarjeta {
  /* Estas variables las escribe el plugin con la estética elegida en el
     panel de Loalia (mismas tablas que el widget de Shopify). Sin ellas,
     los valores de respaldo pintan la tarjeta neutra de siempre. */
  border: var(--loalia-borde-ancho, 1px) solid var(--loalia-linea);
  border-radius: var(--loalia-radio);
  padding: 1.1em 1.2em;
  display: flex; flex-direction: column; gap: .55em;
  background: var(--loalia-fondo-tarjeta, var(--loalia-suave));
  color: var(--loalia-tinta-tarjeta, inherit);
}
/* 3.3.8: dentro de la tarjeta manda el plugin, que pone el fondo y la tinta.
   Blindaje por si el tema pinta los <p> o los <strong> con un color suyo:
   ese color no se pensó para nuestro fondo. */
.loalia-tarjeta .loalia-texto,
.loalia-tarjeta .loalia-nombres strong,
.loalia-tarjeta .loalia-respuesta { color: inherit; }
/* Los <p> de fuera de las tarjetas siguen a la caja (que vigila tinta.js),
   no a una regla «p { color }» del tema. */
.loalia .loalia-hay-mas,
.loalia .loalia-marca { color: inherit; }
/* Fuera de las tarjetas, solo cuando la guardia (assets/tinta.js) ve que el
   color del tema no se lee sobre el fondo real de la página. El título va
   aparte porque muchos temas pintan los <h2> directamente. */
.loalia.loalia-tinta-oscura { color: #141A26; }
.loalia.loalia-tinta-clara  { color: #F1F1F8; }
.loalia .loalia-titulo.loalia-tinta-oscura { color: #141A26; }
.loalia .loalia-titulo.loalia-tinta-clara  { color: #F1F1F8; }

.loalia-estrellas { color: var(--loalia-estrella, #FFA41C); letter-spacing: .08em; font-size: 1.2em; line-height: 1; }
.loalia-texto { margin: 0; line-height: 1.6; white-space: pre-line; } /* 3.3.8: respeta los saltos de línea de la reseña */
/* Alto fijo a propósito: con «height: auto» el navegador no sabe cuánto mide
   la foto hasta que llega, así que la reservaba en cero y la página daba un
   salto al cargarla —justo debajo del dedo del visitante, porque las fotos
   se cargan al ir bajando—.

   Se le da una FORMA (4:3) en vez de un alto fijo. Con la forma, el navegador
   ya sabe cuánto ocupará solo con el ancho de la tarjeta, así que el hueco
   queda reservado desde el primer momento igual que con un alto fijo; y
   además las fotos apaisadas normales —las de cualquier cámara en
   horizontal— se siguen viendo enteras, que con el alto fijo se ampliaban y
   se les cortaban los lados. El tope de 260px es para las tarjetas muy
   anchas. El fondo gris es lo que se ve mientras la foto viaja. */
.loalia-foto {
  width: 100%; aspect-ratio: 4 / 3; height: auto; max-height: 260px;
  border-radius: 10px; display: block;
  object-fit: cover; background: rgba(128, 128, 128, .12);
}

/* El vídeo de la reseña (3.2.6): mismo hueco reservado que la foto. */
.loalia-video {
  width: 100%; aspect-ratio: 4 / 3; height: auto; max-height: 260px;
  border-radius: 10px; display: block; background: #000;
}
/* De qué producto habla la reseña (3.2.6). */
.loalia-producto { font-size: .78em; opacity: .75; margin-top: .15em; }

.loalia-quien { display: flex; align-items: center; gap: .6em; margin-top: auto; padding-top: .3em; }
/* El círculo mide lo mismo lleve foto o iniciales. Iba en «em», y como el
   círculo de iniciales encoge su propia letra para que quepan, encogía
   también su tamaño: en una lista con unos clientes con foto y otros sin
   ella, los círculos no medían igual y la fila salía descuadrada. */
.loalia-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.loalia-avatar-letra {
  display: flex; align-items: center; justify-content: center;
  background: var(--loalia-marca); color: #fff;
  font-weight: 700; font-size: .85em;
}
/* align-items: flex-start para que el sello con fondo (etiqueta, recuadro)
   mida lo que mide su texto y no se estire a lo ancho de la columna. */
.loalia-nombres { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.35; }
.loalia-nombres strong { font-size: .95em; }
.loalia-sub, .loalia-fecha { font-size: .8em; opacity: .65; }

/* ── El sello de compra verificada, en sus seis estilos (3.4.1) ───── */
/* El color va en --loalia-verificada (ya pasado por la regla de contraste
   de la 3.3.8: sobre tarjeta oscura, si no se ve, toma la tinta de la
   tarjeta) y el ✓ en --loalia-verificada-tinta. Las escribe el plugin en
   línea; aquí solo va el respaldo. */
.loalia-verificada {
  display: inline-flex; align-items: center; gap: 5px; margin: .1em 0 0;
  vertical-align: middle; white-space: nowrap; line-height: 1; color: inherit;
}
.loalia-verificada svg { display: block; flex: 0 0 auto; }
.loalia-verificada circle { fill: var(--loalia-verificada, #1D9BF0); }
.loalia-verif-escudo > path:first-child { fill: var(--loalia-verificada, #1D9BF0); }
.loalia-verif-ok {
  fill: none; stroke: var(--loalia-verificada-tinta, #FFFFFF);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
/* Cuando van los dos dibujos (la vista previa), se enseña el que toca. Tres
   reglas con dos clases a propósito: con una sola, «.loalia-verificada svg»
   de aquí arriba pesaba más y el escudo salía siempre. */
.loalia-verificada .loalia-verif-escudo { display: none; }
.loalia-verificada-escudo .loalia-verif-tick { display: none; }
.loalia-verificada-escudo .loalia-verif-escudo { display: block; }
/* Solo el tick: el texto se queda para el lector de pantalla, no a la vista. */
.loalia-verificada-tick .loalia-verificada-texto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.loalia-verificada-neutro .loalia-verificada-texto { font-weight: 500; opacity: .62; }
.loalia-verificada-tick-texto { color: var(--loalia-verificada, #1D9BF0); font-weight: 700; }
.loalia-verificada-etiqueta {
  padding: 2px 9px 2px 5px; border-radius: 999px;
  background: rgba(127, 127, 127, .12); color: var(--loalia-verificada, #1D9BF0); font-weight: 700;
}
.loalia-verificada-contorno { padding: 2px 9px 2px 5px; border-radius: 7px; border: 1px solid var(--loalia-verificada, #1D9BF0); font-weight: 600; }
.loalia-verificada-contorno .loalia-verificada-texto { opacity: .8; }
.loalia-verificada-escudo { font-weight: 700; }
.loalia-verificada-escudo .loalia-verificada-texto { color: var(--loalia-verificada, #1D9BF0); }
@supports (background: color-mix(in srgb, red 12%, transparent)) {
  .loalia-verificada-etiqueta { background: color-mix(in srgb, var(--loalia-verificada, #1D9BF0) 12%, transparent); }
  .loalia-verificada-contorno { border-color: color-mix(in srgb, var(--loalia-verificada, #1D9BF0) 35%, transparent); }
}

/* ── El orden de la tarjeta (3.4.1) ──────────────────────────────── */
/* Como el widget de loalia.es: con «Nombre arriba» quién opina sube al
   principio y las estrellas quedan justo debajo. Las piezas van escritas
   siempre en el mismo orden; esto solo las recoloca. */
.loalia-nombre-arriba .loalia-quien { order: -1; margin-top: 0; padding-top: 0; }
.loalia-incentivo {
  font-size: .72em; opacity: .7; white-space: nowrap;
  border: 1px solid currentColor; border-radius: 99px; padding: 0 .5em;
}

/* La respuesta pública del negocio. */
.loalia-respuesta {
  border-left: 3px solid var(--loalia-marca);
  padding: .5em .8em; margin-top: .3em;
  background: var(--loalia-suave); border-radius: 0 8px 8px 0;
  font-size: .92em; line-height: 1.55;
}
.loalia-respuesta-quien { display: block; font-weight: 700; font-size: .88em; margin-bottom: .2em; }

.loalia-hay-mas { text-align: center; opacity: .65; font-size: .88em; margin: .9em 0 0; }

/* ── Pasar de página (3.4.1) ─────────────────────────────────────── */
/* El servidor escribe todas las reseñas marcadas con su página. Hasta que
   assets/paginas.js toma el mando (clase loalia-lista-js) esta regla
   esconde las que no son de la primera, para que la página no dé un salto
   al cargar; sin JavaScript, un <noscript> junto a la lista las enseña
   todas y quita la barra. */
.loalia-lista[data-loalia-paginas]:not(.loalia-lista-js) > .loalia-tarjeta:not([data-loalia-pagina="1"]),
.loalia-lista-js > .loalia-tarjeta.loalia-fuera { display: none; }
.loalia-paginado { position: relative; }
.loalia-pag {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 20px 0 2px; flex-wrap: wrap; color: inherit;
}
.loalia-pag button {
  font: inherit; cursor: pointer; background: transparent; color: inherit; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0;
  box-shadow: none; text-transform: none; letter-spacing: 0;
  transition: opacity .15s ease, background .15s ease;
}
.loalia-pag button:disabled { opacity: .22; cursor: default; }
.loalia-pag .loalia-pag-ir {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid currentColor;
  opacity: .5; font-size: 15px;
}
.loalia-pag .loalia-pag-ir:hover:not(:disabled) { opacity: .95; }
.loalia-pag .loalia-pag-num {
  min-width: 34px; height: 34px; padding: 0 9px; border-radius: 999px;
  border: 1px solid currentColor; opacity: .45; font-size: 14px; font-weight: 600;
}
.loalia-pag .loalia-pag-num:hover { opacity: .8; }
.loalia-pag .loalia-pag-punto { width: 11px; height: 11px; border-radius: 50%; border: 1px solid currentColor; opacity: .45; }
.loalia-pag .loalia-pag-punto:hover { opacity: .8; }
/* La página actual, rellena. La barra va FUERA de las tarjetas, sobre el
   fondo de la página, así que se rellena con el color del texto de la
   página (no con el de la tarjeta: con tarjetas negras en una web clara
   salía una pastilla casi blanca sobre blanco). Ese color lo mide
   assets/paginas.js (--loalia-pag-tinta) y pone encima blanco o tinta
   oscura según toque (--loalia-pag-contra), como hace widget-tema.js. Sin
   medir, oscuro sobre blanco, que es lo más corriente. */
.loalia-pag .loalia-pag-num[aria-current="true"],
.loalia-pag .loalia-pag-punto[aria-current="true"] {
  opacity: 1; font-weight: 700;
  background: var(--loalia-pag-tinta, #141A26); color: var(--loalia-pag-contra, #FFFFFF);
  border-color: var(--loalia-pag-tinta, #141A26);
}
.loalia-pag-puntos { align-self: center; padding: 0 .2rem; opacity: .55; }
/* Solo flechas: pegadas a los lados de las reseñas, a media altura. */
.loalia-pag-flechas { position: static; margin: 0; }
.loalia-pag-flechas .loalia-pag-ir {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; opacity: 1; border: 0; z-index: 4;
  background: var(--loalia-pag-tinta, #141A26); color: var(--loalia-pag-contra, #FFFFFF);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.loalia-pag-flechas .loalia-pag-izq { left: -6px; }
.loalia-pag-flechas .loalia-pag-der { right: -6px; }
.loalia-pag-flechas .loalia-pag-ir:disabled { opacity: .35; }
@media (max-width: 520px) {
  .loalia-pag-flechas .loalia-pag-izq { left: 0; }
  .loalia-pag-flechas .loalia-pag-der { right: 0; }
}

/* ── Cita destacada ──────────────────────────────────────────────── */
.loalia-hero .loalia-lista-hero { grid-template-columns: 1fr; }
/* El hero quita el fondo de la tarjeta para que la reseña se funda con la
   página. Al quitarlo hay que devolver también el color de letra: si no, se
   quedaba el de la tarjeta (blanco en las estéticas oscuras) sobre una
   página clara, y el texto no se leía. */
.loalia-hero .loalia-tarjeta {
  border: 0; background: none; color: inherit;
  text-align: center; align-items: center; padding: 0;
}
.loalia-hero .loalia-texto { font-size: 1.3em; line-height: 1.5; }

/* ── Insignia sola ───────────────────────────────────────────────── */
.loalia-badge .loalia-insignia { margin: 0; }

/* ── Carrusel ────────────────────────────────────────────────────── */
/* Sin JavaScript: se desliza con el dedo o la rueda, y se ancla en cada
   tarjeta. Menos código, menos que romperse y funciona sin esperar a nada. */
.loalia-carrusel .loalia-lista {
  display: flex; gap: 1em;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: .5em; -webkit-overflow-scrolling: touch;
}
.loalia-carrusel .loalia-tarjeta {
  flex: 0 0 min(320px, 85%); scroll-snap-align: center;
}

/* ── Muro ────────────────────────────────────────────────────────── */
@container (min-width: 700px) { .loalia-muro .loalia-lista { grid-template-columns: repeat(3, 1fr); } }

/* ── El botón ────────────────────────────────────────────────────── */
.loalia-boton { text-align: center; margin: 1.1em 0 0; }
.loalia-boton a {
  display: inline-block;
  background: var(--loalia-boton-fondo, var(--loalia-marca)) !important;
  color: var(--loalia-boton-tinta, #fff) !important;
  padding: var(--loalia-boton-pad, .7em 1.4em);
  border-radius: var(--loalia-boton-radio, 999px);
  font-size: var(--loalia-boton-fuente, 1em);
  text-decoration: none !important;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.loalia-boton a:hover { filter: brightness(1.08); }
.loalia-boton-flotante { position: fixed; bottom: 18px; z-index: 99998; margin: 0; }
.loalia-boton-dcha { right: 18px; }
.loalia-boton-izda { left: 18px; }

.loalia-marca { text-align: center; font-size: .8em; opacity: .6; margin: 1.1em 0 0; }
.loalia-marca a { color: inherit; }

/* Aviso que solo ve el administrador. */
.loalia-aviso-admin {
  border: 1px dashed #b32d2e; color: #b32d2e;
  padding: .8em 1em; border-radius: 8px; font-size: .9em;
}

@media (prefers-reduced-motion: reduce) {
  .loalia-carrusel .loalia-lista { scroll-behavior: auto; }
}