@import url("base_colores.css");

/* Ver Detalle */

.verDetalle {
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--color-rojo) !important;
  padding: 1.2% 1.4% 1.2% 1.4% !important;
  font-weight: bold;
  text-decoration: none !important;
}

/* Aviso */
.aviso {
  background-color: var(--color-gris-claro);
  padding: 0 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 !important;
}

.icon-bold {
  font-size: 1.5rem;
  font-weight: bold !important;
  align-items: center;
}

.card-body {
  border: none;
}

.card-body .d-flex {
  line-height: 0.2;
  border-bottom: 3px solid var(--color-gris-claro);
}

.c-success {
  color: var(--color-verde-progressbar) !important; /* Verde */
}

.c-warning {
  color: var(--color-ambar-progressbar) !important; /* Amarillo */
  margin-right: 5px !important;
}

.c-danger {
  color: var(--color-rojo-progressbar) !important; /* Rojo */
}

.simulacion {
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--color-rojo) !important;
  padding: 1.2% 1.4% 1.2% 1.4% !important;
  font-weight: bold;
  text-decoration: none !important;
  background:none;
}

/* Indice */
.indice {
  background-color: var(--color-rojo);
  height: 180px !important;
  flex-direction: column !important;
  justify-content: center !important;
  display: none;
  width: 150px;
}

.indice-item {
  text-align: left;
  width: 100%;
  flex: 1;
  padding: 0;
  height: 100%;
  flex-direction: column !important;
  justify-content: center !important;
  display: flex;
  position: relative;
}

.indice-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background-color: var(--color-blanco);
}


.indice-item:last-child::after {
    content: none;
}

.indice-link {
  color: var(--color-blanco);
  text-transform: uppercase;
  font-size: 1rem;
  text-decoration: none;
  display: block;
}

.indice-link:hover {
  font-weight: bold;
  color: var(--color-blanco);
}

#flecha {
  font-size: 1rem;
  margin-left: 10px;
}

/* Navegación */

.navlink-inactive {
  color: var(--color-rojo);
}

.navlink-inactive:hover {
  color: var(--color-rojo);
}

/* Navegación Fechas*/

.nav-pills {
  border-bottom: 2px solid var(--color-negro);
  flex-wrap: wrap;
  
}

.nav-pills .nav-link {
  border-radius: 0;
  color: var(--color-negro);
  margin: 0 10px;
  padding: 10px 20px;
  text-align: center;
  background-color: transparent;
  border-bottom: 2px solid transparent;
}

.nav-pills .nav-link.active {
  border-bottom: 2px solid transparent;
  color: var(--color-negro);
  font-weight: bold;
  background-color: transparent !important;
}

.nav-pills .nav-link:hover {
  color: var(--color-rojo);
}

/* Contenedor del mapa */
#mapContainer { position: relative; }
#olMap {
  width: 100%;
  height: 520px;              /* ajusta si quieres otra altura */
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

/* ——— Leyenda inside map ——— */
.map-legend {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255,255,255,0.92);
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 1000;
}
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ——— Barra de tiempo (overlay dentro del mapa) ——— */
.ol-timebar{
  position:absolute;
  left:16px; right:16px; bottom:16px;
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,0.96);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:12px; padding:10px 12px;
  box-shadow:0 6px 16px rgba(0,0,0,0.15);
  z-index: 1200;
}
.ol-timebar .tb-btn{
  border:none; background:#f5f5f7; border-radius:10px; padding:6px 10px; cursor:pointer;
  display:grid; place-items:center; min-width:36px; min-height:36px;
}
.ol-timebar .tb-btn:hover{ background:#eee; }

.ol-timebar .tb-slider{
  flex:1; height:6px; border-radius:999px; outline:none; accent-color:#111;
}
.ol-timebar .tb-slider::-webkit-slider-runnable-track{ height:6px; background:#111; border-radius:999px; }
.ol-timebar .tb-slider::-moz-range-track{ height:6px; background:#111; border-radius:999px; }
.ol-timebar .tb-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid #111; margin-top:-6px;
  transition: transform .15s ease;
}
.ol-timebar .tb-slider::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid #111;
  transition: transform .15s ease;
}
.ol-timebar .tb-slider:active::-webkit-slider-thumb,
.ol-timebar .tb-slider:active::-moz-range-thumb{ transform: scale(1.05); }

.ol-timebar .tb-label{
  min-width: 200px; text-align:right;
  font: 600 12px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:#333; white-space:nowrap;
}

/* ——— Contribuciones de OpenLayers discretas y colapsables ——— */
.ol-attribution {
  right:12px !important; bottom:12px !important;
  background: rgba(255,255,255,0.92) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  padding: 2px 6px !important;
}
.ol-attribution button{ font-size:12px !important; }

/* ——— Pulido de tu slider global ——— */
input[type="range"]{
  transition: none; /* quita 10s */
}
input[type="range"]::-webkit-slider-thumb{ transition: transform .15s ease }
input[type="range"]::-moz-range-thumb{ transition: transform .15s ease }

/* ——— Asegura posicionamiento relativo donde dibujamos overlays ——— */
.map-frame, #olMap { position: relative; }

/* Tabla */
#titulo{
  font-size:1.2rem;
}

.table {
  width: 100%; 
  border-collapse: collapse; 
  table-layout: fixed;
  flex-direction: column;

}

.table thead th {
  border-bottom: 2px solid var(--color-gris-oscuro); 
}

.table thead th:first-child {
    border-bottom: none; 
  }

.table td,
.table th {
  vertical-align: middle; 
  padding: 10px; 
  font-size: 0.8rem;
  text-align: center;
  align-items: center;
}

.table tbody tr td {
    border-bottom: 1px solid var(--color-gris-oscuro); /* Línea entre filas */
}

.table tbody tr td:first-child {
    font-weight: bold; /* Negrita para la primera columna */
    text-align: left; /* Texto alineado a la izquierda */
    border-bottom: none !important;
}



/* Barra de progreso */
.progress {
  height: 12px;
  border-radius: 5px;
  width: 55%;
  display: inline-block;
}

.progress-bar {
  height: 100%;
  width: 100%;
  display: flex; /* Activa Flexbox */
  justify-content: center !important; /* Centra horizontalmente */
  align-items: center;

}

/* Leyenda */
.legend-item {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
}

.legend-color {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 3px;
  margin-right: 5px;
}

.bg-success {
  background-color: var(--color-verde-progressbar) !important; /* Verde */
}

.bg-warning {
  background-color: var(--color-ambar-progressbar) !important; /* Amarillo */
}

.bg-danger {
  background-color: var(--color-rojo-progressbar) !important; /* Rojo */
}

.loading-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(33, 37, 41, 0.9); 
    padding: 3rem 4rem;
    border-radius: 1rem;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.4);
    width: min(80vw, 30rem);  
    min-width: 20rem;
    text-align: center;
    pointer-events: all;
}

body.is-busy #encabezado,
body.is-busy .calendar-area,
body.is-busy #calendar-button {
  pointer-events: none !important;
  user-select: none !important;
  opacity: 0.6; /* opcional */
}

/* “Deshabilitar” enlaces del menú cuando busy */
body.is-busy #encabezado a {
  cursor: not-allowed !important;
}

body.is-busy #calendar-button,
body.is-busy #calendar-button * {
  pointer-events: none !important;
  cursor: not-allowed !important;
  user-select: none !important;
}
body.is-busy #calendar-button,
body.is-busy #calendar-button *,
body.is-busy #simulation-date {
  cursor: default !important;   /* <- pisa el inline del span y del input absoluto */
  pointer-events: none !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #6c757d !important;   /* gris oscuro */
  color: white;
  border: none !important;
  border-radius: 50% !important;               /* círculo */
  transform: scale(0.85);           /* más pequeño */
}

/* Día al pasar el ratón */
.flatpickr-day:hover {
  background: #ced4da;
  color: black;
}

/* Día seleccionado con hover */
.flatpickr-day.selected:hover {
  background: #5a6268 !important;  /* un poco más oscuro al pasar */
}