/* ══════════════════════════════════════════════════════════════════
   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-darker: #0B6158;   /* Hover de botones */
  --color-accent-light:  #5EEAD4;   /* Highlights sobre fondos oscuros */
  --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-pale:     #FFFBEB;   /* Wash dorado */

  /* 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) */


  /* ──────────────────────────────────────────────────────────────
     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-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-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 */


  /* ──────────────────────────────────────────────────────────────
     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);


  /* ──────────────────────────────────────────────────────────────
     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 */
  --color-bronze:        #D97706;   /* 3er puesto */

  /* 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 */


  /* ──────────────────────────────────────────────────────────────
     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-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-a18: rgba(15,123,108,.18);
  --color-teal-muted-a20: rgba(15,123,108,.20);
  --color-teal-muted-a28: rgba(15,123,108,.28);
  --color-teal-muted-a30: rgba(15,123,108,.30);
}

/* ─────────────────────────────────────────────────────────────────────────────
   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-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 */


}