/* wsdg/css/custom.css - VERSIÓN COMPACTA */

/* ==========================================================================
   AJUSTES DE DENSIDAD Y ESCALA (COMPACTACIÓN) 📉
   ========================================================================== */
html {
    /* Truco maestro: Al bajar esto del 100% (16px) a aprox 14px,
       todo el diseño de Tailwind (que usa 'rem') se compacta automáticamente. */
    font-size: 14px; 
}

body { 
    font-family: 'Inter', sans-serif; 
    background-color: #f1f5f9; 
    color: #334155;
    /* Forzar un poco más de nitidez en fuentes pequeñas */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Campos de Formulario más delgados y elegantes */
input, select, textarea {
    font-size: 0.9rem !important;      /* Letra interna un poco más chica */
    padding-top: 0.4rem !important;    /* Menos aire arriba */
    padding-bottom: 0.4rem !important; /* Menos aire abajo */
    transition: all 0.2s;
}

input:focus, select:focus { 
    transform: translateY(-1px); 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Botones con altura controlada */
button {
    font-size: 0.85rem !important;
}

/* Etiquetas de formulario más compactas */
label {
    font-size: 0.75rem !important; /* eq. text-xs */
    margin-bottom: 0.2rem !important;
    letter-spacing: 0.025em;
}

/* Tablas más densas */
td, th {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* ==========================================================================
   ESTILOS GENERALES
   ========================================================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.page { display: none; opacity: 0; transition: opacity 0.3s ease-in-out; }
.page.active { display: block; opacity: 1; }

.spinner { border: 2px solid rgba(255,255,255,0.3); border-left-color: #fff; border-radius: 50%; width: 16px; height: 16px; animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.animate-fadeIn { animation: fadeIn 0.3s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   ESTILOS DE IMPRESIÓN INTELIGENTE 🖨️
   ========================================================================== */
@media print {
    /* Restaurar tamaño real para papel (para que sea legible) */
    html { font-size: 12pt; } 
    
    #sidebar, #login-overlay, .no-print, button, #toast, form, 
    #page-configuracion, #page-usuarios, #page-servicios, 
    #page-programacion, #page-gestion, #page-respaldo, 
    .tab-btn, h1, #modal-gastos { 
        display: none !important; 
    }

    body, #main-content {
        background-color: white !important;
        color: black !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    #page-informes:not([style*="display: none"]) {
        display: block !important;
        position: absolute;
        top: 0; left: 0; width: 100%;
    }

    @page { size: landscape; margin: 0.5cm; }
    #voucher-template { display: none !important; }

    table { width: 100% !important; border-collapse: collapse !important; }
    th, td { border: 1px solid #ccc !important; padding: 4px !important; white-space: nowrap !important; }
    
    thead th {
        background-color: #1e293b !important;
        color: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    tfoot td {
        background-color: #f1f5f9 !important;
        font-weight: bold !important;
        -webkit-print-color-adjust: exact !important;
    }
    tr { page-break-inside: avoid; }
}