/* ═══════════════════════════════════════════════════════════════════════
   Bimo Lite — Tokens de diseño (fuente: _Diseno/Bimo Lite v2)
   Única fuente de colores, radios, sombras y tipografía. El resto de hojas
   y los .razor.css usan solo estas variables: nunca colores sueltos.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Marca: verde (acción principal, éxito, capital) ─────────────── */
    --verde:             #3bab62;
    --verde-hover:       #33985a;
    --verde-texto:       #1f6e3d;   /* texto verde sobre fondos claros */
    --verde-enlace:      #2b8a4e;
    --verde-suave:       #e7f5ec;   /* pill "Al día", anillos */
    --verde-tenue:       #f0faf3;   /* tarjeta seleccionada */
    --verde-tenue-2:     #f6fbf8;   /* fila resaltada */
    --verde-borde:       #cfe9d8;   /* borde de WhatsApp */
    --verde-deshabilitado: #a9cdb6;
    --verde-claro:       #9ad8b0;

    /* ── Secundario: azul marino (menú, títulos, tarjeta resumen) ────── */
    --marino:            #14233f;
    --marino-2:          #22355a;   /* superficies y pistas sobre marino */
    --marino-3:          #2a3d63;   /* divisores sobre marino */
    --marino-texto:      #9fb0cc;   /* texto secundario sobre marino */
    --marino-texto-2:    #c4cfe2;
    --marino-texto-3:    #d5deec;
    --marino-titulo-grupo: #7d8daa;

    /* ── Texto y superficies ─────────────────────────────────────────── */
    --tinta:             #15201a;   /* texto base */
    --gris:              #5d6b63;   /* texto secundario */
    --gris-2:            #7b8a82;   /* metadatos */
    --gris-3:            #b9c8bf;   /* ilustraciones apagadas */
    --fondo:             #f4f7f5;   /* fondo de la app */
    --superficie:        #ffffff;
    --superficie-2:      #f6f9f7;   /* filas, cajas internas */
    --superficie-3:      #f1f5f2;   /* controles segmentados */
    --superficie-4:      #e8eeea;   /* pista de pestañas */
    --borde:             #e3e9e5;   /* tarjetas */
    --borde-campo:       #dfe6e1;   /* campos y botones secundarios */
    --borde-campo-2:     #d8e0db;
    --borde-punteado:    #cdd8d1;
    --divisor:           #eef2ef;
    --icono-fondo:       #eef3f0;

    /* ── Estados ─────────────────────────────────────────────────────── */
    --rojo:              #d9473a;   /* puntos y barras de mora */
    --rojo-texto:        #b42318;
    --rojo-oscuro:       #8f1d14;
    --rojo-suave:        #fdecec;
    --rojo-borde:        #f5d0cc;
    --ambar:             #f0a73a;   /* vence hoy, cargos */
    --ambar-suave:       #fff3dc;
    --ambar-texto:       #8a5300;
    --azul:              #7fb8ff;   /* interés en gráficos */
    --azul-suave:        #eaf3ff;
    --azul-texto:        #1d4f91;
    --morado-suave:      #efe9fb;
    --morado-texto:      #5b3fa0;
    --pagado-suave:      #e8edf6;   /* pill "Pagado" (texto marino) */
    --interruptor-off:   #cfd8d2;

    /* ── Tipografía ──────────────────────────────────────────────────── */
    --fuente:            'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fuente-mono:       ui-monospace, 'Cascadia Mono', Consolas, monospace;

    /* ── Radios ──────────────────────────────────────────────────────── */
    --radio-tarjeta:     22px;
    --radio-lista:       20px;
    --radio-kpi:         18px;
    --radio-opcion:      14px;
    --radio-campo:       12px;
    --radio-boton-sm:    10px;
    --radio-pill:        999px;

    /* ── Sombras ─────────────────────────────────────────────────────── */
    --sombra-boton:      0 6px 16px rgba(59, 171, 98, .25);
    --sombra-boton-lg:   0 8px 20px rgba(59, 171, 98, .3);
    --sombra-modal:      0 24px 60px rgba(13, 23, 41, .3);
    --sombra-toast:      0 12px 30px rgba(0, 0, 0, .25);
    --sombra-segmento:   0 1px 4px rgba(13, 23, 41, .12);
    --anillo-foco:       0 0 0 4px rgba(59, 171, 98, .12);
    --velo:              rgba(13, 23, 41, .5);
    --velo-recorrido:    rgba(13, 23, 41, .62);   /* recorrido guiado: fondo alrededor del foco */
    --halo-verde:        rgba(59, 171, 98, .28);
    --sombra-recorrido:  0 24px 60px rgba(0, 0, 0, .3);

    /* ── Espaciado y medidas ─────────────────────────────────────────── */
    --menu-ancho:        248px;
    --pad-tarjeta:       24px;
    --pad-contenido:     16px 36px 48px;
    --toque:             44px;      /* área táctil mínima */
    --barra-inferior-h:  0px;       /* alto de la barra inferior (solo celular) */
}

@media (max-width: 767.98px) {
    :root {
        --pad-tarjeta:      18px;
        --pad-contenido:    12px 16px 28px;
        --barra-inferior-h: calc(70px + env(safe-area-inset-bottom));
    }
}