:root {
  --primary: #008fde;          /* Azul estándar */
  --primary-dark: #004f8c;     /* Azul más sobrio: usado en hero y footer */
  --accent: #ff8016;
  --accent-dark: #cc660f;
  --neutral-light: #f8f9fa;
  --neutral-title: #cf874c;
  --neutral-title-dark: #d9823b;
  --bs-ri-bg-subtle: #f8dca6a3;
  
}

/* Colores del texto */
.text-primary { 
  color: var(--primary-dark) !important;  /* Azul más sobrio para títulos y links principales */
}

.text-accent { 
  color: var(--accent) !important; 
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  margin: 0;
  padding-top: 120px; /* espacio para header fijo */
}

/* HEADER FIJO */
.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1050;
  background-color: var(--neutral-light);
}

.logo-area h1 {
  font-size: 1.1rem;
  margin: 0;
}

.social-icons a {
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

/* Cambio de color al pasar el mouse */
.social-icons a:hover {
  color: var(--primary-dark);
}


/* NAVBAR */
.sticky-nav {
  position: relative;
  top: 0;
  z-index: 1000;
}

/* Dropdown limpio y moderno */
.navbar .dropdown-menu {
  border: none; /* quitar borde */
  background-color: white; /* fondo limpio */
  /*box-shadow: 0 4px 20px rgba(0,0,0,0.08); *//* sombra suave */
  border-radius: 0.5rem; /* esquinas redondeadas */
  padding: 0.5rem 0; /* espacio interno */
  min-width: 180px; /* ancho mínimo */
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Items del dropdown */
.navbar .dropdown-item {
  color: var(--bs-navbar-active-color);
  padding: 0.5rem 1.2rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover sobre cada item: gris suave */
.navbar .dropdown-item:hover {
  background-color: #f2f2f2; /* gris claro sutil */
  color: var(--primary-dark); /* mantiene el texto en azul sobrio */
  border-radius: 0.25rem;
}


/* Opcional: quitar separación entre items */
.navbar .dropdown-item + .dropdown-item {
  margin-top: 0;
}

/* HERO */
.hero-modern {
  /*background-color: linear-gradient(to right, var(--primary-dark), var(--primary));*/
  background-color: var(--primary-dark);
  min-height: 30vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.hero-modern-sequia{
  background-color: linear-gradient(to right, var(--primary-dark), var(--primary));
  background-image: url('../img/background-sequia.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-modern-lluvia{
  background-image: url('../img/background-seguimiento.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-modern-reporte{
  background-image: url('../img/background-reporte.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-modern-reporte-mapa{
  background-image: url('../img/background-reporte-mapa.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-modern-inundacion{
  background-image: url('../img/background-inundacion.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-modern-clima{
  background-image: url('../img/background-clima.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-modern-ingreso{
  background-image: url('../img/background-ingreso.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* CARD EFECTO */
.hover-scale {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-scale:hover {
  /*transform: translateY(-5px);*/
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* CARRUSEL */
.carousel-caption {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  padding: 1rem;
}

/* Footer */
footer {
  background: linear-gradient(to right, var(--primary-dark), var(--primary));
  color: white;
  min-height: 15vh;
}

footer a {
  color: #ffe4cc;
  text-decoration: none;
}
footer a:hover {
  color: white;
}

/* FORMULARIO COMO CARD */
.form-section {
  background: white;
  border-radius: 0.5rem;            
  padding: 2.5rem 2rem;            
  box-shadow: 0 4px 20px rgba(0,0,0,0.08); 
  max-width: 1000px;              
  margin: 3rem auto 0 auto; /* Espacio superior de 3rem, centrado horizontal */
  /*transition: transform 0.3s ease, box-shadow 0.3s ease;*/
}

@media (max-width: 768px) {
  .form-section {
    margin-top: 2rem; /* Menor margen en pantallas pequeñas */
    padding: 2rem 1rem; /* Padding más compacto */
  }
}

.form-section:hover {
  /*transform: translateY(-2px);*/
  box-shadow: 0 6px 25px rgba(0,0,0,0.12);
}


/* Inputs dentro del form */
.form-section form input,
.form-section form textarea,
.form-section form select {
  border-radius: 0.35rem;
  border: 1px solid #ddd;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  /*transition: transform 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease;*/
  padding: 0.65rem 0.75rem;
}

.form-section form input:focus,
.form-section form textarea:focus,
.form-section form select:focus {
  border-color: var(--primary-dark);
  box-shadow: 0 6px 20px rgba(0,79,140,0.15);
  outline: none;
  /*transform: translateY(-2px);*/
}

.form-section form button {
  border-radius: 0.5rem;
  /*transition: transform 0.3s ease, box-shadow 0.3s ease;*/
}

.form-section form button:hover {
  /*transform: translateY(-2px);*/
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}


/* CARD FORMULARIO PEQUEÑO */
/* Cards de la sección de dos columnas: sin movimiento, solo sombra */
.form-card, .image-card {
  border-radius: 0.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08); /* sombra inicial */
  background: white;
  /*transition: box-shadow 0.3s ease; /* solo animar la sombra */
}

.form-card:hover, .image-card:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* sombra más pronunciada al hover */
  /*transform: none; /* aseguramos que no se muevan */
}



/* Inputs dentro del form-card */
.form-card input {
  border-radius: 0.35rem;
  border: 1px solid #ddd;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  /*transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;*/
  /*padding: 0.5rem 0.75rem;*/
}

.form-card input:focus {
  border-color: var(--primary-dark);
  box-shadow: 0 6px 20px rgba(0,79,140,0.15);
  outline: none;
  /*transform: translateY(-2px);*/
}


/* BOTONES AZUL ESTILO FOOTER */
.form-card button.btn-primary,
.btn-primary {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  /*transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;*/
  color: white;
}

.form-card button.btn-primary:hover,
.btn-primary:hover {
  background-color: #003366; /* Azul más oscuro para hover */
  border-color: #003366;
  /*transform: translateY(-2px);*/
}

.form-card button.btn-primary:active,
.form-card button.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: 0 0 0 0.2rem rgba(0, 79, 140, 0.3);
  /*transform: translateY(0);*/
}


.fullwidth-section {
  width: 100%;
  background: #f8f9fa; /* Fondo neutro */
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: 2rem;   /* espacio izquierdo */
  padding-right: 2rem;  /* espacio derecho */
}

@media (min-width: 768px) {
  .fullwidth-section {
    padding-left: 4rem;   /* más espacio en escritorio */
    padding-right: 4rem;
  }
}

@media (min-width: 1200px) {
  .fullwidth-section {
    padding-left: 6rem;   /* espacio armonioso para pantallas grandes */
    padding-right: 6rem;
  }
}


/* Mantener cards consistentes */
.fullwidth-section .form-card,
.fullwidth-section .image-card {
  border-radius: 0.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  background: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fullwidth-section .form-card:hover,
.fullwidth-section .image-card:hover {
  /*transform: translateY(-2px);*/
  box-shadow: 0 6px 25px rgba(0,0,0,0.12);
}

/* Inputs del formulario */
.fullwidth-section .form-card input {
  /*border-radius: 0.35rem;*/
  border: 1px solid #ddd;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  /*transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;*/
  /*padding: 0.5rem 0.75rem;*/
}

.fullwidth-section .form-card input:focus {
  border-color: var(--primary-dark);
  box-shadow: 0 6px 20px rgba(0,79,140,0.15);
  outline: none;
  /*transform: translateY(-2px);*/
}






.notation {
  font-size: clamp(0.70rem, 1vw + 0.55rem, 0.90rem);
  line-height: 1.6;
  color: #555; /* opcional: tono ligeramente más suave que #333 */
  margin-bottom: 1rem;
  text-align: justify;
}

.title-modern {
  background: linear-gradient(to right, var(--neutral-title-dark), var(--neutral-title));
  min-height: 5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.title-modern-seguimiento {
  background: linear-gradient(to right, var(--primary-dark), var(--primary));
  min-height: 5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.map_persistencia {
  width: 60%; 
  height: auto; 
  display: block; 
  margin: 0 auto;
}

.map_inundacion {
  width: 60%; 
  height: auto; 
  display: block; 
  margin: 0 auto;
}

  /* Scroll solo en pantallas pequeñas */
  @media (max-width: 768px) {
    .scroll-mobile-sequia {
      max-height: 30vh;     /* altura visible */
      overflow-y: auto;     /* activa scroll vertical */
      overflow-x: hidden;
    }
  }
  

.alert-info-RI {
    --bs-alert-color: var(--accent-dark);
    --bs-alert-bg: var(--bs-ri-bg-subtle);
    --bs-alert-link-color: var(--bs-warning-text-emphasis);
}

.btn-info-RI {
  --btn-bg: var(--accent-dark);
  --btn-bg-hover: var(--accent);
  background-color: var(--btn-bg);
  border-color: var(--btn-bg);
  color: #fff;
}

.btn-lnk {
  --btn-bg: var(--accent-dark);
  --btn-bg-hover: var(--accent);

  background-color: var(--btn-bg);
  border-color: var(--btn-bg);
  color: #fff;
}

.btn-lnk:hover,
.btn-lnk:focus {
  background-color: var(--btn-bg-hover);
  border-color: var(--btn-bg-hover);
  color: #fff;
}

.btn-lnk-blue {
  --btn-bg: var(--primary-dark);
  --btn-bg-hover: var(--primary);

  background-color: var(--btn-bg);
  border-color: var(--btn-bg);
  color: #fff;
}

.btn-lnk-blue:hover,
.btn-lnk-blue:focus {
  background-color: var(--btn-bg-hover);
  border-color: var(--btn-bg-hover);
  color: #fff;
}

  /* Scroll solo en pantallas pequeñas */
  @media (max-width: 768px) {
    .scroll-mobile {
      max-height: 50vh;     /* altura visible */
      overflow-y: auto;     /* activa scroll vertical */
      overflow-x: hidden;
    }
  }

  .text-justify {
    text-align: justify;
  }