/* ═══════════════════════════════════════════════════════════════
   Misael Kids — Variables CSS globales
   Paleta "Jardín mágico": vibrante, amigable, cálida
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Fredoka+One&display=swap');

:root {
  /* ── Colores principales ── */
  --turquesa:     #2DD4BF;
  --turquesa-d:   #0D9488;
  --turquesa-l:   #CCFBF1;
  --coral:        #FF6B6B;
  --coral-d:      #E85555;
  --coral-l:      #FFE4E4;
  --amarillo:     #FFD93D;
  --amarillo-d:   #F0C000;
  --amarillo-l:   #FFF8D6;
  --verde:        #6BCB77;
  --verde-d:      #4CAF59;
  --verde-l:      #DCFCE7;
  --violeta:      #A78BFA;
  --violeta-d:    #7C3AED;
  --violeta-l:    #EDE9FE;
  --naranja:      #FB923C;
  --naranja-l:    #FED7AA;

  /* ── Neutros ── */
  --blanco:       #FFFFFF;
  --gris-50:      #F8FAFC;
  --gris-100:     #F1F5F9;
  --gris-200:     #E2E8F0;
  --gris-300:     #CBD5E1;
  --gris-400:     #94A3B8;
  --gris-500:     #64748B;
  --gris-600:     #475569;
  --gris-700:     #334155;
  --gris-800:     #1E293B;
  --texto:        #1E293B;
  --texto-suave:  #64748B;

  /* ── Semánticos ── */
  --exito:        var(--verde);
  --exito-l:      var(--verde-l);
  --peligro:      var(--coral);
  --peligro-l:    var(--coral-l);
  --advertencia:  var(--amarillo);
  --advertencia-l:var(--amarillo-l);
  --info:         var(--turquesa);
  --info-l:       var(--turquesa-l);

  /* ── Tipografía ── */
  --font-display: 'Fredoka One', cursive;
  --font-body:    'Nunito', sans-serif;
  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-lg:      1.125rem;
  --text-xl:      1.25rem;
  --text-2xl:     1.5rem;
  --text-3xl:     1.875rem;
  --text-4xl:     2.25rem;

  /* ── Espaciado ── */
  --gap-xs:  0.25rem;
  --gap-sm:  0.5rem;
  --gap-md:  1rem;
  --gap-lg:  1.5rem;
  --gap-xl:  2rem;
  --gap-2xl: 3rem;

  /* ── Bordes y sombras ── */
  --radio-sm:  0.5rem;
  --radio-md:  0.75rem;
  --radio-lg:  1rem;
  --radio-xl:  1.5rem;
  --radio-full:9999px;

  --sombra-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --sombra-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --sombra-lg: 0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.05);
  --sombra-xl: 0 20px 25px rgba(0,0,0,.10), 0 10px 10px rgba(0,0,0,.04);
  --sombra-color: 0 8px 20px rgba(var(--primario-rgb),.25);

  /* ── Sidebar ── */
  --sidebar-w: 208px;
  --topbar-h:  52px;

  /* ── Transiciones ── */
  --trans-fast:   150ms ease;
  --trans-base:   250ms ease;
  --trans-slow:   400ms ease;

  /* ═══ Tokens de tema (los redefine css/themes.css) ═══════════════
     Con estos valores la app se ve exactamente como siempre
     ("Jardín mágico"). Un tema solo cambia lo que quiera variar. */
  --primario-rgb:   45, 212, 191;            /* = --turquesa, para sombras con alfa */
  --primario-2:     var(--verde);            /* 2.º color de los degradados del primario */
  --turquesa-xl:    #E0FDF4;                 /* tinte clarísimo del primario */
  --coral-xl:       #FFF8F8;                 /* tinte clarísimo de alerta */
  --amarillo-txt:   #92400E;                 /* texto sobre fondos amarillo-l */
  --texto-sobre-color: #FFFFFF;              /* texto sobre botones/relleno de color */
  --texto-sobre-amarillo: #1E293B;           /* texto sobre relleno amarillo (siempre oscuro) */
  --fondo-panel:    var(--gris-50);          /* fondo de páginas del panel */
  --fondo-grad:     linear-gradient(135deg, #E0FDF4 0%, #F0FFF4 40%, #FFF9DB 70%, #FFE4E4 100%);
  --grad-hero:      linear-gradient(135deg, var(--turquesa-d), var(--verde-d));
  --login-card-bg:  rgba(255,255,255,.92);
  --color-scheme:   light;

  /* Colores que antes estaban fijos en páginas (mismos valores): el tema oscuro los redefine */
  --txt-rojo:       #B91C1C;                 /* importes pendientes / devueltos */
  --txt-verde:      #15803D;                 /* importes cobrados */
  --txt-azul:       #1D4ED8;                 /* saldo a favor */
  --txt-naranja:    #7C2D12;                 /* texto sobre --naranja-l (rol cocina) */
  --fila-deuda-bg:  #FFF5F5;                 /* fila de tabla con deuda */
  --ok-bg-suave:    #F0FDF4;                 /* tarjeta "inscripción actual" */
  --amarillo-l2:    #FEF3C7;                 /* tinte amarillo medio */
  --amarillo-l3:    #FDE68A;                 /* tinte amarillo fuerte */
  --amarillo-xl:    #FFF3C4;                 /* fin de degradado amarillo */
  --violeta-xl:     #EDE9FE;                 /* fin de degradado violeta */
  --coral-xl2:      #FFE8E8;                 /* fin de degradado coral */
  --tinta:          #0F172A;                 /* trazo/relleno de máximo contraste */
  --tinta-inv:      #FFFFFF;                 /* texto sobre --tinta */
}