/* RedesPlus · sistema de diseño
 *
 * Un único archivo de tokens para el panel, el acceso y las páginas legales.
 * Los componentes usan solo los tokens semánticos (--surface, --ink-2, --accent…), nunca hex sueltos.
 *
 * Tipografía: Archivo (Omnibus-Type, SIL Open Font License 1.1, ver fonts/OFL.txt), variable en
 * peso (100–900) y anchura (62–125 %). La anchura es el recurso tipográfico del panel: los tiempos,
 * contadores y horas van estrechos y tabulares, como un código de tiempo; los títulos, anchos.
 *
 * Contraste medido (WCAG 2.2) sobre --bg, --surface y --surface-2 en ambos temas:
 * --ink ≥ 13,9:1 · --ink-2 ≥ 6,6:1 · --ink-3 ≥ 4,5:1 · --accent-text ≥ 5,5:1 · estados ≥ 4,5:1.
 * El amarillo de marca nunca es color de texto en tema claro: para eso está --accent-text.
 */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* tipografía */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 12px;   /* solo metadatos con contraste ≥ 4,5:1 */
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 15px;
  --fs-lg: 17px;
  --fs-xl: 21px;
  --fs-2xl: 27px;
  --fs-3xl: 34px;
  --lh-tight: 1.15;
  --lh: 1.5;
  --wdth-narrow: 78%;  /* códigos de tiempo, contadores */
  --wdth-wide: 112%;   /* títulos de pantalla */

  /* espacio (escala de 4) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* radios: cada nivel de jerarquía tiene el suyo */
  --r-xs: 5px;   /* etiquetas */
  --r-sm: 8px;   /* campos y botones */
  --r-md: 12px;  /* tarjetas */
  --r-lg: 18px;  /* paneles, diálogos */
  --r-pill: 999px;

  /* movimiento: una jerarquía fija (kit «curvas-resorte» del Centro de Mando, resortes de SwiftUI pasados a linear()).
     Tiempos: pulsar 100–160 ms · UI < 300 ms · hojas ~500 ms. Rebote SOLO en íconos (--resorte-icono) y en UNA
     celebración por página (--resorte-gelatina); superficies grandes sin rebote; color y opacidad nunca con rebote. */
  --dur-1: 120ms;  /* pulsar: botones, filas, chips */
  --dur-2: 180ms;  /* menús, chips, cambio de color */
  --dur-3: 240ms;  /* paneles, cambio de contenido */
  --dur-4: 320ms;  /* reordenar */
  --dur-view: 200ms;   /* cambio de pantalla (180–240) */
  --dur-sheet: 500ms;  /* hojas: subir, cambiar de altura, volver a su sitio */
  --dur-icon: 460ms;   /* microanimación de un ícono, una vez */
  --dur-party: 1020ms; /* la celebración (una por página) */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --salida: cubic-bezier(.16, 1, .3, 1);   /* entradas de contenido (expo.out) */
  --hoja: cubic-bezier(.32, .72, 0, 1);    /* la hoja de iOS: sin rebote */
  /* respaldo cubic-bezier (Safari < 17.2); @supports de abajo lo cambia por el resorte real */
  --ease-spring: cubic-bezier(.34, 1.3, .64, 1);      /* = seco: interruptores, pestañas, foco que encaja */
  --resorte-toque: cubic-bezier(.3, 1.3, .5, 1);
  --resorte-seco: cubic-bezier(.34, 1.3, .64, 1);
  --resorte-suave: cubic-bezier(.16, 1, .3, 1);
  --resorte-tarjeta: cubic-bezier(.22, 1.2, .36, 1);
  --resorte-icono: cubic-bezier(.34, 1.56, .64, 1);
  --resorte-gelatina: cubic-bezier(.3, 1.9, .5, 1);

  /* medidas de la cáscara */
  --side-w: 236px;
  --top-h: 60px;
  --tab-h: 64px;
  --tap: 44px;

  /* marca: invariable en ambos temas */
  --brand: #ffd21f;
  --on-brand: #1a1500;

  /* redes (solo para los distintivos de red, nunca como texto) */
  --net-youtube: #e62117;
  --net-tiktok: #111111;
  --net-instagram: #d6246e;
  --net-facebook: #1877f2;
  --net-twitch: #9146ff;
  --net-kick: #2bd04f;

  color-scheme: light;
  --bg: #f3f4f7;
  --surface: #ffffff;
  --surface-2: #eceef2;
  --surface-3: #e2e5eb;
  --ink: #151922;
  --ink-2: #4a5363;
  --ink-3: #646d7c;
  --line: #d9dde4;
  --line-strong: #b9bfca;
  --accent: var(--brand);
  --on-accent: var(--on-brand);
  --accent-edge: #d1a800;
  --accent-text: #7a5a00;
  --accent-soft: #fff4c2;
  --select: #fff0a8;
  --focus: #151922;
  --ok: #13734f;      --ok-soft: #e1f4ea;
  --warn: #8a5300;    --warn-soft: #fcefd6;
  --bad: #b0233a;     --bad-soft: #fbe3e6;
  --live: #c42620;    --live-soft: #fde4e1;
  --info: #24569e;    --info-soft: #e2ecfa;
  --scrim: rgba(13, 15, 20, .48);
  --glass: rgba(255, 255, 255, .86);
  --sh-1: 0 1px 2px rgba(21, 25, 34, .06), 0 1px 1px rgba(21, 25, 34, .04);
  --sh-2: 0 8px 24px -6px rgba(21, 25, 34, .18), 0 2px 6px rgba(21, 25, 34, .06);
  --sh-3: 0 24px 64px -12px rgba(21, 25, 34, .32), 0 4px 12px rgba(21, 25, 34, .08);
  --skeleton: #e6e9ee;
  --skeleton-shine: rgba(255, 255, 255, .7);
  /* series de gráficas por red: ≥ 3:1 sobre --surface en cada tema */
  --series-youtube: #c4302b;
  --series-tiktok: #151922;
  --series-instagram: #b02a6e;
  --series-facebook: #1f5fbf;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d0f14;
    --surface: #161920;
    --surface-2: #1e222b;
    --surface-3: #272c37;
    --ink: #edf0f5;
    --ink-2: #a4adbb;
    --ink-3: #8a93a2;
    --line: #2a2f3a;
    --line-strong: #3d4452;
    --accent-edge: var(--brand);
    --accent-text: var(--brand);
    --accent-soft: rgba(255, 210, 31, .12);
    --select: rgba(255, 210, 31, .16);
    --focus: var(--brand);
    --ok: #58cf98;      --ok-soft: rgba(88, 207, 152, .13);
    --warn: #f2b94b;    --warn-soft: rgba(242, 185, 75, .13);
    --bad: #ff7a88;     --bad-soft: rgba(255, 122, 136, .13);
    --live: #ff5a4e;    --live-soft: rgba(255, 90, 78, .14);
    --info: #8db8ff;    --info-soft: rgba(141, 184, 255, .13);
    --scrim: rgba(0, 0, 0, .62);
    --glass: rgba(22, 25, 32, .86);
    --sh-1: 0 0 0 1px rgba(255, 255, 255, .02);
    --sh-2: 0 12px 32px -8px rgba(0, 0, 0, .6);
    --sh-3: 0 28px 72px -12px rgba(0, 0, 0, .7);
    --skeleton: #1f232c;
    --skeleton-shine: rgba(255, 255, 255, .05);
    --series-youtube: #ff6b5e;
    --series-tiktok: #edf0f5;
    --series-instagram: #ff7ab8;
    --series-facebook: #6fa8ff;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0f14;
  --surface: #161920;
  --surface-2: #1e222b;
  --surface-3: #272c37;
  --ink: #edf0f5;
  --ink-2: #a4adbb;
  --ink-3: #8a93a2;
  --line: #2a2f3a;
  --line-strong: #3d4452;
  --accent-edge: var(--brand);
  --accent-text: var(--brand);
  --accent-soft: rgba(255, 210, 31, .12);
  --select: rgba(255, 210, 31, .16);
  --focus: var(--brand);
  --ok: #58cf98;      --ok-soft: rgba(88, 207, 152, .13);
  --warn: #f2b94b;    --warn-soft: rgba(242, 185, 75, .13);
  --bad: #ff7a88;     --bad-soft: rgba(255, 122, 136, .13);
  --live: #ff5a4e;    --live-soft: rgba(255, 90, 78, .14);
  --info: #8db8ff;    --info-soft: rgba(141, 184, 255, .13);
  --scrim: rgba(0, 0, 0, .62);
  --glass: rgba(22, 25, 32, .86);
  --sh-1: 0 0 0 1px rgba(255, 255, 255, .02);
  --sh-2: 0 12px 32px -8px rgba(0, 0, 0, .6);
  --sh-3: 0 28px 72px -12px rgba(0, 0, 0, .7);
  --skeleton: #1f232c;
  --skeleton-shine: rgba(255, 255, 255, .05);
  --series-youtube: #ff6b5e;
  --series-tiktok: #edf0f5;
  --series-instagram: #ff7ab8;
  --series-facebook: #6fa8ff;
}

@supports (animation-timing-function: linear(0, 1)) {
  :root {
    /* seco: ζ .86, rebote 0,5 %. Interruptores, pestañas, el pulgar del segmentado */
    --resorte-seco: linear(0, .006 1.5%, .024 3.3%, .054 5%, .097 7%, .188 10.5%, .503 21.5%, .597 25.3%, .675 28.8%, .738 32%, .795 35.5%, .843 39%, .882 42.5%, .921 47%, .951 51.8%, .974 57%, .989 62.8%, 1.004 77.8%, 1);
    --ease-spring: var(--resorte-seco);
    /* toque: ζ .85, rebote 0,6 %. Pulsar y soltar */
    --resorte-toque: linear(0, .006 1.5%, .023 3%, .052 4.8%, .097 6.8%, .193 10.3%, .507 20.8%, .599 24.3%, .681 27.8%, .746 31%, .805 34.5%, .854 38%, .893 41.5%, .93 45.8%, .959 50.5%, .98 55.5%, .994 61.3%, 1.006 75.8%, 1);
    /* suave: ζ 1, sin rebote. Hojas, paneles: llegan y se quedan */
    --resorte-suave: linear(0, .005 1.3%, .021 2.8%, .083 6%, .161 9%, .453 19.3%, .546 23%, .623 26.5%, .689 30%, .745 33.5%, .796 37.3%, .837 41%, .878 45.8%, .911 50.7%, .938 56.3%, .958 62.3%, .984 76.3%, 1);
    /* tarjeta: ζ .78, rebote 2 %. Avisos que entran */
    --resorte-tarjeta: linear(0, .006 1.5%, .026 3.3%, .058 5%, .105 7%, .206 10.5%, .537 21%, .635 24.5%, .72 28%, .787 31.3%, .844 34.5%, .89 37.8%, .93 41.3%, .964 45.3%, .989 49.5%, 1.006 54.3%, 1.016 59.5%, 1.019 71.3%, 1);
    /* icono: ζ .55, rebote 12,6 %. SOLO microanimación de ícono */
    --resorte-icono: linear(0, .007 1.3%, .032 2.8%, .072 4.3%, .133 6%, .264 9%, .561 15%, .679 17.5%, .795 20.3%, .886 22.8%, .962 25.3%, 1.022 27.8%, 1.067 30.3%, 1.098 32.8%, 1.124 37%, 1.122 42%, 1.103 46.3%, 1.02 60.5%, 1 65.8%, .989 71%, .985 81.3%, 1);
    /* gelatina: ζ .4, rebote 25 %. UNA celebración por página */
    --resorte-gelatina: linear(0, .01 1%, .037 2%, .093 3.3%, .169 4.5%, .317 6.5%, .655 10.5%, .797 12.3%, .924 14%, 1.033 15.8%, 1.12 17.5%, 1.176 19%, 1.217 20.5%, 1.245 22.3%, 1.253 24.5%, 1.231 27.3%, 1.19 29.8%, 1.058 36%, 1.004 39%, .96 42.5%, .939 46%, .936 48.5%, .941 51.3%, .998 62.8%, 1.015 69.3%, 1.015 75%, .997 91.5%, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-view: 0ms; --dur-sheet: 0ms; --dur-icon: 0ms; --dur-party: 0ms; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
/* Pestaña oculta (theme.js y el portal ponen html.is-hidden): nada anima mientras nadie mira (batería). */
html.is-hidden *, html.is-hidden *::before, html.is-hidden *::after { animation-play-state: paused !important; }

/* base común */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh);
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--select); color: var(--ink); }
.tc { font-stretch: var(--wdth-narrow); font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}