/* ============================================
   DEFENSA CIVIL — SANTIAGO DEL ESTERO
   Reskin de Bootstrap 5 con la identidad institucional
   ============================================ */

:root {
  --navy-900: #0d1730;
  --navy-800: #131f42;
  --navy-700: #1c2c56;
  --navy-600: #26386c;
  --navy-500: #35498a;
  --red-alert: #d62828;
  --red-alert-dark: #a91f1f;

  --gray-50: #f6f7fb;
  --text-muted-custom: #5b6478;
  --text-on-navy: #d9e0f2;

  --alert-green: #2e9e4f;
  --alert-yellow: #e3b429;
  --alert-orange: #e07b28;
  --alert-red: #d62828;

  --font-display: 'Barlow Condensed', 'Segoe UI', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Sobreescritura de variables de Bootstrap */
  --bs-primary: var(--navy-700);
  --bs-primary-rgb: 28, 44, 86;
  --bs-danger: var(--red-alert);
  --bs-danger-rgb: 214, 40, 40;
  --bs-body-font-family: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --bs-link-color: var(--navy-700);
  --bs-link-hover-color: var(--red-alert);
}

body { color: #16203d; }

h1, h2, h3, h4, .navbar-brand strong {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--navy-800);
}
/* Reemplaza estas clases en tu style.css */
.section-eyebrow {
  display: inline-block;
  font-family: var(--bs-body-font-family); /* Usa la fuente base, más limpia */
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--navy-700);
  background-color: rgba(28, 44, 86, 0.08); /* Fondo azul clarito */
  padding: 0.3rem 0.8rem;
  border-radius: 50rem; /* Bordes redondeados */
  margin-bottom: 0.8rem;
}

/* Ocultamos la rayita de antes porque ya tiene fondo */
.section-eyebrow::before {
  display: none; 
}

.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible {
  outline: 3px solid var(--alert-yellow);
  outline-offset: 3px;
}

section:not(.hero) { animation: section-in .65s ease both; }

@keyframes section-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* BARRA DE EMERGENCIA */
.emergency-bar {
  background-color: var(--red-alert);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.emergency-bar .pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
  margin-right: 0.4rem;
  animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.75); }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-dot,
  .alert-scale .alert-level.rojo,
  section:not(.hero) { animation: none; }
}

/* NAVBAR */
.navbar-institucional {
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #e2e6f0;
}

.navbar-institucional .navbar-brand img { height: 44px; width: 44px; object-fit: contain; }
.navbar-institucional .navbar-brand small { display: block; font-size: 0.7rem; color: var(--text-muted-custom); font-weight: 400; letter-spacing: 0.3px; }
/* --- Reemplaza desde aquí en la sección NAVBAR --- */
.navbar-institucional .nav-link {
  font-weight: 600;
  color: #16203d;
  position: relative;
  transition: color 0.3s ease;
}

/* Creamos la rayita invisible debajo de cada enlace */
.navbar-institucional .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0; /* Inicialmente no tiene ancho, por lo que no se ve */
  height: 2px;
  background-color: var(--red-alert); /* Usamos el rojo institucional */
  transition: width 0.3s ease; /* Le damos la fluidez al movimiento */
}
/* Botón de Acceso Interno */
.btn-acceso {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono); /* Usamos la fuente técnica para que parezca un sistema */
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--navy-700);
  background-color: transparent;
  border: 1px solid var(--navy-700);
  border-radius: 50rem; /* Forma de píldora redondeada */
  padding: 0.4rem 1.2rem;
  transition: all 0.3s ease;
}

/* Efecto al pasar el mouse por el botón de acceso */
.btn-acceso:hover {
  background-color: var(--navy-700);
  color: #fff;
  box-shadow: 0 4px 12px rgba(28, 44, 86, 0.15);
  transform: translateY(-1px);
}

/* Cambia el color del texto al pasar el mouse */
.navbar-institucional .nav-link:hover { 
  color: var(--navy-700) !important; 
}

/* La rayita crece al 80% de ancho al pasar el mouse O cuando la sección está activa */
.navbar-institucional .nav-link:hover::after,
.navbar-institucional .nav-link.active::after {
  width: 80%;
}

/* Estilo para el enlace cuando estás parado en su sección */
.navbar-institucional .nav-link.active {
  color: var(--navy-700) !important;
}
/* --- Hasta aquí --- */

/* HERO */
.hero {
  background-color: var(--navy-800);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding-top: 1.5rem !important;
}

.hero > .container {
  padding-top: 0.5rem !important;
}

.hero .row {
  align-items: flex-start !important;
}

.hero h1 { color: #fff; font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.15; }
.hero p.lead { color: var(--text-on-navy); }

.hero .btn-danger { background-color: var(--red-alert); border-color: var(--red-alert); }
.hero .btn-danger:hover { background-color: var(--red-alert-dark); border-color: var(--red-alert-dark); }
.hero .btn-outline-light:hover { color: var(--navy-800); }

.hero-figure svg { width: 220px; height: auto; filter: drop-shadow(0 12px 24px rgba(0,0,0,0.35)); }
.hero-figure .province-shape { fill: var(--navy-600); stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.hero-figure .capital-pin { fill: var(--red-alert); stroke: #fff; stroke-width: 2; }
.hero-figure .capital-label { font-family: var(--font-mono); font-size: 10px; fill: var(--text-on-navy); }
.hero-figure { width: 100%; }
.hero-mapa-provincia { width: min(100%, 420px, 53.28vh); min-height: 0; margin-inline: auto; }
.hero .hero-mapa-provincia { border-color: transparent; background: var(--navy-800); }
.hero-mapa-provincia .mapa-provincia-imagen { opacity: .9; }
.hero-figure figcaption { margin-top: 0.8rem; font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-on-navy); text-align: center; }

/* SECCIONES */
section { scroll-margin-top: 90px; }
.section-alt { background-color: var(--gray-50); }

/* CICLO (etapas oficiales) */
/* CICLO (etapas oficiales) */
.stage-card { 
  border: none; 
  border-top: 3px solid var(--navy-700); 
  border-radius: 0.5rem; 
  box-shadow: 0 6px 20px rgba(13,23,48,0.06); 
  height: 100%; 
  /* Agregamos las transiciones para el movimiento y el color */
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Efecto al pasar el mouse: se eleva y la raya superior cambia a rojo */
.stage-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(13, 23, 48, 0.12);
  border-top-color: var(--red-alert);
}

/* BALANCE / ESTADISTICAS */
.stat-card { border: 1px solid #e2e6f0; border-radius: 0.5rem; border-top: 3px solid var(--red-alert); }
.stat-card .stat-label { display: block; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.5px; color: var(--text-muted-custom); text-transform: uppercase; margin-bottom: 0.5rem; }
.stat-card .stat-value { display: block; font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: var(--navy-800); line-height: 1; }
/* --- TARJETA ACTIVA (SELECCIONADA) --- */
.stat-card.activa {
  background-color: var(--navy-800);
  border-top-color: var(--navy-800);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(13, 23, 48, 0.15);
  transition: all 0.3s ease;
}

/* Letras blancas para la tarjeta activa */
.stat-card.activa .stat-label {
  color: rgba(255, 255, 255, 0.7);
}
.stat-card.activa .stat-value {
  color: #ffffff !important; 
}

/* ---> PEGA EL CÓDIGO NUEVO AQUÍ <--- */

/* Altura por defecto para celulares */
.chart-container {
  height: 280px; 
}

.mapa-provincia-interactivo {
  position: relative;
  width: min(100%, 420px, 53.28vh);
  aspect-ratio: 1799 / 2497;
  min-height: 0;
  overflow: visible;
  border: 1px solid #dfe5ef;
  border-radius: .4rem;
  background: #eef5fb;
}

.mapa-provincia-imagen {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: inherit;
}

.marcadores-asistencia {
  position: absolute;
  inset: 0;
}

.marcador-asistencia {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.marcador-asistencia::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #b3271e;
  box-shadow: 0 2px 7px rgba(13, 23, 48, .35);
  animation: titilar-marcador 1.8s ease-in-out infinite;
}

.marcador-asistencia:hover,
.marcador-asistencia:focus-visible {
  z-index: 2;
}

.marcador-asistencia:hover::before,
.marcador-asistencia:focus-visible::before {
  background: #f0a202;
  animation-play-state: paused;
}

.marcador-asistencia:focus-visible {
  outline: 3px solid rgba(240, 162, 2, .65);
  outline-offset: -2px;
}

.marcador-asistencia[aria-expanded="true"]::before {
  background: #f0a202;
  animation: none;
}

@keyframes titilar-marcador {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 2px 7px rgba(13, 23, 48, .35);
  }
  50% {
    opacity: .55;
    box-shadow: 0 0 0 5px rgba(179, 39, 30, .18), 0 2px 7px rgba(13, 23, 48, .35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marcador-asistencia::before {
    animation: none;
  }
}

.ficha-asistencia {
  position: absolute;
  width: max-content;
  max-width: min(16rem, calc(100vw - 2rem));
  padding: .45rem .65rem;
  border-radius: .35rem;
  background: #14213d;
  color: #ffffff;
  font-size: .8rem;
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - .65rem));
  transition: opacity .18s ease, transform .18s ease;
  white-space: normal;
  z-index: 4;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .28);
  transform: translate(-50%, calc(-100% - .65rem));
}

.ficha-asistencia[aria-hidden="false"] {
  opacity: 1;
  transform: translate(-50%, calc(-100% - .65rem));
}

.ficha-asistencia.ficha-abajo,
.ficha-asistencia.ficha-abajo[aria-hidden="false"] {
  transform: translate(-50%, .65rem);
}

.ficha-asistencia-titulo,
.ficha-asistencia-dato {
  display: block;
}

.ficha-asistencia-dato {
  margin-top: .2rem;
  color: #ffffff;
}

.ficha-asistencia-dato:empty {
  display: none;
}

/* Cuando la pantalla sea más grande (Tablets y Computadoras) */
@media (min-width: 768px) {
  .chart-container {
    height: 380px; 
  }
}

/* PROGRAMAS */
.program-card { border: 1px solid #e2e6f0; border-radius: 0.5rem; transition: transform .2s ease, box-shadow .2s ease; height: 100%; }
.program-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(13,23,48,0.12); border-color: var(--navy-500); }
.program-card .icon-wrap { width: 42px; height: 42px; border-radius: 0.4rem; background-color: rgba(28,44,86,0.08); color: var(--navy-700); display: flex; align-items: center; justify-content: center; }

/* NOTICIAS (carrusel bootstrap) */
/* Borde más grueso para el bloque contenedor */
.news-carousel.border {
  border-width: 2px !important; 
  border-color: #d1d6e8 !important; /* Un gris azulado un poco más notorio */
}

/* Espacio a los costados para que los botones no toquen la imagen ni el texto */
.news-carousel .carousel-inner {
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}
/* Estilos para las imágenes reales de las noticias */
.news-carousel .slide-image {
  width: 100%;
  height: 250px;
  object-fit: cover; /* Corta la imagen sutilmente para que no se deforme ni se aplaste */
  border-radius: 0.5rem; /* Bordes redondeados para seguir el estilo de la página */
  box-shadow: 0 4px 12px rgba(13, 23, 48, 0.08); /* Sombrita elegante */
}

.news-updated {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted-custom);
  letter-spacing: 0.2px;
}
.news-carousel .carousel-item { padding: 2.2rem 1rem; }
.news-carousel .slide-image-placeholder {
  height: 200px;
  border-radius: 0.4rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-on-navy);
  font-family: var(--font-mono); font-size: 0.8rem;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
}
.news-carousel .badge-tag { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.5px; background-color: rgba(214,40,40,0.1); color: var(--red-alert); }
.news-carousel .carousel-control-prev, .news-carousel .carousel-control-next { width: 3rem; }
.news-carousel .carousel-control-prev-icon, .news-carousel .carousel-control-next-icon { background-color: var(--navy-700); border-radius: 50%; padding: 0.7rem; }
.news-carousel .carousel-indicators [data-bs-target] { background-color: var(--navy-500); }

/* ALERTAS */
/* ALERTAS */
.alert-scale .alert-level { 
  padding: 1.5rem 1.3rem 1.7rem; 
  color: #fff; 
  border-radius: 0.4rem; 
  height: 100%; 
  /* Agregamos una transición para que el movimiento sea suave */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Estilo de "Píldora Translúcida" solo para los textos de Nivel 1, Nivel 2, etc. */
.alert-scale .level-code { 
  display: inline-block;
  font-family: var(--font-mono); 
  font-size: 0.75rem; 
  font-weight: 600;
  letter-spacing: 1.5px; 
  text-transform: uppercase; 
  background-color: rgba(255, 255, 255, 0.25); /* Píldora blanca semitransparente */
  padding: 0.25rem 0.7rem;
  border-radius: 50rem; /* Bordes totalmente redondeados */
  margin-bottom: 0.6rem;
}

/* Excepción para la tarjeta amarilla (Nivel 2): usamos transparencia oscura para que el texto se lea bien */
.alert-scale .alert-level.amarillo .level-code {
  background-color: rgba(0, 0, 0, 0.12);
}
/* Efecto Hover: se eleva al pasar el mouse */
.alert-scale .alert-level:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(13, 23, 48, 0.15);
}

.alert-scale .alert-level.verde { background-color: var(--alert-green); }
.alert-scale .alert-level.amarillo { background-color: var(--alert-yellow); color: var(--navy-900); }
.alert-scale .alert-level.naranja { background-color: var(--alert-orange); }
.alert-scale .alert-level.rojo { 
  background-color: var(--alert-red); 
  /* Activamos la animación del latido continuo */
  animation: latido-rojo 2s infinite;
}

.alert-scale .level-code { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase; opacity: 0.85; }

/* Animación del Latido para la alerta roja */
@keyframes latido-rojo {
  0% { box-shadow: 0 0 0 0 rgba(214, 40, 40, 0.7); }
  70% { box-shadow: 0 0 0 12px rgba(214, 40, 40, 0); }
  100% { box-shadow: 0 0 0 0 rgba(214, 40, 40, 0); }
}
/* CONTACTO */
.contact-section { background-color: var(--navy-900); color: var(--text-on-navy); }
.contact-section h2 { color: #fff; }
.contact-line { display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-family: var(--font-mono); color: #fff; }
.contact-line .icon-circle { width: 36px; height: 36px; border-radius: 50%; background-color: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-note { border-left: 2px solid var(--red-alert); padding-left: 1rem; font-size: 0.9rem; }
.contact-section .section-eyebrow {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
}
/* FOOTER */
footer { background-color: var(--navy-800); color: var(--text-on-navy); }
footer h6 { color: #fff; letter-spacing: 0.3px; }
footer a { color: var(--text-on-navy); text-decoration: none; }
footer a:hover { color: #fff; }

/* FLOTANTES */
/* FLOTANTES */
.float-contact {
  position: fixed; bottom: 24px; right: 24px; width: 54px; height: 54px; border-radius: 50%;
  background-color: #25D366; /* Verde oficial de WhatsApp */
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(13,23,48,0.14); transition: transform .2s ease, background-color .2s ease; z-index: 999;
}

.float-contact:hover { 
  background-color: #128C7E; /* Verde un poco más oscuro al pasar el mouse */
  transform: scale(1.07); 
}
.back-to-top {
  position: fixed; bottom: 24px; right: 90px; width: 42px; height: 42px; border-radius: 50%;
  background-color: #fff; border: 1px solid #e2e6f0; color: var(--navy-800);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, background-color .2s ease;
  box-shadow: 0 6px 20px rgba(13,23,48,0.08); z-index: 999;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background-color: var(--gray-50); }
.back-to-top .icon { width: 1.1em; height: 1.1em; }

@media (max-width: 767px) {
  .news-carousel .slide-image-placeholder { height: 140px; }

  .float-contact {
    right: auto;
    left: 1rem;
  }

  .back-to-top {
    right: auto;
    left: 5rem;
  }
}

/* ============================================
   AJUSTES DE TAMAÑO DE TEXTO (LEGIBILIDAD)
   ============================================ */

/* 1. Textos descriptivos debajo de los títulos principales de cada sección */
section p.text-muted {
  font-size: 1.05rem; /* Un poco más grande que el texto normal */
  line-height: 1.6;
}

/* 2. Textos informativos dentro de las tarjetas (Prevención, Institucional, Alertas) */
.stage-card p.small,
.program-card p.small,
.alert-scale .alert-level p.small {
  font-size: 0.95rem !important; /* Anula el tamaño "small" de Bootstrap */
  line-height: 1.5;
}

/* 3. Textos generales de la sección de Contacto */
.contact-section p {
  font-size: 1.05rem;
}
.contact-note {
  font-size: 1rem; /* Aumenta la nota sobre los operadores de guardia */
}
/* Nivel de alerta vigente (marcado por js/sync.js desde /api/alerta) */
.alert-scale .alert-level.nivel-vigente {
  outline: 3px solid var(--navy-900);
  outline-offset: 2px;
}