/* ======================================================
   Hidromet – Custom CSS
   Estilo alineado con proyecto de referencia ICTS Doñana
   ====================================================== */

/* ── Variables corporativas ─────────────────────────── */
:root {
  --mp-primary:        #efa125;
  --mp-primary-dark:   #c07e0d;
  --mp-primary-light:  #fcecd3;
  --mp-secondary:      #1d1d1b;
  --mp-success:        #52a90f;
  --mp-font:           'Ubuntu', system-ui, sans-serif;
}

/* ── Fuente base ────────────────────────────────────── */
html, body,
.navbar, input, button, select, textarea {
  font-family: var(--mp-font) !important;
}

/* ── Header institucional ───────────────────────────── */
/* Logo a la izquierda (ICTS Doñana) y los 3 de la derecha
   tienen la misma clase hm-header-logo */
.hm-header-logo {
  height: 55px;
  width: auto;
  object-fit: contain;
}
.hm-app-title {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--mp-secondary);
  letter-spacing: .02em;
}

/* ── Navbar ─────────────────────────────────────────── */
.custom-underline {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: 3px solid transparent;
  padding-bottom: 2px;
  transition: border-color .15s ease;
}
.custom-underline:hover,
.custom-underline:focus,
.custom-underline.nav-current {
  color: inherit !important;
  border-bottom-color: var(--mp-primary) !important;
}
.nav-current { font-weight: 600; }

/* ── Panel lateral naranja (index) ─────────────────── */
/* Sin celdas redondeadas individuales — igual que referencia:
   panel continuo con separadores hr blancos y números grandes */
.hm-side-panel {
  background: var(--mp-primary);
  border-radius: 0;          /* sin redondeo — flush con el carrusel */
  color: #fff;
}

/* Silueta: grande y centrada */
.hm-silhouette {
  max-height: 140px;
  width: auto;
  max-width: 80%;
}

/* Números KPI grandes como en la referencia (fs-2 = ~2rem) */
.hm-kpi-number {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
}
.hm-kpi-text {
  display: block;
  font-size: .85rem;
  opacity: .9;
  margin-bottom: .5rem;
}
.hm-kpi-icon {
  font-size: 2.5rem;
  opacity: .85;
}

/* ── Carrusel — se estira al 100% del panel lateral ── */
/* El row usa align-items-stretch + g-0, el carrusel usa h-100 */
/* así la imagen siempre ocupa la altura exacta del panel.     */
.hm-carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0; left: 0;
}
.carousel-item {
  position: relative;
}
/* Sin redondeo para encajar flush con el panel */
#hidrometCarousel,
#hidrometCarousel .carousel-inner,
#hidrometCarousel .carousel-item {
  border-radius: 0;
  height: 100%;
}

/* Caption translúcido */
.carousel-caption {
  background: linear-gradient(transparent, rgba(0,0,0,.5));
  left: 0; right: 0; bottom: 0;
  padding: 2rem .9rem .7rem;
  text-align: left;
}
.carousel-caption p { font-size: .8rem; margin: 0; line-height: 1.4; }

/* Indicadores circulares */
.carousel-indicators [data-bs-target] {
  width: 8px; height: 8px;
  border-radius: 50%;
  border-top: none; border-bottom: none;
  opacity: .55;
}
.carousel-indicators .active { opacity: 1; }

/* ── Footer (estructura col-2 como referencia) ───────── */
.hm-footer {
  padding: 30px 0;
  border-top: 1px solid #dee2e6;
}

/* footer-logo: 65px como en la referencia */
.footer-logo {
  height: 65px;
  width: auto;
  object-fit: contain;
  transition: opacity .2s, filter .2s;
  filter: grayscale(10%);
  opacity: .9;
}
.footer-logo:hover { filter: grayscale(0%); opacity: 1; }

.footer-funding-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6c757d;
  margin-bottom: .5rem;
}

@media (max-width: 768px) {
  .footer-logo { height: 32px; margin-bottom: 12px; }
  .hm-carousel .carousel-item img,
  .hm-carousel-img { height: 260px; }
  .hm-header-logo { height: 36px; }
}

/* ── Tabla de datos ─────────────────────────────────── */
.table-container {
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: #efa125 #f1f1f1;
}
.penelope-table-head tr th {
  background-color: var(--mp-primary);
  vertical-align: middle !important;
}

/* ── Stepper ────────────────────────────────────────── */
.step-dot.done   { background: var(--mp-success) !important; border-color: var(--mp-success) !important; }
.step-dot.active { border-color: var(--mp-primary) !important; color: var(--mp-primary) !important;
                   box-shadow: 0 0 0 3px rgba(239,161,37,.2) !important; }
.step-connector.done { background: var(--mp-success) !important; }

/* ── en_pruebas ─────────────────────────────────────── */
#closable {
  background: var(--mp-primary-light);
  border: 1px solid var(--mp-primary);
}