/*
Nombre: main.css
Versión: 6.9.0
Ubicación: App_Finanzas/assets/css/main.css
Fecha y Hora: 2025-09-08 12:10:00
Nota: Se realizan ajustes finos en la sección del gráfico. Se reduce el tamaño máximo del SVG a 180px para evitar que se corte y se añade un margen inferior al contenedor del gráfico para separarlo correctamente del botón inferior.
*/

/* ==========================================================================
   1. BASE: Variables
   ========================================================================== */
:root {
    /* Paleta Base (Colores Primitivos) */
    --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-200: #bfdbfe; --blue-300: #93c5fd; --blue-400: #60a5fa; --blue-500: #3b82f6; --blue-600: #2563eb; --blue-700: #1d4ed8; --blue-800: #1e40af; --blue-900: #1e3a8a;
    --stone-50: #fafaf9; --stone-100: #f5f5f4; --stone-200: #e7e5e4; --stone-300: #d6d3d1; --stone-400: #a8a29e; --stone-500: #78716c; --stone-600: #57534e; --stone-700: #44403c; --stone-800: #292524; --stone-900: #1c1917;
    --green-50: #f0fdf4; --green-500: #22c55e; --green-600: #16a34a;
    --red-50: #fef2f2; --red-500: #ef4444; --red-600: #dc2626;
    --amber-50: #fffbeb; --amber-400: #fbbf24;
    --pink-50: #fdf2f8; /* Rosado Pastel */
    --cyan-50: #ecfeff; /* Celeste Pastel */
    --purple-50: #f5f3ff; /* Morado Pastel */
    --white: #ffffff;
}

/* TEMA CLARO (Default) */
:root, [data-bs-theme="light"] {
    --app-bg-primary: var(--blue-50); 
    --app-bg-secondary: var(--white); 
    --app-text-primary: var(--stone-800); 
    --app-text-secondary: var(--stone-500); 
    --app-text-contrast: var(--white); 
    --app-border-primary: var(--stone-200); 
    --app-primary: var(--blue-600); 
    --app-success: var(--green-600); 
    --app-danger: var(--red-600); 
    --app-warning: var(--amber-400);
}
/* TEMA OSCURO */
[data-bs-theme="dark"] {
    --app-bg-primary: var(--stone-900); 
    --app-bg-secondary: var(--stone-800); 
    --app-text-primary: var(--stone-200); 
    --app-text-secondary: var(--stone-400); 
    --app-text-contrast: var(--white); 
    --app-border-primary: var(--stone-700); 
    --app-primary: var(--blue-500); 
    --app-success: var(--green-500); 
    --app-danger: var(--red-500);
}
/* Mapeo a Variables de Bootstrap */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
    --bs-body-bg: var(--app-bg-primary); 
    --bs-body-color: var(--app-text-primary); 
    --bs-secondary-bg: var(--app-bg-secondary); 
    --bs-tertiary-bg-rgb: 248, 249, 250;
    --bs-tertiary-bg: var(--app-bg-secondary);
    --bs-emphasis-color: var(--app-text-primary); 
    --bs-border-color: var(--app-border-primary); 
    --bs-primary: var(--app-primary); 
    --bs-success: var(--app-success); 
    --bs-danger: var(--app-danger); 
    --bs-warning: var(--app-warning); 
    --bs-link-color: var(--app-primary);
    --bs-body-color-rgb: 41, 37, 36;
    --bs-secondary-color: var(--app-text-secondary);
    --bs-card-bg: var(--app-bg-secondary);
    --bs-modal-bg: var(--app-bg-secondary);
}

[data-bs-theme="dark"] {
    --bs-tertiary-bg-rgb: 41, 37, 36;
    --bs-body-color-rgb: 231, 229, 228;
}


/* ==========================================================================
   2. BASE: Estilos Globales
   ========================================================================== */
body, html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    margin: 0;
    padding: 0;
    height: 100%;
    transition: background-color 0.3s, color 0.3s;
}

/* ==========================================================================
   3. LAYOUT: Estructura Principal
   ========================================================================== */
.app-container { display: flex; height: 100%; }
.main-content { flex-grow: 1; display: flex; flex-direction: column; height: 100vh; }
.main-header { display: flex; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--bs-border-color); background-color: var(--bs-card-bg); flex-shrink: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.main-header h1 { margin: 0; font-size: 1.5rem; }
.app-main { flex-grow: 1; overflow-y: auto; padding: 2rem; }
.visitor-view .app-sidebar { display: none; }

/* ==========================================================================
   4. LAYOUT: Barra Lateral (Sidebar)
   ========================================================================== */
.app-sidebar { width: 280px; background-color: var(--bs-card-bg); border-right: 1px solid var(--bs-border-color); display: flex; flex-direction: column; flex-shrink: 0; transition: transform 0.3s ease-in-out; box-shadow: 2px 0 5px rgba(0,0,0,0.05); }
.sidebar-title { margin: 0; text-align: center; color: var(--bs-primary); font-size: 1.5rem; }
.sidebar-heading { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--app-text-secondary); margin: 1.5rem 0 0.75rem 0; font-weight: 600; }
.budget-item, .nav-link { display: flex; align-items: center; padding: 0.75rem 1rem; border-radius: 6px; cursor: pointer; margin-bottom: 0.25rem; border: 1px solid transparent; text-decoration: none; color: var(--app-text-primary); transition: background-color 0.2s, color 0.2s; }
.nav-link.disabled { color: var(--app-text-secondary); cursor: not-allowed; opacity: 0.5; }
.nav-link i { margin-right: 0.75rem; font-size: 1.1rem; width: 20px; text-align: center; }
.budget-item:hover, .nav-link:not(.disabled):hover { background-color: var(--app-bg-primary); }
.budget-item.active, .nav-link.active { background-color: var(--app-primary); color: var(--app-text-contrast); }
.budget-item .fw-bold { font-size: 0.95rem; }
.budget-item small { font-size: 0.8rem; opacity: 0.8; }
.sidebar-footer { padding: 1.5rem; border-top: 1px solid var(--bs-border-color); margin-top: auto; }

/* ==========================================================================
   5. LAYOUT: Navegación Inferior (Móvil)
   ========================================================================== */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 60px; background-color: var(--bs-card-bg); border-top: 1px solid var(--bs-border-color); display: none; align-items: stretch; z-index: 1020; }
.bottom-nav-item, .bottom-nav-link { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--app-text-secondary); font-size: 0.7rem; background: none; border: none; }
.bottom-nav-item i, .bottom-nav-link i { font-size: 1.25rem; margin-bottom: 2px; }
.bottom-nav-item.active, .bottom-nav-link.active { color: var(--app-primary); }
.bottom-nav-fab { background-color: var(--app-primary); color: var(--app-text-contrast); border-radius: 50%; width: 50px; height: 50px; position: absolute; top: -25px; left: 50%; transform: translateX(-50%); border: 3px solid var(--bs-body-bg); display: flex; align-items: center; justify-content: center; }
.bottom-nav-fab i { font-size: 1.5rem; margin: 0; }
.bottom-nav-fab.disabled { background-color: var(--app-text-secondary); }


/* ==========================================================================
   6. COMPONENTS: Botones
   ========================================================================== */
/* Los estilos de botones ahora son controlados por las variables de Bootstrap */

/* ==========================================================================
   7. COMPONENTS: Tarjetas (Cards)
   ========================================================================== */
.user-list { display: flex; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; background-color: var(--app-primary); color: var(--app-text-contrast); display: flex; align-items: center; justify-content: center; font-weight: bold; margin-left: -8px; border: 2px solid var(--bs-card-bg); font-size: 0.9rem; }
.transaction-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
.transaction-column h5 { margin-bottom: 1rem; font-size: 1.1rem; }
.transaction-card { background-color: var(--bs-card-bg); border: 1px solid var(--bs-border-color); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.transaction-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; }
.transaction-card-header .description { font-weight: 600; }
.transaction-card-header .badge { font-size: 0.7rem; }
.transaction-card-body { font-size: 0.85rem; color: var(--app-text-secondary); }
.transaction-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
.transaction-card-footer .amount { font-weight: bold; font-size: 1rem; }
.transaction-card-footer .amount.income { color: var(--app-success); }
.transaction-card-footer .amount.expense { color: var(--app-danger); }
.transaction-card-footer .actions .btn { font-size: 0.9rem; padding: 0.2rem 0.5rem; }
.report-card, .user-summary-card { background-color: var(--bs-card-bg); border: 1px solid var(--bs-border-color); border-radius: 8px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.report-card h3 { margin-top: 0; margin-bottom: 1.5rem; border-bottom: 1px solid var(--bs-border-color); padding-bottom: 1rem; font-size: 1.2rem; }
.charts-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2rem; }

.chart-section { margin-bottom: 2rem; }

.chart-container { 
    display: flex;
    flex-direction: column; /* Apilar siempre verticalmente */
    align-items: center; 
    justify-content: center; 
    gap: 1.5rem;
    margin-bottom: 1.5rem; /* Separación con el botón de abajo */
}

.chart-container svg {
    max-width: 180px; /* Reducido para evitar cortes */
    width: 100%;
    flex-shrink: 0;
}
.chart-legend { 
    font-size: 0.85rem; 
    display: block; /* Vuelve a ser un bloque simple */
    width: 100%;
    max-width: 450px; /* Ancho máximo para legibilidad */
}
.legend-item { 
    display: flex; 
    align-items: center; 
    margin-bottom: 0.5rem;
}
.legend-color { width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; flex-shrink: 0; }
.legend-item .legend-text { display: inline-block; word-break: break-word; }

/* FONDOS DE TARJETAS DE RESUMEN */
[data-bs-theme="light"] .card-summary-income .card { background-color: var(--green-50); }
[data-bs-theme="light"] .card-summary-expense-paid .card { background-color: var(--red-50); }
[data-bs-theme="light"] .card-summary-expense-pending .card { background-color: var(--amber-50); }
[data-bs-theme="light"] .card-summary-balance-now .card { background-color: var(--blue-50); }
[data-bs-theme="light"] .card-summary-balance-final .card { background-color: var(--stone-50); }
[data-bs-theme="dark"] .card-summary .card { background-color: var(--stone-700); }

/* FONDOS DE TARJETAS DE TRANSACCIONES */
[data-bs-theme="light"] .transaction-card-income { background-color: var(--green-50); }
[data-bs-theme="light"] .transaction-card-expense-paid { background-color: var(--red-50); }
[data-bs-theme="light"] .transaction-card-expense-pending { background-color: var(--amber-50); }
/* FONDOS PARA PÁGINA DE USUARIOS */
[data-bs-theme="light"] .user-summary-card { background-color: var(--purple-50); }
[data-bs-theme="light"] #userManagementCard { background-color: var(--cyan-50); }

[data-bs-theme="dark"] .transaction-card,
[data-bs-theme="dark"] .user-summary-card {
    background-color: var(--stone-800);
    border-color: var(--stone-700);
}


/* ==========================================================================
   8. COMPONENTS: Formularios
   ========================================================================== */
.division-details-container { margin-top: 1rem; padding: 1rem; background-color: var(--bs-body-bg); border-radius: 4px; }
.form-group-inline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.form-group-inline label { margin-bottom: 0; flex-basis: 50%; }
.form-group-inline input { max-width: 120px; }
.division-remainder { margin-top: 1rem; font-weight: bold; font-size: 0.9rem; }
.division-remainder.error { color: var(--app-danger); }
.division-remainder.success { color: var(--app-success); }

/* ==========================================================================
   9. COMPONENTS: Tablas
   ========================================================================== */
.table-container { overflow-x: auto; }
.activity-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.activity-table th, .activity-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--bs-border-color); }
.activity-table th { background-color: var(--bs-tertiary-bg); font-weight: 600; cursor: pointer; user-select: none; }
.activity-table th:hover { background-color: var(--app-bg-primary); }
.activity-table tbody tr:hover { background-color: var(--bs-tertiary-bg); }

/* ==========================================================================
   10. COMPONENTS: Modales
   ========================================================================== */
.modal-content { 
    border-radius: 12px; 
    border: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.modal-header {
    border-bottom: 1px solid var(--app-border-primary);
}
[data-bs-theme="light"] .modal-header {
    background-color: rgba(0,0,0,0.03);
}
[data-bs-theme="light"] .modal-income .modal-content {
    background-color: var(--cyan-50);
}
[data-bs-theme="light"] .modal-expense .modal-content {
    background-color: var(--pink-50);
}


/* ==========================================================================
   11. LAYOUT: Responsivo
   ========================================================================== */
/* Tablets y Menores (< 992px) */
@media (max-width: 991.98px) {
    .main-content { padding-bottom: 60px; /* Espacio para la barra de navegación inferior */ }
    .bottom-nav { display: flex; }
}

/* Teléfonos y Tablets Pequeñas (< 768px) */
@media (max-width: 767.98px) {
    .app-main { padding: 1.5rem; }
    .main-header h1 { font-size: 1.25rem; }
    .charts-grid { grid-template-columns: 1fr; }
    .chart-container svg { max-width: 150px; }
}

/* Teléfonos (< 576px) */
@media (max-width: 575.98px) {
    .app-main { padding: 1rem; }
}

.transaction-meta { font-size: 0.6em; }

/* ==========================================================================
   12. PAGE: Gestión de Presupuestos (budgets.php)
   ========================================================================== */
.year-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

.year-selector h2 {
    margin: 0 1rem;
    min-width: 100px; /* Evita que el layout salte al cambiar de año */
    text-align: center;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.month-card {
    background-color: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 1rem;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s, border-color 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.month-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.month-card.current {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.3);
}

.month-header {
    font-weight: 600;
    color: var(--app-text-secondary);
    margin-bottom: 1rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.budget-display {
    background-color: var(--app-bg-primary);
    padding: 0.75rem;
    border-radius: 6px;
    margin-top: auto; /* Empuja al fondo */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.budget-name {
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.budget-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.budget-actions .btn {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
}

.create-budget-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    border: 2px dashed var(--app-border-primary);
    border-radius: 6px;
    color: var(--app-text-secondary);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    flex-grow: 1;
}

.create-budget-placeholder:hover {
    background-color: var(--app-bg-primary);
    border-color: var(--app-primary);
}

/* ==========================================================================
   13. PAGE: Gestión de Categorías (categories.php)
   ========================================================================== */
.collapse-toggle {
    padding: 0.2rem 0.5rem;
    line-height: 1;
    background: transparent;
    border: none;
    color: var(--app-text-secondary);
}

.collapse-toggle:hover {
    color: var(--app-text-primary);
}

.collapse-toggle .bi {
    transition: transform 0.2s ease-in-out;
    display: inline-block;
}

.collapse-toggle[aria-expanded="true"] .bi {
    transform: rotate(180deg);
}