/* base: reset, tipografía, utilidades y shell de la aplicación */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--fs-base)/var(--lh-base) var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  min-height: 100vh; min-height: 100dvh; position: relative;
}
body::before { content: ""; position: fixed; inset: 0; background-image: var(--grain); opacity: var(--grain-opacity); pointer-events: none; z-index: 0; mix-blend-mode: multiply; }
:root[data-theme="dark"] body::before { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { mix-blend-mode: screen; } }
body > * { position: relative; z-index: 1; }
h1, h2, h3, h4, p { margin: 0; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
button { font: inherit; color: inherit; }
code, kbd, samp { font-family: var(--font-mono); font-size: .9em; }
code { background: var(--surface-2); color: var(--ink); padding: .1em .4em; border-radius: var(--r-xs); }
/* <code> dentro de <pre>/bloques: sin fondo propio y con el color del bloque (si no, tinta clara sobre beige) */
pre code, .int-code code, .codeblock code { background: transparent; color: inherit; padding: 0; border-radius: 0; font-size: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-5) 0; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: var(--s-3); top: -60px; z-index: 200; background: var(--ink); color: var(--ink-inv); padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); transition: top var(--t-fast); }
.skip-link:focus { top: var(--s-3); }

/* Tipografía */
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; line-height: var(--lh-tight); font-size: var(--fs-xl); }
.display--xl { font-size: clamp(2.2rem, 6vw, var(--fs-3xl)); font-weight: 500; }
.eyebrow { font: 600 var(--fs-xs)/1 var(--font-ui); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.lead { font-size: var(--fs-md); color: var(--ink-2); max-width: 60ch; }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
.num, .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.right { text-align: right; } .center { text-align: center; }

/* Utilidades de layout */
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack--sm { gap: var(--s-2); } .stack--lg { gap: var(--s-6); }
.row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.row--nowrap { flex-wrap: nowrap; } .row--between { justify-content: space-between; } .row--end { justify-content: flex-end; }
.grow { flex: 1 1 0; min-width: 0; }
.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-5); margin: var(--s-4) 0; }
.kv dt { color: var(--ink-3); font-size: var(--fs-sm); } .kv dd { margin: 0; }

/* Iconos */
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; }

/* Cabecera de página: doble filete editorial */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding-bottom: var(--s-4); margin-bottom: var(--s-5); border-bottom: 3px double var(--line-strong); }
.page-head h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 4vw, var(--fs-2xl)); letter-spacing: -.02em; line-height: 1.05; }
.page-head p { color: var(--ink-3); margin-top: var(--s-1); }
.page-head__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ============ SHELL ============ */
.app { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: min(86vw, 300px); background: var(--surface); border-right: 1px solid var(--line); z-index: var(--z-drawer); transform: translateX(-102%); transition: transform var(--t-slow) var(--ease); display: flex; flex-direction: column; box-shadow: var(--shadow-3); }
.nav-open .sidebar { transform: none; }
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: calc(var(--z-drawer) - 1); opacity: 0; pointer-events: none; transition: opacity var(--t-base); }
.nav-open .scrim { opacity: 1; pointer-events: auto; }
.brand { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-3); text-decoration: none; }
.brand__mark { width: 34px; height: 34px; flex: none; color: var(--ink); }
.brand__mark .hand { stroke: var(--accent); }
.brand__logo { width: 34px; height: 34px; flex: none; object-fit: contain; border-radius: var(--r-sm, 6px); background: #fff; }
.brand__name { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.brand__tenant { font-size: var(--fs-xs); color: var(--ink-3); display: block; margin-top: 3px; max-width: 160px; }
.nav { flex: 1; overflow-y: auto; padding: var(--s-2) var(--s-3) var(--s-4); }
.nav__group { font: 600 .75rem/1 var(--font-ui); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); padding: var(--s-4) var(--s-3) var(--s-2); }
.nav__link { position: relative; display: flex; align-items: center; gap: var(--s-3); padding: .55rem var(--s-3); border-radius: var(--r-sm); text-decoration: none; color: var(--ink-2); font-weight: 500; transition: background var(--t-fast), color var(--t-fast); }
.nav__link { gap: var(--s-2); padding-inline: var(--s-3) var(--s-2); font-size: .875rem; letter-spacing: -.006em; }
.nav__link > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__link .ic { flex: none; }
.nav__link:hover { background: var(--surface-2); color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--ink); background: var(--surface-2); font-weight: 650; }
.nav__link[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 4px; background: var(--accent); border-radius: 0 3px 3px 0; }
.nav__sub { margin: 0 0 var(--s-1) calc(var(--s-3) + 1.25em + var(--s-3)); display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.nav__sub a { padding: .3rem var(--s-3); font-size: var(--fs-sm); color: var(--ink-3); text-decoration: none; }
.nav__sub a:hover, .nav__sub a[aria-current="page"] { color: var(--ink); }
.nav__sub a[aria-current="page"] { font-weight: 650; }
.sidebar__foot { border-top: 1px solid var(--line); padding: var(--s-3); }

.topbar { position: sticky; top: 0; z-index: var(--z-topbar); height: var(--topbar-h); display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--gutter); background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar__crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--ink-3); }
.topbar__crumbs strong { color: var(--ink); font-weight: 600; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.15; overflow-wrap: anywhere; }
.topbar__crumbs .sep { opacity: .5; }
.topbar__crumbs .crumb-parent { display: none; }
.topbar__tools { display: flex; align-items: center; gap: var(--s-1); }
.search-btn { display: none; align-items: center; gap: var(--s-3); height: 36px; padding: 0 var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink-3); cursor: pointer; min-width: 220px; }
.search-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.search-btn kbd { margin-left: auto; }
.clock-btn { display: inline-flex; align-items: center; gap: var(--s-2); height: 36px; padding: 0 var(--s-3); border-radius: var(--r-md); border: 1px solid var(--ink); background: var(--ink); color: var(--ink-inv); cursor: pointer; font-weight: 600; white-space: nowrap; transition: transform var(--t-fast) var(--ease), background var(--t-fast); }
.clock-btn:hover { transform: translateY(-1px); }
.clock-btn:active { transform: translateY(1px); }
.clock-btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-inv); opacity: .5; }
.clock-btn[data-in="true"] { background: var(--ok); border-color: var(--ok); color: var(--ok-ink); }
.clock-btn[data-in="true"] .dot { background: var(--ok-ink); opacity: 1; animation: pulse 1.8s ease-in-out infinite; }
.clock-btn .clock-label { display: none; }
.clock-btn .clock-time { font-family: var(--font-mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
@keyframes pulse { 50% { transform: scale(1.6); opacity: .35; } }

.main { min-width: 0; padding: var(--s-5) var(--gutter) calc(var(--bottombar-h) + var(--s-7) + env(safe-area-inset-bottom)); }
.view { max-width: var(--content-max); margin-inline: auto; }
.view:focus, .view:focus-visible { outline: none; }
.view.view-in > * { animation: view-in var(--t-slow) var(--ease) both; }
.view.view-in > *:nth-child(2) { animation-delay: 40ms; } .view.view-in > *:nth-child(3) { animation-delay: 80ms; }
/* Transición de SALIDA: app.js deja una copia visual de la vista anterior (.view-ghost) que se desvanece sin bloquear nada */
.view-ghost { position: absolute; z-index: 1; pointer-events: none; animation: view-out var(--t-ghost, 160ms) var(--ease) both; }
@keyframes view-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.trial-banner { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-2) var(--gutter); background: var(--ink); color: var(--ink-inv); font-size: var(--fs-sm); }
.trial-banner a { color: inherit; white-space: nowrap; font-weight: 600; text-decoration-color: var(--accent); }
.trial-banner .grow { min-width: 12ch; }
.trial-banner button { background: none; border: 0; color: inherit; cursor: pointer; opacity: .7; padding: 4px; }

.bottombar { position: fixed; inset: auto 0 0 0; height: var(--bottombar-h); padding-bottom: env(safe-area-inset-bottom); display: flex; background: var(--surface); border-top: 1px solid var(--line); z-index: var(--z-topbar); }
.bottombar a, .bottombar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: .75rem; font-weight: 600; color: var(--ink-3); text-decoration: none; background: none; border: 0; cursor: pointer; position: relative; }
.bottombar [aria-current="page"] { color: var(--ink); }
.bottombar [aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; background: var(--accent); border-radius: 0 0 3px 3px; }
.bottombar .ic { width: 1.4em; height: 1.4em; }

.assistant-fab { position: fixed; right: var(--s-4); bottom: calc(var(--bottombar-h) + var(--s-4) + env(safe-area-inset-bottom)); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); border: 0; box-shadow: var(--shadow-2); cursor: pointer; z-index: var(--z-topbar); transition: transform var(--t-base) var(--ease); }
.assistant-fab:hover { transform: scale(1.06) rotate(-6deg); }

@media (min-width: 960px) {
  .app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; width: auto; transform: none; box-shadow: none; z-index: var(--z-sidebar); }
  .scrim, .bottombar, .menu-btn { display: none !important; }
  .main { padding-bottom: var(--s-7); }
  .search-btn { display: flex; }
  .search-btn-icon { display: none; }
  .clock-btn .clock-label { display: inline; }
  .topbar__crumbs .crumb-parent { display: inline; }
  .assistant-fab { bottom: var(--s-5); right: var(--s-5); }
}

/* ============ PANTALLAS DE ACCESO ============ */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr; }
.auth__aside { display: none; }
.auth__panel { display: flex; flex-direction: column; justify-content: center; padding: var(--s-6) var(--gutter); gap: var(--s-5); max-width: 520px; width: 100%; margin: 0 auto; }
.auth__panel .brand { padding: 0; }
.auth h1 { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 500; letter-spacing: -.02em; line-height: 1.05; }
.demo-help { border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: var(--s-4); background: var(--surface); }
.demo-help summary { cursor: pointer; font-weight: 600; }
.demo-list { display: grid; gap: var(--s-1); margin-top: var(--s-3); max-height: 260px; overflow: auto; }
.demo-list button { display: flex; align-items: center; gap: var(--s-3); text-align: left; background: none; border: 1px solid transparent; border-radius: var(--r-sm); padding: var(--s-2); cursor: pointer; }
.demo-list button:hover { background: var(--surface-2); border-color: var(--line); }
.pin-chip { display: inline-block; font-family: var(--font-mono); background: var(--ink); color: var(--ink-inv); padding: .15em .55em; border-radius: var(--r-xs); letter-spacing: .15em; }
@media (min-width: 960px) {
  .auth { grid-template-columns: minmax(0, 1.1fr) minmax(420px, 1fr); }
  .auth__aside { display: flex; flex-direction: column; justify-content: space-between; padding: var(--s-7); background: #1c1a15; color: #f4efe4; position: relative; overflow: hidden; }
  .auth__aside .brand__mark { color: #f4efe4; }
  .auth__aside .big-time { font-family: var(--font-display); font-size: clamp(5rem, 13vw, 11rem); line-height: .9; letter-spacing: -.05em; font-weight: 400; font-variant-numeric: tabular-nums; }
  .auth__aside .big-time span { color: var(--accent); }
  .auth__aside p { max-width: 36ch; opacity: .8; font-size: var(--fs-md); }
  .auth__aside .rules { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(255, 255, 255, .06) 31px 32px); pointer-events: none; }
}
.cookie { position: fixed; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); max-width: 520px; background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: var(--s-4); z-index: var(--z-toast); }
@media (min-width: 640px) { .cookie { left: auto; } }

/* Placeholder de módulo */
.placeholder { max-width: 640px; margin: var(--s-6) auto; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); position: relative; }
.placeholder::after { content: ""; position: absolute; inset: 6px; border: 1px dashed var(--line); border-radius: calc(var(--r-lg) - 4px); pointer-events: none; }
.placeholder__mark { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-strong); }

/* Impresión (informes) */
@media print {
  body::before, .sidebar, .topbar, .bottombar, .assistant-fab, .trial-banner, .toasts, .no-print { display: none !important; }
  .app { display: block; } .main { padding: 0; } body { background: #fff; color: #000; }
  .card { box-shadow: none; border-color: #999; break-inside: avoid; }
}

/* Menú de cuenta abierto desde el pie del sidebar: hacia arriba */
.sidebar__foot { position: relative; }
.sidebar__foot .menu { top: auto; bottom: calc(100% + 6px); left: var(--s-3); right: var(--s-3); }

/* Kiosko: pantalla completa sin shell */
.kiosk { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.kiosk__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--gutter); border-bottom: 1px solid var(--line); }
.kiosk #main { flex: 1; display: grid; place-items: center; padding: var(--s-5) var(--gutter); }
.kiosk .view { width: 100%; }

/* ============ MÓVIL (< 640 px): barra superior y aviso de prueba compactos ============ */
@media (max-width: 639px) {
  .topbar { gap: 2px; padding-inline: 8px; }
  .topbar__crumbs { padding-left: var(--s-1); font-size: var(--fs-sm); }
  .topbar__tools { gap: 0; flex: none; }
  .topbar .btn--icon { width: 40px; }
  #theme-btn { display: none; }                       /* el tema se cambia desde el menú de cuenta */
  .clock-btn { height: 40px; padding: 0 10px; margin-inline: 2px; }
  .trial-banner { flex-wrap: nowrap; gap: var(--s-2); min-height: 40px; max-height: 44px; padding-block: 2px; overflow: hidden; }
  .trial-banner .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .trial-banner #book-demo { display: none; }
  .trial-banner a, .trial-banner button { display: inline-flex; align-items: center; min-height: 40px; }
  .trial-banner button { justify-content: center; min-width: 40px; padding: 0; }
}
@media (max-width: 380px) { .clock-btn .dot { display: none; } }

/* ============ RONDA VISUAL 2 ============ */
/* Barra lateral: nada se tapa y no hay scroll interno a 900 px de alto */
.sidebar { overflow: hidden; }
.nav { min-height: 0; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.sidebar__foot, .brand { flex: none; }
@media (min-width: 960px) and (max-height: 960px) {
  .brand { padding-block: var(--s-3) var(--s-2); }
  .nav { padding-bottom: var(--s-2); }
  .nav__group { padding: var(--s-3) var(--s-3) var(--s-1); }
  .nav__link { padding-block: .4rem; }
  .sidebar__foot { padding: var(--s-2) var(--s-3); }
}
@media (min-width: 960px) and (max-height: 780px) {
  .nav__group { padding: var(--s-2) var(--s-3) 2px; }
  .nav__link { padding-block: .28rem; }
  .brand__tenant { display: none; }
}
/* Botón del asistente: fuera en su propia página, discreto al bajar y con safe-area */
body[data-route="asistente"] .assistant-fab { display: none; }
.assistant-fab { width: 44px; height: 44px; right: max(var(--s-4), env(safe-area-inset-right)); transition: transform var(--t-base) var(--ease), opacity var(--t-base); }
.assistant-fab.is-away { transform: translateY(24px) scale(.8); opacity: 0; pointer-events: none; }
@media (min-width: 960px) { .assistant-fab { right: max(var(--s-5), env(safe-area-inset-right)); } }
@media (max-width: 959px) { .main { padding-bottom: calc(var(--bottombar-h) + 72px + env(safe-area-inset-bottom)); } }
/* Cabeceras: el nombre/título nunca pisa los botones */
.page-head > div:first-child { min-width: 0; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Ronda 5: si el botón del asistente quedaría sobre texto o valores, se oculta del todo (nunca a medio recortar) y el asistente sigue accesible desde el menú (Ayuda), la paleta ⌘K y la barra «Más»; reaparece solo al quedar libre */
.assistant-fab.is-tuck { transform: translateY(10px) scale(.7); opacity: 0; pointer-events: none; visibility: hidden; transition: transform var(--t-base) var(--ease), opacity var(--t-base), visibility 0s linear var(--t-base); }

/* Ronda 4: suelo tipográfico. Nada que se lea baja de 11-12 px (small, code, avatares, insignias); lo decorativo queda fuera */
small { font-size: max(.75rem, .8333em); }
code, kbd, samp { font-size: max(.75rem, .9em); }