/* La piel de Aurox en el panel de timbres (app.timbres.cc). GENERADO por ~/aurox/marca/generar.py
   (--solo-timbres) desde descarga-sat/web/app/globals.css: no se edita a mano. Sin la palabra «aurox»
   (José, 2026-10-16: «sólo la piel»). La noche es la clase `dark` en <html>, como en Descarga. Lo
   propio del panel va en app/static/style.css, sólo con estos tokens. */

/* Airbnb Cereal (la letra del manual de Ger) SÓLO si está instalada; si no, Figtree. */
@font-face { font-family: "Aurox Cereal"; font-weight: 300; src: local("AirbnbCerealWLt"), local("Airbnb Cereal App Light"), local("AirbnbCerealApp-Light"); }
@font-face { font-family: "Aurox Cereal"; font-weight: 400; src: local("AirbnbCerealWBk"), local("Airbnb Cereal App Book"), local("AirbnbCerealApp-Book"); }
@font-face { font-family: "Aurox Cereal"; font-weight: 500; src: local("AirbnbCerealWMd"), local("Airbnb Cereal App Medium"), local("AirbnbCerealApp-Medium"); }
@font-face { font-family: "Aurox Cereal"; font-weight: 700; src: local("AirbnbCerealWBd"), local("Airbnb Cereal App Bold"), local("AirbnbCerealApp-Bold"); }
@font-face { font-family: "Aurox Cereal"; font-weight: 800; src: local("AirbnbCerealWXBd"), local("Airbnb Cereal App Extra Bold"), local("AirbnbCerealApp-ExtraBold"); }
@font-face { font-family: "Aurox Cereal"; font-weight: 900; src: local("AirbnbCerealWBlk"), local("Airbnb Cereal App Black"), local("AirbnbCerealApp-Black"); }

:root {
  --font-figtree: "Figtree";
  --font-plex-mono: "IBM Plex Mono";
  --font-sans: "Aurox Cereal", var(--font-figtree), system-ui, sans-serif;
  --font-mono: var(--font-plex-mono), ui-monospace, monospace;
}

:root {
  color-scheme: light;
  --background: oklch(0.962 0.006 250);
  --foreground: oklch(0.300 0.033 256);
  --heading: oklch(0.248 0.032 252.8);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.300 0.033 256);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.300 0.033 256);
  --brand: oklch(0.4748 0.0898 225.108);
  --brand-foreground: oklch(0.99 0.004 250);
  --brand-muted: oklch(0.952 0.016 232);
  --brand-2: oklch(0.726 0.085 246.4);
  --wordmark: oklch(0.248 0.032 252.8);
  --sombra-intro: oklch(0 0 0);
  --success: oklch(0.495 0.090 162);
  --success-foreground: oklch(0.99 0.004 250);
  --warning: oklch(0.837 0.164 84);
  --warning-foreground: oklch(0.248 0.032 252.8);
  --warning-strong: oklch(0.50 0.12 66);
  --danger: oklch(0.505 0.190 27.5);
  --danger-foreground: oklch(0.99 0.004 250);
  --primary: var(--brand);
  --primary-foreground: var(--brand-foreground);
  --secondary: oklch(0.925 0.008 250);
  --secondary-foreground: oklch(0.372 0.035 256);
  --muted: oklch(0.925 0.008 250);
  --muted-foreground: oklch(0.497 0.035 256);
  --accent: oklch(0.905 0.010 250);
  --accent-foreground: oklch(0.248 0.032 252.8);
  --destructive: var(--danger);
  --destructive-foreground: var(--danger-foreground);
  --border: oklch(0.868 0.010 250);
  --input: oklch(0.868 0.010 250);
  --ring: var(--brand);
  --sidebar: oklch(0.976 0.004 250);
  --sidebar-foreground: oklch(0.300 0.033 256);
  --sidebar-primary: var(--brand);
  --sidebar-primary-foreground: var(--brand-foreground);
  --sidebar-accent: oklch(0.925 0.008 250);
  --sidebar-accent-foreground: oklch(0.248 0.032 252.8);
  --sidebar-border: oklch(0.868 0.010 250);
  --sidebar-ring: var(--ring);
  --chart-1: var(--brand);
  --chart-2: oklch(0.620 0.090 244);
  --chart-3: var(--warning);
  --chart-4: oklch(0.55 0.15 300);
  --chart-5: var(--danger);
  --glass: inset 0 1px 1px oklch(1 0 0), inset 0 -1px 1px oklch(1 0 0 / 0.5), 0 18px 44px oklch(0.248 0.032 252.8 / 0.14);
  --brand-glow: var(--brand);
}

:root.dark {
  color-scheme: dark;
  --background: oklch(0.248 0.032 252.8);
  --foreground: oklch(0.935 0.010 250);
  --heading: oklch(0.985 0.004 250);
  --card: oklch(0.285 0.032 256);
  --card-foreground: oklch(0.935 0.010 250);
  --popover: oklch(0.310 0.030 256);
  --popover-foreground: oklch(0.935 0.010 250);
  --brand: oklch(0.726 0.085 246.4);
  --brand-foreground: oklch(0.248 0.032 252.8);
  --brand-glow: oklch(0.726 0.085 246.4);
  --brand-muted: oklch(0.320 0.050 240);
  --brand-2: oklch(0.580 0.095 227);
  --wordmark: oklch(0.802 0 0);
  --sombra-intro: oklch(0 0 0);
  --success: oklch(0.785 0.130 162);
  --success-foreground: oklch(0.248 0.032 252.8);
  --warning: oklch(0.837 0.164 84);
  --warning-foreground: oklch(0.248 0.032 252.8);
  --warning-strong: var(--warning);
  --danger: oklch(0.711 0.166 22);
  --danger-foreground: oklch(0.248 0.032 252.8);
  --primary: var(--brand);
  --primary-foreground: var(--brand-foreground);
  --secondary: oklch(0.310 0.028 256);
  --secondary-foreground: oklch(0.935 0.010 250);
  --muted: oklch(0.290 0.028 256);
  --muted-foreground: oklch(0.760 0.025 250);
  --accent: oklch(0.335 0.028 256);
  --accent-foreground: oklch(0.985 0.004 250);
  --destructive: var(--danger);
  --destructive-foreground: var(--danger-foreground);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 18%);
  --ring: var(--brand);
  --sidebar: oklch(0.215 0.032 256);
  --sidebar-foreground: oklch(0.935 0.010 250);
  --sidebar-primary: var(--brand);
  --sidebar-primary-foreground: var(--brand-foreground);
  --sidebar-accent: oklch(0.310 0.028 256);
  --sidebar-accent-foreground: oklch(0.985 0.004 250);
  --sidebar-border: oklch(1 0 0 / 8%);
  --sidebar-ring: var(--ring);
  --chart-1: var(--brand);
  --chart-2: var(--brand-2);
  --chart-3: var(--warning);
  --chart-4: oklch(0.75 0.12 300);
  --chart-5: var(--danger);
  --glass: inset 0 1px 1px oklch(1 0 0 / 0.12), 0 20px 44px oklch(0 0 0 / 0.36);
}

/* Las esperas y la intro, tal cual las de Descarga. */
@keyframes cargando-gira { to { transform: rotate(360deg); } }
@keyframes anillo-arriba { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes anillo-abajo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.cargando-gira { animation: cargando-gira 1s linear infinite; transform-origin: center; }
.anillo-gira { animation: cargando-gira 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite; transform-origin: 0 0; }
.anillo-arriba { animation: anillo-arriba 2.4s ease-in-out infinite; }
.anillo-abajo { animation: anillo-abajo 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .cargando-gira { animation-duration: 2.5s; }
  .anillo-gira, .anillo-arriba, .anillo-abajo { animation-duration: 6s; }
}
/* La intro de arranque (`license/intro-arranque.tsx`, 2026-10-04): el giro va
 * en CSS sobre un contenedor HTML y no en JS, para que se mueva desde el
 * primer cuadro, antes de que cargue la página, y sin trabarse mientras carga
 * (medido: 4 s de capa con el anillo quieto casi todo el tiempo). Una vuelta
 * de 950 ms y una pausa de 150 ms: el JS desdobla el anillo en esa pausa.
 * Con movimiento reducido, más despacio; el JS lee la duración real. */
@keyframes intro-gira {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  86.36% { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}
@keyframes intro-respira {
  0%, 50%, 100% { transform: translateY(0); }
  25% { transform: translateY(5px); }
  75% { transform: translateY(-5px); }
}
.intro-gira { animation: intro-gira 1.1s infinite; will-change: transform; }
.intro-respira-izq { animation: intro-respira 1.1s ease-in-out infinite; }
.intro-respira-der { animation: intro-respira 1.1s ease-in-out infinite reverse; }
@media (prefers-reduced-motion: reduce) {
  .intro-gira, .intro-respira-izq, .intro-respira-der { animation-duration: 2.75s; }
}

/* El lenguaje visual de Descarga: rótulo, vidrio, activo del menú, fantasma y atmósfera. */
@layer components {
  .text-eyebrow {
    font-size: 0.75rem;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    font-family: var(--font-mono);
    color: var(--muted-foreground);
  }
  .text-hero-number {
    font-family: var(--font-mono);
    font-feature-settings: "tnum", "lnum";
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.05em;
    line-height: 0.95;
    font-weight: 600;
  }
  .card-premium {
    background: color-mix(in oklch, var(--card) 80%, transparent);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid var(--border);
    box-shadow: var(--glass);
    transition:
      border-color 260ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .card-premium:hover {
    border-color: var(--brand-2);
  }
  .dark .card-premium {
    background: color-mix(in oklch, var(--card) 72%, transparent);
  }
  @media (prefers-reduced-motion: reduce) {
    .card-premium,
    .card-premium:hover {
      transition: none;
      transform: none;
    }
  }
  .sidebar-active {
    background: linear-gradient(
      90deg,
      color-mix(in oklch, var(--brand) 16%, transparent),
      transparent 78%
    );
    box-shadow:
      inset 2px 0 0 0 var(--brand),
      0 1px 12px -6px color-mix(in oklch, var(--brand) 55%, transparent);
  }
  .dark .sidebar-active {
    background: linear-gradient(
      90deg,
      color-mix(in oklch, var(--brand) 20%, transparent),
      transparent 78%
    );
  }
  .btn-vivo {
    background-color: color-mix(in oklab, var(--muted) 70%, transparent);
    transition: background-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
      color 150ms cubic-bezier(0.16, 1, 0.3, 1),
      scale 140ms cubic-bezier(0.2, 0, 0, 1),
      filter 140ms cubic-bezier(0.2, 0, 0, 1);
  }
  .btn-vivo:hover:not(:disabled) {
    background-color: var(--accent);
  }
  .dark .btn-vivo {
    background-color: color-mix(in oklab, var(--muted) 85%, transparent);
  }
  .dark .btn-vivo:hover:not(:disabled) {
    background-color: color-mix(in oklab, var(--accent) 85%, transparent);
  }
  .btn-vivo:active:not(:disabled) {
    scale: 0.94;
  }
}

@layer utilities {
  .ambient {
    position: relative;
    isolation: isolate;
  }
  .ambient::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(
        58rem 42rem at 12% -8%,
        color-mix(in oklch, var(--brand-glow) 30%, transparent),
        transparent 62%
      ),
      radial-gradient(
        46rem 36rem at 96% 8%,
        color-mix(in oklch, var(--brand-2) 24%, transparent),
        transparent 60%
      );
  }
  .dark .ambient::before {
    background:
      radial-gradient(
        58rem 42rem at 12% -8%,
        color-mix(in oklch, var(--brand-glow) 20%, transparent),
        transparent 62%
      ),
      radial-gradient(
        46rem 36rem at 96% 8%,
        color-mix(in oklch, var(--brand-2) 14%, transparent),
        transparent 60%
      );
  }
  .glass {
    background: color-mix(in oklch, var(--card) 78%, transparent);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid var(--border);
    box-shadow: var(--glass);
    transition:
      border-color 260ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .dark .glass {
    background: color-mix(in oklch, var(--card) 70%, transparent);
  }
  .glass-hover:hover {
    border-color: var(--brand-2);
    transform: translateY(-3px);
  }
  .edge-light {
    position: relative;
  }
  .edge-light::before {
    content: "";
    position: absolute;
    inset-inline: 12%;
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in oklch, var(--brand) 45%, transparent),
      transparent
    );
    opacity: 0.6;
  }
  @keyframes ds-rise {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .rise-in {
    animation: ds-rise 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .stagger > * {
    animation: ds-rise 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .stagger > *:nth-child(1)  { animation-delay: 0ms; }
  .stagger > *:nth-child(2)  { animation-delay: 55ms; }
  .stagger > *:nth-child(3)  { animation-delay: 110ms; }
  .stagger > *:nth-child(4)  { animation-delay: 165ms; }
  .stagger > *:nth-child(5)  { animation-delay: 220ms; }
  .stagger > *:nth-child(6)  { animation-delay: 275ms; }
  .stagger > *:nth-child(n + 7) { animation-delay: 320ms; }
  @keyframes ds-sheen {
    from { transform: translateX(-120%); }
    to   { transform: translateX(220%); }
  }
  .sheen {
    position: relative;
    overflow: hidden;
  }
  .sheen::after {
    content: "";
    position: absolute;
    inset-block: 0;
    width: 38%;
    pointer-events: none;
    background: linear-gradient(
      100deg,
      transparent,
      oklch(1 0 0 / 0.10),
      transparent
    );
    animation: ds-sheen 1400ms cubic-bezier(0.16, 1, 0.3, 1) 1;
  }
  .numero-vivo {
    background: linear-gradient(
      175deg,
      var(--foreground) 12%,
      color-mix(in oklch, var(--brand) 88%, var(--foreground)) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  @keyframes ds-flow {
    from { background-position: 0 0; }
    to   { background-position: 2rem 0; }
  }
  .barra-viva {
    background-image: linear-gradient(
      100deg,
      color-mix(in oklch, var(--brand) 92%, transparent) 0 45%,
      color-mix(in oklch, var(--brand) 62%, transparent) 45% 100%
    );
    background-size: 2rem 100%;
    animation: ds-flow 900ms linear infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .rise-in,
    .stagger > *,
    .sheen::after,
    .barra-viva {
      animation: none !important;
    }
    .glass,
    .glass-hover:hover {
      transition: none !important;
      transform: none !important;
    }
  }
}

/* Las cuatro piezas que se miden contra Descarga, traducidas de sus clases (TAILWIND_A_CSS). */
/* cifra = leading-none numero-vivo text-[2.5rem] text-hero-number; en el HTML va además con: numero-vivo text-hero-number */
.cifra { font-size: 2.5rem; line-height: 1; }
/* rotulo = font-mono text-marca text-xs tracking-[0.22em] uppercase */
.rotulo { font-size: 0.75rem; line-height: 1rem; font-family: var(--font-mono); color: var(--brand); letter-spacing: 0.22em; text-transform: uppercase; }
/* titulo = font-semibold leading-tight text-2xl tracking-tight */
.titulo { font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; }
/* tabla = font-mono text-tenue text-xs tracking-[0.14em] uppercase */
.tabla-enc { font-size: 0.75rem; line-height: 1rem; font-family: var(--font-mono); color: var(--muted-foreground); letter-spacing: 0.14em; text-transform: uppercase; }