/* ============================================================
   theme.css — Tema sobrio + responsive móvil (2026-07)
   Se carga AL FINAL en todas las páginas (después de los <style>
   internos de cada página), por lo que sus reglas ganan la cascada
   a igualdad de especificidad. NO editar dashboard.css/finanzas.css
   para temas: los overrides de color/estilo viven aquí.
   ============================================================ */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter.woff2') format('woff2');
}

/* ==================== PALETA SOBRIA ====================
   Primario:  #1e40af (azul marino corporativo) / hover #1e3a8a
   Éxito:     #047857   Peligro: #b91c1c   Alerta: #b45309   Info: #0e7490
   Neutros:   fondo #f1f5f9, bordes #e2e8f0, texto #1f2937
   ======================================================== */

body { background: #f1f5f9; }

/* --- Sidebar: plano, sin gradiente ni acentos brillantes --- */
.sidebar { background: #0f172a; }
.sidebar-header i { color: #94a3b8; }
.sidebar-header:hover i { animation: none; }
.user-avatar i { color: #64748b; }
.nav-item.active {
    background: rgba(148,163,184,0.10);
    box-shadow: inset 3px 0 0 #94a3b8;
}
.nav-item.active::before { background: #94a3b8; }

/* --- Buscador del menú lateral (lo inyecta shared.js) --- */
.sidebar-search {
    position: relative;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-search i {
    position: absolute;
    left: 27px; top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 12px;
    pointer-events: none;
}
.sidebar-search input {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    padding: 7px 10px 7px 30px;
    outline: none;
}
.sidebar-search input::placeholder { color: #64748b; }
.sidebar-search input:focus { border-color: #64748b; }

/* --- Título de página: subrayado neutro, iconos unificados --- */
.page-title i { color: #475569 !important; }
.page-title::after {
    background: #475569;
    height: 2px;
    width: 36px;
}

/* --- Tarjetas: hover discreto (sin "flotar") --- */
.stats-card { border-color: #e2e8f0; }
.stats-card:hover {
    transform: none;
    box-shadow: 0 2px 10px rgba(15,23,42,0.07);
    border-color: #cbd5e1;
}
.stat-value.counting { animation: none; }

/* --- Colores semánticos más profundos (serios y legibles) --- */
.text-success { color: #059669; }
.text-danger  { color: #dc2626; }
.text-primary { color: #1d4ed8; }
.text-warning { color: #b45309; }
.text-info    { color: #0e7490; }

/* --- Botones: azul marino, hover por oscurecimiento --- */
.btn { border-radius: 6px; }
.btn:hover { opacity: 1; }
.btn-primary { background: #1e40af; color: #fff; }
.btn-primary:hover { background: #1e3a8a; }
.btn-success { background: #047857; color: #fff; }
.btn-success:hover { background: #065f46; }
.btn-danger { background: #b91c1c; color: #fff; }
.btn-danger:hover { background: #991b1b; }
.btn-warning { background: #b45309; color: #fff; }
.btn-warning:hover { background: #92400e; }
.btn-info { background: #0e7490; color: #fff; }
.btn-info:hover { background: #155e75; }
.btn-outline:hover { background: #f8fafc; }
.btn-refresh { background: #1e40af; }
.btn-refresh:hover { background: #1e3a8a; }

/* --- Toolbar de tablas: neutra (antes verde) --- */
.table-toolbar { background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.show-entries { background: #475569; border-color: #475569; }
.toolbar-text { color: #334155; }
.toolbar-text.gray { color: #6b7280; }
.toolbar-btn.green  { background: #15803d; }
.toolbar-btn.blue   { background: #1e40af; }
.toolbar-btn.red    { background: #b91c1c; }
.toolbar-btn.orange { background: #b45309; }
.toolbar-btn.purple { background: #5b21b6; }

.saldo-box { background: #f8fafc; border-color: #e2e8f0; }
.saldo-box .saldo-val { color: #15803d; }
.collapsible-header { color: #334155; }

.pagination button.active { background: #1e40af; border-color: #1e40af; }
.tab-btn.active { border-bottom-color: #1e40af; }

/* --- Focus sobrio y accesible --- */
input:focus, select:focus, textarea:focus {
    border-color: #1e40af;
    box-shadow: 0 0 0 3px rgba(30,64,175,0.10);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: #1e40af;
}
.btn:focus-visible, .nav-item:focus-visible, .topbar-btn:focus-visible {
    outline: 2px solid #1e40af;
    outline-offset: 2px;
}

/* ==================== USABILIDAD GLOBAL ==================== */

/* Contenedor de scroll horizontal para tablas (lo inyecta shared.js) */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Backdrop del sidebar en móvil (lo inyecta shared.js) */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.55);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
body.no-scroll { overflow: hidden; }

html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }
/* Selects con opciones largas: que no inflen su fila (min-width intrínseco) */
select { max-width: 100%; }

/* body es flex: sin esto, .main-content no puede encoger por debajo del
   ancho de sus tablas y toda la página scrollea horizontal en móvil */
.main-content { min-width: 0; }

/* Items de grid con gráficas: que puedan encoger (min-width:auto los infla) */
.chart-container, .fin-card { min-width: 0; }
canvas { max-width: 100%; }

/* ==================== RESPONSIVE ==================== */

/* Tablet: 2 columnas de tarjetas (dashboard.css las colapsaba a 1) */
@media (max-width: 1024px) {
    .stats-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .stats-row { grid-template-columns: 1fr; gap: 14px; }

    .dashboard-content { padding: 16px 12px; }

    /* Topbar compacta: botones solo-icono, usuario truncado */
    .topbar { padding: 0 12px 0 6px; }
    .topbar-right { gap: 8px; }
    .topbar-btn { font-size: 0; padding: 8px; }
    .topbar-btn i { font-size: 16px; }
    .topbar-user {
        max-width: 45vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
    }

    .page-title h1 { font-size: 19px; }
    .page-title i { font-size: 19px; }

    /* Sidebar como panel deslizante sobre backdrop */
    .sidebar {
        width: min(300px, 84vw);
        transform: translateX(-105%);
        box-shadow: 0 0 40px rgba(15,23,42,0.4);
    }
    .sidebar.show { transform: translateX(0); }

    /* Tablas: scroll horizontal en vez de columnas aplastadas */
    .data-table-wrapper, #tableContainer {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-scroll > table { min-width: 560px; }

    .table-footer {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    .pagination { flex-wrap: wrap; }
    .pagination button { padding: 8px 12px; }

    /* Filtros y toolbars apilables */
    .filter-bar input, .filter-bar select { flex: 1 1 130px; min-width: 0; }
    .action-bar select { min-width: 0; flex: 1 1 160px; }
    .toolbar-right { flex: 1 1 100%; }
    .toolbar-right input { flex: 1; width: auto; min-width: 0; }

    /* Targets táctiles cómodos */
    .btn { padding: 10px 14px; }
    .btn-sm { padding: 7px 10px; }
    .nav-item { padding: 13px 20px; }

    /* Modales a pantalla (casi) completa */
    .modal-overlay { padding: 10px; }
    .modal, .modal-content {
        width: 100% !important;
        max-width: none !important;
        border-radius: 10px;
        max-height: 92vh;
    }
    .form-row { grid-template-columns: 1fr; }

    /* Evitar el auto-zoom de iOS al enfocar campos */
    input:not([type=checkbox]):not([type=radio]), select, textarea {
        font-size: 16px !important;
    }

    /* Grids inline de 2+ columnas (form-rows, pares de gráficas: 42 páginas
       los usan con style="grid-template-columns:1fr 1fr") → 1 columna */
    [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

    /* Dashboard: gráfica más baja y pestañas de pendientes con scroll */
    .finance-section .chart-container { height: 240px; }
    #pendientesTabs { overflow-x: auto; }
    #pendientesTabs .pendiente-tab {
        flex: 1 0 auto !important;
        min-width: 140px;
        white-space: nowrap;
    }

    /* Barras de pestañas: scroll horizontal en una sola fila */
    .tab-bar, .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    .tab-bar .tab-btn, .tabs .tab-btn { white-space: nowrap; flex-shrink: 0; }

    .main-footer, .page-footer {
        flex-direction: column;
        gap: 2px;
        align-items: center;
        text-align: center;
    }
}