:root{
    --brand:#13a0d6;
    --brand-dark:#0f8fc0;
    --ink:#0b4152;
    --muted:#7a8c96;
    --brand-light:#ffffff;
    --brand-strong:#1189c7;
    --bg-soft:#f4f9fc;
    --card-shadow: 0 12px 30px rgba(0,0,0,.06);
    --radius: 14px;

    /* Hero */
    /* Alturas objetivo (ajústalas a tu gusto) */
    --hero-h-desktop: clamp(180px, 20vw, 285px); /* máx ≈285px */
    --hero-h-mobile:  clamp(240px, 45vw, 420px); /* más alto en mobile */
}

        

* { box-sizing: border-box; }
body {
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: #e9f2f7;
    margin: 0; padding: 0px 0 0px;
}
body::before {
    content: "";
    position: fixed; 
    inset: 0; 
    z-index: -1;
    background-image: url('bg-fixed.jpg');
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed;
    opacity: 1;
}

.page-inner { margin: 0 auto; }

/* Menú azul */
.container-custom {
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
    border-radius: 1rem;
    overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    background-color: #00a0e3; /* color azul similar al de tu captura */
    padding: 1rem 1.5rem;
    margin: 1rem auto;
}
.container-custom.white {
    background: linear-gradient(180deg, var(--brand-light) 0%, var(--brand-light) 100%);
    border-radius: 1rem;
    overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    background-color: #ffffff; /* color azul similar al de tu captura */
    padding: 1rem 1.5rem;
    margin: 1rem auto;
}

.container-custom .arrowIcon{
  margin-left:auto; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px; border:1px solid #e3eff5; background:#f4f9fc; color:#1b98d6;
}

.container-custom.white .arrowIcon{
  margin-left:auto; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px; border:1px solid #e3eff5; background:#1b98d6; color:#f4f9fc;
}

.container-custom.map{
  padding: 0;
}

.menu-header { min-height: 40px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.menu-title { line-height: 1; }

.menu-options { overflow: hidden; height: auto; will-change: height; transition: height .35s ease, margin-top .35s ease; }

.option-item { background-color: rgba(255,255,255,.14); color:#fff; border-radius:.5rem; display:flex; align-items:center; padding:.75rem 1rem; margin-bottom:.5rem; cursor:pointer; transition: background-color .2s ease; outline:none; }
.option-item:hover { background-color: rgba(255,255,255,.24); }
.option-item:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.option-item.active { background-color: rgba(255,255,255,.34); }

.option-number { background:#fff; color:var(--brand); font-weight:800; width:2.5rem; height:2.5rem; display:grid; place-items:center; margin-right:.75rem; border-radius:.35rem; font-size:1rem; font-family: Roboto, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; flex:0 0 auto; }
.option-item.active .option-number {
    color: #fff;
    background-color: #00a0e3;
}

/* Flecha rotatoria */
#arrowIcon { transition: transform .35s ease; }
#arrowIcon.rotated { transform: rotate(180deg); }

/* Contenedor blanco */
#content-wrap { background:#fff; border-radius:18px; box-shadow:0 10px 28px rgba(0,0,0,.06); overflow:hidden; padding-bottom:26px; }
.content-wrap{ max-width: 1200px; margin: 32px auto 72px; }

#content-header { padding:26px 36px; }
#content-area { position:relative; padding:26px 60px 40px; }

#content-title { font-weight:800; color:var(--ink); }
#content-sub { color:var(--muted); }

.btn-info-custom{ background:var(--brand); color:#fff; border-radius:24px; padding:10px 26px; font-weight:700; }
.btn-info-custom:focus-visible { box-shadow: 0 0 0 4px rgba(19,160,214,.35); }

.filters { display:flex; gap:12px; justify-content:center; margin-top:26px; flex-wrap:wrap }
.filter { background:#f5f7f9; border-radius:18px; padding:8px 14px; font-size:14px; color:#465; }

.loader-overlay { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(255,255,255,.7); backdrop-filter:saturate(150%) blur(2px); }
.loader-overlay.is-active{ display:flex; }
.spinner { width:42px; height:42px; border-radius:50%; border:4px solid rgba(19,160,214,.25); border-top-color:#13a0d6; animation:spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.map-controls { position:fixed; left:24px; bottom:160px; display:flex; flex-direction:column; gap:10px; z-index:40 }
.map-controls .ctrl { width:42px; height:42px; border-radius:6px; background:var(--brand); color:#fff; display:grid; place-items:center; box-shadow:0 6px 12px rgba(0,0,0,0.12); }



/* ===== Header ===== */
.site-header{ 
    background:#fff; 
    box-shadow:0 2px 12px rgba(0,0,0,.04); 
}
.site-header .container-xl{
    min-height:80px;                          /* altura total */
    display:flex; 
    align-items:flex-end;       /* alinea a la base del logo */
    padding-top:8px; 
    padding-bottom:8px; 
    gap:8px;
}

/* Logo 64px */
.logo-img{ 
    height:64px; 
    width:auto; 
    display:block; 
}

/* Menú principal (desktop) */
.site-header,
.site-header .container-xl,
.main-nav-wrap { overflow: visible; }

.main-nav-wrap{
    align-self:flex-end;
    max-width:100%;
    flex:1 1 auto;
    min-width:0;               /* evita empujar el layout */
}

/* Mantén una sola línea por item, sin scrolls */
.main-nav{
    display:flex; 
    align-items:flex-end;
    flex-wrap:nowrap;          /* una sola fila */
    white-space:nowrap;
}
.main-nav .nav-item{ 
    position:relative; 
    display:flex; 
    align-items:flex-end; 
}
.main-nav .nav-item:not(:first-child){ 
    border-left:1px solid var(--sep); 
}

/* Ajuste fluido de tamaño/espaciado para que quepa sin scroll */
.main-nav .nav-link{
    white-space:nowrap;
    font-size: clamp(14px, 0.95vw, 16px);
    padding-inline: clamp(.55rem, 0.9vw, .9rem);
}

.main-nav .nav-link{
    display:inline-flex;
    align-items:center;                   /* centra la flecha con el texto */
    line-height:1.1;                      /* ya lo tenías: mantiene altura limpia */
    padding:.25rem .7rem .4rem;           /* antes .25rem .9rem .4rem */
}

/* El primer elemento empieza más cerca del logo */
.main-nav .nav-item:first-child .nav-link{
    padding-left:.5rem;                    /* antes heredaba .7rem */
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active{ color:var(--brand); } /* estado activo */

/* Flecha azul (chevron) — tamaño .4rem y alineada a la línea del texto */
.main-nav .chev{
    display:inline-block;                 /* asegura que width/height se apliquen */
    width:.4rem;
    height:.4rem;
    border-right:2px solid var(--brand);
    border-bottom:2px solid var(--brand);
    transform:rotate(45deg);
    transform-origin:center;
    margin-left:.35rem;                   /* separación del texto */
    vertical-align:middle;                /* por si cae fuera de inline-flex */
    line-height:1;
    position:relative;
    top:0;                                /* sin desplazamiento hacia abajo */
    transition: transform .15s ease; /* <-- mueve aquí la transición */
}

.flag-icon{
  width:24px; height:18px;
  margin-right:.5rem;
  border-radius:2px;
  object-fit:cover;
  display:inline-block;
  vertical-align:middle;
}
.menu-title-with-flag{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.submenu li.is-current > a.menu-link{
  font-weight:700;
  text-decoration:underline;
}

/* Top nav: quita el anillo por defecto del navegador */
.site-header .main-nav .nav-link:focus,
.site-header .main-nav .nav-link:focus-visible{
  outline: 0 !important;
  box-shadow: none !important;
}

/* Foco accesible solo para teclado en el top nav */
.using-keyboard .site-header .main-nav .nav-link:focus-visible{
  box-shadow: 0 0 0 3px rgba(19,160,214,.45);
  border-radius: .35rem;
}

/* ===== Desktop ===== */
@media (min-width: 992px){
  /* El wrap ocupa el espacio entre logo y acciones; dentro centramos el UL */
  .site-header .main-nav-wrap{
    display: flex;
    flex: 1 1 auto;
  }

  /* Centro el bloque de items y ajusto separación */
  .site-header .main-nav{
    display: flex;
    align-items: center;
    justify-content: center;   /* <-- centra el conjunto */
    gap: .2rem;                /* <-- separación entre items (ajusta a gusto) */
    width: 100%;
    margin-inline: auto;       /* márgenes izq/der automáticos */
  }

  /* Cada item con ancho natural (ya no todos iguales) */
  .site-header .main-nav > .nav-item{
    flex: 0 0 auto;            /* ancho según su contenido */
    margin: 0;
    position: relative;        /* referencia para el pipe */
    text-align: center;
  }

  .site-header .main-nav > .nav-item > .nav-link{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;          /* negrita */
    line-height: 1.2;          /* uniforme */
  }

  /* Pipe centrado ENTRE items (sigue funcionando con gap) */
  .site-header .main-nav > .nav-item:not(:first-child)::before{
    content: "|";
    position: absolute;
    left: -0.1rem;                   /* borde izquierdo del item actual */
    transform: translateX(-50%); /* mitad hacia la izda = centro entre items */
    top: 50%;
    translate: 0 -60%;
    pointer-events: none;
    opacity: .65;
    line-height: 1;
  }

  /* Si necesitas apretar más/menos los items, toca solo el 'gap' de .main-nav */
}




/* Botón Identificarse y hamburguesa pegados a la base */
.btn-outline-brand{
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-color: var(--brand-light);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-border-color: var(--brand);
    border-width:2px; 
    font-weight:700; 
    border-radius:999px;
    align-self:flex-end;
}
.btn-hamburger{
    width:44px; 
    height:44px; 
    padding:0; 
    border:0; 
    background:transparent;
    display:grid; 
    place-items:center; 
    align-self:flex-end; 
    color:var(--brand);
}
.btn-hamburger:focus-visible{ 
    outline:2px solid rgba(19,160,214,.5); 
    outline-offset:3px; }

/* ===== Dropdown (submenús en desktop, debajo del item) ===== */

/* Dropdown: capa por fuera, debajo del item */
.nav-item.dropdown > .dropdown-menu{
    margin-top:.5rem;
    border-radius:.5rem;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    z-index: 1080;             /* por encima del header y contenido */
}

/* Bootstrap 5 actualiza aria-expanded en el toggle */
.nav-item.dropdown > .nav-link[aria-expanded="true"] .chev{
  transform:rotate(135deg);
}

/* (Opcional) compatibilidad si tu li .dropdown SI recibe .show */
.nav-item.dropdown.show > .nav-link .chev{
  transform:rotate(135deg);
}

.dropdown-item, .dropdown-item-form{
    color:#111; 
    font-weight:600; 
    padding:.5rem .75rem; 
    border-radius:.35rem;
    white-space:nowrap;
}
.dropdown-item:hover, .dropdown-item-form:hover{ 
    color:var(--brand); 
    background:rgba(19,160,214,.08); 
}

@media (min-width: 992px){
    /* Mostramos por hover con JS (Popper); quitamos caret por defecto */
    .dropdown-toggle::after{ display:none; }
}
@media (max-width: 991.98px){
    .desktop-only{ display:none !important; }
}

/* ===== Offcanvas (menú lateral) ===== */
.offcanvas.seo-menu{ width:320px; }
/* Variante azul como la captura */
.seo-menu--blue{ 
    background:linear-gradient(180deg, var(--brand), var(--brand-dark)); 
    color:#fff; }
.seo-menu--blue .btn-close{ filter:invert(1) grayscale(1); }

.seo-menu .menu-list{ 
    list-style:none; 
    margin:0; 
    padding:0; }
.seo-menu .menu-link,
.seo-menu .menu-toggle{
    display:flex; 
    align-items:center; 
    justify-content:space-between;
    width:100%; 
    padding:.6rem .5rem; 
    border:0; 
    background:transparent;
    text-align:left; 
    font-weight:700; 
    text-decoration:none; 
    border-radius:.35rem;
}
.seo-menu:not(.seo-menu--blue) .menu-link,
.seo-menu:not(.seo-menu--blue) .menu-toggle{ color:var(--brand); }
.seo-menu--blue .menu-link,
.seo-menu--blue .menu-toggle{ color:#fff; }

.seo-menu .menu-link:hover,
.seo-menu .menu-toggle:hover{ opacity:.9; }

.seo-menu .chev{
    width:.7rem; 
    height:.7rem; 
    flex:0 0 auto; 
    transition: transform .2s ease;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(-45deg); /* apunta a la derecha */
    margin-left:.5rem;
}
.seo-menu .menu-toggle[aria-expanded="true"] .chev{ transform:rotate(45deg); } /* abajo */

.seo-menu .submenu{ 
    list-style:none; 
    margin:.2rem 0 .2rem 0; 
    padding-left:1rem; }
.seo-menu .submenu a{
    display:block; 
    padding:.45rem .5rem; 
    text-decoration:none; 
    border-radius:.35rem;
}
.seo-menu--blue .submenu a{ color:#eaf6fc; }
.seo-menu--blue .submenu a:hover{ color:#fff; background:rgba(255,255,255,.08); }
.seo-menu:not(.seo-menu--blue) .submenu a{ color:var(--brand); }
.seo-menu:not(.seo-menu--blue) .submenu a:hover{ background:rgba(19,160,214,.08); }

/* Separación entre el contenido principal y el footer */
.page-inner.container-xl{
  margin-bottom: clamp(32px, 5vw, 80px); /* ~32px en móvil → ~80px en desktop */
}

@media (max-width: 767px){ #content-area { padding:20px; } }
@media (prefers-reduced-motion: reduce){ .menu-options{ transition: none; } #arrowIcon{ transition:none; } }


/* ===== Utilidades de visibilidad ===== */
.mobile-only { display: none !important; }
@media (max-width: 991.98px){
  .mobile-only { display: block !important; }
}

/* ===== Offcanvas: permitir scroll vertical en contenidos largos ===== */
.offcanvas-body{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Título de sección dentro del offcanvas */
.menu-section-title{
  font-weight: 800;
  letter-spacing: .01em;
  opacity: .9;
  padding: .4rem .25rem;
  border-bottom: 1px solid rgba(255,255,255,.25);
  margin-bottom: .5rem;
}


/* Separador entre menú principal clonado y el resto del offcanvas */
.menu-sep{
  height: 0;
  border-bottom: 1px solid rgba(255,255,255,.25);
  margin: .35rem 0 .6rem;
}


/* ==============================
   Footer 
   (líneas blancas 2px, columnas 80% del container-xl, 3 columnas mismo ancho)
   ============================== */
.site-footer{
    background:#333; color:#e8e8e8; padding:48px 0 20px;
  }
  /* El footer ocupa 100% de ancho, pero el área de columnas es 80% del container-xl */
  .footer-inner{ width:80%; margin-left:auto; margin-right:auto; }

  /* Márgenes entre columnas */
  .site-footer .row{ --bs-gutter-x: 2.2rem; }

  .site-footer a{ color:var(--brand); text-decoration:underline; }
  .site-footer a:hover{ opacity:.9; }

  /* Columna logo + contacto */
  .footer-logo img{ height:96px; width:auto; display:block; }
  .footer-contact li{ margin-bottom:.35rem; }
  .footer-contact a{ color:#e8e8e8; text-decoration:none; }
  .footer-contact a:hover{ color:var(--brand); text-decoration:underline; }
  .footer-contact .bi{ font-size:1rem; width:1.2rem; display:inline-block; }

  /* Títulos y listas: líneas más marcadas (blancas) */
  .footer-title{
    color:#fff; font-weight:700; margin-bottom:1rem;
    padding-bottom:.5rem; border-bottom:2px solid #fff; /* marcado y blanco */
  }
  .footer-links li + li{ margin-top:.35rem; }
  .footer-links a{ color:#e8e8e8; text-decoration:none; }
  .footer-links a:hover{ color:var(--brand); text-decoration:underline; }

  /* Bloque inferior con línea blanca marcada */
  .footer-bottom{
    border-top:2px solid #fff; /* marcado y blanco */
    margin-top:28px; padding-top:14px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    color:#cfcfcf; font-size:.95rem;
  }
  .footer-bottom a{ color:#e8e8e8; }
  .footer-social a{ color:#e8e8e8; font-size:1.25rem; margin-left:14px; text-decoration:none; }
  .footer-social a:hover{ color:var(--brand); }

  /* Responsive */
  @media (max-width: 991.98px){
    .footer-bottom{ flex-direction:column; align-items:flex-start; }
    .footer-inner{ width:100%; } /* en móviles ocupa el ancho del container-xl */
  }

#loadingOverlay{
  position:fixed; inset:0; z-index:9999;
  background-color: rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  opacity:0; visibility:hidden; transition:opacity .2s ease;
}
#loadingOverlay.is-active{ opacity:1; visibility:visible; }


/**************************
  Estilos Consultas
*********************************/
.expand-icon,.grafico-icon {
    cursor: pointer;
}
.accordion-row {
    display: none;
    background-color: #f9f9f9;
}
.detalle-row td {
    background-color: #f7f7f7;
    font-size: 0.95em;
}

.ps-4 {
    padding-left: 1.5rem !important;
}
.encabezado-detalle td {
    background-color: #e9ecef;
    font-weight: bold;
    font-size: 0.9em;
}
.detalle-row:not(.encabezado-detalle) {
    cursor: pointer;
}

/* Filas padre (entidades) que tienen data-entidad-id */
#tablaResultados tbody tr.row-click {
    cursor: pointer; /* Cambia cursor a puntero */
    transition: background-color 0.3s ease;
}

/* Cambio de fondo al pasar ratón */
#tablaResultados tbody tr[data-entidad-id]:hover {
    background-color: #076492 !important;
    color: white !important;
    cursor: pointer;
}

#tablaResultados tbody tr.detalle-row {
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#tablaResultados tbody tr.detalle-row:hover {
    background-color: #076492 !important;
    color: white !important;
    cursor: pointer;
}

#modalGrafico .modal-dialog {
max-width: 66vw; /* 66% del viewport width */
width: 66vw;     /* for good measure */
}
.dropdown-menu {
    max-height: 250px;
    overflow-y: auto;
}

.dropdown-menu .form-check-input:focus:checked{
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  background-image: var(--bs-form-check-bg-image) !important;
}

.row-expanded {
background-color: #f0f8ff !important; /* o el color que desees */
}

#content-wrap{
    padding: 1rem 1.5rem;
}

.option-item {
background-color: rgba(255, 255, 255, 0.2);
color: white;
border-radius: 0.25rem;
display: flex;
align-items: center;
padding: 0.5rem 1rem;
margin-bottom: 0.5rem;
cursor: pointer;
transition: background-color 0.3s;
}
.option-item:hover {
background-color: rgba(255, 255, 255, 0.4);
}
.option-number {
background-color: white;
color: #00a0e3;
font-weight: bold;
width: 2rem;
height: 2rem;
display: flex;
justify-content: center;
align-items: center;
margin-right: 0.5rem;
border-radius: 0.25rem;
}

.informesCont input:is(
  [type="text"],
  [type="search"],
  [type="email"],
  [type="number"],
  [type="password"],
  [type="url"],
  [type="tel"],
  [type="date"],
  [type="time"],
  [type="datetime-local"]
):focus:valid,
.informesCont select:focus:valid,
.informesCont textarea:focus:valid{
  /*border: none;*/                      /* intenta evitar !important si no hace falta */
  background-color: transparent;     /* evita 'unset' */
}

/***********************************************************
Estilos paginas contenido
***********************************************************/

/******** Estilos pagina Especie Informes y Graficas ******/
.card-soft{ background:#fff; border:0; border-radius: var(--radius); box-shadow: var(--card-shadow); }

/* Buscador azul de especies */
.species-search{
  background: var(--brand);
  border-radius: 999px;
  padding: 14px 18px;
  box-shadow: 0 8px 24px rgba(17,137,199,.25);
}
.species-search .search-wrap{
  max-width: 740px;
  margin: 0 auto;
  position: relative;
}
.species-search .form-control{
  background:#fff;
  border-radius: 999px !important;
  padding-left: 3rem;
  height: 44px;
  border: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.08) inset;
}
.species-search .search-icon{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:999px;
  display:grid; place-items:center;
  border: 3px solid var(--brand);
  color: var(--brand);
  background:#fff;
  pointer-events:none;
  font-size:14px;
}
.species-search .spinner{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; display:none;
}
.species-search.loading .spinner{ display:inline-block; }

/* Autocomplete */
.typeahead-menu{
  position:absolute; left:0; right:0; top: calc(100% + 8px);
  background:#fff; border-radius: 12px; box-shadow: var(--card-shadow);
  padding: 6px; margin:0; list-style:none; max-height: 320px; overflow:auto; z-index: 20;
  display:none;
}
.typeahead-menu.show{ display:block; }
.typeahead-item{
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  display:flex; align-items: center; gap:10px;
}
.typeahead-item:hover, .typeahead-item[aria-selected="true"]{
  background: #f1f7fb;
}
.typeahead-item .code{ color: var(--muted); font-size:.85rem; }
.typeahead-empty{ padding: 10px 12px; color:#7a93a0; }

/* Modulo 1 3 bloques horizontales */
.bird-hero{ max-width:360px; width:100%; height:auto; object-fit:contain; }
.bird-title { color:var(--brand); text-decoration:none; font-weight:800; }
.bird-sci{ color:#6a7f8a; }
.bird-names dt{ font-weight:800; color:#2f4a55; }
.bird-names dd{ margin-bottom:.35rem; color:#2f4a55; }

/* Separador vertical que ocupa el 100% de la altura de la columna */
@media (min-width: 992px){
  .ps-lg-4{ padding-left:1.5rem!important; }
  .row-eq-lg{ align-items: stretch; }        /* asegura columnas igual altura */
  .v-sep-lg{ position: relative; }
  .v-sep-lg::before{
    content: "";
    position: absolute;
    inset: 0 auto 0 0;                       /* top:0; bottom:0; left:0 */
    width: 1px;
    background: var(--divider, #d9e6ee);     /* usa tu var o color */
  }
}


/* Map */

/* Contenedor y mapa a 100% del panel */
.map-wrap{ position:relative; height:600px; border-radius:14px; overflow:hidden; }
.map-canvas{ position:absolute; inset:0; }
.map-wrap2{ position:relative; height:400px; border-radius:14px; overflow:hidden; }

/* Controles del mapa (demo) */
.map-controls{
  position:absolute; left:12px; top:12px; display:flex; flex-direction:column; gap:8px; z-index:3;
}
.btn-map{ width:40px; height:40px; border-radius:8px; background:#1b98d6; color:#fff; border:0;
  box-shadow:0 8px 16px rgba(0,0,0,.12); font-weight:700; }
.btn-map:hover{ background:#1189c7; color:#fff; }

/* Leyenda con círculo/rectángulo */
.legend{
  position:absolute; left:12px; bottom:12px; z-index:3; background:#fff; border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.12); padding:.6rem .8rem; font-size:.9rem; min-width:220px;
}
.legend .item{ display:flex; align-items:center; gap:.5rem; padding:.25rem 0; }
.legend .swatch{ width:18px; height:12px; border-radius:3px; background:#ddd; flex:0 0 auto; }
.legend .swatch.circle{ width:12px; height:12px; border-radius:50%; }
.legend .label{ color:#2f4a55; }

/* Bloque de Más info y Links */
/* Título + línea superior */
.title-wrap{ margin-top: .25rem; }
.title-rule{
  display:block;
  width: 180px; height: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 35%, #fff);
  margin-bottom: 14px;
}
.more-title{
  color: var(--brand);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.2px;
  margin: 0 0 18px;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
}

.more-info-block{
  padding: 12px 8px; /* el contenedor padre ya da aire; ajusta si necesitas */
}
.more-img{
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  display:block;
}

/* --- Ancho al 80% y centrado --- */
.more-info-80{
  width: 80%;
  margin-inline: auto;   /* centra horizontalmente */
}

/* En pantallas pequeñas, vuelve a 100% para no estrecharlo */
@media (max-width: 991.98px){
  .more-info-80{ width: 100%; }
}

/* Lista de enlaces con flecha */
.more-links li + li{ margin-top: .7rem; }
.more-links a{
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(1rem, .92rem + .4vw, 1.25rem);
  display: inline-flex; align-items: center; gap: .5rem;
}
.more-links a .chev{
  color: var(--brand);
  transition: transform .15s ease;
  font-size: 1.25em; line-height: 1;
}
.more-links a:hover{
  color: var(--brand);
  text-decoration: none;
}
.more-links a:hover .chev{ transform: translateX(3px); }

/* Ajustes responsivos sutiles */
@media (min-width: 1200px){
  .title-rule{ margin-bottom: 18px; }
  .more-title{ margin-bottom: 24px; }
}


/* BLOQUE DE FILTROS DE FORMULARIOS INFORMES BOTONES */
/* Píldora con label a la izquierda + barra + select nativo */
.ls{
  --ls-border: #e2ebf2;
  --ls-sep:    #cfe0ea;
  --ls-label:  #7b8f9b;
  --ls-value:  #1496d4;     /* color del valor */
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid var(--ls-border);
  border-radius:999px; padding:.35rem .75rem .35rem 1rem;
  min-height:40px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 6px rgba(14,30,37,.05);
}
.ls .ls-label{
  position:relative; color:var(--ls-label); font-weight:600; white-space:nowrap;
  padding-right:.75rem; line-height:1; display:inline-block;
}
.ls .ls-label::after{
  content:""; position:absolute; right:.2rem; top:50%; transform:translateY(-50%);
  width:1px; height:1.25em; background:var(--ls-sep);
}
.ls .form-select{
  border:0; background:transparent; padding-left:.25rem; padding-right:2rem;
  box-shadow:none; color:var(--ls-value); height:32px; line-height:1.1;
}
.ls .form-select:focus{ box-shadow: none; }

/* Píldora: evita saltos raros y que el select se corte */
.ls{ white-space: nowrap; }                 /* etiqueta | valor en una línea */
.ls .form-select{
  width: auto;                              /* <— clave para que no se estire/corte */
  min-width: 7ch;                           /* ancho mínimo cómodo del valor */
}

/* Añadido por Gabriel para poner abajo el error */
.ls:has(input[type="text"]) {
    position: relative;
}

/* Sacar el invalid-feedback del flujo y posicionarlo abajo */
.ls:has(input[type="text"]) .invalid-feedback {
    position: absolute;
    top: calc(100% + 0.1rem);
    left: 1rem;
    right: 1rem;
    width: auto;
}
/*Gabriel*/

/* En móviles, la píldora ocupa ancho completo y el select fluye bien */
@media (max-width: 575.98px){
  .ls{ width: 100%; }
  .ls .form-select{ flex: 1 1 auto; }       /* si usas display:inline-flex en .ls */
}

/* Variante opcional: píldora fluida (llena espacio disponible) */
.ls--fluid{ display:flex; }
.ls--fluid .form-select{ flex:1 1 200px; min-width: 0; }

/* Botón azul con texto blanco — estado base visible */
.btn.btn-brand{
  --btn-brand: #1b98d6;
  --btn-brand-hover: #1189c7;
  background-color: var(--btn-brand) !important;
  border-color: var(--btn-brand) !important;
  color: #fff !important;
}

/* Hover / focus */
.btn.btn-brand:hover,
.btn.btn-brand:focus{
  background-color: var(--btn-brand-hover) !important;
  border-color: var(--btn-brand-hover) !important;
  color: #fff !important;
}

/* Active */
.btn.btn-brand:active,
.btn.btn-brand.active,
.show > .btn.btn-brand.dropdown-toggle{
  background-color: var(--btn-brand-hover) !important;
  border-color: var(--btn-brand-hover) !important;
  color: #fff !important;
}

/* Disabled coherente */
.btn.btn-brand:disabled,
.btn.btn-brand.disabled{
  background-color: var(--btn-brand) !important;
  border-color: var(--btn-brand) !important;
  color: #fff !important;
  opacity: .65;
}

.filters .form-select, .filters .form-control{
      background:#f6f9fb; border:1px solid #e7eef3;
    }
.btn-info-custom{ background:var(--brand); color:#fff; border-radius:24px; font-weight:700; }
.btn-info-custom:hover{ background:#0f8fc0; color:#fff; }
/* Fuerza flujo en bloque dentro del formulario de filtros */
form.filters{
  display: block !important;   /* evita que las .row hermanas se pongan en línea */
}

/* (Opcional) asegúrate de que cada fila ocupa línea completa y envuelve */
form.filters > .row{
  flex-wrap: wrap;             /* por si algún override quitó el wrap */
  width: 100%;
}


/* ESTILOS PARA LA PAGINA DE INDICE DE ESPECIES */

/* === Buscador (reutilizable) === */
    /* Buscador azul de especies */
.species-search{
  background: var(--brand);
  border-radius: 999px;
  padding: 14px 18px;
  box-shadow: 0 8px 24px rgba(17,137,199,.25);
}
.species-search .search-wrap{
  max-width: 740px;
  margin: 0 auto;
  position: relative;
}
.species-search .form-control{
  background:#fff;
  border-radius: 999px !important;
  padding-left: 3rem;
  height: 44px;
  border: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.08) inset;
}
.species-search .search-icon{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:999px;
  display:grid; place-items:center;
  border: 3px solid var(--brand);
  color: var(--brand);
  background:#fff;
  pointer-events:none;
  font-size:14px;
}
.species-search .spinner{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; display:none;
}
.species-search.loading .spinner{ display:inline-block; }

/* Autocomplete */
.typeahead-menu{
  position:absolute; left:0; right:0; top: calc(100% + 8px);
  background:#fff; border-radius: 12px; box-shadow: var(--card-shadow);
  padding: 6px; margin:0; list-style:none; max-height: 320px; overflow:auto; z-index: 20;
  display:none;
}
.typeahead-menu.show{ display:block; }
.typeahead-item{
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  display:flex; align-items: center; gap:10px;
}
.typeahead-item:hover, .typeahead-item[aria-selected="true"]{
  background: #f1f7fb;
}
.typeahead-item .code{ color: var(--muted); font-size:.85rem; }
.typeahead-empty{ padding: 10px 12px; color:#7a93a0; }


/* === Módulo listado === */
    .species-list-module{ background:#fff; border-radius: 22px; box-shadow: var(--card-shadow); padding: 22px 18px; }
    @media (min-width: 992px){ .species-list-module{ padding:28px 28px; } }

    /* Grid responsive con CSS Grid (1/2/4 columnas) */
    .species-grid{ display:grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 18px; }
    @media (min-width: 576px){ .species-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 992px){ .species-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }

    /* Cards del listado*/
    
    .img-wrap{ height: 180px; display:flex; align-items:flex-end; justify-content:center; }
    .img-wrap img{ max-height: 170px; width:auto; object-fit:contain; display:block; }
    .name{ margin-top: 10px; margin-bottom: 2px; font-weight: 800; color: var(--brand); text-decoration: none; }
    .name:hover{ text-decoration: underline; }
    .latin{ color:#647b86; font-style: italic; font-size: .95rem; }

    .species-card{
      background:#fff; 
      border-radius: 18px; 
      box-shadow: 0 10px 28px rgba(0,0,0,.08); 
      padding: 18px; 
      display:flex; 
      flex-direction:column; 
      height:100%;      
      position: relative;
      cursor: pointer;

      /* estado inicial para animar */
      opacity: 0;
      transform: translateY(6px);

      /* OJO: no repitas "transform" dos veces en la transición */
      transition: opacity .35s ease, transform .35s ease, box-shadow .2s ease;
      will-change: opacity, transform;
    }
    .species-card.is-in{ opacity: 1; transform: none; }
    .species-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.12); }

    @media (prefers-reduced-motion: reduce){
      .species-card{
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
    }

    /* Enlace que cubre toda la card */
    .card-link-overlay{
      position: absolute; inset: 0; border-radius: inherit;
      z-index: 1; /* por encima del contenido para capturar el click */
      text-indent: -9999px; overflow: hidden; /* no muestra texto */
    }
    .card-link-overlay:focus-visible{ outline: 3px solid var(--brand); outline-offset: 3px; }

    /* El contenido queda por debajo visualmente pero no necesita ser interactivo */
    .species-card .img-wrap,
    .species-card .name,
    .species-card .latin{ position: relative; z-index: 0; }
    .species-card .name{ text-decoration: none; } /* ya no es <a>, es texto */

    /* Paginación */
    .pager{ display:flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:wrap; }
    .pager .page{ width:34px; height:34px; border-radius:999px; display:grid; place-items:center; border:1px solid #d7e7f1; color:#5b7480; text-decoration:none; font-weight:700; background:#fff; }
    .pager .page:hover{ border-color:#b8d6e7; color:#0d7fb1; }
    .pager .page.active{ background: var(--brand); color:#fff; border-color: var(--brand); }
    .pager .dots{ color:#8aa3af; padding:0 .5rem; }
    .pager-line{ height:2px; background: color-mix(in srgb, var(--brand) 35%, #fff); border-radius: 999px; margin-top: 14px; }

    /* Botones de borde (Primera / Última) */
    .pager .edge{
      display:inline-flex; align-items:center; justify-content:center;
      height:34px; padding:0 12px; border-radius:999px;
      background:#fff; color: var(--brand); border:1px solid var(--brand);
      text-decoration:none; font-weight:700;
    }
    .pager .edge:hover{ background: var(--brand); color:#fff; border-color:#fff; }
    .pager .edge.disabled{ opacity:.5; pointer-events:none; }

    .section-title{ margin:0 0 4px; font-size:18px; font-weight:700; color:#244b59; text-align:center; }


/* === ModMovConsultas (módulo movimientos-consultas) === */

#mod-mov-cons {
  width: 90%;
  margin-inline: auto;
}


#mod-mov-cons .panel-brand {
  background: var(--brand);
  color: #fff;
}
#mod-mov-cons .btn-pill {
  border-radius: 999px !important;
  font-weight: 650;
  background: #fff;
  color: var(--brand);
  border:2px solid;
  border-color: var(--brand);
  padding: .6rem 1.25rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
  font-size: 0.8rem;
}

#mod-mov-cons .btn-pill:hover {
background: var(--brand);
  color: #fff;
  border:2px solid #fff;
}

#mod-mov-cons .card-body-flex {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* título arriba, botón abajo */
  padding: 1.5rem;
}
@media (min-width: 768px){
  #mod-mov-cons .card-body-flex { min-height: 250px; }
}
#mod-mov-cons .mod-img {
  background-size: cover;
  background-position: center;
  min-height: 220px;
}
@media (min-width: 768px){
  #mod-mov-cons .mod-img { min-height: 100%; }
}
/* Rutas de imágenes (puedes cambiarlas si usas otro path) */
#mod-mov-cons .img-mapa {
  background-image: url('/img/mapa-movimientos.jpg');
}
#mod-mov-cons .img-consultas {
  background-image: url('/img/aves-consultas.jpg');
}

#descFiltrosPanel .menu-options { overflow: visible; }
#descFiltrosPanel #provincia, #descFiltrosPanelInf #provincia{min-width:180px;}

/* Botón “marca” base (ajústalo si ya lo tienes) */
.btn-outline-brand{
  border-color: var(--brand);
  color: var(--brand);
  background-color: transparent;
}

/* Grupo con forma de píldora segmentada */
.btn-group-segmented{
  border-radius: 9999px;
  overflow: hidden;             /* recorta esquinas internas */
}
.btn-group-segmented .btn{
  border-radius: 0;             /* radios planos por defecto */
}
.btn-group-segmented .btn:first-of-type{
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}
.btn-group-segmented .btn:last-of-type{
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}
/* Evitar doble borde entre etiquetas contiguas */
.btn-group-segmented .btn + .btn{
  margin-left: -1px;
}

/* Activo → fondo brand y texto blanco */
.btn-check:checked + .btn-outline-brand,
.btn-outline-brand.active,
.btn-outline-brand:active{
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* Foco accesible */
.btn-check:focus + .btn-outline-brand,
.btn-outline-brand:focus{
  box-shadow: 0 0 0 .2rem rgba(19,160,214,.25);
}

#mod-mov-cons #content-wrap{ padding: 0px;}


/* 
TABLAS RESPONSIVE
Opcional: pequeños toques visuales 
*/
.decadas-widget .card { border-radius: 1rem; }
.decadas-widget .card-header{
  background: var(--brand, #0d6efd);
  color:#fff; font-weight:600;
}

/* Cabecera de tabla en brand */
.decadas-widget table thead th{
  background: var(--brand, #0d6efd);
  color:#fff;
  border-color: var(--brand, #0d6efd);
  vertical-align: middle;
}
.decadas-widget table thead th:first-child{
  position: sticky; left: 0; /* opcional si haces scroll horizontal */
}

/* 1ª columna (etiquetas) más ancha en desktop */
.decadas-widget .label-col { min-width: 180px; }

/* Espaciado vertical de filas para el widget de décadas */
.decadas-widget{
  --row-py: .65rem;            /* sube/baja este valor a tu gusto (.55–.9rem) */
  min-height: 110px;
}

.decadas-widget .table > :not(caption) > * > *{
  padding-top: var(--row-py);
  padding-bottom: var(--row-py);
  vertical-align: middle;
  line-height: 1.3;            /* un pelín más alto, opcional */
}

/* Cabecera: un poco más de altura para el título de cada década */
.decadas-widget table thead th{
  padding-top: calc(var(--row-py) + .1rem);
  padding-bottom: calc(var(--row-py) + .1rem);
}

/* Vista móvil: dentro de las cards, algo menos para no alargar demasiado */
.decadas-widget .card .table > :not(caption) > * > *{
  padding-top: .55rem;
  padding-bottom: .55rem;
}


.distribution-map .legend {
  position: absolute; bottom: 14px; left: 14px;
  background: #fff; padding: 10px 12px; border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.15); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 13px;
}
.distribution-map .legend h4 { margin: 0 0 8px; font-size: 13px; }
.distribution-map .legend-row { display: flex; align-items: center; margin: 4px 0; gap: 8px; }
.distribution-map .legend-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.distribution-map .sw1 { background: #2b6cb0; transform: scale(.55); }
.distribution-map .sw2 { background: #2b6cb0; transform: scale(.75); }
.distribution-map .sw3 { background: #2b6cb0; }
.distribution-map .sw4 { background: #2b6cb0; transform: scale(1.15); }
.distribution-map .sw5 { background: #c53030; transform: scale(1.15);}

.gm-style .legend,  .gm-style .mapa-leyenda{ 
  display: inline-block; 
  width: auto !important; 
  max-width: 180px; 
  bottom:26px;
  left:10px !important;
}

/* Stacked en móvil: oculta thead y etiqueta celdas con data-label */
@media (max-width: 575.98px){
  .table-stacked-sm thead { display: none; }
  .table-stacked-sm tbody tr{
    display: block;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    overflow: hidden;
    margin-bottom: .85rem;
  }
  .table-stacked-sm tbody tr td{
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: .5rem;
    border: 0 !important;
    padding: .6rem .9rem !important;
  }
  .table-stacked-sm tbody tr td::before{
    content: attr(data-label);
    font-weight: 600;
    color: var(--bs-secondary-color);
  }
  .table-stacked-sm tbody tr td:first-child{
    grid-template-columns: 100%;
    background: var(--bs-light);
  }
  .table-stacked-sm tbody tr td:first-child::before{
    content: '';
  }
}

/**********************************************************************/
/********** MAPA DE DISTRIBUCION INFORME 6 ***************************/
/**********************************************************************/


/*************************************************************************/
/************ PLANTILLA DOCUMENTOS NORMATIVA *****************************/

/* Contenedor hero */
  .nd-hero{
    height: var(--hero-h-desktop);
  }

  /* Cambios para móvil (Bootstrap sm) */
  @media (max-width: 575.98px){
    .nd-hero{ height: var(--hero-h-mobile); }
  }

  /* Imagen */
  .nd-hero-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ajusta el encuadre según necesites para cada tamaño */
    object-position: 0% 0%;
  }

  /* Puedes variar el encuadre en mobile si conviene */
  @media (max-width: 575.98px){
    .nd-hero-media img{ object-position: 0% 40%; }
  }

  .standard-banner-title{
    padding-left: 13rem !important;
  }

  /* Titular de bloque */
  .text-brand{ color: var(--brand) !important; }

  /* Cabecera tipo "píldora" */
  .nd-table-head{
    display: grid;
    grid-template-columns: 1fr 160px 100px;
    align-items: center;
    background: var(--brand);
    color: #fff;
    border-radius: var(--radius);
    padding: 14px 18px;
    font-weight: 600;
    box-shadow: var(--card-shadow);
  }
  .nd-table-head .col-title{ padding-left: 1.25rem; }

  /* Tabla */
  .nd-table{ width: 100%; border-collapse: separate; border-spacing: 0; }
  .nd-table td{ border: 0; padding: 16px 12px; color: #000; font-size: 1rem; vertical-align: middle; }
  .nd-table .td-date{ width: 160px; }
  .nd-table td:last-child{ width: 100px; }

  /* Alternancia de filas exacta al diseño */
  .nd-table tbody tr:nth-child(odd) td { background: #e2f2fa; }
  .nd-table tbody tr:nth-child(even) td { background: #ffffff; }

  /* Hover sutil */
  .nd-table tbody tr:hover td { background: #d9eef9; }
  .nd-row{ cursor: pointer; }

  .nd-title{ color: #000; text-decoration: none; }

  /* Botón/ícono de descarga (usa tu PNG) */
  .nd-download{ display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: rgba(19,160,214,.12); transition: background .2s ease, transform .05s ease; }
  .nd-download:hover{ background: var(--brand); transform: translateY(-1px); }
  .nd-download:hover .icon-download{ filter: brightness(0) invert(1); }

  @media (max-width: 576px){
    .nd-hero{ min-height: 200px; }
    .nd-hero img{ max-height: 260px; }
    .nd-table-head{ grid-template-columns: 1fr 110px 80px; font-size: .95rem; }
    .nd-table td{ padding: 14px 10px; }

    .standard-banner-title{
      padding-left: 2rem !important;
    }
  }

  /**************************************************************************************/
  /************** cabeceras tipo pagina recuperaciones con texto e imagen a la derecha **/
  /**************************************************************************************/

  .nd-hero--recuperacion {
  /* ajustar la altura con tus variables globales ya definidas */
  /* height: var(--hero-h-desktop); */
  background-color: #0f5271;
  }

  .nd-hero--recuperacion .nd-recup-caption{
    position: absolute; inset: 0;
    /* padding simétrico sin afectar otros heroes */
    --recup-pad-x: clamp(24px, 8vw, 200px);
    padding: 0 var(--recup-pad-x);
  }

  .nd-hero--recuperacion .nd-recup-title{
    font-weight: 700;
    line-height: 1.05;
    font-size: clamp(1.8rem, 1.1rem + 2.2vw, 3rem);
    text-shadow: 0 2px 12px rgba(0,0,0,.25);
    margin-right: 1rem;
  }

  .nd-hero--recuperacion .nd-recup-side{
    flex: 0 0 auto;
    max-width: clamp(120px, 18vw, 385px);
  }
  .nd-hero--recuperacion .nd-recup-side img{
    display: block; width: 100%; height: auto;
  }

  /* ===== Responsive sólo para este hero ===== */
  @media (max-width: 575.98px){
    .nd-hero--recuperacion .nd-recup-caption{
      padding: 20px 16px;       /* no afecta a otros heroes */
      display: flex;
      flex-direction: column;   /* apilar en móvil para aire y legibilidad */
      align-items: flex-start;
      gap: 16px;
    }
    .nd-hero--recuperacion .nd-recup-side{
      max-width: min(60%, 260px);
    }
  }


  /* Solo para este dropdown (ajusta el selector si quieres que sea global) */
.form-container .form-section .dropdown .dropdown-menu{
  /* Bootstrap 5: permitir ancho dinámico del menú */
  --bs-dropdown-min-width: auto;   /* desactiva el min-width por defecto */
  width: max-content !important;               /* el menú crece al tamaño del contenido */
  min-width: 100%;                  /* al menos tan ancho como el botón */
  max-width: none;                  /* sin límite */
  white-space: nowrap;              /* no partir líneas */
  overflow-x: visible;              /* sin scroll horizontal */
}

.rounded-pill{min-width: 150px !important;}

.text-justify{
  text-align: justify;
  /* opcional: mejora cortes de línea */
  hyphens: auto;
}


/*******************************************************/
/************************* HOME ************************/
/* ===== Home: Hero vídeo ===== */
/* Botón play/pause centrado */
.btn-hero-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:72px; height:72px; border-radius:999px; display:grid; place-items:center;
  border:3px solid rgba(255,255,255,.9); color:#fff; background:rgba(0,0,0,.30);
  backdrop-filter: blur(2px);
  transition: opacity .18s ease, transform .12s ease, background .12s ease;
  z-index: 3;   /* por encima del video */
}

/* Iconos: nudge solo al play, no al pause */
.btn-hero-play i{ font-size:2rem; line-height:1; }
.btn-hero-play .bi-play-fill{ transform: translateX(1px); } /* corrige óptico */
.btn-hero-play .bi-pause-fill{ transform: none; }

/* Visible solo en hover cuando está reproduciendo (desktop) */
.hero-video-wrapper.is-playing .btn-hero-play{
  opacity: 0; pointer-events: none;
}
.hero-video-wrapper.is-playing:hover .btn-hero-play{
  opacity: 1; pointer-events: auto; color:#fff;
}

/* En dispositivos sin hover (móvil), mantenlo visible para poder pausar */
@media (hover: none) {
  .hero-video-wrapper.is-playing .btn-hero-play{
    opacity: 1; pointer-events: auto;
    background: rgba(0,0,0,.28);
  }
}

/* Poster solo al inicio o cuando está realmente parado */
.hero-poster{ 
  width:100%; height:100%; object-fit:cover; 
  transition: opacity .2s ease; 
}
.hero-video-wrapper.is-playing .hero-poster{ opacity:0; }

/* MP4: cover real sin bandas */
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;                 /* <- clave para “cover” en MP4 */
}

/* Iframe: lo forzaremos a “cover” vía JS, pero dejamos base */
.hero-iframe{
  position:absolute; left:50%; top:50%;
  /* width/height los ajusta JS para hacer “cover” */
  transform: translate(-50%, -50%);
  border:0;
}


/* ===== Objetivos ===== */
.objetivos-card{
  background:#fff; border:0; position:relative;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  border-top: 14px solid var(--brand);
}
.objetivos-kicker{
  height:6px; width:220px; border-radius:999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-dark));
}
.objetivos-ave{ max-width: 520px; }

/* ===== CTA azules ===== */
.cta-card{
  background: var(--brand);
  min-height: 250px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.cta-card .cta-media{ flex: 0 0 50%; max-height: 250px; }
.cta-card .cta-body{
  flex: 1 1 auto; padding: 1.25rem 1.25rem 1.25rem 1.25rem; color:#fff;
}
@media (min-width: 768px){
  .cta-card .cta-body{ padding: 1.25rem 1.5rem; }
}



/***********************************************************************************/
/******************************* SECCION ATLAS *************************************/

.hero-caption{
  position:absolute; 
  /*left:46px; */
  top:46px; z-index:4;
  /*max-width:min(92%, 520px);
  max-width: 90%;*/
  text-align: center;
  color:#fff; font-weight:650; line-height:1.2;
  font-size:clamp(1rem, 1.2rem + 1vw, 2.6rem);
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
  /*background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.12));*/
  padding:.5rem .75rem; border-radius:.5rem;
  opacity:0; transition: opacity .35s ease;
  pointer-events:none;                     /* no bloquea clics al vídeo */
}
.hero-caption.is-visible{ opacity:1; }

/* Tarjeta blanca genérica */
.card-like{ background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.06); border:0; }

/* Texto y color de marca */
.link-brand{ color:var(--brand); text-decoration:none; }
.link-brand:hover{ color:var(--brand-dark, var(--brand)); text-decoration:underline; }

/* Logos: cuadro consistente y centrado */
.logo-box{
  background:#fff; 
  /*border:1px solid rgba(0,0,0,.06); 
  border-radius:16px;*/
  height:150px; 
  display:flex; align-items:center; justify-content:center; padding:0px;
}
.logo-box img{ max-height:100%; max-width:100%; object-fit:contain; }

/* Botones de la franja azul invertibles en hover */
.btn-brand-invert{
  background: var(--brand); color:#fff; border:2px solid var(--brand);
  transition: background .15s ease, color .15s ease;
}
.btn-brand-invert:hover{ background:#fff; color:var(--brand); }

/* Bloque especial con topbar */
.info-block{ background:#fff; box-shadow:0 14px 36px rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.06); }
.info-block .info-topbar{
  height:14px; background:var(--brand);
  /*
  border-top-left-radius:0; border-top-right-radius:0;
  border-bottom-left-radius:16px; border-bottom-right-radius:16px;
  */
  /* el contenedor ya tiene borde redondeado: simulamos "recto" arriba con topbar plano */
}

/* Menú de anclas con separadores (pipes) */
.anchor-list{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:18px;
  justify-content:center; color:var(--brand);
}
.anchor-list li{ position:relative; }
.anchor-list li + li::before{
  content:""; display:inline-block;
  width:2px; height:20px;                /* ↑ grosor y altura */
  background:var(--brand); opacity:.95;
  margin:0 18px 0 0; position:relative; top:2px;
}
.anchor-link{ 
  color:var(--brand); 
  text-decoration:none; 
  font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.225rem); /* sube tamaño en responsive */
  font-weight: 600;
  letter-spacing: .02em;
}
.anchor-link:hover{ text-decoration:underline; color:var(--brand) !important; }
.anchor-link.btn-link{ border:0; background:transparent; padding:0; }

/* ——— Móvil: una sola línea con scroll horizontal suave y snap ——— */
@media (max-width: 575.98px){
  .anchor-nav{
    overflow-x:auto; -webkit-overflow-scrolling: touch;
    scroll-behavior:smooth;                 /* scroll suave */
  }
  .anchor-list{
    flex-wrap:nowrap; gap:22px;
    white-space:nowrap;
    scroll-snap-type:x proximity;
    padding-bottom:.25rem;                  /* que no tape el borde inferior del contenedor */
  }
  .anchor-list li{ scroll-snap-align:center; }
  .anchor-list li + li::before{
    height:22px; width:2px; margin:0 16px 0 0; top:2px;   /* pipe un pelín mayor en móvil */
  }
}







/* Tarjeta de sección interna */
.section-card{ background:#fff; border:1px solid rgba(0,0,0,.06); }

/* Enlace de leer/ver más a ancho completo con flecha a la derecha */
.toggle-more{
  display:flex !important;           /* sustituye al d-inline-flex */
  align-items:center;
  width:100%;
  gap:.25rem;
  padding: .125rem 0;                /* tacto sin romper layout */
  color: var(--brand);
  text-decoration: none;
}

.toggle-more span{ flex: 0 0 auto; } /* texto a la izquierda */
.toggle-more .chev{
  margin-left:auto;                  /* empuja la flecha al extremo derecho */
  flex: 0 0 auto;
}

/* Flechita: girar cuando está abierto */
.toggle-more .bi-chevron-down{ transition: transform .15s ease; }
.toggle-more[aria-expanded="true"] .bi-chevron-down{ transform: rotate(180deg); }

/* Texto expandido */
.more-text{ line-height:1.6; color:#444; }

/* Color general del texto en esta página */
div[data-page="atlas"]{ color:#081c25; }

/* El gris semioscuro solicitado (#737373) para “text-muted” de esta página */
div[data-page="atlas"] .text-muted{ color:#737373 !important; }


/*********** HELPER ***********/
/* Para aplicarlo en todo tipo de botones */

/* Modificador reutilizable */
.btn-cta-xl{
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.225rem);
  letter-spacing: .02em;
  padding-left: 2rem;
  padding-right: 2rem;
}
@media (min-width: 768px){
  .btn-cta-xl{ padding-left: 2.7rem; padding-right: 2.7rem; }
}




/* Colores/estilos de marca dentro del modal */
.modal-header { position: relative; padding-right: 3rem; } /* espacio para el aspa */
.modal-close-brand {
  position: absolute;
  top: .75rem;
  right: .75rem;
  line-height: 1;
}  

.modal-brand a {
  color: var(--brand);
  text-decoration: underline;
}
.modal-brand a:hover {
  text-decoration: none;
}
.btn-brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-brand:hover,
.btn-brand:focus {
  filter: brightness(0.92);
  color: #fff;
}
.text-brand { color: var(--brand) !important; }
.text-brand-white { color: var(--brand-light) !important; }



/* Estilos del grid de capítulos */
.cap-card{ position:relative; display:block; border-radius:14px; overflow:hidden; padding:18px; min-height:150px;
          background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45)), var(--bg, #9fb7c6) center/cover no-repeat; 
          color:#fff; text-decoration:none; box-shadow:0 10px 26px rgba(0,0,0,.08); transition: transform .15s ease, box-shadow .15s ease; }
.cap-card:hover{ transform: translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.12); }
.cap-badge{ display:inline-block; font-weight:800; letter-spacing:.02em; background:rgba(255,255,255,.14); padding:.25rem .55rem; border-radius:999px; font-size:.85rem; }
.cap-title{ margin: 34px 0 0; font-size: clamp(1.05rem, .9rem + .6vw, 1.25rem); font-weight:800; line-height:1.2; }
.cap-card[aria-selected="true"]{ outline: 3px solid rgba(19,160,214,.65); outline-offset: 2px; }

/* Prosa del visor */
#capituloViewer .prose p{ line-height:1.7; color:#2c3a43; }
#capituloViewer h3{ color: var(--brand, #13a0d6); margin-top: .25rem; }

.card-soft{ background:#fff; border:0; border-radius:14px; box-shadow: 0 12px 30px rgba(0,0,0,.06); }

/* === Tablas de capítulo: cabecera azul y texto blanco === */
#capituloViewer .prose table{ width:100%; border-collapse:collapse; margin:1rem 0; }
#capituloViewer .prose table td,
#capituloViewer .prose table th{ border:1px solid rgba(0,0,0,.15); padding:.6rem .75rem; vertical-align:top; }
/* Aplica a thead/th y también a la primera fila cuando viene de Word sin <thead> */
#capituloViewer .prose table thead th,
#capituloViewer .prose table thead tr:first-child td{ background: var(--brand, #13a0d6) !important; color:#fff !important; font-weight:700; }
/* Resto de celdas en negro */
#capituloViewer .prose table tbody td,
#capituloViewer .prose table tr:not(:first-child) td{ color:#111; }
/* Responsivo: scroll en móvil si la tabla es ancha */
@media (max-width: 576px){
#capituloViewer .prose table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* Fade-in suave cuando cambia el contenido del visor */
#capContent.cap-fade{ animation: capFade .48s ease both; }
@keyframes capFade{
from{ opacity:0; transform: translateY(6px); }
to{ opacity:1; transform: none; }
}