/* ===================== */
/* 🟥 Mensajes de error */
/* ===================== */
.layoutCalculatorMessage__container {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 80%;
  margin: auto;
  margin-top: 50px;
}

.layoutCalculatorMessage__title {
  color: red;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-top: 20px;
}

/* ===================== */
/* 🟦 Bloque principal */
/* ===================== */
.calculatorLayout {
  margin: calc(var(--navbar-height) + 10px) auto 2rem auto;
  padding: 20px;
  background: #f0f0f0;
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(21, 50, 101, 0.11);
  width: 100%;

  /* ✅ Ajustes clave */
  height: auto;         /* El contenedor crece según el contenido */
  min-height: 100vh;    /* Ocupa al menos toda la altura visible de la pantalla */
  overflow: visible;    /* Permite que el contenido se muestre completo */
  box-sizing: border-box;
}


/* ---------------------------------------------------- */
/* --- Responsive contenedor principal --- */
/* ---------------------------------------------------- */
@media (max-width: 992px) {
    .calculatorLayout {
        padding: 30px;
        margin: calc(var(--navbar-height) + 20px) 10px 1.5rem 10px;
        width: calc(100% - 20px);
        min-height: auto; /* ajusta bien en tablets */
    }
}

@media (max-width: 576px) {
    .calculatorLayout {
        padding: 20px;
        margin: calc(var(--navbar-height) + 15px) 10px 1rem 10px;
        width: calc(100% - 20px);
    }
}

@media (min-width: 1600px) {
    .calculatorLayout {
        padding: 50px;
        margin: calc(var(--navbar-height) + 40px) auto 3rem auto;
    }
}


/* ==============================================================================================================================================================*/
/*                    CONTENIDO DE LAS  5 CARDS DEL ENCABEZADO Y SUS CARACTERISTICAS (2024 AÑO DE CALCULO , FECHA DE CONSULTA , INICIO OPERACION , ETC...)       */
/* ==============================================================================================================================================================*/


/* =============================== */
/* 🔷 Contenedor principal de contenido */
/* =============================== */
/* =============================== */
/* 🔷 BLOQUE PRINCIPAL — estilo tech futurista */
/* =============================== */
.calculatorLayout__content {
  flex: 1 1 140px;
  padding: 1.2rem 1.4rem;
  border-radius: 14px;
  background: linear-gradient(145deg, #fa014d 0%, #d90043 100%); /* 🔹 degradado tecnológico */
  color: white;
  text-align: center;
  min-width: 140px;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  box-sizing: border-box;

  /* 🔹 efectos modernos de profundidad */
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.05), /* borde interno brillante */
    0 4px 10px rgba(0, 0, 0, 0.25);           /* sombra sutil exterior */
  backdrop-filter: blur(6px);                 /* sensación de panel tech */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background 0.4s ease;
}

/* 💫 Hover: efecto “energía” */
.calculatorLayout__content:hover {
  transform: translateY(-5px);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.3),
    0 0 15px rgba(250, 1, 77, 0.4);  /* halo brillante tech */
  border-color: rgba(255, 255, 255, 0.15);
  background: linear-gradient(145deg, #ff1a5c 0%, #c9003e 100%);
}

/* 💎 Clic o presión */
.calculatorLayout__content:active {
  transform: scale(0.97);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* =============================== */
/* 🧠 TIPOGRAFÍA */
/* =============================== */
.calculatorLayout__content h4 {
  font-size: clamp(1rem, 1.3vw, 1.3rem);
  margin: 0 0 0.4rem 0;
  line-height: 1.3;
  letter-spacing: 0.4px;
  text-transform: uppercase;            /* más técnico */
  font-weight: 600;
}

.calculatorLayout__content p {
  font-size: clamp(0.8rem, 1vw, 1rem);
  margin: 0;
  opacity: 0.9;
  letter-spacing: 0.3px;
}

/* =============================== */
/* 🟦 Variante PDF */
/* =============================== */
.calculatorLayout__content--pdf { background-color: white; }





/* ------------------- Fin de la seccion --------------------------------------- */





/* ================================================================================================================================== */
/*                                              Encabezado TITULO Y CARDS     (Primera seccion)                                       */
/* ================================================================================================================================== */

.calculatorLayout__company-row {
    /* ESTRUCTURA Y MEDIDAS (SIN CAMBIOS) */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    min-height: 150px; 
    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;
    padding: 1.5rem; 
}

.calculatorLayout__company-row:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
    z-index: 10;
}

.calculatorLayout__company-header {
  flex: 1;
  min-width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.calculatorLayout__company-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 20px auto 0;
  line-height: 1.4;
}

/* --- Datos básicos (derecha) --- */
.calculatorLayout__company-info-right {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem;
  transform: translateX(-20px);
}

/* -----------RESPONSIVE PARA EL ENCABEZADO TITULO Y CARDS (Primera seccion) ------------------------------------- */

@media (max-width: 768px) {

    .calculatorLayout__company-row {
        align-items: flex-start;
        min-height: unset; 
        padding: 0 10px; 
    }
    
    .calculatorLayout__company-header {
        flex: 1 1 100%; 
        text-align: center;
    }

    .calculatorLayout__company-info-right {
        flex: 1 1 100%;
        justify-content: center; 
        transform: translateX(0); 
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    .calculatorLayout__content {
        flex: 1 1 140px; 
    }
}

@media (max-width: 480px) {

    .calculatorLayout__company-info-right {
        justify-content: flex-start; 
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .calculatorLayout__content {
        flex: 1 1 100%; 
        max-width: 100%; 
    }

    .calculatorLayout__company-title {
        font-size: 1.1rem;
    }
}


/* ---------------------------FIN DEL ENCABEZADO ------------------------------------- */




/* =================================================================================================================================================== */
/*                                                        ENCABEZADO DE CALCULADORA       (segunda seccion)                                            */
/* =================================================================================================================================================== */

.calculatorLayout__grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  background-color: gray;
}

.calculatorLayout__header {
  background-color: #091f34;
  font-family: "Poppins", sans-serif;
  color: white;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 10px;
  width: 100%; 
  margin: 1rem auto; 
}

.calculatorLayout__header-icon {
  height: 35px;
  flex-shrink: 0;
}

.calculatorLayout__header-title {
  font-size: 2rem;
  font-weight: bold;
  white-space: nowrap;
}

/* RESPONSIVE PARA ENCABEZADO DE CALCULADORA (Seccion dos) */


@media (max-width: 768px) {

    .calculatorLayout__header {
        width: calc(100% - 30px);
        padding: 15px 10px; 
        margin-left: 10px;
        margin-right: 20px;
    }
    
    .calculatorLayout__header-icon {
        height: 30px; 
    }
    
    .calculatorLayout__header-title {
        font-size: 1.6rem;
        white-space: normal;
        min-width: 0; 
    }
}


@media (max-width: 480px) {

    .calculatorLayout__header {
        padding: 10px 5px; 
        gap: 0.5rem; 
        margin-left: 10px;
        margin-right: 20px;
        width: calc(100% - 30px);
    }
    
    .calculatorLayout__header-icon {
        height: 25px; 
    }
    
    .calculatorLayout__header-title {
        font-size: 1.4rem;
    }
}


/* ============================================================================================================================================================= */
/*                                  CARDS DE BALANCE GENERAL, ESTADO DE RESULTADOS, INDICADORES FINANCIEROS Y ALERTAS                                           */
/* ============================================================================================================================================================= */


/* ESTRUCTURA PRINCIPAL Y 4 CONTENEDORES */

/* --------------------------- */
/* CONTENEDOR DE LAS 4 TABLAS  */
/* --------------------------- */

.calculatorLayout__cards-container {
    display: grid;
    width: 100%;
    box-sizing: border-box;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem; 
    padding: 1.5rem; 
    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; 
}

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



/* 1. Pantallas Extra Grandes (Extra Large - XL, Monitores) */
@media (min-width: 1200px) {
    .calculatorLayout__cards-container {
        max-width: 1600px; 
        margin: 0 auto; 
    }
}

/* 2. Pantallas Medianas (Medium - MD, Tabletas y Laptops pequeñas) */
@media (max-width: 992px) {
    .calculatorLayout__cards-container {
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
        padding: 0.8rem;
    }
}

/* 3. Pantallas Pequeñas (Small - SM, Tabletas en vertical y Móviles grandes) */
@media (max-width: 768px) {
    .calculatorLayout__cards-container {
        grid-template-columns: 1fr; 
        gap: 1.5rem; 
        padding: 0.5rem;
    }
}

/* 4. Pantallas Muy Pequeñas (Extra Small - XS, Móviles) */
@media (max-width: 576px) {
    .calculatorLayout__cards-container {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0.5rem;
    }
}

/* -------------------- FIN DE CONTENEDOR DE LAS 4 TABLAS ------------------------- */

.calculatorLayout__card--balance {
    background-color: rgb(246, 248, 251); 
    margin: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
    border-radius: 8px; 
    transition: all 0.3s ease-in-out;
}

.calculatorLayout__card--balance:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.calculatorLayout__card--income{

  background-color: rgb(246, 248, 251); 
    margin: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
    border-radius: 8px; 
    transition: all 0.3s ease-in-out;

}

.calculatorLayout__card--income:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}


.calculatorLayout__card--indicators{
  background-color: rgb(246, 248, 251); 
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
    border-radius: 8px; 
    transition: all 0.3s ease-in-out;
  margin: 10px;
  width: 720px;
}

.calculatorLayout__card--indicators:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.calculatorLayout__card--alerts{
  background-color: rgb(246, 248, 251); 
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
  margin:10px;
  border-radius: 8px; 
    transition: all 0.3s ease-in-out;
}

.calculatorLayout__card--alerts:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}


.calculatorLayout__card-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border-bottom: 1px solid #ddd; 
    padding-bottom: 0.5rem;
    background-color: rgb(246, 248, 251); 
}
.calculatorLayout__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 10px;
}
.calculatorLayout__section-title {
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0;
  color: #091f34;
}


.calculatorLayout__card-body {
    overflow-x: auto;
    max-width: 100%;
    text-align: left;
}

/* La clase .calculatorLayout__row ya no es necesaria y se elimina del HTML/Python */


/* ===================== */
/* 🟦 Secciones especiales */
/* ===================== */
.calculatorLayout__dual-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1 rem;
  margin: 2rem 0;
}

.calculatorLayout__indicators {
  text-align: center;
  margin: 2rem 0;
}

.calculatorLayout__alerts {
  margin: 2rem 0;
}

.calculatorLayout__alerts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 20px 20px 20px 20px ;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  
}

.calculatorLayout__highlighted-text {
  font-weight: bold;
}

/* ===================== */
/* 🟦 Tablas */
/* ===================== */

/* Dato faltante */

.calculatorLayout__table-wrapper {
  overflow-x: auto;
  margin: 20px;
}

.calculatorLayout__table {
  width: 100%;
  border-radius: 6px;
  overflow-y: auto;
  margin: 2rem auto;
}

.calculatorLayout__table-header {
  color: white;
  font-weight: bold;
  padding: 12px;
}

.calculatorLayout__table-cell {
  background-color: rgb(9, 31, 52);
  color: white;
  text-align: left;
  min-width: 50px;
  padding: 10px;
  border: solid 1px #ddd;
}

/* ===================== */
/* 🟩 Formulario Inputs */
/* ===================== */
.calculatorLayout-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 3rem auto;
  width: 100%;
  max-width: 800px;
}

.calculatorLayout-form__grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.calculatorLayout-form__input {
  font-size: 13px;
  width: 100%;
  padding: 8px;
}

.calculatorLayout__input-container {
  text-align: center;
  margin: 2rem 0;
}

.calculatorLayout__button {
  background-color: #091f34;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

.calculatorLayout__button:hover {
  background-color: #0d2a4a;
}


/* 3 CARDS DE CONSIDERACIONES */

#calculator-evaluation-result{

  background-color: #F7F7F7;
}

/* =========================== */
/* 🎨 CONTENEDOR PRINCIPAL */
/* =========================== */
.info-box-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 96%;
  margin: 20px 20px 20px 20px;
}

/* =========================== */
/* 🎯 CUADROS DE INFORMACIÓN */
/* =========================== */
.info-box {
  flex: 1;
  background-color: var(--bs-danger-bg-subtle); /* o color que tenías en INFO_BOX */
  border-radius: 8px;
  margin: 30px 60px 30px 60px;
  text-align: center;
  font-weight: bold;
  max-width: 300px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.info-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
}

/* Títulos pequeños */
.small-font {
  font-size: 0.9rem;
  color: #333;
}

/* =========================== */
/* 🎯 VARIANTES (por rol o tipo) */
/* =========================== */

/* SCORE */
.info-box--score {
  background-color: var(--bs-info-bg-subtle);
}

/* CUPO SIN GARANTÍA */
.info-box--quota {
  background-color: var(--bs-success-bg-subtle);
}

/* CUPO CON GARANTÍA */
.info-box--guarantee {
  background-color: var(--bs-warning-bg-subtle);
}

/* =========================== */
/* 📱 RESPONSIVE */
/* =========================== */
@media (max-width: 768px) {
  .info-box-container {
    flex-direction: column;
    align-items: center;
    width: 100%; /* 🔹 usa todo el ancho disponible */
    margin: 0 auto;
    padding: 0 15px; /* 🔹 espacio lateral para que no se peguen a los bordes */
  }

  .info-box {
    width: 100%;              /* 🔹 que ocupe todo el ancho del contenedor */
    max-width: 980px !important; /* 🔹 permite que crezcan más horizontalmente */
    margin: 12px 0;           /* 🔹 separación vertical entre cards */
    font-size: 0.95rem;       /* 🔹 texto ligeramente más grande */
    padding: 15px 10px;       /* 🔹 más cómodas visualmente */
  }
}



/*====================================================*/
/*  SECCION CONTENEDOR DE ALERTAS ( CONSIDERACIONES ) */
/*====================================================*/

.alert-box {
  margin-left: 2em;
  padding: 0em;
}

.alert-box.hidden {
  display: none;
}

#title-end {
  font-size: 22px;
  text-align: center;
}

#text-end {
  font-size: 15px;
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
  text-align: center;
}

#text-end-no-update {
  font-size: 30px;
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
  font-weight: bold;
  text-align: center;
}

/* =============================== */
/* 📦 CONTENEDOR DE ALERTAS */
/* =============================== */
.alert-box {
  margin-left: 2em;
  padding: 0em;
}

.alert-box.hidden {
  display: none;
}

/* =============================== */
/* 🧭 TÍTULOS Y TEXTOS */
/* =============================== */
#title-end {
  font-size: 22px;
  text-align: center;
}

#text-end {
  font-size: 15px;
  margin: 10px 20px;
  text-align: center;
}

#text-end-no-update {
  font-size: 30px;
  margin: 10px 20px;
  font-weight: bold;
  text-align: center;
}

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

/* 🔹 Pantallas pequeñas (móviles hasta 768px) */
@media (max-width: 768px) {
  .alert-box {
    margin-left: 0.5em;        /* menos margen lateral */
    padding: 0.5em;            /* un poco de aire interno */
  }

  #title-end {
    font-size: 18px;           /* título más pequeño */
  }

  #text-end {
    font-size: 14px;           /* texto más legible en pantallas pequeñas */
    margin: 8px 10px;
  }

  #text-end-no-update {
    font-size: 22px;           /* más equilibrado en móvil */
    margin: 8px 10px;
  }
}

/* 💻 Pantallas medianas-grandes (entre 768px y 1400px) */
@media (min-width: 769px) and (max-width: 1399px) {
  #title-end {
    font-size: 20px;
  }

  #text-end {
    font-size: 15px;
  }

  #text-end-no-update {
    font-size: 26px;
  }
}

/* 🖥️ Pantallas grandes (monitores grandes o 4K) */
@media (min-width: 1400px) {
  .alert-box {
    margin-left: 3em;          /* más espacio lateral */
  }

  #title-end {
    font-size: 24px;
  }

  #text-end {
    font-size: 17px;
  }

  #text-end-no-update {
    font-size: 34px;
  }
}


/* CONTENEDOR DEL BOTON DE EXPORTAR INFORME */

#screenshot-button-credit-limit {
  width: 100%;
  height: 400px;
  border: none;
  font-size: 24px;
  /* background-color: #00dba10c; */
  color: black;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
}

#content-main-evaluation {
  background-color: #ffffff;          /* fondo blanco limpio */
  border-radius: 12px;                /* 🔹 bordes redondeados modernos */
  padding: 25px 30px;                 /* espacio interno cómodo */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* sombra suave para dar profundidad */
  border: 1px solid rgba(0, 0, 0, 0.05);      /* borde sutil */
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

/* 🔹 efecto ligero al pasar el mouse (opcional, pero moderno) */
#content-main-evaluation:hover {
  transform: translateY(-3px);                     /* levanta ligeramente el bloque */
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);     /* sombra más profunda */
}


#content-main-evaluation>div {
  width: 100%;
}

.evaluation-container{

  background-color: #f7f7f7;
  padding-bottom: 2px;
}


.export-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #ffe5ed;
  color: black;
  font-weight: 900; /* corregido: sin 'px' */
  margin: 20px 20px 20px 450px !important;
  width: 45%;
  text-align: center;
  padding: 10px 15px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease;
}

/* ✅ Hover con efecto visual elegante */
.export-button:hover {
  background-color: #ffd4df;        /* tono más claro del fondo original */
  transform: translateY(-2px);      /* pequeño movimiento hacia arriba */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* sombra sutil */
}


.export-button__icon { 
  height: 24px;
  width: 24px; 
  margin: 0; }