/*
 * Estilos de Super Compra. Pensados primero para el móvil:
 * - todo lo que se toca mide al menos 48 px (el tamaño recomendado para un dedo),
 * - las pestañas y botones principales están abajo, al alcance del pulgar,
 * - en pantallas grandes el contenido se centra con un ancho máximo.
 *
 * COLORES, en tres capas (todo con variables CSS):
 * 1. Colores neutros (fondo, texto...), con versión clara y oscura.
 * 2. Los colores de la app (azul y naranja): el color de marca y los
 *    colores del logo.
 * 3. El "tema" del supermercado: <body data-tema="mercadona|dia|lidl|aldi">. Se
 *    pone al entrar en su sección y sustituye el color de marca por el suyo.
 *
 * Variables de marca:
 *   --marca        fondo de botones, chips activos... (con --marca-texto encima)
 *   --marca-fuerte textos e iconos de color sobre el fondo normal (enlaces, pestaña activa)
 *   --marca-suave  fondos suaves (etiquetas)
 */

/* ---------- 1. Colores neutros ---------- */
:root {
  --fondo: #f8fafc;
  --superficie: #ffffff;
  --texto: #0f172a;
  --texto-suave: #475569;
  --borde: #e2e8f0;
  --rojo: #c62828;
  --rojo-suave: #fdecea;
  --naranja-suave: #fff4e0;
  --bueno: #15803d;            /* bajadas de precio: siempre en verde */
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.08);
  --radio: 14px;
  --alto-pestanas: 64px;
  --cabecera-fondo: var(--superficie);
  --cabecera-texto: var(--texto);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0b0f14;
    --superficie: #141a22;
    --texto: #e8edf3;
    --texto-suave: #9aa7b6;
    --borde: #263040;
    --rojo: #ef6b6b;
    --rojo-suave: #3a1d1d;
    --naranja-suave: #3a2c14;
    --bueno: #4ade80;
    --sombra: none;
    color-scheme: dark;
  }
}

/* ---------- 2. Colores de la app: azul y naranja ---------- */
:root {
  --marca: #2563eb; --marca-texto: #fff; --marca-fuerte: #1d4ed8; --marca-suave: #dbeafe;
  /* Logo: degradado azul, marca de verificación azul, etiqueta y «SUPER» naranjas */
  --logo-1: #2563eb; --logo-2: #1e3a8a; --logo-check: #1d4ed8; --logo-punto: #f97316; --logo-agujero: #1e3a8a;
  --logo-texto: #1e3a8a;
  /* Banda de la portada: degradado oscuro para que el texto blanco se lea bien */
  --banda-1: #2563eb; --banda-2: #1e40af;
  /* Acento naranja para precios y ofertas (descuentos, interruptores...).
     --acento-texto es el color del texto que va encima (más contraste que el blanco) */
  --acento: #f97316; --acento-texto: #1c1917;
  /* Iconos de las categorías: siempre azul y naranja, también dentro de
     la sección de un supermercado (los temas de abajo no los cambian) */
  --icono-cat: #1d4ed8; --icono-cat-fondo: #dbeafe; --icono-cat-punto: #f97316;
}
@media (prefers-color-scheme: dark) {
  :root {
    --icono-cat: #93c5fd; --icono-cat-fondo: #172554; --icono-cat-punto: #fb923c;
    --marca: #2563eb; --marca-fuerte: #93c5fd; --marca-suave: #172554;
    --banda-1: #1d4ed8; --banda-2: #172554;
    --acento: #fb923c;
    --logo-punto: #fb923c;
    --logo-texto: #e8edf3;
  }
}

/* ---------- 3. Temas de supermercado (colores de sus logos) ---------- */
/* Mercadona: verde #009660. Para texto blanco encima se usa un verde algo más
   oscuro (#007a4d), que se lee mejor. */
[data-tema="mercadona"] {
  --cabecera-fondo: #009660; --cabecera-texto: #fff;
  --marca: #007a4d; --marca-texto: #fff; --marca-fuerte: #007a4d; --marca-suave: #d9f2e6;
}
/* Dia: rojo #e30613 (el blanco encima se lee bien) */
[data-tema="dia"] {
  --cabecera-fondo: #e30613; --cabecera-texto: #fff;
  --marca: #e30613; --marca-texto: #fff; --marca-fuerte: #c4000f; --marca-suave: #fde3e4;
}
/* Lidl: amarillo #fff000 con su azul #0050aa encima */
[data-tema="lidl"] {
  --cabecera-fondo: #fff000; --cabecera-texto: #0050aa;
  --marca: #0050aa; --marca-texto: #fff; --marca-fuerte: #0050aa; --marca-suave: #fff9b3;
}
/* Aldi: azul marino #00005f (el de su logo) con detalles en azul claro */
[data-tema="aldi"] {
  --cabecera-fondo: #00005f; --cabecera-texto: #fff;
  --marca: #00005f; --marca-texto: #fff; --marca-fuerte: #00005f; --marca-suave: #dde3ff;
}
@media (prefers-color-scheme: dark) {
  [data-tema="aldi"] { --marca: #5b8cff; --marca-texto: #00123d; --marca-fuerte: #8db0ff; --marca-suave: #0e1a4a; }
  [data-tema="mercadona"] { --marca-fuerte: #34d399; --marca-suave: #0d3324; }
  [data-tema="dia"] { --marca-fuerte: #ff7b82; --marca-suave: #3d1013; }
  /* En oscuro, Lidl usa el amarillo para los botones (con texto azul muy oscuro) */
  [data-tema="lidl"] { --marca: #fff000; --marca-texto: #0b1f4d; --marca-fuerte: #fff000; --marca-suave: #1c2a4d; }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.4;
  color: var(--texto);
  background: var(--fondo);
  /* deja sitio a las pestañas de abajo */
  padding-bottom: calc(var(--alto-pestanas) + env(safe-area-inset-bottom));
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--marca-fuerte); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: env(safe-area-inset-top) 16px 0;
  background: var(--cabecera-fondo);
  border-bottom: 1px solid var(--borde);
  color: var(--cabecera-texto);
}
[data-tema] .cabecera { border-bottom-color: transparent; }
.cabecera h1 {
  flex: 1;
  margin: 0;
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.boton-atras {
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  border: 0;
  background: none;
  color: var(--cabecera-texto);
}
.boton-atras svg, .pestanas svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aviso-conexion {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--naranja-suave);
  color: var(--texto);
  font-size: 14px;
}

/* Logo de la app (versión horizontal), centrado. */
.logo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 56px;
}
.logo svg { display: block; height: 44px; width: auto; max-width: 100%; }
.logo-degradado-1 { stop-color: var(--logo-1); }
.logo-degradado-2 { stop-color: var(--logo-2); }
.logo-check { stroke: var(--logo-check); }
.logo-punto { fill: var(--logo-punto); }
.logo-texto { fill: var(--logo-texto); }
.logo-agujero { fill: var(--logo-agujero); }

/* Logo del supermercado, centrado y sobre una "pastilla" blanca para que se vea
   sobre su color. El margen derecho compensa el botón de atrás de la izquierda,
   para que quede centrado respecto a la pantalla. */
.logo-super {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin-right: 34px;
}
.logo-super img {
  display: block;
  height: 40px;
  max-width: 190px;
  padding: 5px 10px;
  border-radius: 10px;
  background: #fff;
  object-fit: contain;
}
.logo-super img[data-super="lidl"], .logo-super img[data-super="dia"], .logo-super img[data-super="aldi"] { padding: 0; background: none; }

/* Botón de ajustes, a la derecha de la cabecera (sin descentrar el logo) */
.boton-ajustes {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--cabecera-texto);
}
.boton-ajustes svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cabecera { position: sticky; }

/* Pantallas de la cuenta */
/* Tarjeta de entrar, registro, recuperar contraseña... Centrada con un ancho cómodo.
   (Se escribe ".caja.tarjeta-entrar" para ganarle a los márgenes de ".caja", que está más abajo.)
   En el móvil ocupa todo el ancho, con los márgenes de <main>. */
.caja.tarjeta-entrar { width: 100%; max-width: 460px; margin: 24px auto; }
/* Pantallas de cuenta: la tarjeta (y el pie legal) se centran también en vertical
   cuando hay sitio de sobra, como en un ordenador */
@media (min-width: 720px) {
  main:has(> .tarjeta-entrar) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 140px);
    min-height: calc(100dvh - 140px);
  }
  .caja.tarjeta-entrar { padding: 24px 28px; }
}
.error-formulario { min-height: 1.4em; margin: 10px 0 0; color: var(--rojo); font-weight: 600; }
.codigo-invitacion {
  margin: 14px 0 6px;
  padding: 12px;
  border-radius: 12px;
  background: var(--marca-suave);
  color: var(--marca-fuerte);
  font: 800 24px/1.2 ui-monospace, Consolas, monospace;
  letter-spacing: 2px;
  text-align: center;
}
.enlaces-cuenta { margin: 16px 0 0; text-align: center; line-height: 2.2; }
.enlaces-cuenta a { font-weight: 600; }
.icono-grande { margin: 0; font-size: 44px; text-align: center; }
.captcha { min-height: 70px; margin: 12px 0 0; }
.tarjeta-entrar h2 { margin-top: 0; }
.tarjeta-entrar .boton.ancho { margin-top: 10px; }

/* Enlace con forma de tarjeta (Ajustes → Panel de administración) */
.fila-enlace { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--texto); text-decoration: none; }
.fila-enlace > span:last-child { font-size: 28px; color: var(--texto-suave); }

/* Panel de administración */
.cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.cifra { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: var(--marca-suave); }
.cifra strong { font-size: 24px; color: var(--marca-fuerte); }
.cifra span { font-size: 13px; color: var(--texto-suave); }
.lista-admin { list-style: none; margin: 10px 0 0; padding: 0; }
.lista-admin li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 0; border-bottom: 1px solid var(--borde); }
.lista-admin li[hidden] { display: none; }
.botones-admin { display: flex; flex-wrap: wrap; gap: 8px; }
.boton.pequeno { min-height: 40px; padding: 0 12px; font-size: 14px; }
.etiqueta.bloqueada { background: var(--rojo-suave); color: var(--rojo); }

.miembros { list-style: none; margin: 10px 0; padding: 0; }
.miembros li { display: flex; align-items: center; justify-content: space-between; min-height: 48px; border-bottom: 1px solid var(--borde); }

/* Oculto a la vista, pero lo leen los lectores de pantalla */
.solo-lectores {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Aviso de nueva versión */
.aviso-version {
  position: sticky;
  top: calc(56px + env(safe-area-inset-top));
  z-index: 9;
  display: block;
  width: 100%;
  min-height: 48px;
  border: 0;
  background: var(--marca);
  color: var(--marca-texto);
  font-size: 16px;
}

/* ---------- Contenido ---------- */
main {
  max-width: 1200px; /* ancho para que quepan 4 o 5 columnas de productos */
  margin: 0 auto;
  padding: 12px 16px 24px;
}
/* Listas de la compra y fichas: más estrechas, se leen mejor */
[data-ancho="estrecho"] main { max-width: 720px; }
h2 { font-size: 20px; margin: 20px 0 10px; }
h3 { font-size: 17px; margin: 16px 0 8px; }
.suave { color: var(--texto-suave); }
.pequeno { font-size: 14px; }
.vacio {
  padding: 32px 16px;
  text-align: center;
  color: var(--texto-suave);
  list-style: none;
}

/* Lista sin artículos: lo primero que se ve es que está vacía, con botones grandes para empezar a añadir */
.caja.lista-vacia {
  padding: 28px 18px;
  text-align: center;
  border: 2px dashed var(--marca);
  background: var(--marca-suave);
  box-shadow: none;
}
.lista-vacia h2 { margin: 6px 0 8px; font-size: 24px; }
.lista-vacia p { margin: 0 0 14px; }
.lista-vacia .icono-grande { margin: 0; font-size: 56px; }
.lista-vacia .boton.ancho { margin-top: 10px; }

/* ---------- Pestañas de abajo ---------- */
.pestanas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  height: calc(var(--alto-pestanas) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--superficie);
  border-top: 1px solid var(--borde);
}
.pestanas a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  font-size: 12px;
  color: var(--texto-suave);
  text-decoration: none;
}
.pestanas a.activa { color: var(--marca-fuerte); font-weight: 700; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
  font-weight: 600;
  text-decoration: none;
  color: var(--texto);
}
.boton.principal { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); font-weight: 700; }
.boton.peligro { color: var(--rojo); }
.boton.ancho { width: 100%; }
.boton:disabled { opacity: 0.5; }
.botones { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.botones .boton { flex: 1 1 140px; }

.boton-redondo {
  flex: none;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--marca);
  color: var(--marca-texto);
  font-size: 28px;
  line-height: 1;
}
.boton-icono {
  flex: none;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--texto-suave);
  font-size: 22px;
}

/* ---------- Formularios ---------- */
.campo {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
}
.campo:focus { outline: 2px solid var(--marca-fuerte); outline-offset: 1px; }
/* Título de un campo de formulario (comparte la clase "etiqueta" con las etiquetas
   de las ofertas, pero sin su fondo de "píldora") */
label.etiqueta { display: block; margin: 12px 0 6px; padding: 0; border-radius: 0; background: none;
  font-size: 15px; font-weight: 600; color: var(--texto); }
.fila-campos { display: flex; gap: 10px; }
.fila-campos > * { flex: 1; min-width: 0; }
.buscador {
  position: sticky;
  top: calc(56px + env(safe-area-inset-top));
  z-index: 5;
  margin: -12px -16px 0;
  padding: 12px 16px 8px;
  background: var(--fondo);
}

/* Chips de filtro (desplazables en horizontal) */
.chips {
  display: flex;
  gap: 8px;
  margin: 8px -16px;
  padding: 0 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chip {
  flex: none;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  white-space: nowrap;
}
.chip.activo { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); font-weight: 600; }

/* ---------- Portada: supermercados ---------- */
/* Banda de bienvenida con el degradado del logo (cambia con la paleta) */
.portada-banda {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 -16px 14px;
  padding: 18px 16px 20px;
  background: linear-gradient(135deg, var(--banda-1), var(--banda-2));
  color: #fff;
}
.portada-banda .saludo { font-size: 24px; font-weight: 800; }
.portada-banda .pequeno { opacity: 0.92; }
/* Un toque del color de acento (el punto del logo) bajo el saludo */
.portada-banda .saludo::after {
  content: "";
  display: block;
  width: 44px;
  height: 5px;
  margin-top: 6px;
  border-radius: 3px;
  background: var(--logo-punto);
}
@media (min-width: 720px) { .portada-banda { margin: 0 0 14px; border-radius: 18px; } }

.supermercados { display: grid; gap: 12px; margin: 8px 0 4px; }
@media (min-width: 600px) { .supermercados { grid-template-columns: repeat(3, 1fr); } }
.tarjeta-super {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: var(--superficie);
  box-shadow: var(--sombra);
  border-top: 6px solid var(--color-super);
  color: inherit;
  text-decoration: none;
}
.tarjeta-super .logo-grande {
  display: flex;
  align-items: center;
  height: 64px;
}
.tarjeta-super .logo-grande img { max-height: 64px; max-width: 70%; }
.tarjeta-super .logo-grande.con-fondo img { padding: 8px 12px; border-radius: 10px; background: #fff; }
/* Modo "solo texto": el nombre del supermercado en lugar de su logo */
.tarjeta-super .nombre-super { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; }
.tarjeta-super .dato { font-size: 15px; color: var(--texto-suave); }
.tarjeta-super .dato strong { font-size: 22px; color: var(--texto); }
.tarjeta-super[data-super="mercadona"] { --color-super: #009660; }
.tarjeta-super[data-super="dia"] { --color-super: #e30613; }
.tarjeta-super[data-super="lidl"] { --color-super: #fff000; }
.tarjeta-super[data-super="aldi"] { --color-super: #00005f; }
/* En oscuro el azul marino se pierde sobre el fondo: la franja usa el azul claro de Aldi */
@media (prefers-color-scheme: dark) {
  .tarjeta-super[data-super="aldi"] { --color-super: #5b8cff; }
}

/* ---------- Cuadrícula de productos (búsquedas, ofertas, novedades, catálogo) ----------
   Columnas: exactamente 2 en el móvil, 3 en tablet, 4 en pantallas anchas y
   5 en muy anchas. Todas las tarjetas de una fila miden lo mismo. Cada tarjeta,
   siempre en este orden y sin huecos: foto (recuadro cuadrado fijo), nombre
   (2 líneas como mucho), formato, y en una línea precio, €/kg y botón +. */
.productos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 600px) { .productos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 900px) { .productos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .productos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.productos > .vacio { grid-column: 1 / -1; }
.producto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
  overflow: hidden;
}
@media (prefers-color-scheme: dark) { .producto { border: 1px solid var(--borde); } }
.producto-enlace {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 10px;
  color: inherit;
  text-decoration: none;
}
/* Recuadro de la foto: cuadrado y del mismo tamaño en todas las tarjetas. La
   foto va "encima" (position: absolute), así nunca puede agrandar el recuadro;
   se centra y se ajusta dentro sin deformarse ni recortarse (contain). */
.producto-foto {
  position: relative;
  flex: none;
  display: block;
  margin: 0 -10px 6px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
}
.producto-foto img {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  object-fit: contain;
}
.producto-foto .sin-foto {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 40px;
  color: #9aa59f;
}
.producto-nombre {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em; /* siempre el hueco de 2 líneas: los precios quedan alineados */
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.producto-formato {
  min-height: 1.35em;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  color: var(--texto-suave);
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Etiquetas pequeñas junto al formato (supermercado y Nutri-Score) */
.producto-formato .super { padding: 0 6px; font-size: 10px; line-height: 16px; }
.producto-formato .nutriscore { width: 16px; height: 16px; border-radius: 4px; font-size: 10px; }
.producto .etiquetas { margin-top: 1px; }
.producto .etiqueta { font-size: 11px; }
.producto .hace-semana { font-size: 12px; }
.producto-antes { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.producto-antes .precio-antes { font-size: 13px; }
.producto-antes .descuento { margin-top: 0; font-size: 12px; }
/* Precio, €/kg y botón + en la misma línea, justo debajo del texto */
.producto-pie {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 8px 10px;
}
.producto-precio {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
  color: inherit;
  text-decoration: none;
}
.producto-precio .precio { font-size: 18px; }
.producto-precio .precio-ref { font-size: 12px; }
.producto-anadir { width: 40px; height: 40px; font-size: 24px; }

/* ---------- Dentro de un supermercado ---------- */
/* Opción A: pestañas Ofertas · Novedades · Catálogo, fijas arriba con el buscador */
.pestanas-super {
  display: flex;
  margin-top: 8px;
  padding: 4px;
  border-radius: 12px;
  background: var(--borde);
}
.pestanas-super a {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 42px;
  border-radius: 9px;
  color: var(--texto);
  font-weight: 600;
  text-decoration: none;
}
.pestanas-super a.activa { background: var(--marca); color: var(--marca-texto); font-weight: 700; }
/* Enlace para volver ("← Todas las categorías") y títulos de sección */
.volver {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
  font-weight: 700;
  text-decoration: none;
  color: var(--marca-fuerte);
}
.cabecera-seccion { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cabecera-seccion h2 { margin: 16px 0 8px; }
.campo-pequeno { width: auto; min-height: 44px; }
.ver-mas { margin-top: 12px; }
/* Categorías del catálogo: baldosas en cuadrícula, con el icono a la izquierda */
.categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.categoria {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 72px;
  padding: 10px 8px;
  border-radius: var(--radio);
  border-left: 5px solid var(--marca);
  background: var(--superficie);
  box-shadow: var(--sombra);
  color: inherit;
  text-decoration: none;
}
.categoria .nombre { font-size: 15px; line-height: 1.25; }
/* Si una palabra no cabe, se parte con guion, por sílabas ("recomenda-dos") */
.categoria .textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
/* Cuadradito azul con el icono y un puntito naranja (como el del logo) */
.icono-caja {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--icono-cat-fondo);
  color: var(--icono-cat);
}
.icono-caja::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--icono-cat-punto);
}
.icono-categoria { width: 22px; height: 22px; }

/* Avisos legales: al pie de cada supermercado y de algunas pantallas */
.aviso-independiente, .pie-legal {
  margin: 24px 0 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--texto-suave);
}
.aviso-independiente { padding-top: 12px; border-top: 1px solid var(--borde); }
.pie-legal { text-align: center; }
.pie-legal p { margin: 4px 0; }
.aviso-independiente a, .pie-legal a { color: inherit; }
.pie-legal a { display: inline-block; padding: 10px 4px; } /* fáciles de pulsar con el dedo */
/* «Invítame a un café»: discreto, pequeño y sin color llamativo (ni fijo ni encima de nada) */
.cafe { margin: 10px 0 0; font-size: 13px; color: var(--texto-suave); text-align: center; }
.cafe a { display: inline-block; padding: 6px 2px; color: var(--texto-suave); text-decoration: underline; }

/* ---------- Tarjetas de producto en filas (fichas antiguas) ---------- */
.tarjeta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 10px;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}
.tarjeta .enlace {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.miniatura {
  flex: none;
  width: 68px;
  height: 68px;
  border-radius: 10px;
  background: #fff;
  object-fit: contain;
}
.miniatura.vacia { display: grid; place-items: center; color: #9aa59f; font-size: 26px; }
.info { flex: 1; min-width: 0; }
.nombre { font-weight: 600; overflow-wrap: anywhere; }
.detalle { font-size: 14px; color: var(--texto-suave); }
.precio { font-size: 19px; font-weight: 800; white-space: nowrap; }
.precio-ref { font-size: 13px; color: var(--texto-suave); white-space: nowrap; }
.precio-antes { font-size: 14px; color: var(--texto-suave); text-decoration: line-through; white-space: nowrap; }
.columna-precio { text-align: right; }
.descuento {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 7px;
  border-radius: 8px;
  background: var(--acento);
  color: var(--acento-texto);
  font-size: 13px;
  font-weight: 800;
}

/* Etiquetas (supermercado, tipo de oferta...) */
.etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.super, .etiqueta {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}
/* Etiqueta de cada supermercado con su color: Mercadona verde, Dia rojo y
   Lidl amarillo (con texto azul oscuro, que se lee bien sobre el amarillo) */
.super { color: #fff; background: #6b7570; }
.super-mercadona { background: #007a4d; }
.super-dia { background: #e30613; }
.super-lidl { background: #fff000; color: #062f6e; }
.super-aldi { background: #00005f; }
.etiqueta { background: var(--naranja-suave); color: var(--texto); font-weight: 600; }
.etiqueta.club { background: #e30613; color: #fff; }
.etiqueta.plus { background: #fff000; color: #062f6e; }
/* Novedad (producto nuevo) y bajada de precio, bien distintas */
.etiqueta.novedad { background: #ffedd5; color: #9a3412; }
.etiqueta.bajada { background: #dcfce7; color: #14532d; }
/* Comparación con la semana pasada */
.etiqueta.nueva-semana { background: var(--marca); color: var(--marca-texto); }
.etiqueta.continua { background: var(--borde); color: var(--texto-suave); }
@media (prefers-color-scheme: dark) {
  .etiqueta.novedad { background: #431407; color: #fed7aa; }
  .etiqueta.bajada { background: #14361f; color: #bbf7d0; }
}
.hace-semana { font-size: 13px; color: var(--texto-suave); margin-top: 2px; }

/* Nutri-Score (colores oficiales) */
.nutriscore {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  vertical-align: middle;
}
.ns-A { background: #038141; }
.ns-B { background: #85bb2f; }
.ns-C { background: #fecb02; color: #222; }
.ns-D { background: #ee8100; }
.ns-E { background: #e63e11; }
.nutriscore.grande { width: 44px; height: 44px; font-size: 24px; border-radius: 10px; }

/* ---------- Ficha de producto ---------- */
/* La foto (ya sin bordes blancos) ocupa todo el ancho, sin márgenes, y el
   recuadro toma la proporción de la foto. Si es muy alta, se limita la altura
   (sin deformarla ni cortarla). */
.ficha-foto {
  display: flex;
  justify-content: center;
  margin: -12px -16px 14px;
  background: #fff;
}
.ficha-foto img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
}
@media (min-width: 720px) {
  .ficha-foto { margin: 0 0 14px; border-radius: var(--radio); overflow: hidden; }
}
.ficha-precio { font-size: 32px; font-weight: 800; }
.caja {
  margin: 12px 0;
  padding: 14px;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}
.caja.aviso { background: var(--naranja-suave); box-shadow: none; }
.caja.retirado { background: var(--rojo-suave); box-shadow: none; }
.estado-nutricion { display: flex; gap: 10px; align-items: flex-start; }
.estado-nutricion .icono { font-size: 22px; line-height: 1.2; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla td { padding: 8px 0; border-bottom: 1px solid var(--borde); }
.tabla td:last-child { text-align: right; font-weight: 600; }
.tabla tr.sub td:first-child { padding-left: 16px; color: var(--texto-suave); }
.grafica { width: 100%; height: 130px; display: block; }
.grafica .linea { fill: none; stroke: var(--marca-fuerte); stroke-width: 2.5; }
.grafica .punto { fill: var(--marca-fuerte); }
.grafica text { fill: var(--texto-suave); font-size: 11px; }

/* ---------- Listas ---------- */
.tarjeta-lista {
  display: block;
  margin-bottom: 10px;
  padding: 16px;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
  color: inherit;
  text-decoration: none;
}
.tarjeta-lista .nombre { font-size: 18px; }
.barra-progreso {
  height: 6px;
  margin-top: 10px;
  border-radius: 3px;
  background: var(--borde);
  overflow: hidden;
}
.barra-progreso span { display: block; height: 100%; background: var(--marca); }

.resumen-lista {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.resumen-lista .precio { font-size: 26px; }
.grupo-super {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 8px;
}
.articulos { list-style: none; margin: 0; padding: 0; }
.articulo {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  padding: 4px 4px 4px 0;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}
.articulo .marcar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 60px;
  padding: 6px 4px 6px 10px;
  border: 0;
  background: none;
  text-align: left;
}
.casilla {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--texto-suave);
  border-radius: 10px;
  color: transparent;
  font-size: 22px;
  font-weight: 800;
}
.articulo.cogido .casilla { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); }
.articulo.cogido .nombre { text-decoration: line-through; color: var(--texto-suave); }
.articulo.cogido { opacity: 0.7; box-shadow: none; }
.articulo .cantidad-tag {
  flex: none;
  min-width: 34px;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--marca-suave);
  font-weight: 700;
  text-align: center;
}
.importe { flex: none; text-align: right; font-weight: 700; padding-right: 4px; }

/* Botones de la lista: todos con el mismo estilo (color suave del tema) */
.acciones-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
/* Los interruptores, uno debajo del otro y a todo el ancho: se leen mejor */
.acciones-lista.interruptores { grid-template-columns: 1fr; }
.boton-lista {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: var(--marca-suave);
  color: var(--marca-fuerte);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
}
.boton-lista svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.boton-lista.peligro { background: var(--rojo-suave); color: var(--rojo); }
.boton-lista:disabled { opacity: 0.55; cursor: not-allowed; }

/* Recuadro de «Actualizar ahora» en la portada */
.actualizacion:empty { display: none; }
.actualizacion-titulo { font-weight: 700; }
/* Interruptores (ocultar cogidos, pantalla encendida): encendido = color
   intenso + "carril" naranja con la bolita a la derecha */
.boton-lista[role="switch"][aria-checked="true"] { background: var(--marca); color: var(--marca-texto); }
.pista {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  margin-left: auto;
  border-radius: 12px;
  background: var(--borde);
  transition: background-color 0.15s;
}
.pista::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}
[aria-checked="true"] .pista { background: var(--acento); }
[aria-checked="true"] .pista::after { transform: translateX(16px); }

/* Botones grandes fijos abajo en el modo compra (alcance del pulgar) */
.acciones-fijas {
  position: sticky;
  bottom: calc(var(--alto-pestanas) + env(safe-area-inset-bottom) + 8px);
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.acciones-fijas .boton, .acciones-fijas .boton-lista { flex: 1; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }

/* Selector de cantidad: −  2  + */
.cantidad { display: flex; align-items: center; gap: 8px; }
.cantidad button {
  width: 52px;
  height: 52px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
  font-size: 26px;
}
.cantidad output { min-width: 48px; text-align: center; font-size: 22px; font-weight: 700; }

/* Opciones a elegir (por ejemplo, a qué lista añadir) */
.opciones { display: grid; gap: 8px; }
.opcion {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
}
.opcion input { width: 22px; height: 22px; accent-color: var(--marca); }

/* ---------- Panel inferior ---------- */
.fondo-hoja {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.4);
}
.hoja {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  max-width: 720px;
  max-height: 85vh;
  margin: 0 auto;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  background: var(--fondo);
}
.hoja::before {
  content: "";
  display: block;
  width: 40px;
  height: 5px;
  margin: 0 auto 8px;
  border-radius: 3px;
  background: var(--borde);
}
.hoja h2 { margin-top: 4px; }

/* ---------- Mensaje flotante ---------- */
.mensaje {
  position: fixed;
  left: 50%;
  bottom: calc(var(--alto-pestanas) + env(safe-area-inset-bottom) + 16px);
  z-index: 30;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: 12px;
  background: #2b332f;
  color: #fff;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.mensaje.visible { opacity: 1; transform: translate(-50%, 0); }

.segmentos {
  display: flex;
  padding: 4px;
  border-radius: 12px;
  background: var(--borde);
}
.segmentos button {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  background: none;
  font-weight: 600;
}
.segmentos button.activo { background: var(--superficie); box-shadow: var(--sombra); }
.sube { color: var(--rojo); font-weight: 700; }
.baja { color: var(--bueno); font-weight: 700; }

/* ---------- Páginas legales (frontend/legal/*.html): texto largo, fácil de leer ---------- */
body.pagina-legal { padding-bottom: 32px; }
.cabecera-legal {
  display: flex;
  align-items: center;
  justify-content: center;   /* el logo, centrado como en el resto de la app */
  min-height: 60px;
  padding: 8px 16px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}
.marca-legal { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--marca-fuerte); text-decoration: none; }
.texto-legal { max-width: 720px; margin: 0 auto; padding: 8px 16px 24px; font-size: 16px; line-height: 1.6; }
.texto-legal h1 { margin: 20px 0 4px; font-size: 28px; }
.texto-legal h2 { margin: 28px 0 8px; font-size: 20px; }
.texto-legal li { margin-bottom: 6px; }
.texto-legal a { color: var(--marca-fuerte); }
.tabla-legal { overflow-x: auto; }
.tabla-legal th { text-align: left; }
.tabla-legal td, .tabla-legal th { vertical-align: top; padding: 8px 6px; }
.enlaces-legal { margin-top: 32px; text-align: center; }
/* Huecos de las plantillas, para rellenar antes de publicar */
mark.hueco { padding: 0 3px; border-radius: 4px; background: #fde047; color: #1c1917; }
.aviso-plantilla {
  margin: 16px 0;
  padding: 12px 14px;
  border: 2px dashed #ca8a04;
  border-radius: var(--radio);
  background: #fef9c3;
  color: #422006;
  font-weight: 700;
}

/* ---------- Pantallas de cuenta (entrar, registro...): sin la barra de abajo ---------- */
body.sin-pestanas { padding-bottom: 0; }
body.sin-pestanas .pestanas { display: none; }
@media (min-width: 720px) {
  body.sin-pestanas main:has(> .tarjeta-entrar) { min-height: calc(100vh - 80px); min-height: calc(100dvh - 80px); }
}

/* ---------- Oferta amable de crear una cuenta (solo a invitados) ---------- */
.oferta-cuenta { position: relative; border: 1px solid var(--marca); background: var(--marca-suave); box-shadow: none; }
.oferta-titulo { margin: 0 28px 4px 0; font-weight: 800; color: var(--marca-fuerte); }
.oferta-cuenta .botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cerrar-oferta {
  position: absolute; top: 4px; right: 4px; width: 40px; height: 40px;
  border: 0; background: none; font-size: 18px; color: var(--texto-suave);
}

/* ---------- Entrar con Google o con un enlace por email ---------- */
.separador-o { display: flex; align-items: center; gap: 12px; margin: 18px 0 6px; color: var(--texto-suave); font-size: 14px; }
.separador-o::before, .separador-o::after { content: ""; flex: 1; height: 1px; background: var(--borde); }
.boton-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 600; text-decoration: none; margin-top: 10px;
}
.icono-google { width: 20px; height: 20px; flex: none; }
#formulario-magico { margin-top: 10px; }

/* ---------- Aviso de cookies: pequeño, abajo a la derecha (en el móvil, abajo a lo ancho) ---------- */
.aviso-cookies {
  /* siempre por ENCIMA de la barra de pestañas (si no, la tapa en pantallas anchas) */
  position: fixed; z-index: 15; right: 16px; bottom: calc(var(--alto-pestanas) + env(safe-area-inset-bottom) + 12px);
  width: min(360px, calc(100vw - 32px)); padding: 12px 14px;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); color: var(--texto);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  font-size: 14px; line-height: 1.4;
}
.aviso-cookies p { margin: 0 0 10px; }
.aviso-cookies a { color: var(--marca-fuerte); font-weight: 600; }
.aviso-cookies .botones { display: flex; gap: 8px; justify-content: flex-end; }
.aviso-cookies .boton { min-height: 40px; padding: 0 16px; }
body.sin-pestanas .aviso-cookies { bottom: calc(env(safe-area-inset-bottom) + 16px); }
@media (max-width: 599px) {
  /* En el móvil, a lo ancho */
  .aviso-cookies { left: 8px; right: 8px; width: auto; bottom: calc(var(--alto-pestanas) + env(safe-area-inset-bottom) + 8px); }
  body.sin-pestanas .aviso-cookies { bottom: calc(env(safe-area-inset-bottom) + 8px); }
}

/* ---------- Mis supermercados (Ajustes) ---------- */
.lista-super { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.fila-super .boton-lista { width: 100%; justify-content: space-between; text-align: left; }
.fila-super .boton-lista[aria-checked="true"] .suave { color: rgba(255, 255, 255, 0.88); }
.fila-super .enlace-pequeno {
  margin: 2px 0 0 4px; padding: 6px 4px; border: 0; background: none;
  color: var(--marca-fuerte); font-size: 14px; font-weight: 600; text-decoration: underline;
}

/* ---------- Código postal: pastilla de la cabecera y pantalla para pedirlo ---------- */
.codigo-cabecera {
  flex: 0 1 auto; min-width: 0; max-width: 55%; display: inline-flex; align-items: center; gap: 4px;
  margin-right: 38px;   /* deja sitio al botón de ajustes, que va fijo en la esquina */
  min-height: 36px; padding: 0 10px; border-radius: 999px;
  background: var(--marca-suave); color: var(--marca-fuerte);
  font-size: 14px; font-weight: 700; text-decoration: none;
}
.codigo-cabecera[hidden] { display: none; }
.codigo-cabecera > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 599px) { [data-tema] .cp-pob { display: none; } }   /* en un supermercado, solo el número: el logo necesita sitio */
.codigo-cabecera svg { flex: none; }
.codigo-cabecera svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-tema] .codigo-cabecera { background: rgba(255, 255, 255, 0.9); color: #1f2937; }
body.sin-pestanas .codigo-cabecera { display: none; }
.campo-cp { font-size: 28px; font-weight: 800; letter-spacing: 0.2em; text-align: center; }
.cp-poblacion { min-height: 1.6em; margin: 8px 0 0; text-align: center; font-weight: 700; color: var(--bueno); }
.aviso-zona a { font-weight: 700; }

/* ---------- Panel: ficha de usuarios ---------- */
.lista-usuarios .fila-usuario { cursor: pointer; flex-wrap: nowrap; }
.lista-usuarios .fila-usuario:hover, .lista-usuarios .fila-usuario:focus-visible { background: var(--marca-suave); outline: none; }
.permisos { margin: 0 0 8px; padding-left: 20px; }
.permisos li { margin-bottom: 4px; }
/* ---------- Estadísticas del panel de administración (gráficas sencillas, una sola serie) ---------- */
.est-cifras { margin: 12px 0; }
.est-grafica { display: block; width: 100%; height: auto; }
.est-rejilla { stroke: var(--borde); stroke-width: 1; }
.est-texto { fill: var(--texto-suave); font-size: 11px; }
.est-columna { fill: var(--marca); }
.est-zona { fill: transparent; }
.est-zona:hover { fill: var(--marca-suave); }
.est-tabla { margin-top: 10px; }
.est-tabla summary { cursor: pointer; padding: 8px 0; color: var(--texto-suave); font-size: 14px; }
.est-barras { list-style: none; margin: 8px 0 0; padding: 0; }
.est-barras li { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 7px 0; }
.est-nombre { min-width: 0; overflow-wrap: anywhere; }
.est-valor { font-weight: 600; font-variant-numeric: tabular-nums; }
.est-pista { grid-column: 1 / -1; height: 8px; margin-top: 5px; border-radius: 4px; background: var(--marca-suave); overflow: hidden; }
.est-relleno { display: block; height: 100%; border-radius: 4px; background: var(--marca); }.est-grafica { max-width: 560px; margin: 0 auto; }
/* Icono de la app en la cabecera de una lista (lleva a la portada); ahí se esconde el código postal para dejar sitio al nombre */
.logo-icono { display: block; flex: none; line-height: 0; }
.logo-icono[hidden] { display: none; }
.logo-icono svg { display: block; width: 38px; height: 38px; }
body.con-icono-app .codigo-cabecera { display: none; }
/* ---------- Portada pública (dentro de index.html): la ven quienes entran por primera vez y los buscadores ---------- */
html.con-perfil #bienvenida { display: none; }     /* quien ya usa la app no la ve (ver el script del <head>) */
.bienvenida { max-width: 720px; margin: 0 auto; padding: 8px 4px 24px; line-height: 1.6; }
.bienvenida h1 { margin: 12px 0 10px; font-size: 28px; line-height: 1.2; }
.bienvenida h2 { margin: 28px 0 8px; font-size: 20px; }
.bienvenida-lead { margin: 0 0 16px; font-size: 18px; }
.bienvenida-acciones { display: grid; gap: 10px; margin: 0 0 8px; }
.bienvenida-acciones .boton { text-decoration: none; }
.bienvenida-lista { margin: 0; padding-left: 20px; }
.bienvenida-lista li { margin-bottom: 8px; }
.bienvenida details { margin: 8px 0; padding: 10px 14px; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.bienvenida summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.bienvenida details p { margin: 6px 0 4px; }
.bienvenida-pie { margin-top: 28px; text-align: center; font-size: 14px; color: var(--texto-suave); }
.bienvenida-pie a { display: inline-block; padding: 10px 6px; color: inherit; }

/* ---------- Guías públicas (frontend/guias/*.html) ---------- */
.guia-cta { margin: 28px 0; padding: 18px 16px; border-radius: var(--radio); background: var(--marca-suave); text-align: center; }
.guia-cta p { margin: 0 0 12px; font-weight: 700; }
.guia-cta .boton { text-decoration: none; }
.guia-lista { list-style: none; padding: 0; margin: 16px 0; }
.guia-lista li { margin: 0 0 12px; padding: 14px 16px; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.guia-lista a { font-weight: 800; font-size: 18px; text-decoration: none; }
.guia-lista p { margin: 4px 0 0; color: var(--texto-suave); font-size: 15px; }
.texto-legal .migas { margin: 12px 0 0; font-size: 14px; color: var(--texto-suave); }
.texto-legal .migas a { color: inherit; }
.texto-legal table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.texto-legal th, .texto-legal td { padding: 8px 6px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }