/* =======================================================
   UTEGRA — Componentes compartidos
   Incluido por TODAS las páginas (header-call, WhatsApp CTA, animaciones reveal)
   Carga DESPUÉS de menu.css y ANTES del CSS propio de la página.
======================================================= */

/* ===== Botón "Llamar" en header (solo móvil) ===== */
.header-call {
  display: none;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  margin-right: 12px;
  padding: 7px 13px;
  background: var(--azul-cta, #3282B4);
  color: #fff;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(50,130,180,.35);
  transition: background .2s, transform .2s;
}
.header-call:hover,
.header-call:active {
  background: #2879a3;
  transform: scale(1.04);
  color: #fff;
}
.header-call i { font-size: 0.85rem; }
.header-call span { line-height: 1; }

@media (max-width: 992px) {
  .header-call { display: inline-flex; }
}
@media (max-width: 380px) {
  .header-call { padding: 8px 10px; }
  .header-call span { display: none; }
}

/* =======================================================
   WHATSAPP CHAT CTA — Asistente conversacional flotante
======================================================= */
.wa-fab{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(18, 140, 126, 0.45);
  z-index: 3500;
  transition: transform .25s, box-shadow .25s;
}
.wa-fab:hover{ transform: scale(1.08); box-shadow: 0 12px 28px rgba(18, 140, 126, 0.55); }
.wa-fab.hidden{ display: none; }

/* Estado abierto: el FAB mantiene su color verde para combinar visualmente
   con el chat. Solo se oculta el pulso y el JS cambia el ícono whatsapp → X. */
.wa-fab.is-open .wa-fab-pulse{ display: none; }

/* Chat base — posición fija en TODAS las páginas (no solo prog-page).
   Sin esto el chat se renderiza inline al final del body. */
.wa-chat{
  position: fixed; right: 22px; bottom: 100px;
  width: 350px; max-width: calc(100vw - 30px); max-height: 78vh;
  background: #ECE5DD; border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  z-index: 3600;
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(20px) scale(.96);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

/* En páginas internas de programa (CENEVAL / lic / mae) el FAB se OCULTA,
   porque el botón flotante "Preinscribirme" ya cumple esa función (abre el chat).
   El chat se abre del MISMO lado del botón Preinscribirme (derecha) para que
   sea visualmente coherente. */
body.prog-page .wa-fab{ display: none !important; }

/* Botón flotante "Hablar con asesor" — verde WhatsApp en TODAS las páginas internas
   (override universal por si algún CSS específico le pone otro color) */
body.prog-page .btn-preinscripcion{
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(18,140,126,.35) !important;
  border: 0 !important;
}
body.prog-page .btn-preinscripcion:hover{
  box-shadow: 0 12px 26px rgba(18,140,126,.5) !important;
  transform: translateY(-2px);
}
/* Anillo animado VERDE alrededor del botón (en lugar del naranja) */
body.prog-page .btn-preinscripcion::before{
  border-color: #25d366 !important;
}

/* Transición suave del botón */
body.prog-page .btn-preinscripcion{
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

/* Cuando el chat está abierto, el botón se TRANSFORMA en "X Cerrar" */
body.chat-open .btn-preinscripcion,
body.prog-page .btn-preinscripcion.is-close{
  background: linear-gradient(135deg, #1f2c45 0%, #128c7e 100%) !important;
}
body.chat-open .btn-preinscripcion::before{
  animation: none !important;
  opacity: 0 !important;
}

body.prog-page .wa-chat{
  position: fixed; right: 22px; bottom: 100px;
  width: 350px; max-width: calc(100vw - 30px);
  /* dvh: en iPad/iOS se contrae con el teclado. Tope 620px para que no se haga
     gigante en pantallas altas (iPad Pro 12.9"). */
  max-height: min(620px, calc(100dvh - 130px));
  height: auto;
  background: #ECE5DD; border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  z-index: 3600;
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(20px) scale(.96);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.wa-chat.is-open{
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

/* HEADER — estilo WhatsApp (verde familiar y confiable) */
.wa-chat-header{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #128c7e, #075e54);
  color: #fff;
}
.wa-chat-avatar{
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0; color: #fff;
}
.wa-chat-meta{ flex: 1; line-height: 1.25; }
.wa-chat-meta h4{ margin: 0; color: #fff; font-size: 1rem; font-weight: 700; font-family: 'Poppins', sans-serif; }
.wa-chat-meta span{ font-size: 0.78rem; color: rgba(255,255,255,.85); display: flex; align-items: center; gap: 5px; }
.wa-chat-meta span i{ font-size: 8px; color: #4ade80; }
.wa-chat-close{ display: none; }

/* BODY — fondo beige clásico WhatsApp */
.wa-chat-body{
  flex: 1; padding: 16px 14px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  background-color: #ECE5DD;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.4) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.3) 0, transparent 40%);
  scroll-behavior: smooth;
}
.wa-chat-body::-webkit-scrollbar{ width: 6px; }
.wa-chat-body::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 3px; }

/* BURBUJAS */
.wa-bubble{
  max-width: 85%; padding: 10px 14px; border-radius: 12px;
  font-size: 0.92rem; line-height: 1.45;
  color: #1f2c45; word-wrap: break-word;
  animation: waBubbleIn .3s ease-out;
  position: relative;
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
.wa-bubble.bot{ align-self: flex-start; background: #fff; border-top-left-radius: 4px; }
.wa-bubble.user{ align-self: flex-end; background: #DCF8C6; border-top-right-radius: 4px; color: #1f2c45; }
@keyframes waBubbleIn{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }

/* ESCRIBIENDO */
.wa-typing{ align-self: flex-start; background: #fff; padding: 12px 16px; border-radius: 12px; border-top-left-radius: 4px; display: inline-flex; gap: 4px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.wa-typing span{ width: 7px; height: 7px; background: #999; border-radius: 50%; animation: waTyping 1.2s infinite ease-in-out; }
.wa-typing span:nth-child(2){ animation-delay: .15s; }
.wa-typing span:nth-child(3){ animation-delay: .30s; }
@keyframes waTyping{ 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* BOTONES DE OPCIONES — verde WhatsApp */
.wa-options{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; align-self: flex-start; max-width: 100%; animation: waBubbleIn .35s ease-out; }
.wa-option-btn{
  background: #fff; color: #128c7e;
  border: 1.5px solid #128c7e;
  padding: 8px 14px; border-radius: 18px;
  font-size: 0.88rem; font-weight: 600;
  cursor: pointer; transition: all .2s;
  font-family: 'Poppins', sans-serif;
}
.wa-option-btn:hover{ background: #128c7e; color: #fff; transform: translateY(-1px); }

/* INPUT */
.wa-input-row{ display: flex; gap: 6px; margin-top: 4px; align-self: stretch; }
.wa-input-row input{
  flex: 1; padding: 10px 14px;
  border: 1.5px solid #ccc; border-radius: 20px;
  /* 16px obligatorio: si baja de 16px, iOS Safari hace zoom al enfocar
     y NO regresa solo. !important garantiza que ninguna regla lo pise. */
  font-size: 16px !important;
  outline: none;
  font-family: 'Poppins', sans-serif; background: #fff;
  -webkit-text-size-adjust: 100%;
}
.wa-input-row input:focus{ border-color: #128c7e; }
.wa-input-row button{
  background: #128c7e; color: #fff; border: 0;
  width: 40px; border-radius: 50%; cursor: pointer; font-size: 16px;
  transition: background .2s, transform .2s;
}
.wa-input-row button:hover{ background: #075e54; transform: scale(1.05); }

.wa-send-final{
  align-self: stretch;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff; border: 0; padding: 13px 18px;
  border-radius: 12px; font-weight: 700; font-size: 0.98rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 4px 14px rgba(18,140,126,.35);
  transition: transform .2s, box-shadow .2s;
  margin-top: 6px; text-decoration: none;
}
.wa-send-final:hover{ transform: translateY(-2px); box-shadow: 0 8px 22px rgba(18,140,126,.45); color: #fff; }
.wa-send-final i{ font-size: 18px; }

.wa-chat-footer{
  text-align: center; padding: 9px;
  font-size: 0.72rem; color: var(--azul-osc, #1F2C45);
  background: #fff;
  border-top: 1px solid #e8eaef;
  opacity: .65;
}
.wa-chat-footer strong{ color: var(--azul, #273375); opacity: 1; }

/* ===== Tablet / iPad (481–1024px): anclado abajo-derecha con altura controlada =====
   Cubre iPad mini portrait/landscape, iPad regular portrait, iPad Pro 11" portrait
   y todos los iPad en landscape salvo Pro 12.9". */
@media (min-width: 481px) and (max-width: 1024px){
  .wa-chat,
  body.prog-page .wa-chat{
    right: 18px !important;
    left: auto !important;
    bottom: 96px !important;
    width: min(420px, calc(100vw - 36px)) !important;
    max-width: calc(100vw - 36px) !important;
    /* min() permite que en pantallas chiquitas (iPad mini landscape: 768px alto)
       el chat no sea más alto que la pantalla útil, y en pantallas grandes
       (iPad Pro portrait: 1180px alto) se quede en 560px como tope cómodo. */
    max-height: min(560px, calc(100dvh - 140px)) !important;
    height: auto;
  }
  .wa-chat-body{ padding: 14px 12px; }
  .wa-bubble{ font-size: .9rem; padding: 9px 12px; }
}

/* ===== iPad mini en landscape (~768px ancho, 1024 alto rotado) y similares
   donde el alto disponible es chiquito: limitar más la altura ===== */
@media (max-height: 600px) and (min-width: 481px){
  .wa-chat,
  body.prog-page .wa-chat{
    max-height: calc(100dvh - 120px) !important;
    bottom: 88px !important;
  }
}

/* ===== Móvil (≤480px): bottom-sheet de altura controlada ===== */
@media (max-width: 480px){
  .wa-fab{ width: 56px; height: 56px; font-size: 26px; right: 16px; bottom: 16px; }

  /* dvh = dynamic viewport height: SÍ se ajusta cuando se abre el teclado iOS/Android.
     Sin esto, el chat queda detrás del teclado o se ve gigante. */
  .wa-chat,
  body.prog-page .wa-chat{
    right: 12px !important;
    left: 12px !important;
    bottom: 84px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(560px, calc(100dvh - 110px)) !important;
    height: calc(100dvh - 110px);
    border-radius: 16px;
  }

  /* Header del chat más compacto */
  .wa-chat-header{ padding: 10px 12px; }
  .wa-chat-avatar{ width: 36px; height: 36px; font-size: 17px; }
  .wa-chat-meta h4{ font-size: .92rem; }
  .wa-chat-meta span{ font-size: .72rem; }

  /* Body con menos padding y burbujas más chicas */
  .wa-chat-body{ padding: 12px 10px; gap: 8px; }
  .wa-bubble{ font-size: .88rem; padding: 8px 12px; line-height: 1.4; }

  /* Input con padding reducido pero font-size 16px se mantiene (anti-zoom iOS) */
  .wa-input-row{ margin-top: 2px; gap: 5px; }
  .wa-input-row input{ padding: 9px 12px; }
  .wa-input-row button{ width: 38px; }

  /* Footer más fino */
  .wa-chat-footer{ padding: 7px; font-size: .66rem; }

  /* Botones de opciones */
  .wa-option-btn{ padding: 7px 12px; font-size: .82rem; }
}

/* ===== Móvil chico (≤360px): bottom-sheet ocupa todo el ancho ===== */
@media (max-width: 360px){
  .wa-chat,
  body.prog-page .wa-chat{
    right: 8px !important;
    left: 8px !important;
    bottom: 78px !important;
    max-height: min(520px, calc(100dvh - 100px)) !important;
    height: calc(100dvh - 100px);
  }
}

/* =======================================================
   Footer admin link
======================================================= */
.footer-sep{ color: rgba(255, 255, 255, 0.35); margin: 0 4px; }
.footer-admin{
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.82rem;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 0.2s;
}
.footer-admin:hover{ color: var(--azul-cta, #3282B4); text-decoration: underline; }
.footer-admin i{ font-size: 0.75rem; }

/* =======================================================
   Animaciones reveal al hacer scroll (data-animate)
======================================================= */
[data-animate]{ /* el JS añade .in-view */ }