/* ═══════════════════════════════════════════════════════════════════
   paleta.css — Paleta de color unificada DNJ
   Fundación Apostólico Divino Niño Jesús
   ---------------------------------------------------------------
   Usada en AMBOS proyectos:
     • divino-nino/   → web pública de la institución
     • sistema_gestion/ → sistema interno de gestión escolar

   Para cambiar un color en toda la institución, editá SOLO este archivo.
   ═══════════════════════════════════════════════════════════════════ */

:root {

    /* ─── CELESTE INSTITUCIONAL ─────────────────────────────────── */
    --cel-osc:   #005080;   /* oscuro   — topbar, footer, encabezados fuertes */
    --cel:       #0077b6;   /* principal — botones, bordes, íconos activos     */
    --cel-cla:   #0096c7;   /* claro    — gradientes, hovers, sidebar base     */
    --cel-sua:   #e8f7fb;   /* suave    — fondos de sección, inputs focus bg  */
    --cel-pas:   #caf0f8;   /* pastel   — chips, badges de bajo contraste      */
    --cel-brd:   #d0e8f0;   /* borde    — bordes de cards, inputs, separadores */

    /* Alias largo (compatibilidad sistema_gestion) */
    --celeste-oscuro:  var(--cel-osc);
    --celeste:         var(--cel);
    --celeste-claro:   var(--cel-cla);
    --celeste-fondo:   var(--cel-sua);
    --celeste-pastel:  var(--cel-pas);

    /* ─── ORO INSTITUCIONAL ─────────────────────────────────────── */
    --oro:       #c9922a;   /* principal — acentos dorados, bordes logo        */
    --oro-cla:   #e8b84c;   /* claro    — textos sobre oscuro, hover topbar    */
    --oro-sua:   #fdf8f0;   /* suave    — fondos de alerta/info institucional  */

    /* ─── TEXTOS ────────────────────────────────────────────────── */
    --texto:     #1a2e3a;   /* texto principal                                 */
    --ts:        #4a6a7a;   /* texto suave / labels / subtítulos               */

    /* Alias largo (compatibilidad sistema_gestion) */
    --texto-suave:  var(--ts);
    --texto-sua:    var(--ts);

    /* ─── FONDO Y BORDES ────────────────────────────────────────── */
    --blanco:    #ffffff;
    --gris:      #f4f9fb;   /* fondo general de página                         */
    --borde:     var(--cel-brd);

    /* Alias largo (compatibilidad sistema_gestion) */
    --gris-fondo:   var(--gris);
    --gris-suave:   var(--gris);
    --bg:           var(--gris);

    /* ─── ESTADOS ───────────────────────────────────────────────── */
    --verde:     #059669;
    --verde-cla: #d1fae5;

    --rojo:      #dc2626;
    --rojo-cla:  #fee2e2;

    --amarillo:  #f59e0b;
    --amarillo-cla: #fef3c7;

    /* Alias largo (compatibilidad sistema_gestion) */
    --verde-claro:    var(--verde-cla);
    --rojo-claro:     var(--rojo-cla);
    --amarillo-claro: var(--amarillo-cla);

    /* ─── LAYOUT (sistema_gestion) ──────────────────────────────── */
    --sidebar-w: 260px;
}

/* ─── ALIAS ADICIONALES ─────────────────────────────────────────── */
/* --cel-med: azul medio, usado en módulos escuela/colegio como acento
   de sección. Valor históricamente #185FA5 — se mantiene como variable
   para futura unificación. */
:root {
    --cel-med: #185FA5;
}