/* ══════════════════════════════════════════════════════════════════
   GELATOMAPS — DESIGN TOKENS v1.0
   Sistema de variables CSS unificado para todo el proyecto.

   INSTRUCCIONES DE USO:
   Cargar ANTES de cualquier otro CSS en todas las páginas.
   Este archivo NO contiene estilos — solo variables (tokens).

   Cuando base.css defina una variable con el mismo nombre, esta
   la sobreescribirá si se carga después. Cargar EN ESTE ORDEN:
     1. design-tokens.css  ← este archivo
     2. base.css           ← solo sus reglas, sin duplicar :root
     3. [otros archivos]

   Autor: Dpto 06 UX & Diseño — GelatoMaps
   Fecha: 29 Mar 2026
   ══════════════════════════════════════════════════════════════════ */

:root {

  /* ──────────────────────────────────────────────────────────────
     COLORES — BRAND PRIMARIOS
     ────────────────────────────────────────────────────────────── */

  /* Navy — identidad principal, header, texto dark */
  --color-primary:       #0B1F38;
  --color-primary-dark:  #071422;
  --color-primary-mid:   #162D4A;

  /* Teal — acento principal, CTAs, estados activos */
  /* DECISIÓN: #0D9488 es el teal oficial (16 apariciones, el más establecido) */
  --color-accent:        #0D9488;
  --color-accent-dark:   #0D7C72;   /* Para texto sobre blanco — 5.1:1 ✅ WCAG AA */
  --color-accent-b2b:    #0B8276;   /* Teal B2B light mode — entre accent y accent-dark; proveedor.css + mapa-proveedores.css */
  --color-accent-mid:    #0F766E;   /* Hover CTA proveedores — teal-700 */
  --color-accent-darker: #0B6158;   /* Hover de botones */
  --color-accent-hover:  #0a7a70;   /* Hover panel buttons B2B — entre mid y darker */
  --color-accent-light:  #5EEAD4;   /* Highlights sobre fondos oscuros */
  --color-accent-deepest:#074040;   /* Darkest teal gradient stop — scoop 3D */
  --color-accent-pale:   #F0FDFA;   /* Wash / chip activo en light mode */

  /* Gold / Amber — premium, badges, alertas warm */
  --color-gold:          #F59E0B;
  --color-gold-text:     #B45309;   /* Para texto sobre blanco — 5.0:1 ✅ WCAG AA */
  --color-gold-dark:     #92400E;   /* Texto dorado oscuro sobre fondos claros — WCAG AA */
  --color-gold-light:    #fcd34d;   /* amber-300 — badge premium texto sobre fondos oscuros */
  --color-gold-pale:     #FFFBEB;   /* Wash dorado */
  --color-gold-warm-end: #FFF8E1;   /* Gradient end stop — sidebar rank section warm gold */

  /* Purple — features premium, DragCream */
  --color-premium:        #7C3AED;
  --color-premium-dark:   #6D28D9;   /* Gradiente hover, sombras premium */
  --color-premium-light:  #A855F7;
  --color-premium-muted:  #C4B5FD;   /* Borde hover tarjetas premium */
  --color-premium-pale:   #EDE9FE;   /* Fondo medio wash premium */
  --color-premium-border: #DDD6FE;   /* Borde tarjetas/chips premium */
  --color-premium-wash:   #F5F3FF;   /* Fondo wash premium (más claro) */

  /* Vintage / Museo — paleta cálida artesanal para perfiles públicos */
  --color-vintage:        #3D2B1F;   /* Marrón oscuro — hero gradient start */
  --color-vintage-mid:    #5C4B3A;   /* Marrón medio — hero gradient mid */
  --color-vintage-dark:   #4A3728;   /* Marrón profundo — hero gradient end */
  --color-cream:          #FFFDF7;   /* Crema cálido — fondo card museo */

  /* Rose — stat cards proveedor-panel */
  --color-rose-light:     #F9A8D4;   /* pink-300 — stat value rose dark mode */
  --color-rose-dark:      #be185d;   /* pink-700 — stat value rose light mode */

  /* Vote — Voto Libre CTA y modal (diferenciado deliberadamente del teal principal) */
  --color-vote:           #E91E8C;   /* Material Pink 600 — CTA primario de voto */
  --color-vote-dark:      #C2185B;   /* Material Pink 700 — hover / pressed */
  --color-vote-pale:      #FCE7F3;   /* Fondo wash voto seleccionado */
  --color-vote-border:    #F9A8D4;   /* Borde chips sabor seleccionado */

  /* Orange — promociones CTAs */
  --color-orange:         #F97316;   /* orange-500 — gradient CTA promos */
  --color-orange-dark:    #EA580C;   /* orange-600 — gradient CTA promos start */

  /* Cone — bola 3D scoop component */
  --color-cone-light:     #e8b960;   /* waffle cone highlight */
  --color-cone-mid:       #d4a054;   /* waffle cone mid */
  --color-cone-dark:      #b8873a;   /* waffle cone shadow */


  /* ──────────────────────────────────────────────────────────────
     COLORES — SEMÁNTICOS
     ────────────────────────────────────────────────────────────── */

  --color-error:         #DC2626;
  --color-error-light:   #FCA5A5;   /* red-300 — texto error suave sobre fondos oscuros */
  --color-error-bg:      #FEF2F2;
  --color-error-border:  #FECACA;

  --color-success:        #16A34A;
  --color-success-vivid:  #22C55E;   /* green-500 — badge activo, checkmark hover votar */
  --color-success-dark:   #166534;   /* Texto verde sobre fondo claro — WCAG AA */
  --color-success-light:  #86EFAC;   /* Borde/badge verde claro */
  --color-success-bg:     #F0FDF4;   /* Fondo wash verde */
  --color-success-pale:   #DCFCE7;   /* Fondo wash verde más claro */
  --color-success-border: #BBF7D0;

  /* Emerald — variante proveedores premium badge (distinto del green success estándar) */
  --color-emerald:        #10B981;   /* emerald-500 — badge verificado proveedores */
  --color-emerald-text:   #6EE7B7;   /* emerald-300 — texto badge sobre fondos oscuros */
  --color-emerald-a10:    rgba(16,185,129,.10);
  --color-emerald-a25:    rgba(16,185,129,.25);
  --color-emerald-a50:    rgba(16,185,129,.50);  /* glow shadow punto online/estado activo */
  --color-emerald-400:    #34D399;   /* emerald-400 — badge bright verificado/live/presencial */
  --color-emerald-600:    #059669;   /* emerald-600 — texto "good" en admin, proveedor-panel.css --green */

  --color-warning:       #F59E0B;
  --color-warning-bg:    #FFFBEB;
  --color-warning-border:#FDE68A;

  --color-info:          #3B82F6;
  --color-info-dark:     #1E40AF;   /* Texto azul sobre fondo claro — WCAG AA */
  --color-info-light:    #93C5FD;   /* Borde/badge azul claro */
  --color-info-bg:       #EFF6FF;
  --color-info-pale:     #DBEAFE;   /* Fondo wash azul */

  /* Neutrales — grises sin temperatura */
  --color-neutral-border: #E5E7EB;  /* Borde neutro sobre blanco */
  --color-neutral-bg:     #F3F4F6;  /* Fondo neutro claro */
  --color-neutral-pale:   #F8FAFC;  /* Fondo casi-blanco con tono frío */
  --color-gray-900:       #111827;  /* gray-900 — dark text light mode B2B, Leaflet popup bg */


  /* ──────────────────────────────────────────────────────────────
     COLORES — FONDOS (DARK MODE — páginas principales)
     ────────────────────────────────────────────────────────────── */

  /* Fondo principal de páginas secundarias — verde-oscuro marca, NO azul-navy */
  --color-bg-deep:       #0a0f0f;   /* igual que profesionales.html */
  --color-bg-deep2:      #111918;

  /* Cards sobre dark */
  --color-bg-card:       #111918;
  --color-bg-card-hover: #162120;

  /* Header del mapa principal */
  --color-bg-header:     #0B1F38;


  /* ──────────────────────────────────────────────────────────────
     COLORES — FONDOS (LIGHT MODE — votación, fichas)
     ────────────────────────────────────────────────────────────── */

  /* Cream — el fondo cálido de GelatoMaps (Summer Afternoon energy) */
  --color-bg-cream:      #FEFCF8;
  --color-bg-smoke:      #F5F2ED;

  /* White */
  --color-white:         #FFFFFF;


  /* ──────────────────────────────────────────────────────────────
     COLORES — TEXTO
     ────────────────────────────────────────────────────────────── */

  /* Sobre fondos claros */
  --color-text:          #0B1F38;   /* Texto principal */
  --color-text-2:        #4B5563;   /* Texto secundario */
  --color-text-3:        #6B7280;   /* Terciario / placeholders */

  /* Sobre fondos oscuros */
  --color-text-on-dark:        #FFFFFF;
  --color-text-on-dark-mid:    rgba(255,255,255,.62);
  --color-text-on-dark-low:    rgba(255,255,255,.35);
  --color-text-on-dark-green:  #F0FDF4;   /* Blanco con tono verde suave — texto principal proveedores dark mode */


  /* ──────────────────────────────────────────────────────────────
     COLORES — BORDES
     ────────────────────────────────────────────────────────────── */

  /* Sobre fondos oscuros */
  --color-border:        rgba(255,255,255,.07);
  --color-border-md:     rgba(255,255,255,.12);
  --color-border-strong: rgba(255,255,255,.22);

  /* Sobre fondos claros */
  --color-border-light:  #E5DED3;
  --color-border-light2: #D4CCC4;


  /* ──────────────────────────────────────────────────────────────
     TIPOGRAFÍA — FAMILIAS
     ────────────────────────────────────────────────────────────── */

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* Aliases para compatibilidad con código existente */
  --font:    var(--font-body);
  --display: var(--font-display);


  /* ──────────────────────────────────────────────────────────────
     TIPOGRAFÍA — ESCALA (fluid clamp)
     Min (mobile) → Preferred (fluid) → Max (desktop)
     ────────────────────────────────────────────────────────────── */

  --font-hero: clamp(32px, 8vw, 48px);    /* Hero h1 única vez por página */
  --font-3xl:  clamp(24px, 6vw, 28px);    /* Section titles, page h1 */
  --font-2xl:  clamp(20px, 5vw, 24px);    /* h2, card headlines grandes */
  --font-xl:   clamp(18px, 4.5vw, 20px);  /* h3, modal titles */
  --font-lg:   clamp(16px, 4vw, 18px);    /* h4, destacados */
  --font-md:   clamp(14px, 3.6vw, 15px);  /* h5, body grande */
  --font-base: clamp(13px, 3.2vw, 14px);  /* Body text, párrafos */
  --font-sm:   clamp(11px, 2.8vw, 12px);  /* Labels, meta, captions */
  --font-xs:   clamp(10px, 2.4vw, 11px);  /* Badges, tooltips */
  --font-2xs:  clamp(9px, 2vw, 10px);     /* Micro labels */
  --font-3xs:  clamp(8px, 1.8vw, 9px);    /* Uso muy puntual */


  /* ──────────────────────────────────────────────────────────────
     TIPOGRAFÍA — LINE HEIGHTS
     ────────────────────────────────────────────────────────────── */

  --lh-tight:   1.15;  /* Headings h1-h2 grandes */
  --lh-snug:    1.3;   /* h3-h4, headlines medianos */
  --lh-normal:  1.5;   /* UI text, nav, labels */
  --lh-relaxed: 1.65;  /* Párrafos, descripciones */


  /* ──────────────────────────────────────────────────────────────
     ESPACIADO — Sistema de 4px
     ────────────────────────────────────────────────────────────── */

  --sp-2xs:  4px;   /* Micro: icono + texto */
  --sp-xs:   6px;   /* Pequeño: padding chips */
  --sp-sm:   8px;   /* Gap elementos relacionados */
  --sp-md:   12px;  /* Padding cards compactas */
  --sp-base: 16px;  /* Padding estándar — unidad base */
  --sp-lg:   20px;  /* Padding cards normales */
  --sp-xl:   24px;  /* Gap entre cards en grid — NO negociar */
  --sp-2xl:  32px;  /* Secciones dentro de página */
  --sp-3xl:  40px;  /* Entre secciones grandes */
  --sp-4xl:  64px;  /* Hero sections */


  /* ──────────────────────────────────────────────────────────────
     LAYOUT
     ────────────────────────────────────────────────────────────── */

  --max-w:    1200px;  /* Ancho máximo del contenido */
  --hdr-h:    58px;    /* Alto del header de páginas secundarias */
  --hdr-h-app: 72px;  /* Alto del header del mapa principal */


  /* ──────────────────────────────────────────────────────────────
     BREAKPOINTS (valores como referencia — usar en media queries)
     ────────────────────────────────────────────────────────────── */
  /* --bp-sm:  480px  → @media (min-width: 480px)  */
  /* --bp-md:  768px  → @media (min-width: 768px)  */
  /* --bp-lg:  1024px → @media (min-width: 1024px) */
  /* --bp-xl:  1280px → @media (min-width: 1280px) */
  /* NOTA: CSS no permite usar custom properties en media queries.    */
  /* Los valores están documentados aquí como referencia para         */
  /* todos los departamentos. Usar los números directamente.          */


  /* ──────────────────────────────────────────────────────────────
     BORDES Y RADIOS
     ────────────────────────────────────────────────────────────── */

  --radius:    12px;    /* Cards de heladería — estándar */
  --radius-sm:  8px;    /* Inputs, chips pequeños */
  --radius-md:  12px;   /* Cards principales */
  --radius-lg:  16px;   /* Modales, panels */
  --radius-xl:  24px;   /* Bottom sheets, hero cards */
  --radius-pill: 999px; /* Pills, tags, botones CTA */


  /* ──────────────────────────────────────────────────────────────
     SOMBRAS
     ────────────────────────────────────────────────────────────── */

  /* Light mode */
  --sh-sm:  0 1px 3px rgba(11,31,56,.06);
  --sh-md:  0 4px 12px rgba(11,31,56,.08);
  --sh-lg:  0 8px 32px rgba(11,31,56,.10);
  --sh-xl:  0 20px 60px rgba(11,31,56,.14);

  /* Aliases para compatibilidad */
  --sh:     var(--sh-lg);
  --sh-2xl: var(--sh-xl);

  /* Dark mode (sombras sobre oscuro) */
  --sh-dark-sm:  0 1px 3px rgba(0,0,0,.2);
  --sh-dark-md:  0 4px 12px rgba(0,0,0,.25);
  --sh-dark-lg:  0 12px 36px rgba(0,0,0,.30);
  --sh-dark-xl:  0 24px 60px rgba(0,0,0,.40);


  /* ──────────────────────────────────────────────────────────────
     TRANSICIONES
     ────────────────────────────────────────────────────────────── */

  /* General purpose */
  --transition:      all .2s cubic-bezier(.4,0,.2,1);
  --transition-fast: all .15s ease;

  /* Premium feel (spring physics) — ver premium-feel.css */
  --pf-press-in:    cubic-bezier(.25, 0, .35, 1);
  --pf-spring:      cubic-bezier(.34, 1.56, .64, 1);
  --pf-out-expo:    cubic-bezier(.16, 1, .3, 1);
  --pf-snappy:      cubic-bezier(.25, .46, .45, .94);

  --pf-dur-press:   65ms;
  --pf-dur-release: 200ms;
  --pf-dur-enter:   280ms;
  --pf-dur-spring:  320ms;


  /* ──────────────────────────────────────────────────────────────
     TIPOGRAFÍA — EXCEPCIÓN EDITORIAL
     Uso exclusivo: artículos del blog SSR (blog.py)
     El resto de la web usa --font-body (DM Sans).
     ────────────────────────────────────────────────────────────── */

  --font-editorial: 'Lora', Georgia, serif;


  /* ──────────────────────────────────────────────────────────────
     COLORES — TOKENS ADICIONALES
     Rankings, promociones, valoraciones
     ────────────────────────────────────────────────────────────── */

  /* Naranja — promociones, CTAs urgentes */
  --color-orange:        #EA580C;
  --color-orange-light:  #FED7AA;
  --color-orange-pale:   #FFF7ED;
  --color-orange-soft:   #FB923C;   /* Naranja suave UI — pages.css hero accents */

  /* Rankings metálicos */
  --color-gold-rank:     #F59E0B;   /* 1er puesto — alias semántico */
  --color-silver:        #9CA3AF;   /* 2º puesto — gray-400 */
  --color-bronze:        #D97706;   /* 3er puesto — amber-600 */

  /* Podio metálico — gradientes del podio de "La Competición" */
  --color-medal-bronze-metal: #CD7F32;   /* Bronce metálico tradicional (gradient start) */
  --color-medal-bronze-dark:  #A0522D;   /* Sienna — bronce oscuro (gradient end, = --sabor-avellana) */
  --color-neutral-scrollbar:  #D1D5DB;   /* gray-300 — scrollbar thumbs, separadores neutros */

  /* Valoración por bolas GelatoMaps */
  --color-rating-1:      #F59E0B;   /* 1 bola — bueno */
  --color-rating-2:      #0D9488;   /* 2 bolas — muy bueno */
  --color-rating-3:      #7C3AED;   /* 3 bolas — excelente */

  /* Teal extendido — variantes para gradientes y microdetalles */
  --color-accent-bright: #14B8A6;   /* teal-400 — gradient start, panel-vitrina, profile-museum */
  --color-accent-faint:  #99F6E4;   /* teal-200 — borde sutil activo (map.css .pop-btn-msg) */
  --color-mint-pale:     #E6FFF9;   /* mint casi-blanco — gradient end en prem-highlight */
  --color-premium-surface: #FAFAFF; /* blanco-premium con toque morado — carta-sabor hover */

  /* Texto sobre fondos claros — extensión escala gris */
  --color-text-strong:   #374151;   /* gray-700 — UI labels de alta legibilidad (legend-panel, pwa-close) */
  --color-warm-beige:    #D4C9B8;   /* beige cálido — gradient end decorativo (helado visual) */

  /* Fondos de panel oscuro (hero sin foto, modales dark) */
  --color-panel-dark:    #1A1A2E;   /* indigo muy oscuro — panel hero fallback */
  --color-panel-dark2:   #16213E;   /* navy oscuro — panel hero gradient end */

  /* Slate UI — discovery panels, controles sobre fondos medios */
  --color-slate-dark:    #1E293B;   /* slate-800 — discovery panel bg */
  --color-slate-mid:     #334155;   /* slate-700 — discovery handle bg */
  --color-slate-light:   #475569;   /* slate-600 — discovery handle hover */

  /* Redes sociales — colores de marca (inmutables, no cambian con el tema) */
  --color-brand-instagram: #E1306C; /* Instagram pink-red oficial */
  --color-brand-ig-purple: #833AB4; /* Instagram gradient start — purple */
  --color-brand-ig-red:    #FD1D1D; /* Instagram gradient mid — red */
  --color-brand-ig-orange: #F77737; /* Instagram gradient end — orange */
  --color-brand-tiktok:    #010101; /* TikTok black oficial */
  --color-brand-tiktok-dark: #333333; /* TikTok — hover/borde oscuro */
  --color-brand-facebook:  #1877F2; /* Facebook blue oficial */
  --color-brand-youtube:   #FF0000; /* YouTube red oficial */


  /* ──────────────────────────────────────────────────────────────
     ALIASES DE COMPATIBILIDAD
     Traducen el naming corto del código legado a los tokens oficiales.
     Permiten que todo el código existente que usa var(--teal),
     var(--bg), var(--card), etc. funcione sin modificación.

     REGLA: Nuevo código siempre usa el nombre largo (--color-accent).
     El nombre corto existe solo por retrocompatibilidad.
     ────────────────────────────────────────────────────────────── */

  /* Colores principales */
  --navy:      var(--color-primary);
  --navy2:     var(--color-primary-mid);
  --teal:      var(--color-accent);
  --teal2:     var(--color-accent-darker);
  --teal-lt:   var(--color-accent-light);
  --gold:      var(--color-gold);

  /* Fondos dark mode */
  --bg:        var(--color-bg-deep);
  --bg2:       var(--color-bg-deep2);
  --card:      var(--color-bg-card);
  --card2:     var(--color-bg-card-hover);

  /* Fondos light mode */
  --cream:     var(--color-bg-cream);
  --smoke:     var(--color-bg-smoke);

  /* Texto dark mode */
  --white:     var(--color-white);
  --mid:       var(--color-text-on-dark-mid);
  --low:       var(--color-text-on-dark-low);

  /* Bordes */
  --border:    var(--color-border);
  --border-md: var(--color-border-md);

  /* Semánticos */
  --danger:    var(--color-error);
  --success:   var(--color-success);

  /* Fuentes */
  --font:      var(--font-body);
  --display:   var(--font-display);

  /* Orange */
  --orange:    var(--color-orange-soft);

}

/* ─────────────────────────────────────────────────────────────────────────────
   TOKENS DE SABOR — Identidad cromática de cada sabor de helado
   Usados en sabores.html (cards, barras, iconos). Fuente única de verdad.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --sabor-chocolate:      #5C3317;
  --sabor-pistacho:       #7AB648;
  --sabor-fresa:          #FC5A8D;
  --sabor-vainilla:       #F5E6C8;
  --sabor-stracciatella:  #2E2E2E;
  --sabor-tiramisu:       #8B6F47;
  --sabor-mango:          #FF8243;
  --sabor-limon:          #FFF44F;
  --sabor-dulce_leche:    #C68E4E;
  --sabor-frambuesa:      #E30B5C;
  --sabor-avellana:       #A0522D;
  --sabor-coco:           #D4C5A9;
  --sabor-cafe:           #3D1F00;
  --sabor-turron:         #D4A76A;
  --sabor-menta:          #6EDE8A;
  --sabor-cheesecake:     #FFE4B5;
  --sabor-cookies:        #D2B48C;
  --sabor-nutella:        #7B3F00;
  --sabor-yogur:          #FAFAD2;
  --sabor-melocoton:      #FFCBA4;
  --sabor-matcha:         #7B9A6D;
  --sabor-lotus:          #C47A3A;
  --sabor-brownie:        #4A2C2A;
  --sabor-mora:           #6B21A8;
  --sabor-platano:        #FFE135;
  --sabor-caramelo:       #D4881C;
  --sabor-crema_catalana: #F0C75E;
  --sabor-ron_pasas:      #8B4513;
  --sabor-nata:           #FFF8E7;
  --sabor-horchata:       #F5F0E1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOKENS DE CATEGORÍA BLOG — Gradientes por categoría editorial
   Usados en blog.html (cards de portada). Fuente única de verdad.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --cat-cover-ciudades:    linear-gradient(135deg, #1a1f36 0%, #0d9488 100%);
  --cat-cover-sabores:     linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
  --cat-cover-rankings:    linear-gradient(135deg, #d97706 0%, #dc2626 100%);
  --cat-cover-sector:      linear-gradient(135deg, #1e3a5f 0%, #0d9488 100%);
  --cat-cover-tendencias:  linear-gradient(135deg, #1e1b4b 0%, #4338ca 100%);
  --cat-cover-ingredientes:linear-gradient(135deg, #052e16 0%, #16a34a 100%);
  --cat-cover-guias:       linear-gradient(135deg, #1c1917 0%, #78350f 100%);
  --cat-cover-default:     linear-gradient(135deg, #1a1f36 0%, #1e3a5f 100%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOKENS SEMÁNTICOS DE UI — Alpha, highlights y colores funcionales frecuentes
   Usados en múltiples páginas para reducir hardcoded rgba() repetitivos.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Gold highlight — texto sobre fondos oscuros (votos, stats) */
  --color-gold-highlight: #FCD34D;   /* amber-300, WCAG AA sobre oscuro */

  /* Gold con alpha — fondos/bordes dorados translúcidos */
  --color-gold-a06:  rgba(217,119,6,.06);  /* fondo ultraligero gold */
  --color-gold-a08:  rgba(217,119,6,.08);  /* fondo muy sutil gold */
  --color-gold-a12:  rgba(217,119,6,.12);  /* fondo hover gold */
  --color-gold-a20:  rgba(217,119,6,.20);  /* fondo/borde gold suave */
  --color-gold-a30:  rgba(217,119,6,.30);  /* borde gold medio */
  --color-gold-a40:  rgba(217,119,6,.40);  /* borde gold visible */
  --color-gold-a50:  rgba(217,119,6,.50);  /* borde gold marcado */

  /* Gold-b con alpha — variante amber-500 (#F59E0B) translúcido */
  --color-gold-b08:  rgba(245,158,11,.08);
  --color-gold-b10:  rgba(245,158,11,.10);
  --color-gold-b12:  rgba(245,158,11,.12);
  --color-gold-b20:  rgba(245,158,11,.20);
  --color-gold-b25:  rgba(245,158,11,.25);
  --color-gold-b30:  rgba(245,158,11,.30);
  --color-gold-b85:  rgba(245,158,11,.85);

  /* Teal con alpha — para bordes/fondos teal translúcidos */
  --color-accent-a08: rgba(13,148,136,.08);  /* fondo hover link/icon teal */
  --color-accent-a10: rgba(13,148,136,.10);
  --color-accent-a15: rgba(13,148,136,.15);  /* sombra card/glow hover suave */
  --color-accent-a18: rgba(13,148,136,.18);
  --color-accent-a20: rgba(13,148,136,.20);
  --color-accent-a30: rgba(13,148,136,.30);
  --color-accent-a40: rgba(13,148,136,.40);
  --color-accent-a50: rgba(13,148,136,.50);
  --color-accent-a60: rgba(13,148,136,.60);  /* outline focus ring */
  --color-accent-a85: rgba(13,148,136,.85);

  /* Indigo/premium con alpha */
  --color-premium-a15: rgba(99,102,241,.15);
  --color-premium-a20: rgba(99,102,241,.20);
  --color-premium-a30: rgba(99,102,241,.30);
  --color-premium-text: #A5B4FC;  /* indigo-300 — texto premium sobre oscuro */

  /* Fuchsia/categoría con alpha */
  --color-fuchsia-a20: rgba(236,72,153,.20);

  /* Gradientes por tipo de heladería — ranking.html, mapa */
  --tipo-artesanal-gradient:   linear-gradient(135deg, #0D9488, #065F46);
  --tipo-heladeria-gradient:   linear-gradient(135deg, #3B82F6, #1D4ED8);
  --tipo-nevera-gradient:      linear-gradient(135deg, #64748B, #334155);
  --tipo-franquicia-gradient:  linear-gradient(135deg, #6366F1, #4338CA);
  --tipo-vitrina-gradient:     linear-gradient(135deg, #78716C, #44403C);

  /* Overlay oscuro estándar — serie completa */
  --color-overlay-xs:  rgba(0,0,0,.25);
  --color-overlay-sm:  rgba(0,0,0,.35);
  --color-overlay:     rgba(0,0,0,.40);
  --color-overlay-md:  rgba(0,0,0,.55);
  --color-overlay-lg:  rgba(0,0,0,.65);
  --color-overlay-xl:  rgba(0,0,0,.75);

  /* Teal-light — variante clara (#5EEAD4 = teal-300) */
  --color-accent-pale2: #5EEAD4;   /* teal-300, texto/iconos sobre oscuro */

  /* ──────────────────────────────────────────────────────────────
     HEADER — gradient start stop
     El header usa un gradiente sutil navy-teal. El stop inicial es
     ligeramente más teal que --color-primary (--navy).
     ────────────────────────────────────────────────────────────── */
  --color-bg-hdr-from: #0D1B2E;   /* header gradient from — subtle teal-navy */

  /* ──────────────────────────────────────────────────────────────
     UI ICONS — colores semánticos de iconos en dropdown de usuario
     ────────────────────────────────────────────────────────────── */
  --color-ico-heart: #E11D48;     /* heart / favoritos — rose-600 */
  --color-ico-claim: #6366F1;     /* reclamar perfil — indigo-500 */

  /* ──────────────────────────────────────────────────────────────
     PURPLE — variante intermedia (purple-600)
     Entre --color-premium (purple-700) y --color-premium-light (purple-500).
     Usada en hover gradient del demo banner y hdr-demo-btn.
     ────────────────────────────────────────────────────────────── */
  --color-premium-mid: #9333EA;   /* purple-600 — hover gradient stop */

  /* ──────────────────────────────────────────────────────────────
     ROLE BADGES — colores de badge de rol de usuario (user dropdown)
     Cada rol tiene bg + text. Usar siempre en par.
     ────────────────────────────────────────────────────────────── */
  --color-role-shop-bg:    #D1FAE5;  /* shop_owner bg  — emerald-100 */
  --color-role-shop-text:  #065F46;  /* shop_owner text — emerald-900 */
  --color-role-editor-bg:  #FEF3C7;  /* editor bg      — amber-100 */
  --color-role-admin-bg:   #FEE2E2;  /* admin bg       — red-100 (más saturado que --color-error-bg) */

  /* ──────────────────────────────────────────────────────────────
     TEAL BRIGHT — variante ligeramente más clara que el accent oficial.
     Usada en pages.css (.gl-cta-hdr:hover gradient start stop).
     ────────────────────────────────────────────────────────────── */
  --color-accent-bright:  #0F9E92;   /* teal hover gradient start — más vibrante que --color-accent */

  /* ──────────────────────────────────────────────────────────────
     DEEP NAVY END — color fin de gradiente en hero sections de páginas.
     Usado en pages.css (.gl-hero, .gl-hero--gold, .gl-hero--orange).
     Distinto de --color-primary-dark: es más cálido/teal (no puro navy).
     ────────────────────────────────────────────────────────────── */
  --color-bg-deep-end:    #0A1525;   /* hero section gradient end stop */

  /* ──────────────────────────────────────────────────────────────
     TEAL MUTED — variante oscura/cálida usada en votar.css (legado)
     rgb(15,123,108) ≈ #0F7B6C — distinto del teal oficial #0D9488.
     DEPRECADO: usar --color-accent-dark para nuevo código.
     ────────────────────────────────────────────────────────────── */
  --color-teal-muted:     #0F7B6C;
  --color-teal-muted-a05: rgba(15,123,108,.05);
  --color-teal-muted-a06: rgba(15,123,108,.06);
  --color-teal-muted-a08: rgba(15,123,108,.08);
  --color-teal-muted-a10: rgba(15,123,108,.10);
  --color-teal-muted-a12: rgba(15,123,108,.12);
  --color-teal-muted-a15: rgba(15,123,108,.15);
  --color-teal-muted-a18: rgba(15,123,108,.18);
  --color-teal-muted-a20: rgba(15,123,108,.20);
  --color-teal-muted-a25: rgba(15,123,108,.25);
  --color-teal-muted-a28: rgba(15,123,108,.28);
  --color-teal-muted-a30: rgba(15,123,108,.30);
  --color-teal-muted-a40: rgba(15,123,108,.40);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOKENS VOTAR.CSS — Colores específicos de la página de votación
   votar.html tiene paleta propia (cream light + dark mode independiente).
   Tokens que no encajan en el sistema global se aislan aquí.
   Ronda 14 · 5 Abr 2026 — migración 18 hardcoded colors de votar.css
   ───────────────────────────────────────────────────────────────────────────── */
:root {

  /* ── Texto/borde light mode — votación ── */
  --color-text-vote:      #1A1A2E;   /* texto principal votación — deep purple-navy */
  --color-border-vote:    #D1D5DB;   /* borde suave light mode — gray-300 */

  /* ── Navy panel gradient (vote-panel-navy) ── */
  --color-bg-vote-navy-from: #070E1B;  /* gradiente panel navy — inicio */
  --color-bg-vote-navy-mid:  #0C1A2E;  /* gradiente panel navy — medio */
  --color-bg-vote-navy-to:   #0F2035;  /* gradiente panel navy — fin */

  /* ── Dark mode votación (prefers-color-scheme: dark) ── */
  --color-bg-vote-dm:          #0F0F1E;           /* fondo dark mode votación */
  --color-bg-vote-card-dm:     #1A1A2E;           /* cards dark mode votación */
  --color-bg-vote-input-dm:    #252F4B;           /* inputs dark mode votación */
  --color-border-vote-dm:      #3D4563;           /* bordes dark mode votación */
  --color-text-vote-mid-dm:    #B0B8C4;           /* texto secundario dark mode votación */
  --color-bg-vote-dm-a80:      rgba(26,26,46,.80); /* overlay DragCream btn dark 80% */
  --color-bg-vote-dm-a95:      rgba(26,26,46,.95); /* overlay DragCream score dark 95% */
  --color-vote-dm-choc-a10:    rgba(74,44,26,.10); /* chocolate translúcido dark mode */

  /* ── Teal-light alpha (votar — confirmación teal-300) ── */
  --color-accent-light-a08:    rgba(94,234,212,.08);  /* teal-300 ultra-sutil */
  --color-accent-mid-a20:      rgba(45,212,191,.20);  /* teal-400 glow 20% */
  --color-accent-mid-a40:      rgba(45,212,191,.40);  /* teal-400 glow 40% */

  /* ── Success mid — botón confirmar voto (gradiente) ── */
  --color-success-mid:         #12A049;           /* success gradiente mid stop */

  /* ── Caramel/dulce-leche alpha — tarjeta fidelidad ── */
  --color-caramel-a10:         rgba(197,139,77,.10);  /* caramel translúcido */
  --color-caramel-a20:         rgba(197,139,77,.20);  /* caramel translúcido medio */

  /* ── Chocolate alpha — sombra bola de helado ── */
  --color-chocolate-a25:       rgba(74,44,26,.25);   /* chocolate sombra media */

  /* ── Gold pure extra alpha ── */
  --color-gold-pure-a25:       rgba(255,215,0,.25);  /* oro puro sombra suave */
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOKENS VOTING PAGE — Colores específicos de votar.html (light/cream theme)
   votar.html es la única página con tema claro. Estos tokens capturan los
   valores únicos de ese contexto sin contaminar el dark theme global.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Fondos cálidos — voting page cream palette */
  --color-bg-warm:        #FFF8F0;   /* fondo principal votar — cream cálido */
  --color-bg-warm-hover:  #FFFAF5;   /* hover cálido (Ronda 9 retroapplied) */
  --color-cream-warm:     #FFF5E6;   /* cream más cálido — cards secundarias */
  /* Bottom sheet warm-whites (P5 — decisión definitiva: distintos de bg-warm) */
  --color-bg-sheet:       #FEFCF9;   /* vote-guide-sheet base — casi blanco cálido */
  --color-bg-sheet-mid:   #FBF8F4;   /* vote-guide-sheet grad mid — off-white cálido */

  /* Coral / fresa — CTA de heladería, estados emocionales */
  --color-coral:        #FF6B6B;   /* coral vivaz, distinto de --color-error */
  --color-coral-a10:    rgba(255,107,107,.10);
  --color-coral-a15:    rgba(255,107,107,.15);
  --color-coral-a20:    rgba(255,107,107,.20);
  --color-coral-a30:    rgba(255,107,107,.30);

  /* Gold puro — DragCream score badges (≠ amber #F59E0B) */
  --color-gold-pure:      #FFD700;   /* oro puro estándar */
  --color-gold-pure-mid:  #FFC700;   /* oro medio — paso 2 shimmer DragCream badge */
  --color-gold-pure-dark: #FFB700;   /* oro oscuro — paso 3 shimmer DragCream badge */
  --color-gold-pure-a30: rgba(255,215,0,.30);
  --color-gold-pure-a40: rgba(255,215,0,.40);
  --color-gold-pure-a50: rgba(255,215,0,.50);

  /* Sky blue — efecto hielo en votación */
  --color-sky:          rgb(100,200,255);
  --color-sky-a30:      rgba(100,200,255,.30);
  --color-sky-a50:      rgba(100,200,255,.50);
  --color-sky-a60:      rgba(100,200,255,.60);
  --color-sky-bg:       rgba(200,235,255,.95);   /* fondo carta hielo */
  --color-sky-border:   rgba(100,200,255,.50);   /* borde carta hielo */

  /* Chocolate oscuro para textos sabor */
  --color-chocolate:       #4A2C1A;   /* chocolate oscuro */
  --color-chocolate-text:  #6B3F00;   /* texto sobre badge gold */
  --color-chocolate-light: #8B5E34;   /* chocolate medio */

  /* Fondos suaves — landing screen */
  --color-bg-parchment:    #F0EBE3;   /* pergamino — avatar placeholder, fondos suaves votar */

  /* Textos específicos light mode — landing screen */
  --color-text-deep:       #0F172A;   /* slate-950 — heading principal en light mode (heladería name) */
  --color-text-muted-blue: #3D4A55;   /* step labels muted con tono azulado */

  /* Streak banner gradient — colores específicos del sistema de rachas */
  --color-streak-from:     #FF6B35;              /* naranja vivo — inicio gradiente racha */
  --color-streak-mid:      #FF8C42;              /* naranja medio — transición gradiente racha */
  --color-streak-to:       #FFB84D;              /* ámbar cálido — fin gradiente racha */
  --color-streak-from-a40: rgba(255,107,53,.40); /* sombra hover badge naranja */

  /* Error — variante media para gradiente urgente */
  --color-error-mid:  #EF4444;              /* red-400 — segundo color gradiente urgent badge */
  --color-error-a40:  rgba(220,38,38,.40);  /* sombra pulsante urgente (keyframe) */

  /* ──────────────────────────────────────────────────────────────
     COLORES — NAVY PANEL GRADIENT STOPS
     Identificados en Ronda 18 como pendientes para Abril.
     Usados en sidebar.css (bolas-hero), premium-feel.css (header panel).
     ────────────────────────────────────────────────────────────── */
  --color-primary-panel-2: #1A3A5C;   /* navy panel gradient 2nd stop — sidebar/premium-feel */

  /* ──────────────────────────────────────────────────────────────
     COLORES — MICRO HOVER/ACTIVE PANEL ITEMS
     Identificados en Ronda 18 como pendientes para Abril.
     Usados en premium-feel.css (.cp-item hover/active states).
     ────────────────────────────────────────────────────────────── */
  --color-panel-hover:  #F8FFFE;   /* fondo hover ítem de panel — teal wash ultra-sutil */
  --color-panel-active: #E6FAF8;   /* fondo active ítem de panel — teal wash suave */

  /* ──────────────────────────────────────────────────────────────
     COLORES — ERROR DARK
     Texto error sobre fondos claros con alto contraste (WCAG AA).
     Usado en base.css (.notify.err).
     ────────────────────────────────────────────────────────────── */
  --color-error-dark: #991B1B;   /* red-900 — texto error oscuro sobre fondo claro */
  /* ──────────────────────────────────────────────────────────────
     COLORES — TOKENS MODALS & PANELS (Ronda 22)
     Centralizan valores repetidos en modals.css y panels.css.
     ────────────────────────────────────────────────────────────── */

  /* Teal ultra-light — highlight sections (fidelización, claim, sobre) */
  --color-teal-100: #CCFBF1;   /* teal-100 — card bg gradient end en fid/claim */
  --color-teal-200: #99F6E4;   /* teal-200 — card/stamp borders en fid/claim */

  /* Navy gradient end — modal headers (modal-hdr, account-hdr, sobre-trophies) */
  --color-navy-gradient-end: #1A3350;   /* navy gradient end stop para modal headers */

  /* Indigo — perfil estado premium_activo */
  --color-indigo-pale: #E0E7FF;   /* indigo-100 — ps-premium_activo badge bg */
  --color-indigo-text: #3730A3;   /* indigo-900 — ps-premium_activo badge text */

  /* Pink / Rose — perfil estado verificado_editorial */
  --color-pink-pale: #FCE7F3;   /* pink-100 — ps-verificado_editorial badge bg */
  --color-rose-text: #9D174D;   /* rose-900 — ps-verificado_editorial badge text */

  /* Amber dark — perfil estado artesanal_validado */
  --color-amber-900: #78350F;   /* amber-900 — ps-artesanal_validado badge text */

  /* Info blue — links, badge claim_pendiente */
  --color-info-blue: #1D4ED8;   /* blue-700 — info link text, claim_pendiente badge */

  /* Fuchsia — badge e indicador temporal (badge-tmp, tag-tmp) */
  --color-fuchsia: #EC4899;   /* fuchsia-500 — badge temporal, sabor tag temporal */

  /* Bola rating 2 — segunda bola azul */
  --color-bola-2: #60A5FA;   /* blue-400 — segunda bola rating visual */

  /* Emerald border light — geo CTA section, success borders claros */
  --color-emerald-border: #A7F3D0;   /* emerald-200 — geo-cta border, success sections */

  /* ──────────────────────────────────────────────────────────────
     COLORES — PWA INSTALL BANNER & SKELETON (Ronda 23 · 5 Abr 2026)
     ────────────────────────────────────────────────────────────── */

  /* Navy-dark surface — fondo interior del banner de instalación PWA.
     Distinto de --color-primary-dark (#071422): este es más cálido/azulado.
     Distinto de proveedor-panel --bg (#080E1C): ese es casi negro.
     Usar solo en .gm-install-inner (pages-app.css). */
  --color-bg-navy-surface: #1A2235;

  /* Skeleton shimmer highlight — el destello más claro en la animación
     de carga (base.css). Companion de --color-bg-smoke (#F5F2ED).
     Ligeramente más oscuro/cálido que el fondo base del skeleton. */
  --color-bg-skeleton-light: #E8E3DC;

  /* ──────────────────────────────────────────────────────────────
     COLORES — HEADER & SIDEBAR GRADIENTS (premium-polish.css · Ronda 23)
     Gradientes de profundidad para el header del mapa y el bolas-hero.
     Son navy-dark distintos de --color-primary (más oscuros/más fríos).
     ────────────────────────────────────────────────────────────── */

  /* Header mapa (#hdr) gradient — de navy oscuro a navy más oscuro */
  --color-hdr-from: #0E1E33;   /* start stop — navy oscuro header */

  /* Bolas-hero sidebar gradient — 3 paradas (navbar lateral) */
  --color-bolas-hero-mid: #132B4A;   /* grad mid stop — entre primary y primary-mid */
  --color-bolas-hero-end: #15304F;   /* grad end stop — navy sidebar final */

}