/* ==========================================================================
   DASHBOARD NAVIGATION - ESTILOS DE NAVEGACIÓN Y TABS
   Estilos para la navegación principal del dashboard y pestañas
   ========================================================================== */

/* ==========================================================================
   1. TABS DE NAVEGACIÓN PRINCIPAL
   ========================================================================== */

/* Estilo base para pestañas de indicadores */
.indicador-tab {
    background: none;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    color: #6c757d;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    font-size: 0.9rem;
}

.indicador-tab:hover {
    color: #007bff;
}

.indicador-tab.active {
    color: #007bff;
    border-bottom-color: #007bff;
    font-weight: 600;
}

.indicador-tab:disabled {
    color: #ccc !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

.indicador-tab:disabled:hover {
    color: #ccc !important;
    border-bottom-color: transparent !important;
}

/* ==========================================================================
   2. PANELES DE CONTENIDO
   ========================================================================== */

/* Comportamiento de paneles */
.tab-panel {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.tab-panel.active {
    display: block;
}

/* Animación de entrada */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* ==========================================================================
   3. MAIN DASHBOARD CONTAINER
   ========================================================================== */

/* Container principal del dashboard */
.dashboard-main-container {
    max-width: 1600px;
    margin: 0 auto;
}

.dashboard-header {
    margin-bottom: 3rem;
    /* margin-top: 3rem; */
}

.dashboard-header h2 {
    font-weight: 700;
    color: #212529;
}

.dashboard-header p {
    color: #6c757d;
    margin-bottom: 0;
}





/*============================
H E A D E R
==============================*/
.header__bg{
  margin: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 150px;
  display: flex;
}
.header__bg--dashboard{
  background: linear-gradient(95deg, var(--Link-Visited, #4C2C92) 0%, var(--VisualizacinData-Divergente-Graph-09, #F97145) 100%);
}
.header{
  display: grid;
  grid-template-columns: auto 5fr 5fr;
  grid-gap: var(--spacing-m);
  margin-top: var(--spacing-l);
  margin-bottom: var(--spacing-l);
}
.header__img i{
  font-size: 72px;
  color: var(--white);
  margin-top: 10px;
}
.header__title{
  display: flex;
  flex-direction: column;
  gap: 0px;
}
.header__title .title{
  color: var(--cualitativa-graph-17);
  font-family: var(--font-slab);
  font-size: var(--text-heading-l);
  font-weight: var(--weight-bold);
  line-height: 120%;
  margin-bottom: 0px;
}
.header__title h1 {
  font-size: var(--text-heading-xl);
  font-weight: var(--weight-heavy);
  line-height: 120%;
  color: var(--white);
  margin-bottom: 0px;
}

.header__info{
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.header__info p{
  color: var(--white);
  margin-bottom: 0px;
  font-size: var(--text-body-m);
  font-weight: var(--weight-light);
  line-height: 150%;
}
@media (max-width: 1025px){
  .header__img img{
    width: 300px;
    height: 180px;
    object-fit: cover;
  }
}
@media (max-width: 820px){
  .header{
    /* grid-template-columns: repeat(2, 1fr); */
    grid-template-columns: auto 1fr;
  }
  .header__img img {
    width: 336px;
    height: 180px;
  }
  .header__info{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
  }
}
@media (max-width: 431px){
  .header__bg{
    border-bottom-right-radius: 100px;
  }
  .header{
    grid-template-columns: 1fr;
  }
  .header__img img {
    width: -webkit-fill-available;
  }
  .header__info {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 3;
    grid-row-end: 4;
  }
  .header__info p{
    width: 90%;
  }
}



/* ==========================================================================
   4. RESPONSIVE NAVIGATION - MOVIDO A dashboard-responsive.css
   ========================================================================== */

/* Las reglas responsive se han consolidado en dashboard-responsive.css
   para evitar duplicación y mejorar el mantenimiento */