:root{
  --brand:#0f4c81;      /* azul principal */
  --brand-dark:#0a365c; /* barra superior oscura */
}

/* helpers */
.text-brand{color:var(--brand)}
.bg-brand{background:var(--brand)}
.bg-brand-dark{background:var(--brand-dark)}
.stroke-brand{stroke:var(--brand)}


/* ===== MENÚ personalizado ===== */
.dropdown-root{display:inline-block}

.menu-btn,
header nav ul li a {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:4px;
  font-weight:800;
  color:#063a57;
  transition:all .2s ease;
  position:relative;
  
}

/* Hover o activo → mismo estilo de botón */
.menu-btn:hover,
header nav ul li a:hover,
.menu-active {
  background:#e8f2ff;
  color:#0a5a8b;
}

/* Barras laterales en hover o activo */
.menu-btn:hover::before,
.menu-btn:hover::after,
.menu-active::before,
.menu-active::after,
header nav ul li a:hover::before,
header nav ul li a:hover::after {
  content:"";
  position:absolute;
  top:6px;
  bottom:6px;
  width:3px;
  border-radius:2px;
  background:#5a7c8c;
}

.menu-btn:hover::before,
.menu-active::before,
header nav ul li a:hover::before {
  left:-6px;
}
.menu-btn:hover::after,
.menu-active::after,
header nav ul li a:hover::after {
  right:-6px;
}

/* Dropdown: igual ancho que el botón y separadores SIEMPRE visibles */
.menu-dropdown{
  position:absolute;
  left:0;
  top:calc(100% + 6px);
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:4px;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
  border-top:3px solid var(--brand);
  z-index:50;
  min-width:100%;
}

.dropdown-link{
  display:block;
  padding:11px 14px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.2px;
  color:#0b3f5d;
  white-space:nowrap;
}
.menu-dropdown .dropdown-link + .dropdown-link{
  border-top:1px solid #e6edf4; /* SIEMPRE visible */
}
.dropdown-link:hover{
  background:#f2f6fc;
  color:#0a5a8b;
}


/* ===== CARRUSEL (fade suave, sin parpadeos) ===== */
.carousel-wrapper{
  aspect-ratio: 16/7; /* 1600x700 recomendado */
  position: relative;
}
.carousel-slide{
  position:absolute;inset:0;
  opacity:0;transition:opacity 1.5s ease-in-out;
  background:#0c1929; /* color de fondo mientras carga, evita “blanco” */
}
.carousel-slide.active{
  opacity:1;z-index:10;
}
.carousel-slide img{
  width:100%;height:100%;object-fit:cover;
}


/* ===== Ajustes de logo (override a Tailwind) ===== */

header nav{
  justify-content: space-between;   /* logo a la izquierda, menú a la derecha */
}


header .logo-wrap{
  margin-left: 0 !important;        /* elimina el empuje negativo */
  flex: 0 0 auto;
  max-width: 260px;                 /* evita que invada el menú */
}

header .logo-wrap img{
  height: 80px !important;
  width: 100%;
  max-width: 260px;
  object-fit: contain;
}

/* Ajuste fino cuando el ancho baja (tu caso <1700) */
@media (max-width: 1700px){
  header .logo-wrap{ max-width: 220px; }
  header .logo-wrap img{ max-width: 220px; }
}

/* Ajustes responsivos */
@media (max-width: 1024px) {
  header .logo-wrap img { height: 86px !important; max-width: 240px; }
  header .logo-wrap { max-width: 240px; }
}
@media (max-width: 768px) {
  header .logo-wrap img { height: 72px !important; max-width: 200px; }
  header .logo-wrap { max-width: 200px; }
}

/* ===== FADE OUT animation ===== */
.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
  
}

/* ===== CHATBOT ===== */

#chat-panel {
  transform: translateY(7px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease-out, transform .18s ease-out;
}

#chat-panel.chat-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* esconder scroll feo dentro del chat */
#chat-messages {
  scrollbar-width: thin;
  scrollbar-color: #cbd5f5 transparent;
}

#chat-messages::-webkit-scrollbar {
  width: 6px;
}
#chat-messages::-webkit-scrollbar-track {
  background: transparent;
}
#chat-messages::-webkit-scrollbar-thumb {
  background-color: #cbd5f5;
  border-radius: 999px;
}



/* === Modal estilo "alerta" === */
.app-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: flex-start; /* alinea arriba */
  justify-content: center; /* centrado horizontal */
  padding-top: 8vh; /* espacio desde el top */
  z-index: 9999;
}

.app-modal-content {
  transform: translateY(-150px); /* mueve hacia arriba */
  /* o translateY(50px) para mover hacia abajo */
}
.app-modal{
  width:min(620px, 92vw);
  background:#0b2f46; color:#fff; border-radius:16px;
  padding:28px 24px; box-shadow:0 20px 60px rgba(0,0,0,.35);
  text-align:center; animation:modIn .18s ease-out;
}
.app-modal h3{
  margin:0 0 14px; font-size:22px; font-weight:800; letter-spacing:.2px;
}
.app-modal p{
  margin:0 0 22px; font-size:16px; line-height:1.45; opacity:.95;
}
.app-modal .modal-actions{ display:flex; gap:10px; justify-content:center; }
.app-modal .btn-ok{
  appearance:none;border:1px solid #fff; border-radius:10px; cursor:pointer; 
  background:#0b2f46; color:#fff; padding:10px 22px; font-weight:800;
}
.app-modal .btn-cancel{
  appearance:none; border:2px solid #fff; border-radius:10px; cursor:pointer;
  background:transparent; color:#fff; padding:8px 18px; font-weight:700;
}
@keyframes modIn{ from{ transform:translateY(-56px); opacity:.85 } to{ transform:none; opacity:1 } }


.app-modall{
  width:min(620px, 92vw);
  background:#546976; color:#fff; border-radius:16px;
  padding:28px 24px; box-shadow:0 20px 60px rgba(0,0,0,.35);
  text-align:center; animation:modIn .18s ease-out;
}

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


/* ===== Sidebar móvil (solo < md) ===== */
@media (max-width: 767px) {
  /* Backdrop */
  .mobile-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 60;
  }

  /* Drawer */
  .mobile-drawer{
    position: fixed;
    top: 0;
    right: 0;
    width: min(86vw, 360px);
    height: 100vh;
    background: #fff;
    z-index: 70;
    border-left: 1px solid #e2e8f0;
    box-shadow: -20px 0 60px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
  }

  .mobile-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 14px 14px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
  }

  .mobile-drawer-body{
    padding: 10px 10px 18px;
    overflow-y: auto;
  }

  .m-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width: 100%;
    padding: 12px 12px;
    border-radius: 12px;
    font-weight: 800;
    color: #063a57;
    text-decoration: none;
  }

  .m-link:hover{ background:#f1f5f9; }

  .m-link-btn{
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  .m-sub{
    margin: 6px 0 10px;
    padding-left: 10px;
    border-left: 2px solid #e2e8f0;
  }

  .m-sublink{
    display:block;
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 700;
    color: #0b3f5d;
    text-decoration: none;
    font-size: 14px;
  }

  .m-sublink:hover{ background:#f1f5f9; }

  .m-login{
    margin-top: 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 12px 12px;
    border-radius: 12px;
    background: #002b57;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
  }
  .m-login:hover{ background:#003b73; }

  /* Quita el margin-left agresivo del logo en móvil (si existe en tu style general) */
  header .logo-wrap {
    margin-left: 0 !important;
  }

  /* Botón cerrar más estético */
  .m-close-btn{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #0b3f5d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
    transition: transform .12s ease, background .12s ease;
  }
  .m-close-btn:hover{ background:#f8fafc; transform: translateY(-1px); }
  .m-close-btn:active{ transform: translateY(0px); }
}

@media (max-width: 767px){

  /* 1) NO tocar misión/visión (queda igual) */
  #mision-vision { padding-left: 2rem; padding-right: 2rem; } /* si ya te gusta, puedes borrar esta línea */

  /* 2) QUIÉNES SOMOS: imagen full width + altura consistente */
  #quienes_somos .rounded-2xl.overflow-hidden.border.bg-white{
    width: 100%;
    height: 210px;              /* ajusta si quieres 190-240 */
    max-height: none !important; /* anula max-h-[320px] en móvil */
  }
  #quienes_somos img{
    width: 100%;
    height: 100% !important;    /* fuerza el fill */
    object-fit: cover;
  }

  /* 3) OBJETIVOS: imagen full width + altura consistente */
  #objetivos .rounded-2xl.overflow-hidden.border.bg-white{
    width: 100%;
    height: 200px;
    max-height: none !important; /* anula max-h-[300px] en móvil */
  }
  #objetivos img{
    width: 100%;
    height: 100% !important;
    object-fit: cover;
  }

  /* 4) Texto (solo quienes_somos y objetivos) */
  #quienes_somos h2,
  #objetivos h2{
    font-size: 22px !important;
    line-height: 1.15;
    margin-bottom: 10px !important;
  }

  #quienes_somos p,
  #objetivos p,
  #objetivos li{
    font-size: 15px !important;
    line-height: 1.75 !important;
  }

  /* 5) Evita “justificado feo” en móvil (opcional pero recomendado) */
  #quienes_somos p,
  #objetivos p,
  #objetivos li{
    text-align: left !important;
  }

  /* 6) Reduce gaps en móvil (más compacto) */
  #entidad{ padding-top: 28px !important; padding-bottom: 28px !important; }
  #entidad .gap-10{ gap: 18px !important; }

  #quienes_somos p,
  #objetivos p,
  #objetivos li{
    text-align: justify !important;
  }
}