/* ============================================================
   Base de la tienda en vidrio — fondo, tipografía y los átomos que
   comparten todas las vistas del iPad: botones, campos, chips, tarjeta de
   vidrio, sobrelínea, insignia y avisos. Cada área tiene su propia hoja
   (20-shell, 30-entrada, 40-catalogo, 45-miniclips, 50-analisis,
   60-cliente); aquí solo vive lo que usan todas.
   ============================================================ */

/* --- El puente: los tokens de tinta y superficie que usan las clases
   heredadas —`.card`, `.auth__card`, `.input`, `.flash` de
   components.css, compartidas con HQ— se reapuntan aquí a los tokens de
   vidrio de arriba. Ninguna de esas vistas se toca: heredan el fondo
   nuevo solo por cambiar de dónde toman su color.

   `--color-brand` y compañía (el azul de marca) se dejan INTACTOS a
   propósito: varios botones viejos (`.btn`, `.barra__cta`) traen su
   texto en blanco escrito a mano contra ese fondo — si `--color-brand`
   se volviera blanco aquí, ese texto desaparecería. El azul ya contrasta
   bien contra el navy nuevo; no hace falta tocarlo para que se lea. --- */
body.tablet {
  --color-ink: var(--tinta-1);
  --color-ink-2: var(--tinta-2);
  --color-ink-3: var(--tinta-3);
  --color-bg: var(--vidrio-1);
  --color-bg-2: var(--vidrio-2);
  --color-line: var(--vidrio-borde);
  --color-line-2: var(--vidrio-borde);

  /* Compañeros "-soft" de los estados de flota (tienda/00-tokens.css ya
     aclaró los sólidos): sin esto, `.aviso`/`.flash` quedan con el fondo
     pastel claro de HQ — ilegible sobre vidrio oscuro. */
  --color-ok-soft: rgba(95, 211, 154, .16);
  --color-warn-soft: rgba(240, 182, 90, .16);
  --color-danger-soft: rgba(255, 143, 107, .16);
  --color-accent-soft: rgba(255, 143, 107, .16);

  --shadow-card: none; /* spec, "Material": las tarjetas de contenido no llevan sombra, solo borde de luz */
  --shadow-pop: 0 20px 48px rgba(5, 9, 24, .55);

  color: var(--tinta-1);
  /* El fondo lo pinta `html` (las tres luces sobre --tienda-fondo, arriba);
     el `body` tiene que dejarlo pasar. El CSS viejo del iPad le ponía
     `--color-bg-2`, que con el puente de arriba es un blanco al 14%: un velo
     sobre TODA la pantalla que aclaraba el navy #0e1a36 a un gris azuloso y
     se comía las tres luces. */
  background: transparent;
}

/* El anillo de foco de `base.css` es el azul de marca (#0047bb), que sobre el
   navy de la tienda contrasta 2.1:1 — invisible justo donde más se necesita,
   porque el iPad también se navega con teclado Bluetooth en las pruebas. Se
   repinta en blanco, que es el color de acción de este lenguaje. */
body.tablet :focus-visible {
  outline-color: var(--solido);
}

/* --- Sobrelínea: la etiqueta de sección en mayúsculas ("TU COLCHÓN
   IDEAL", "PASOS" — spec, "Tipografía e iconos"). Bloque, no inline:
   siempre encabeza algo. --- */
body.tablet .sobrelinea {
  display: block;
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

/* --- Insignia: etiqueta corta sobre una superficie que varía (foto de
   producto, miniatura de video). Necesita su propio contraste pase lo que
   pase debajo, pero SIN desenfoque: el vidrio con `backdrop-filter` está
   reservado a lo que flota sobre contenido que se desplaza —cabecera,
   cápsula, barra y diálogos— y la insignia va pegada a una tarjeta, de las
   que hay una por producto (decisión 3 de la spec: el desenfoque cuesta GPU
   por superficie, y esto corre en un iPad de piso). Por eso usa el tinte
   opaco y no `--vidrio-flota`. --- */
body.tablet .insignia {
  display: inline-flex;
  align-items: center;
  height: var(--space-6);
  padding: 0 var(--space-3);
  border-radius: var(--radio-control);
  background: var(--vidrio-opaco);
  border: 1px solid var(--vidrio-borde);
  color: var(--tinta-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

/* --- Tarjeta de vidrio: la superficie de contenido genérica (spec,
   "Material" — sin desenfoque: detrás de ella solo hay degradado suave,
   el desenfoque no aportaría nada visible). `.vidrio--flota` es la
   variante que sí flota sobre contenido que se desplaza (cabecera,
   cápsula, barra, diálogos); T2 la conecta a esos organismos. --- */
body.tablet .vidrio {
  background: var(--vidrio-1);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--vidrio-relieve);
  padding: var(--relleno);
}
body.tablet .vidrio--flota {
  background: var(--vidrio-flota);
  -webkit-backdrop-filter: var(--vidrio-desenfoque);
  backdrop-filter: var(--vidrio-desenfoque);
}

/* Las tarjetas viejas (Puerta 1/3 y bautizo de pantalla) ya heredan
   fondo y borde de vidrio por el puente de arriba; solo les falta la luz
   interior para leerse como el resto de las superficies de vidrio. */
body.tablet .card,
body.tablet .auth__card {
  box-shadow: var(--vidrio-relieve);
}

/* --- Campos: mismo material que chips y controles secundarios
   (--vidrio-2, spec "Material"). --- */
body.tablet .input,
body.tablet .select {
  height: var(--control);
  min-height: var(--control);
  padding: 0 var(--space-4);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-control);
  box-shadow: var(--vidrio-relieve);
  color: var(--tinta-1);
  background: var(--vidrio-2);
}
body.tablet .input::placeholder { color: var(--tinta-3); }
body.tablet .input:focus,
body.tablet .select:focus {
  border-color: var(--solido);
  outline: none;
}
body.tablet .label { color: var(--tinta-2); }

/* --- Chip: categoría o filtro (también se usa como etiqueta de radio,
   p. ej. la zona de una pantalla nueva). Seleccionado = --solido (spec,
   "Catálogo"); `.on` es el patrón que ya usa el resto de la plataforma
   para "activo" (`.viewtoggle > .on`) — la vista que lo pinte en T3
   decide si usa esta clase o `aria-current`. --- */
body.tablet .chip {
  height: var(--control);
  padding: 0 var(--space-4);
  border-radius: var(--radio-control);
  background: var(--vidrio-2);
  border: 1px solid var(--vidrio-borde);
  box-shadow: var(--vidrio-relieve);
  color: var(--tinta-1);
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
}
body.tablet .chip.on {
  background: var(--solido);
  color: var(--solido-tinta);
  border-color: transparent;
}

/* --- Avisos: los flash de esta pantalla, en vidrio. Los colores por
   estado ya llegan aclarados desde los tokens (--color-ok/-warn/-danger
   arriba, más sus "-soft"); aquí solo se pone el vidrio y un filo del
   color del aviso para que se distinga de una tarjeta cualquiera. --- */
body.tablet .aviso,
body.tablet .flash {
  border: 1px solid var(--vidrio-borde);
  background: var(--vidrio-1);
}
body.tablet .aviso--alert,
body.tablet .flash--alert { border-color: color-mix(in srgb, var(--color-danger) 45%, transparent); }
body.tablet .aviso--notice,
body.tablet .flash--notice { border-color: color-mix(in srgb, var(--color-ok) 45%, transparent); }

/* --- Botones: inline-flex, centrados en los dos ejes, line-height 1 y
   alto fijo --control SIEMPRE (spec, "Geometría", regla 4) — incluida la
   variante compacta, que solo cambia relleno y tamaño de letra, nunca el
   alto. El primario sólido es el default del átomo `.btn`: es la acción
   blanca que pide la spec (decisión 1), no el azul de marca de HQ. --- */
body.tablet .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control);
  min-height: var(--control);
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radio-control);
  font: var(--weight-medium) var(--text-m) var(--font-sans);
  /* ⚠️ DESPUÉS del atajo `font`, no antes: `font` reescribe `line-height` a
     `normal` aunque no se le dé uno, así que puesto arriba el 1 de la regla 4
     de "Geometría" se perdía en silencio (medido en los cuatro cortes: salía
     `normal`). */
  line-height: 1;
  color: var(--solido-tinta);
  background: var(--solido);
  transition: background var(--transicion), border-color var(--transicion),
              color var(--transicion), opacity var(--transicion);
}
body.tablet .btn:hover { background: var(--solido); color: var(--solido-tinta); opacity: .9; text-decoration: none; }
body.tablet .btn:disabled { background: var(--vidrio-2); color: var(--tinta-3); opacity: 1; cursor: not-allowed; }

/* Secundario: de vidrio, no de borde azul. */
body.tablet .btn--secondary {
  color: var(--tinta-1);
  background: var(--vidrio-2);
  border: 1px solid var(--vidrio-borde);
  box-shadow: var(--vidrio-relieve);
}
body.tablet .btn--secondary:hover { background: var(--vidrio-activo); color: var(--tinta-1); }

/* Quiet: sin superficie propia, solo tinta secundaria — para acciones de
   segundo plano (p. ej. "Aviso de privacidad" en el resultado del quiz,
   o "Catálogo" en la cabecera de BedMatch). */
body.tablet .btn--quiet {
  color: var(--tinta-2);
  background: transparent;
}
body.tablet .btn--quiet:hover { color: var(--tinta-1); background: var(--vidrio-1); }

/* Danger: usa el rojo/naranja aclarado de flota, no el terracota de HQ. */
body.tablet .btn--danger {
  color: var(--solido-tinta);
  background: var(--color-danger);
}
body.tablet .btn--danger:hover { opacity: .88; color: var(--solido-tinta); }

body.tablet .btn--compact {
  padding: 0 var(--space-4);
  font-size: var(--text-s);
}