/* ===============================================================================*/
/*                        TABLA DE BALANCE GENERAL                                */
/* ===============================================================================*/

#calculator-charts-table {
    margin: 20px 20px 20px 20px; 
    width: 680px; 
    background-color: yellow;
    box-shadow: 0px 4px 10px rgba(21, 50, 101, 0.11);
    font-size: 13px;
    display: inline-block; 
}

#calculator-charts-table .dash-header {
    background-color: white;
    color: #00172D;
    font-weight: bold;
    padding: 12px;
}

#calculator-charts-table .dash-cell {
    background-color: var(--bs-gray-200);
    color: #00172D;
    text-align: right;
    min-width: 50px;
    width: 40px;
    font-family: sans-serif;
    padding: 10px;
    border: solid 4px #F6F8FB;
}

/* Responsive para la tabla de balance general */

@media (max-width: 768px) {
    #calculator-charts-table {
        width: 90%; 
        margin: 40px auto 10px auto; 
        display: block; 
    }
}

@media (max-width: 480px) {
    #calculator-charts-table {
        width: 95%; 
        margin: 40px auto 10px auto;
        display: block;
        font-size: 12px;
    }
    #calculator-charts-table .dash-cell {
        padding: 8px; 
    }
}

/*====================================================================================================== /*
/*                            TABLA DE ESTADO DE RESULTADOS                                              */
/*====================================================================================================== /*



/* Corresponde a TABLE_STYLE_TWO */
#income-statements-table {
    max-width: 1200px; 
    width: 90%; 
    overflow-x: auto; 
    overflow-y: auto;
    background-color: yellow;
    box-shadow: 0px 4px 10px rgba(21, 50, 101, 0.11);
    font-size: 13px;
    display: block; 
    margin: 20px auto; 
}

/* Corresponde a TABLE_HEADER_STYLE */
#income-statements-table .dash-header {
    background-color: white;
    color: #00172D;
    font-weight: bold;
    padding: 12px;
}

/* Corresponde a TABLE_CELL_STYLE */
#income-statements-table .dash-cell {
    background-color: var(--bs-gray-200);
    color: #00172D;
    text-align: right;
    min-width: 50px; 
    width: 40px; 
    font-family: sans-serif;
    padding: 10px;
    border: solid 4px #F6F8FB;
}

/* ---------------------------------------------------- */
/* --- Responsividad Estado de resultados           --- */
/* ---------------------------------------------------- */

@media (max-width: 768px) {
    
    #income-statements-table {
        width: 95%; 
        margin: 10px auto; 
        font-size: 12px; 
        box-shadow: 0px 2px 5px rgba(21, 50, 101, 0.1); 
    }
    
    #income-statements-table .dash-header,
    #income-statements-table .dash-cell {
        padding: 8px;
    }
}


@media (max-width: 480px) {
    
    #income-statements-table {
        width: 100%; 
        margin: 5px 0;
    }
    
    #income-statements-table .dash-cell {
        min-width: 40px;
        width: 30px; 
        font-size: 11px;
    }
    
    #income-statements-table .dash-header,
    #income-statements-table .dash-cell {
        padding: 6px;
        border: solid 2px #F6F8FB;
    }
}

@media (min-width: 1600px) {
    #income-statements-table {
        max-width: 1500px; 
        font-size: 14px; 
    }
}



/*====================================================================================================== /*
/*                            TABLA DE INDICADORES FINANCIEROS                                           */
/*====================================================================================================== /*


/* --- Estilos Base (Pantallas Grandes/Desktop) --- */

/* Corresponde a TABLE_STYLE_3 */
#financial-indicators-table {
    /* CAMBIOS: Reemplazamos el 'width: 700px !important' por max-width y width porcentual */
    max-width: 1200px; /* Permite que se estire hasta 1200px en monitores grandes */
    width: 90%; /* Ocupa el 90% del contenedor */
    
    /* CLAVE para responsive: Desplazamiento horizontal para tablas anchas */
    overflow-x: auto; 
    
    overflow-y: auto !important;
    margin: 10px auto; /* Centra la tabla horizontalmente */
    box-shadow: 0px 4px 10px rgba(21, 50, 101, 0.11) !important;
    height: 620px !important; /* Mantenemos la altura fija */
    display: block !important; /* Cambiado a 'block' para ocupar el ancho disponible */
}

/* Corresponde a TABLE_HEADER_STYLE (Base) */
#financial-indicators-table .dash-header {
    background-color: white !important;
    color: #00172D !important;
    font-weight: bold !important;
    padding: 12px !important;
}

/* Override para el style_header={'textAlign': 'left'} */
#financial-indicators-table .dash-header div {
    text-align: left !important; 
}


/* Corresponde a TABLE_CELL_STYLE_3 */
#financial-indicators-table .dash-cell {
    background-color: white ;
    color: #00172D !important;
    text-align: left !important;
    /* Mantenemos el min-width para evitar que la celda se comprima demasiado */
    min-width: 100px !important; /* Aumentado de 50px a 100px para mejor legibilidad móvil */
    width: 150px !important; /* Ajustado para un mejor ajuste en la vista base */
    font-family: sans-serif !important;
    padding: 10px !important;
    border: solid 1px #E0E3E8 !important; /* Gris suave */
}

/* ---------------------------------------------------- */
/* --- Reglas @media para Responsividad --- */
/* ---------------------------------------------------- */

/* 1. Estilos para pantallas medianas/pequeñas (Tablet y Móviles en horizontal) */
@media (max-width: 992px) {
    
    #financial-indicators-table {
        width: 95%; 
        margin: 10px auto; 
        height: 500px !important; /* Reducimos la altura para pantallas más pequeñas */
    }
    
    /* Reducimos el padding y el tamaño de la fuente para más compacidad */
    #financial-indicators-table .dash-header,
    #financial-indicators-table .dash-cell {
        padding: 8px !important;
    }
}


/* 2. Estilos para pantallas pequeñas (Móviles) */
@media (max-width: 576px) {
    
    #financial-indicators-table {
        width: 100%; /* Ocupa todo el ancho */
        margin: 5px 0;
        height: 450px !important;
        font-size: 12px; /* Reducimos el tamaño de la fuente */
    }
    
    /* Hacemos las celdas más estrechas para que quepan más en la vista inicial */
    #financial-indicators-table .dash-cell {
        min-width: 80px !important;
        width: 120px !important;
        padding: 6px !important;
    }
    
    /* Compactamos el encabezado */
    #financial-indicators-table .dash-header {
        padding: 6px !important;
        font-size: 13px !important;
    }
}

/* 3. Estilos para pantallas extra grandes (Monitores 4K/Ultra-Wide) */
@media (min-width: 1600px) {
    #financial-indicators-table {
        max-width: 1500px; /* Permitimos que se estire hasta 1500px */
        margin: 30px auto;
        height: 700px !important; /* Aumentamos la altura */
        font-size: 15px; /* Aumentamos el tamaño de fuente */
    }
    
    #financial-indicators-table .dash-cell {
        padding: 14px !important;
    }
}

/* ================================================================================= */
/*                SECCION DE CONDICIONES DE EVALUACION                               */
/* ================================================================================= */


/*
 * BEM BLOCK: evaluation__box-one
 * Contenedor que agrupa las condiciones de evaluación y el botón de reset
 */
.evaluation__box-one {
    background-color: #f7f7f7;
}

/* * BEM ELEMENTS: evaluation__icon, evaluation__title
 */
.evaluation__icon {
    margin: 20px;
}

.evaluation__title {
    margin: 20px;
}

#title-clients-information{
    text-align: center;
    width: 100%;
    margin: 10px;
}

#content-input-scoring {
    display: flex;
    justify-content: center;
    background-color: #f7f7f7;
    margin: 20px 20px 20px 20px; /* Márgenes laterales visibles */
    box-sizing: border-box;
}

/* BLOQUE PRINCIPAL */
.scoring {
    display: flex;
    flex-direction: column;
    width: 96%;
    background-color: #08e78e;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
    border-radius: 10px;
    box-sizing: border-box;
    transform: translateX(10px) !important;
    transition: 
        transform 0.25s ease, 
        box-shadow 0.25s ease, 
        background-color 0.25s ease;  /* transición suave */
}

/* ✨ Hover moderno */
.scoring:hover {
    transform: translateX(10px) translateY(-4px); /* pequeño levantamiento */
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.25); /* sombra más profunda */
    background-color: #0af59d; /* tono un poco más vivo para dar sensación de "activo" */
}



/*
 * BEM ELEMENTS: Títulos y subtítulos
 */
.scoring__main-title {
    width: 90%;
    text-align: center;
    font-weight: bold;
    font-size: 25px;
    margin: 20px;
}

/* ✅ Responsive para pantallas medianas (tablets) */
@media (max-width: 992px) {
    .scoring__main-title {
        font-size: 22px;
        margin: 15px;
        width: 95%;
    }
}

/* ✅ Responsive para pantallas pequeñas (celulares) */
@media (max-width: 600px) {
    .scoring__main-title {
        font-size: 18px;
        margin: 10px auto;
        width: 100%;
        text-align: center;
    }
}

/* ✅ Extra pequeño (pantallas < 400px, opcional) */
@media (max-width: 400px) {
    .scoring__main-title {
        font-size: 16px;
        margin: 8px auto;
        width: 100%;
    }
}


.scoring__subtitle-margenes {
    width: 10%;
    text-align: right;
    font-weight: bold;
    margin-left: 300px;
    transform: translateX(-75px);

}


.scoring__subtitle-dias {
    width: 60% !important;                   
    text-align: right !important;
    font-weight: bold !important;
        margin-left: 100px;
}

/* ✅ Tablets grandes (≤1200px) */
@media (max-width: 1200px) {
    .scoring__subtitle-dias {
        width: 25% !important;
        margin: 10px 10px 10px 40px !important;
    }
}

/* ✅ Tablets pequeñas (≤992px) */
@media (max-width: 992px) {
    .scoring__subtitle-dias {
        width: 28% !important;
        margin: 10px 10px 10px 30px !important;
    }
}

/* ✅ Celulares grandes (≤768px) */
@media (max-width: 768px) {
    .scoring__subtitle-dias {
        width: 35% !important;
        margin: 10px 10px 10px 20px !important;
    }
}

/* ✅ Celulares pequeños (≤576px) */
@media (max-width: 576px) {
    .scoring__subtitle-dias {
        width: 45% !important;
        margin: 8px 8px 8px 15px !important;
        font-size: 14px !important;
    }
}

/* ✅ Pantallas muy pequeñas (≤400px) */
@media (max-width: 400px) {
    .scoring__subtitle-dias {
        width: 55% !important;
        margin: 6px 6px 6px 10px !important;
        font-size: 13px !important;
    }
}



.scoring__subtitle--left-perdida {
    width: 50%; 
    font-weight: bold;
    margin-right: 120px !important;
}

.scoring__subtitle--left-ventas {
    width: 20%; 
    font-weight: bold ; 
    margin-right: 180px !important;
}

.scoring__subtitle--left-solvencia {
    width: 50%; 
    text-align: center;
    font-weight: bold;
     margin-right: 10px !important;
}

.scoring__other-title {
    width: 100%;
    text-align: left;
    display: none; /* Mantener oculto */
}

/*
 * BEM ELEMENTS: Contenedores de filas principales
 */
.scoring__row-titles-and-input {
    width: 90%;
    display: flex;
    justify-content: space-between;
}

/* ✅ Tablets medianas (pantallas ≤ 1200px) */
@media (max-width: 1200px) {
    .scoring__row-titles-and-input {
        width: 88%;
        margin-left: 6em;
        gap: 1em; /* pequeño espacio entre los elementos */
    }
}

/* ✅ Tablets pequeñas (pantallas ≤ 992px) */
@media (max-width: 992px) {
    .scoring__row-titles-and-input {
        width: 92%;
        margin-left: 4em;
        gap: 0.8em;
    }
}

/* ✅ Celulares grandes (pantallas ≤ 768px) */
@media (max-width: 768px) {
    .scoring__row-titles-and-input {
        width: 96%;
        margin-left: 2em;
        gap: 0.6em;
    }
}

/* ✅ Celulares pequeños (pantallas ≤ 576px) */
@media (max-width: 576px) {
    .scoring__row-titles-and-input {

        width: 100%;
        margin-left: 1em;
        gap: 0.5em;
    }
}

/* ✅ Pantallas muy pequeñas (≤ 400px) */
@media (max-width: 400px) {
    .scoring__row-titles-and-input {
        width: 100%;
        margin-left: 0.5em;
        gap: 0.4em;
    }
}






.scoring__row-titles-bottom {
    width: 96%;
    display: flex;
    justify-content: space-between;
}

.scoring__section {
    width: 94%;
    display: flex;
    justify-content: space-between;
    margin: 20px 20px 20px 30px;
}

.scoring__section--hidden {
    width: 100%;
    display: none; /* Oculto */
    justify-content: space-between;
}

/*
 * BEM ELEMENTS: Items y Inputs
 */
.scoring__item {
    display: inline-block;
    margin: 10px;
    text-align: center;
}

.scoring__label {
    font-size: 13px;
    width: 100%;
    /* margin-bottom: 1px; se mantiene en style para mantener la estructura */
}

.scoring__label--percentage {
    font-size: 13px;
    width: 10%;
    text-align: right !important;
    margin-left: 200px !important;
}



/* Estilos de inputs (dcc.Input) */
.scoring__input {
    font-size: 13px;
    width: 100%;
    /* max-length y size se mantienen como atributos del componente Dash */
}

.scoring__input--percentage {
    font-size: 13px;
    width: 100%;
    
}


.scoring__input--small {
    font-size: 13px;
    width: 100%;
}

.scoring__input--large {
    font-size: 13px;
    width: 100%;
}


/* =============================================================================== */
/*                              CONTENEDOR DE INFORMACION CLIENTES                 */
/* =============================================================================== */

/* ===========================
   CONTENEDOR PRINCIPAL
=========================== */

.container-clients-information {
    width: 96%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
    background-color: #f7f7f7; 
    border-radius: 12px; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 
                0 0 0 1px rgba(0, 0, 0, 0.05); 
    transition: all 0.3s ease-in-out;
}

.container-clients-information:hover{
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); 

}

/* ===========================
   PANTALLAS GRANDES (>= 1400px)
=========================== */
@media (min-width: 1400px) {
    .container-clients-information {
        width: 96%;              /* Más centrado en pantallas muy anchas */
        margin: 30px auto;       /* Centrado horizontal */
        padding: 20px 40px;      /* Más espacio interno */
        border-radius: 10px;
    }
}

/* ===========================
   PANTALLAS MEDIANAS (>= 992px y < 1400px)
=========================== */
@media (min-width: 992px) and (max-width: 1399px) {
    .container-clients-information {
        width: 90%;
        margin: 25px auto;
        padding: 15px 30px;
        border-radius: 8px;
    }
}

/* ===========================
   TABLETS (>= 768px y < 992px)
=========================== */
@media (min-width: 768px) and (max-width: 991px) {
    .container-clients-information {
        width: 95%;
        margin: 15px auto;
        padding: 10px 20px;
        border-radius: 6px;
    }
}

/* ===========================
   MÓVILES GRANDES (>= 576px y < 768px)
=========================== */
@media (min-width: 576px) and (max-width: 767px) {
    .container-clients-information {
        width: 98%;
        margin: 10px auto;
        padding: 8px 15px;
        border-radius: 5px;
    }
}

/* ===========================
   MÓVILES PEQUEÑOS (< 576px)
=========================== */
@media (max-width: 575px) {
    .container-clients-information {
        width: 100%;
        margin: 5px auto;
        padding: 5px 10px;
        border-radius: 4px;
    }
}


/* ===========================
   TÍTULO
=========================== */
#clients-information-header {
    width: 100%;
    text-align: center;
    background-color: var(--bs-light, #0b7def);
    border-bottom: 2px solid #f6f8fb;
    padding: 1em 0;
}

#title-clients-information {
    font-size: 1.1rem;
    font-weight: 600;
    color: #343a40;
    margin: 0;
}

/* ===========================
   BLOQUE PRINCIPAL (2do contenedor)
=========================== */
/* ===========================
   CONTENEDOR PRINCIPAL
=========================== */
#clients-information-main {
    width: 100%;
    display: flex;
    flex-direction: row;              /* ⬅️ ahora en fila */
    justify-content: space-between;
    align-items: flex-start;
    gap: 2em;                         /* separación entre columnas */
    padding: 1.5em 6%;
    box-sizing: border-box;
    background-color: #f6f8fb;
    flex-wrap: wrap;         
}

/* ===========================
   CADA BLOQUE
=========================== */
.clients-info-item {
    flex: 1 1 30%;                    /* cada bloque ocupa ~1/3 del ancho */
    min-width: 280px;                 /* evita que se hagan muy estrechos */
    padding: 1%;
    box-sizing: border-box;
}

/* ===========================
   LABELS E INPUTS
=========================== */
.clients-info-item label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.4em;
}

.clients-info-item input[type="text"] {
    width: 100%;
    padding: 0.5em;
    font-size: 0.9rem;
    border: 1px solid #ccc;
    border-radius: 6px;
}

/* ===========================
   RESPONSIVE
=========================== */

/* Tablets */
@media (max-width: 992px) {
    #clients-information-main {
        gap: 1.5em;
        padding: 1em 4%;
    }
}

/* Móviles grandes */
@media (max-width: 768px) {
    #clients-information-main {
        flex-direction: column;       /* ⬅️ apilados verticalmente */
        gap: 1em;
    }

    .clients-info-item {
        width: 100%;
        min-width: auto;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {
    #clients-information-main {
        padding: 0.5em 2%;
    }

    .clients-info-item label {
        font-size: 0.85rem;
    }
}


/* Labels e inputs */
#clients-information-main label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    display: block;
    margin-bottom: 0.4em;
}

#clients-information-main input[type="text"] {
    width: 100%;
    padding: 0.5em;
    font-size: 0.9rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
}

/* RadioItems inline */
#clients-information-main .Select-control,
#clients-information-main .dash-radio-items {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

/* ===========================
   BLOQUE INFERIOR (3er contenedor)
=========================== */
#clients-information-row-2 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 5em;
    padding: 1.5em 5%;
    box-sizing: border-box;
    background-color: var(--bs-light, #800015);
    border-top: 1px solid #dee2e6;
}

#clients-information-row-2 label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
}

#clients-information-row-2 .dash-radio-items {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

/* ===========================
   RESPONSIVE DESIGN
=========================== */

/* Tablets */
@media (max-width: 992px) {
    #clients-information-main {
        padding: 1.5em 3%;
    }

    #clients-information-row-2 {
        gap: 2em;
        flex-direction: column;
        align-items: center;
    }

    #input-calculator-strong,
    #input-calculator {
        width: 100% !important;
    }
}

/* Móviles grandes */
@media (max-width: 768px) {
    #title-clients-information {
        font-size: 1rem;
    }

    #clients-information-main label,
    #clients-information-row-2 label {
        font-size: 0.85rem;
    }

    #clients-information-main input[type="text"] {
        font-size: 0.85rem;
    }

    #clients-information-row-2 {
        padding: 1em 3%;
        gap: 1.5em;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {
    .container-clients-information {
        padding: 0.5em;
    }

    #clients-information-main {
        padding: 1em 2%;
    }

    #clients-information-row-2 {
        flex-direction: column;
        gap: 1em;
    }

    #clients-information-row-2 label {
        text-align: left;
    }
}


/* BOTÓN: Volver a los parámetros por default */
.evaluation__reset-button {
  background-color: #00172d;   /* color principal */
  color: white;
  width: 93% !important;
  margin: 20px 20px 20px 60px;
  padding: 10px 15px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);  /* sombra sutil base */
  transition:
    background-color 0.3s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* Hover con movimiento y contraste */
.evaluation__reset-button:hover {
  background-color: #003f7d; /* tono más claro para contraste */
  transform: translateY(-3px); /* pequeño movimiento hacia arriba */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* sombra más pronunciada */
}

/* Clase para ocultar cuando sea EXECUTIVE */
.hidden {
  display: none !important;
}

/* ===================== */
/* 🔹 RESPONSIVE DESIGN  */
/* ===================== */

/* 📱 Pantallas pequeñas (móviles y tablets) */
@media (max-width: 768px) {
  .evaluation__reset-button {
    width: 90% !important;               
    margin: 15px auto 60px 15px !important;                   
    padding: 12px 18px;
    font-size: 14px;
    border-radius: 8px;
    display: block;
  }

  /* Asegura que el contenedor padre tenga espacio lateral */
  .evaluation__reset-button-container {
    padding: 0 15px;                     
  }

  .evaluation__reset-button:hover {
    transform: translateY(-2px);
  }
}

/* 📱 Pantallas muy pequeñas (teléfonos pequeños, ≤480px) */
@media (max-width: 480px) {
  .evaluation__reset-button {
    width: 95% !important;              
    margin: 10px auto 50px 100px !important; 
    padding: 14px 20px;                 
    font-size: 13px;                    
    border-radius: 10px;                
  }

  .evaluation__reset-button-container {
    padding: 0 10px;                    
  }

  .evaluation__reset-button:hover {
    transform: translateY(-1px);        
  }
}


/* 💻 Pantallas grandes (monitores grandes o 4K) */
@media (min-width: 1400px) {
  .evaluation__reset-button {
    width: 93% !important;
    margin: 25px auto 25px 60px;        
    font-size: 16px;
    padding: 12px 20px;
  }
}