/* Custom styles vanilla Tagora */
*, *::before, *::after { box-sizing: border-box; } /* width:100%+padding must not overflow (e.g. searchbar) */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* guard against absolute-positioned glow-blobs causing horizontal scroll */
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background-color: #f8fafc;
  color: #0f172a;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Outfit', 'Inter', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

.font-display {
  font-family: 'Outfit', 'Inter', sans-serif;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}

.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Fade-in helper */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 150ms ease-out;
}

/* Modal animation */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.zoom-in {
  animation: zoomIn 200ms ease-out;
}

/* Pulse override */
.animate-spin-slow {
  animation: spin 1.5s linear infinite;
}

.font-st6952 {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 3rem;
  font-weight: 200;
}

.title-st6952 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Code/monospace helper for docs pages */
.code-block { font-family: 'Menlo', 'Monaco', 'Consolas', monospace; }

/* Site-nav container must be sticky so the inner navHero sticks across all pages */
#site-nav { position: sticky; top: 0; z-index: 50; }

/* ── Utility ─────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Nav ─────────────────────────────────────────────────── */
.nav {
  width: 100%; box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 768px) { .nav { padding: 1rem 3rem; } }

.nav-left  { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.nav-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; flex-shrink: 0; }
.nav-logo  {
  background: #2563eb; color: #fff;
  width: 2.5rem; height: 2.5rem;
  border-radius: 0.75rem;
  font-size: 1.25rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 6px -1px rgb(0 0 0/.1);
}
.nav-wordmark {
  font-size: 1.5rem; font-weight: 800; color: #0f172a;
  letter-spacing: -0.025em;
  font-family: 'Outfit', 'Inter', sans-serif;
}

.nav-powered {
  display: none;
  align-items: center; gap: 0.5rem;
  padding-left: 0.75rem; margin-left: 0.75rem;
  border-left: 1px solid #cbd5e1;
}
@media (min-width: 640px) { .nav-powered { display: flex; } }
.nav-powered-label {
  font-size: 10px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.nav-powered-logo { height: 1rem; width: 60px; object-fit: contain; flex-shrink: 0; }

.nav-links {
  display: none;
  align-items: center; gap: clamp(0.75rem, 1.5vw, 2rem);
  font-size: 0.875rem; font-weight: 600; color: #475569;
}
.nav-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: inherit; text-decoration: none; transition: color 0.15s;
  white-space: nowrap; /* never wrap "Portal de Integradores" mid-row */
}
.nav-link:hover { color: #2563eb; }

.nav-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.nav-lang-slot { display: flex; align-items: center; }

.nav-mobile-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 0.75rem; border: none; cursor: pointer;
  background: #f1f5f9; color: #334155;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}
.nav-mobile-btn:hover   { background: #e2e8f0; }
.nav-mobile-btn:active  { transform: scale(0.95); }

/* Extra-narrow mobile (e.g. Galaxy Z Fold 5 cover screen): compact the
   logo, language switcher and hamburger so they don't crowd each other. */
@media (max-width: 400px) {
  .nav { padding: 0.75rem; }
  .nav-left, .nav-brand { gap: 0.5rem; }
  .nav-logo { width: 2rem; height: 2rem; font-size: 1rem; }
  .nav-wordmark { font-size: 1.1rem; }
  .nav-actions { gap: 0.375rem; }
  .nav-mobile-btn { width: 2.25rem; height: 2.25rem; }
  .lang-btn {
    padding: 0.25rem 0.5rem; gap: 0.25rem;
    font-size: 0.6875rem;
  }
}

.nav-login {
  display: none;
  background: #0f172a; color: #fff;
  padding: 0.625rem 1.5rem; border-radius: 9999px;
  min-height: 44px;
  font-size: 0.875rem; font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 6px -1px rgb(0 0 0/.1);
  align-items: center;
  transition: background 0.15s, transform 0.1s;
}
.nav-login:hover  { background: #1e293b; }
.nav-login:active { transform: scale(0.95); }

.nav-user { display: none; align-items: center; gap: 0.5rem; }

/* Desktop breakpoint: full nav links + login/user area take over from the
   hamburger drawer trigger. Single consolidated block for all four rules. */
@media (min-width: 1200px) {
  .nav-links      { display: flex; }
  .nav-mobile-btn { display: none; }
  .nav-login      { display: inline-flex; }
  .nav-user       { display: flex; }
}

.nav-username { font-size: 0.875rem; font-weight: 600; color: #0f172a; }
.nav-logout {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  background: transparent; border: 1.5px solid #e2e8f0; color: #64748b;
  padding: 0.375rem 0.875rem; border-radius: 9999px;
  font-size: 0.8125rem; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.nav-logout:hover { border-color: #0f172a; color: #0f172a; }

.nav-mobile-user { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; }
.nav-mobile-user-id { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.nav-mobile-avatar {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: #0f172a; color: #fff;
  font-size: 0.875rem; font-weight: 700;
}
.nav-mobile-username {
  font-size: 0.875rem; font-weight: 600; color: #0f172a;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-mobile-logout {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  flex-shrink: 0;
  background: #0f172a; color: #fff; border: none;
  padding: 0.625rem 1.25rem; border-radius: 9999px;
  font-size: 0.875rem; font-weight: 600; cursor: pointer;
}

/* Mobile menu */
.nav-mobile-menu {
  position: fixed; left: 0; right: 0; top: 69px;
  width: 100%; max-width: 100vw;
  z-index: 60; background: #fff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 20px 25px -5px rgb(0 0 0/.1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.nav-mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}
.nav-mobile-inner {
  display: flex; flex-direction: column;
  padding: 1.5rem; gap: 0.25rem;
  width: 100%; box-sizing: border-box;
}
.nav-mobile-link {
  display: flex; align-items: center; min-height: 44px;
  padding: 0.75rem; border-radius: 0.75rem;
  font-size: 0.875rem; font-weight: 600; color: #334155;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.nav-mobile-link:hover { background: #f1f5f9; color: #2563eb; }
.nav-mobile-bottom {
  padding-top: 0.75rem; margin-top: 0.25rem;
  border-top: 1px solid #f1f5f9;
}
.nav-mobile-login {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  width: 100%; box-sizing: border-box;
  background: #0f172a; color: #fff;
  padding: 0.75rem 1.5rem; border-radius: 9999px;
  font-size: 0.875rem; font-weight: 600; text-decoration: none;
}

/* Flag icon — sprite-referenced SVG (see assets/partials.js ensureFlagSprite),
   fixed 4:3 (20x15) so it renders crisp/identical across OS + browser combos. */
.flag-icon {
  width: 20px; height: 15px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, .1);
  object-fit: cover;
  display: inline-block;
  flex-shrink: 0;
  overflow: hidden;
}

/* Lang switcher */
.lang-switcher { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 0.375rem; min-height: 44px;
  padding: 0.5rem 0.75rem; border-radius: 0.75rem; border: none;
  background: #f1f5f9; color: #334155;
  font-size: 0.75rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s;
}
.lang-btn:hover { background: #e2e8f0; }
.lang-dropdown {
  position: absolute; right: 0; top: calc(100% + 0.5rem);
  width: 10rem; max-width: calc(100vw - 2rem); border-radius: 1rem; overflow: hidden;
  background: #fff; border: 1px solid #e2e8f0;
  box-shadow: 0 20px 25px -5px rgb(0 0 0/.1); z-index: 50;
}
.lang-option {
  width: 100%; display: flex; align-items: center; gap: 0.625rem; min-height: 44px;
  padding: 0.75rem 1rem; border: none; background: none;
  font-size: 0.875rem; font-weight: 600; color: #334155;
  cursor: pointer; text-align: left;
  transition: background 0.1s;
}
.lang-option:hover { background: #f8fafc; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  background: #fff; border-top: 1px solid #e2e8f0;
  padding: 3rem 1.5rem; text-align: center;
  margin-top: auto; flex-shrink: 0;
}
.footer-inner {
  max-width: 72rem; margin: 0 auto;
  display: flex; flex-direction: column;
  align-items: center; gap: 1rem;
  font-size: 0.875rem; color: #94a3b8;
}
@media (min-width: 768px) {
  .footer-inner { flex-direction: row; justify-content: space-between; gap: 0; }
}
/* flex-wrap:wrap es defensivo: en ~375px las 3 frases de .footer-brand (o
   los 3 links) no caben en una sola línea sin wrap (suman más ancho que el
   viewport menos el padding de .site-footer), lo que las dejaba corridas
   una contra otra. En desktop (donde ya caben) esto no cambia nada. */
.footer-brand       { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; row-gap: 0.25rem; }
.footer-brand-name  { font-weight: 700; color: #334155; }
/* Discreta a propósito: es un dato de despliegue, no contenido para el lector. */
.footer-version     { font-size: 0.6875rem; letter-spacing: 0.03em; color: #cbd5e1; font-variant-numeric: tabular-nums; }
.footer-links       { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; row-gap: 0.5rem; font-size: 0.75rem; }
.footer-link        { color: inherit; text-decoration: none; transition: color 0.15s; }
.footer-link:hover  { color: #475569; }

/* ── Searchbar ───────────────────────────────────────────── */
.searchbar { position: relative; width: 100%; }
.searchbar__wrap { position: relative; }
.searchbar__icon {
  position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%);
  width: 1.25rem; height: 1.25rem; pointer-events: none;
  transition: color 0.15s;
}
.searchbar__wrap--dark  .searchbar__icon { color: #64748b; }
.searchbar__wrap--light .searchbar__icon { color: #94a3b8; }
.searchbar__wrap--dark:focus-within  .searchbar__icon { color: #60a5fa; }
.searchbar__wrap--light:focus-within .searchbar__icon { color: #3b82f6; }

.searchbar__input {
  width: 100%; box-sizing: border-box; border-radius: 1rem;
  padding: 1rem 1.5rem 1rem 3.5rem;
  font-size: 1.125rem; border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}
.searchbar__input:focus { outline: none; }
.searchbar__input--dark {
  background: rgb(30 41 59/.4); border-color: rgb(51 65 85/.6);
  color: #e2e8f0; box-shadow: 0 25px 50px -12px rgb(0 0 0/.25);
}
.searchbar__input--dark::placeholder { color: #64748b; }
.searchbar__input--dark:focus { border-color: rgb(59 130 246/.5); background: rgb(30 41 59/.8); }
.searchbar__input--light {
  background: #fff; border-color: #e2e8f0;
  color: #1e293b; box-shadow: 0 4px 6px -1px rgb(0 0 0/.05);
}
.searchbar__input--light::placeholder { color: #94a3b8; }
.searchbar__input--light:focus { border-color: #3b82f6; }

.searchbar__results {
  position: absolute; top: 100%; margin-top: 0.75rem;
  width: 100%; border-radius: 1rem; overflow: hidden; z-index: 50;
}
.searchbar__results--dark  { background: #0f172a; border: 1px solid #1e293b; box-shadow: 0 25px 50px -12px rgb(0 0 0/.25); }
.searchbar__results--light { background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgb(0 0 0/.05); }

.searchbar__list  { padding: 0.5rem; max-height: 350px; overflow-y: auto; }
.searchbar__item  { width: 100%; display: flex; align-items: center; gap: 1rem; padding: 0.75rem; border-radius: 0.75rem; text-decoration: none; transition: background 0.1s; }
.searchbar__item--dark:hover  { background: rgb(59 130 246/.1); }
.searchbar__item--light:hover { background: #eff6ff; }
.searchbar__item-icon {
  padding: 0.5rem; border-radius: 0.5rem; flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.searchbar__item--dark  .searchbar__item-icon { background: #1e293b; color: #94a3b8; }
.searchbar__item--light .searchbar__item-icon { background: #f1f5f9; color: #64748b; }
.searchbar__item:hover  .searchbar__item-icon { background: #3b82f6; color: #fff; }
.searchbar__item-body  { flex: 1; min-width: 0; }
.searchbar__item-title { font-weight: 600; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchbar__item--dark  .searchbar__item-title { color: #e2e8f0; }
.searchbar__item--light .searchbar__item-title { color: #1e293b; }
.searchbar__item--dark:hover  .searchbar__item-title { color: #60a5fa; }
.searchbar__item--light:hover .searchbar__item-title { color: #2563eb; }
.searchbar__item-desc  { font-size: 0.75rem; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La palabra buscada, dentro del fragmento de la página donde apareció. Hereda el
   color del texto porque el <mark> del navegador trae un amarillo que no es de aquí. */
.searchbar__mark { background: rgb(59 130 246/.22); color: inherit; border-radius: 2px; padding: 0 1px; font-weight: 600; }
/* El resultado señalado con las flechas se ve igual que el que está bajo el cursor. */
.searchbar__item.is-active { background: rgb(59 130 246/.10); }
.searchbar__item--dark.is-active  .searchbar__item-title { color: #60a5fa; }
.searchbar__item--light.is-active .searchbar__item-title { color: #2563eb; }
.searchbar__empty      { padding: 2rem; text-align: center; font-size: 0.875rem; color: #64748b; }
.searchbar__footer     { padding: 0.5rem 1rem; display: flex; align-items: center; justify-content: space-between; }
.searchbar__footer--dark  { background: rgb(2 6 23/.5); border-top: 1px solid #1e293b; }
.searchbar__footer--light { background: #f8fafc; border-top: 1px solid #e2e8f0; }
.searchbar__label { font-size: 10px; color: #64748b; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; font-family: monospace; }
.searchbar__kbd   { padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 10px; }
.searchbar__kbd--dark  { border: 1px solid #334155; background: #1e293b; color: #94a3b8; }
.searchbar__kbd--light { border: 1px solid #e2e8f0; background: #fff; color: #64748b; }