/* Documentos.app · tokens del sistema visual v1
   Blanco, negro y un amarillo que solo aparece donde algo merece la mirada:
   la acción principal de la pantalla (una sola), los créditos y los estados que piden algo al usuario.
   Fuente de verdad: este archivo. tokens.json es su espejo para herramientas y para el líder técnico.

   Reglas que los tokens no pueden expresar solos:
   1. El amarillo nunca es texto sobre blanco (1,45:1). Sobre blanco va de relleno con tinta encima
      (14,5:1) o acompañado de un filete de tinta. Para texto «amarillo» sobre claro: --da-amarillo-hondo.
   2. Un estado nunca se comunica solo con color: palabra + forma (● sano, ▲ vigilar, ■ revisar).
   3. Solo se animan transform y opacity. Todo movimiento tiene su versión quieta (prefers-reduced-motion). */

/* Las fuentes se declaran en fuentes/fuentes.css. */


:root {
  /* ── Escala de grises (cálidos, sin tinte frío) ────────────────────────────── */
  --da-g-0: #ffffff;
  --da-g-25: #fafaf8;
  --da-g-50: #f4f4f1;
  --da-g-100: #ebebe7;
  --da-g-200: #dcdcd7;
  --da-g-300: #c4c4be;
  --da-g-400: #8f8f89; /* 3,25:1 sobre blanco: solo bordes de campos y glifos, nunca texto */
  --da-g-500: #6b6b66; /* 5,36:1 sobre blanco: texto secundario mínimo */
  --da-g-600: #4f4f4b;
  --da-g-700: #3a3a37;
  --da-g-800: #262624;
  --da-g-850: #1c1c1a;
  --da-g-900: #141413;
  --da-g-950: #0b0b0a;
  --da-g-1000: #000000;

  /* ── Amarillo «sello» ─────────────────────────────────────────────────────── */
  --da-amarillo: #ffd22e;        /* relleno: acción principal, créditos, foco que pide algo */
  --da-amarillo-pulsado: #f2c200;
  --da-amarillo-hondo: #7a5a00;  /* texto o glifo amarillo sobre claro: 6,38:1 */
  --da-amarillo-velo: #fff4c7;   /* único fondo amarillo permitido: <mark> de coincidencias de búsqueda */
  --da-sobre-amarillo: #000000;

  /* ── Estados (tonos hondos, poco saturados; siempre con palabra y forma) ─── */
  --da-verde-hondo: #17703f;   /* 6,13:1 */
  --da-verde-vivo: #5fcb8e;    /* para oscuro: 9,15:1 */
  --da-rojo-hondo: #b3261e;    /* 6,54:1 */
  --da-rojo-vivo: #ff8a80;     /* para oscuro: 8,07:1 */

  /* ── Tipografía ───────────────────────────────────────────────────────────── */
  --da-f-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --da-f-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --da-f-mono: ui-monospace, "SF Mono", "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  /* Escala modular 1,2 desde 15 px (la app es densa; la landing sube un escalón) */
  --da-t-10: 0.6875rem;  /* 11  · etiquetas en versalitas, con tracking */
  --da-t-20: 0.75rem;    /* 12  · metadatos */
  --da-t-30: 0.8125rem;  /* 13  · tablas densas, ayudas */
  --da-t-40: 0.9375rem;  /* 15  · base de la app */
  --da-t-50: 1.0625rem;  /* 17  · cuerpo de lectura */
  --da-t-60: 1.25rem;    /* 20  · títulos de tarjeta (serif) */
  --da-t-70: 1.5rem;     /* 24  · títulos de sección (serif) */
  --da-t-80: 1.875rem;   /* 30  · título de pantalla (serif) */
  --da-t-90: 2.375rem;   /* 38  · nombre del expediente (serif) */
  --da-t-100: clamp(2.5rem, 1.6rem + 3vw, 3.75rem); /* 40–60 · portadas */

  --da-lh-apretado: 1.1;
  --da-lh-titulo: 1.2;
  --da-lh-ui: 1.4;
  --da-lh-lectura: 1.6;

  --da-tracking-versalitas: 0.14em;
  --da-tracking-titulo: -0.012em;

  /* ── Espaciado (base 4) ───────────────────────────────────────────────────── */
  --da-e-0: 2px;
  --da-e-1: 4px;
  --da-e-2: 8px;
  --da-e-3: 12px;
  --da-e-4: 16px;
  --da-e-5: 20px;
  --da-e-6: 24px;
  --da-e-7: 32px;
  --da-e-8: 40px;
  --da-e-9: 48px;
  --da-e-10: 64px;
  --da-e-11: 80px;
  --da-margen: clamp(16px, 3.2vw, 40px);

  /* ── Radios ───────────────────────────────────────────────────────────────── */
  --da-r-1: 4px;     /* etiquetas, teclas */
  --da-r-2: 8px;     /* campos, botones */
  --da-r-3: 12px;    /* tarjetas */
  --da-r-4: 20px;    /* hojas, overlays */
  --da-r-lleno: 999px;

  /* ── Filetes ──────────────────────────────────────────────────────────────── */
  --da-filete: 1px;
  --da-filete-foco: 2px;

  /* ── Movimiento ───────────────────────────────────────────────────────────── */
  --da-d-micro: 90ms;     /* pulsar, conmutar */
  --da-d-rapida: 160ms;   /* hover, aparecer un menú */
  --da-d-base: 240ms;     /* overlays, toasts */
  --da-d-amplia: 360ms;   /* cambio de vista */
  --da-d-escena: 600ms;   /* recarga de créditos, entrada de pantalla */

  --da-c-salida: cubic-bezier(0.2, 0.7, 0.2, 1);   /* lo que entra: frena al llegar */
  --da-c-entrada: cubic-bezier(0.5, 0, 0.75, 0);   /* lo que se va: arranca lento */
  --da-c-estandar: cubic-bezier(0.3, 0, 0, 1);     /* lo que se mueve dentro de la pantalla */

  /* Muelles precalculados (masa 1). Su duración es parte de la curva: no se cambian por separado. */
  --da-m-suave: linear(0, 0.052, 0.16, 0.279, 0.405, 0.519, 0.611, 0.694, 0.762, 0.813, 0.856, 0.89, 0.915, 0.936, 0.952, 0.963, 0.972, 0.979, 0.984, 0.988, 0.991, 0.993, 0.995, 0.996, 0.997, 0.998, 0.998, 0.999, 1);
  --da-m-suave-d: 730ms;  /* k 170 · c 26 · sin rebote: paneles, morph de altura */
  --da-m-vivo: linear(0, 0.078, 0.231, 0.426, 0.6, 0.759, 0.874, 0.962, 1.013, 1.043, 1.054, 1.054, 1.047, 1.037, 1.027, 1.018, 1.01, 1.005, 1.001, 0.998, 0.997, 0.997, 0.997, 0.998, 0.998, 0.999, 0.999, 1, 1);
  --da-m-vivo-d: 628ms;   /* k 320 · c 24 · 5 % de rebote: overlays, spotlight, toasts */
  --da-m-sello: linear(0, 0.08, 0.25, 0.447, 0.619, 0.778, 0.898, 0.981, 1.027, 1.053, 1.06, 1.057, 1.048, 1.036, 1.024, 1.015, 1.008, 1.002, 0.999, 0.997, 0.996, 0.996, 0.997, 0.998, 0.998, 0.999, 0.999, 1, 1);
  --da-m-sello-d: 502ms;  /* k 520 · c 30 · el golpe del sello de créditos */
  --da-m-rebote: linear(0, 0.112, 0.353, 0.624, 0.86, 1.03, 1.126, 1.159, 1.15, 1.115, 1.072, 1.032, 1.002, 0.983, 0.975, 0.975, 0.98, 0.987, 0.993, 0.999, 1.002, 1.004, 1.004, 1.003, 1.002, 1.001, 1, 1, 1);
  --da-m-rebote-d: 693ms; /* k 400 · c 20 · solo para la recarga: el único momento celebrable */

  /* ── Capas ────────────────────────────────────────────────────────────────── */
  --da-z-cabecera: 20;
  --da-z-menu: 30;
  --da-z-overlay: 40;
  --da-z-toast: 50;

  /* ── Tamaños de la app ────────────────────────────────────────────────────── */
  --da-cabecera: 56px;
  --da-lateral: 232px;
  --da-toque: 44px; /* objetivo táctil mínimo */
}

/* ── Roles: modo claro (por defecto) ──────────────────────────────────────── */
:root,
:root[data-tema="claro"] {
  color-scheme: light;
  --da-fondo: var(--da-g-25);           /* el lienzo */
  --da-superficie: var(--da-g-0);       /* hojas y tarjetas */
  --da-superficie-opaca: var(--da-g-0); /* siempre opaca, también con el material cristal: lo que tiene que tapar (cabeceras sticky, celdas fijas) */
  --da-superficie-2: var(--da-g-50);    /* zonas hundidas, filas alternas, skeleton */
  --da-superficie-3: var(--da-g-100);
  --da-linea: var(--da-g-100);          /* filetes de división */
  --da-linea-fuerte: var(--da-g-200);
  --da-borde-campo: var(--da-g-400);    /* 3,25:1 · contorno de controles (≥3:1) */
  --da-tinta: var(--da-g-1000);
  --da-texto: var(--da-g-800);
  --da-texto-2: var(--da-g-500);        /* secundario: 5,36:1 */
  --da-texto-3: var(--da-g-400);        /* deshabilitado o decorativo, nunca información */
  --da-invertido: var(--da-g-0);        /* texto sobre tinta */
  --da-foco: var(--da-g-1000);          /* anillo de foco: tinta, con aire blanco */
  --da-foco-aire: var(--da-g-0);

  --da-exito: var(--da-verde-hondo);
  --da-error: var(--da-rojo-hondo);
  --da-atencion: var(--da-amarillo);         /* relleno */
  --da-atencion-texto: var(--da-amarillo-hondo);
  /* Acción principal (AMARILLO.md, uso 1). En NEGRO (tinta): provisional (orquestador, 7-nov), pendiente de Luis. Volver al amarillo
     es devolver estos cuatro a amarillo, amarillo-pulsado, sobre-amarillo y g-1000 (y el borde del oscuro a amarillo). */
  --da-primario: var(--da-tinta);
  --da-primario-pulsado: var(--da-texto);
  --da-sobre-primario: var(--da-invertido);
  --da-primario-borde: var(--da-tinta);
  --da-sello-aro: var(--da-g-1000);
  --da-sello-centro: var(--da-g-1000);
  --da-marca-fondo: var(--da-g-100);  /* <mark> de coincidencias: gris, no amarillo (Luis, 6-nov: menos amarillo) */
  --da-marca-texto: currentColor;
  --da-brillo: rgb(255 255 255 / 0.55);  /* barrido del esqueleto */
  --da-vigilar: var(--da-amarillo-hondo); /* semáforo «vigilar»: tono hondo, nunca el amarillo de relleno */

  --da-vidrio: rgb(255 255 255 / 0.72);   /* overlays: material translúcido */
  --da-velo-modal: rgb(250 250 248 / 0.6);
  --da-sombra-1: 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 1px rgb(0 0 0 / 0.04);
  --da-sombra-2: 0 2px 6px -2px rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.05);
  --da-sombra-3: 0 24px 64px -16px rgb(0 0 0 / 0.22), 0 8px 20px -8px rgb(0 0 0 / 0.10), 0 0 0 1px rgb(0 0 0 / 0.06);
}

/* ── Roles: modo oscuro ───────────────────────────────────────────────────── */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --da-fondo: var(--da-g-950);
  --da-superficie: var(--da-g-900);
  --da-superficie-opaca: var(--da-g-900);
  --da-superficie-2: var(--da-g-850);
  --da-superficie-3: var(--da-g-800);
  --da-linea: var(--da-g-800);
  --da-linea-fuerte: var(--da-g-700);
  --da-borde-campo: #75756f;          /* 3,6:1 sobre --da-g-900 */
  --da-tinta: #f4f3ee;
  --da-texto: #dcdcd6;
  --da-texto-2: #a3a39d;              /* 7,27:1 */
  --da-texto-3: #6b6b66;
  --da-invertido: var(--da-g-950);
  --da-foco: var(--da-amarillo);         /* en oscuro el foco sí es amarillo: 12,7:1 */
  --da-foco-aire: var(--da-g-950);

  --da-exito: var(--da-verde-vivo);
  --da-error: var(--da-rojo-vivo);
  --da-atencion: var(--da-amarillo);
  --da-atencion-texto: var(--da-amarillo);
  --da-primario-borde: var(--da-tinta);
  --da-sello-aro: var(--da-amarillo);
  --da-sello-centro: var(--da-g-950);
  --da-marca-fondo: rgb(255 255 255 / 0.12);
  --da-marca-texto: var(--da-tinta);
  --da-brillo: rgb(255 255 255 / 0.06);
  --da-vigilar: #e0b54a;  /* 9,5:1 sobre --da-g-900 */

  --da-vidrio: rgb(28 28 26 / 0.74);
  --da-velo-modal: rgb(0 0 0 / 0.5);
  --da-sombra-1: 0 0 0 1px rgb(255 255 255 / 0.06);
  --da-sombra-2: 0 2px 8px -2px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.07);
  --da-sombra-3: 0 28px 72px -12px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.09);
}
/* Seguir al sistema es opt-in (data-tema="sistema"): sin atributo la app es clara, y el oscuro lo elige el usuario. */
@media (prefers-color-scheme: dark) {
  :root[data-tema="sistema"] {
    color-scheme: dark;
    --da-fondo: var(--da-g-950);
    --da-superficie: var(--da-g-900);
    --da-superficie-opaca: var(--da-g-900);
    --da-superficie-2: var(--da-g-850);
    --da-superficie-3: var(--da-g-800);
    --da-linea: var(--da-g-800);
    --da-linea-fuerte: var(--da-g-700);
    --da-borde-campo: #75756f;
    --da-tinta: #f4f3ee;
    --da-texto: #dcdcd6;
    --da-texto-2: #a3a39d;
    --da-texto-3: #6b6b66;
    --da-invertido: var(--da-g-950);
    --da-foco: var(--da-amarillo);
    --da-foco-aire: var(--da-g-950);
    --da-exito: var(--da-verde-vivo);
    --da-error: var(--da-rojo-vivo);
    --da-atencion: var(--da-amarillo);
    --da-atencion-texto: var(--da-amarillo);
    --da-primario-borde: var(--da-tinta);
    --da-sello-aro: var(--da-amarillo);
    --da-sello-centro: var(--da-g-950);
    --da-marca-fondo: rgb(255 255 255 / 0.12);
    --da-marca-texto: var(--da-tinta);
    --da-brillo: rgb(255 255 255 / 0.06);
    --da-vigilar: #e0b54a;
  --da-primario-borde: var(--da-tinta);
  --da-sello-aro: var(--da-amarillo);
  --da-sello-centro: var(--da-g-950);
    --da-vidrio: rgb(28 28 26 / 0.74);
    --da-velo-modal: rgb(0 0 0 / 0.5);
    --da-sombra-1: 0 0 0 1px rgb(255 255 255 / 0.06);
    --da-sombra-2: 0 2px 8px -2px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.07);
    --da-sombra-3: 0 28px 72px -12px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.09);
  }
}

/* ══ Material «cristal líquido» ═══════════════════════════════════════════════════════════════════════════
   Se activa con <html data-material="cristal"> (y componentes/vidrio.css + componentes/dist/luz.js). Sin el atributo
   nada cambia. Mismos roles, otra materia: las superficies se vuelven vidrio sobre un fondo de luz quieto (amarillo de la
   marca, plata fría y papel), con filo especular, sombras por capas y radios más amplios. Nada morado.
   Reglas: (1) el texto nunca va sobre vidrio con menos de un 58 % de opacidad, y el secundario sube a --da-g-600 en
   claro (6,4:1 aun sobre el charco amarillo); (2) el desenfoque (backdrop-filter) solo va donde algo se desplaza por
   debajo: cabecera, barra del teléfono y capas flotantes; las hojas son vidrio sin desenfoque, porque debajo solo hay
   luz quieta; (3) con prefers-reduced-transparency o sin backdrop-filter, todo vuelve a ser opaco. */
:root[data-material="cristal"] {
  --da-r-3: 18px;
  --da-r-4: 26px;
  --da-a-superficie: 0.62;   /* opacidades: el bloque «sin transparencia» las pone a 1 */
  --da-a-barra: 0.7;
  --da-a-denso: 0.8;
  --da-a-vidrio: 0.72;
  --da-a-tinta: 0.86;
  --da-cristal-ambiente: 1;
  --da-cristal-desenfoque: blur(18px) saturate(170%);
  --da-cristal-desenfoque-alto: blur(30px) saturate(185%);
  --da-cristal-desenfoque-lente: blur(8px) saturate(170%);

  --da-fondo: #edece7;
  --da-superficie: rgb(255 255 255 / var(--da-a-superficie));
  --da-superficie-2: rgb(20 20 19 / 0.045);
  --da-superficie-3: rgb(20 20 19 / 0.08);
  --da-linea: rgb(20 20 19 / 0.08);
  --da-linea-fuerte: rgb(20 20 19 / 0.15);
  --da-borde-campo: #7d7d77;            /* 3,6:1 sobre el vidrio más claro */
  --da-texto-2: var(--da-g-600);
  --da-vidrio: rgb(255 255 255 / var(--da-a-vidrio));
  --da-velo-modal: rgb(237 236 231 / 0.4);
  --da-cristal-barra: rgb(250 250 248 / var(--da-a-barra));
  --da-cristal-denso: rgb(255 255 255 / var(--da-a-denso));
  --da-cristal-tinta: rgb(20 20 19 / var(--da-a-tinta));
  --da-cristal-filo: rgb(255 255 255 / 0.95);       /* filo especular, arriba a la izquierda */
  --da-cristal-filo-bajo: rgb(255 255 255 / 0.45);  /* su reflejo abajo a la derecha */
  --da-cristal-luz: rgb(255 255 255 / 0.75);        /* la luz que sigue al puntero */
  --da-cristal-brillo: rgb(255 255 255 / 0.55);     /* la media luna de los botones */
  --da-cristal-canto: rgb(255 255 255 / 0.28);      /* el canto de la lente: vidrio claro donde se ve la refracción */
  --da-cristal-amb-1: rgb(255 210 46 / 0.2);         /* charco amarillo (el de la marca), tenue: el amarillo es señal, no fondo */
  --da-cristal-amb-2: rgb(180 198 216 / 0.44);      /* plata fría; con más alfa, el rojo de error sobre el fondo baja de 4,5:1 en teléfono */
  --da-cristal-amb-3: rgb(255 236 170 / 0.7);      /* papel */
  --da-cristal-punto: rgb(20 20 19 / 0.075);        /* la trama de puntos de la marca */
  --da-sombra-1: inset 0 1px 0 rgb(255 255 255 / 0.85), 0 0 0 1px rgb(20 20 19 / 0.05), 0 2px 4px rgb(20 20 19 / 0.03), 0 14px 32px -18px rgb(20 20 19 / 0.24);
  --da-sombra-2: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 0 0 1px rgb(20 20 19 / 0.06), 0 4px 10px -4px rgb(20 20 19 / 0.08), 0 24px 44px -22px rgb(20 20 19 / 0.32);
  --da-sombra-3: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 0 0 1px rgb(20 20 19 / 0.07), 0 10px 24px -10px rgb(20 20 19 / 0.12), 0 40px 90px -30px rgb(20 20 19 / 0.4);
}
:root[data-material="cristal"][data-tema="oscuro"] {
  --da-a-superficie: 0.55;
  --da-a-barra: 0.68;
  --da-a-denso: 0.82;
  --da-a-vidrio: 0.76;
  --da-a-tinta: 0.9;
  --da-fondo: var(--da-g-950);
  --da-superficie: rgb(38 38 35 / var(--da-a-superficie));
  --da-superficie-2: rgb(255 255 255 / 0.05);
  --da-superficie-3: rgb(255 255 255 / 0.09);
  --da-linea: rgb(255 255 255 / 0.08);
  --da-linea-fuerte: rgb(255 255 255 / 0.15);
  --da-borde-campo: #75756f;
  --da-texto-2: #b3b3ad;  /* sube sobre vidrio oscuro: 5,6:1 aun con el halo amarillo */
  --da-vidrio: rgb(30 30 28 / var(--da-a-vidrio));
  --da-velo-modal: rgb(0 0 0 / 0.4);
  --da-cristal-barra: rgb(14 14 13 / var(--da-a-barra));
  --da-cristal-denso: rgb(30 30 28 / var(--da-a-denso));
  --da-cristal-tinta: rgb(244 243 238 / var(--da-a-tinta));
  --da-cristal-filo: rgb(255 255 255 / 0.24);
  --da-cristal-filo-bajo: rgb(255 255 255 / 0.06);
  --da-cristal-luz: rgb(255 255 255 / 0.09);
  --da-cristal-brillo: rgb(255 255 255 / 0.4);
  --da-cristal-canto: rgb(255 255 255 / 0.06);
  --da-cristal-amb-1: rgb(255 210 46 / 0.1);
  --da-cristal-amb-2: rgb(120 140 160 / 0.2);
  --da-cristal-amb-3: rgb(255 210 46 / 0.05);
  --da-cristal-punto: rgb(255 255 255 / 0.05);
  --da-sombra-1: inset 0 1px 0 rgb(255 255 255 / 0.09), 0 0 0 1px rgb(255 255 255 / 0.06), 0 16px 40px -18px rgb(0 0 0 / 0.75);
  --da-sombra-2: inset 0 1px 0 rgb(255 255 255 / 0.11), 0 0 0 1px rgb(255 255 255 / 0.08), 0 24px 50px -20px rgb(0 0 0 / 0.8);
  --da-sombra-3: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 0 0 1px rgb(255 255 255 / 0.09), 0 40px 90px -24px rgb(0 0 0 / 0.85);
}
@media (prefers-color-scheme: dark) {
  :root[data-material="cristal"][data-tema="sistema"] {
    --da-a-superficie: 0.55;
    --da-a-barra: 0.68;
    --da-a-denso: 0.82;
    --da-a-vidrio: 0.76;
    --da-a-tinta: 0.9;
    --da-fondo: var(--da-g-950);
    --da-superficie: rgb(38 38 35 / var(--da-a-superficie));
    --da-superficie-2: rgb(255 255 255 / 0.05);
    --da-superficie-3: rgb(255 255 255 / 0.09);
    --da-linea: rgb(255 255 255 / 0.08);
    --da-linea-fuerte: rgb(255 255 255 / 0.15);
    --da-borde-campo: #75756f;
    --da-texto-2: #b3b3ad;
    --da-vidrio: rgb(30 30 28 / var(--da-a-vidrio));
    --da-velo-modal: rgb(0 0 0 / 0.4);
    --da-cristal-barra: rgb(14 14 13 / var(--da-a-barra));
    --da-cristal-denso: rgb(30 30 28 / var(--da-a-denso));
    --da-cristal-tinta: rgb(244 243 238 / var(--da-a-tinta));
    --da-cristal-filo: rgb(255 255 255 / 0.24);
    --da-cristal-filo-bajo: rgb(255 255 255 / 0.06);
    --da-cristal-luz: rgb(255 255 255 / 0.09);
    --da-cristal-brillo: rgb(255 255 255 / 0.4);
    --da-cristal-canto: rgb(255 255 255 / 0.06);
    --da-cristal-amb-1: rgb(255 210 46 / 0.1);
    --da-cristal-amb-2: rgb(120 140 160 / 0.2);
    --da-cristal-amb-3: rgb(255 210 46 / 0.05);
    --da-cristal-punto: rgb(255 255 255 / 0.05);
    --da-sombra-1: inset 0 1px 0 rgb(255 255 255 / 0.09), 0 0 0 1px rgb(255 255 255 / 0.06), 0 16px 40px -18px rgb(0 0 0 / 0.75);
    --da-sombra-2: inset 0 1px 0 rgb(255 255 255 / 0.11), 0 0 0 1px rgb(255 255 255 / 0.08), 0 24px 50px -20px rgb(0 0 0 / 0.8);
    --da-sombra-3: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 0 0 1px rgb(255 255 255 / 0.09), 0 40px 90px -24px rgb(0 0 0 / 0.85);
  }
}
/* Sin transparencia: quien la pide (prefers-reduced-transparency) o el navegador o la GPU que no desenfocan.
   Las superficies se vuelven opacas, sin desenfoque y sin fondo de luz. Atributo repetido: gana a los dos temas. */
@media (prefers-reduced-transparency: reduce) {
  :root[data-material="cristal"][data-material] {
    --da-a-superficie: 1; --da-a-barra: 1; --da-a-denso: 1; --da-a-vidrio: 1; --da-a-tinta: 1;
    --da-cristal-ambiente: 0; --da-cristal-desenfoque: none; --da-cristal-desenfoque-alto: none; --da-cristal-desenfoque-lente: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-material="cristal"][data-material] {
    --da-a-superficie: 1; --da-a-barra: 1; --da-a-denso: 1; --da-a-vidrio: 1; --da-a-tinta: 1;
    --da-cristal-ambiente: 0;
  }
}

/* Movimiento reducido: las duraciones se vuelven casi nulas y los muelles, cortes limpios.
   Los componentes además cambian desplazamientos por fundidos (ver guía de movimiento). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --da-d-micro: 1ms;
    --da-d-rapida: 1ms;
    --da-d-base: 120ms;  /* se mantiene un fundido corto: un corte seco también desorienta */
    --da-d-amplia: 120ms;
    --da-d-escena: 1ms;
    --da-m-suave: linear(0, 1);
    --da-m-vivo: linear(0, 1);
    --da-m-sello: linear(0, 1);
    --da-m-rebote: linear(0, 1);
    --da-m-suave-d: 120ms;
    --da-m-vivo-d: 120ms;
    --da-m-sello-d: 1ms;
    --da-m-rebote-d: 1ms;
  }
}