/**
 * IndicatorsComponent - Estilos encapsulados
 * 
 * Componente reutilizable para mostrar indicadores relevantes desde Excel.
 * Usa scope CSS (.indicators-container) para evitar conflictos con estilos globales.
 * 
 * Páginas que lo usan:
 * - index.html (main__row)
 * - inversionistas.html (inversionistas__tabs__tab--content__row)
 * 
 * @version 1.0.0
 * @date 2026-02-05
 */

/* ============================================
   BASE: Contenedor principal
   ============================================ */

.indicators-container {
  /* El contenedor actúa como namespace para encapsulación */
  /* No necesita estilos especiales, solo agrupa los indicadores */
}

/* ============================================
   SCOPE: index.html (main__row)
   ============================================ */

.indicators-container.main__row {
  margin-top: 10px;
  display: flex;
  justify-content: space-evenly;
}

.indicators-container.main__row .main__row__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  height: 100px;
  justify-content: center;
}

.indicators-container.main__row .main__row__item > p {
  color: #97928a;
  text-align: center; 
  font-family: 'Barlow Condensed'; 
  text-rendering: optimizeLegibility;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 15.71px;
  /* 142.818% */
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0px;
}

.indicators-container.main__row .main__row__item > b {
  color: #d7282f;
  text-align: center;
  font-family: Raleway;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 19.8px;
  /* 61.875% */
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Separadores de imagen (pseudo.svg) */
.indicators-container.main__row > img {
  /* Las imágenes separadoras no necesitan estilos especiales */
  /* Se muestran tal cual entre los items */
}

/* ============================================
   SCOPE: inversionistas.html (main__row)
   ============================================ */

.indicators-container.inversionistas__tabs__tab--content__row {
  min-width: 1200px;
  width: 100%;
  display: flex;
  margin: 20px 0px;
}

.indicators-container.inversionistas__tabs__tab--content__row .inversionistas__tabs__tab--content__row__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100px;
  justify-content: space-evenly;
}

/* El componente genera <b> para valores */
.indicators-container.inversionistas__tabs__tab--content__row .inversionistas__tabs__tab--content__row__item > b {
  color: #d7282f;
  text-align: center;
  font-family: Raleway;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 19.8px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* El componente genera <p> para descripciones */
.indicators-container.inversionistas__tabs__tab--content__row .inversionistas__tabs__tab--content__row__item > p {
  color: #97928A;
  text-align: center;
  font-family: 'Barlow Condensed';
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 15.71px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Separadores */
.indicators-container.inversionistas__tabs__tab--content__row .inversionistas__tabs__tab--content__row__splitter {
  height: fit-content;
  width: 1px;
  height: 80px;
  background-color: #545859;
}

/* ============================================
   SCOPE: inversionistas.html - Footer/Responsive
   ============================================ */

.indicators-container.inver_row {
  margin: 0 auto;
  width: 90%;
  display: flex;
  flex-direction: column;
  padding: 40px 0;
}

.indicators-container.inver_row .inver_row__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

/* El componente genera <b> para valores - estilo como span_title_text f-size-32 */
.indicators-container.inver_row .inver_row__item > b {
  color: #d7282f;
  font-family: Raleway;
  font-size: 32px !important;
  font-style: normal;
  font-weight: 700;
  line-height: 19.8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 10px;
  width: 100%;
  text-align: center;
}

/* El componente genera <p> para descripciones - estilo como p_body_text--2 */
.indicators-container.inver_row .inver_row__item > p {
  color: #97928A;
  text-align: center;
  font-family: 'Barlow Condensed';
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 15.71px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ============================================
   RESPONSIVE: Mobile y Tablet
   ============================================ */

@media (max-width: 1000px) {
  /* index.html: Cambiar a grid en mobile */
  .indicators-container.main__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    margin-top: 50px;
  }
  
  /* Ocultar separadores de imagen en mobile */
  .indicators-container.main__row > img {
    display: none;
  }
  
  .indicators-container.main__row .main__row__item > b {
    line-height: 40px;
  }
}

@media (max-width: 750px) {
  /* inversionistas.html: Stack vertical en mobile */
  .indicators-container.inversionistas__tabs__tab--content__row {
    flex-direction: column;
    gap: 20px;
  }
  
  /* Ocultar separadores en mobile */
  .indicators-container .inversionistas__tabs__tab--content__row__splitter {
    display: none;
  }
}

/* ============================================
   COMPATIBILIDAD: Safari
   ============================================ */

/* 🔧 Solo para Safari: ajustes específicos */
@media not all and (min-resolution: .001dpcm) {
  @supports (-webkit-appearance: none) {
    .indicators-container.main__row .main__row__item > b {
      font-family: 'Raleway', sans-serif;
      letter-spacing: 0.5px;
    }
    
    .indicators-container.main__row .main__row__item > p {
      font-family: 'Barlow Condensed', sans-serif;
      letter-spacing: 0.5px;
    }
  }
}