/* ╔══════════════════════════════════════════════════════════════╗
   ║          CONFIG.CSS — ALBA CHILDCARE                          ║
   ║          Paleta: Coral & Crema · Donde la infancia florece    ║
   ╚══════════════════════════════════════════════════════════════╝ */

:root {

  /* ── COLORES PRINCIPALES ──────────────────────────────────── */
  --color-fondo:              #FFF8F0;   /* Crema cálido         */
  --color-superficie:         #FFF1E0;   /* Crema más suave      */
  --color-superficie-2:       #FFE5CC;   /* Crema acento         */
  --color-borde:              #FFD9B8;   /* Coral muy claro      */
  --color-borde-fuerte:       #FFAA88;   /* Coral medio          */

  /* ── TEXTO ────────────────────────────────────────────────── */
  --color-texto-primario:     #2C3E50;   /* Azul-gris profundo   */
  --color-texto-secundario:   #5D6D7E;   /* Gris neutro          */
  --color-texto-sutil:        #95A5A6;   /* Gris claro           */
  --color-texto-invertido:    #FFFFFF;

  /* ── MARCA / ACENTOS ──────────────────────────────────────── */
  --coral:                    #FF6B6B;   /* Coral principal      */
  --coral-hover:              #FF5252;
  --coral-activo:             #E04444;
  --coral-suave:              #FFE4E1;

  --mostaza:                  #FFD93D;   /* Amarillo CTA         */
  --mostaza-hover:            #FFC107;
  --mostaza-oscuro:           #F5B800;

  /* Aliases compatibles con archivos existentes */
  --acento:                   var(--coral);
  --acento-hover:             var(--coral-hover);
  --acento-activo:            var(--coral-activo);
  --acento-suave:             var(--coral-suave);
  --acento-texto:             #FFFFFF;

  /* ── ESTADOS ──────────────────────────────────────────────── */
  --color-exito:              #56C596;
  --color-exito-fondo:        #D9F5E6;
  --color-exito-texto:        #1F6B4D;

  --color-aviso:              #F9B233;
  --color-aviso-fondo:        #FFF3D6;
  --color-aviso-texto:        #8B5A00;

  --color-error:              #E74C3C;
  --color-error-fondo:        #FBDCD9;
  --color-error-texto:        #9D2E22;

  --color-info:               #5BC0DE;
  --color-info-fondo:         #D6F0F7;
  --color-info-texto:         #1F6378;

  /* ── TIPOGRAFÍA ───────────────────────────────────────────── */
  /* Display: Fraunces (serif moderno con personalidad)         */
  /* Body:    Outfit (sans geométrico, cálido)                  */
  --fuente-principal:         'Outfit', system-ui, sans-serif;
  --fuente-titulo:            'Fraunces', Georgia, serif;
  --fuente-mono:              'JetBrains Mono', monospace;

  --texto-xs:     0.75rem;
  --texto-sm:     0.875rem;
  --texto-base:   1rem;
  --texto-lg:     1.125rem;
  --texto-xl:     1.25rem;
  --texto-2xl:    1.5rem;
  --texto-3xl:    1.875rem;
  --texto-4xl:    2.5rem;
  --texto-5xl:    3.5rem;
  --texto-6xl:    4.5rem;

  --peso-normal:    400;
  --peso-medio:     500;
  --peso-semi:      600;
  --peso-bold:      700;
  --peso-negro:     900;

  --linea-apretada: 1.1;
  --linea-normal:   1.55;
  --linea-holgada:  1.75;

  /* ── ESPACIADO ────────────────────────────────────────────── */
  --s1: 0.25rem;  --s2: 0.5rem;  --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.25rem;  --s6: 1.5rem;  --s8: 2rem;     --s10: 2.5rem;
  --s12: 3rem;    --s16: 4rem;   --s20: 5rem;    --s24: 6rem;

  /* ── BORDES Y RADIOS ──────────────────────────────────────── */
  --radio-sm: 0.375rem;  --radio-md: 0.625rem;
  --radio-lg: 1rem;      --radio-xl: 1.25rem;
  --radio-2xl: 1.75rem;  --radio-pill: 9999px;

  --borde: 1px;  --borde-md: 2px;  --borde-lg: 3px;

  /* ── SOMBRAS ──────────────────────────────────────────────── */
  --sombra-xs:       0 1px 2px   rgba(44, 62, 80, .06);
  --sombra-sm:       0 2px 6px   rgba(44, 62, 80, .08);
  --sombra-md:       0 6px 16px  rgba(44, 62, 80, .10);
  --sombra-lg:       0 12px 32px rgba(44, 62, 80, .12);
  --sombra-xl:       0 24px 60px rgba(44, 62, 80, .16);
  --sombra-coral:    0 8px 24px  rgba(255, 107, 107, .25);
  --sombra-mostaza:  0 8px 24px  rgba(255, 217, 61, .35);

  /* ── TRANSICIONES ─────────────────────────────────────────── */
  --t-rapida:  120ms cubic-bezier(.4, 0, .2, 1);
  --t-normal:  280ms cubic-bezier(.4, 0, .2, 1);
  --t-lenta:   500ms cubic-bezier(.4, 0, .2, 1);
  --t-resorte: 380ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── LAYOUT ───────────────────────────────────────────────── */
  --ancho-max:        1240px;
  --ancho-contenido:   720px;
  --ancho-angosto:     560px;
  --padding-pagina:    var(--s6);

  /* ── NAVBAR ───────────────────────────────────────────────── */
  --navbar-alto:        76px;
  --navbar-fondo:       transparent;
  --navbar-borde:       transparent;
  --navbar-texto:       var(--color-texto-primario);
  --navbar-logo-color:  var(--color-texto-primario);
  --navbar-logo-tamaño: var(--texto-2xl);

  /* ── BOTONES ──────────────────────────────────────────────── */
  --btn-radio:        var(--radio-pill);
  --btn-padding-v:    var(--s3);
  --btn-padding-h:    var(--s6);
  --btn-peso:         var(--peso-semi);
  --btn-tamaño:       var(--texto-sm);

  /* ── TARJETAS ─────────────────────────────────────────────── */
  --tarjeta-fondo:        #FFFFFF;
  --tarjeta-borde:        var(--color-borde);
  --tarjeta-radio:        var(--radio-2xl);
  --tarjeta-sombra:       var(--sombra-sm);
  --tarjeta-sombra-hover: var(--sombra-lg);
  --tarjeta-padding:      var(--s6);

  /* ── INPUTS ───────────────────────────────────────────────── */
  --input-fondo:          #FFFFFF;
  --input-borde:          var(--color-borde);
  --input-borde-focus:    var(--coral);
  --input-radio:          var(--radio-lg);
  --input-padding:        var(--s3) var(--s4);
  --input-tamaño:         var(--texto-sm);

  /* ── HERO ─────────────────────────────────────────────────── */
  --hero-padding:           var(--s24);
  --hero-titulo-tamaño:     var(--texto-6xl);
  --hero-desc-tamaño:       var(--texto-lg);
  --hero-alinear:           left;

  /* ── FOOTER ───────────────────────────────────────────────── */
  --footer-fondo:         var(--color-texto-primario);
  --footer-borde:         transparent;
  --footer-texto:         #B4C0CC;
  --footer-padding:       var(--s16);
}

/* ═══════════════════════════════════════════════════════
   BOTON DE IDIOMA (rotativo: ES -> EN -> PT -> HT)
═══════════════════════════════════════════════════════ */
.lang-cycle-btn {
  border: 1px solid var(--color-borde);
  background: white;
  color: var(--color-texto-primario);
  border-radius: var(--radio-pill);
  padding: 6px 14px;
  font-family: inherit;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  cursor: pointer;
  transition: all var(--t-rapida);
  line-height: 1;
  white-space: nowrap;
}
.lang-cycle-btn:hover {
  border-color: var(--coral);
  color: var(--coral);
  background: var(--coral-suave);
}
/* Variante dentro del drawer (menu 3 rayas de admin/dashboard) */
.drawer-lang {
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--color-borde);
}
.drawer-lang .lang-cycle-btn {
  width: 100%;
  text-align: center;
}