/* --- Improved reportesFinancierosMensual.css --- */

/* --- FONT IMPORT --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* --- RESET BÁSICO Y FUENTE GLOBAL --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f9; /* Fondo gris muy claro */
    color: #343a40; /* Texto principal oscuro */
    line-height: 1.6;
    overflow-x: hidden;
    padding-top: 10px; /* Reduced padding */
    min-height: 100vh;
}

.container {
    width: 95%;
    max-width: 1600px; /* Increased max-width for wider screens */
    margin: 10px auto 30px auto; /* Reduced top margin */
    padding: 25px 30px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

/* --- ENCABEZADO (Título Principal) --- */
h1 { /* Main page title */
    font-size: 2.3em;
    color: #2c3e50; /* Azul oscuro para el título principal */
    font-weight: 600;
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #dee2e6;
    letter-spacing: 0.5px;
    animation: fadeInDown 0.7s ease-out;
}

/* --- FILTROS --- */
.filters {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: center; Remove to allow natural flow */
    align-items: flex-end; /* Align items to the bottom for button alignment */
    gap: 18px; /* Espacio entre filtros */
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    animation: fadeInUp 0.7s 0.2s ease-out backwards;
}

.filter-group {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow filter groups to take available space */
    min-width: 180px; /* Minimum width for filter groups */
}

.filter-group label {
    font-size: 0.85em; /* Slightly smaller label */
    color: #5a6a7b;
    margin-bottom: 5px;
    font-weight: 500;
}

.filter-group select {
    padding: 9px 12px; /* Adjusted padding */
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 0.9em; /* Adjusted font size */
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
    color: #343a40;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-group select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    outline: none;
}

#visualizarReporte { /* Specific ID for the button */
    padding: 9px 25px; /* Adjusted padding */
    font-size: 0.95em; /* Adjusted font size */
    font-weight: 500;
    color: #ffffff;
    background-color: #0d6efd; /* Azul primario */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0.2px;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 5px rgba(13, 110, 253, 0.3);
    min-width: auto; /* Remove min-width from original button css */
    flex-grow: 0; /* Prevent button from growing excessively */
    /* align-self: flex-end; Already handled by .filters align-items: flex-end */
}

#visualizarReporte:hover, #visualizarReporte:focus {
    background-color: #0b5ed7; /* Azul más oscuro */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.35);
    outline: none;
}
#visualizarReporte:active {
    transform: translateY(0px);
    box-shadow: 0 1px 3px rgba(13, 110, 253, 0.25);
}

/* --- CONTENEDOR DE REPORTE Y TÍTULO GENERAL DEL REPORTE --- */
.report-container { /* This is #reporteContainer in HTML */
    margin-top: 20px;
}

.report-main-title { /* This is #reporteTituloGeneral in HTML */
    text-align: center;
    font-size: 1.7em; /* Slightly smaller than main H1 */
    color: #0d6efd; /* Azul primario para el título del reporte específico */
    margin-bottom: 25px;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 2px solid #0d6efd; /* Accent border */
    animation: fadeIn 0.8s 0.4s ease-out backwards;
}

/* --- MENSAJES INFORMATIVOS, DE CARGA Y ERROR --- */
.mensaje-informativo, .mensaje-error {
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 6px;
    text-align: center;
    font-weight: 500;
}
.mensaje-informativo { /* Used for selection prompt and loading */
    background-color: #e6f7ff; /* Light blue */
    color: #096dd9; /* Darker blue text */
    border: 1px solid #91d5ff; /* Blue border */
}
#mensajeCarga { /* Specific styling for loading if needed, inherits .mensaje-informativo */
    /* You can add spinner styles here if you replace text with a spinner */
}
.mensaje-error {
    background-color: #fff1f0; /* Light red */
    color: #cf1322; /* Darker red text */
    border: 1px solid #ffa39e; /* Red border */
}


/* --- SECCIONES DE REPORTE --- */
.report-section {
    margin-bottom: 35px;
    padding: 25px;
    background-color: #fdfdfd; /* Slightly off-white */
    border: 1px solid #e0e5eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    animation: zoomIn 0.6s ease-out;
}

.report-section h3 { /* Sub-titles within report sections */
    margin-top: 0;
    margin-bottom: 20px;
    color: #495057; /* Gris oscuro para subtítulos */
    font-size: 1.3em;
    text-align: center;
    font-weight: 500;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 10px;
}

/* --- TARJETAS KPI (KEY PERFORMANCE INDICATORS) --- */
.kpi-grid {
    display: grid;
    gap: 20px;
    margin-bottom: 30px;
    animation: popUp 0.5s ease-out backwards; /* Add animation to grid */
}
/* Retain existing grid column structures */
.kpi-grid.kpi-5-cols { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.kpi-grid.kpi-3-cols { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* Slightly wider minmax */
.kpi-grid.single-kpi {
    grid-template-columns: minmax(280px, 450px); /* Adjusted width */
    justify-content: center;
}

.kpi-card {
    background-color: #ffffff;
    padding: 20px; /* Increased padding */
    border-radius: 8px;
    text-align: center;
    border: 1px solid #e0e5eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-left-width: 5px; /* Default border width */
    border-left-style: solid;
}

/* KPI Accent Colors - using a rotating pattern if not specified by type */
.kpi-card:nth-child(5n+1) { border-left-color: #0d6efd; animation-delay: 0.1s; } /* Blue */
.kpi-card:nth-child(5n+2) { border-left-color: #198754; animation-delay: 0.2s; } /* Green */
.kpi-card:nth-child(5n+3) { border-left-color: #ffc107; animation-delay: 0.3s; } /* Yellow */
.kpi-card:nth-child(5n+4) { border-left-color: #dc3545; animation-delay: 0.4s; } /* Red */
.kpi-card:nth-child(5n+5) { border-left-color: #6f42c1; animation-delay: 0.5s; } /* Purple */


.kpi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.08);
}

.kpi-card h4 {
    margin-top: 0;
    font-size: 0.9em; /* Slightly smaller */
    color: #6c757d;
    margin-bottom: 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.kpi-card p {
    font-size: 1.9em; /* Adjusted size */
    font-weight: 600;
    color: #343a40;
    margin-bottom: 0;
    line-height: 1.2;
}

/* --- CONTENEDORES DE GRÁFICOS Y TABLAS --- */
.chart-row { /* Existing class in HTML for side-by-side chart/table */
    display: flex;
    flex-wrap: wrap;
    gap: 25px; /* Increased gap */
    margin-bottom: 25px;
    align-items: flex-start; /* Align items to the top */
}

.chart-container, .chart-container-Doughnut {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
    border: 1px solid #e9ecef;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: slideUpFadeIn 0.6s ease-out backwards;
    display: flex; /* Enable flex for canvas stretching */
    flex-direction: column; /* Stack title and canvas */
    position: relative; /* For canvas sizing */
}

.chart-container {
    flex: 1 1 450px; /* Allow more space */
    min-width: 320px;
    height: 400px; /* Default height for bar/line charts */
}
.chart-container-Doughnut {
    flex: 1 1 300px;
    max-width: 420px; /* Max width for doughnut */
    min-width: 280px;
    height: 380px; /* Slightly less height for doughnut */
    margin: 0 auto 20px auto; /* Center if it's the only element in a row or section */
}
.chart-row > .chart-container,
.chart-row > .chart-container-Doughnut {
    animation-delay: 0.2s;
}


.chart-container:hover, .chart-container-Doughnut:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.09);
}

/* Ensure canvas stretches */
.chart-container canvas, .chart-container-Doughnut canvas {
    flex-grow: 1;
    min-height: 0; /* Important for flex-grow in a flex column */
    width: 100% !important; /* Override Chart.js inline styles if necessary */
    height: auto !important; /* Let container height dictate */
    max-width: 100%;
}

.table-container {
    flex: 1 1 450px; /* Match chart container growth */
    min-width: 320px;
    overflow-x: auto;
    background-color: #ffffff;
    padding: 15px; /* Padding around the table itself */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
    border: 1px solid #e9ecef;
    animation: slideUpFadeIn 0.6s 0.3s ease-out backwards;
}
.chart-row > .table-container {
    animation-delay: 0.3s;
}

.table-container table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0; /* Remove original margin-top if padding is on container */
}

.table-container th, .table-container td {
    padding: 10px 12px; /* Adjusted padding */
    text-align: left;
    border-bottom: 1px solid #f1f3f5; /* Lighter row border */
    color: #495057;
    font-size: 0.9em;
}
.table-container td:nth-child(n+2):not(:last-child), /* Target numeric columns */
.table-container th:nth-child(n+2):not(:last-child) {
    text-align: right; /* Align numbers to the right */
}


.table-container thead th {
    background-color: #f8f9fa;
    color: #343a40;
    font-weight: 600; /* Bolder header */
    text-transform: uppercase;
    font-size: 0.8em; /* Smaller header text */
    letter-spacing: 0.3px;
    position: sticky; /* Sticky header for scrolling tables */
    top: 0;
    z-index: 1;
    border-bottom-width: 2px;
    border-bottom-color: #dee2e6;
}

.table-container tbody tr:nth-child(even) {
    background-color: #fdfdfd; /* Very subtle even row color */
}
.table-container tbody tr:hover {
    background-color: #f1f3f5; /* Hover effect */
}

.table-container td ul { /* For detail lists in aging report table */
    margin: 0;
    padding-left: 15px;
    font-size: 0.95em; /* Slightly larger for readability in lists */
    list-style-type: disc; /* Standard bullets */
}
.table-container td ul li {
    margin-bottom: 4px;
    line-height: 1.4;
}


/* --- ANIMACIONES --- */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-15px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes popUp {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes slideUpFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}


/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 1200px) {
    .kpi-grid.kpi-5-cols { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

@media (max-width: 992px) {
    h1 { font-size: 2em; }
    .report-main-title { font-size: 1.5em; }
    .kpi-card p { font-size: 1.7em; }
    .chart-container { height: 380px; }
    .chart-container-Doughnut { height: 360px; max-width: 380px; }
    .filters { gap: 12px; }
    .filter-group select, #visualizarReporte { font-size: 0.85em; padding: 8px 10px; }
}

@media (max-width: 768px) {
    body { padding-top: 0; }
    .container { width: 100%; margin: 0; border-radius: 0; padding: 20px 15px; box-shadow: none; border: none;}
    h1 { font-size: 1.8em; margin-bottom: 20px; padding-bottom: 15px;}
    .report-main-title { font-size: 1.4em; margin-bottom: 20px; }

    .filters {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 15px;
    }
    .filter-group, #visualizarReporte {
        width: 100%;
    }
    .filter-group select { min-width: 0; } /* Override min-width for stacking */

    .kpi-grid.kpi-5-cols, .kpi-grid.kpi-3-cols {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Allow 2 kpis if space */
    }
    .kpi-grid.single-kpi { grid-template-columns: minmax(250px, 1fr); }


    .chart-row {
        flex-direction: column;
        gap: 20px;
    }
    .chart-container, .chart-container-Doughnut, .table-container {
        flex-basis: auto;
        width: 100%;
        height: 350px; /* Adjust height for mobile */
    }
    .chart-container-Doughnut { max-width: none; height: 330px; }
    .kpi-card p { font-size: 1.6em; }
    .table-container { overflow-x: auto; padding: 10px;}
    .table-container th, .table-container td { font-size: 0.85em; padding: 8px 10px;}
}

@media (max-width: 480px) {
    .container { padding: 15px 10px; }
    h1 { font-size: 1.6em; letter-spacing: 0.3px; }
    .report-main-title { font-size: 1.25em; }
    .filters { padding: 10px; }
    .filter-group label { font-size: 0.8em; }
    .filter-group select, #visualizarReporte { font-size: 0.8em; padding: 8px;}

    .kpi-grid.kpi-5-cols, .kpi-grid.kpi-3-cols {
        grid-template-columns: 1fr; /* Single column KPI */
    }
    .kpi-card { padding: 15px; border-left-width: 4px; }
    .kpi-card h4 { font-size: 0.8em; }
    .kpi-card p { font-size: 1.5em; }

    .report-section h3 { font-size: 1.15em; }
    .chart-container, .chart-container-Doughnut {
        padding: 10px;
        height: 320px;
    }
    .chart-container-Doughnut { height: 300px; }

    .table-container { padding: 8px; }
    .table-container th, .table-container td { font-size: 0.8em; padding: 7px 5px;}
    .table-container td ul { font-size: 0.9em; }
}