/* assets/css/style.css */
/* Estilos para el plugin Análisis de Gastos GAC v1.3.1 (Fix Final de Impresión) */

:root {
    --gac-blue-night: #011276;
    --gac-blue-dynamic: #1d85e8;
    --gac-green-vital: #00e974;
    --gac-text: #000000;
    --gac-bg-soft: #F4F4F4;
    --gac-gray-border: #d1d5db;
    --gac-orange-warning: #f97316;
}

.gac-gastos-container { font-family: 'Poppins', sans-serif; color: var(--gac-text); }
.bg-gac-blue-night { background-color: var(--gac-blue-night); }
.text-gac-blue-night { color: var(--gac-blue-night); }
.text-gac-blue-dynamic { color: var(--gac-blue-dynamic); }
.bg-gray-soft { background-color: var(--gac-bg-soft); }

/* --- Barra de Progreso --- */
.progress-bar { transition: width 0.5s ease-in-out; background-color: var(--gac-green-vital); }
.step { transition: color 0.4s ease-in-out; color: #a9bce8; }
.step svg { transition: transform 0.3s ease; }
.step.step-active { color: white !important; font-weight: 600; }
.step.step-active svg { transform: scale(1.25); color: var(--gac-green-vital) !important; }
.step.step-completed { color: #87CEFA !important; }

/* --- Estilos de Formulario --- */
.form-title { font-size: 1.5rem; font-weight: 600; color: var(--gac-blue-night); margin-bottom: 2rem; border-bottom: 2px solid var(--gac-green-vital); padding-bottom: 0.75rem; }
.form-group { margin-bottom: 1.75rem; }
.form-label { display: block; font-size: 1rem; font-weight: 500; color: #374151; margin-bottom: 0.5rem; }
.input-field { width: 100%; padding-top: 0.75rem; padding-bottom: 0.75rem; border: none; transition: all 0.2s ease-in-out; font-size: 1rem; background: transparent; }
.input-field:focus { outline: none; box-shadow: none; }

/* --- INICIO: SOLUCIÓN FLEXBOX PARA INPUTS CON ICONO --- */
.input-with-icon { display: flex; align-items: center; border: 1px solid var(--gac-gray-border); border-radius: 0.5rem; transition: all 0.2s ease-in-out; }
.input-with-icon:focus-within { border-color: var(--gac-blue-dynamic) !important; box-shadow: 0 0 0 3px rgba(29, 133, 232, 0.3) !important; }
.input-with-icon .input-icon { padding-left: 0.75rem; padding-right: 0.5rem; color: #6b7280; font-size: 1rem; }
.input-with-icon .input-field { border: none !important; padding-left: 0.25rem !important; padding-right: 1rem !important; }
/* --- FIN: SOLUCIÓN FLEXBOX --- */

/* --- Botones --- */
.btn-primary, .btn-secondary, .btn-primary-lg { padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; transition: all 0.2s ease-in-out; display: inline-flex; align-items: center; justify-content: center; border: 2px solid transparent; }
.btn-primary-lg { padding: 0.8rem 2rem; font-size: 1rem; }
.btn-primary, .btn-primary-lg { background-color: var(--gac-green-vital) !important; color: var(--gac-blue-night) !important; border-color: transparent !important; }
.btn-primary:hover, .btn-primary-lg:hover { background-color: #00c764 !important; box-shadow: 0 4px 12px rgba(0, 233, 116, 0.2) !important; transform: translateY(-2px) !important; }
.btn-primary:disabled { background-color: #96ffce !important; color: #008a4b !important; cursor: not-allowed !important; box-shadow: none !important; transform: none !important; }
.btn-secondary { background-color: #fff !important; color: #555 !important; border-color: var(--gac-gray-border) !important; }
.btn-secondary:hover { background-color: var(--gac-bg-soft) !important; border-color: #9ca3af !important; }
.form-navigation { margin-top: 2rem; display: flex; justify-content: flex-end; }
.form-navigation button + button { margin-left: 1rem; }
#step-2 .form-navigation, #step-3 .form-navigation { justify-content: space-between; }
.btn-primary-lg svg { display: inline-block !important; width: 1.25rem !important; height: 1.25rem !important; margin-right: 0.5rem !important; vertical-align: text-bottom !important; }

/* --- Tabla de Gastos --- */
.gasto-row { border-bottom: 1px solid #e5e7eb; }
.gasto-row:last-child { border-bottom: none; }
.gasto-icon { flex-shrink: 0; height: 2.5rem; width: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 9999px; }
.gasto-icon svg { height: 1.25rem; width: 1.25rem; }

/* --- Tarjetas de Resultado --- */
.result-card { background-color: white; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border: 1px solid #e5e7eb; text-align: center; }
.result-label { color: #6b7280; font-size: 0.875rem; margin-bottom: 0.25rem; }
.result-value { font-size: 1.5rem; font-weight: 700; }
.balance-positive { color: var(--gac-green-vital); }
.balance-negative { color: var(--gac-orange-warning); }

/* --- Modal --- */
.gac-modal { position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.gac-modal.active { opacity: 1; pointer-events: auto; }
.gac-modal-content { background-color: #fff; margin: auto; padding: 2rem; border-radius: 0.75rem; width: 90%; max-width: 800px; max-height: 90vh; overflow-y: auto; transform: scale(0.95); transition: transform 0.3s ease; }
.gac-modal.active .gac-modal-content { transform: scale(1); }
.gac-close-modal-btn { background-color: transparent !important; border: none !important; color: #9ca3af !important; padding: 0.5rem; border-radius: 9999px; transition: all 0.2s ease; }
.gac-close-modal-btn:hover { background-color: var(--gac-bg-soft) !important; color: var(--gac-text) !important; transform: rotate(90deg); }

/* --- INICIO: SOLUCIÓN DE IMPRESIÓN --- */
@media print {
    /* 1. Ocultar todo lo que está en el body por defecto */
    body > * {
        display: none !important;
    }
    /* 2. Hacer visible solo el contenedor del modal si tiene la clase 'is-printing' */
    body > .is-printing {
        display: block !important;
    }
    /* 3. Estilos para que el modal ocupe toda la página al imprimir */
    .gac-modal {
        position: static !important;
        background-color: transparent !important;
        display: block !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .gac-modal-content {
        box-shadow: none !important;
        border: none !important;
        max-height: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }
    /* 4. Ocultar los botones dentro del modal */
    .print\:hidden {
        display: none !important;
    }
}
/* --- FIN: SOLUCIÓN DE IMPRESIÓN --- */