/* Compra: la lista de casa. Todo sale de estos valores (docs/rediseno-2.md, apartado 3): 6 tamaños de
   letra, 3 pesos, una escala de espacios, 6 radios y los colores de claro y oscuro, medidos. El verde solo
   dice "en la lista, cogido o lo principal"; el color de cada súper solo dice qué súper es. */
:root {
  --letra: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* letra: peso tamaño/interlineado */
  --t-portada: 700 1.625rem/2rem var(--letra);
  --t-titulo: 700 1.25rem/1.625rem var(--letra);
  --t-nombre: 600 1.0625rem/1.375rem var(--letra);
  --t-cuerpo: 400 1rem/1.375rem var(--letra);
  --t-detalle: 400 .875rem/1.125rem var(--letra);
  --t-mini: 600 .75rem/1rem var(--letra);
  /* espacios */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  /* esquinas */
  --r-xs: 6px; --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 24px; --r-pill: 999px;
  /* barras */
  --fila-1: 48px; --barra: 56px; --alto-pie: 60px; --columna: 560px;
  /* (el contenido de las barras, en la misma columna que la página: en tableta no queda lejos) */
  --lado: max(var(--e4), calc((100% - var(--columna)) / 2 + var(--e4)));
  /* movimiento */
  --m-rapida: 120ms; --m-media: 200ms; --m-lenta: 260ms;
  --ease-salida: cubic-bezier(.2, .8, .2, 1);
  --ease-entrada: cubic-bezier(.4, 0, 1, 1);

  --bg: #f5f4f0;
  --superficie: #ffffff;
  --superficie-elevada: #ffffff;
  --relleno: #eeece6;
  --relleno-fuerte: #e3e0d8;
  --linea: #e3e0d8;
  --linea-fuerte: #cfcbc1;
  --borde-control: #8a877e;
  --tinta: #1c1c1a;
  --tinta-2: #4f4e49;
  --tinta-3: #6b6a63;
  --acento: #1f7a4d;
  --sobre-acento: #ffffff;
  --acento-suave: #e2f1e8;
  --acento-texto: #1a6b43;
  --nota-fondo: #fff4cc;
  --nota-tinta: #6b4e00;
  --aviso-fondo: #fff1d6;
  --aviso-tinta: #7a4b00;
  --peligro: #b3261e;
  --peligro-suave: #fce8e6;
  --sobre-peligro: #ffffff;
  --foco: #1f5fd1;
  --toast-fondo: #262624;
  --toast-tinta: #ffffff;
  --toast-accion: #8fe0b2;
  --pulsado: rgb(28 28 26 / 8%);
  --pulsado-suave: rgb(28 28 26 / 4%);
  --velo: rgb(0 0 0 / 45%);
  --foto-fondo: #ffffff;
  --foto-filtro: none;
  --sombra-1: 0 1px 2px rgb(0 0 0 / 6%), 0 0 0 1px rgb(0 0 0 / 3%);
  --sombra-2: 0 -1px 0 var(--linea), 0 -4px 16px rgb(0 0 0 / 6%);
  --sombra-3: 0 12px 40px rgb(0 0 0 / 22%);
  /* los súper (su color solo dice qué súper es: nunca texto ni estado) */
  --s-mercadona: #009660; --s-lidl: #0050aa; --s-alcampo: #e0001a; --s-consum: #ff9800; --s-aldi: #202b78;
  --s-froiz: #c92b28; --s-gadis: #161616; --s-carrefour: #00529c; --s-supeco: #fed300; --s-neutro: #8a877e;
  color-scheme: light;
}
/* oscuro: el del móvil, salvo que en Ajustes se haya elegido claro; o elegido a mano */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg: #121412; --superficie: #1c1f1c; --superficie-elevada: #242824; --relleno: #333832; --relleno-fuerte: #3d433c;
    --linea: #2f332e; --linea-fuerte: #4a4e48; --borde-control: #8e8d86;
    --tinta: #ecebe6; --tinta-2: #b4b3ac; --tinta-3: #a3a29b;
    --acento: #4cc38a; --sobre-acento: #06140d; --acento-suave: #183526; --acento-texto: #6bd3a0;
    --nota-fondo: #3a3215; --nota-tinta: #f3d77a; --aviso-fondo: #3a2c12; --aviso-tinta: #f5c46b;
    --peligro: #ff8a80; --peligro-suave: #3b1f1d; --sobre-peligro: #2a0a08; --foco: #8ab4ff;
    --toast-fondo: #ecebe6; --toast-tinta: #121412; --toast-accion: #1a6b43;
    --pulsado: rgb(236 235 230 / 10%); --pulsado-suave: rgb(236 235 230 / 5%); --velo: rgb(0 0 0 / 60%);
    --foto-filtro: brightness(.92);
    --sombra-1: none; --sombra-2: 0 -1px 0 var(--linea); --sombra-3: 0 0 0 1px var(--linea);
    --s-mercadona: #00b377; --s-lidl: #fff000; --s-alcampo: #ff4d5e; --s-aldi: #00b6ed; --s-froiz: #ff5a4e;
    --s-gadis: #e8e8e8; --s-carrefour: #3b82d6; --s-neutro: #a3a29b;
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --bg: #121412; --superficie: #1c1f1c; --superficie-elevada: #242824; --relleno: #333832; --relleno-fuerte: #3d433c;
  --linea: #2f332e; --linea-fuerte: #4a4e48; --borde-control: #8e8d86;
  --tinta: #ecebe6; --tinta-2: #b4b3ac; --tinta-3: #a3a29b;
  --acento: #4cc38a; --sobre-acento: #06140d; --acento-suave: #183526; --acento-texto: #6bd3a0;
  --nota-fondo: #3a3215; --nota-tinta: #f3d77a; --aviso-fondo: #3a2c12; --aviso-tinta: #f5c46b;
  --peligro: #ff8a80; --peligro-suave: #3b1f1d; --sobre-peligro: #2a0a08; --foco: #8ab4ff;
  --toast-fondo: #ecebe6; --toast-tinta: #121412; --toast-accion: #1a6b43;
  --pulsado: rgb(236 235 230 / 10%); --pulsado-suave: rgb(236 235 230 / 5%); --velo: rgb(0 0 0 / 60%);
  --foto-filtro: brightness(.92);
  --sombra-1: none; --sombra-2: 0 -1px 0 var(--linea); --sombra-3: 0 0 0 1px var(--linea);
  --s-mercadona: #00b377; --s-lidl: #fff000; --s-alcampo: #ff4d5e; --s-aldi: #00b6ed; --s-froiz: #ff5a4e;
  --s-gadis: #e8e8e8; --s-carrefour: #3b82d6; --s-neutro: #a3a29b;
  color-scheme: dark;
}
[data-tienda="mercadona"] { --s-actual: var(--s-mercadona); }
[data-tienda="lidl"] { --s-actual: var(--s-lidl); }
[data-tienda="alcampo"] { --s-actual: var(--s-alcampo); }
[data-tienda="consum"] { --s-actual: var(--s-consum); }
[data-tienda="aldi"] { --s-actual: var(--s-aldi); }
[data-tienda="froiz"] { --s-actual: var(--s-froiz); }
[data-tienda="gadis"] { --s-actual: var(--s-gadis); }
[data-tienda="carrefour"] { --s-actual: var(--s-carrefour); }
[data-tienda="supeco"] { --s-actual: var(--s-supeco); }

/* ---- base ---- */
* { box-sizing: border-box; }
html {
  font-size: 100%; -webkit-text-size-adjust: 100%;
  /* (el foco nunca queda debajo de lo fijo: arriba, la barra y una banda; abajo, las pestañas y la acción) */
  scroll-padding-top: calc(var(--alto-fijo, 0px) + 40px);
  scroll-padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom) + var(--alto-accion, 0px) + var(--e4));
}
body {
  margin: 0; background: var(--bg); color: var(--tinta); font: var(--t-cuerpo);
  -webkit-tap-highlight-color: transparent; hyphens: manual; overflow-wrap: break-word;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--acento-texto); text-underline-offset: 2px; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
/* (lo que va de borde a borde de la pantalla, con el anillo por dentro: si no, se sale por los lados) */
:is(.fila-principal, .fila-mas, .barra button):focus-visible { outline-offset: -2px; }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
::placeholder { color: var(--tinta-3); opacity: 1; }
img { max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
small { font: var(--t-detalle); color: var(--tinta-2); }
b, strong { font-weight: 600; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.num { font-variant-numeric: tabular-nums; }
.invisible { visibility: hidden; }

/* Pulsado: una capa encima de cualquier fondo, al instante; en tarjetas y losas, además, se encogen.
   Con ratón, la mitad al pasar por encima */
:where(button, summary, label.fila-opcion, .chip, [role="option"]):not(:disabled):active { background-image: linear-gradient(var(--pulsado), var(--pulsado)); }
:is(.tarjeta, .losa) { transition: transform var(--m-rapida) var(--ease-salida); }
:is(button.tarjeta, .losa):not(:disabled, [aria-disabled="true"]):active { transform: scale(.97); }
@media (hover: hover) {
  :where(button, summary, label.fila-opcion):not(:disabled):hover { background-image: linear-gradient(var(--pulsado-suave), var(--pulsado-suave)); }
  :where(.titulo-lista, .enlace):hover { background-image: none; }
}

/* iconos (el sprite de index.html) */
.i { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.i--16 { width: 16px; height: 16px; }
.i--20 { width: 20px; height: 20px; }

/* logos de los súper: en su loseta blanca (en claro y en oscuro) */
.logo { display: inline-block; flex: none; width: 20px; height: 20px; padding: 1px; border-radius: 22%; object-fit: contain; background: #ffffff;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%); vertical-align: middle; }
.logo.l16, .logo.l20 { width: 20px; height: 20px; padding: 1px; }
.logo.l24 { width: 24px; height: 24px; padding: 2px; }
.logo.l32 { width: 32px; height: 32px; padding: 3px; }
.logo.l40 { width: 40px; height: 40px; padding: 4px; }
.logo-todos { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 22%; background: var(--relleno); color: var(--tinta-2); vertical-align: middle; }
.logo-todos .i { width: 16px; height: 16px; }
:is(.logo-todos.l32, .logo-todos.l40) .i { width: 24px; height: 24px; }
.logo-todos.l24 { width: 24px; height: 24px; } .logo-todos.l32 { width: 32px; height: 32px; } .logo-todos.l40 { width: 40px; height: 40px; }

/* ---- botones ---- */
.boton-principal, .boton-secundario, .boton-peligro {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: 48px; padding: 0 20px;
  border-radius: var(--r-m); border: 0; font: var(--t-cuerpo); font-weight: 600; text-align: center; text-decoration: none;
}
.boton-principal { background: var(--acento); color: var(--sobre-acento); }
.boton-secundario { background: var(--relleno); color: var(--tinta); }
.boton-peligro { background: var(--peligro-suave); color: var(--peligro); }
.boton-peligro.lleno { background: var(--peligro); color: var(--sobre-peligro); }
:is(.boton-principal, .boton-secundario, .boton-peligro, .boton-texto):disabled { opacity: .4; cursor: default; }
.boton-texto {
  display: inline-flex; align-items: center; gap: var(--e1); min-height: 44px; padding: 0 var(--e2); border: 0; border-radius: var(--r-s);
  background: none; color: var(--tinta-2); font: var(--t-cuerpo); font-weight: 600;
}
.boton-texto.peligro { color: var(--peligro); }
/* compacto: 40 a la vista, 44 para el dedo */
.boton-compacto { position: relative; min-height: 40px; padding: 0 var(--e3); }
.boton-compacto::before { content: ""; position: absolute; inset: -2px 0; }
.boton-icono { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: var(--r-pill); background: none; color: var(--tinta-2); padding: 0; }
.enlace { position: relative; border: 0; background: none; padding: 0; color: var(--acento-texto); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* (se toca bien aunque vaya dentro de una frase) */
.enlace::after { content: ""; position: absolute; inset: -8px -6px -18px; }
.enlace:active { background-image: none; }
.enlace:active::after { background: var(--pulsado); border-radius: var(--r-s); }

/* ---- campos ---- */
.campo { display: grid; gap: var(--e2); min-width: 0; }
.campo > span:not(.con-unidad), .campo > legend { font: var(--t-detalle); font-weight: 600; color: var(--tinta); padding: 0; }
fieldset.campo { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.campo > legend.etiqueta-seccion { font: var(--t-mini); color: var(--tinta-2); margin-bottom: var(--e2); }
.entrada-form input, .campo input:not([type="radio"]):not([type="checkbox"]), .campo select, .campo textarea, .rango input, .rango select {
  width: 100%; min-height: 48px; padding: 0 var(--e3); border-radius: var(--r-m); border: 1px solid var(--borde-control); background: var(--superficie);
  font: var(--t-cuerpo); font-size: max(1rem, 16px);
}
.campo textarea { min-height: 96px; padding-block: var(--e3); }
:is(.campo, .rango) :is(input, select, textarea):disabled { opacity: .4; }
:is(.entrada-form, .campo, .rango) :is(input, select, textarea):focus-visible { outline: 2px solid var(--foco); outline-offset: 0; border-color: var(--foco); }
.campo select, .rango select {
  -webkit-appearance: none; appearance: none; padding-right: 40px;
  background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a877e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 20px;
}
.con-unidad { position: relative; display: block; }
.con-unidad input { padding-right: 72px; }
.campo .con-unidad input { padding-right: 72px; }
.con-unidad > span { position: absolute; right: var(--e3); top: 50%; transform: translateY(-50%); color: var(--tinta-2); font-weight: 600; pointer-events: none; }
.rango { display: grid; grid-template-columns: 1fr auto 1fr 88px; gap: var(--e2); align-items: center; }
.rango > span { color: var(--tinta-2); }
.rango > label { font: var(--t-mini); color: var(--tinta-2); margin-bottom: calc(-1 * var(--e1)); }
.casilla { display: flex; align-items: center; gap: var(--e3); min-height: 48px; font-weight: 600; cursor: pointer; }
.casilla input { width: 22px; height: 22px; accent-color: var(--acento); flex: none; margin: 0; }
.ayuda { font: var(--t-detalle); color: var(--tinta-2); }
.error { color: var(--peligro); font: var(--t-detalle); }
.error:empty { display: none; }
/* (el error del servidor al entrar tiene su línea guardada: al salir no mueve lo de debajo) */
#entrada-error:empty { display: block; min-height: 1lh; }
.error-campo { display: flex; align-items: flex-start; gap: var(--e1); margin-top: calc(-1 * var(--e2)); }
.error-campo::before, .hoja-error::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 16H3zM12 10v4M12 17v.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 16H3zM12 10v4M12 17v.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hoja-error { display: flex; align-items: flex-start; gap: var(--e1); }
[aria-invalid="true"], :is(.entrada-form, .campo, .rango) [aria-invalid="true"] { border: 2px solid var(--peligro); }
:is(.entrada-form, .campo, .rango) [aria-invalid="true"]:focus-visible { border-color: var(--peligro); }

/* buscador (y el campo para apuntar): caja rellena, con su icono y su ✕ */
.caja-busqueda { position: relative; }
.caja-busqueda > .i { position: absolute; left: var(--e3); top: 50%; transform: translateY(-50%); color: var(--tinta-2); pointer-events: none; }
.caja-busqueda input {
  width: 100%; min-height: 48px; padding: 0 44px; border: 0; border-radius: var(--r-m); background: var(--relleno);
  box-shadow: inset 0 0 0 1px var(--borde-control); /* (el borde del campo se ve también escrito: 3:1) */
  font: var(--t-cuerpo); font-size: max(1rem, 16px); -webkit-appearance: none; appearance: none;
}
.caja-busqueda input:focus { background: var(--superficie); }
.caja-busqueda input:focus-visible { outline: 2px solid var(--foco); outline-offset: 0; }
.caja-busqueda input::-webkit-search-cancel-button { display: none; }
.caja-busqueda .limpiar { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }

/* ---- arriba: la lista y lo que se queda fijo ---- */
/* (fija con la primera fila por encima de la pantalla: al bajar, solo se queda lo de debajo) */
.cabecera {
  position: sticky; top: calc(-1 * var(--alto-fila-1, calc(var(--fila-1) + env(safe-area-inset-top)))); z-index: 10; background: var(--bg);
}
/* (con el foco en su primera fila, que se esconde al bajar, la cabecera entera baja: el foco nunca queda tapado) */
.cabecera:has(.cabecera-fila :focus-visible) { top: 0; }
.cabecera.con-borde { box-shadow: 0 1px 0 var(--linea); }
.cabecera-fila {
  display: flex; align-items: center; gap: var(--e1); min-height: calc(var(--fila-1) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--e1), calc((100% - var(--columna)) / 2 + var(--e1))) 0 var(--lado);
}
.titulo-lista {
  position: relative; flex: 0 1 auto; min-width: 0; margin-right: auto; display: inline-flex; align-items: center; gap: var(--e1);
  min-height: 44px; padding: 0; border: 0; background: none; font: var(--t-titulo); color: var(--tinta); text-align: left;
}
.titulo-lista > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titulo-lista .i { color: var(--tinta-2); }
.titulo-lista::before { content: ""; position: absolute; inset: 0 -8px; border-radius: var(--r-s); }
.titulo-lista:active { background-image: none; }
.titulo-lista:active::before { background: var(--pulsado); }
.insignia {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: var(--e1); min-height: 28px; padding: 0 10px; border: 0;
  border-radius: var(--r-pill); font: var(--t-mini); white-space: nowrap;
}
.insignia { padding: 0 var(--e3); }
.insignia::before { content: ""; position: absolute; inset: -8px 0; }
.insignia-rol { background: var(--relleno); color: var(--tinta-2); }
.estado-red { background: var(--aviso-fondo); color: var(--aviso-tinta); }
.fijo { padding: 0 var(--lado); }
.fijo > .caja-busqueda { margin-top: var(--e2); }
.fijo .chips { margin: 0 calc(-1 * var(--lado)); padding: var(--e2) var(--lado); }
/* comprando en un súper: la raya de su color */
#fijo-lista[data-tienda] { border-bottom: 3px solid var(--s-actual); }

/* fila de chips: una línea que se desliza */
.chips { display: flex; gap: var(--e2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--e4)); padding: var(--e2) var(--e4); scroll-padding-inline: var(--e4); }
.chips::-webkit-scrollbar { display: none; }
/* un chip: 36 a la vista; para el dedo, 44 (su ::before) */
.chip {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--e3);
  border: 0; border-radius: var(--r-pill); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea-fuerte); color: var(--tinta);
  font: var(--t-detalle); font-weight: 600; white-space: nowrap;
}
.chip::before { content: ""; position: absolute; inset: -4px 0; }
.chip[aria-pressed="true"] { background-color: var(--tinta); color: var(--bg); box-shadow: none; }
.chip.puesto { background-color: var(--acento-suave); color: var(--acento-texto); box-shadow: none; }
.chip .dato { font-weight: 400; color: var(--tinta-2); }
.chip[aria-pressed="true"] .dato { color: var(--bg); }
.chip .cuantos { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 var(--e1); border-radius: var(--r-pill); background: var(--acento); color: var(--sobre-acento); font: var(--t-mini); font-weight: 700; }
.chip[aria-pressed="true"] .cuantos { background: var(--bg); color: var(--tinta); }
.chip-super { padding-left: var(--e2); }
.chip-super > .i { color: var(--tinta-2); }
.chip-con-logo { padding-left: var(--e2); }
.chip-comparar > .i { color: var(--tinta-2); }

/* ---- lo de debajo de la cabecera ---- */
main { max-width: var(--columna); margin: 0 auto; padding: 0 var(--e4) calc(var(--barra) + env(safe-area-inset-bottom) + var(--alto-accion, 0px) + var(--e6)); }
#tienda { display: flow-root; } /* (el margen del título no se sale: no salta al pasar de cargando a vacío) */
.titulo-seccion { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); margin: var(--e5) 0 var(--e2);
  font: var(--t-mini); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); }
.etiqueta-seccion { font: var(--t-mini); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); }

/* ---- abajo: las pestañas ---- */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(3, 1fr);
  min-height: calc(56px + env(safe-area-inset-bottom)); padding: 0 max(0px, calc((100% - var(--columna)) / 2)) env(safe-area-inset-bottom);
  background: var(--superficie-elevada); box-shadow: var(--sombra-2);
}
.barra button { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; padding: var(--e1) 0 var(--e1); border: 0; background: none; color: var(--tinta-2); font: var(--t-mini); }
.barra button:active { background-image: none; }
.barra .indicador { position: relative; display: grid; place-items: center; width: 56px; height: 28px; border-radius: var(--r-pill); }
.barra button:active .indicador { background-image: linear-gradient(var(--pulsado), var(--pulsado)); }
@media (hover: hover) { .barra button:hover { background-image: none; } .barra button:hover .indicador { background-image: linear-gradient(var(--pulsado-suave), var(--pulsado-suave)); } }
.barra button[aria-current="page"] { color: var(--acento-texto); font-weight: 700; }
.barra button[aria-current="page"] .indicador { background-color: var(--acento); color: var(--sobre-acento); }
.cuenta:not(:empty) {
  position: absolute; top: -.25rem; left: calc(50% + 6px); min-width: 1.125rem; height: 1.125rem; padding: 0 .3125rem; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--acento); color: var(--sobre-acento); font: var(--t-mini); font-weight: 700;
  box-shadow: 0 0 0 2px var(--superficie-elevada);
}

/* ---- "Terminar compra", fija encima de las pestañas, en cualquier modo ---- */
.accion-fija {
  position: fixed; left: 0; right: 0; bottom: calc(var(--barra) + env(safe-area-inset-bottom)); z-index: 9; container-type: inline-size;
  display: flex; align-items: center; gap: var(--e3); min-height: var(--alto-pie); padding: var(--e2) var(--lado);
  background: var(--superficie-elevada); box-shadow: var(--sombra-2);
  transition: transform var(--m-media) var(--ease-salida), display var(--m-media) allow-discrete;
}
@starting-style { .accion-fija { transform: translateY(100%); } }
.accion-fija[hidden] { display: none; transform: translateY(100%); }
.accion-fija > span { flex: 1; min-width: 0; font: var(--t-detalle); color: var(--tinta-2); }
.accion-fija strong { color: var(--tinta); font-weight: 600; }
.accion-fija .boton-principal { min-height: 44px; }
.accion-fija .solo-grande { display: none; }
@container (max-width: 20rem) {
  .accion-fija > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .accion-fija .boton-principal { flex: 1; }
  .accion-fija .solo-grande { display: inline; }
}
/* con el teclado arriba no hay barras abajo: tapan lo que se escribe */
html.teclado :is(.barra, .accion-fija) { display: none; }

/* ---- Lista ---- */
.apuntar { margin-top: var(--e2); }
.caja-apuntar > .i { color: var(--acento-texto); }
/* (con el foco en el campo, justo bajo lo fijo: al enfocarlo y al enseñar el cursor mientras se escribe) */
html:has(.caja-apuntar input:focus) { scroll-padding-top: calc(var(--alto-fijo, 0px) + var(--e2)); }
.sugerencias-apuntar { list-style: none; margin: var(--e2) 0 0; padding: 0; }
.sugerencias-apuntar [role="option"] { cursor: pointer; }
.sugerencias-apuntar [role="option"]:active { background-image: linear-gradient(var(--pulsado), var(--pulsado)); }
.sugerencias-apuntar [aria-selected="true"] { background-color: var(--relleno); outline: 2px solid var(--foco); outline-offset: -2px; }
.sugerencias-apuntar .tecla { display: inline-flex; align-items: center; gap: var(--e1); font: var(--t-mini); color: var(--tinta-2); }
.sugerencias-apuntar .ya { display: inline-flex; align-items: center; gap: var(--e1); font: var(--t-detalle); color: var(--acento-texto); font-weight: 600; white-space: nowrap; }
.sugerencias-apuntar .miniatura, .sugerencias-apuntar .miniatura-vacia { width: 32px; height: 32px; padding: 2px; }
.resumen { margin: var(--e2) 0; font: var(--t-detalle); color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: var(--e1); align-items: baseline; }
.resumen > :has(+ :not(.enlace))::after { content: "·"; content: "·" / ""; margin-left: var(--e1); }
.resumen strong { color: var(--tinta); font-weight: 600; }
.resumen .derecha { margin-left: auto; }
.pista { display: flex; align-items: center; gap: var(--e3); margin: var(--e3) 0; padding: var(--e2) var(--e2) var(--e2) var(--e3); border-radius: var(--r-m); background: var(--relleno); font: var(--t-detalle); }
.pista > .i { color: var(--tinta-2); }
.pista span { flex: 1; }
.pista > .boton-icono { flex: none; margin: calc(-1 * var(--e2)) 0; }
.pista .enlace { color: var(--acento-texto); }

/* una sección: su banda (fija al bajar) y sus filas, planas y a todo el ancho */
.grupo-cabecera {
  position: sticky; top: var(--alto-fijo, 0px); z-index: 2; display: flex; justify-content: space-between; align-items: center;
  min-height: 2rem; margin: 0 calc(-1 * var(--e4)); padding: var(--e1) var(--e4); background: var(--bg); gap: var(--e2);
  font: var(--t-mini); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2);
}
.filas { list-style: none; margin: 0 calc(-1 * var(--e4)); padding: 0; background: var(--superficie); container-type: inline-size; }
.fila { position: relative; display: flex; align-items: stretch; transition: background-color 1s ease-out; }
.fila + .fila::before { content: ""; position: absolute; top: 0; left: 116px; right: 0; height: 1px; background: var(--linea); }
.fila.nueva { background-color: var(--acento-suave); transition: none; }
/* deslizar (app.js): a la derecha, al carro; a la izquierda, «Quitar» */
.fila { touch-action: pan-y pinch-zoom; }
.fila img { -webkit-user-drag: none; }
.fila.con-fondos { user-select: none; }
.fila.con-fondos { overflow: hidden; }
.fila.con-fondos > :is(.fila-principal, .fila-mas) { position: relative; z-index: 1; background: var(--superficie); transform: translateX(var(--dx, 0)); }
.fila.animando > :is(.fila-principal, .fila-mas) { transition: transform var(--m-media) var(--ease-salida); }
.fila-fondos { position: absolute; inset: 0; font: var(--t-detalle); font-weight: 600; }
.fila[data-lado="derecha"] .fila-fondos { background: var(--acento); }
.fila[data-lado="izquierda"] .fila-fondos { background: var(--peligro); }
.fondo-tachar { position: absolute; inset: 0 auto 0 0; display: flex; align-items: center; gap: var(--e2); padding-left: var(--e4); color: var(--sobre-acento); }
.fondo-quitar { position: absolute; inset: 0 0 0 auto; width: 88px; display: grid; place-content: center; justify-items: center; gap: 2px; border: 0; background: none; color: var(--sobre-peligro); font: inherit; }
.fila.del-todo .fondo-quitar { width: 50%; }
.fila:not([data-lado="derecha"]) .fondo-tachar, .fila:not([data-lado="izquierda"]) .fondo-quitar { visibility: hidden; }
.fila-principal {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 28px 48px minmax(0, 1fr); gap: var(--e3); align-items: start;
  min-height: 64px; padding: var(--e2) 0 var(--e2) var(--e4); border: 0; background: none; text-align: left; color: var(--tinta);
}
.marca { width: 28px; height: 28px; margin-top: 10px; border-radius: 50%; border: 2px solid var(--borde-control); display: grid; place-items: center;
  transition: background-color var(--m-rapida), border-color var(--m-rapida); }
.marca .i { width: 18px; height: 18px; color: var(--sobre-acento); stroke-width: 2.6; opacity: 0; transform: scale(.6); transition: transform var(--m-rapida) var(--ease-salida), opacity var(--m-rapida); }
.cogido .marca { background: var(--acento); border-color: var(--acento); }
.cogido .marca .i { opacity: 1; transform: none; }
.fila-foto { position: relative; display: block; width: 48px; height: 48px; }
.miniatura, .miniatura-vacia { display: block; width: 48px; height: 48px; border-radius: var(--r-s); object-fit: contain; background: var(--foto-fondo); padding: 3px; filter: var(--foto-filtro); }
.miniatura-vacia { display: grid; place-items: center; font: var(--t-titulo); color: var(--tinta-2); background: var(--relleno); padding: 0; filter: none; }
.cantidad {
  position: absolute; right: -4px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--tinta); color: var(--bg); font: var(--t-mini); font-weight: 700; box-shadow: 0 0 0 2px var(--superficie); white-space: nowrap;
}
.fila-textos { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding-top: 2px; }
.fila-nombre { font: var(--t-nombre); }
.fila-meta { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--e2); font: var(--t-detalle); color: var(--tinta-2); }
.fila-detalle { flex: 1 1 8rem; min-width: 0; }
.precio-fila { margin-left: auto; display: inline-flex; align-items: center; gap: var(--e1); font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.precio-fila.sin { font-weight: 400; color: var(--tinta-3); }
/* (el logo, de 20, no hace la línea más alta que el texto: la fila de una línea mide 64) */
.fila-meta .precio-fila { height: 1.125rem; align-self: flex-start; }
.precio-fila .otros-super { font: var(--t-mini); color: var(--tinta-2); }
/* (de oferta: la web dice el precio de siempre) */
.oferta { padding: 0 4px; border-radius: var(--r-xs); background: var(--aviso-fondo); color: var(--aviso-tinta); font: var(--t-mini); font-weight: 600; }
.cogido .oferta { background: none; color: var(--tinta-3); }
.precio-fila .junto { display: inline-flex; align-items: center; gap: var(--e1); }
.fila-otras { font: var(--t-detalle); color: var(--tinta-2); }
.nota { justify-self: start; display: inline-flex; align-items: flex-start; gap: var(--e1); max-width: 100%; margin-top: 2px; padding: 2px 6px; border-radius: var(--r-xs);
  background: var(--nota-fondo); color: var(--nota-tinta); font: var(--t-detalle); }
.nota .i { margin-top: 1px; }
.si-no-hay { font: var(--t-detalle); color: var(--tinta); }
.si-no-hay b { font-weight: 600; }
.contexto { font: var(--t-detalle); color: var(--tinta-2); display: flex; align-items: center; gap: var(--e1); flex-wrap: wrap; }
.fila-mas { position: relative; flex: none; width: 44px; border: 0; background: none; color: var(--tinta-2); display: grid; place-items: center; padding: 0; }
.cogido .fila-nombre { text-decoration: line-through; color: var(--tinta-3); }
.cogido .miniatura { opacity: .45; }
.cogido :is(.fila-meta, .fila-otras, .precio-fila, .precio-fila .otros-super) { color: var(--tinta-3); }
/* «Solo ver»: sin casilla ni ⋯, y la fila no es un botón */
div.fila-principal { grid-template-columns: 48px minmax(0, 1fr); padding-right: var(--e4); cursor: default; }
div.fila-principal + .fila-mas { display: none; }
.solo-ver .fila + .fila::before { left: 76px; }
/* con letra grande (o una pantalla muy estrecha), la foto pequeña y el precio debajo */
@container (max-width: 22rem) {
  .fila-principal { grid-template-columns: 28px 32px minmax(0, 1fr); }
  div.fila-principal { grid-template-columns: 32px minmax(0, 1fr); }
  .fila-foto, .fila-foto .miniatura, .fila-foto .miniatura-vacia { width: 32px; height: 32px; }
  .fila-foto .miniatura-vacia { font: var(--t-detalle); font-weight: 700; }
  .fila-meta { flex-direction: column; align-items: flex-start; }
  .fila-detalle { flex: none; }
  .precio-fila { margin-left: 0; }
  .fila + .fila::before { left: 100px; }
  .solo-ver .fila + .fila::before { left: 60px; }
}
details.otros { margin-top: var(--e5); }
details.otros summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--e2); min-height: 48px; margin: 0 calc(-1 * var(--e4)); padding: 0 var(--e4);
  font: var(--t-detalle); font-weight: 600; color: var(--tinta);
}
details.otros summary::-webkit-details-marker { display: none; }
details.otros summary .i { color: var(--tinta-2); transition: transform var(--m-rapida); }
details.otros[open] summary .i { transform: rotate(90deg); }
details.otros > p { padding: 0 0 var(--e3); }
.vacio { display: grid; gap: var(--e2); justify-items: start; padding: var(--e6) 0 var(--e3); color: var(--tinta-2); text-align: left; }
.vacio strong { color: var(--tinta); font: var(--t-titulo); }
.vacio .boton-principal, .vacio .boton-secundario { margin-top: var(--e3); }

/* ---- tarjetas de producto ---- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--e2); }
.rejilla--filas { grid-template-columns: minmax(0, 1fr); }
.celda { position: relative; display: grid; }
.tarjeta {
  position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left; color: var(--tinta);
  border: 0; border-radius: var(--r-m); background: var(--superficie); box-shadow: var(--sombra-1);
}
.tarjeta-foto { position: relative; display: block; aspect-ratio: 1; padding: var(--e2); background: var(--foto-fondo); filter: var(--foto-filtro); }
.tarjeta-foto .foto { display: block; width: 100%; height: 100%; object-fit: contain; }
.tarjeta-foto .foto-vacia { display: grid; place-items: center; width: 100%; height: 100%; border-radius: var(--r-s); font: var(--t-portada); color: var(--tinta-2); background: var(--relleno); }
/* el sello (la única marca sobre la foto): no está, por coger o en el carro. Colores fijos: la foto siempre es blanca */
.sello {
  position: absolute; right: var(--e2); bottom: var(--e2); min-width: 28px; height: 28px; padding: 0 var(--e1); border-radius: var(--r-pill);
  display: grid; place-items: center; background: #ffffff; color: #1c1c1a; box-shadow: inset 0 0 0 1.5px #6b6a63; font: var(--t-detalle); font-weight: 700;
}
.sello .i { width: 18px; height: 18px; stroke-width: 2.4; }
.en-lista .sello { background: #1f7a4d; color: #ffffff; box-shadow: none; }
.salta .sello { animation: salto var(--m-media) var(--ease-salida); }
.en-carro .sello { background: #eeece6; color: #4f4e49; box-shadow: none; }
.en-carro .tarjeta-foto .foto { opacity: .6; }
@keyframes salto { 0% { transform: scale(.8); } 60% { transform: scale(1.08); } 100% { transform: none; } }
.tarjeta-textos { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: var(--e2) var(--e2) 10px; }
.tarjeta-nombre { font: var(--t-detalle); font-weight: 600; min-height: 2.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta-meta { font: var(--t-mini); font-weight: 400; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta-meta.fuerte { font-weight: 600; color: var(--tinta); }
.precios { display: flex; align-items: center; gap: var(--e1); margin-top: auto; padding-top: var(--e1); min-height: 24px; padding-right: var(--e4); }
.precios .precio-fila { margin-left: 0; font: var(--t-detalle); font-weight: 600; flex-wrap: wrap; row-gap: 2px; } /* («oferta» encima si no cabe) */
.precios .sin-precio { display: inline-flex; align-items: center; gap: var(--e1); font: var(--t-mini); font-weight: 400; color: var(--tinta-3); }
/* los botones de la tarjeta, fuera de la foto: ⋯ (editar) abajo a la derecha; ☆ (guardar) arriba a la derecha */
.control {
  position: absolute; right: var(--e1); bottom: var(--e1); z-index: 1; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; background: none; color: var(--tinta-2);
}
.control .i { width: 20px; height: 20px; }
/* (en las tarjetas de 3 columnas, ⋮ en vertical y en la esquina: así el precio cabe a su lado) */
.celda:not(.celda--web) .control { right: 0; bottom: 0; }
.control--mas .i { transform: rotate(90deg); }
.control.lleno { color: var(--tinta); }
.control.lleno .i { fill: currentColor; }
div.tarjeta { cursor: default; }
.tarjeta[aria-disabled="true"] { cursor: progress; }
.cargando-puntos { display: inline-flex; gap: 2px; }
.cargando-puntos span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: latido 900ms infinite ease-in-out; }
.cargando-puntos span:nth-child(2) { animation-delay: 150ms; }
.cargando-puntos span:nth-child(3) { animation-delay: 300ms; }
@keyframes latido { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* Tienda: horizontal, con el nombre entero y la escalera de precios de cada súper */
.tarjeta--web { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--e3); padding: var(--e3); }
.tarjeta--web .tarjeta-foto { width: 88px; height: 88px; padding: 6px; border-radius: var(--r-s); }
.tarjeta--web .sello { right: 2px; bottom: 2px; }
.tarjeta--web .tarjeta-textos { padding: 0; gap: var(--e1); }
.tarjeta--web .tarjeta-nombre { font: var(--t-cuerpo); font-weight: 600; min-height: 0; display: block; overflow: visible; padding-right: var(--e6); }
.celda--web { container-type: inline-size; }
@container (max-width: 20rem) {
  .tarjeta--web { grid-template-columns: 56px minmax(0, 1fr); }
  .tarjeta--web .tarjeta-foto { width: 56px; height: 56px; padding: var(--e1); }
  .tarjeta--web .sello { min-width: 24px; height: 24px; right: -4px; bottom: -4px; }
}
.tarjeta--web .tarjeta-meta { font: var(--t-detalle); white-space: normal; overflow: visible; }
.tarjeta--web .tarjeta-meta b { color: var(--tinta); }
.celda--web .control { top: var(--e1); bottom: auto; }
.escalera { display: grid; gap: 2px; margin-top: var(--e1); }
.peldano { display: flex; align-items: center; gap: var(--e2); min-height: 24px; padding: 0 6px; margin: 0 -6px; border-radius: var(--r-xs); font: var(--t-detalle); }
.peldano .super { flex: 1; min-width: 0; color: var(--tinta-2); hyphens: manual; }
.peldano .precio { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.peldano .antes { color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.etiqueta.de-oferta { background: var(--aviso-fondo); color: var(--aviso-tinta); font-weight: 600; }
.fila-opcion > .texto small.texto-aviso { display: flex; align-items: center; gap: var(--e1); color: var(--aviso-tinta); font-weight: 600; }
.reparto { display: flex; align-items: center; gap: var(--e1); margin: var(--e3) 0; padding: var(--e2) var(--e3); border-radius: var(--r-s); background: var(--acento-suave); color: var(--acento-texto); font: var(--t-detalle); }
.reparto span:last-child { margin-left: var(--e1); }
.peldano.mas-barato { background: var(--relleno); }
.peldano.mas-barato .precio { font-weight: 700; color: var(--tinta); }
.peldano.sin .super { font: var(--t-mini); font-weight: 400; color: var(--tinta-3); }
/* (con poco sitio —320, letra grande— el precio baja bajo el súper en vez de salirse) */
@container (max-width: 20rem) {
  .peldano { flex-wrap: wrap; }
  .peldano .super { flex: 1 1 auto; min-width: auto; }
  .peldano .precio { margin-left: auto; }
}
.mas-super { font: var(--t-mini); font-weight: 400; color: var(--tinta-2); }
.etiqueta { justify-self: start; display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: var(--r-xs); background: var(--relleno); color: var(--tinta-2); font: var(--t-mini); }

/* esqueletos mientras llega */
.esqueleto { border-radius: var(--r-m); background: var(--relleno); overflow: hidden; position: relative; }
.esqueleto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 30%), transparent); transform: translateX(-100%); animation: brillo 1.4s linear infinite; }
:root[data-tema="oscuro"] .esqueleto::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / 6%), transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .esqueleto::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / 6%), transparent); } }
@keyframes brillo { to { transform: translateX(100%); } }
.esqueleto.web-falsa { height: 112px; }
.esqueleto.fila-falsa { height: 56px; margin-bottom: var(--e2); }

.mas-abajo { height: 1px; }
.estado { margin: var(--e4) 0 var(--e1); font: var(--t-detalle); color: var(--tinta-2); }
.estado .enlace { font: var(--t-detalle); font-weight: 600; }
.acciones-final { display: grid; gap: var(--e2); margin: var(--e5) 0 var(--e2); }
.acciones-final > p { font: var(--t-detalle); color: var(--tinta-2); }
.acciones-final .boton-texto { justify-self: start; }
.acciones-final :is(.boton-principal, .boton-secundario) { justify-content: flex-start; text-align: left; }
.boton-textos { display: grid; }
.boton-textos small { font: var(--t-mini); color: inherit; }

/* ---- Tienda ---- */
.losas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
.losas + * { margin-top: var(--e4); }
.tras-losas + .grupo-filas { margin-top: var(--e3); }
.losa {
  position: relative; display: grid; gap: 2px; align-content: start; min-height: 96px; padding: var(--e3); overflow: hidden; color: var(--tinta);
  border: 0; border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--sombra-1); text-align: left;
}
.losa::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--s-actual, transparent); }
.losa .logo { margin-bottom: var(--e2); }
.losa strong { font: var(--t-nombre); }
.losa small { font: var(--t-detalle); color: var(--tinta-2); }
.explorar-cabecera {
  position: sticky; top: var(--alto-fijo, 0px); z-index: 4; display: flex; align-items: center; gap: var(--e1);
  margin: 0 calc(-1 * var(--e4)) var(--e2); padding: var(--e1) var(--e4) var(--e1) var(--e1); background: var(--bg); border-top: 3px solid var(--s-actual, transparent);
}
.explorar-cabecera h2 { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--e2); font: var(--t-titulo); }
.explorar-cabecera .titulos { min-width: 0; display: grid; }
.explorar-cabecera .titulos > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.explorar-cabecera small { font: var(--t-detalle); color: var(--tinta-2); }
.explorar-cabecera h2:focus { outline: none; }
.explorar-chips { margin-bottom: var(--e2); }
.titulo-seccion[id^="categoria-"] { scroll-margin-top: var(--e5); }

/* ---- hoja inferior ---- */
.hoja {
  position: fixed; border: 0; padding: 0; margin: auto auto 0; width: min(var(--columna), 100%); max-width: 100%; max-height: 92dvh; overflow: auto; overscroll-behavior: contain;
  scroll-padding: 64px 0 calc(80px + env(safe-area-inset-bottom)); /* (la cabecera y el pie, fijos: el foco no queda debajo) */
  border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--superficie-elevada); color: var(--tinta); box-shadow: var(--sombra-3);
  transition: transform var(--m-media) var(--ease-entrada), overlay var(--m-media) allow-discrete, display var(--m-media) allow-discrete;
  transform: translateY(100%);
}
.hoja[open] { transform: none; transition: transform var(--m-lenta) var(--ease-salida), overlay var(--m-lenta) allow-discrete, display var(--m-lenta) allow-discrete; }
@starting-style { .hoja[open] { transform: translateY(100%); } }
.hoja::backdrop { background: var(--velo); opacity: 0; transition: opacity var(--m-media), overlay var(--m-media) allow-discrete, display var(--m-media) allow-discrete; }
.hoja[open]::backdrop { opacity: 1; }
@starting-style { .hoja[open]::backdrop { opacity: 0; } }
.hoja.completa { max-height: 100dvh; height: 100dvh; border-radius: 0; }
.hoja form { display: flex; flex-direction: column; min-height: 100%; }
.hoja.alta form { min-height: min(92dvh, 680px); }
.hoja-cabecera { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--e2); min-height: 56px; padding: var(--e1) var(--e1) var(--e1) var(--e4); background: var(--superficie-elevada); }
.hoja-cabecera.con-raya { box-shadow: 0 1px 0 var(--linea); }
/* (un título largo, en una línea con «…»: el nombre de una lista puede serlo) */
.hoja-cabecera h3 { flex: 1; min-width: 0; font: var(--t-titulo); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoja-cabecera h3 > :is(img, span, svg) { vertical-align: middle; margin-right: var(--e2); }
.hoja-cabecera h3:focus { outline: none; }
.hoja.es-pregunta .hoja-cabecera h3 { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hoja-cabecera.con-atras { padding-left: var(--e1); }
.hoja.completa .hoja-cabecera { padding-top: calc(var(--e1) + env(safe-area-inset-top)); padding-left: var(--e1); padding-right: var(--e2); box-shadow: 0 1px 0 var(--linea); }
.hoja.completa .hoja-cabecera .boton-principal { min-height: 40px; padding: 0 var(--e4); }
.hoja-cuerpo { flex: 1; display: grid; gap: var(--e5); align-content: start; padding: var(--e1) var(--e4) var(--e5); }
.hoja.completa .hoja-cuerpo { padding-top: var(--e4); }
.hoja-cuerpo:last-child { padding-bottom: calc(var(--e5) + env(safe-area-inset-bottom)); }
.hoja-pie { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4) calc(var(--e3) + env(safe-area-inset-bottom));
  background: var(--superficie-elevada); box-shadow: 0 -1px 0 var(--linea); }
.hoja-pie .derecha { margin-left: auto; display: flex; gap: var(--e2); }
.hoja-pie > .boton-principal:only-child { flex: 1; }
.bloque { display: grid; gap: var(--e2); }
@media (min-width: 600px) {
  .hoja { margin: auto; border-radius: var(--r-xl); max-height: 80dvh; transform: translateY(24px); opacity: 0;
    transition: transform var(--m-media) var(--ease-entrada), opacity var(--m-media), overlay var(--m-media) allow-discrete, display var(--m-media) allow-discrete; }
  .hoja[open] { opacity: 1; transition: transform var(--m-lenta) var(--ease-salida), opacity var(--m-lenta), overlay var(--m-lenta) allow-discrete, display var(--m-lenta) allow-discrete; }
  @starting-style { .hoja[open] { transform: translateY(24px); opacity: 0; } }
  .hoja.completa { height: auto; max-height: 92dvh; border-radius: var(--r-xl); }
  .hoja.completa .hoja-cabecera { padding-top: var(--e1); }
}

/* filas agrupadas en una tarjeta (elegir súper, ajustes, personas…) */
.grupo-filas { display: grid; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-m); overflow: hidden; container-type: inline-size; }
.grupo-filas > :not(:first-child, legend + *) { border-top: 1px solid var(--linea); }
.fila-opcion {
  display: flex; align-items: center; gap: var(--e3); width: 100%; min-height: 56px; padding: var(--e2) var(--e3); border: 0; background: none; text-align: left; color: var(--tinta);
}
.fila-opcion > .i { color: var(--tinta-2); }
.fila-opcion > .texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fila-opcion > .texto strong { font: var(--t-nombre); }
.fila-opcion > .texto small { font: var(--t-detalle); color: var(--tinta-2); }
.fila-opcion > .dato { flex: 0 1 auto; min-width: min-content; overflow-wrap: normal; margin-left: auto; font: var(--t-detalle); color: var(--tinta-2); font-variant-numeric: tabular-nums; text-align: right; }
.fila-opcion:has(> .dato) > .texto { flex: 1 1 auto; min-width: 6rem; }
@container (max-width: 20rem) {
  .fila-opcion:has(> .dato) { flex-wrap: wrap; row-gap: 2px; }
  .fila-opcion:has(> .dato) > .texto { flex: 1 1 0; min-width: 0; }
  .fila-opcion > .dato { order: 1; flex: 1 0 100%; }
}
.fila-opcion > .texto strong { hyphens: manual; }
.fila-opcion > .dato strong { color: var(--tinta); font-weight: 600; }
.fila-opcion.elegida, .fila-opcion[aria-pressed="true"] { background-color: var(--acento-suave); }
.fila-opcion .marca-elegida { color: var(--acento-texto); }
.fila-opcion.atenuada > .texto strong, .fila-opcion.atenuada > .dato { color: var(--tinta-3); }
.fila-opcion .flecha { width: 20px; height: 20px; color: var(--tinta-3); }
div.fila-opcion > .texto strong { color: var(--tinta-2); }
div.fila-opcion.normal > .texto strong { color: var(--tinta); }
label.fila-opcion { cursor: pointer; }
label.fila-opcion input[type="radio"], label.fila-opcion input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--acento); margin: 0; flex: none; }
label.fila-opcion:has(input:checked) { background-color: var(--acento-suave); }
.fila-opcion.peligro > .texto strong, .fila-opcion.peligro > .i { color: var(--peligro); }
fieldset.grupo-filas { margin: 0; padding: 0; min-inline-size: 0; }
.grupo-filas > :focus-visible, .grupo-filas label.fila-opcion:has(:focus-visible) { outline: 2px solid var(--foco); outline-offset: -2px; }
.grupo-filas label.fila-opcion input:focus-visible { outline: none; }

/* control segmentado: lo elegido, como los chips */
.segmentado { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; gap: 3px; border-radius: var(--r-m); background: var(--relleno); }
.segmentado :is(label, button) { position: relative; display: grid; place-items: center; min-height: 40px; border: 0; border-radius: var(--r-s); background: none;
  font: var(--t-detalle); font-weight: 600; color: var(--tinta-2); cursor: pointer; text-align: center; padding: 0 var(--e1); }
.segmentado input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmentado label:has(input:checked), .segmentado button[aria-pressed="true"] { background-color: var(--tinta); color: var(--bg); }
.segmentado label:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 1px; }
/* (40 a la vista; para el dedo, 44) */
.segmentado :is(label, button)::before { content: ""; position: absolute; inset: -2px 0; }

.producto-cabecera { display: flex; align-items: center; gap: var(--e3); }
.producto-cabecera .miniatura, .producto-cabecera .miniatura-vacia { width: 64px; height: 64px; flex: none; }
.producto-cabecera strong { display: block; font: var(--t-nombre); }
.producto-cabecera small { display: block; margin-top: 2px; }
.producto-cabecera .sub { font: var(--t-cuerpo); color: var(--tinta-2); }
.contador { display: flex; align-items: center; gap: var(--e4); }
.contador button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--relleno); display: grid; place-items: center; padding: 0; }
.contador output { min-width: 2ch; text-align: center; font: var(--t-titulo); font-variant-numeric: tabular-nums; }
.fila-campo { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.fila-campo > span { font-weight: 600; }
.botones { display: flex; flex-wrap: wrap; gap: var(--e2); }
.botones > * { flex: 1 1 auto; }
.botones-apilados { display: grid; gap: var(--e2); }
/* «¿Seguro?» dentro de la hoja */
.confirmar { display: grid; gap: var(--e3); padding: var(--e4); border-radius: var(--r-m); background: var(--relleno); scroll-margin: calc(56px + var(--e2) + env(safe-area-inset-top)) 0 calc(80px + env(safe-area-inset-bottom)); }
.confirmar.peligro { background: var(--peligro-suave); }
.confirmar p { font: var(--t-cuerpo); font-weight: 600; }
.confirmar .botones > * { min-height: 48px; }
.pregunta-grande { font: var(--t-cuerpo); color: var(--tinta-2); }
.subtitulo { font: var(--t-detalle); font-weight: 600; margin-bottom: calc(-1 * var(--e3)); }

/* resultados de las webs dentro de una hoja (en el flujo, sin caja con su propio scroll) */
.resultados { display: grid; }
.resultados > * + * { border-top: 1px solid var(--linea); }
.resultado { display: flex; align-items: center; gap: var(--e3); width: 100%; min-height: 64px; padding: var(--e2) 0; border: 0; background: none; text-align: left; color: var(--tinta); }
.resultado .miniatura, .resultado .miniatura-vacia { width: 48px; height: 48px; flex: none; }
.resultado > span.texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.resultado strong { font: var(--t-detalle); font-weight: 600; }
.resultado small { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1); font: var(--t-mini); font-weight: 400; color: var(--tinta-2); }
.resultado .es-este { flex: none; color: var(--acento-texto); font: var(--t-detalle); font-weight: 600; }
.resultado:disabled { opacity: .4; }

/* editor de un favorito */
.opciones-editar { display: grid; gap: var(--e3); }
.opcion-editar { display: grid; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-m); }
.opcion-editar > * + * { border-top: 1px solid var(--linea); }
.opcion-cabecera { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e1) var(--e3) var(--e3); }
.opcion-cabecera .miniatura, .opcion-cabecera .miniatura-vacia { width: 48px; height: 48px; flex: none; }
.opcion-textos { flex: 1; min-width: 0; display: grid; gap: 2px; }
.opcion-textos strong { font: var(--t-cuerpo); font-weight: 600; }
.etiqueta-preferida { justify-self: start; padding: 2px 6px; border-radius: var(--r-xs); background: var(--acento-suave); color: var(--acento-texto); font: var(--t-mini); }
.menu-opcion { position: relative; }
.menu-opcion > summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; color: var(--tinta-2); }
.menu-opcion > summary::-webkit-details-marker { display: none; }
.menu-opcion > div { position: absolute; right: 0; top: 44px; z-index: 3; min-width: 220px; padding: var(--e1); border-radius: var(--r-m); background: var(--superficie-elevada); box-shadow: var(--sombra-3), 0 0 0 1px var(--linea); display: grid; }
.menu-opcion > div button { min-height: 44px; padding: 0 var(--e3); border: 0; background: none; text-align: left; border-radius: var(--r-s); font-weight: 600; color: var(--tinta); }
.menu-opcion > div button.peligro { color: var(--peligro); }
.fila-tienda { display: flex; align-items: center; gap: var(--e3); min-height: 48px; padding: var(--e1) var(--e1) var(--e1) var(--e3); }
.fila-tienda > span { flex: 1; min-width: 0; font: var(--t-detalle); }
.fila-tienda > span strong { font-weight: 600; }
.fila-tienda > .precio { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; padding-right: var(--e2); }
.fila-tienda > .precio.sin { flex: 0 1 auto; font-weight: 400; font: var(--t-detalle); color: var(--tinta-3); text-align: right; }
.fila-tienda select { flex: 1; min-height: 44px; border: 0; background: none; color: var(--acento-texto); font-weight: 600; padding: 0; }
.fila-tienda > .i { color: var(--acento-texto); }
.fila-tienda > .logo-todos { flex: none; }
.dentro { padding: var(--e3); display: grid; gap: var(--e3); }
.mas-opciones > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--e2); min-height: 44px; padding: 0 var(--e3); font: var(--t-detalle); font-weight: 600; color: var(--tinta-2); }
.mas-opciones > summary::-webkit-details-marker { display: none; }
.mas-opciones > summary .i { transition: transform var(--m-rapida); }
.mas-opciones[open] > summary .i { transform: rotate(90deg); }
.mas-opciones .dentro { padding-top: 0; }
.foto-editar { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.foto-editar img, .foto-editar .foto-vacia { width: 72px; height: 72px; border-radius: var(--r-m); object-fit: contain; background: var(--foto-fondo); border: 1px solid var(--linea);
  display: grid; place-items: center; color: var(--tinta-2); font: var(--t-mini); text-align: center; }
.foto-editar label { cursor: pointer; }
.panel { display: grid; gap: var(--e3); padding: var(--e3); border-radius: var(--r-m); background: var(--relleno); }
.panel .ayuda { display: flex; align-items: center; gap: var(--e2); }
.panel .resultados > * + * { border-top-color: var(--linea-fuerte); }
.sugerencias { display: grid; gap: var(--e3); }
.sugerencias:empty { display: none; }
.sugerencia { display: grid; gap: var(--e2); padding: var(--e3); border-radius: var(--r-m); background: var(--superficie); border: 1px solid var(--linea); }
.sugerencia > p { display: flex; align-items: center; gap: var(--e2); font-weight: 600; }

/* ---- aviso (encima de todo, también de la hoja) ---- */
.aviso {
  position: fixed; inset: auto auto calc(env(safe-area-inset-bottom) + var(--barra) + var(--alto-accion, 0px) + var(--e3)) 50%; transform: translateX(-50%);
  margin: 0; border: 0; display: none; align-items: center; gap: var(--e1); width: max-content; max-width: min(343px, calc(100% - 32px)); min-height: 48px; z-index: 30;
  background: var(--toast-fondo); color: var(--toast-tinta); padding: 2px var(--e1) 2px var(--e4); border-radius: var(--r-m); box-shadow: var(--sombra-3); font: var(--t-detalle);
}
.aviso > span { padding: var(--e1) 0; }
.aviso:popover-open, .aviso.visible { display: flex; animation: aparecer var(--m-media) var(--ease-salida); }
.aviso.yendose { animation: irse var(--m-rapida) var(--ease-entrada) forwards; }
@keyframes aparecer { from { transform: translate(-50%, 8px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@keyframes irse { to { opacity: 0; } }
.aviso button { flex: none; min-height: 44px; padding: 0 var(--e3); border: 0; border-radius: var(--r-s); background: none; color: var(--toast-accion); font: var(--t-detalle); font-weight: 600; }
.aviso :focus-visible { outline-color: var(--toast-tinta); outline-offset: -2px; }
.aviso button:active { background-image: none; background-color: color-mix(in srgb, var(--toast-accion) 18%, transparent); }
/* con una hoja abierta o el teclado arriba, los avisos arriba: abajo taparían sus botones */
body:has(.hoja[open]) .aviso, html.teclado .aviso { inset: calc(env(safe-area-inset-top) + var(--e3)) auto auto 50%; }
html.teclado body:not(:has(.hoja[open])) .aviso { top: calc(var(--bajo-cabecera, var(--alto-fijo, 0px)) + var(--e2)); }

/* ---- antes de la app: entrar, una invitación, sin lista ---- */
/* (arriba y a la izquierda: al cambiar de pestaña o salir un error, lo de arriba no salta) */
.entrada { min-height: 100dvh; display: grid; align-content: start; justify-content: center; grid-template-columns: min(360px, 100%); gap: var(--e3);
  padding: max(8vh, 40px) var(--e4) var(--e6); text-align: left; }
.entrada-marca { margin-bottom: var(--e3); }
.entrada-legal { margin-top: var(--e4); }
.entrada h1 { font: var(--t-portada); margin-top: var(--e2); }
.entrada-texto { color: var(--tinta-2); margin-bottom: var(--e2); }
.entrada-caja { display: grid; gap: var(--e3); width: 100%; }
.entrada-caja > p { margin: 0; }
.entrada-aviso { padding: var(--e3) var(--e4); border-radius: var(--r-m); background: var(--relleno); color: var(--tinta); }
.tarjeta-invitacion { display: flex; gap: var(--e3); align-items: flex-start; padding: var(--e4); border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--sombra-1); }
.tarjeta-invitacion .inicial { width: 40px; height: 40px; }
.tarjeta-invitacion > div { display: grid; gap: var(--e2); }
.boton-proveedor { display: flex; align-items: center; justify-content: center; gap: var(--e2); width: 100%; min-height: 48px; border-radius: var(--r-m);
  border: 1px solid var(--borde-control); background: var(--superficie); color: var(--tinta); font: var(--t-cuerpo); font-weight: 600; }
.boton-proveedor .i { width: 20px; height: 20px; }
.separador { display: flex; align-items: center; gap: var(--e3); color: var(--tinta-2); font: var(--t-detalle); }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--linea-fuerte); }
.entrada-form { display: grid; gap: var(--e2); width: 100%; }
.entrada-form label { font: var(--t-detalle); font-weight: 600; margin-top: var(--e2); }
.entrada-form > .boton-principal { margin-top: var(--e3); }
.entrada-form .error-campo { margin-top: 0; }
.entrada .enlace-suave { justify-self: center; }
.con-mostrar { position: relative; }
.con-mostrar input { padding-right: 96px; }
.entrada-form .con-mostrar input { padding-right: 96px; }
.con-mostrar button { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
details.desplegable > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--e2); min-height: 48px; font-weight: 600; }
details.desplegable > summary::-webkit-details-marker { display: none; }
details.desplegable > summary .i { color: var(--tinta-2); transition: transform var(--m-rapida); }
details.desplegable[open] > summary .i { transform: rotate(90deg); }
details.desplegable > .entrada-form { padding-bottom: var(--e3); }
.raya { height: 1px; background: var(--linea-fuerte); margin: var(--e2) 0; }

/* ---- personas de una lista ---- */
.inicial { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--relleno); font: var(--t-cuerpo); font-weight: 700; color: var(--tinta-2); }
.fila-persona.pendiente .inicial { background: none; border: 1.5px dashed var(--linea-fuerte); }
.cabecera-seccion { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.enlace-creado { display: grid; gap: var(--e2); padding: var(--e3); border-radius: var(--r-m); background: var(--relleno); word-break: break-all; font: var(--t-detalle); }
.vista-previa { display: grid; gap: var(--e2); }

/* alto contraste (Windows): los estados que solo eran un fondo o una sombra, con un borde del sistema */
@media (forced-colors: active) {
  :is(.chip, .fila-opcion, .segmentado button)[aria-pressed="true"], .fila-opcion.elegida, .segmentado label:has(input:checked),
  .barra button[aria-current="page"] .indicador { outline: 2px solid Highlight; outline-offset: -2px; }
  .caja-busqueda input { border: 1px solid CanvasText; }
  .oferta, .etiqueta { border: 1px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after, ::backdrop { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- tableta y escritorio: las filas de la Lista, en grupos ---- */
@media (min-width: 600px) {
  .filas { margin-inline: 0; border-radius: var(--r-m); overflow: hidden; box-shadow: var(--sombra-1); }
  .grupo-cabecera { margin-inline: 0; padding-inline: 0; }
  details.otros summary { margin-inline: 0; padding-inline: var(--e1); }
}

/* ---- lo que el permiso en la lista no deja (docs/roles.md) no se enseña ---- */
body:not([data-puede~="apuntar"]) :is([data-accion="rapido"], [data-accion="ir-tienda"], [data-accion="buscar-tiendas"],
  [data-accion="buscar-en-tiendas"], [data-accion="explorar"], .barra [data-vista="tienda"], .apuntar) { display: none !important; }
body:not([data-puede~="marcar"]) [data-accion="terminar"] { display: none !important; }
body:not([data-puede~="favoritos"]) :is([data-accion="editar"], [data-accion="crear-con"], [data-accion="hacer-favorito"], [data-accion="emparejar"], [data-accion="quitar-favorito"],
  [data-accion="editar-hoja"], [data-accion="anadir-tienda"]) { display: none !important; }
/* (sin la pestaña Tienda, la barra de abajo reparte el sitio entre dos) */
body:not([data-puede~="apuntar"]) .barra { grid-template-columns: repeat(2, 1fr); }
.entrada h1:focus-visible { outline: none; } /* (recibe el foco al abrirse la pantalla, para el lector: no es un control) */