/* ==========================================================================
   GestIA · Pantalla de carga, inicio de sesión y estructura de la aplicación
   ========================================================================== */

/* Pantalla de carga */
.boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 20%, #1c3486 0%, #0b1848 45%, #060d2b 100%);
  transition: opacity .5s var(--ease), visibility .5s;
}
.boot.done { opacity: 0; visibility: hidden; }
.boot-inner { display: grid; justify-items: center; gap: 18px; color: #fff; }
.boot-inner .brand-art { width: 76px; height: 76px; animation: pop .7s var(--spring), float 3s ease-in-out .7s infinite; }
.boot-bar { width: 140px; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .14); }
.boot-bar::after { content: ""; display: block; width: 45%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #14a4dc, #22c7b3); animation: boot-bar 1.1s ease-in-out infinite; }
@keyframes boot-bar { from { transform: translateX(-100%); } to { transform: translateX(230%); } }

/* Logotipo GestIA: "IA" se destaca con el degradado de la inteligencia artificial */
.gestia-logo { display: inline-flex; align-items: center; gap: 12px; color: inherit; }

/* Logos de marca con su tratamiento: original, placa blanca o silueta blanca (ver js/core/brand.js) */
.brand-art { display: inline-grid; place-items: center; flex: none; line-height: 0; }
.brand-art img { display: block; object-fit: contain; }
.brand-mark { width: var(--brand-size); height: var(--brand-size); }
.brand-mark img { width: 100%; height: 100%; }
.brand-wordmark img { width: auto; height: var(--brand-size); max-width: 100%; }
.brand-art.is-plate { background: var(--logo-plate-bg); }
.brand-mark.is-plate { padding: calc(var(--brand-size) * var(--logo-plate-pad)); border-radius: 50%; }
.brand-wordmark.is-plate { padding: 7px 14px; border-radius: var(--logo-plate-radius); }
.brand-art.is-white img { filter: brightness(0) invert(1); }
.gestia-word { display: grid; line-height: 1; }
.gestia-word b { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.gestia-word b span { background: var(--grad-ai); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gestia-word small { margin-top: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; opacity: .7; }

/* ---------- Estructura principal ---------- */
.shell { min-height: 100dvh; animation: fade .45s ease; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  isolation: isolate;
  /* clip, no hidden: nada puede desplazar el contenido de la barra y dejarlo recortado */
  overflow: clip;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: var(--sidebar);
  padding: 16px 12px 12px;
  color: #fff;
  background: var(--grad-deep);
  transition: transform .35s var(--ease);
}
.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 10% 0%, rgba(47, 91, 234, .5), transparent 45%),
    radial-gradient(circle at 110% 100%, rgba(20, 164, 220, .35), transparent 45%);
}
.sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--brand-pattern);
  background-size: 56px 56px;
  opacity: .045;
}
.sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px 6px; }
.sidebar-top .btn-icon { display: none; color: #fff; }
.sidebar-top .btn-icon:hover { background: rgba(255, 255, 255, .1); }
.nav { display: grid; align-content: start; gap: 2px; flex: 1; min-height: 0; overflow-x: clip; overflow-y: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: none; }
.nav-label { padding: 10px 10px 4px; font-size: 10.5px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .42); }
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 8px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
  transition: background-color .2s, color .2s;
}
.nav-item:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.nav-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 9px;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  transition: transform .3s var(--spring), background .25s, box-shadow .25s;
}
.nav-icon .i { width: 16px; height: 16px; }
.nav-item:hover .nav-icon { transform: scale(1.08) rotate(-5deg); }
.nav-item.active { color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.nav-item.active .nav-icon { background: var(--tone); box-shadow: 0 8px 18px -8px var(--tone); }
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--tone);
  animation: fade .3s;
}
.nav-item.is-ai .nav-icon { background: var(--grad-violet); }
.nav-badge {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: auto;
  padding: 0 7px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 800;
  color: #3d2600;
  background: #fbbf24;
  animation: pop .4s var(--spring);
}
.sidebar-bottom { display: grid; gap: 10px; }
.scope-card { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .08); }
.scope-card .eyebrow { color: rgba(255, 255, 255, .5); font-size: 10px; }
.scope-card strong { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.scope-card small { font-size: 12px; color: rgba(255, 255, 255, .6); }
.sidebar-bottom, .user-card { min-width: 0; }
.user-card { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; }
/* Un nombre largo no puede empujar el botón de cerrar sesión fuera de la barra. */
.user-card > .avatar, .user-card > .btn-icon { flex: none; }
.user-meta { flex: 1; min-width: 0; }
.user-meta strong { display: block; font-size: 13.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.user-meta small { display: block; font-size: 12px; color: rgba(255, 255, 255, .6); }
.user-card .btn-icon { color: rgba(255, 255, 255, .7); }
.user-card .btn-icon:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.sidebar-dwc { display: flex; align-items: center; gap: 8px; padding: 10px 10px 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 10.5px; color: rgba(255, 255, 255, .45); }
.sidebar-dwc .brand-art { opacity: .85; }

/* En pantallas bajas el menú tiene prioridad sobre la tarjeta de alcance */
@media (max-height: 860px) { .scope-card { display: none; } }

.main { display: flex; flex-direction: column; min-height: 100dvh; margin-left: var(--sidebar); min-width: 0; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--topbar);
  padding: 0 clamp(16px, 2.6vw, 34px);
  background: rgba(243, 246, 251, .96);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.topbar.scrolled { border-color: var(--line); box-shadow: 0 8px 24px -20px rgba(14, 22, 51, .4); }
.menu-btn { display: none; }
.topbar-title { flex: 1; min-width: 0; }
.topbar-title .eyebrow { display: block; font-size: 10.5px; }
.topbar-title h1 { font-size: 19px; font-weight: 800; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.shell[data-view="assistant"] .topbar [data-nav="assistant"] { display: none; }
.sidebar-top > a { color: #fff; }
.scope-card strong .i { width: 15px; height: 15px; opacity: .8; }
.content { width: 100%; max-width: 1440px; margin: 0 auto; padding: 22px clamp(16px, 2.6vw, 34px) 48px; flex: 1; }
.content.is-chat { padding-bottom: 20px; }
.view { display: grid; gap: 22px; }
.view.refreshing { opacity: .6; pointer-events: none; transition: opacity .2s; }
.scrim { display: none; }

@media (max-width: 1024px) {
  .sidebar { transform: translateX(-102%); box-shadow: var(--shadow-lg); }
  .sidebar-top .btn-icon { display: grid; }
  .menu-open .sidebar { transform: none; }
  .scrim { position: fixed; inset: 0; z-index: 45; display: block; background: rgba(6, 13, 43, .5); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .menu-open .scrim { opacity: 1; visibility: visible; }
  .main { margin-left: 0; }
  .menu-btn { display: inline-grid; }
}
@media (max-width: 640px) {
  :root { --topbar: 64px; }
  .topbar .demo-pill { display: none; }
  .topbar [data-nav="assistant"] span { display: none; }
  .topbar [data-nav="assistant"] { width: 40px; padding: 0; }
}