/* ============================
   Tema COCOFA compartido (portada + visor)
   ============================ */
:root {
    /* Color primario (white-label). Se sobrescribe desde Configuración con estiloColorPrimario() */
    --pri: #006B3F;
    --pri-rgb: 0 107 63;
    --pri-2: #008048;
    --pri-osc: #004d2d;
    --pri-claro: #4ade80;
    --pri-claro-rgb: 74 222 128;
    --pri-fondo: #0b1a0f;
    --verde: #006B3F;
    --verde-2: #00a65a;
    --verde-claro: #4ade80;
    --verde-grad: linear-gradient(135deg, #006B3F, #008048);  /* texto blanco AA en todo el degradé */
    --verde-sutil: rgba(0,107,63,0.18);
    --verde-borde: rgba(0,107,63,0.35);

    --bg: #0b1a0f;
    --bg-2: #0d1f14;
    --bg-radial: radial-gradient(ellipse at 50% 45%, #12301d 0%, #0b1a0f 70%);
    --bg-barra: rgba(8,20,12,0.94);
    --bg-panel: rgba(8,20,12,0.97);
    --bg-flotante: rgba(10,26,16,0.94);

    --borde: rgba(255,255,255,0.08);
    --texto: #ffffff;
    --texto-2: rgba(255,255,255,0.78);  /* AA sobre --bg */
    --texto-3: rgba(255,255,255,0.62);  /* AA para texto chico sobre --bg */

    --foco: #4ade80;
    --radio: 12px;
}

/* Logo oscuro sobre fondo verde: pildora clara */
.logo-pill {
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border-radius: var(--radio); padding: 5px 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* Foco visible y consistente */
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }