.nivel-0{
    background:#E8F8F7;
    color:#0F5F63;
    font-weight:700;
    font-size:14px;

    position:sticky;
    left:0;
    z-index:16;
}

.nivel-1{
    padding-left:35px !important;
    font-weight:bold;
    background:#F6FBFB;
    color:#3F4B5B;

    position:sticky;
    left:0;
    z-index:16;
}

.nivel-2{
    padding-left:65px !important;
    color:#555;

    position:sticky;
    left:0;
    z-index:16;
}

.toggle{
    display:inline-block;
    width:18px;
}
td{
    padding:7px 8px;
}
th{
    padding:8px;
}
/* Encabezado del mes */
.cab-mes{
    border-bottom:2px solid #D8E5E8;
    background:#F7FAFC;
    color:#263238;
    font-size:15px;
    font-weight:700; 
}

/* Línea que separa cada grupo mensual */
.borde-mes{
    border-right:1px solid #d9d9d9;
}
thead tr:last-child th{
    border-bottom:1px solid #d9d9d9;
}
table{
    font-size:12.5px;
}
thead th{
    font-size:12px;
    font-weight:600;
    position:sticky;
    top:0;
    z-index:20;
    background:#fff;
}

thead tr:last-child{
    background:#fafafa;
}
tbody tr:hover{
    background:#EEFDFC;
    transition:.15s;
}
tbody tr:nth-child(even){
    background:#fcfcfc;
}

.filtros{
    background:#fff;
    padding:20px;
    border-radius:10px;
    border:1px solid #e5e7eb;
    margin-bottom:25px;
    margin-top:25px;
}

input,
select{
    transition:.2s;
    height:36px;
    border:1px solid #d1d5db;
    border-radius:6px;
    padding:0 10px;
    font-size:14px;
}
h1{
    font-size:34px;
    font-weight:700;
    color:#16324f;
}
.tabla-container{
    overflow:auto;
    margin-top:20px;
    background:#fff;
    border-radius:10px;
    border:1px solid #E5E7EB;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
}
/*=============================
    TARJETA DE FILTROS
==============================*/

/*b.card-filtros{
    ackground:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:20px;
    margin:25px 0;

    background:transparent;
    border:none;
    border-radius:0;
    padding:0;
    margin:20px 0;
}*/

.card-filtros{
    background:transparent;
    border:none;
    padding:0;
    margin:20px 0;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

/*=============================
      PANEL FILTROS
==============================*/

.panel-filtros{
    display:flex;
    align-items:flex-end;
    gap:20px;
    flex-wrap:wrap;
}

/*=============================
        CAMPOS
==============================*/

.campo{
    display:flex;
    flex-direction:column;
}

.campo label{
    margin-bottom:6px;
    font-size:13px;
    font-weight:600;
    color:#4b5563;
}
.campo input[type="date"]{
    width:115px;
    height:38px;
    padding:0 10px;
}
.campo input,
.campo select{
    width:170px;
    height:40px;
    padding:0 12px;
    border:1px solid #d1d5db;
    border-radius:6px;
    background:#fff;
    font-size:14px;
}
.campo input:focus,
.campo select:focus{
    outline:none;
    border-color:#27B8B5;
    box-shadow:0 0 0 3px rgba(39,184,181,.15);
}
/*=============================
        BOTON
==============================*/

.btn-principal{
    height:40px;
    padding:0 26px;
    border:none;
    border-radius:6px;
    background:#1FB6B5;
    color:#fff;
    font-weight:600;
    cursor:pointer;
    transition:.25s;
    box-shadow:0 2px 8px rgba(39,184,181,.20);
}

.btn-principal:hover{
    background:#189795;
}

.grupo-indicadores{
    display:flex;
    gap:6px;
}

.btn-ind{
    background:transparent;
    border:none;
    color:#6B7280;
    padding:2px 2px;
    font-weight:600;
    border-bottom:3px solid transparent;
    border-radius:0;
}

.btn-ind:hover{
    color:#1FB6B5;
}

.btn-ind.activo{
    color:#1FB6B5;
    border-bottom:2px solid #1FB6B5;
    background:none;
}

/*=============================
    INDICADORES %
==============================*/

.porc-negativo{
    color: #e53935 !important;
    font-weight: 700;
}

.porc-positivo{
     color: #333 !important;
    font-weight: 700;
}

.porc-cero{
    color: #777 !important;
    font-weight: 400;
}

/*=============================
    COLORES DE VARIACIÓN
==============================*/

.porc-positivo{
    color:#1677C8;
    font-weight:700;
}

.porc-negativo{
    color:#DC2626;
    font-weight:700;
}

.porc-cero{
    color:#6B7280;
}

/*=============================
    inmovilizar
==============================*/

.panel-resultado{
    background:#fff;
    border:1px solid #E5E7EB;
    border-radius:10px;
    overflow:auto;
    height:calc(100vh - 260px);
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}

/*==================================================
    TABLA COMPARATIVO - ÚNICA CONFIGURACIÓN
==================================================*/

.panel-resultado{
    background:#fff;
    border:1px solid #E5E7EB;
    border-radius:10px;
    overflow:auto;
    height:calc(100vh - 260px);
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}

#tablaComparativo{
    width:max-content;
    overflow:visible !important;
    border-collapse:separate !important;
    border-spacing:0;
}

/* ===========================
   CABECERA
=========================== */

#tablaComparativo thead th{

    position:sticky;
    top:0;

    background:#fff;

    z-index:100;
}

/* Esquina */

#tablaComparativo thead th.col-descripcion{

    left:0;
    z-index:110;

    width:380px;
    min-width:380px;
    max-width:380px;
}

#tablaComparativo thead tr:first-child th{
    top:0;
}

#tablaComparativo thead tr:nth-child(2) th{
    top:38px;
}




/* ===========================
   PRIMERA COLUMNA
=========================== */

#tablaComparativo tbody td.nivel-0,
#tablaComparativo tbody td.nivel-1,
#tablaComparativo tbody td.nivel-2{

    position:sticky;
    left:0;

    z-index:90;

    width:380px;
    min-width:380px;
    max-width:380px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    box-sizing:border-box;
}

/* Colores */

#tablaComparativo tbody td.nivel-0{
    background:#E8F8F7;
}

#tablaComparativo tbody td.nivel-1{
    background:#F6FBFB;
}

#tablaComparativo tbody td.nivel-2{
    background:#ffffff;
}

/* Selección */

.fila-seleccionada td{
    background:#D9F5F5 !important;
}

.fila-seleccionada td:first-child{
    border-left:5px solid #1FB6B5;
    font-weight:700;
}

.btn-exportar{
    height:40px;
    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 18px;

    background:#1FB6B5;

    color:#fff;

    border:none;

    border-radius:6px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;
}

.btn-exportar:hover{

    background:#185C37;

    transform:translateY(-1px);

    box-shadow:0 4px 10px rgba(0,0,0,.15);

}
/* =========================================
   TOTAL GENERAL
   ========================================= */

.fila-total-general {
    background: #e8f5f5 !important;
    font-weight: 700;
    border-top: 2px solid #1aa6a8 !important;
}

.fila-total-general td {
    font-weight: 700;
    color: #03080a;
    border-top: 2px solid #1aa6a8 !important;
}

.fila-total-general td:first-child {
    color: #041216;
    text-align: left;
    padding-left: 12px;
}

/* Valores numéricos del total */
.fila-total-general .valor {
    font-weight: 700;
}

/* Porcentajes del total */
.fila-total-general .porc-positivo {
    font-weight: 700;
}

.fila-total-general .porc-negativo {
    font-weight: 700;
}

.fila-total-general .porc-cero {
    font-weight: 700;
}
/* =========================================
   TOTAL GENERAL - COLORES DE VARIACIÓN
   ========================================= */

.fila-total-general .porc-positivo {
    color: #333 !important;
    font-weight: 700;
}

.fila-total-general .porc-negativo {
    color: #e53935 !important;
    font-weight: 700;
}

.fila-total-general .porc-cero {
    color: #777 !important;
    font-weight: 700;
}

/* =========================================
   CABECERAS DE LOS MESES
   ========================================= */

#tablaComparativo thead tr:first-child th {
    text-align: center;
    vertical-align: middle;
}

/* Título del mes */
#tablaComparativo thead tr:first-child th:not(:first-child) {
    text-align: center;
    font-weight: 700;
}

/* =========================================
   COLUMNAS % DIF
   ========================================= */

.col-dif {
    border-left: 1px solid #d8e1e5 !important;
    text-align: center !important;
    min-width: 58px;
    font-weight: 700;
}

/* =========================================
   PROYECCIÓN DEL MES
========================================= */

.proyeccion-mes{
    background:#ffffff;
    border:1px solid #DDE7E9;
    border-radius:10px;
    padding:10px 14px;

    width:450px;
    

    box-shadow:0 2px 8px rgba(0,0,0,.04);

    position:relative;
}


/* CABECERA */

.proyeccion-cabecera{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:10px;
}

.proyeccion-titulo{
    font-size:13px;
    font-weight:700;
    color:#0F5F63;
}

.proyeccion-mes-nombre{
    background:#E8F8F7;
    color:#0F5F63;

    font-size:12px;
    font-weight:700;

    padding:4px 9px;
    border-radius:6px;
}


/* DATOS */

.proyeccion-datos{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    width:100%;
}

.proyeccion-item{
    min-width:0;
    padding:0 10px;
    border-right:1px solid #E5E7EB;
}


.proyeccion-item:first-child{
    padding-left:0;
}


.proyeccion-item:last-child{
    border-right:none;
    padding-right:0;
}


.proyeccion-item span{
    display:block;

    font-size:11px;
    font-weight:600;

    color:#4B5563;

    margin-bottom:4px;
}


.proyeccion-item strong{
    display:block;

    font-size:17px;
    font-weight:700;

    color:#16324F;
}


/* PROYECCIÓN DESTACADA */

.proyeccion-item.proyectada strong{
    font-size:21px;
    color:#159447;
}