/* =====================================================================
   APICE — Cabecera, navegación, pie de página, widget de voicebot
   ===================================================================== */

/* ============================== HEADER ============================== */
.site-header {
  position: sticky; top: 0; z-index: 120;
  height: var(--header-h);
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: 20px; min-width: 0; }
.nav { min-width: 0; }

/* Logotipo oficial — cambia de versión según el tema.
   Los selectores llevan la misma especificidad para que el cambio funcione
   en ambos sentidos sin depender del orden de las reglas. */
.logo { display: inline-flex; align-items: flex-end; gap: 10px; flex: none; }
.logo:hover { color: inherit; }
.logo__img { display: block; flex: none; }
.logo__img img { height: 30px; width: auto; }

.logo__img img.logo__color  { display: block; }
.logo__img img.logo__blanco { display: none; }

:root[data-theme="dark"] .logo__img img.logo__color  { display: none; }
:root[data-theme="dark"] .logo__img img.logo__blanco { display: block; }

/* Contextos siempre oscuros: pie de página y panel de acceso */
.logo--claro .logo__img img.logo__color  { display: none; }
.logo--claro .logo__img img.logo__blanco { display: block; }

.logo__tag {
  font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.19em;
  text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap; line-height: 1; padding-bottom: 4px;
}
.logo--claro .logo__tag { color: #7D9C99; }
.site-footer .logo__img img { height: 34px; }
@media (max-width: 520px) {
  .logo__img img { height: 26px; }
  .logo__tag { display: none; }
}

/* Navegación principal */
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav__link {
  position: relative;
  font-family: var(--font-display); font-size: var(--fs-base); font-weight: 550;
  color: var(--text-soft); padding: 9px 13px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: 5px;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--text); background: var(--surface-3); }
.nav__link[aria-current="page"] { color: var(--primary); font-weight: 650; }
.nav__link svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }

/* Menú desplegable */
.nav__item { position: relative; }
.nav__item:hover > .nav__link svg, .nav__item:focus-within > .nav__link svg { transform: rotate(180deg); }
/* El desplegable arranca pegado al enlace y deja el aire por dentro
   (padding-top). Así el puntero nunca cruza un hueco vacío camino al menú,
   que era lo que lo hacía cerrarse antes de poder elegir una opción. */
.dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 330px;
  padding-top: 10px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}
.dropdown__caja {
  padding: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xl);
}
.nav__item:hover > .dropdown, .nav__item:focus-within > .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s linear 0s;
}
.dropdown__link {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-md); color: var(--text);
  transition: background-color var(--dur) var(--ease);
}
.dropdown__link:hover { background: var(--surface-brand); color: var(--text); }
.dropdown__link strong { display: block; font-family: var(--font-display); font-size: var(--fs-base); font-weight: 620; }
.dropdown__link span { display: block; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; }
.dropdown__link .icon-pill { width: 34px; height: 34px; border-radius: 10px; }
.dropdown__link .icon-pill svg { width: 17px; height: 17px; }

/* Acciones de cabecera */
.header-actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* Selector de tema */
.theme-toggle {
  display: inline-flex; background: var(--surface-3); border-radius: var(--r-full);
  padding: 3px; gap: 1px; border: 1px solid var(--border-soft);
}
.theme-toggle button {
  appearance: none; border: 0; background: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: var(--r-full);
  display: grid; place-items: center; color: var(--text-muted);
  transition: all var(--dur) var(--ease);
}
.theme-toggle button:hover { color: var(--text); }
.theme-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-xs); }
.theme-toggle svg { width: 16px; height: 16px; }

/* ===================== MENÚ DE USUARIO ============================== */
.usuario-menu { position: relative; }
.usuario-menu__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 5px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text); cursor: pointer;
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.usuario-menu__btn:hover { border-color: var(--brand-300); background: var(--surface-2); }
.usuario-menu__btn svg { width: 15px; height: 15px; color: var(--text-muted); transition: transform var(--dur) var(--ease); }
.usuario-menu.is-abierto .usuario-menu__btn svg { transform: rotate(180deg); }
.usuario-menu__avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--grad-accent); color: #fff;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .02em;
}

.usuario-menu__panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 262px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xl);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  /* La visibilidad no se interpola: se apaga de golpe al terminar el desvanecido
     y se enciende de inmediato al abrir. Transicionarla como las demás la deja
     a medias si el navegador pausa el renderizado (pestaña en segundo plano). */
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
  z-index: 130;
}
.usuario-menu.is-abierto .usuario-menu__panel {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s linear 0s;
}

.usuario-menu__cabecera {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}
.usuario-menu__cabecera strong { font-family: var(--font-display); font-size: var(--fs-base); }
.usuario-menu__cabecera span { font-size: var(--fs-xs); color: var(--text-muted); word-break: break-all; }
.usuario-menu__cabecera .badge { align-self: flex-start; }

.usuario-menu__op {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: var(--r-md);
  background: none; color: var(--text); cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: var(--fs-base); font-weight: 550;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.usuario-menu__op:hover { background: var(--surface-brand); color: var(--on-brand-soft); }
.usuario-menu__op svg { width: 17px; height: 17px; flex: none; color: var(--text-muted); }
.usuario-menu__op:hover svg { color: var(--on-brand-soft); }
.usuario-menu__sep { height: 1px; background: var(--border-soft); margin: 6px 4px; }
.usuario-menu__op--salir { color: var(--danger-fg); }
.usuario-menu__op--salir svg { color: var(--danger-fg); }
.usuario-menu__op--salir:hover { background: var(--danger-bg); color: var(--danger-fg); }

/* Menú móvil */
.burger { display: none; }
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0; z-index: 110;
  background: var(--bg);
  padding: 24px 20px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 280ms var(--ease);
  border-top: 1px solid var(--border);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav a {
  display: block; padding: 13px 14px; border-radius: var(--r-md);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--text);
}
.mobile-nav a:hover { background: var(--surface-3); }
.mobile-nav .sub a { font-size: var(--fs-base); font-weight: 500; color: var(--text-soft); padding-left: 26px; }
.mobile-nav__sep { height: 1px; background: var(--border); margin: 14px 6px; }

/* Entre el menú completo y las acciones hay un rango de anchos donde no caben
   juntos: se retira primero el botón de acción y se comprime la navegación. */
@media (max-width: 1360px) {
  .header-actions .btn--cta { display: none; }
}
@media (max-width: 1220px) {
  .nav__link { padding: 9px 9px; }
  .site-header__inner { gap: 12px; }
}

@media (max-width: 1080px) {
  .nav { display: none; }
  .burger {
    display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: var(--r-full);
    background: var(--surface-3); border: 1px solid var(--border);
    cursor: pointer; color: var(--text); margin-left: auto;
  }
  .burger svg { width: 21px; height: 21px; }
  .header-actions .btn--cta { display: none; }
}
@media (min-width: 1081px) { .mobile-nav { display: none; } }

/* En pantallas angostas la cabecera se reduce a marca + sesión + menú.
   El selector de tema pasa al menú desplegable. */
@media (max-width: 560px) {
  .site-header__inner { gap: 10px; }
  .header-actions { gap: 6px; }
  .header-actions > .theme-toggle { display: none; }
  .header-actions [data-zona-sesion] .btn { padding: 6px; width: 34px; min-height: 34px; }
  .etiqueta-usuario { display: none; }
  .usuario-menu__btn { padding: 4px; }
  .usuario-menu__btn > svg { display: none; }
  .usuario-menu__panel { right: -6px; min-width: 240px; }
  .burger { width: 38px; height: 38px; }
}

/* Selector de tema dentro del menú móvil */
.mobile-nav .theme-toggle { width: 100%; justify-content: space-between; padding: 5px; }
.mobile-nav .theme-toggle button { flex: 1; height: 38px; width: auto; gap: 8px; font-size: var(--fs-sm); }
.mobile-nav .theme-toggle button::after {
  content: attr(data-etiqueta);
  font-family: var(--font-display); font-weight: 600;
}

/* ============================== FOOTER ============================== */
.site-footer {
  background: var(--brand-950);
  color: #C7DAD8;
  padding: clamp(48px, 6vw, 80px) 0 0;
  margin-top: auto;
}
:root[data-theme="dark"] .site-footer { background: #05100F; border-top: 1px solid var(--border); }
.site-footer h4 {
  color: #fff; font-size: var(--fs-sm); text-transform: uppercase;
  letter-spacing: 0.13em; margin-bottom: 18px; font-weight: 650;
}
.site-footer a { color: #C7DAD8; font-size: var(--fs-base); }
.site-footer a:hover { color: var(--accent-300); }
/* Nota: repeat(auto-fit) no puede combinarse con tracks flexibles (1.6fr),
   por eso las columnas se declaran de forma explícita por punto de quiebre. */
.footer-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
  padding-bottom: 48px;
}
@media (max-width: 940px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-grid > *:first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.footer-contact { display: grid; gap: 13px; font-size: var(--fs-base); }
.footer-contact > div { display: flex; gap: 11px; align-items: flex-start; }
.footer-contact svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--accent-400); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 22px 0 28px;
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; align-items: center;
  font-size: var(--fs-sm); color: #8FA9A7;
}
.footer-social { display: flex; gap: 9px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.11);
  transition: all var(--dur) var(--ease);
}
.footer-social a:hover { background: var(--accent-600); border-color: transparent; transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }

/* Layout de página completa */
.page { min-height: 100vh; display: flex; flex-direction: column; }
.page > main { flex: 1 0 auto; }

/* ===================== RESPALDO DEL VOICEBOT ========================
   El widget oficial de voicebot.com.co trae sus propios estilos; aquí solo
   se define el botón que aparece si ese widget no alcanza a montarse.
   ------------------------------------------------------------------ */
.vb-respaldo {
  position: fixed; z-index: 2147483644;
  right: 22px; bottom: 22px;
  display: inline-flex; align-items: center; gap: 11px;
  height: 58px; padding: 0 22px 0 11px;
  border-radius: var(--r-full);
  background: var(--grad-accent); color: #fff;
  font-family: var(--font-display); font-weight: 650; font-size: var(--fs-base);
  box-shadow: 0 14px 34px rgba(3, 150, 172, 0.42);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.vb-respaldo:hover {
  color: #fff;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 20px 44px rgba(3, 150, 172, 0.5);
}
.vb-respaldo__ico {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: rgba(255, 255, 255, 0.19);
  display: grid; place-items: center; position: relative;
}
.vb-respaldo__ico::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  animation: vb-pulso 2.4s var(--ease) infinite;
}
@keyframes vb-pulso {
  0%   { transform: scale(0.85); opacity: 0.85; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { opacity: 0; }
}
@media (max-width: 520px) {
  .vb-respaldo { padding: 0; width: 58px; justify-content: center; right: 16px; bottom: 16px; }
  .vb-respaldo__texto { display: none; }
}

/* ===================== IMÁGENES REEMPLAZABLES ====================== */
.img-slot { position: relative; overflow: hidden; background: var(--surface-3); }
.img-slot > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-slot__edit {
  position: absolute; inset: 0; display: none;
  place-items: center; gap: 8px;
  background: rgba(8, 20, 19, 0.62); backdrop-filter: blur(2px);
  color: #fff; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  cursor: pointer; border: 2px dashed rgba(255, 255, 255, 0.6);
  border-radius: inherit; text-align: center; padding: 12px;
}
.img-slot__edit svg { width: 26px; height: 26px; }
body.img-edit-mode .img-slot__edit { display: grid; align-content: center; }
body.img-edit-mode .img-slot { outline: 2px solid var(--accent-500); outline-offset: 2px; }

.edit-bar {
  position: fixed; z-index: 300; left: 50%; transform: translateX(-50%); bottom: 22px;
  display: none; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-full); padding: 9px 9px 9px 20px;
  box-shadow: var(--shadow-xl); font-size: var(--fs-sm);
}
body.img-edit-mode .edit-bar { display: flex; }