/* ==========================================================
   CONFIGURACIÓN DE PALETA DE COLORES
   ========================================================== */
:root {
    /* Fondos Principales */
    --color-fondo-app: #F2C577;
    --color-header: #B3A184;
    --color-footer: #818F9D;

    /* Bloques de Información (Fondos) */
    --bg-ingresos: rgba(238, 242, 255, 0.7); 
    --bg-gastos: rgba(255, 241, 242, 0.7);   
    --bg-asignaciones: rgba(236, 253, 245, 0.7); 

    /* Colores de Fuente */
    --color-texto-base: #1e293b;
    --color-texto-header: #ffffff;
    --color-texto-ingresos: #4f46e5;
    --color-texto-gastos: #e11d48;
    --color-texto-asignaciones: #2E3B48;

    /* Botón Principal */
    --btn-calcular: #4f46e5;
    --btn-calcular-hover: #4338ca;
}

/* --- APLICACIÓN DE COLORES --- */

body { color: var(--color-texto-base); }
.main-bg { background-color: var(--color-fondo-app); }
.header-bg { background-color: var(--color-header); }
.header-bg h1, .header-bg p { color: var(--color-texto-header) !important; }

/* CORRECCIÓN FINAL FOOTER */
.footer-bg { 
    background-color: var(--color-footer); 
    padding: 10px 15px 25px 15px; /* Altura controlada */
    z-index: 100;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-grid {
    display: grid !important;
    grid-template-cols: 1fr 2fr 1fr; /* 3 columnas en una fila: Boton - CALCULAR - Boton */
    gap: 15px;
    align-items: center;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
}

/* Bloque Ingresos */
.card-income { background-color: var(--bg-ingresos); border-color: #c7d2fe; }
.card-income h2, .card-income p, .card-income label, .card-income input { 
    color: var(--color-texto-ingresos) !important; 
}

/* Bloque Gastos */
.card-expense { background-color: var(--bg-gastos); border-color: #fecdd3; }
.card-expense h2, .card-expense p, .card-expense label, .card-expense input { 
    color: var(--color-texto-gastos) !important; 
}

/* Bloque Asignaciones */
.card-allocation { background-color: var(--bg-asignaciones); border-color: #a7f3d0; }
.card-allocation h2, 
.card-allocation p, 
.card-allocation label, 
.card-allocation input,
.card-allocation select {
    color: var(--color-texto-asignaciones) !important;
}

.btn-primary-action { background-color: var(--btn-calcular); }
.btn-primary-action:hover { background-color: var(--btn-calcular-hover); }

/* --- AJUSTES TÉCNICOS --- */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fade-in { animation: fadeIn 0.4s forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.currency-input-wrapper { position: relative; display: flex; align-items: center; }
.currency-symbol { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 0.875rem; font-weight: 700; color: #94a3b8; pointer-events: none; }
.currency-input-wrapper input { padding-left: 32px !important; }
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }