@layer tn.shell {
  .tn-error { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 28px; max-width: 680px; margin: auto; padding: 32px 24px; }
  .tn-error { align-items: center; text-align: center; max-width: 560px; }
  .tn-error__brand { opacity: .9; }
  .tn-error__body { display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .tn-error__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--tn-ink); color: var(--tn-signal-400); margin-bottom: 6px; }
  .tn-error__actions { justify-content: center; margin-top: 6px; }
/* ==========================================================================
   TANATOS · shell.css
   Estructura de la aplicación: layout, sidebar (única navegación principal,
   siempre a la izquierda), recorrido del proveedor, topbar, drawer móvil,
   contenedores de contenido y encabezados de página.
   ========================================================================== */

/* ---------- Layout ---------- */
.app {
  display: grid;
  grid-template-columns: var(--tn-sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns var(--tn-dur-3) var(--tn-ease);
  /* La columna del sidebar conserva su color en capturas de página completa e impresión */
  --tn-app-side: var(--tn-sidebar-w);
  background: linear-gradient(90deg, var(--tn-side-bg) 0 var(--tn-app-side), transparent 0);
}
.main { min-width: 0; display: flex; flex-direction: column; }

/* ---------- Sidebar ---------- */
.sidebar {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column; gap: 18px;
  padding: 18px 14px 14px;
  background: var(--tn-side-bg);
  color: var(--tn-side-fg);
  min-width: 0;
  z-index: var(--tn-z-drawer);
}
.theme-side-light .sidebar { border-right: 1px solid var(--tn-line); }

.sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 6px; color: var(--tn-side-fg); min-width: 0; }
.brand:hover { color: var(--tn-side-fg); }
.brand__mark { width: 34px; height: 34px; border-radius: 10px; background: var(--tn-signal); color: var(--tn-ink); display: grid; place-items: center; flex: none; }
.brand__mark svg { width: 22px; height: 22px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand__text strong { font-size: 14px; font-weight: var(--tn-fw-semibold); letter-spacing: -0.01em; white-space: nowrap; }
.brand__text span { font-size: 12px; color: var(--tn-side-muted); white-space: nowrap; }

.sidebar__collapse, .sidebar__close {
  width: 32px; height: 32px; border-radius: var(--tn-r-sm); border: 0; flex: none;
  background: transparent; color: var(--tn-side-muted); display: grid; place-items: center;
}
.sidebar__collapse:hover, .sidebar__close:hover { background: var(--tn-side-hover); color: var(--tn-side-fg); }
.sidebar__close { display: none; }

/* Tarjeta de contexto: quién soy / alcance */
.side-context { border-radius: 12px; background: var(--tn-side-card); border: 1px solid var(--tn-side-line); padding: 12px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.side-context__avatar { width: 30px; height: 30px; border-radius: var(--tn-r-sm); display: grid; place-items: center; font-size: 12px; font-weight: var(--tn-fw-semibold); flex: none; background: var(--tn-side-active); color: var(--tn-side-fg); }
.side-context__text { min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.side-context__text strong { display: block; font-size: 13px; font-weight: var(--tn-fw-semibold); }
.side-context__text small { display: block; font-size: 12px; color: var(--tn-side-muted); }

.sidebar__nav { display: flex; flex-direction: column; gap: 18px; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; margin: 0 -6px; padding: 0 6px 28px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.sidebar__nav::-webkit-scrollbar { width: 6px; }
.sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 3px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: var(--tn-fw-medium); letter-spacing: .04em; text-transform: uppercase; color: var(--tn-side-dim); padding: 0 10px 6px; white-space: nowrap; }
.nav-group__label .mono { text-transform: none; letter-spacing: 0; }

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  height: 38px; padding: 0 10px; border-radius: 9px;
  color: var(--tn-side-muted); font-size: 14px; font-weight: var(--tn-fw-medium);
  transition: background var(--tn-dur-1) var(--tn-ease), color var(--tn-dur-1) var(--tn-ease);
}
.nav-item:hover { background: var(--tn-side-hover); color: var(--tn-side-fg); }
.nav-item[aria-current="page"] { background: var(--tn-side-active); color: var(--tn-side-fg); }
.nav-item[aria-current="page"] > .ico { color: var(--tn-side-accent); }
.nav-item__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item__count { font-family: var(--tn-font-sans); font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: var(--tn-fw-medium); min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--tn-r-xs); display: inline-grid; place-items: center; background: var(--tn-side-active); color: var(--tn-side-fg); }
.nav-item__count--hot { background: var(--tn-signal); color: var(--tn-signal-ink); }

/* Recorrido del proveedor: el sidebar ES el estado del proceso */
.journey { display: flex; flex-direction: column; }
.journey__step {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  min-height: 40px; padding: 0 10px; border-radius: 9px;
  color: var(--tn-side-muted); font-size: 14px; font-weight: var(--tn-fw-medium);
}
.journey__step:hover { background: var(--tn-side-hover); color: var(--tn-side-fg); }
/* Conectores (dueño, 2026-10-21): cada paso dibuja la línea desde su borde hasta su punto (::before arriba, ::after
   abajo), así une sin cortes aunque el texto ocupe dos renglones o haya subpasos en medio. */
.journey__step::before, .journey__step::after { content: ""; position: absolute; left: 19px; width: 1.5px; background: var(--tn-side-line); }
.journey__step::before { top: 0; bottom: calc(50% + 10px); }
.journey__step::after { top: calc(50% + 10px); bottom: 0; }
.journey > .journey__step:first-child::before, .journey > .journey__step:last-child::after { display: none; }
.journey__dot { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--tn-side-bg); }
.journey__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; padding: 7px 0; }
.journey__text small { font-size: 11.5px; font-weight: var(--tn-fw-regular); color: var(--tn-side-dim); }
/* Paso completo con más presencia (dueño, 2026-10-28): fondo verde suave, anillo fino y tilde más grueso; el nombre,
   más claro que los pasos que faltan. Sigue por debajo del punto activo. */
.journey__step--done { color: color-mix(in srgb, var(--tn-side-fg) 86%, transparent); }
/* Paso completo (dueño, 2026-10-29: «que el trazo del tilde quede brillante como el del relojito, exactamente ese estilo»):
   tilde en círculo, verde brillante y del tamaño del punto, para que la línea llegue justo a su círculo. */
.journey__step--done .journey__dot { color: var(--tn-side-accent); }
.journey__step--done .journey__dot .ico { width: 22px; height: 22px; stroke-width: 1.75; }
.journey__step--now { --tn-journey-current-color: var(--tn-signal); color: var(--tn-side-fg); }
/* Dueño (2026-11-10): con algo para corregir, ámbar de alerta (menos agresivo que el naranja rojizo); el efecto no cambia. */
.journey__step--now.journey__step--observed { --tn-journey-current-color: var(--tn-side-attention); }
/* Punto activo con su onda verde (dueño, 2026-10-28: «me gustaba»); la línea fina llega hasta el punto. */
.journey__step--now .journey__dot { background: var(--tn-journey-current-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tn-journey-current-color) 22%, transparent); }
.journey__step--now .journey__dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tn-signal-ink); }
.journey__step--now .journey__text small { color: var(--tn-side-muted); }
/* Reloj (en revisión): celeste brillante para diferenciarlo del tilde (dueño, 2026-10-29), del tamaño del punto para que
   la línea llegue justo a su círculo. */
.journey__step--review .journey__dot { color: var(--tn-side-review); }
.journey__step--review .journey__dot .ico { width: 22px; height: 22px; stroke-width: 1.75; }
.journey__step--locked { color: var(--tn-side-dim); }
.journey__step--locked .journey__dot { box-shadow: inset 0 0 0 1.5px var(--tn-side-line); }
.journey__step[aria-current="page"] { background: var(--tn-side-active); color: var(--tn-side-fg); }
/* Subpasos (p. ej. «Subir documentación»): la línea del recorrido sigue en el mismo eje que los conectores
   (x 19px, 1,5px); el punto del paso padre tapa el sobrante. */
.journey__children { position: relative; margin: 0; padding: 2px 0 2px 30px; }
.journey__children[hidden] { display: none; }
.journey__children::before { content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 1.5px; background: var(--tn-side-line); }
/* Flecha para desplegar los subpasos sin entrar a la etapa; replegados por defecto. */
.journey__head { position: relative; }
.journey__head > .journey__step { padding-right: 42px; }
.journey__toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--tn-side-muted); cursor: pointer; }
@media (hover: hover) { .journey__toggle:hover { background: var(--tn-side-hover); color: var(--tn-side-fg); } }
.journey__toggle:focus-visible { outline: 2px solid var(--tn-side-accent); outline-offset: 2px; }
.journey__toggle .ico { transition: transform .18s var(--tn-ease); }
.journey__toggle[aria-expanded="true"] .ico { transform: rotate(180deg); }
.journey__child { position: relative; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px; border-radius: 9px; color: var(--tn-side-muted); font-size: 13px; }
/* Subpaso sin conector propio (dueño, 2026-10-28: «si no queda bien, sacala»): la línea vertical une las etapas y el
   subpaso queda al costado, sin guion ni curva. */
/* Al pasar el mouse, el recuadro sin subrayado (dueño, 2026-10-28: «me gusta el efecto, sólo no el subrayado»). */
.journey__child:hover { background: var(--tn-side-hover); color: var(--tn-side-fg); }
.journey__child[aria-current="page"] { background: var(--tn-side-active); color: var(--tn-side-fg); }
.journey__child[aria-current="page"] > .ico { color: var(--tn-side-accent); }
.journey__child:focus-visible { outline: 2px solid var(--tn-side-accent); outline-offset: 2px; }
@media (min-width: 961px) {
  .app[data-sidebar="collapsed"] .journey__children { margin: 0; padding: 0; }
  .app[data-sidebar="collapsed"] .journey__toggle { display: none; }
  .app[data-sidebar="collapsed"] .journey__head > .journey__step { padding-right: 0; }
  .app[data-sidebar="collapsed"] .journey__children::before { left: 50%; margin-left: -.75px; }
  .app[data-sidebar="collapsed"] .journey__child { justify-content: center; padding: 0; }
  .app[data-sidebar="collapsed"] .journey__child-text { display: none; }
}
/* Ondas del punto activo (dueño, 2026-10-29: «siempre de adentro hacia afuera y un poco más rápidas»): el halo queda
   fijo y cada onda sale del punto y se desvanece. */
@media (prefers-reduced-motion: no-preference) {
  .journey__step--now .journey__dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    animation: tn-ripple 1.6s ease-out infinite; }
}
@keyframes tn-ripple {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tn-journey-current-color, var(--tn-signal)) 60%, transparent); }
  100% { box-shadow: 0 0 0 11px transparent; }
}
@keyframes tn-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tn-signal) 22%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--tn-signal) 8%, transparent); }
}

.sidebar__foot { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--tn-side-line); padding-top: 12px; }
.role-switch { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--tn-side-line); background: transparent; color: var(--tn-side-muted); font-size: 13px; font-weight: var(--tn-fw-medium); }
.role-switch:hover { background: var(--tn-side-hover); color: var(--tn-side-fg); text-decoration: none; }
.role-switch__text { flex: 1; text-align: left; white-space: nowrap; }
.build-meta { font-family: var(--tn-font-mono); font-size: 11px; color: var(--tn-side-dim); padding: 0 6px; white-space: nowrap; }

/* ---------- Sidebar colapsada (desktop) ---------- */
@media (min-width: 961px) {
  .app[data-sidebar="collapsed"] { grid-template-columns: var(--tn-sidebar-w-collapsed) minmax(0, 1fr); --tn-app-side: var(--tn-sidebar-w-collapsed); }
  .app[data-sidebar="collapsed"] .sidebar { padding-inline: 12px; }
  .app[data-sidebar="collapsed"] .brand__text,
  .app[data-sidebar="collapsed"] .side-context__text,
  .app[data-sidebar="collapsed"] .nav-item__text,
  .app[data-sidebar="collapsed"] .nav-group__label,
  .app[data-sidebar="collapsed"] .journey__text,
  .app[data-sidebar="collapsed"] .role-switch__text,
  .app[data-sidebar="collapsed"] .build-meta { display: none; }
  .app[data-sidebar="collapsed"] .sidebar__head { flex-direction: column; }
  .app[data-sidebar="collapsed"] .side-context { padding: 8px; justify-content: center; }
  .app[data-sidebar="collapsed"] .nav-item, .app[data-sidebar="collapsed"] .journey__step { justify-content: center; padding: 0; }
  .app[data-sidebar="collapsed"] .journey__step::before, .app[data-sidebar="collapsed"] .journey__step::after { left: 50%; }
  .app[data-sidebar="collapsed"] .nav-item__count { position: absolute; top: 2px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
  .app[data-sidebar="collapsed"] .role-switch { justify-content: center; padding: 0; }
  .app[data-sidebar="collapsed"] .sidebar__collapse .ico { transform: rotate(180deg); }
  .app[data-sidebar="collapsed"] [data-tip]:hover::after {
    content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    white-space: nowrap; padding: 6px 10px; border-radius: var(--tn-r-sm); background: var(--tn-ink-950); color: #fff;
    font-size: 12.5px; font-weight: var(--tn-fw-medium); box-shadow: var(--tn-sh-2); pointer-events: none; z-index: 5;
  }
  .app[data-sidebar="collapsed"] .sidebar__nav { overflow: visible; }
}

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: var(--tn-z-topbar);
  height: var(--tn-topbar-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 var(--tn-gutter);
  background: color-mix(in srgb, var(--tn-bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--tn-line);
}
.topbar__menu { display: none; }
.topbar__brand { display: none; width: 28px; height: 28px; border-radius: 8px; background: var(--tn-signal); color: var(--tn-ink); place-items: center; flex: none; }
.topbar__brand svg { width: 18px; height: 18px; }
.crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--tn-text-3); white-space: nowrap; overflow: hidden; }
.crumbs a { color: var(--tn-text-3); }
.crumbs a:hover { color: var(--tn-text); }
.crumbs [aria-current="page"] { color: var(--tn-text); font-weight: var(--tn-fw-medium); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.crumbs .ico { width: 14px; height: 14px; color: var(--tn-line-strong); }
.topbar__actions { display: flex; align-items: center; gap: 8px; }

.global-search { display: flex; align-items: center; gap: 10px; height: 38px; width: 360px; max-width: 40vw; flex: 0 4 360px; min-width: 220px; padding: 0 10px 0 12px; border-radius: var(--tn-r-md); border: 1px solid var(--tn-line); background: var(--tn-surface); color: var(--tn-text-3); font-size: 13.5px; }
.global-search:focus-within { border-color: var(--tn-brand); box-shadow: var(--tn-ring); }
.global-search input { border: 0; outline: 0; flex: 1; min-width: 0; background: transparent; color: var(--tn-text); }
/* Envío del buscador: con Enter; al escribir aparece una pastilla discreta, sin botón con borde dentro del campo. */
.global-search > svg { flex: none; }
.global-search__submit { display: none; flex: none; align-items: center; height: 26px; padding: 0 8px; border: 0; border-radius: 6px; background: var(--tn-sunken); color: var(--tn-text-2); font: inherit; font-size: 12px; cursor: pointer; }
.global-search__submit:hover { background: var(--tn-ink); color: #fff; }
.global-search__submit:focus-visible { outline: 2px solid var(--tn-brand); outline-offset: 2px; }
.global-search:has(input:not(:placeholder-shown)) .global-search__submit { display: inline-flex; }
.global-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ---------- Contenido ---------- */
/* Un solo ancho por rol en todas las pantallas (auditoría 2026-10-29): el borde derecho no salta al cambiar de pantalla. */
.content { width: 100%; max-width: var(--tn-content-max); padding: 36px var(--tn-gutter) 72px; display: flex; flex-direction: column; gap: 28px; }
.content:focus { outline: none; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.page-head__titles { display: flex; flex-direction: column; gap: 8px; max-width: 720px; min-width: 0; }
.page-head__aside { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px 10px; }
.group-head__title { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: var(--tn-fw-semibold); }
.group-head__count { font-family: var(--tn-font-sans); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: var(--tn-fw-medium); color: var(--tn-text-3); }

/* ---------- Drawer móvil ---------- */
.scrim { position: fixed; inset: 0; z-index: calc(var(--tn-z-drawer) - 1); background: rgba(6, 18, 16, .55); opacity: 0; pointer-events: none; transition: opacity var(--tn-dur-3) var(--tn-ease); }

@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); background: none; }
  .sidebar {
    position: static; height: auto; width: 100%;
  }
  .tn-js .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(318px, 86vw); height: 100%;
    transform: translateX(-102%); visibility: hidden;
    transition: transform var(--tn-dur-3) var(--tn-ease-out-expo), visibility 0s linear var(--tn-dur-3);
    box-shadow: var(--tn-sh-3);
  }
  .sidebar__collapse { display: none; }
  .sidebar__close { display: grid; }
  html.tn-sidebar-open .sidebar { transform: none; visibility: visible; transition: transform var(--tn-dur-3) var(--tn-ease-out-expo); }
  html.tn-sidebar-open .scrim { opacity: 1; pointer-events: auto; }
  html.tn-sidebar-open { overflow: hidden; }
  .topbar { padding: 0 12px; gap: 8px; background: var(--tn-ink); border-bottom-color: var(--tn-ink); color: var(--tn-on-ink); }
  .topbar__menu { display: grid; }
  .topbar__brand { display: grid; }
  .topbar .icon-btn { background: transparent; border-color: transparent; color: var(--tn-on-ink); }
  .topbar .crumbs, .topbar .crumbs a { color: var(--tn-on-ink-3); }
  .topbar .crumbs [aria-current="page"] { color: #fff; }
  .topbar .crumbs > :not(:last-child) { display: none; }
  .global-search { display: none; }
  .topbar .btn { display: none; }
  .content { padding: 20px 16px 48px; gap: 20px; }
  .t-h1 { font-size: 1.5625rem; }
  .page-head { align-items: flex-start; }
}

}

@layer tn.shell {
  /* Actuar como el proveedor (dueño, 2026-10-27/28): barra fija arriba; la barra superior se corre debajo. */
  .tn-acting { position: sticky; top: 0; z-index: calc(var(--tn-z-topbar) + 1); display: flex; align-items: center; justify-content: space-between;
    gap: 8px 14px; min-height: 44px; padding: 6px 16px; background: var(--tn-signal); color: #0A1F1D; font-size: 13.5px; }
  .tn-acting__text { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
  .tn-acting__meta { color: rgba(10, 31, 29, .78); }
  .tn-acting form { margin: 0; flex: none; }
  .is-acting .topbar { top: 44px; }
  @media (max-width: 640px) {
    .tn-acting__meta { display: none; }
    .tn-acting__text > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  }
}


/* Acción explícita al pie de todos los portales (dueño, 2026-10-31). */
@layer tn.shell {
  .sidebar-logout { margin: 0; }
  .sidebar-logout__button { display: flex; align-items: center; justify-content: flex-start; gap: 12px; position: relative; width: 100%; min-height: 44px; padding: 11px 14px; border: 1px solid var(--tn-side-line); border-radius: 12px; background: var(--tn-side-hover); color: var(--tn-side-fg); font: inherit; font-size: 13px; font-weight: var(--tn-fw-semibold); cursor: pointer; transition: background var(--tn-dur-2), color var(--tn-dur-2), border-color var(--tn-dur-2); }
  .sidebar-logout__button > .ico { flex: none; color: var(--tn-signal); }
  .sidebar-logout__button:hover { background: var(--tn-signal); color: var(--tn-ink); border-color: var(--tn-signal); }
  .sidebar-logout__button:hover > .ico { color: inherit; }
  .sidebar-logout__button:focus-visible { outline: 2px solid var(--tn-signal); outline-offset: 3px; }
  @media (min-width: 961px) {
    .app[data-sidebar="collapsed"] .sidebar-logout__button { justify-content: center; padding-inline: 0; }
    .app[data-sidebar="collapsed"] .sidebar-logout__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  }
  @media (prefers-reduced-motion: reduce) { .sidebar-logout__button { transition: none; } }
}