/* ============================================================
   Valpadia UI — el juego de tokens común a toda la suite
   ============================================================
   Fuente única de los colores, tipografías, radios y sombras que usan los
   seis módulos. Antes cada uno llevaba los suyos: subvenciones y redes ya
   coincidían (mismos nombres y mismos valores), leads usaba otros nombres y
   otro verde, y clientes iba en Arial con un primario casi negro.

   Este fichero NO impone componentes: solo define las variables. Cada módulo
   sigue teniendo sus propias clases, pero apuntando aquí. Es lo que permite
   cambiar el acento de la marca en un sitio y que cambie en los seis.

   Vive junto a valpadia-menu.js y se sirve desde app.<dominio>, para que sea
   literalmente el mismo fichero en todos y no seis copias que se separan.
   ============================================================ */

:root {
    /* ── Fondos ────────────────────────────────────────────── */
    --bg:             #f6f7f9;   /* fondo de página */
    --surface:        #ffffff;   /* tarjetas */
    --surface2:       #ffffff;
    --surface3:       #f1f3f5;   /* superficie ligeramente gris */

    /* ── Bordes ────────────────────────────────────────────── */
    --border:         #e3e6ea;
    --border-strong:  #d3d7dd;

    /* ── Barra superior ────────────────────────────────────── */
    --topbar:         #ffffff;
    --topbar-text:    #111114;
    --topbar-border:  #eeeeee;

    /* ── Marca ─────────────────────────────────────────────── */
    /* El verde de Valpadia. Es el único acento: si algún módulo necesita
       destacar algo más, usa --accent2 o --accent3, no un hex nuevo. */
    --accent:         #1f7a3f;
    --accent-hover:   #1b6b37;
    --accent-soft:    #e8f0ea;   /* fondo de badges y estados sobre el acento */
    --accent2:        #5f37c4;   /* morado */
    --accent3:        #1a73e8;   /* azul de enlace */

    /* ── Texto ─────────────────────────────────────────────── */
    --text:           #111114;
    --text-muted:     #475467;
    --muted:          #6b7280;

    /* ── Estados ───────────────────────────────────────────── */
    --danger:         #e02424;
    --danger-bg:      #fdecec;
    --warning:        #d97706;
    --warning-bg:     #fff8eb;
    --success:        #15803d;
    --success-bg:     #eaf7ee;
    --info:           #1a73e8;
    --info-bg:        #eaf1fd;

    /* ── Tipografía ────────────────────────────────────────── */
    --font:  'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono:  'SF Mono', Menlo, Monaco, Consolas, monospace;

    /* ── Superficies del rediseño (29/09/2026) ─────────────────
       El lenguaje visual de las maquetas de la portada: blanco, paneles
       gris muy claro y líneas de un píxel. Viven AQUÍ y no en la hoja de
       cada módulo para que el rediseño se pueda ir extendiendo sin
       copiar los mismos seis valores en seis sitios que luego se separan.
       El color de acento NO entra: ese lo pone cada agencia. */
    --panel:          #F5F5F7;
    --hairline:       #E3E3E8;
    --hairline-soft:  #EDEDF0;
    --ink:            #1D1D1F;
    --dim:            #86868B;
    --display:        'Sora', 'Poppins', -apple-system, sans-serif;
    --mono-ui:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ── Formas ────────────────────────────────────────────── */
    --radius-sm:      6px;
    --radius:         10px;
    --radius-lg:      14px;
    --shadow-sm:      0 1px 2px rgba(0, 0, 0, .04);
    --shadow:         0 2px 8px rgba(0, 0, 0, .06);
    --shadow-lg:      0 4px 16px rgba(0, 0, 0, .08);
}

/* ── Compatibilidad con los nombres que usaba Leads ─────────
   Leads llamaba a las cosas de otra manera y usaba un verde distinto
   (#3a7d44). En vez de tocar sus 5.800 líneas buscando cada var(), se
   redefinen aquí sus nombres apuntando a los comunes. Cuando su marcado
   se separe del estilo, este bloque se borra. */
:root {
    --green:        var(--accent);
    --green-mid:    var(--accent-hover);
    --green-light:  var(--accent-soft);
    --bg2:          var(--surface3);
    --sidebar-bg:   #111114;
    --radius:       10px;
}

/* ── Compatibilidad con los nombres que usaba Clientes ────── */
:root {
    --card:     var(--surface);
    --line:     var(--border);
    --primary:  var(--accent);
}