/* ═══════════════════════════════════════════════════════════════════════════
   La WEB (navegador): el aspecto de la miniapp, la navegación de un sitio.
   [web-miniapp]

   Va la ÚLTIMA: glass.css → lima.css → web.css. lima.css pone el aspecto para
   todos y NO se toca (la miniapp se pinta igual y sus guardianes lo piden). Lo
   que la web hace distinto vive aquí, y solo aquí:

     · cabecera con pestañas (`.web-cab`) y sin barra de abajo;
     · anchos de escritorio para rejillas y tablas;
     · columnas del foro con su columna lateral;
     · campos que se ven en un monitor (borde 3:1) y foco visible;
     · la pantalla de entrar.

   Toda regla va bajo `:root[data-web]` (lo pone `base.html` cuando la sesión no
   entró por la miniapp) o sobre una clase `web-*`, que la miniapp no tiene. Hay
   guardián que lo comprueba. Nada de colores nuevos: los de lima, salvo los
   tres de abajo, que lima no tenía.
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-web] {
  --web-ancho: 1120px;
  /* Lo que mide la cabecera: dos filas en el móvil (marca + pestañas). De aquí
     salen el pegado de la columna lateral y el hueco de las anclas. */
  --cab-alto: 108px;
  /* El celeste de Comunidad que eligió el dueño (lima.css lo declara solo en
     la barra de abajo), sobre su fondo. 6.3:1. */
  --comunidad: #00aff0;
  --comunidad-suave: #10262e;
  /* Borde de los campos: 3:1 contra su relleno (WCAG 1.4.11). Con el relleno
     solo, un campo dentro de una tarjeta era 1.1:1: no se veía en un monitor. */
  --linea-control: #676d63;
}
@media (min-width: 1024px) {
  :root[data-web] { --cab-alto: 64px; }
}

/* Los dos focos de luz del mockup aprobado. En el BODY y nunca en <html>: las
   estrellas de lima viven detrás (z-index -1) y un fondo en <html> las tapa. */
:root[data-web] body {
  background:
    radial-gradient(900px 440px at 12% -8%, #1b2a14 0%, transparent 60%) fixed,
    radial-gradient(760px 400px at 92% -2%, #11242a 0%, transparent 60%) fixed,
    var(--papel);
}

/* Sin barra de abajo no hay nada que esquivar. lima reserva ~92 px con
   `!important` y un `main` a secas: se anula con LONGHANDS, porque `padding:`
   abreviado se lleva el margen lateral de `.envoltura` (le pasó a la primera
   capa del foro: en el móvil las tarjetas tocaban el borde). */
:root[data-web] main {
  padding-top: 1.25rem;
  padding-bottom: calc(var(--safe-bottom) + 3rem) !important;
}

/* El h1 de glass trae .2rem abajo para ir pegado a su subtítulo (`p.guia`). Sin
   subtítulo, la primera tarjeta quedaba a 3 px del título. */
:root[data-web] main > h1 + :is(.tarjeta, .lista, .aviso, form, section, .vidrio, .rejilla, .portadas, .lima-vacio) {
  margin-top: .8rem;
}

/* Un enlace solo en su párrafo («← Volver», «Ver todos →», «Tus recargas →»):
   en la web es una salida y medía 23 px de alto. 44 de toque, con el punteado
   de la casa pegado al TEXTO (con `border-bottom` quedaría al pie de la caja).
   `:only-child` no mira el texto suelto: comprobado que ningún párrafo de las
   plantillas mete uno de estos enlaces en mitad de una frase. */
:root[data-web] p > a.enlace:only-child {
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 0; padding-bottom: 0;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
:root[data-web] p > a.enlace:only-child:hover { text-decoration-style: solid; }

/* Un ancla nunca cae debajo de la cabecera pegada. Con !important para ganar a
   los `scroll-margin-top:5rem` escritos en línea (ajustes, stats). */
:root[data-web] :target {
  scroll-margin-top: calc(var(--cab-alto) + 1rem) !important;
}

/* Las estrellas de lima son doradas: en la web, del lima de la casa. */
:root[data-web] .lima-estrellas i { background: rgba(185, 217, 94, .55); }

/* ── Saltar al contenido ─────────────────────────────────────────────────── */
.web-saltar {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  padding: .7rem 1rem; border-radius: var(--radio-sm);
  background: var(--acento); color: var(--acento-tinta);
  font-weight: 700; text-decoration: none;
}
.web-saltar:focus { top: calc(var(--safe-top) + .5rem); }

/* ── La cabecera ─────────────────────────────────────────────────────────── */
.web-cab {
  position: sticky; top: 0; z-index: 50;
  padding-top: var(--safe-top);
  background: #141613;
  background: color-mix(in srgb, var(--superficie) 82%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--borde-fuerte);
  /* El cruce de página (lima.css: @view-transition) no la hace parpadear. */
  view-transition-name: web-cab;
}
.web-cab-in {
  max-width: var(--web-ancho); margin: 0 auto;
  padding: .4rem 1rem;
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: .75rem; row-gap: .1rem;
}
.web-marca {
  flex: 1 1 auto; min-width: 0;
  display: inline-flex; align-items: center; gap: .5rem; min-height: 48px;
  font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em;
  color: var(--tinta); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Pestañas. En el móvil, una fila propia que se desliza con el dedo, con el
   borde difuminado para que se note que sigue; en escritorio, en medio. */
.web-tabs {
  order: 3; flex: 1 0 100%;
  display: flex; gap: .35rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin: 0 -1rem; padding: .15rem 1rem .5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
}
.web-tabs::-webkit-scrollbar { display: none; }
.web-tab {
  flex: 1 0 auto; position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; padding: 0 .9rem; border-radius: 999px;
  color: var(--tinta-suave); text-decoration: none;
  font-size: .9rem; font-weight: 600; white-space: nowrap;
  transition: background-color var(--transicion), color var(--transicion);
}
.web-tab svg { width: 20px; height: 20px; flex: none; display: none; }
.web-tab:hover { background: var(--superficie-2); color: var(--tinta); }
/* La pestaña puesta: forma y peso, no solo color. Comunidad en celeste y
   Market en lima: el color dice en qué mundo estás, como en la miniapp. */
.web-tab[aria-current] {
  background: var(--comunidad-suave); color: var(--comunidad); font-weight: 700;
}
.web-tab-market[aria-current] { background: var(--acento-suave); color: var(--acento); }
.web-tab:focus-visible { outline-offset: -3px; }

/* La insignia de Inventario: blanco sobre #c92f2f es 5.3:1 (el #e03a3a de la
   barra de la miniapp se queda en 4.3:1 a ese tamaño). */
.web-bola {
  min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px;
  background: #c92f2f; color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 1.15rem; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* La derecha: candado (dueño), saldo, idioma, paneles y cuenta. */
/* `margin-left:auto`: sin sesión no hay pestañas que la empujen, y el idioma se
   quedaba pegado a la marca en escritorio. */
.web-cab-der { display: flex; align-items: center; gap: .4rem; flex: none; margin-left: auto; }
.web-saldo {
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: 44px; padding: 0 .8rem; border-radius: 999px;
  background: var(--acento-suave); color: var(--acento);
  font-weight: 800; font-size: .9rem; text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--transicion), color var(--transicion);
}
.web-saldo svg { width: 16px; height: 16px; }
.web-saldo:hover { background: var(--acento); color: var(--acento-tinta); }
.web-idioma {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-width: 44px; min-height: 44px; padding: 0 .55rem; border-radius: 999px;
  background: var(--superficie-2); color: var(--tinta-suave);
  font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-decoration: none;
}
.web-idioma:hover { color: var(--tinta); }
/* La bandera del idioma al que vas, al lado de su código. */
.web-idioma .bandera { flex: none; border-radius: 3px; }

/* Los botones redondos de la cabecera: candado, paneles y cuenta. */
.web-cab-der .boton.chico,
.web-cab-der .menu-acciones > summary.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  min-width: 44px; height: 44px; padding: 0 .7rem; border-radius: 999px;
  font-size: .85rem; font-variant-numeric: tabular-nums;
}
.web-cab-der .boton.fantasma.chico,
.web-cab-der .menu-acciones > summary.boton { background: var(--superficie-2); color: var(--tinta); }
.web-cab-der .boton svg,
.web-cab-der .menu-acciones > summary .ic svg,
.web-cab-der .menu-acciones > summary > svg { width: 20px; height: 20px; display: block; }
.web-cab-der .menu-acciones > summary.boton:has(.lima-avatar) { padding: 0; width: 44px; overflow: hidden; }
.web-cab-der .lima-avatar { width: 36px; height: 36px; border-radius: 999px; object-fit: cover; display: block; }

/* El panel del menú: cristal, a la derecha, y nunca más alto que la pantalla. */
.web-cab-der .menu-acciones .panel {
  min-width: 264px;
  max-height: calc(100dvh - var(--cab-alto) - 1rem); overflow-y: auto;
  background: rgba(31, 34, 30, .96);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-radius: var(--radio); box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.web-cab-der .menu-acciones .fila { border-radius: var(--radio-sm); }
.web-cab-der .menu-acciones .fila:hover { background: rgba(255, 255, 255, .05); }
/* Los iconos de las filas, en las baldosas de cristal de la miniapp (lima.css
   solo las da dentro de `nav.abajo`): sin ellas los stickers se salían de su
   disco y la 🔔 y el «$» salían a la mitad de tamaño, el «$» en monoespaciada. */
.web-cab-der .menu-acciones .fila .icono {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 14px;
  background: radial-gradient(120% 120% at 30% 15%, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 60%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  font-size: 1.15rem; font-family: var(--emoji), var(--sans);
}
.web-cab-der .menu-acciones .fila .icono.lima-sticker > svg {
  top: 5px; right: 5px; bottom: 5px; left: 5px;
  width: calc(100% - 10px) !important; height: calc(100% - 10px) !important;
}
.web-cab-der .menu-acciones .fila .icono .lima-sticker-respaldo { font-size: 1.2rem; }
/* La divisa del menú es un <button> con forma de fila: con su tarjeta, como
   las demás. El id le gana a `.fila:hover`, así que lleva su propio hover. */
.web-cab-der #divisa {
  width: 100%; border: 0; background: var(--superficie); color: inherit; font: inherit;
  text-align: left; cursor: pointer; display: flex; align-items: center; gap: .75rem;
}
.web-cab-der #divisa:hover { background: rgba(255, 255, 255, .05); }
.web-cab-der #divisa .rotulo { color: var(--tinta-suave); font-weight: 700; font-size: .85rem; }
/* Salir: con el gris del panel se leía como texto suelto, no como un botón. */
.web-cab-der .menu-acciones form .boton.fantasma { background: var(--superficie); }
.web-cab-der .menu-acciones form .boton.fantasma:hover { background: var(--borde-fuerte); }

/* En escritorio, tres columnas: marca | pestañas | derecha. Con flex y márgenes
   automáticos las pestañas quedaban 47-103 px fuera del centro (la derecha mide
   más que la marca, y el dueño lleva además candado y paneles); con la rejilla
   quedan en el centro EXACTO, y sin sesión la derecha sigue a la derecha. `1fr`
   y no `minmax(0,1fr)`: con mínimo 0, a 1024 px la derecha del dueño pisaba
   Market. El relleno es el de `.envoltura` (1rem): así la marca y la cuenta
   caen sobre los bordes del contenido ancho, no 8 px por dentro. */
@media (min-width: 1024px) {
  .web-cab-in { display: grid; grid-template-columns: 1fr auto 1fr; padding: .5rem 1rem; }
  .web-marca { grid-column: 1; justify-self: start; }
  .web-tabs {
    grid-column: 2; order: 0; margin: 0; padding: 0;
    overflow: visible; -webkit-mask-image: none; mask-image: none;
  }
  .web-tab { flex: 0 0 auto; }
  .web-tab svg { display: block; }
  .web-cab-der { grid-column: 3; justify-self: end; }
}

/* ── Market: su subnavegación ────────────────────────────────────────────── */
.web-sub-envoltura { max-width: var(--ancho); margin: .75rem auto 0; padding: 0 1rem; }
.web-sub { margin: 0; }
.web-sub a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ── Anchos ──────────────────────────────────────────────────────────────── */
/* El contenido se queda en los 760 px de siempre, que es la medida de los
   formularios y las fichas. Solo lo que tiene rejilla, columnas o tablas se abre
   al ancho de la cabecera. */
:root[data-web] main.envoltura:has(.web-cols, .portadas, .galeria, .sets, table, .lima-fh-resp) {
  max-width: var(--web-ancho);
}
/* Market no: su fila Inicio·Comprar·Recargar·Pedidos reparte las pestañas a lo
   ancho, y si siguiera al contenido (1120 en Comprar, 680 en Recargar) cada clic
   las movería bajo el ratón. Ahí `main` mide lo que la fila, en las cuatro. Pesa
   lo mismo que la regla de arriba: va DESPUÉS a propósito. */
:root[data-web] .web-sub-envoltura ~ main.envoltura { max-width: var(--ancho); }

/* ── Rejillas en escritorio ──────────────────────────────────────────────── */
@media (min-width: 760px) {
  :root[data-web] .portadas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root[data-web] .sets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root[data-web] .galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Las ocho miniaturas del Inicio de una modelo, en UNA fila: a cuatro por
     fila eran dos bloques de 200 px para un resumen.  [foro-perfil] */
  :root[data-web] .lima-modelo-sets { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  :root[data-web] .lima-tienda { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
  /* Las carpetas del vault: en el móvil se deslizan; con ratón no hay forma de
     deslizar una fila sin barra, así que en escritorio van en rejilla. */
  :root[data-web] .portadas-fila {
    grid-auto-flow: row; grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible;
  }
  /* Coleccionables: siempre son 8, así que dos filas de 4 (en tres columnas
     eran baldosas de 236 px casi vacías y la mitad caía bajo el pliegue). Con
     !important porque las columnas van en línea. */
  :root[data-web] .web-inv-col { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 1100px) {
  :root[data-web] .portadas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :root[data-web] .sets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :root[data-web] .galeria { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ── La ficha de un set privado ──────────────────────────────────────────── */
/* Su portada borrosa va antes del bloque de desbloquear y mide 4:3 a lo ancho
   de la ficha: en escritorio eran 726×545 y el botón caía bajo el pliegue (a
   1366×768 solo se veía «Privado», un callejón). Con tope de alto, el botón
   sale en el primer pantallazo desde 657 px de alto; 40vh y no 45 por eso.
   `width: 100%` porque sin él el tope estrecha la caja en vez de recortarla.
   [foro-perfil][puntos] */
@media (min-width: 760px) {
  :root[data-web] .set-privado { width: 100%; max-height: min(40vh, 360px); }
}

/* ── Foro: contenido y columna lateral ───────────────────────────────────── */
/* En el móvil, una columna en el orden del DOM: buscar y ordenar ARRIBA (antes
   quedaban debajo de sesenta tarjetas), luego el contenido, luego las cifras.
   En escritorio, el contenido a la izquierda y la columna a la derecha. */
.web-cols { display: flex; flex-direction: column; gap: 1rem; }
.web-col-main { min-width: 0; }
.web-rail, .web-rail-bottom { display: flex; flex-direction: column; gap: .8rem; }
.web-rail .tarjeta, .web-rail-bottom .tarjeta { margin: 0; }
.web-rail .lima-buscar, .web-rail .filtros { margin: 0 !important; }
.web-rail .filtros { flex-wrap: wrap; overflow: visible; }
@media (min-width: 960px) {
  .web-cols {
    display: grid; grid-template-columns: minmax(0, 1fr) 256px;
    grid-template-areas: "main rail" "main rail-b";
    grid-template-rows: auto 1fr;
    column-gap: 1.5rem; row-gap: 1rem; align-items: start;
  }
  .web-col-main { grid-area: main; }
  .web-rail { grid-area: rail; }
  .web-rail-bottom { grid-area: rail-b; }
  /* Ordenar, en 219 px, como lista de menú lateral: los cinco chips se
     cortaban 2/1/2. Y las tres cifras en una fila, como en el móvil (van con
     flex y gap en línea, de ahí el !important). */
  .web-rail .filtros { flex-direction: column; }
  .web-rail-bottom .foro-stats { flex-wrap: nowrap !important; column-gap: .5rem !important; }
}
.web-nota { margin: 0; font-size: .82rem; color: var(--tinta-tenue); line-height: 1.5; }
/* El enlace solo de una tarjeta lateral («← Más temas de…») ocupa la tarjeta
   entera: era un renglón de 18 px. El margen negativo es el relleno de
   `.tarjeta` en lima (1.15rem), así que la tarjeta no cambia de tamaño. */
.web-rail .tarjeta > a:only-child { display: block; margin: -1.15rem; padding: 1.15rem; border-radius: inherit; }

/* La miga de pan del foro. Cada enlace, 44 px de toque sin mover el renglón
   (en un inline-block el margen negativo anula el relleno en la línea): en la
   web sustituye al `a.volver` de 44 px de la miniapp. */
.web-migas { margin: 0 0 .75rem; font-size: .85rem; color: var(--tinta-tenue); }
.web-migas a { display: inline-block; padding: 13px 5px; margin: -13px -5px; color: var(--tinta-suave); text-decoration: none; }
.web-migas a:hover { color: var(--tinta); text-decoration: underline; }

/* Los ♥ y 💬 de la rejilla del foro van con los iconos de línea de la ficha del
   modelo (el emoji salía lila y en otra familia). El SVG del macro no trae
   tamaño. */
:root[data-web] .portada-sub svg { width: 13px; height: 13px; vertical-align: -2px; }
/* El ♥ de quien ya dio me gusta, en la cifra de un tema: glass pone el fondo de
   `.corazon-on` a todo lo que lleve la clase, y en un <span> sin relleno salía
   una caja rosa de esquinas rectas. */
:root[data-web] .tema-cifra.corazon-on { background: none; }

/* ── Lo que en un monitor no se veía ─────────────────────────────────────── */
/* Campos con borde 3:1 y foco con el anillo lima (glass quita el `outline` de
   los campos y lima solo aclaraba un borde transparente). */
:root[data-web] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  border-color: var(--linea-control);
}
:root[data-web] :is(input, select, textarea):focus { border-color: var(--acento); }
:root[data-web] :is(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--acento); outline-offset: 2px;
}
/* Tarjeta contra página es 1.1:1: en el teléfono se lee, en un monitor brillante
   casi no. Un filo de luz las separa sin cambiar el aspecto. Menos en el tema
   fijado y en lo que señala el enlace (`:target`): ahí glass pinta su barra y su
   anillo lima con `box-shadow`, y esta regla, que pesa más, se los comía. */
:root[data-web] :is(.tarjeta, .lima-carta, .tema-fila, .respuesta, .tema-apertura, .set-carta):not(.tema-fijado):not(:target) {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
/* Las fichas del inicio: su velo (lima: `.marca-ficha::after`) funde la mitad
   de abajo con la página (≈1.01:1) y un `inset` en `.ficha` quedaría DEBAJO del
   velo. El filo va en un ::after por encima. Sin `inset:` abreviado: no existe
   antes de Chrome 87. Lo mismo la cabecera de una modelo en el foro, cuyo
   ::after ya es su velo: ahí el filo va en el ::before.  [foro-perfil] */
:root[data-web] .ficha::after, :root[data-web] .lima-modelo-cab::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
/* Píldoras de 9.9 px: lo más chico de la página («Entrega inmediata», el saldo
   de Recargar por debajo de su «USD»). .7rem es el de `.pildora` de lima, así
   que «Entregado» mide igual en la ficha y en la lista. */
:root[data-web] .lima-pildora,
:root[data-web] .ficha .lima-ficha-estado { font-size: .7rem; }
:root[data-web] .lima-pildora.chica { font-size: .66rem; }
/* Tablas del dueño y de los admins: lima deja el borde transparente y las filas
   se fundían. */
:root[data-web] tbody tr { border-top-color: var(--borde-fuerte); }
:root[data-web] table.matriz :is(td, th) { padding: .45rem .6rem; }
/* Las credenciales largas no rompen la tarjeta en el móvil. */
:root[data-web] pre.copiable { white-space: pre-wrap; word-break: break-all; }

/* ── Formularios y estados ───────────────────────────────────────────────── */
/* El importe de Recargar: «$» y cifra juntos y a la izquierda (con el input a
   todo el ancho, el «$» quedaba lejos de la cifra) y el foco en la CAJA, no en
   el input de dentro: el anillo global se comía 2 px del «$». */
:root[data-web] .lima-monto { justify-content: flex-start; gap: .35rem; }
:root[data-web] .lima-monto input { text-align: left; padding-left: 0; }
:root[data-web] .lima-monto input:focus-visible { outline: none; }
:root[data-web] .lima-monto:focus-within { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
/* «Continuar» con el importe vacío solo marcaba `.malo`, que colorea lo
   TECLEADO: con el campo vacío no se veía nada. Se pinta mientras siga vacío
   (`:placeholder-shown`); el JS no quita la clase al escribir, y atarlo solo a
   ella dejaría la caja roja con un importe ya bueno. */
:root[data-web] .lima-monto:has(input.malo:placeholder-shown) { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
:root[data-web] .lima-monto input.malo::placeholder { color: var(--error); }

/* «📎 Foto o video» (Soporte): 35 px junto a un «Enviar» de 51, y el foco de
   teclado invisible porque cae en el <input> oculto de dentro. */
:root[data-web] label.boton:has(> input[type="file"]) { align-self: stretch; min-height: 44px; }
:root[data-web] label.boton:has(> input[type="file"]:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Notificaciones: la línea de estado vacía reservaba ~31 px bajo el botón.
   Altura 0 y no `display:none`, para que el lector de pantalla siga anunciando
   lo que se escriba ahí. Con !important porque el margen va en línea. */
:root[data-web] #notif-estado:empty { margin-top: 0 !important; min-height: 0 !important; }

/* Un vacío con botón (foro, vault, ZIP): el botón quedaba a 1 px del texto. */
:root[data-web] .lima-vacio .detalle + p { margin-top: 1.25rem; }

/* Pedidos en un teléfono: la píldora «Buscando proveedor» dejaba al texto
   108 px y la fecha bajaba a otra línea en esa fila sola. La píldora pasa
   debajo del texto. Solo filas de pedido CON icono: las del inicio comparten
   enlace y no lo llevan. */
@media (max-width: 480px) {
  :root[data-web] main .lista > a.fila[href^="/portal/pedido/"]:has(> .icono) {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: .75rem; row-gap: .35rem; align-items: center;
  }
  :root[data-web] main .lista > a.fila[href^="/portal/pedido/"]:has(> .icono) > .icono { grid-column: 1; grid-row: 1 / 3; }
  :root[data-web] main .lista > a.fila[href^="/portal/pedido/"]:has(> .icono) > .cuerpo { grid-column: 2; grid-row: 1; }
  :root[data-web] main .lista > a.fila[href^="/portal/pedido/"]:has(> .icono) > .pildora { grid-column: 2; grid-row: 2; justify-self: start; }
  :root[data-web] main .lista > a.fila[href^="/portal/pedido/"]:has(> .icono) > .flecha { grid-column: 3; grid-row: 1 / 3; }
}

/* ── Con ratón ───────────────────────────────────────────────────────────── */
/* glass y lima solo tienen `:active`, que es del dedo: en escritorio las
   tarjetas, las filas y los chips del foro parecían muertos al pasar por
   encima, mientras las pestañas de la cabecera sí respondían. */
@media (hover: hover) {
  :root[data-web] :is(a.tema-fila, .filtro, .pestanas a, .nuevo-tema > summary, .corazon) {
    transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion);
  }
  :root[data-web] a.portada { transition: transform var(--transicion), box-shadow var(--transicion); }
  :root[data-web] a.portada:hover:not(:active) {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45), 0 0 0 1px rgba(185, 217, 94, .35);
  }
  :root[data-web] a.tema-fila:hover { background: var(--superficie-2); }
  :root[data-web] .filtro:not([aria-current]):not([aria-pressed="true"]):hover { color: var(--tinta); border-color: var(--linea-control); }
  :root[data-web] .pestanas a:not([aria-current]):hover { color: var(--tinta); border-bottom-color: var(--borde-fuerte); }
  :root[data-web] .nuevo-tema:not([open]) > summary:hover { background: var(--superficie-2); }
  :root[data-web] .corazon:not(.corazon-on):hover { color: #ff5d7a; border-color: rgba(255, 93, 122, .45); }
}

/* ── Entrar ──────────────────────────────────────────────────────────────── */
.web-login {
  min-height: calc(100dvh - var(--cab-alto) - 5rem);
  display: grid; place-items: start center; padding-top: 1rem;
}
@media (min-width: 768px) {
  .web-login { place-items: center; padding-top: 0; }
}
.web-login-tarjeta { width: 100%; max-width: 26rem; padding: 1.75rem 1.5rem 1.5rem; }
.web-login-tarjeta h1 { margin: 0 0 .35rem; font-size: 1.6rem; }
.web-login-tarjeta > .guia { margin: 0 0 1.4rem; }
.web-boton-tg {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; font-size: 1rem; font-weight: 700;
}
.web-boton-tg svg { width: 20px; height: 20px; }
.web-login-estado { margin: .9rem 0 0; font-size: .88rem; color: var(--tinta-suave); text-align: center; }
.web-login-estado[hidden] { display: none; }
.web-login-qr { display: none; }
@media (min-width: 1024px) and (pointer: fine) {
  .web-login-qr {
    display: flex; align-items: center; gap: 1rem;
    margin-top: 1.2rem; padding: .9rem; border-radius: var(--radio-sm);
    background: var(--superficie-2);
  }
  .web-login-qr .qr {
    flex: none; width: 112px; padding: .45rem; border-radius: 10px; background: #fff;
    line-height: 0;
  }
  .web-login-qr .qr svg { width: 100%; height: auto; display: block; }
  .web-login-qr p { margin: 0; font-size: .85rem; color: var(--tinta-suave); }
}
.web-login-o {
  display: flex; align-items: center; gap: .8rem; margin: 1.4rem 0 1rem;
  color: var(--tinta-tenue); font-size: .8rem;
}
.web-login-o::before, .web-login-o::after { content: ""; flex: 1; height: 1px; background: var(--borde-fuerte); }
.web-login-clave > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; border-radius: 999px;
  background: var(--superficie-2); color: var(--tinta); font-weight: 600;
}
.web-login-clave > summary::-webkit-details-marker { display: none; }
.web-login-clave[open] > summary { margin-bottom: 1rem; }
.web-login-clave .campo { margin-bottom: .9rem; }
.web-login-clave input { min-height: 48px; }
.web-login-nota { margin: 1.4rem 0 0; font-size: .8rem; color: var(--tinta-tenue); line-height: 1.5; }
/* «¿Olvidaste tu contraseña?», bajo el botón. Los 44 px de toque los pone la
   regla del enlace solo en su párrafo.  [cuenta] */
.web-login-olvide { margin: .35rem 0 0; text-align: center; font-size: .88rem; }
/* «Reenviar el código», bajo «Entrar»: estaban pegados (0 px), y tocar el de
   abajo por error manda otro código e invalida el que se estaba tecleando. El
   mismo aire que la pareja de Mi Cuenta.  [dos-pasos] */
.web-dp-reenviar { margin-top: .6rem; }
.web-login-error {
  display: flex; gap: .5rem; align-items: flex-start;
  margin: 0 0 .9rem; padding: .7rem .8rem; border-radius: var(--radio-sm);
  background: #2a1614; color: #ef7d6e; font-size: .88rem;
}
/* Dentro de Telegram la primera carga es anónima un instante, hasta que
   webapp.js entra solo: ahí no se enseña el formulario de la web. */
.web-login-auto { display: none; }
:root.tg-auto .web-login-tarjeta { display: none; }
:root.tg-auto .web-login-auto {
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  color: var(--tinta-suave);
}
.web-girando {
  width: 22px; height: 22px; border-radius: 999px;
  border: 2px solid var(--borde-fuerte); border-top-color: var(--acento);
  animation: web-gira .8s linear infinite;
}
@keyframes web-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .web-girando { animation: none; }
}

/* ── Pie legal del sitio (solo web): enlaces a las páginas de compliance.  [legal-pie] ── */
.web-pie {
  max-width: var(--web-ancho, var(--ancho));
  margin: 2.5rem auto 0;
  padding: 1.1rem 16px calc(1.4rem + var(--safe-bottom, 0px));
  border-top: 1px solid var(--linea-control);
  text-align: center;
}
.web-pie-enlaces {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.1rem;
}
.web-pie-enlaces a {
  color: var(--tinta-suave); font-size: .82rem; text-decoration: none; white-space: nowrap;
}
.web-pie-enlaces a:hover { color: var(--acento); text-decoration: underline; }
.web-pie-nota { margin: .8rem 0 0; color: var(--tinta-tenue); font-size: .75rem; }

/* ── Aviso de cookies (solo web), una vez por navegador. ── */
.web-cookies {
  position: fixed; left: 16px; right: 16px; bottom: calc(12px + var(--safe-bottom, 0px));
  z-index: 50; max-width: 640px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center; justify-content: space-between;
  padding: .7rem .9rem; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm);
  background: var(--superficie-2); color: var(--tinta-suave); font-size: .82rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.web-cookies a { color: var(--acento); }