@charset "UTF-8";

.table td .progress_custom_1 {
    height: 3px;
    width: 240px;
    margin: 0;
}

.progress_custom_1 {
    overflow: visible;
}

.progress_custom_1 {
    --bs-progress-height: 3px;
    --bs-progress-font-size: 0.75rem;
    --bs-progress-bg: #e9ecef;
    --bs-progress-border-radius: 0.5rem;
    --bs-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --bs-progress-bar-color: #fff;
    --bs-progress-bar-bg: #cb0c9f;
    --bs-progress-bar-transition: width 0.6s ease;
    display: flex;
    height: var(--bs-progress-height);
    overflow: hidden;
    font-size: var(--bs-progress-font-size);
    background-color: var(--bs-progress-bg);
    border-radius: var(--bs-progress-border-radius);
}


.table td .progress_custom_2 {
    height: 30px;
    width: 3px;
    margin: 0;
}

.progress_custom_2 {
    overflow: visible;
}

.progress_custom_2 {
    --bs-progress-height: 3px;
    --bs-progress-font-size: 0.75rem;
    --bs-progress-bg: #ccc;
    --bs-progress-border-radius: 0.5rem;
    --bs-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --bs-progress-bar-color: #fff;
    --bs-progress-bar-bg: #cb0c9f;
    --bs-progress-bar-transition: width 0.6s ease;
    display: flex;
    height: var(--bs-progress-height);
    overflow: hidden;
    font-size: var(--bs-progress-font-size);
    background-color: var(--bs-progress-bg);
    border-radius: var(--bs-progress-border-radius);
}


.table td .progress_custom_3 {
    height: 3px;
    width: 240px;
    margin: 0;
}

.progress_custom_3 {
    overflow: visible;
}

.progress_custom_3 {
    --bs-progress-height: 3px;
    --bs-progress-font-size: 0.75rem;
    --bs-progress-bg: #ccc;
    --bs-progress-border-radius: 0.5rem;
    --bs-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --bs-progress-bar-color: #fff;
    --bs-progress-bar-bg: #cb0c9f;
    --bs-progress-bar-transition: width 0.6s ease;
    display: flex;
    height: var(--bs-progress-height);
    overflow: hidden;
    font-size: var(--bs-progress-font-size);
    background-color: var(--bs-progress-bg);
    border-radius: var(--bs-progress-border-radius);
}



.progress-bar_custom {
    height: 6px;
    border-radius: 0.375rem;
    margin-top: -0.095rem;
    margin-left: -1px;
}


.progress-bar_custom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--bs-progress-bar-color);
    text-align: center;
    white-space: nowrap;
    background-color: var(--bs-progress-bar-bg);
    transition: var(--bs-progress-bar-transition);
}

/* estilo para mostrar los datos de la tabla dinamica  */

.variableFont {
  font-size: 1rem;
  font-weight: 800;
}

.variableFontDif {
  font-size: 0.8em; 
  max-width: max-content;
  margin: auto;
}

.variableFontDate {
  font-size: 0.55rem;
}




.tooltipC {
  position: relative;
  display: inline-block;
}

.tooltiptextC {
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 10px;
  max-width: 200px; /* Establece un ancho máximo para limitar el tooltip */
  word-wrap: break-word; /* Asegura que las palabras largas se rompan */
  white-space: normal; /* Permite que el texto pase a múltiples líneas */
}


.tooltipC .tooltiptextC {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 1px 8px;
  position: absolute;
  z-index: 3 !important;
  bottom: 110%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltipC .tooltiptextC::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltipC:hover .tooltiptextC {
  visibility: visible;
  opacity: 1;
}




.tooltipC .tooltiptextD {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 3 !important;
  top: 130%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltipC .tooltiptextD::after {
  content: "";
  position: absolute;
  bottom: 100%; /* Cambia `top` a `bottom` para mover la flecha hacia arriba */
  left: 50%;
  transform: translateX(-50%); /* Para centrar la flecha */
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent; /* Flecha apunta hacia abajo */
}

.tooltipC:hover .tooltiptextD {
  visibility: visible;
  opacity: 1;
}


.normal{
  white-space: normal !important;
}

/* Estilo de las celdas en la primera columna */
.sticky-table th:first-child,
.sticky-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  border-radius: .5em .5em .5em .5em;
}


/* Estilo de las celdas en la primera fila */
.sticky-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important; /* Coloca las celdas en la parte superior de las demás */
}

.sidebarRedMed {
  background-color: #ffffff !important;
}

.sidebarRedMed-dark {
  background-color: #131728 !important;
}



/* mapas*/
.mapPricipalGrande{
    height: 79vh !important; 
    border-radius: 1rem; 
}

.mapPricipalMovil{
    height: 70vh !important;
    border-radius: 1rem; 
}

.table-responsive-red-med {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    height: 72vh;
}

.table-responsive-red-med-gph {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


.colorDateRetraso {
    color: #d61010;
}

   
.justificado {
    text-align: justify;
}


.graphic_rose {
	display: grid;
	align-content: space-between;
}


.fixedControlMapa {
	
	position: relative !important;
    right: unset !important;
    top: unset !important;
    height: unset !important;
    left: unset !important;
    transform: unset !important;
    width: unset !important;
    border-radius: unset !important;
    padding: unset !important;
    transition: unset !important;
    z-index: unset !important;
	
}



/* --------------------------------------------------------------
   Soft‑UI Card Styles 
   -------------------------------------------------------------- */

#simulaciones-cards .card-sdp {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

#simulaciones-cards .card-header img {
    width: 80% !important;
    /*aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;*/
}

#simulaciones-cards video {
    width: 95% !important;
    aspect-ratio: 16 / 9 !important;
    /*object-fit: cover !important;*/
}

#simulaciones-cards .card-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

#simulaciones-cards .card-body .name:last-child {
    margin-top: auto !important;
}


/* ========== CONTENEDOR DE 2 COLUMNAS ========== */
.accordion-body .columns {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* 2 columnas responsivas */
.accordion-body .column {
    flex: 1 1 calc(50% - 1.5rem);
    display: flex;
    flex-direction: column;
}

/* En móvil → 1 columna */
@media (max-width: 768px) {
    .accordion-body .column {
        flex: 1 1 100%;
    }
}

/* ========== FIGURE OCUPA TODO EL ESPACIO ========== */
.accordion-body .figure {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ========== VIDEO RESPONSIVO CON PROPORCIÓN ========== */
.accordion-body .video-responsive {
    width: 100%;
    aspect-ratio: 16/9;  /* puedes poner 4/3 si lo prefieres */
    object-fit: cover;   /* mantiene proporción sin deformar */
    border-radius: 12px;
}

/* ========== PIE DE FIGURA ABAJO ========== */
.accordion-body .figure-caption {
    margin-top: auto;
    text-align: center;
}


/* ========== GRID GENERAL ========== */
#far-plots .columns {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

/* ========== ITEMS DE 2 COLUMNAS ========== */
#far-plots .column.col-6 {
    flex: 1 1 calc(50% - 1.5rem);
    display: flex;
    flex-direction: column;
}

/* ========== ITEMS GRANDES CENTRADOS (1 COLUMNA) ========== */
#far-plots .column.col-10 {
    flex: 1 1 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
}

/* ========== FIGURE FLEX PARA IGUALAR ALTURAS ========== */
#far-plots .figure {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ========== IMÁGENES Y VIDEOS SIMÉTRICOS ========== */
#far-plots img,
#far-plots video {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: contain;
    border-radius: 12px;
}

/* TEXTO FINAL PEGADO ABAJO */
#far-plots .figure-caption {
    margin-top: auto;
    text-align: center;
    padding-top: 0.5rem;
}

.legend-speed {
  font-family: Arial, sans-serif;
  font-size: 10px;
  line-height: 1.1;
  background: #fff;
  padding: 4px 6px;
  border: 1px solid #ccc;
  width: 120px;
  /* height: 80px;*/
}

.legend-title {
  font-weight: bold;
  text-align: center;
  margin-bottom: 3px;
}

.legend-row {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.legend-color {
  width: 12px;
  height: 8px;
  margin-right: 6px;
  border: 1px solid #555;
}