/*
================================================================================
Sistema: Ecovía Comechingones (Smart City & Tourism)
Creador y Desarrollador: Silvio Deandrea
Copyright: © 2026 Silvio Deandrea. Todos los derechos reservados.
Licencia: Propiedad Privada - Producto Protegido por Derechos de Autor.
================================================================================
F81 — Design System Premium · TOKENS.

Fuente única de color, tipografía, radio, sombra, espaciado y movimiento.
Extraídos de la referencia visual `actualizar/1.png` (ver
docs/ACTUALIZAR_UI_PREMIUM_REFERENCIAS.md §2).

CSS puro y sin dependencias: lo cargan los 6 portales Y `cola.html` (la pantalla
de TV no carga Tailwind). No redefine ni pisa ninguna clase existente.
*/

/* -------------------------------------------------------------------------- */
/* Tipografía de display: Fraunces self-hosteada (F44). Vivía duplicada en los  */
/* CSS de 4 portales; el sistema la declara una sola vez para que también la    */
/* tengan `cola.html` y cualquier página nueva. CSP `font-src 'self'` OK.       */
/* -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/turismo/fonts/fraunces-latin.woff2') format('woff2');
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  /* ---- Superficies ------------------------------------------------------ */
  --eco-bg:           #f7faf8;   /* fondo de app (lienzo) */
  --eco-bg-warm:      #f7f5f0;   /* papel cálido heredado F44 (Turismo/Municipal) */
  --eco-surface:      #ffffff;
  --eco-surface-soft: #f1f7f4;
  --eco-surface-2:    #fbfaf7;
  --eco-navy:         #071c26;   /* sidebar / superficie oscura */
  --eco-navy-2:       #0b2633;
  --eco-navy-3:       #0d3038;

  /* ---- Marca y acentos --------------------------------------------------- */
  --eco-teal:      #00796b;
  --eco-teal-2:    #009688;
  --eco-teal-deep: #0f4c47;   /* ítem activo del sidebar */
  --eco-green:     #168f5a;
  --eco-lime:      #74c69d;
  --eco-gold:      #f2a51a;
  --eco-orange:    #f97316;
  --eco-orange-2:  #f2760c;
  --eco-red:       #ef4444;
  --eco-red-2:     #dc2626;
  --eco-rose:      #e11d48;
  --eco-blue:      #2563eb;
  --eco-purple:    #7c3aed;
  --eco-pink:      #e83e8c;
  --eco-aqua:      #14b8a6;

  /* ---- Texto ------------------------------------------------------------- */
  --eco-ink:       #0f172a;
  --eco-ink-2:     #1e293b;
  --eco-muted:     #64748b;
  --eco-muted-2:   #94a3b8;
  --eco-on-dark:   #e8f1f0;
  --eco-on-dark-2: #94adb4;

  /* ---- Semántica de estado (mismo criterio que el Portal Municipal) ------- */
  --eco-ok:        #16a34a;
  --eco-ok-bg:     #dcfce7;
  --eco-ok-fg:     #166534;
  --eco-warn:      #f59e0b;
  --eco-warn-bg:   #fef3c7;
  --eco-warn-fg:   #92400e;
  --eco-danger:    #dc2626;
  --eco-danger-bg: #fee2e2;
  --eco-danger-fg: #991b1b;
  --eco-info:      #0284c7;
  --eco-info-bg:   #e0f2fe;
  --eco-info-fg:   #075985;
  --eco-pend:      #7c3aed;
  --eco-pend-bg:   #ede9fe;
  --eco-pend-fg:   #5b21b6;
  --eco-neutral-bg:#e7e5e4;
  --eco-neutral-fg:#44403c;

  /* ---- Bordes, sombras, radios ------------------------------------------- */
  --eco-border:        rgba(15, 23, 42, 0.10);
  --eco-border-strong: rgba(15, 23, 42, 0.16);
  --eco-border-dark:   rgba(255, 255, 255, 0.10);

  --eco-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.06);
  --eco-shadow-md: 0 12px 30px rgba(15, 23, 42, 0.10);
  --eco-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.16);

  --eco-radius-sm: 10px;
  --eco-radius-md: 16px;
  --eco-radius-lg: 24px;
  --eco-radius-xl: 32px;
  --eco-radius-pill: 9999px;

  /* ---- Espaciado --------------------------------------------------------- */
  --eco-s1: 4px;  --eco-s2: 8px;  --eco-s3: 12px; --eco-s4: 16px;
  --eco-s5: 24px; --eco-s6: 32px; --eco-s7: 48px; --eco-s8: 64px;

  /* ---- Tipografía -------------------------------------------------------- */
  --eco-font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --eco-font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
                   'Helvetica Neue', Arial, sans-serif;
  --eco-fs-xs:   0.72rem;
  --eco-fs-sm:   0.82rem;
  --eco-fs-base: 0.94rem;
  --eco-fs-md:   1.05rem;
  --eco-fs-lg:   1.3rem;
  --eco-fs-xl:   1.75rem;
  --eco-fs-2xl:  2.25rem;
  --eco-fs-3xl:  3rem;

  /* ---- Layout ------------------------------------------------------------ */
  --eco-aside-w: 300px;
  --eco-rail-w:  312px;
  --eco-topbar-h: 60px;

  /* ---- Movimiento -------------------------------------------------------- */
  --eco-t-fast: 120ms;
  --eco-t:      180ms;
  --eco-t-slow: 240ms;
  --eco-ease:   cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- Capas ------------------------------------------------------------- */
  --eco-z-rail: 10;
  --eco-z-aside: 50;
  --eco-z-fab: 60;
  --eco-z-modal: 70;
  --eco-z-toast: 80;

  /* ---- Textura territorial (curvas de nivel, inline, sin request) --------- */
  --eco-topo-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='380' viewBox='0 0 600 380'%3E%3Cg fill='none' stroke='%230f766e' stroke-width='1.1'%3E%3Cpath d='M-20 300 Q90 250 200 282 T430 258 T640 292'/%3E%3Cpath d='M-20 330 Q90 282 200 312 T430 288 T640 322'/%3E%3Cpath d='M-20 268 Q90 216 200 250 T430 226 T640 262'/%3E%3Cpath d='M-20 234 Q90 180 200 216 T430 192 T640 230'/%3E%3Cpath d='M-20 198 Q90 146 200 182 T430 158 T640 196'/%3E%3Cpath d='M-20 160 Q90 110 200 146 T430 122 T640 160'/%3E%3Cpath d='M-20 120 Q90 74 200 108 T430 84 T640 122'/%3E%3Cpath d='M-20 78 Q90 36 200 68 T430 44 T640 82'/%3E%3C/g%3E%3C/svg%3E");
  --eco-topo-opacity: 0.05;
}

/* -------------------------------------------------------------------------- */
/* Tema OSCURO — portales de comando (Intendente, Seguridad/COE, Sistema, TV). */
/* Se activa con [data-eco-theme="dark"] en un CONTENEDOR, no en <body>, para   */
/* no contaminar el resto de la SPA (ver auditoría §6).                         */
/* -------------------------------------------------------------------------- */
[data-eco-theme="dark"] {
  --eco-bg:           #071c26;
  --eco-bg-warm:      #071c26;
  --eco-surface:      #0e2a33;
  --eco-surface-soft: #123540;
  --eco-surface-2:    #0b2430;
  --eco-ink:          #f1f7f6;
  --eco-ink-2:        #dbeae8;
  --eco-muted:        #8fa9b1;
  --eco-muted-2:      #6c8a94;
  --eco-border:       rgba(255, 255, 255, 0.10);
  --eco-border-strong:rgba(255, 255, 255, 0.18);
  --eco-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --eco-shadow-md: 0 14px 34px rgba(0, 0, 0, 0.45);
  --eco-shadow-lg: 0 26px 64px rgba(0, 0, 0, 0.55);
  --eco-ok-bg:     rgba(22, 163, 74, 0.18);
  --eco-ok-fg:     #6ee7a8;
  --eco-warn-bg:   rgba(245, 158, 11, 0.18);
  --eco-warn-fg:   #fcd34d;
  --eco-danger-bg: rgba(220, 38, 38, 0.20);
  --eco-danger-fg: #fca5a5;
  --eco-info-bg:   rgba(2, 132, 199, 0.20);
  --eco-info-fg:   #7dd3fc;
  --eco-pend-bg:   rgba(124, 58, 237, 0.22);
  --eco-pend-fg:   #c4b5fd;
  --eco-neutral-bg:rgba(255, 255, 255, 0.08);
  --eco-neutral-fg:#cbd5e1;
  --eco-topo-opacity: 0.07;
  color-scheme: dark;
}