@import url('https://fonts.googleapis.com/css2?family=Satoshi:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden; /* Bloquear scroll global - solo scroll en contenedores específicos */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #f5f5f5;
    font-family: 'Satoshi', sans-serif;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Reset global para el layout optimizado */
* {
    box-sizing: border-box;
}

.layout-container-static *,
.optimized-layout-container * {
    box-sizing: border-box;
}

/* Contenedor principal */
.main-container {
    display: flex;
    width: 100vw;
    min-height: 100vh;
    background: #f7f7f7;
    position: relative;
}

/* Área de contenido */
.content-area {
    flex: 1;
    min-width: 0;
    padding: 2rem;
    width: calc(100% - 280px);
    min-height: 100vh;
    overflow-x: auto;
    overflow-y: auto;
    background: #f7f7f7;
    box-sizing: border-box;
    transition: margin-left 0.2s;
    margin-left: 280px;
    /* Solución responsiva: usar flexbox para distribución inteligente del espacio */
    display: flex;
    flex-direction: column;
    top:0;
}

.content-area-without-sidebar {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw;
    box-sizing: border-box;
}

/* Sidebar de filtros */
.filters-sidebar {
    width: 280px;
    min-width: 220px;
    max-width: 320px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #1a237e;
    color: white;
    padding: 2rem 1rem;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 2px 0 5px rgba(0,0,0,0.08);
}

.filter-group {
    margin-bottom: 1.5rem;
}

.scaled-75 {
    zoom: 0.75;
}

.filter-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #fff;
}

.filter-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* Estilos para los dropdowns dentro del sidebar */
.filters-sidebar .Select-control {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.filters-sidebar .Select-value-label {
    color: white !important;
}

.filters-sidebar .Select-menu-outer {
    background-color: #1a237e !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.filters-sidebar .Select-option {
    background-color: transparent !important;
    color: white !important;
}

.filters-sidebar .Select-option:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Títulos */
.main-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1a237e;
    margin-bottom: 1.5rem;
}

/* Cards */
.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    height: 100%;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a237e;
    margin-bottom: 1rem;
}

/* KPIs */
.kpi-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.kpi-metric {
    text-align: center;
    flex: 1;
}

.kpi-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a237e;
    margin: 0;
}

.kpi-label {
    font-size: 0.5rem;
    color: #666;
    margin: 0;
}

.kpi-divider {
    height: 1px;
    background-color: #eee;
    margin: 0.5rem 0;
}

/* Gráficos */
.graph-card-trendline {
    min-height: 400px;
}

.graph-card-timeline {
    min-height: 200px;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.chart-dropdown {
    width: 200px;
}

/* Chat */
.chat-card {
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0;
}

.chat-message {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 8px;
    background-color: #f8f9fa;
}

.chat-message-user {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 8px;
    background-color: #e3f2fd;
    margin-left: 2rem;
}

.chat-message-support {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 8px;
    background-color: #e8eaf6;
    margin-right: 2rem;
}

.chat-message-system {
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background-color: #f5f5f5;
    text-align: center;
    font-size: 0.875rem;
    color: #666;
}

.chat-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.chat-message-user {
    font-weight: 600;
    color: #1a237e;
}

.chat-message-date {
    font-size: 0.75rem;
    color: #666;
}

.chat-message-text {
    margin: 0;
    color: #333;
}

/* Tabla */
.table-card {
    overflow-x: auto;
}

.table {
    width: 100%;
    margin-bottom: 0;
}

.table th {
    font-weight: 600;
    color: #1a237e;
    border-top: none;
}

.table td {
    vertical-align: middle;
}

/* Botones */
.btn-primary {
    background-color: #1a237e;
    border-color: #1a237e;
}

.btn-primary:hover {
    background-color: #151b60;
    border-color: #151b60;
}

/* Responsive */
@media (max-width: 768px) {
    .content-area {
        padding: 0rem;
    }
    
    .content-area.with-filters-sidebar {
        margin-left: 0;
    }
    
    .filters-sidebar {
        transform: translateX(-100%);
        z-index: 1000;
    }
    
    .filters-sidebar.show {
        transform: translateX(0);
    }
    
    .main-title {
        font-size: 1.5rem;
    }
    
    .kpi-number {
        font-size: 1.25rem;
    }
    
    .chart-dropdown {
        width: 150px;
    }
}

/* Contenedor principal */
.main-container {
    display: flex;
    min-height: 100vh;
    background: #f7f7f7;
    position: relative;
}

.layout-container {
    display: grid;
    flex-direction: row;
    position: fixed;
    width: 100%;
    height: 100%;
}

.content-area, #main-content {
    flex: 1;
    margin-left: 120px;
    box-sizing: border-box;
    min-width: 0;
}

/* Sidebar */
.sidebar-container {
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    height: 100vh;
    position: relative;
    z-index: 2;
    background: #002b5b;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Logo Naowee */
.naowee-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    width: 100%;
}

.naowee-logo-icon {
    width: 120px;
    height: auto;
    max-width: 100%;
}

/* Navigation Container */
.nav-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Navigation Items */
.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-item-active {
    background: #002b5b;
    color: white;
}

.nav-item-inactive {
    background: transparent;
    color: #B0B7C3;
}

.nav-item-inactive:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Navigation Icons */
.nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: filter 0.3s ease;
}

/* Colores personalizados para los SVG */
:root {
    --icon-active-color: #ffffff;    /* Blanco para estado activo */
    --icon-inactive-color: #B0B7C3;  /* Gris claro para estado inactivo en fondo oscuro */
    --icon-hover-color: #D1D5DB;     /* Gris más claro para hover en fondo oscuro */
    --icon-blue-active: #3B82F6;     /* Azul personalizado para activo */
}

/* Método 1: Usando filtros CSS (funciona con cualquier SVG) */
.nav-item-active .nav-icon {
    /* Blanco para estado activo */
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.nav-item-inactive .nav-icon {
    /* Gris claro para estado inactivo en fondo oscuro */
    filter: brightness(0) saturate(100%) invert(71%) sepia(4%) saturate(676%) hue-rotate(202deg) brightness(95%) contrast(89%);
}

.nav-item-inactive:hover .nav-icon {
    /* Gris más claro para hover en fondo oscuro */
    filter: brightness(0) saturate(100%) invert(85%) sepia(4%) saturate(676%) hue-rotate(202deg) brightness(95%) contrast(89%);
}

/* Método 2: Usando fill (requiere que los SVG tengan fill="currentColor") */

/* Control específico para elementos individuales del SVG de gráfica de pastel */
/* Estado inactivo - gris claro para todos los elementos en fondo oscuro */
.nav-item-inactive .pie-main {
    fill: #B0B7C3;
    stroke: #B0B7C3;
}

.nav-item-inactive .pie-slice {
    fill: #B0B7C3;
    stroke: #B0B7C3;
}

/* Estado activo - colores personalizados */
.nav-item-active .pie-main {
    fill: white;
    stroke: white;
}

.nav-item-active .pie-slice {
    fill: #F59E0B;
    stroke: #F59E0B;
}

/* Hover en estado inactivo */
.nav-item-inactive:hover .pie-main,
.nav-item-inactive:hover .pie-slice {
    fill: #D1D5DB;
    stroke: #D1D5DB;
}

/* Variaciones adicionales para la gráfica de pastel */
/* Opción: Torta azul con porción naranja */
.nav-item-active-pie-blue .pie-main {
    fill: #3B82F6;
    stroke: #3B82F6;
}

.nav-item-active-pie-blue .pie-slice {
    fill: #F59E0B;
    stroke: #F59E0B;
}

/* Opción: Torta blanca con porción azul */
.nav-item-active-pie-white-blue .pie-main {
    fill: white;
    stroke: white;
}

.nav-item-active-pie-white-blue .pie-slice {
    fill: #3B82F6;
    stroke: #3B82F6;
}

/* Opción: Torta gris con porción verde */
.nav-item-active-pie-gray-green .pie-main {
    fill: #9CA3AF;
    stroke: #9CA3AF;
}

.nav-item-active-pie-gray-green .pie-slice {
    fill: #10B981;
    stroke: #10B981;
}

/* Método 3: Clases específicas para diferentes colores */
.nav-item-active-blue .nav-icon {
    /* Azul #3B82F6 */
    filter: brightness(0) saturate(100%) invert(34%) sepia(80%) saturate(2556%) hue-rotate(217deg) brightness(97%) contrast(96%);
}

.nav-item-active-green .nav-icon {
    /* Verde #10B981 */
    filter: brightness(0) saturate(100%) invert(56%) sepia(88%) saturate(462%) hue-rotate(115deg) brightness(96%) contrast(91%);
}

.nav-item-active-purple .nav-icon {
    /* Púrpura #8B5CF6 */
    filter: brightness(0) saturate(100%) invert(48%) sepia(85%) saturate(2495%) hue-rotate(244deg) brightness(96%) contrast(96%);
}

.nav-item-active-orange .nav-icon {
    /* Naranja #F59E0B */
    filter: brightness(0) saturate(100%) invert(70%) sepia(98%) saturate(1227%) hue-rotate(2deg) brightness(96%) contrast(96%);
}

.nav-item-active-red .nav-icon {
    /* Rojo #EF4444 */
    filter: brightness(0) saturate(100%) invert(37%) sepia(93%) saturate(7471%) hue-rotate(356deg) brightness(91%) contrast(91%);
}

.nav-item-active-pink .nav-icon {
    /* Rosa #EC4899 */
    filter: brightness(0) saturate(100%) invert(44%) sepia(74%) saturate(4540%) hue-rotate(312deg) brightness(97%) contrast(90%);
}

/* Navigation Text */
.nav-text-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.2;
}

.nav-text-primary {
    font-size: 0.875rem;
    font-weight: 600;
    font-family: 'Satoshi', sans-serif;
}

.nav-text-secondary {
    font-size: 0.875rem;
    font-weight: 400;
    font-family: 'Satoshi', sans-serif;
}

.nav-text-single {
    font-size: 0.875rem;
    font-weight: 500;
    font-family: 'Satoshi', sans-serif;
}

/* Estado activo - texto blanco */
.nav-item-active .nav-text-primary,
.nav-item-active .nav-text-secondary,
.nav-item-active .nav-text-single {
    color: white;
}

/* Estado inactivo - texto gris claro para fondo oscuro */
.nav-item-inactive .nav-text-primary,
.nav-item-inactive .nav-text-secondary,
.nav-item-inactive .nav-text-single {
    color: #B0B7C3;
}

/* Área de contenido principal */
.content-area {
    flex: 1;
    padding: 0rem;
    overflow-x: auto;
}

.card, .kpi-card, .graph-card-trendline, .graph-card-bar, .table-card {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* KPI Card - Contenedor principal */
.kpi-card {
    height: 120px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-radius: 8px;
    padding: 0px;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #fff;
    box-sizing: border-box;
}

/* Cada métrica (izquierda y derecha) */
.kpi-metric {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}

/* Números grandes - responsivos al tamaño de la card */
.kpi-number {
    font-size: clamp(1.2rem, 2.1vw, 1.5rem);
    font-weight: 700;
    color: #1E293B;
    margin: 0;
    line-height: 1;
    font-family: 'Satoshi', sans-serif;
}

/* Números más pequeños para el KPI de canal */
#total-reabiertos {
    font-size: clamp(0.8rem, 1.5vw, 1.0rem);
    font-weight: 600;
}

/* Texto descriptivo - responsivo al tamaño de la card */
.kpi-label {
    font-size: clamp(0.6rem, 1.8vw, 0.9rem);
    font-weight: 500;
    color: #64748B;
    margin: 4px 0 0 0;
    font-family: 'Satoshi', sans-serif;
}

/* Línea divisoria naranja y negra - extendida */
.kpi-divider {
    width: 4px;
    height: 120px;
    background: linear-gradient(to bottom, #F97316 0%, #F97316 50%, #1F2937 50%, #1F2937 100%);
    border-radius: 2px;
    flex-shrink: 0;
    margin: 0 10px;
    align-self: stretch;
}

.graph-card-trendline{
    height: 320px;
    min-width: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.graph-card-bar {
    height: 320px;
    min-width: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.table-card {
    height: 400px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

/* Asegurar que las filas ocupen todo el ancho */
.row, .dbc-row {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100%;
    max-width: 100%;
}

/* Asegurar que las columnas se distribuyan uniformemente */
.row > .col, .row > [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    flex: 1;
}

/* Clases específicas para distribución exacta 65%-35% */
.col-65 {
    flex: 0 0 65% !important;
    max-width: 65% !important;
}

.col-35 {
    flex: 0 0 35% !important;
    max-width: 35% !important;
}

/* Aplicar Satoshi a todos los elementos de texto */
h1, h2, h3, h4, h5, h6, p, span, div, a, li, ul {
    font-family: 'Satoshi', sans-serif;
}

/* Estilos para el dropdown del gráfico de línea */
.Select-control {
    font-family: 'Satoshi', sans-serif !important;
}

.Select-menu-outer {
    font-family: 'Satoshi', sans-serif !important;
}

/* Ajustes para el gráfico de línea */
.graph-card-trendline .js-plotly-plot {
    width: 100%;
    height: 400px;
}

/* ===============================================
   COMPONENTES DE GRÁFICOS
   =============================================== */

/* Headers de gráficos */
.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 5px;
}

.chart-title {
    margin: 0;
    color: #1e293b;
    font-family: 'Satoshi', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Header card principal con título y filtros de fecha */
.main-header-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 15px 20px;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    width: 100%;
    
}

.main-title {
    font-size: 1.5rem;
    margin: 0;
    color: #1e293b;
    font-family: 'Satoshi', sans-serif;
    font-weight: 600;
}

/* Contenedor de filtros de fecha */
.date-filters-container {
    display: flex;
    align-items: center;
}

.date-filter-group {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.date-filter-group:last-child {
    margin-right: 0;
}

/* Dropdowns de gráficos */
.chart-dropdown {
    width: 180px;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.85rem;
}

/* Contenedores de gráficos */
.chart-container {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.chart-graph {
    height: 250px;
}

/* ===============================================
   TABLA DINÁMICA
   =============================================== */

/* Contenedor principal de la tabla */
.table-container {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header de la tabla */
.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 5px;
}

.table-title {
    margin: 0;
    color: #1e293b;
    font-family: 'Satoshi', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Filtros de la tabla */
.table-filter-container {
    display: flex;
    align-items: center;
}

.table-filter-label {
    margin-right: 10px;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.85rem;
    color: #64748B;
}

.date-filter-label {
    margin-right: 8px;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.85rem;
    color: #64748B;
}

.table-filter-dropdown {
    width: 150px;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.85rem;
}

/* Estilos para DataTable - Contenedor principal */
.data-table {
    height: 350px;
    font-family: 'Satoshi', sans-serif;
}

/* Estilos específicos para el contenedor de Dash DataTable */
.data-table .dash-table-container {
    height: 350px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
}

/* Estilos para celdas */
.data-table .dash-spreadsheet-container .dash-spreadsheet-inner table {
    font-family: 'Satoshi', sans-serif;
}

.data-table .dash-spreadsheet-container .dash-spreadsheet-inner .dash-cell {
    text-align: left;
    padding: 8px 12px;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.85rem;
    border: 1px solid #E2E8F0;
    min-width: 120px;
    width: 120px;
    max-width: 200px;
    white-space: normal;
}

/* Estilos para headers */
.data-table .dash-spreadsheet-container .dash-spreadsheet-inner th {
    background-color: #F8FAFC !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    border: 1px solid #E2E8F0 !important;
    font-family: 'Satoshi', sans-serif !important;
}

/* Estilos para datos */
.data-table .dash-spreadsheet-container .dash-spreadsheet-inner td {
    background-color: white !important;
    color: #64748B !important;
    font-family: 'Satoshi', sans-serif !important;
}

/* Estilos condicionales removidos - se agregarán nuevos según la nueva lógica */



/* Contenedor del botón de volver */
.back-button-container {
    margin-bottom: 1rem;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* Botón de volver a lista */
.back-button {
    background: #002b5b;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0, 43, 91, 0.15);
}

.back-button:hover {
    background: #003875;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 43, 91, 0.25);
}

.back-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 43, 91, 0.15);
}

.back-button:focus {
    outline: none;
    border: 1px solid #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Ícono dentro del botón */
.back-button .fas {
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.back-button:hover .fas {
    transform: translateX(-2px);
}

/* Dropdown de búsqueda en header */

.search-dropdown {
    width: 350px;
    font-family: 'Satoshi', sans-serif;
}

/* Cards de métricas */
.metrics-row {
    margin-bottom: 1.5rem;
}

.metric-card {
    padding: 20px;
    text-align: center;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.metric-value {
    font-family: 'Satoshi', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1;
}

.metric-label {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #64748B;
    margin: 8px 0 0 0;
}

/* Cards de contenido */
.content-row {
    margin-bottom: 1.5rem;
}

.info-card {
    padding: 20px;
    height: 380px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.chart-card {
    padding: 20px;
    height: 380px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.chat-card {
    padding: 20px;
    height: 480px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
    position: relative;
    background: white;
    border-radius: 12px;
    
}

.info-content {
    height: calc(100% - 40px);
    overflow: auto;
}

.chart-content {
    height: calc(100% - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-content {
    height: calc(100% - 40px);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

/* Campos de información */
.info-field {
    margin-bottom: 15px;
}

.info-field-label {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748B;
    margin: 0 0 3px 0;
    display: block;
}

.info-field-value {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: #1e293b;
    margin: 0;
    line-height: 1.3;
}

.info-field-value.description {
    font-size: 0.85rem;
    line-height: 1.4;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.description-field {
    grid-column: span 2;
}

/* Placeholder del gráfico */
.chart-placeholder {
    color: #64748B;
    font-family: 'Satoshi', sans-serif;
    font-size: 1.2rem;
    text-align: center;
}

/* ===============================================
   CHAT TICKET - COMPONENTE TIPO WHATSAPP
   =============================================== */

/* Contenedor principal del chat */
.chat-container {
    height: calc(100% - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 15px;
    background-image: url('/assets/fondo_chat.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: local;
    border-radius: 8px;
    font-family: 'Satoshi', sans-serif;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    min-height: 400px;
    max-height: 440px;
    position: relative;
    background-clip: padding-box;
    /* Firefox scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* Overlay eliminado - imagen de fondo sin opacidad */

/* Contenido del chat con posicionamiento natural */
.chat-container > * {
    position: relative;
}

/* ===============================================
   EVENTOS DEL SISTEMA EN EL CHAT
   =============================================== */

/* Fecha de creación del ticket */
.chat-creation-date {
    text-align: center;
    margin: 10px 0 20px 0;
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chat-creation-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 15px;
}

/* Eventos del sistema */
.chat-system-event {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 15px 0;
}

.chat-system-message {
    background-color: rgba(59, 130, 246, 0.1);
    color: #1e40af;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    max-width: 80%;
    border: 1px solid rgba(59, 130, 246, 0.2);
    backdrop-filter: blur(5px);
    margin-bottom: 4px;
}

/* Timestamp para eventos del sistema */
.chat-system-timestamp {
    font-size: 0.7rem;
    color: #6b7280;
    font-family: 'Satoshi', sans-serif;
    font-weight: 400;
    text-align: center;
    margin-top: 2px;
    opacity: 0.8;
}

/* Eventos de asignación */
.chat-system-assignment {
    background-color: rgba(16, 185, 129, 0.1);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Eventos de cambio de estado */
.chat-system-status {
    background-color: rgba(245, 158, 11, 0.1);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Eventos de entrada/salida */
.chat-system-join-leave {
    background-color: rgba(107, 114, 128, 0.1);
    color: #374151;
    border: 1px solid rgba(107, 114, 128, 0.2);
}

/* Eventos críticos */
.chat-system-critical {
    background-color: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Contenedor de cada mensaje */
.chat-message {
    display: flex;
    margin-bottom: 15px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    animation: fadeInMessage 0.3s ease-in-out;
}

/* Mensaje del usuario (izquierda) */
.chat-message-user {
    justify-content: flex-start;
}

/* Mensaje del asesor (derecha) */
.chat-message-agent {
    justify-content: flex-end;
    padding-right: 10px;
}

/* Globo de texto base */
.chat-bubble {
    max-width: 60%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 0.9rem;
    line-height: 1.4;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    position: relative;
    box-sizing: border-box;
}

/* Globo del usuario (gris) */
.chat-bubble-user {
    background-color: #ffffff;
    color: #1f2937;
    border-bottom-left-radius: 4px;
}

/* Globo del asesor (verde) */
.chat-bubble-agent {
    background-color: #f97316;
    color: white;
    border-bottom-right-radius: 4px;
}

/* Contenedor de información del mensaje */
.chat-message-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 60%;
    width: auto;
    box-sizing: border-box;
    overflow: hidden;
}

/* Información del mensaje del asesor (alineada a la derecha) */
.chat-message-info-agent {
    align-items: flex-end;
    margin-right: 0;
    padding-right: 0;
}

/* Timestamp del mensaje */
.chat-timestamp {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 4px;
    font-family: 'Satoshi', sans-serif;
}

/* Nombre del asesor */
.chat-agent-name {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-top: 2px;
    font-style: italic;
    font-family: 'Satoshi', sans-serif;
}

/* Scrollbar personalizado para el chat */
.chat-container::-webkit-scrollbar {
    width: 8px;
}

.chat-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
    margin: 5px;
}

.chat-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.chat-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Estados de mensaje */
.chat-bubble-user:hover {
    background-color: #d1d5db;
}

.chat-bubble-agent:hover {
    background-color: #22c55e;
}

@keyframes fadeInMessage {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===============================================
   TIMELINE CHART STYLES
   =============================================== */
.timeline-chart-wrapper {
    width: 100%;
    padding: 15px;
}

.timeline-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    text-align: center;
    font-family: 'Satoshi', sans-serif;
}

.timeline-svg-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 10px;
}

.timeline-svg-container svg {
    width: 100%;
    height: auto;
    max-width: 100%;
}

.timeline-chart {
    width: 100%;
    height: 200px;
}

/* ===============================================
   INFO SECTIONS STYLES
   =============================================== */
.info-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.info-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.info-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 15px;
    font-family: 'Satoshi', sans-serif;
    padding-bottom: 5px;
    border-bottom: 2px solid #3b82f6;
    display: inline-block;
}

.status-field {
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    background: #f8f9fa;
}

.status-positive {
    background: #d1fae5;
    color: #065f46;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
}

.status-negative {
    background: #fee2e2;
    color: #dc2626;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
}

.status-warning {
    background: #fef3c7;
    color: #d97706;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
}

.info-field-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.info-field-link:hover {
    background: #eff6ff;
    color: #1d4ed8;
    text-decoration: none;
}

.dash-table-container {
    max-width: 100%;
    overflow-x: auto;
}

/* Ajustes responsivos para las filas y columnas */
.mb-4 {
    margin-bottom: 1rem !important;
}

/* Ajustes para las cards */
.card {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    overflow: hidden;
}

/* Ajustes para gráficos */
.graph-card-trendline, .graph-card-bar {
    width: 100%;
    height: 400px;
    overflow: hidden;
}

/* Ajustes para tablas */
.table-card {
    width: 100%;
    overflow-x: auto;
}

/* Media queries para diferentes tamaños de pantalla */
@media (max-width: 1200px) {
    .content-area, #main-content {
        padding: 0rem;
    }
    
    .graph-card-trendline, .graph-card-bar {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .content-area, #main-content {
        padding: 0rem;
    }
    
    .graph-card-trendline, .graph-card-bar {
        height: 250px;
    }
}

/* Sidebar de filtros */
.filters-sidebar {
    width: 280px;
    min-width: 220px;
    max-width: 320px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #1a237e;
    color: white;
    padding: 2rem 1rem;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 2px 0 5px rgba(0,0,0,0.08);
}

.filter-group {
    margin-bottom: 1.5rem;
}

.filter-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #fff;
}

.filter-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* Estilos para los dropdowns dentro del sidebar */
.filters-sidebar .Select-control {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.filters-sidebar .Select-value-label {
    color: white !important;
}

.filters-sidebar .Select-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

.filters-sidebar .Select-arrow {
    border-color: white transparent transparent !important;
}

/* Estilos para el DatePicker dentro del sidebar */
.filters-sidebar .SingleDatePickerInput {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.filters-sidebar .DateInput {
    background: transparent;
}

.filters-sidebar .DateInput_input {
    color: white;
    background: transparent;
    border: none;
}

/* Botón de aplicar filtros */
.filters-sidebar .btn-primary {
    background-color: #3f51b5;
    border-color: #3f51b5;
    font-weight: 500;
    padding: 0.75rem;
    transition: all 0.3s ease;
}

.filters-sidebar .btn-primary:hover {
    background-color: #5c6bc0;
    border-color: #5c6bc0;
}


/* Media queries para responsividad */
@media (max-width: 768px) {
    .filters-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1000;
    }
    
    .filters-sidebar.show {
        transform: translateX(0);
    }
    
    .with-filters-sidebar {
        margin-left: 0;
        width: 100%;
    }
    
    /* Botón para mostrar/ocultar filtros en móvil */
    .filters-toggle {
        display: block;
        position: fixed;
        left: 1rem;
        top: 1rem;
        z-index: 1001;
    }
}

/* Responsive: sidebar colapsable en pantallas pequeñas */
@media (max-width: 900px) {
    .filters-sidebar {
        position: absolute;
        left: -280px;
        transition: left 0.3s;
    }
    .filters-sidebar.show {
        left: 0;
    }
    .content-area {
        margin-left: 0;
        padding: 0rem;
    }
}



/* ========================================
   ESTILOS MEJORADOS PARA EL SIDEBAR
   ======================================== */

/* Contenedor principal del sidebar mejorado */
.filters-sidebar-enhanced {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: linear-gradient(135deg, #1a237e 0%, #283593 50%, #1a237e 100%);
    color: white;
    z-index: 999999;
    box-shadow: 4px 0 20px rgba(26, 35, 126, 0.3);
    overflow: visible;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    isolation: isolate;
}

/* Contenido interno del sidebar */
.filters-sidebar-content {
    padding: 0.8rem 1rem;
    height: 100%;
    overflow-y: auto;
    overflow-x: visible;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Scrollbar para webkit browsers */
.filters-sidebar-content::-webkit-scrollbar {
    width: 6px;
}

.filters-sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

.filters-sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.filters-sidebar-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Header del sidebar */
.sidebar-header {
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
}

.sidebar-header-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-title {
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.3px;
}

.sidebar-divider {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    margin: 1rem 0 0 0;
}

/* Grupos de filtros mejorados */
.filter-group-enhanced {
    margin-bottom: 0.7rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    z-index: 1;
    position: relative;
}

.filter-group-enhanced:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Contenedor de etiquetas con iconos */
.filter-label-container {
    display: flex;
    align-items: center;
    margin-bottom: 0.3rem;
}

.sidebar-icon {
    color: rgba(255, 255, 255, 0.9);
    margin-right: 8px;
    font-size: 1rem;
    width: 16px;
    text-align: center;
    transition: color 0.3s ease;
}

.filter-group-enhanced:hover .sidebar-icon {
    color: white;
}

/* Etiquetas mejoradas */
.filter-label-enhanced {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: color 0.3s ease;
}

.filter-group-enhanced:hover .filter-label-enhanced {
    color: white;
}

/* Wrapper para inputs */
.filter-input-wrapper {
    position: relative;
    z-index: 10;
}

/* DatePicker wrapper con máxima prioridad dentro del sidebar */
.filter-input-wrapper:has(.filter-input-enhanced) {
    z-index: 999999 !important;
}

/* Cuando el DatePicker está activo */
.filter-input-wrapper:focus-within,
.filter-input-wrapper:has(.SingleDatePickerInput--focused) {
    z-index: 999999 !important;
}

/* Grupos específicos que contienen DatePickers */
.filter-group-enhanced:has(.filter-input-enhanced) {
    z-index: 100000 !important;
    position: relative !important;
}

/* Cuando hay un DatePicker abierto, reducir z-index de otros elementos */
.filters-sidebar-enhanced:has(.SingleDatePickerInput--focused) .filter-group-enhanced:not(:has(.SingleDatePickerInput--focused)) {
    z-index: 1 !important;
}

.filters-sidebar-enhanced:has(.SingleDatePickerInput--focused) .filter-buttons-container {
    z-index: 1 !important;
}

/* Específico para elementos de fecha */
.filter-group-enhanced:has([id*="date"]) {
    z-index: 100000 !important;
}

/* Forzar z-index bajo para elementos que NO son DatePickers */
.filter-group-enhanced:not(:has(.filter-input-enhanced)) {
    z-index: 2 !important;
}

/* Elementos específicos que deben estar debajo */
.filter-group-enhanced:has([id*="category"]),
.filter-group-enhanced:has([id*="type"]),
.filter-group-enhanced:has([id*="difficulty"]),
.filter-section-divider,
.filter-buttons-container {
    z-index: 2 !important;
}

/* Override: DatePicker siempre por encima */
.filter-group-enhanced:has(.SingleDatePickerInput) {
    z-index: 200000 !important;
}

/* Cuando el DatePicker está activo/focused */
.filter-group-enhanced:has(.SingleDatePickerInput--focused),
.filter-group-enhanced:has(.SingleDatePickerInput.is-focused) {
    z-index: 500000 !important;
}

/* DatePicker mejorado */
.filter-input-enhanced {
    width: 100% !important;
}

.filter-input-enhanced .SingleDatePickerInput {
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
}

.filter-input-enhanced .SingleDatePickerInput:hover {
    border-color: rgba(255, 255, 255, 0.4) !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.filter-input-enhanced .DateInput_input {
    background: transparent !important;
    color: white !important;
    border: none !important;
    padding: 6px 8px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}

.filter-input-enhanced .DateInput_input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* DatePicker z-index fixes */
.filter-input-enhanced .SingleDatePickerInput .DateInput {
    z-index: 1002 !important;
    position: relative !important;
}

.filter-input-enhanced .SingleDatePickerInput .DateRangePickerInput {
    z-index: 1002 !important;
    position: relative !important;
}

.filter-input-enhanced .CalendarDay {
    z-index: 1003 !important;
}

.filter-input-enhanced .DayPicker {
    z-index: 1003 !important;
    position: relative !important;
}

.filter-input-enhanced .DateRangePicker__tether-element {
    z-index: 1003 !important;
}

.filter-input-enhanced .SingleDatePicker__picker {
    z-index: 1003 !important;
    position: absolute !important;
}

/* Dropdowns mejorados */
.filter-dropdown-enhanced {
    font-size: 0.8rem !important;
}

.filter-dropdown-enhanced .Select-control {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    min-height: 32px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.filter-dropdown-enhanced .Select-control:hover {
    border-color: rgba(255, 255, 255, 0.4) !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.filter-dropdown-enhanced .Select-control.is-focused {
    border-color: rgba(255, 255, 255, 0.6) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
}

.filter-dropdown-enhanced .Select-value-label {
    color: white !important;
    font-weight: 500 !important;
    padding: 5px 8px !important;
}

.filter-dropdown-enhanced .Select-placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    padding: 5px 8px !important;
    font-style: italic !important;
}

.filter-dropdown-enhanced .Select-arrow {
    border-color: rgba(255, 255, 255, 0.6) transparent transparent !important;
}

.filter-dropdown-enhanced .Select-menu-outer {
    background: #1a237e !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
    margin-top: 4px !important;
    z-index: 9999 !important;
    position: relative !important;
}

.filter-dropdown-enhanced .Select-option {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 10px 16px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.filter-dropdown-enhanced .Select-option:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
}

.filter-dropdown-enhanced .Select-option.is-selected {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    font-weight: 600 !important;
}

/* Separadores de sección */
.filter-section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    margin: 0.8rem 0;
    position: relative;
}

.filter-section-divider::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
}

/* Contenedor de botones */
.filter-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.6rem;
    z-index: 1;
    position: relative;
}

/* Botones mejorados */
.filter-button-enhanced {
    border-radius: 6px !important;
    padding: 8px 14px !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    transition: all 0.3s ease !important;
    border: 2px solid transparent !important;
    position: relative !important;
    overflow: hidden !important;
}

.filter-button-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
    z-index: 1;
}

.filter-button-enhanced:hover::before {
    left: 100%;
}

.filter-button-enhanced span,
.filter-button-enhanced i {
    position: relative;
    z-index: 2;
}

/* Botón aplicar */
.apply-btn {
    background: linear-gradient(135deg, #F97316 0%, #ea6c0a 100%) !important;
    border-color: #F97316 !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3) !important;
}

.apply-btn:hover {
    background: linear-gradient(135deg, #ea6c0a 0%, #dc6208 100%) !important;
    border-color: #ea6c0a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4) !important;
}

/* Botón limpiar */
.clear-btn {
    background: linear-gradient(135deg, #1F2937 0%, #374151 100%) !important;
    border-color: #1F2937 !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(31, 41, 55, 0.3) !important;
}

.clear-btn:hover {
    background: linear-gradient(135deg, #374151 0%, #4B5563 100%) !important;
    border-color: #374151 !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(31, 41, 55, 0.4) !important;
}

/* Animaciones adicionales */
@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.filters-sidebar-enhanced {
    animation: slideInFromLeft 0.3s ease-out;
}

/* Media queries para responsividad */
@media (max-width: 768px) {
    .filters-sidebar-enhanced {
        width: 280px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .filters-sidebar-enhanced.show {
        transform: translateX(0);
    }
    
    .filters-sidebar-content {
        padding: 1.5rem 1rem;
    }
    
    .filter-group-enhanced {
        margin-bottom: 1rem;
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .filters-sidebar-enhanced {
        width: 100vw;
        max-width: none;
    }
    
    .filter-buttons-container {
        flex-direction: row;
        gap: 0.5rem;
    }
    
    .filter-button-enhanced {
        flex: 1;
        font-size: 0.8rem !important;
        padding: 10px 16px !important;
    }
}

/* ========================================
   ESTILOS PARA DATE DROPDOWNS
   ======================================== */

/* Container de los 3 dropdowns de fecha */
.date-dropdowns-container {
    display: flex;
    gap: 0.3rem;
    width: 100%;
}

/* Wrapper individual para cada dropdown */
.date-dropdown-wrapper {
    flex: 1;
    min-width: 0;
}

/* Estilos específicos para dropdowns de fecha */
.date-dropdown {
    font-size: 0.75rem !important;
}

.date-dropdown .Select-control {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    min-height: 30px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.date-dropdown .Select-control:hover {
    border-color: rgba(255, 255, 255, 0.4) !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.date-dropdown .Select-control.is-focused {
    border-color: rgba(255, 255, 255, 0.6) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
}

.date-dropdown .Select-value-label {
    color: white !important;
    font-weight: 500 !important;
    padding: 4px 6px !important;
    font-size: 0.75rem !important;
}

.date-dropdown .Select-placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    padding: 4px 6px !important;
    font-style: italic !important;
    font-size: 0.72rem !important;
}

.date-dropdown .Select-arrow {
    border-color: rgba(255, 255, 255, 0.6) transparent transparent !important;
    border-width: 4px 4px 0 !important;
}

.date-dropdown .Select-menu-outer {
    background: #1a237e !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
    margin-top: 2px !important;
    z-index: 99999 !important;
    position: relative !important;
    max-height: 150px !important;
    overflow-y: auto !important;
}

.date-dropdown .Select-option {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 6px 10px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    font-size: 0.75rem !important;
}

.date-dropdown .Select-option:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
}

.date-dropdown .Select-option.is-selected {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    font-weight: 600 !important;
}

/* Estados de error para dropdowns de fecha */
.date-dropdown.error .Select-control {
    border-color: #ff4444 !important;
    background: rgba(255, 68, 68, 0.1) !important;
}

.date-dropdown.error .Select-control:hover,
.date-dropdown.error .Select-control.is-focused {
    border-color: #ff6666 !important;
    background: rgba(255, 68, 68, 0.15) !important;
}

/* Botón deshabilitado */
.filter-button-enhanced:disabled,
.filter-button-enhanced.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: none !important;
}

.filter-button-enhanced:disabled:hover,
.filter-button-enhanced.disabled:hover {
    transform: none !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

/* Responsive para date dropdowns */
@media (max-width: 480px) {
    .date-dropdowns-container {
        gap: 0.2rem;
    }
    
    .date-dropdown .Select-value-label,
    .date-dropdown .Select-placeholder {
        padding: 3px 4px !important;
        font-size: 0.7rem !important;
    }
    
    .date-dropdown .Select-control {
        min-height: 28px !important;
    }
}

/* Estilos globales para z-index en el sidebar */
.filters-sidebar-enhanced .Select-menu,
.filters-sidebar-enhanced .Select-menu-outer,
.filters-sidebar-enhanced .SingleDatePicker__picker,
.filters-sidebar-enhanced .DayPicker,
.filters-sidebar-enhanced .CalendarMonth,
.filters-sidebar-enhanced .DayPickerNavigation {
    z-index: 99999 !important;
    position: relative !important;
}

/* Override para cualquier elemento de React-Select en el sidebar */
.filters-sidebar-enhanced [class*="Select"] [class*="menu"] {
    z-index: 99999 !important;
}

/* Override para cualquier elemento de DatePicker en el sidebar */
.filters-sidebar-enhanced [class*="DatePicker"],
.filters-sidebar-enhanced [class*="Calendar"] {
    z-index: 99999 !important;
}

/* Estilos específicos para DatePicker */
.SingleDatePicker__picker {
    z-index: 9999999 !important;
    position: absolute !important;
    background: white !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    width: 280px !important;
    font-family: 'Satoshi', sans-serif !important;
}

.SingleDatePicker__display {
    z-index: 9999999 !important;
}

.DayPicker {
    z-index: 9999999 !important;
    position: relative !important;
    background: white !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.DayPicker__wrapper {
    z-index: 9999999 !important;
    background: white !important;
}

.CalendarMonth {
    z-index: 9999999 !important;
    background: white !important;
    padding: 15px !important;
}

.CalendarMonth_table {
    z-index: 9999999 !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
}

/* Header del mes */
.CalendarMonth_caption {
    color: #333 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: 10px !important;
    background: #f8f9fa !important;
    margin-bottom: 10px !important;
    border-radius: 4px !important;
}

/* Días de la semana */
.DayPicker_weekHeader {
    color: #666 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    background: #f0f0f0 !important;
}

.DayPicker_weekHeader_ul {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 0 !important;
}

.DayPicker_weekHeader_li {
    flex: 1 !important;
    text-align: center !important;
    color: #666 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.DayPickerKeyboardShortcuts_panel {
    z-index: 9999999 !important;
}

.DateRangePickerInput {
    z-index: 9999999 !important;
}

.DateInput {
    z-index: 9999999 !important;
    position: relative !important;
}

/* Elementos específicos del calendario */
.CalendarDay {
    z-index: 9999999 !important;
    color: #333 !important;
    background: white !important;
    border: 1px solid #f0f0f0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    width: 35px !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.CalendarDay:hover {
    background: #f8f9fa !important;
    border-color: #1a237e !important;
    color: #1a237e !important;
}

.CalendarDay__selected {
    background: #1a237e !important;
    color: white !important;
    border-color: #1a237e !important;
}

.CalendarDay__today {
    background: #e3f2fd !important;
    color: #1a237e !important;
    font-weight: 600 !important;
}

.CalendarWeek {
    z-index: 9999999 !important;
    display: flex !important;
}

.DayPickerNavigation {
    z-index: 9999999 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 15px !important;
    background: #f8f9fa !important;
    border-bottom: 1px solid #eee !important;
}

.DayPickerNavigation__prev,
.DayPickerNavigation__next {
    z-index: 9999999 !important;
    background: #1a237e !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

.DayPickerNavigation__prev:hover,
.DayPickerNavigation__next:hover {
    background: #283593 !important;
    transform: scale(1.05) !important;
}

/* Container del DatePicker cuando está abierto */
.SingleDatePickerInput {
    z-index: 9999999 !important;
    position: relative !important;
}

.SingleDatePickerInput .DateInput_input {
    z-index: 9999999 !important;
}

/* Overlay del calendario */
[data-react-toolbox="overlay"] {
    z-index: 99999 !important;
}

/* Portal y elementos globales del DatePicker */
body .SingleDatePicker__picker {
    z-index: 99999 !important;
    position: absolute !important;
}

body .DayPicker {
    z-index: 99999 !important;
}

body .CalendarMonth {
    z-index: 99999 !important;
}

/* Elementos del DatePicker que se renderizan en el body */
div[data-testid*="calendar"],
div[class*="DatePicker"],
div[class*="Calendar"],
div[class*="DayPicker"] {
    z-index: 99999 !important;
}

/* Específico para elementos dentro del sidebar */
.filters-sidebar-enhanced * {
    position: relative;
}

.filters-sidebar-enhanced .SingleDatePicker__picker,
.filters-sidebar-enhanced .DayPicker,
.filters-sidebar-enhanced .CalendarMonth {
    position: absolute !important;
    z-index: 9999999 !important;
}

/* FUERZA BRUTAL para DatePicker - Usar selectores más específicos */
* [class*="SingleDatePicker"] {
    z-index: 9999999 !important;
}

* [class*="DayPicker"] {
    z-index: 9999999 !important;
}

* [class*="Calendar"] {
    z-index: 9999999 !important;
}

/* Selectores de atributo para elementos del calendar */
[class^="SingleDatePicker"],
[class*="SingleDatePicker"] {
    z-index: 9999999 !important;
    position: relative !important;
}

[class^="DayPicker"],
[class*="DayPicker"] {
    z-index: 9999999 !important;
    position: relative !important;
}

[class^="Calendar"],
[class*="Calendar"] {
    z-index: 9999999 !important;
    position: relative !important;
}

/* DateInput específicos */
[class^="DateInput"],
[class*="DateInput"] {
    z-index: 9999999 !important;
    position: relative !important;
}

/* REGLAS NUCLEARES - FUERZA ABSOLUTA PARA DATEPICKER */
div[class*="SingleDatePicker"],
div[class*="DayPicker"],
div[class*="Calendar"],
div[class*="DateInput"],
div[class*="DateRangePicker"] {
    z-index: 9999999 !important;
    position: relative !important;
}

/* Elementos que se renderizan fuera del sidebar */
body > div[class*="SingleDatePicker"],
body > div[class*="DayPicker"],
body > div[class*="Calendar"] {
    z-index: 9999999 !important;
    position: absolute !important;
}

/* Selector universal para cualquier elemento del DatePicker */
*[class*="SingleDatePicker"] *,
*[class*="DayPicker"] *,
*[class*="Calendar"] * {
    z-index: inherit !important;
}

/* Último recurso - cualquier div que pueda ser un calendario */
.react-datepicker,
.react-datepicker__portal,
.react-datepicker__tab-loop {
    z-index: 9999999 !important;
    position: relative !important;
}

/* Estados adicionales del calendario */
.CalendarDay__blocked_minimum_nights,
.CalendarDay__blocked_calendar,
.CalendarDay__blocked_out_of_range {
    background: #f5f5f5 !important;
    color: #ccc !important;
    cursor: not-allowed !important;
}

.CalendarDay__hovered_span,
.CalendarDay__hovered {
    background: #e8f5e8 !important;
    border-color: #4caf50 !important;
}

/* Asegurar que los elementos son clickeables */
.CalendarDay,
.DayPickerNavigation__prev,
.DayPickerNavigation__next {
    pointer-events: auto !important;
    user-select: none !important;
}

/* Mejorar la visibilidad del mes actual */
.CalendarMonth_caption strong {
    color: #1a237e !important;
    font-weight: 700 !important;
}

/* Fijar posición del picker */
.SingleDatePicker__picker {
    left: 0 !important;
    top: 100% !important;
    margin-top: 5px !important;
    max-width: 260px !important;
    min-width: 250px !important;
}

/* Estilos para pantallas pequeñas */
@media (max-width: 400px) {
    .SingleDatePicker__picker {
        width: 250px !important;
        min-width: 250px !important;
    }
    
    .CalendarDay {
        width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
    }
    
    .DayPickerNavigation__prev,
    .DayPickerNavigation__next {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
}

/* ===== ESTILOS PARA LAYOUT ESTÁTICO OPTIMIZADO ===== */

/* Layout principal con sidebar estático optimizado */
.layout-container-static,
.optimized-layout-container {
    display: flex;
    width: 100vw;
    min-height: 100vh;
    background: #f7f7f7;
    position: relative;
    overflow: visible;
    margin: 0;
    padding: 0;
}

/* Sidebar estático - siempre visible */
.static-sidebar {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    overflow-y: auto;
    background-color: #1a237e;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Contenido principal optimizado para ocupar exactamente el espacio disponible */
.main-content-with-static-sidebar {
    flex: 1;
    margin-left: 280px;
    min-width: 0;
    padding: 2rem;
    min-height: 100vh;
    overflow-x: auto;
    overflow-y: auto;
    background: #f7f7f7;
    box-sizing: border-box;
}

/* Optimizaciones específicas para el nuevo layout */
.optimized-main-content {
    width: calc(100vw - 280px);
    max-width: calc(100vw - 280px);
    min-height: 100vh;
    margin-right: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: #f7f7f7;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
}

/* Container principal que controla toda la altura */
.main-content-container {
    width: 100%;
    max-width: 100%;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: visible;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    position: relative;
    gap: 0 rem; /* ajusta al gusto */
}

/* Quita el margen del último bloque para que no deje "lila" al final */
.main-content-container > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Header section - altura fija */
.header-section {
    flex-shrink: 0;
    padding: 1.5rem 2rem 1rem 2rem;
    background: #f7f7f7;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.header-section .main-title {
    margin: 0;
    padding-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a237e;
    border-bottom: 2px solid #f97316;
    display: inline-block;
}

/* Header buttons container */
.header-buttons {
    display: flex;
    gap: 1rem;
    margin-left: 2rem;
    align-items: center;
}

/* Header button styles */
.header-button {
    padding: 0.5rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid #1a237e;
    border-radius: 6px;
    background: transparent;
    color: #1a237e;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.header-button:hover {
    background: #1a237e;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(26, 35, 126, 0.2);
}

.header-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(26, 35, 126, 0.2);
}

.header-button.active {
    background: #1a237e;
    color: white;
    box-shadow: 0 2px 4px rgba(26, 35, 126, 0.3);
}

/* Estilos para el contenido de dimensiones */
#dimensiones-content {
    display: none;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

#dimensiones-content .charts-section {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#dimensiones-content .chart-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#dimensiones-content .chart-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a237e;
    margin-bottom: 1rem;
    text-align: center;
}

/* Header section layout */
.header-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Body del contenido - ocupa el espacio restante */
.main-content-body {
    flex: 1;
    padding: 1rem 2rem 3rem 2rem; /* Aumentar padding inferior a 3rem */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-height: auto;
    box-sizing: border-box;
    /* Solución simplificada: altura flexible con scroll */
    max-height: 85vh; /* Altura máxima que permite scroll */
}

/* Sección de KPIs - altura fija optimizada */
.kpi-section {
    flex-shrink: 0;
    min-height: 120px;
    height: auto;
    margin-bottom: 1rem;
}

.kpi-row {
    height: 100%;
    margin: 0;
}

.kpi-col {
    padding: 0 0.5rem;
    height: 100%;
}

.optimized-kpi-card {
    height: 100% !important;
    margin-bottom: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
}

/* Sección de gráficos - altura calculada */
.charts-section {
    flex: 0 0 auto;
    min-height: 350px;
    height: 400px;
    margin-bottom: 1rem;
}

.charts-row {
    height: 100%;
    margin: 0;
}

.chart-col {
    padding: 0 0.5rem;
    height: 100%;
}

.optimized-chart-card {
    height: 100% !important;
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
}

/* Sección de tabla - ocupa el espacio restante disponible */
.table-section {
    flex: 1;
    min-height: 400px;
    height: auto;
    margin-bottom: 1rem; /* Aumentar margin inferior */
    padding-bottom: 1rem; /* Agregar padding inferior para más espacio */
    /* Solución simplificada: expandirse naturalmente */
    display: flex;
    flex-direction: column;
    /* Permitir que la tabla use el espacio disponible */
    min-height: 0;
}

.table-row {
    height: 100%;
    margin: 0;
}

.table-col {
    padding: 0 0.5rem;
    height: 100%;
}

.optimized-table-card {
    height: 100% !important;
    margin-bottom: 2rem !important; /* Agregar espacio inferior para separar del borde */
    display: flex;
    flex-direction: column;
    overflow: visible; /* Permitir que el contenido sea visible */
    min-height: 500px;
    /* Solución simplificada: expandirse naturalmente */
    flex: 1;
    /* Permitir que la tabla se ajuste dinámicamente */
    min-height: 0;
}

/* Eliminar gutters innecesarios */
.no-gutters {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    max-width: 100%;
}

/* Forzar que las filas ocupen todo el ancho disponible */
.kpi-row,
.charts-row,
.table-row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Asegurar que las columnas no se salgan del contenedor */
.kpi-col,
.chart-col,
.table-col {
    max-width: 100%;
    min-width: 0;
    flex-basis: 0;
    flex-grow: 1;
}

/* Optimizaciones para gráficos dentro de las cards */
.optimized-chart-card .chart-container,
.optimized-chart-card > div {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.optimized-chart-card .chart-graph,
.optimized-chart-card .js-plotly-plot {
    flex: 1;
    height: 320px !important;
    min-height: 250px;
    overflow: visible;
}

/* Optimizaciones para tabla */
.optimized-table-card .table-container,
.optimized-table-card > div {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.optimized-table-card .data-table,
.optimized-table-card .dash-table-container {
    flex: 1;
    height: 100% !important;
    min-height: 400px;
    overflow-y: auto;
    overflow-x: auto;
    /* Solución escalable: permitir que la tabla se expanda naturalmente */
    max-height: none; /* Eliminar restricciones de altura máxima */
}

/* Optimizaciones adicionales para componentes internos */

/* Títulos de cards optimizados */
.optimized-chart-card .card-title,
.optimized-table-card .card-title {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a237e;
    flex-shrink: 0;
}

/* Headers de gráficos optimizados */
.optimized-chart-card .chart-header {
    flex-shrink: 0;
    margin-bottom: 1rem;
    padding: 0 5px;
}

.optimized-table-card .table-header {
    flex-shrink: 0;
    margin-bottom: 1rem;
    padding: 0 5px;
}

/* Contenedores de gráficos Plotly optimizados */
.optimized-chart-card .js-plotly-plot .plotly-graph-div {
    height: 100% !important;
    width: 100% !important;
}

.optimized-chart-card .js-plotly-plot .svg-container {
    height: 100% !important;
    width: 100% !important;
}

/* Optimizaciones específicas para el gráfico de línea */
.graph-card-trendline.optimized-chart-card {
    min-height: 350px;
}

.graph-card-trendline.optimized-chart-card .js-plotly-plot {
    min-height: 300px;
}

/* Optimizaciones específicas para el gráfico de barras */
.graph-card-bar.optimized-chart-card {
    min-height: 350px;
}

.graph-card-bar.optimized-chart-card .js-plotly-plot {
    min-height: 300px;
}

/* Tabla DataTable optimizada */
.optimized-table-card .dash-table-container .dash-spreadsheet-container {
    height: 100% !important;
    max-height: none !important;
}

.optimized-table-card .dash-table-container .dash-spreadsheet-inner {
    height: 100% !important;
    overflow-y: auto !important;
}

/* Asegurar que el padding interno sea consistente */
.optimized-chart-card,
.optimized-table-card {
    padding: 1.5rem;
}

/* Espaciado óptimo entre elementos */
.main-content-body > * + * {
    margin-top: 0 !important;
}

/* Scrollbar personalizado para el contenido principal */
.main-content-body::-webkit-scrollbar {
    width: 8px;
}

.main-content-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.main-content-body::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.main-content-body::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Para Firefox */
.main-content-body {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* Asegurar que nada se corte - reglas de seguridad */
.optimized-chart-card,
.optimized-table-card,
.optimized-kpi-card {
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: 100%;
    max-width: 100%;
}

/* Forzar alineamiento correcto del contenido principal */
.optimized-main-content,
.main-content-with-static-sidebar {
    transform: translateX(0);
    will-change: auto;
}

/* Prevenir cualquier desplazamiento horizontal */
body, html {
    overflow-x: hidden !important;
}

.layout-container-static,
.optimized-layout-container {
    overflow-x: hidden !important;
}

/* Asegurar que los gráficos sean completamente visibles */
.optimized-chart-card .js-plotly-plot {
    position: relative !important;
    z-index: 1;
}

/* Prevenir overflow en KPIs */
.kpi-row {
    min-height: 120px;
    overflow: visible;
}

.kpi-col {
    min-height: 120px;
    overflow: visible;
}

/* Asegurar visibilidad completa en tablas */
.optimized-table-card .dash-table-container {
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.optimized-table-card .dash-spreadsheet-container {
    border-radius: 8px;
}

/* Padding de seguridad para evitar cortes en los bordes */
.main-content-body > .kpi-section,
.main-content-body > .charts-section,
.main-content-body > .table-section {
    padding: 0 4px;
}

/* Asegurar que los títulos sean siempre visibles */
.header-section .main-title {
    white-space: nowrap;
    overflow: visible;
    text-overflow: visible;
}

/* Responsividad mejorada para evitar cortes */
@media (max-width: 1200px) {
    .optimized-chart-card .js-plotly-plot {
        height: 280px !important;
    }
    
    .optimized-table-card .data-table,
    .optimized-table-card .dash-table-container {
        height: 280px !important;
    }
    
    /* Ajustar altura del contenido principal para pantallas medianas */
    .main-content-body {
        max-height: 85vh;
        min-height: 55vh;
    }
    
    .table-section {
        max-height: 55vh;
    }
    
    .optimized-table-card {
        max-height: 50vh;
    }
}

@media (max-width: 992px) {
    .charts-section {
        height: 350px;
    }
    
    .table-section {
        height: 350px;
    }
    
    .optimized-chart-card .js-plotly-plot {
        height: 250px !important;
    }
    
    .optimized-table-card .data-table,
    .optimized-table-card .dash-table-container {
        height: 250px !important;
    }
    
    /* Ajustar altura del contenido principal para pantallas pequeñas */
    .main-content-body {
        max-height: 80vh;
        min-height: 50vh;
    }
    
    .table-section {
        max-height: 50vh;
    }
    
    .optimized-table-card {
        max-height: 45vh;
    }
}

/* Responsivo para el layout estático optimizado */
@media (max-width: 768px) {
    .static-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        order: -1;
    }
    
    .main-content-with-static-sidebar,
    .optimized-main-content {
        margin-left: 0;
        width: 100%;
        height: auto;
        min-height: 100vh;
    }
    
    .layout-container-static,
    .optimized-layout-container {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }
    
    .main-content-container {
        height: auto;
        min-height: calc(100vh - 200px);
    }
    
    .main-content-body {
        gap: 1rem;
        padding: 1rem;
        /* Ajustar altura del contenido principal para móviles */
        max-height: 75vh;
        min-height: 45vh;
    }
    
    .table-section {
        max-height: 45vh;
    }
    
    .optimized-table-card {
        max-height: 40vh;
    }
    
    .header-section {
        padding: 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .header-buttons {
        margin-left: 0;
        gap: 0.5rem;
    }
    
    .header-button {
        padding: 0.4rem 1rem;
        font-size: 0.8rem;
    }
    
    #dimensiones-content .charts-section {
        margin-bottom: 1rem;
    }
    
    #dimensiones-content .chart-title {
        font-size: 1rem;
    }
    
    .kpi-section {
        height: auto;
        min-height: 120px;
    }
    
    .charts-section {
        min-height: 300px;
        max-height: none;
        height: auto;
    }
    
    .table-section {
        min-height: 250px;
        height: auto;
    }
    
    .kpi-col,
    .chart-col,
    .table-col {
        padding: 0 0.25rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .main-content-with-static-sidebar,
    .optimized-main-content {
        padding: 0;
    }
    
    .main-content-body {
        padding: 0.5rem;
        gap: 0.75rem;
    }
    
    .header-section {
        padding: 0.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .header-section .main-title {
        font-size: 1.5rem;
    }
    
    .header-buttons {
        margin-left: 0;
        gap: 0.25rem;
    }
    
    .header-button {
        padding: 0.3rem 0.75rem;
        font-size: 0.75rem;
    }
    
    #dimensiones-content .charts-section {
        margin-bottom: 0.75rem;
    }
    
    #dimensiones-content .chart-title {
        font-size: 0.9rem;
    }
    
    .kpi-section {
        height: auto;
    }
    
    .kpi-col {
        margin-bottom: 0.75rem;
    }
    
    .optimized-kpi-card {
        height: auto !important;
        min-height: 100px;
    }
    
    .charts-section {
        min-height: 250px;
    }
    
    .optimized-chart-card {
        height: auto !important;
        min-height: 250px;
    }
    
    .table-section {
        min-height: 200px;
    }
    
    .optimized-table-card {
        height: auto !important;
        min-height: 200px;
    }
}