/* [UX-SHELL] Pegamento de aplicación de Adiut 2.0 — SIN tokens nuevos (todo sale de adiut2-tokens.css).
   Solo aplica en /v2 (body.a2-v2): el documento de hoy no carga este archivo. */

body.a2-v2 { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg); }
body.a2-v2 .a2-shell { height: 100vh; height: 100dvh; width: 100%; }

/* El motor de hoy sigue vivo debajo: su cromo se oculta, sus modales (fixed) siguen funcionando. */
body.a2-v2 #app { height: 0; display: block; }
body.a2-v2 .adiut-sidebar,
body.a2-v2 #historyDrawer,
body.a2-v2 #feedbackFab,
body.a2-v2 #hamburgerMenu,
body.a2-v2 #hero,
body.a2-v2 #sidebarOverlay,
body.a2-v2 #onboardingOverlay,
body.a2-v2 .sidebar-header,
body.a2-v2 .sidebar-mobile-actions { display: none !important; }  /* [V2-MENU-MOVIL-FUGA] el menú móvil del shell viejo viaja con #sidebar al panel */

/* `hidden` debe ganar siempre: las clases del sistema (.btn, .card, .row…) fijan display. */
.a2 [hidden], .a2[hidden] { display: none !important; }

/* Barra lateral */
.a2 .a2-volver { font-size: 12.5px; color: var(--ink-2); padding: 4px 10px; text-decoration: underline; }
.a2 .a2-user { position: relative; cursor: pointer; }
body.a2-v2 .a2-user .user-menu-wrap { position: static; display: block !important; }
body.a2-v2 .a2-user .user-menu-btn { width: 32px; height: 32px; border-width: 0; background: var(--accent-tint); color: var(--accent-ink); font-size: 12px; }
body.a2-v2 .a2-user .user-menu-dropdown { bottom: 44px; top: auto; left: 0; right: auto; }
.a2 .a2-menu-btn { display: none; }
.a2 .a2-buscar-btn, .a2 .a2-ico-movil { display: none; }

/* Cabecera */
.a2 .a2-asunto { position: relative; }
.a2 .a2-pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 260px; max-height: 60vh; overflow: auto; display: flex; flex-direction: column; }
.a2 .a2-pop[hidden] { display: none; }
.a2 .a2-buscar-res { left: auto; right: 24px; top: 50px; width: min(520px, 90vw); }
.a2 .a2-header { position: relative; }

/* Cuerpo y vistas */
.a2 .a2-cuerpo { flex-grow: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.a2 .a2-vista { flex-grow: 1; min-height: 0; overflow: auto; }
.a2 .a2-vista[hidden] { display: none; }
.a2 #a2Inicio { display: flex; flex-direction: column; align-items: center; padding: 64px 24px 32px; }
.a2 #a2Inicio[hidden] { display: none; }
.a2 .a2-sub { margin: 8px 0 24px; font-size: 15px; text-align: center; }
.a2 .a2-composer-slot { width: min(880px, 100%); }
.a2 .a2-contexto { width: min(880px, 100%); margin-top: 10px; font-size: 12.5px; gap: 6px; flex-wrap: wrap; }
.a2 .a2-columnas { width: min(880px, 100%); margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.a2 .a2-col { display: flex; flex-direction: column; gap: 10px; }
.a2 .a2-col[hidden] { display: none; }
.a2 .a2-vista-chat { display: flex; flex-direction: column; overflow: hidden; }
.a2 .a2-vista-chat[hidden] { display: none; }
.a2 .a2-chat-titulo { padding: 12px 24px 0; }
.a2 .a2-titulo { border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); width: 100%; max-width: 680px; display: block; margin: 0 auto; padding: 4px 0; }
.a2 .a2-titulo:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.a2 .a2-chat-host { flex-grow: 1; min-height: 0; display: flex; }
body.a2-v2 .a2-chat-host .main-area { height: auto; flex: 1; }

/* Composer: la barra de hoy, sin el centrado absoluto del hero */
body.a2-v2 .chat-bar-wrap.centered { position: static; transform: none; top: auto; left: auto; padding: 0; }
body.a2-v2 .a2-composer-slot .chat-bar-wrap { max-width: none; padding: 0; background: transparent; }
.a2 .a2-modos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* Panel derecho */
.a2 .a2-panel[hidden] { display: none; }
.a2 .a2-panel section { display: flex; flex-direction: column; gap: 8px; }
.a2 .a2-panel .a2-fuente { display: flex; gap: 8px; align-items: baseline; font-size: 13px; line-height: 18px; }
.a2 .a2-panel .a2-fuente a { color: var(--link, var(--accent-ink)); word-break: break-word; }
body.a2-v2 .a2-panel .sidebar { position: static; width: auto; height: auto; box-shadow: none; border: 0; background: transparent; left: auto; }
body.a2-v2 .a2-panel .sidebar-content { padding: 0; overflow: visible; }
/* D-1: el grafo va DENTRO del panel derecho, en blanco (misma pieza F2, sin fork) */
body.a2-v2 .a2-panel .graph-panel { position: static; inset: auto; background: transparent; z-index: auto; display: block; }
body.a2-v2 .a2-panel .graph-panel[hidden] { display: none; }
body.a2-v2 .a2-panel .gp-window { width: 100%; max-width: none; height: 60vh; border-radius: var(--radius-card); box-shadow: none; border: var(--hairline) solid var(--line); }

/* Historial */
.a2 #a2Historial { padding: 24px; }
.a2 .a2-hist-filtros { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.a2 .a2-hist-dia { margin: 18px 0 8px; }
.a2 .a2-hist-fila { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-top: var(--hairline) solid var(--line-2); cursor: pointer; }
.a2 .a2-hist-fila:first-child { border-top: 0; }
.a2 .a2-hist-fila:hover, .a2 .a2-hist-fila.sel { background: var(--bg); }
.a2 .a2-hist-fila .t { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.a2 .a2-hist-fila .frag { display: block; font-size: 12.5px; color: var(--ink-2); white-space: normal; }
.a2 .a2-hist-pie { margin-top: 24px; }

/* Ayuda */
.a2 .a2-help[hidden] { display: none; }
.a2 .a2-help { z-index: 60; overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.a2 .a2-help .art-cuerpo { font-size: 14px; line-height: 21px; }
.a2-tour { position: fixed; z-index: 3000; max-width: 320px; }

/* Móvil ≤ 768 px: la barra lateral se pliega a un botón; el panel derecho ocupa toda la pantalla */
@media (max-width: 768px) {
  .a2 .a2-menu-btn { display: inline-flex; }
  .a2.a2-nav-abierta .a2-sidebar { display: flex; position: fixed; z-index: 70; inset: 0 auto 0 0; }
  .a2 .a2-panel:not([hidden]) { position: fixed; inset: 0; z-index: 65; overflow: auto; }
  /* [V2-PANEL-MOVIL] «Cerrar» fijo arriba del panel aunque se desplace; el botón de la cabecera lo abre */
  .a2 .a2-panel-cerrar { position: sticky; top: 0; z-index: 1; align-self: flex-end; flex-shrink: 0; }
  .a2 .a2-panel-btn { flex-shrink: 0; white-space: nowrap; }
  .a2 .a2-header { padding: 0 12px; gap: 8px; }
  .a2 #a2Inicio { padding: 32px 16px; }
  .a2 .a2-help { width: 100%; }
  .a2 .a2-buscar-res { right: 12px; }
  /* [V2-PANEL-MOVIL-B] la cabecera cabe: el buscador se pliega a un icono y se despliega SOBRE la cabecera,
     «Mover a un asunto» queda en icono (aria-label) y el asunto cede el espacio que falte, con elipsis.
     Sin overflow-x en la cabecera: recortaría la lista de asuntos y los resultados del buscador. */
  .a2 .a2-buscar-btn { display: inline-flex; flex-shrink: 0; }
  .a2 .a2-header .a2-search { display: none; }
  .a2 .a2-header.a2-search-abierta .a2-search { display: flex; position: absolute; z-index: 45; left: 12px; right: 12px; top: 10px; max-width: none; }
  .a2 #a2MoverBtn .a2-txt { display: none; }
  .a2 #a2MoverBtn .a2-ico-movil { display: inline-block; }
  .a2 #a2MoverBtn, .a2 .a2-menu-btn { flex-shrink: 0; }
  .a2 .a2-asunto { min-width: 0; }
  .a2 #a2AsuntoBtn { max-width: 100%; min-width: 0; }
  .a2 #a2AsuntoNombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Ajustes medidos en la sonda de /v2 (turno real, 1280 px) */
.a2 .a2-guardado { white-space: nowrap; font-size: 12.5px; }
.a2 .a2-panel .kv > .badge { justify-self: start; align-self: start; }
@media (max-width: 1100px) { .a2 .a2-guardado { display: none; } }

/* [V2-PREVIA] Acceso — compuesto con Logotipo, Tarjeta, Botón y los tokens; sin valores nuevos.
   app.js lo muestra/oculta con la clase `hidden` y los ids de siempre. */
.a2-login { position: fixed; inset: 0; z-index: 3000; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: var(--space-12) var(--space-4); background: var(--bg); }
.a2-login.hidden { display: none; }
.a2-login-col { width: min(400px, 100%); margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.a2-login-logo { display: flex; align-items: center; gap: 10px; }
.a2-login-wordmark { height: 41px; width: auto; }
.a2-login-card { width: 100%; padding: var(--space-8); display: flex; flex-direction: column; }
.a2-login-sub { margin: var(--space-1) 0 var(--space-6); font-size: 14px; }
.a2-login-msg { margin-bottom: var(--space-4); padding: 10px var(--space-3); border-radius: var(--radius-control); background: var(--crit-tint); color: var(--crit-ink); font-size: 13px; line-height: 18px; }
.a2-login-msg.auth-success { background: var(--accent-tint); color: var(--accent-ink); }
.a2-login form { display: flex; flex-direction: column; gap: var(--space-4); }
.a2-login-field { display: flex; flex-direction: column; gap: 6px; }
.a2-login-field label { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--ink); }
.a2-login-field input { width: 100%; height: var(--control); padding: 0 var(--space-3); border: var(--hairline) solid var(--control-line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font-size: 14px; }
.a2-login-field input::placeholder { color: var(--ink-2); }
.a2-login-field input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.a2-login-pass { position: relative; }
.a2-login-pass input { padding-right: var(--control); }
.a2-login-ojo { position: absolute; top: 0; right: 0; width: var(--control); height: var(--control); display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; }
.a2-login-ojo:hover { color: var(--ink); }
.a2-login-olvido { display: flex; justify-content: flex-end; margin-top: calc(-1 * var(--space-2)); }
.a2-login-link { border: 0; background: transparent; padding: 0; color: var(--accent-ink); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.a2-login-link:hover { color: var(--accent-hover); }
.a2-login-btn { width: 100%; }
.a2-login-sep { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0; color: var(--ink-2); font-size: 12.5px; }
.a2-login-sep::before, .a2-login-sep::after { content: ""; flex-grow: 1; border-top: var(--hairline) solid var(--line); }
.a2-login-alterna { margin: var(--space-5) 0 0; text-align: center; font-size: 13px; color: var(--ink-2); }
.a2-login-volver { font-size: 12.5px; color: var(--ink-2) !important; }
@media (max-width: 768px) {
  .a2-login { padding: var(--space-8) var(--space-4); }
  .a2-login-card { padding: var(--space-6) var(--space-5); }
}