/* ============================================================
   Clover 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 clover-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 Clover. 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;

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