/* ============================================================
   SIMULADOR DE PRESIDENTE for PARAGUAY
   TOKENS · la única fuente de verdad del diseño
   ------------------------------------------------------------
   SISTEMA "CÉDULA OFICIAL" (v2.0)
   Estética: documento de seguridad del Estado — billete de
   guaraníes, cédula, pasaporte. Grabado guilloche de fondo, oro
   con barrido holográfico, esquina troquelada, hilo de seguridad
   tricolor y tipografía condensada de formulario oficial.
   ============================================================
   Nunca escribas un color suelto en otro archivo: si no está acá,
   no existe. Así el tema claro y el oscuro se mantienen coherentes.

   Los nombres viejos (--verde, --texto, --sombra-2…) se conservan
   como alias vivos al final: 300 usos repartidos por game.css y
   app.js siguen funcionando sin tocar una línea.
   ============================================================ */

:root {
  /* ---------- Marca (idénticos en ambos temas) ---------- */
  --py-rojo: #c8241a;
  --py-rojo-osc: #8f1109;
  --py-azul: #0c46a8;
  --py-azul-osc: #06285f;
  --py-oro: #b8860f;
  --py-oro-claro: #e0b34a;
  --py-verde: #1d6b4f;          /* el verde del papel moneda */

  /* ============================================================
     TEMA CLARO · "papel moneda"
     El crema verdoso del papel de seguridad, no el beige de diario.
     ============================================================ */
  --fondo: #e9ebe1;
  --fondo-alt: #dcdfd0;
  --superficie: #fbfbf5;
  --superficie-2: #f1f2e9;
  --superficie-3: #e4e7da;
  --borde: #c9cdba;
  --borde-fuerte: #9ba48c;
  --tinta: #14181a;
  --tinta-2: #4c5551;
  --tinta-3: #7d867e;

  --acento: var(--py-rojo);
  --acento-txt: #fffdf7;
  --link: var(--py-azul);

  /* Semánticos */
  --ok: #16724a;
  --ok-suave: rgba(22, 114, 74, .13);
  --alerta: #92660a;
  --alerta-suave: rgba(146, 102, 10, .15);
  --peligro: #ab2018;
  --peligro-suave: rgba(171, 32, 24, .12);
  --info: var(--py-azul);
  --info-suave: rgba(12, 70, 168, .10);

  /* Sombras: papel apoyado sobre papel, con un filo de tinta */
  --sombra-1: 0 1px 0 rgba(20, 24, 26, .05), 0 1px 3px rgba(20, 24, 26, .09);
  --sombra-2: 0 2px 4px rgba(20, 24, 26, .07), 0 6px 16px rgba(20, 24, 26, .11);
  --sombra-3: 0 6px 12px rgba(20, 24, 26, .10), 0 18px 40px rgba(20, 24, 26, .16);
  --sombra-modal: 0 30px 70px rgba(20, 24, 26, .34);
  /* El hundido del sello: el botón se aplasta contra el papel */
  --sombra-hundida: inset 0 2px 5px rgba(20, 24, 26, .28);

  /* Trama guilloche: el grabado del billete. Es el fondo de todo. */
  --textura-papel: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cg%20fill='none'%20stroke='%23163a2e'%20stroke-width='.6'%20opacity='0.3'%3E%3Cpath%20d='M0%208%20q%2020%20-14%2040%200%20t%2040%200%20t%2040%200%20t%2040%200'/%3E%3Cpath%20d='M0%2032%20q%2020%20-19%2040%200%20t%2040%200%20t%2040%200%20t%2040%200'/%3E%3Cpath%20d='M0%2056%20q%2020%20-24%2040%200%20t%2040%200%20t%2040%200%20t%2040%200'/%3E%3Cpath%20d='M0%2080%20q%2020%20-14%2040%200%20t%2040%200%20t%2040%200%20t%2040%200'/%3E%3Cpath%20d='M0%20104%20q%2020%20-19%2040%200%20t%2040%200%20t%2040%200%20t%2040%200'/%3E%3Cpath%20d='M0%20128%20q%2020%20-24%2040%200%20t%2040%200%20t%2040%200%20t%2040%200'/%3E%3Cpath%20d='M0%20152%20q%2020%20-14%2040%200%20t%2040%200%20t%2040%200%20t%2040%200'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='%23163a2e'%20stroke-width='.5'%20opacity='0.22'%3E%3Cpath%20d='M8%200%20q%20-12%2020%200%2040%20t%200%2040%20t%200%2040%20t%200%2040'/%3E%3Cpath%20d='M32%200%20q%20-18%2020%200%2040%20t%200%2040%20t%200%2040%20t%200%2040'/%3E%3Cpath%20d='M56%200%20q%20-24%2020%200%2040%20t%200%2040%20t%200%2040%20t%200%2040'/%3E%3Cpath%20d='M80%200%20q%20-12%2020%200%2040%20t%200%2040%20t%200%2040%20t%200%2040'/%3E%3Cpath%20d='M104%200%20q%20-18%2020%200%2040%20t%200%2040%20t%200%2040%20t%200%2040'/%3E%3Cpath%20d='M128%200%20q%20-24%2020%200%2040%20t%200%2040%20t%200%2040%20t%200%2040'/%3E%3Cpath%20d='M152%200%20q%20-12%2020%200%2040%20t%200%2040%20t%200%2040%20t%200%2040'/%3E%3C/g%3E%3C/svg%3E");
  --trama-escala: 160px 160px;

  /* Barrido holográfico del oro (se mueve, como inclinar un billete) */
  --foil: linear-gradient(105deg,
      rgba(255,255,255,0) 20%, rgba(255,255,255,.62) 44%,
      rgba(255,244,214,.9) 50%, rgba(255,255,255,.62) 56%,
      rgba(255,255,255,0) 80%);
  --foil-oro: linear-gradient(160deg, #e8c463 0%, #b8860f 42%, #f0d488 58%, #9c6f08 100%);
  --foil-rojo: linear-gradient(160deg, #e04437 0%, #c8241a 45%, #8f1109 100%);

  /* Hilo de seguridad tricolor: el motivo que cose toda la interfaz */
  --hilo: linear-gradient(90deg,
      var(--py-rojo) 0 33.33%, var(--py-oro-claro) 33.33% 66.66%, var(--py-azul) 66.66% 100%);
  --hilo-v: linear-gradient(180deg,
      var(--py-rojo) 0 33.33%, var(--py-oro-claro) 33.33% 66.66%, var(--py-azul) 66.66% 100%);

  color-scheme: light;

  /* ============================================================
     TIPOGRAFÍA · condensada de formulario oficial
     Bahnschrift viene con Windows, DIN Alternate con macOS/iOS y
     Roboto Condensed con Android: la voz condensada se consigue
     sin descargar una sola fuente (el juego funciona offline).
     ============================================================ */
  --f-titulo: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", "Helvetica Neue Condensed", system-ui, sans-serif;
  --f-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --f-dato: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
  /* El serif queda reservado para los momentos de diario: el ticker,
     la tapa, los titulares de prensa. Ahí sigue siendo lo correcto. */
  --f-serif: "Georgia", "Times New Roman", "Iowan Old Style", serif;

  /* Escala tipográfica fluida: se adapta sola de móvil a escritorio */
  --t-xs: clamp(.7rem, .67rem + .12vw, .76rem);
  --t-sm: clamp(.79rem, .76rem + .15vw, .885rem);
  --t-md: clamp(.9rem, .87rem + .16vw, 1rem);
  --t-lg: clamp(1.06rem, 1rem + .3vw, 1.22rem);
  --t-xl: clamp(1.3rem, 1.12rem + .66vw, 1.7rem);
  --t-2xl: clamp(1.7rem, 1.35rem + 1.35vw, 2.5rem);
  --t-3xl: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem);

  /* Los títulos condensados piden más aire entre letras que un serif */
  --track-titulo: .015em;
  --track-etiqueta: .1em;       /* etiquetas de formulario oficial */

  /* ---------- Espaciado ---------- */
  --e-1: .25rem;
  --e-2: .5rem;
  --e-3: .75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;

  /* ---------- Formas · un documento no tiene esquinas de burbuja ---------- */
  --r-sm: 2px;
  --r-md: 5px;
  --r-lg: 9px;
  --r-full: 999px;
  --troquel: 14px;              /* el corte de la esquina troquelada */

  /* ---------- Movimiento ---------- */
  --vel-rapida: .13s;
  --vel-media: .26s;
  --vel-lenta: .5s;
  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-sello: cubic-bezier(.2, 1.5, .4, 1);   /* el rebote del sello al caer */
  --ease-salida: cubic-bezier(.5, 0, .75, 0);
  --vel-foil: 2.6s;             /* cada cuánto pasa el brillo del oro */

  /* ---------- Medidas ---------- */
  --tap: 44px;                 /* mínimo táctil — NO bajar de acá */
  --ancho-max: 1180px;
  --alto-cabecera: 80px;       /* valor por defecto; app.js la corrige con la altura real medida */
  --alto-ticker: 30px;         /* coincide con el height: 30px fijo de #ticker */
  --alto-nav: 64px;

  --z-base: 1;
  --z-sticky: 20;
  --z-nav: 30;
  --z-flotante: 40;
  --z-cajon: 80;               /* el cajón del menú, por debajo de los modales */
  --z-modal: 100;
  --z-fx: 300;
  --z-toast: 400;

  /* ---------- Alias de compatibilidad ----------
     app.js sigue coloreando indicadores dinámicos con var(--verde) /
     var(--rojo) / etc. — nombres heredados del style.css 1.x. En vez
     de tocar 68 sitios en el JS, se alían acá a los tokens reales.
     Como son var() (referencia viva, no valor copiado), resuelven
     bien en los dos temas sin redefinirse en el bloque oscuro. */
  --verde: var(--ok);
  --rojo: var(--peligro);
  --amarillo: var(--alerta);
  --oro: var(--py-oro);
  --texto: var(--tinta);
  --texto2: var(--tinta-2);
}

/* ============================================================
   TEMA OSCURO · "sesión nocturna"
   El Palacio a las tres de la mañana: azul de tinta, no gris.
   Se aplica por preferencia del sistema o por elección explícita.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { 
    /* La marca se aclara: el rojo y el oro de imprenta se apagan
       contra un fondo oscuro y dejan de pasar contraste. */
    --py-rojo: #e8453a;
    --py-rojo-osc: #a3160c;
    --py-azul: #4d8bf5;
    --py-oro: #d8a53a;
    --py-oro-claro: #f0cd75;
    --py-verde: #3fbe84;

    --fondo: #070b12;
    --fondo-alt: #04070d;
    --superficie: #0f1622;
    --superficie-2: #151f30;
    --superficie-3: #1c283c;
    --borde: #253549;
    --borde-fuerte: #3a5070;
    --tinta: #e7ecf3;
    --tinta-2: #98a8bf;
    --tinta-3: #6a7c95;

    --acento: #f2503f;
    --acento-txt: #ffffff;
    --link: #6fa8ff;

    --ok: #3fbe84;
    --ok-suave: rgba(63, 190, 132, .15);
    --alerta: #e3b23c;
    --alerta-suave: rgba(227, 178, 60, .15);
    --peligro: #ff6a5c;
    --peligro-suave: rgba(255, 106, 92, .15);
    --info: #6fa8ff;
    --info-suave: rgba(111, 168, 255, .13);

    --sombra-1: 0 1px 0 rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .55);
    --sombra-2: 0 2px 4px rgba(0, 0, 0, .5), 0 8px 20px rgba(0, 0, 0, .6);
    --sombra-3: 0 8px 18px rgba(0, 0, 0, .55), 0 22px 48px rgba(0, 0, 0, .7);
    --sombra-modal: 0 30px 80px rgba(0, 0, 0, .85);
    --sombra-hundida: inset 0 2px 6px rgba(0, 0, 0, .65);

    --textura-papel: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cg%20fill='none'%20stroke='%23a8d8ff'%20stroke-width='.6'%20opacity='0.16'%3E%3Cpath%20d='M0%208%20q%2020%20-14%2040%200%20t%2040%200%20t%2040%200%20t%2040%200'/%3E%3Cpath%20d='M0%2032%20q%2020%20-19%2040%200%20t%2040%200%20t%2040%200%20t%2040%200'/%3E%3Cpath%20d='M0%2056%20q%2020%20-24%2040%200%20t%2040%200%20t%2040%200%20t%2040%200'/%3E%3Cpath%20d='M0%2080%20q%2020%20-14%2040%200%20t%2040%200%20t%2040%200%20t%2040%200'/%3E%3Cpath%20d='M0%20104%20q%2020%20-19%2040%200%20t%2040%200%20t%2040%200%20t%2040%200'/%3E%3Cpath%20d='M0%20128%20q%2020%20-24%2040%200%20t%2040%200%20t%2040%200%20t%2040%200'/%3E%3Cpath%20d='M0%20152%20q%2020%20-14%2040%200%20t%2040%200%20t%2040%200%20t%2040%200'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='%23a8d8ff'%20stroke-width='.5'%20opacity='0.11'%3E%3Cpath%20d='M8%200%20q%20-12%2020%200%2040%20t%200%2040%20t%200%2040%20t%200%2040'/%3E%3Cpath%20d='M32%200%20q%20-18%2020%200%2040%20t%200%2040%20t%200%2040%20t%200%2040'/%3E%3Cpath%20d='M56%200%20q%20-24%2020%200%2040%20t%200%2040%20t%200%2040%20t%200%2040'/%3E%3Cpath%20d='M80%200%20q%20-12%2020%200%2040%20t%200%2040%20t%200%2040%20t%200%2040'/%3E%3Cpath%20d='M104%200%20q%20-18%2020%200%2040%20t%200%2040%20t%200%2040%20t%200%2040'/%3E%3Cpath%20d='M128%200%20q%20-24%2020%200%2040%20t%200%2040%20t%200%2040%20t%200%2040'/%3E%3Cpath%20d='M152%200%20q%20-12%2020%200%2040%20t%200%2040%20t%200%2040%20t%200%2040'/%3E%3C/g%3E%3C/svg%3E");

    /* En oscuro el brillo del foil es más frío y más corto: sobre azul
       de tinta, un barrido cálido y ancho se lee como una mancha. */
    --foil: linear-gradient(105deg,
        rgba(255,255,255,0) 24%, rgba(255,255,255,.34) 46%,
        rgba(255,238,190,.62) 50%, rgba(255,255,255,.34) 54%,
        rgba(255,255,255,0) 76%);
    --foil-oro: linear-gradient(160deg, #f0cd75 0%, #c9962c 44%, #f5dc9a 58%, #9c7115 100%);
    --foil-rojo: linear-gradient(160deg, #f2503f 0%, #c8241a 48%, #7d0f08 100%);

    color-scheme: dark;
  
 }
}

/* El toggle explícito gana en ambas direcciones */
:root[data-theme="dark"] { 
    /* La marca se aclara: el rojo y el oro de imprenta se apagan
       contra un fondo oscuro y dejan de pasar contraste. */
    --py-rojo: #e8453a;
    --py-rojo-osc: #a3160c;
    --py-azul: #4d8bf5;
    --py-oro: #d8a53a;
    --py-oro-claro: #f0cd75;
    --py-verde: #3fbe84;

    --fondo: #070b12;
    --fondo-alt: #04070d;
    --superficie: #0f1622;
    --superficie-2: #151f30;
    --superficie-3: #1c283c;
    --borde: #253549;
    --borde-fuerte: #3a5070;
    --tinta: #e7ecf3;
    --tinta-2: #98a8bf;
    --tinta-3: #6a7c95;

    --acento: #f2503f;
    --acento-txt: #ffffff;
    --link: #6fa8ff;

    --ok: #3fbe84;
    --ok-suave: rgba(63, 190, 132, .15);
    --alerta: #e3b23c;
    --alerta-suave: rgba(227, 178, 60, .15);
    --peligro: #ff6a5c;
    --peligro-suave: rgba(255, 106, 92, .15);
    --info: #6fa8ff;
    --info-suave: rgba(111, 168, 255, .13);

    --sombra-1: 0 1px 0 rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .55);
    --sombra-2: 0 2px 4px rgba(0, 0, 0, .5), 0 8px 20px rgba(0, 0, 0, .6);
    --sombra-3: 0 8px 18px rgba(0, 0, 0, .55), 0 22px 48px rgba(0, 0, 0, .7);
    --sombra-modal: 0 30px 80px rgba(0, 0, 0, .85);
    --sombra-hundida: inset 0 2px 6px rgba(0, 0, 0, .65);

    --textura-papel: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cg%20fill='none'%20stroke='%23a8d8ff'%20stroke-width='.6'%20opacity='0.16'%3E%3Cpath%20d='M0%208%20q%2020%20-14%2040%200%20t%2040%200%20t%2040%200%20t%2040%200'/%3E%3Cpath%20d='M0%2032%20q%2020%20-19%2040%200%20t%2040%200%20t%2040%200%20t%2040%200'/%3E%3Cpath%20d='M0%2056%20q%2020%20-24%2040%200%20t%2040%200%20t%2040%200%20t%2040%200'/%3E%3Cpath%20d='M0%2080%20q%2020%20-14%2040%200%20t%2040%200%20t%2040%200%20t%2040%200'/%3E%3Cpath%20d='M0%20104%20q%2020%20-19%2040%200%20t%2040%200%20t%2040%200%20t%2040%200'/%3E%3Cpath%20d='M0%20128%20q%2020%20-24%2040%200%20t%2040%200%20t%2040%200%20t%2040%200'/%3E%3Cpath%20d='M0%20152%20q%2020%20-14%2040%200%20t%2040%200%20t%2040%200%20t%2040%200'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='%23a8d8ff'%20stroke-width='.5'%20opacity='0.11'%3E%3Cpath%20d='M8%200%20q%20-12%2020%200%2040%20t%200%2040%20t%200%2040%20t%200%2040'/%3E%3Cpath%20d='M32%200%20q%20-18%2020%200%2040%20t%200%2040%20t%200%2040%20t%200%2040'/%3E%3Cpath%20d='M56%200%20q%20-24%2020%200%2040%20t%200%2040%20t%200%2040%20t%200%2040'/%3E%3Cpath%20d='M80%200%20q%20-12%2020%200%2040%20t%200%2040%20t%200%2040%20t%200%2040'/%3E%3Cpath%20d='M104%200%20q%20-18%2020%200%2040%20t%200%2040%20t%200%2040%20t%200%2040'/%3E%3Cpath%20d='M128%200%20q%20-24%2020%200%2040%20t%200%2040%20t%200%2040%20t%200%2040'/%3E%3Cpath%20d='M152%200%20q%20-12%2020%200%2040%20t%200%2040%20t%200%2040%20t%200%2040'/%3E%3C/g%3E%3C/svg%3E");

    /* En oscuro el brillo del foil es más frío y más corto: sobre azul
       de tinta, un barrido cálido y ancho se lee como una mancha. */
    --foil: linear-gradient(105deg,
        rgba(255,255,255,0) 24%, rgba(255,255,255,.34) 46%,
        rgba(255,238,190,.62) 50%, rgba(255,255,255,.34) 54%,
        rgba(255,255,255,0) 76%);
    --foil-oro: linear-gradient(160deg, #f0cd75 0%, #c9962c 44%, #f5dc9a 58%, #9c7115 100%);
    --foil-rojo: linear-gradient(160deg, #f2503f 0%, #c8241a 48%, #7d0f08 100%);

    color-scheme: dark;
  
 }