/* ============================================================
   Tokens de la tienda en vidrio — namespace `tablet` únicamente.
   Fuente: docs/specs/2026-09-21-tienda-liquid-glass.md, "Lenguaje visual".
   Todo va bajo `body.tablet` (o `html:has(body.tablet)` para lo que tiene
   que llegar a `html`, como el fondo): nada de esto existe para HQ, que
   se queda con sus cuatro momentos del día intactos (decisión 1 de la
   spec: la tienda no es "modo noche", es su propio lenguaje).

   Propshaft carga por orden alfabético de ruta: application, base,
   components, fa/…, tienda/… y al final tokens.css. O sea que estos tokens
   se declaran ANTES que los de HQ: no hay empate que ganar por cascada,
   los de aquí viven bajo `body.tablet` y los de HQ bajo `:root`, y una
   propiedad declarada en `body` le gana a la heredada de `:root` sin
   importar quién cargó primero. (El `tablet.css` viejo del iPad, que
   ordenaba justo antes de esta carpeta, se borró al terminar el rediseño:
   su contenido vive repartido en `tienda/10-base.css` y siguientes.)
   ============================================================ */

/* --- El fondo: tres luces fijas sobre --tienda-fondo. Vive en
   `html:has(body.tablet)` y NO en `body.tablet` porque quien consume
   `--bg-sky` es `html` (base.css:10) y una custom property declarada en
   `body` nunca sube a su padre — solo baja a los hijos de body. `:has()`
   deja esto condicionado a que exista `body.tablet` en el documento, sin
   tocar `html` en ninguna página de HQ. */
html:has(body.tablet) {
  --tienda-fondo: #0e1a36;
  /* Ajuste posterior a la primera pasada (revisión T2): el fondo quedaba
     lavado porque las luces eran opacas en su centro y su radio se media en
     `%` (relativo a la caja del degradado, no al aparato) — inundaban media
     pantalla. Los bocetos traen la base #0e1a36 dominando el centro y la
     esquina inferior izquierda, con las luces vivas solo en SUS esquinas: el
     radio ahora es `vmax` (fijo respecto al lado mayor del aparato, no al
     elemento) y cada color lleva su propio alfa, para que la base siga
     viéndose por debajo aun en el centro de cada luz. */
  --luz-azul: radial-gradient(circle at 12% 8%, rgba(59, 91, 255, .85) 0%, transparent 45vmax);
  --luz-violeta: radial-gradient(circle at 78% 12%, rgba(122, 63, 240, .65) 0%, transparent 38vmax);
  /* El ámbar se acota más que las otras dos: es donde el texto blanco pierde
     contraste (spec, "Fondo"). */
  --luz-ambar: radial-gradient(circle at 92% 94%, rgba(232, 160, 106, .6) 0%, transparent 30vmax);
  --bg-sky: var(--luz-azul), var(--luz-violeta), var(--luz-ambar), var(--tienda-fondo);
  color-scheme: dark;
}

body.tablet {
  /* --- Material: vidrio sobre el fondo de tres luces (spec, "Material") --- */
  --vidrio-1: rgba(255, 255, 255, .08);       /* tarjetas de contenido */
  --vidrio-2: rgba(255, 255, 255, .14);       /* controles secundarios, chips, campos */
  --vidrio-flota: rgba(16, 24, 52, .45);      /* cabecera, cápsula, barra, diálogos */
  --vidrio-desenfoque: blur(24px) saturate(160%);
  /* El mismo tinte, ya opaco: para lo que necesita contraste propio sobre una
     superficie cualquiera (una insignia sobre la foto de un producto) pero no
     puede pagar un `backdrop-filter` — hay uno por tarjeta. Es también el
     valor al que cae `--vidrio-flota` cuando no hay desenfoque, abajo. */
  --vidrio-opaco: rgba(16, 24, 52, .92);
  --vidrio-activo: rgba(255, 255, 255, .22);  /* destino activo, opción pulsada */
  --vidrio-borde: rgba(255, 255, 255, .22);   /* 1px, todo lo de vidrio */
  --vidrio-relieve: inset 0 1px 0 rgba(255, 255, 255, .18); /* luz interior, todo lo de vidrio */
  --solido: #fff;             /* acción primaria, chip y opción seleccionados */
  --solido-tinta: #0e1a36;
  --tinta-1: #fff;                     /* título */
  --tinta-2: rgba(255, 255, 255, .72); /* secundario */
  --tinta-3: rgba(255, 255, 255, .5);  /* terciario */

  /* --- Estados de flota, aclarados para leerse sobre fondo oscuro (spec,
     "Material"): los mismos nombres que usa el resto de la plataforma,
     reapuntados solo aquí dentro. --- */
  --color-ok: #5fd39a;
  --color-warn: #f0b65a;
  --color-danger: #ff8f6b;

  /* --- Geometría — horizontal y tablet por default (spec, "Geometría").
     El corte de teléfono la aprieta más abajo. --- */
  --margen: 24px;         /* borde de pantalla a cualquier superficie */
  --hueco: 20px;          /* entre superficies hermanas */
  --relleno: 24px;        /* interior de tarjeta */
  --radio-tarjeta: 28px;
  /* Radio de lo que va DENTRO de una tarjeta (regla 1 de "Geometría":
     "radio interior = radio exterior − relleno, mínimo 12 px"). Es token y no
     un número por componente para que la regla se escriba UNA vez: la imagen
     de la tarjeta de producto, el marco de una miniatura y el renglón de una
     pieza salen todos de aquí, y siguen solos a `--radio-tarjeta` y
     `--relleno` cuando el corte de teléfono los aprieta. */
  --radio-interior: max(12px, calc(var(--radio-tarjeta) - var(--relleno)));
  --radio-control: 999px; /* píldoras */
  --cabecera: 64px;       /* alto */
  --riel: 88px;           /* ancho de la cápsula vertical */
  --barra-nav: 68px;      /* alto de la cápsula horizontal */
  --control: 48px;        /* alto de botón; nunca menos que --tap (44) */
  /* Etiqueta de la cápsula. Es token propio y no `--text-xs` a secas porque
     el corte compacto la baja a 10 px (spec, "Cortes"), y ese 10 no es un
     tamaño del sistema de HQ: solo existe aquí. */
  --texto-capsula: var(--text-xs);

  /* --- Movimiento: una sola perilla, para apagarla entera bajo
     prefers-reduced-motion sin tocar cada transición suelta. --- */
  --transicion: 150ms ease;
}

/* Teléfono: "horizontal bajo" (acostado) y "compacto" (de pie) son las
   dos caras del mismo aparato, no del mismo corte de orientación —
   comparten la geometría más apretada de la spec. */
@media (orientation: landscape) and (max-height: 500px),
       (orientation: portrait) and (max-width: 599px) {
  body.tablet {
    --margen: 16px;
    --hueco: 12px;
    --relleno: 16px;
    --radio-tarjeta: 22px;
    --cabecera: 56px;
    --riel: 64px; /* solo lo usa "horizontal bajo": en vertical no hay riel */
    --barra-nav: 60px;
    --texto-capsula: 10px; /* spec, "Cortes": etiqueta de 10 px en compacto */
  }
}

/* --- Respaldos (spec, "Material"): sin backdrop-filter o con
   transparencia reducida, la flota deja de ser translúcida y se vuelve
   un panel casi opaco — sigue garantizando el contraste, solo que sin
   desenfoque detrás. --- */
@supports not (backdrop-filter: blur(1px)) {
  body.tablet {
    --vidrio-flota: var(--vidrio-opaco);
    --vidrio-desenfoque: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  body.tablet {
    --vidrio-flota: var(--vidrio-opaco);
    --vidrio-desenfoque: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.tablet { --transicion: 0s; }
}