* { box-sizing:border-box; }
  body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--font-sans); min-height:100vh; }
  a:focus-visible, button:focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
  .wrap { max-width:1320px; margin:0 auto; padding:18px 40px; }
  /* Shell: sidebar + content. Below 900px the sidebar becomes a top bar with a menu button. */
  .shell { display:flex; min-height:100vh; }
  .side { flex:0 0 248px; width:248px; position:sticky; top:0; align-self:flex-start; height:100vh; border-right:1px solid var(--line); padding:24px 16px; display:flex; flex-direction:column; gap:28px; }
  .content { flex:1 1 0; min-width:0; }
  .topbar { display:none; }
  .brand { display:flex; flex-direction:column; gap:4px; padding:0 8px; }
  .wordmark-link { display:inline-flex; align-items:center; gap:8px; color:inherit; text-decoration:none; }
  .wordmark-link img { display:block; flex:none; }
  .wordmark { font-family:var(--font-display); font-size:22px; font-weight:800; letter-spacing:-0.3px; }
  .app { font-size:14px; color:var(--muted); }
  .sections { display:flex; flex-direction:column; gap:2px; flex:none; max-width:none; }
  .nav-link { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-md); color:var(--muted); text-decoration:none; transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
  .nav-link:hover { background:var(--surface-hover); color:var(--ink); }
  .nav-link[aria-current] { background:var(--surface); color:var(--ink); font-weight:600; }
  .nav-link .nav-label { flex-grow:1; }
  #nav-badge { display:inline-flex; }
  .badge { font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--ground); background:var(--state-block); border-radius:var(--radius-pill); padding:1px 8px; }
  .conn-card { margin-top:auto; padding:12px; border:1px solid var(--line); border-radius:var(--radius-md); display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }
  .conn-line { display:flex; align-items:center; gap:8px; color:var(--ink); font-size:14px; }
  .dot { width:7px; height:7px; border-radius:50%; background:var(--viridian); flex:none; }
  .conn.down .dot { background:var(--state-block); }
  .conn.down .conn-label { color:var(--state-block); }
  .menu-btn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; margin-right:-10px; color:var(--ink); background:transparent; border:0; border-radius:var(--radius-md); cursor:pointer; transition:background-color var(--duration-fast) var(--ease-out); }
  .menu-btn:hover { background:var(--surface-hover); }
  .menu-btn:focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
  .menu-btn .icon-close, .menu-btn[aria-expanded="true"] .icon-open { display:none; }
  .menu-btn[aria-expanded="true"] .icon-close { display:block; }
  .backdrop { display:none; }
  @media (max-width:900px) {
    .shell { flex-direction:column; }
    .topbar { display:flex; align-items:center; justify-content:space-between; width:100%; padding:8px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; background:var(--ground); }
    /* Drawer: closed by default, slides in from the left over a dimmed backdrop. */
    .side { position:fixed; top:0; left:0; bottom:0; z-index:20; width:min(80vw, 300px); height:100vh; height:100dvh; flex:none; background:var(--ground); border-right:1px solid var(--line); padding:16px; gap:16px; overflow-y:auto; transform:translateX(-100%); visibility:hidden; transition:transform 200ms var(--ease-out), visibility 0s linear 200ms; }
    .side[data-open] { transform:none; visibility:visible; transition:transform 200ms var(--ease-out), visibility 0s; }
    .side .brand { padding:8px 8px 0; }
    .sections, .conn-card { width:100%; }
    .conn-card { margin-top:auto; }
    .backdrop { display:block; position:fixed; inset:0; z-index:10; background:rgba(0, 0, 0, 0.5); opacity:0; pointer-events:none; transition:opacity 200ms var(--ease-out); }
    .side[data-open] + .backdrop { opacity:1; pointer-events:auto; }
  }
  /* On Actividad the sidebar collapses to an icon rail: the list-detail view needs the width.
     Labels stay in the accessible name; the title gives sighted users a tooltip. */
  @media (min-width:901px) {
    .shell:is([data-rail="on"], :not([data-rail="off"]):has(.view-actividad)) .side { flex-basis:72px; width:72px; padding:24px 12px; align-items:center; }
    .shell:is([data-rail="on"], :not([data-rail="off"]):has(.view-actividad)) .brand { padding:0; }
    .shell:is([data-rail="on"], :not([data-rail="off"]):has(.view-actividad)) .brand .wordmark, .shell:is([data-rail="on"], :not([data-rail="off"]):has(.view-actividad)) .brand .app { display:none; }
    .shell:is([data-rail="on"], :not([data-rail="off"]):has(.view-actividad)) .nav-link { position:relative; justify-content:center; padding:12px; }
    .shell:is([data-rail="on"], :not([data-rail="off"]):has(.view-actividad)) .nav-label, .shell:is([data-rail="on"], :not([data-rail="off"]):has(.view-actividad)) .conn-label, .shell:is([data-rail="on"], :not([data-rail="off"]):has(.view-actividad)) .last-access { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
    .shell:is([data-rail="on"], :not([data-rail="off"]):has(.view-actividad)) #nav-badge { position:absolute; top:2px; right:0; }
    .shell:is([data-rail="on"], :not([data-rail="off"]):has(.view-actividad)) .badge { font-size:11px; padding:0 5px; }
    .shell:is([data-rail="on"], :not([data-rail="off"]):has(.view-actividad)) .conn-card { padding:12px; border:0; align-items:center; }
  }
  /* Actividad is a list-detail view: the feed scrolls on its own in a fixed column, the detail beside it. */
  main.view-actividad { display:grid; grid-template-columns:minmax(320px, 380px) minmax(0, 1fr); gap:32px; align-items:start; }
  nav[aria-label="Decisiones recientes"] { flex:1 1 260px; max-width:320px; min-width:0; display:flex; flex-direction:column; }
  .nav-title { font-size:13px; color:var(--muted); padding:0 0 10px; }
  .item { text-decoration:none; color:inherit; display:grid; grid-template-columns:76px minmax(0, 1fr); gap:4px 12px; padding:14px 16px; border:1px solid transparent; border-radius:var(--radius-md); transition:background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
  .item:hover { background:var(--surface-hover); }
  .item[aria-current] { background:var(--surface); border-color:var(--line); }
  .item[aria-current]:hover { background:var(--surface-hover); border-color:var(--line-hover); }
  .item:focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
  .item .t { font-family:var(--font-mono); font-size:13px; color:var(--muted); }
  .item .v { font-size:15px; font-weight:700; }
  .item .what { grid-column:2; font-size:14px; color:var(--ink); overflow-wrap:anywhere; }
  .block { color:var(--state-block); } .alert { color:var(--state-review); } .allow { color:var(--state-normal); } .lifted { color:var(--muted); }
  .feed { min-width:0; display:flex; flex-direction:column; position:sticky; top:0; max-height:100vh; overflow-y:auto; padding:18px 4px 18px 0; margin-top:-18px; scrollbar-width:thin; }
  /* The feed scrolls; its rows never shrink to fit it. A new row has overflow:hidden while it
     animates, which drops its automatic min-height, so a full feed squeezed it until the next poll. */
  .feed > * { flex-shrink:0; }
  /* One flat list: every row has the same shape, separated by 1px lines. Only the word
     (and its color) tells the verdicts apart. Columns: time | word | user · action | status. */
  .row { text-decoration:none; color:inherit; display:grid; grid-template-columns:64px minmax(0, 1fr); grid-template-areas:"t v" ". w" ". s"; gap:2px 12px; align-items:baseline; padding:10px 12px; border-bottom:1px solid var(--line); }
  .feed .nav-title + .row { border-top:1px solid var(--line); }
  a.row { transition:background-color var(--duration-fast) var(--ease-out); }
  a.row:hover { background:var(--surface-hover); }
  a.row[aria-current] { background:var(--surface); border-radius:var(--radius-md); }
  a.row[aria-current]:hover { background:var(--surface-hover); }
  .row .t { grid-area:t; font-family:var(--font-mono); font-size:13px; color:var(--muted); }
  .row .v { grid-area:v; font-size:14px; font-weight:400; color:var(--muted); }
  .row .v::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:currentColor; margin-right:8px; }
  .row .what { grid-area:w; font-size:14px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .row .what .mono { font-size:13px; }
  .row .st { grid-area:s; font-family:var(--font-mono); font-size:12px; color:var(--muted); }
  /* Routes are evidence: never break them mid-path; the table box scrolls instead. */
  #detalle .box .mono { white-space:nowrap; }
  #detalle .box tbody th { white-space:nowrap; width:1%; padding-right:32px; }
  /* Phone: each comparison row becomes a block, the access under the normal, so "Este acceso" is never off-screen. */
  @media (max-width:600px) {
    .compare thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
    .compare, .compare tbody, .compare tr, .compare th, .compare td { display:block; width:auto; }
    .compare tr { padding:14px 16px; }
    .compare tbody tr + tr { border-top:1px solid var(--line); }
    .compare tbody th { padding:0 0 8px; width:auto; }
    .compare td { padding:2px 0; }
    .compare td::before { content:attr(data-label); display:block; font-size:12px; color:var(--muted); margin-top:6px; }
    .compare td.normal:empty { display:none; }
    #detalle .compare .mono { white-space:normal; overflow-wrap:anywhere; }
  }
  .row.k-normal .what { color:var(--muted); }
  .row.k-alert .v { color:var(--state-review); font-weight:600; }
  .row.k-block .v { color:var(--state-block); font-weight:600; }
  .note.calm { color:var(--ink); font-size:20px; line-height:1.4; padding:24px; }
  #detalle { flex:999 1 640px; min-width:0; display:flex; flex-direction:column; gap:28px; }
  .head { display:flex; flex-direction:column; gap:10px; }
  .meta { font-size:15px; color:var(--muted); overflow-wrap:anywhere; }
  .detected { font-family:var(--font-mono); font-size:14px; color:var(--muted); }
  .mono { font-family:var(--font-mono); }
  .meta .mono { color:var(--ink); }
  h1 { margin:0; font-family:var(--font-display); font-size:64px; line-height:1; font-weight:800; letter-spacing:-1.5px; }
  .rationale { margin:6px 0 0; font-size:24px; line-height:1.4; max-width:820px; overflow-wrap:anywhere; }
  .box { border:1px solid var(--line); border-radius:var(--radius-md); overflow-x:auto; }
  table { width:100%; border-collapse:collapse; font-size:16px; min-width:560px; }
  thead tr { text-align:left; color:var(--muted); font-size:13px; }
  th, td { padding:16px 20px; vertical-align:top; overflow-wrap:anywhere; }
  thead th { padding:14px 20px; font-weight:500; }
  thead th:first-child { width:22%; }
  tbody tr { border-top:1px solid var(--line); }
  tbody th { text-align:left; font-weight:600; }
  td.normal { color:var(--muted); }
  td .mono { font-size:15px; display:block; }
  td .mono + .mono { margin-top:4px; }
  .vh { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .sub { display:block; margin-top:2px; font-size:13px; font-weight:400; color:var(--muted); }
  .flag { font-family:var(--font-sans); font-weight:600; color:var(--state-block); margin-left:8px; }
  .flag.own { margin:6px 0 0; display:block; }
  .flag.review { color:var(--state-review); }
  .actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; }
  .actions form { margin:0; }
  .consequence { font-size:15px; color:var(--muted); }
  .note { padding:16px 18px; border-radius:var(--radius-md); border:1px solid var(--line); color:var(--muted); }
  .note.warn { color:var(--state-review); } .note.err { color:var(--state-block); }
  /* New rows (marked by panel.js, never on first load): grow from 0 height while fading and
     sliding in, so the rows below glide down instead of jumping. */
  @keyframes row-in {
    from { max-height:0; padding-top:0; padding-bottom:0; opacity:0; transform:translateY(-6px); }
    to { max-height:8rem; opacity:1; transform:none; }
  }
  @keyframes row-flash { from { background-color:color-mix(in srgb, var(--state-block) 16%, transparent); } }
  .row.is-new, .item.is-new { overflow:hidden; animation:row-in 220ms var(--ease-out); }
  .row.k-block.is-new { animation:row-in 220ms var(--ease-out), row-flash 1.2s var(--ease-out); }
  @media (prefers-reduced-motion: reduce) {
    .row.is-new, .item.is-new, .row.k-block.is-new { animation:none; }
  }
  @media (max-width:1100px) {
    /* Stacked: the verdict first, the feed below it with its own scroll. */
    main.view-actividad { grid-template-columns:minmax(0, 1fr); }
    .feed { order:1; position:static; max-height:60vh; margin-top:0; padding-top:0; }
  }
  @media (max-width:600px) {
    .wrap { padding-left:16px; padding-right:16px; }
    main.view-actividad { gap:28px; }
    h1 { font-size:44px; }
    .rationale { font-size:20px; }
  }
  /* Skeleton of the detail while a decision loads (panel.js copies <template id="detalle-skeleton"> into #detalle).
     Same blocks as the real detail: meta line, big verdict, rationale lines, comparison table. */
  #detalle[aria-busy="true"] { cursor:progress; }
  .sk { display:flex; flex-direction:column; gap:28px; }
  .sk-bar { display:block; height:14px; border-radius:var(--radius-sm, 4px); background:var(--line); }
  .sk-meta { width:min(340px, 60%); }
  .sk-verdict { width:min(300px, 80%); height:56px; border-radius:var(--radius-md); }
  .sk-line { height:20px; max-width:820px; }
  .sk-w70 { width:70%; } .sk-w50 { width:50%; }
  .sk-table { overflow:hidden; background:var(--surface); }
  .sk-row { display:grid; grid-template-columns:22fr 39fr 39fr; gap:20px; align-items:center; padding:18px 20px; }
  .sk-row + .sk-row { border-top:1px solid var(--line); }
  .sk-row.sk-head .sk-bar { grid-column:2; width:45%; height:12px; }
  .sk-row .sk-label { width:60%; }
  .sk-row .sk-bar:not(.sk-label) { width:75%; }
  .sk-bar { background-image:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--ink) 9%, transparent) 50%, transparent 100%); background-size:240px 100%; background-repeat:no-repeat; background-position:-240px 0; animation:sk-shimmer 1.4s linear infinite; }
  @keyframes sk-shimmer { to { background-position:calc(100% + 240px) 0; } }
  @media (prefers-reduced-motion: reduce) {
    .sk-bar { animation:none; background-image:none; }
  }

  /* Resumen, Usuarios, Rutas */
  :root { --chart-series:#6f807a; } /* 4.4:1 on --ground, 4.0:1 on --surface */
  main.view-resumen, main.view-usuarios, main.view-rutas { display:flex; flex-direction:column; gap:32px; }
  .page-head { display:flex; flex-direction:column; gap:8px; }
  .eyebrow { font-family:var(--font-mono); font-size:12px; letter-spacing:1px; color:var(--muted); }
  .page-title { margin:0; font-family:var(--font-display); font-weight:800; font-size:40px; line-height:1.1; letter-spacing:-0.5px; }
  .kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:16px; }
  .kpi { border:1px solid var(--line); border-radius:var(--radius-md); padding:20px; display:flex; flex-direction:column; gap:6px; min-width:0; }
  .kpi-label { font-size:14px; color:var(--muted); }
  .kpi-value { font-family:var(--font-display); font-weight:800; font-size:40px; line-height:1; overflow-wrap:anywhere; }
  .kpi-value.block { color:var(--state-block); }
  .kpi-sub { font-size:13px; color:var(--muted); }
  .panel-box { border:1px solid var(--line); border-radius:var(--radius-md); padding:24px; display:flex; flex-direction:column; gap:20px; min-width:0; }
  .panel-box-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; align-items:baseline; }
  h2 { margin:0; font-family:var(--font-display); font-weight:700; font-size:20px; }
  .legend { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
  .legend-dot { width:8px; height:8px; border-radius:50%; background:var(--state-block); }
  .muted-line { margin:0; color:var(--muted); font-size:15px; }
  .chart { display:grid; grid-template-columns:32px repeat(var(--cols), minmax(0, 1fr)); column-gap:2px; align-items:end; height:200px; border-bottom:1px solid var(--line); position:relative; }
  .chart .axis { align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; font-family:var(--font-mono); font-size:12px; color:var(--muted); padding-bottom:2px; }
  .bar { position:relative; height:100%; display:flex; flex-direction:column; justify-content:flex-end; }
  .bar .fill { background:var(--chart-series); border-radius:4px 4px 0 0; margin:0 6px; min-height:2px; transition:background-color var(--duration-fast) var(--ease-out); }
  .bar:hover .fill { background:#8a9a94; }
  .bar .tip { position:absolute; bottom:calc(var(--h) + 8px); left:50%; transform:translateX(-50%); z-index:2; font-family:var(--font-mono); font-size:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:4px 8px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity var(--duration-fast) var(--ease-out); }
  .bar:hover .tip { opacity:1; }
  .bar .marker { position:absolute; bottom:calc(var(--h) + 6px); left:50%; transform:translateX(-50%); width:10px; height:10px; border-radius:50%; background:var(--state-block); outline:2px solid var(--ground); }
  .bar.has-block:hover .marker { opacity:0; }
  .chart-labels { display:grid; grid-template-columns:32px repeat(var(--cols), minmax(0, 1fr)); column-gap:2px; font-family:var(--font-mono); font-size:12px; color:var(--muted); text-align:center; margin-top:-12px; }
  .chart-window { margin:0; font-size:13px; color:var(--muted); }
  .two-up { display:flex; flex-wrap:wrap; gap:24px; }
  .flat { flex:1 1 380px; min-width:0; display:flex; flex-direction:column; }
  .flat h2 { margin-bottom:8px; }
  .flat-row { text-decoration:none; color:inherit; display:grid; gap:12px; align-items:center; padding:14px 12px; border-top:1px solid var(--line); transition:background-color var(--duration-fast) var(--ease-out); }
  .flat-row:last-of-type { border-bottom:1px solid var(--line); }
  a.flat-row:hover { background:var(--surface-hover); }
  a.flat-row:focus-visible, .more-link:focus-visible, .users-table a:focus-visible { outline:var(--focus-ring); outline-offset:-2px; }
  .blocks-row { grid-template-columns:auto minmax(0, 1fr) auto; }
  .routes-group { display:flex; flex-direction:column; gap:8px; }
  .routes-foot { display:flex; flex-direction:column; gap:4px; }
  .routes-foot p { margin:0; }
  .routes-group h2 { margin:0; }
  .route-row { padding:14px 20px; font-size:15px; overflow-wrap:anywhere; }
  .route-row + .route-row { border-top:1px solid var(--line); }
  .route-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; }
  .route-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .users-row { grid-template-columns:minmax(0, 1fr) auto auto; }
  .clip { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
  .muted-time { font-size:13px; color:var(--muted); }
  .state { display:inline-flex; align-items:center; gap:8px; font-weight:600; }
  .state.normal { color:var(--muted); font-weight:400; }
  .state.block { color:var(--state-block); }
  .state-dot { width:8px; height:8px; border-radius:50%; background:currentColor; }
  .more-link { color:var(--muted); font-size:14px; padding:12px; text-decoration:none; }
  .more-link:hover { color:var(--viridian); }
  .users-table th, .users-table td { padding:14px 20px; }
  .users-table thead th { padding:14px 20px; }
  .users-table thead th:first-child { width:auto; }
  .users-table td .mono, .users-table th .mono { display:inline; font-size:14px; }
  .users-table a { color:var(--ink); }
  .users-table a:hover { color:var(--viridian); }
  .selected-note { font-size:14px; color:var(--muted); }
  .access-title { margin:0; font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:-0.3px; color:var(--muted); }
  .facts th, .facts td { padding-top:10px; padding-bottom:10px; }
  .facts tbody th { width:22%; }
  .facts { min-width:0; }
  [aria-busy="true"].is-loading { opacity:0.6; transition:opacity var(--duration-fast) var(--ease-out); }
  @media (prefers-reduced-motion: reduce) {
    .bar .tip, .bar .fill, .menu-btn, .nav-link { transition:none; }
    .side, .side[data-open], .backdrop { transition:none; }
  }
  @media (max-width:600px) {
    .page-title { font-size:30px; }
    .panel-box { padding:16px; }
    .chart, .chart-labels { grid-template-columns:24px repeat(var(--cols), minmax(0, 1fr)); }
    .bar .fill { margin:0 2px; }
    .users-row { grid-template-columns:minmax(0, 1fr) auto; }
    .users-row .muted-time { grid-column:1; }
  }
  table.vh { min-width:0; width:1px; }
  .bar .tip { left:0; transform:none; }
  .bar[data-late] .tip { left:auto; right:0; }
  .bar[data-late] .tip, .bar:not([data-late]) .tip { max-width:none; }
  .users-table th, .users-table td { overflow-wrap:normal; white-space:nowrap; }

/* Login and "sin organización" pages, and the session block of the sidebar. */
.auth-page { display:grid; place-items:center; padding:48px var(--space-4); }
.auth-card { width:100%; max-width:440px; display:flex; flex-direction:column; gap:20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-8) 28px; }
.auth-card h1 { margin:0; font-family:var(--font-display); font-size:28px; line-height:1.2; font-weight:700; letter-spacing:0; }
.auth-card p, .auth-card form { margin:0; }
.auth-heading { display:flex; flex-direction:column; gap:var(--space-2); }
.auth-brand { display:flex; align-items:center; gap:var(--space-2); }
.auth-muted { color:var(--muted); font-size:16px; line-height:1.55; }
.auth-small { color:var(--muted); font-size:13px; line-height:1.5; }
.auth-who { font-family:var(--font-mono); font-size:14px; line-height:1.5; overflow-wrap:anywhere; border:1px solid var(--line); border-radius:var(--radius-md); padding:10px 12px; }
.auth-error { border:1px solid var(--state-block); border-radius:var(--radius-md); padding:12px 14px; font-size:14px; line-height:1.5; }
.auth-error-lead { color:var(--state-block); font-weight:600; }
.auth-actions { display:flex; flex-direction:column; gap:var(--space-2); }
.auth-card .btn { width:100%; min-height:48px; }
.auth-actions .btn-ghost { min-height:44px; }
.session { display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-4); }
.session .who { color:var(--muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.session .logout { min-height:44px; padding:6px 12px; background:transparent; color:var(--ink); border:1px solid var(--line);
  border-radius:var(--radius-md); font-family:var(--font-sans); font-size:14px; cursor:pointer; }
.session .logout:hover { border-color:var(--line-hover); background:var(--surface-hover); }
.session .logout:focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }

/* Sidebar: switcher card (org · role / project / mode) and nav groups. */
.switcher { display:flex; align-items:center; gap:10px; padding:10px 12px; min-height:44px; border:1px solid var(--line); border-radius:var(--radius-md); color:var(--ink); text-decoration:none; transition:background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.switcher:hover { background:var(--surface-hover); border-color:var(--line-hover); }
.switcher svg { flex:none; color:var(--muted); }
.sw-text { flex-grow:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sw-org { font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sw-project { font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sw-mode { font-size:13px; color:var(--muted); }
.mode-observe { color:var(--state-review); }
.nav-group { display:flex; flex-direction:column; gap:2px; }
.nav-group + .nav-group { margin-top:14px; }
.nav-group-title { padding:0 12px 6px; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:1px; color:var(--muted); }
@media (min-width:901px) {
  .shell:is([data-rail="on"], :not([data-rail="off"]):has(.view-actividad)) .switcher { justify-content:center; padding:10px; }
  .shell:is([data-rail="on"], :not([data-rail="off"]):has(.view-actividad)) .sw-text, .shell:is([data-rail="on"], :not([data-rail="off"]):has(.view-actividad)) .nav-group-title { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .shell:is([data-rail="on"], :not([data-rail="off"]):has(.view-actividad)) .nav-group + .nav-group { margin-top:2px; }
}
.note.flash.ok { color:var(--ink); }
.content > .note.flash { margin:18px 40px 0; }

/* Account pages: Proyectos, Crear organización, Crear proyecto. A page of their own, no sidebar. */
.acct-body { margin:0; min-height:100vh; }
.acct-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:16px 24px; border-bottom:1px solid var(--line); }
.acct-user { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.acct-user form { margin:0; }
.acct-user .who { font-family:var(--font-mono); font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
.acct-wrap { max-width:1120px; margin:0 auto; padding:40px 16px 64px; display:flex; flex-wrap:wrap; gap:40px; }
.acct-narrow { max-width:640px; margin:0 auto; padding:40px 16px 64px; display:flex; flex-direction:column; gap:28px; }
.acct-orgs { flex:1 1 240px; max-width:300px; display:flex; flex-direction:column; gap:8px; }
.acct-orgs h2 { margin:0 0 4px; font:inherit; }
.acct-main { flex:999 1 520px; min-width:0; display:flex; flex-direction:column; gap:24px; }
.acct-head { display:flex; flex-direction:column; gap:6px; }
.acct-head-row { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; }
.acct-title { margin:0; font-family:var(--font-display); font-size:32px; line-height:1.2; font-weight:700; letter-spacing:0; }
.acct-lead { margin:0; font-size:16px; line-height:1.55; color:var(--muted); }
.acct-small { margin:0; font-size:14px; line-height:1.5; color:var(--muted); }
.acct-strong { color:var(--ink); font-weight:600; }
.back { align-self:flex-start; display:inline-flex; align-items:center; min-height:44px; font-size:14px; color:var(--viridian); text-decoration:none; }
.back:hover { color:var(--viridian-hover); }
.back:focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
.org { display:flex; flex-direction:column; gap:2px; padding:12px 14px; min-height:44px; border:1px solid var(--line); border-radius:var(--radius-md); color:var(--ink); text-decoration:none; transition:background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.org:hover { background:var(--surface-hover); border-color:var(--line-hover); }
.org[aria-current="page"] { background:var(--surface); border-color:var(--viridian); }
.org:focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
.org-name { font-size:16px; font-weight:600; overflow-wrap:anywhere; }
.org-meta { font-size:13px; color:var(--muted); }
.org-new { justify-content:flex-start; font-size:15px; }
.proj-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.proj-list form { margin:0; }
.proj-list .proj-mode { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px 12px; margin-top:6px; padding:0 4px; }
.proj { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; width:100%; min-height:44px; padding:18px 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); color:var(--ink); font:inherit; text-align:left; cursor:pointer; transition:background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.proj:hover { background:var(--surface-hover); border-color:var(--line-hover); }
.proj:focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
.proj svg { flex:none; color:var(--muted); margin-left:auto; }
.proj-main { flex:1 1 240px; min-width:0; display:flex; flex-direction:column; gap:4px; }
.proj-title { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.proj-name { font-size:18px; font-weight:600; overflow-wrap:anywhere; }
.proj-id { font-family:var(--font-mono); font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border:1px solid currentColor; border-radius:var(--radius-pill); font-size:13px; color:var(--viridian); }
.pill.mode-observe { color:var(--state-review); }
.pill.st-failed { color:var(--state-block); }
.pill-dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.btn-danger { background:transparent; color:var(--state-block); border-color:var(--state-block); }
.btn-danger:hover { background:color-mix(in srgb, var(--state-block) 14%, transparent); }
.danger { display:flex; flex-direction:column; gap:12px; padding:20px; border:1px solid var(--line); border-radius:var(--radius-md); }
.danger h2 { font-size:18px; }
.danger-form { margin:0; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.acct-form { margin:0; display:flex; flex-direction:column; gap:24px; }
.field { margin:0; padding:0; border:0; min-width:0; display:flex; flex-direction:column; gap:8px; }
.field label, .field legend { font-size:15px; font-weight:600; }
.field legend { padding:0 0 8px; }
.field input[type=text] { width:100%; min-height:44px; padding:10px 12px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-md); font-family:inherit; font-size:16px; }
.field input[type=text]:focus-visible { outline:var(--focus-ring); outline-offset:2px; }
.field.invalid input[type=text] { border-color:var(--state-block); }
.field-error { font-size:14px; color:var(--state-block); }
.choices { gap:10px; }
.choice, .check { display:flex; gap:12px; min-height:44px; cursor:pointer; }
.choice { padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); }
.choice:has(input:checked) { background:var(--viridian-tint); border-color:var(--viridian); }
.choice:has(input:focus-visible), .check:has(input:focus-visible) { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
.choice input, .check input { flex:none; margin:3px 0 0; width:18px; height:18px; accent-color:var(--viridian); }
.choice-body { display:flex; flex-direction:column; gap:4px; min-width:0; }
.choice-title { font-size:16px; font-weight:600; }
.choice-text { font-size:14px; line-height:1.5; color:var(--muted); }
.choice:has(input:checked) .choice-text { color:var(--ink); }
.info-box { display:flex; flex-direction:column; gap:6px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-md); }
.info-title { font-size:15px; font-weight:600; }
.info-text { font-size:14px; line-height:1.55; color:var(--muted); }
.form-actions { display:flex; flex-wrap:wrap; gap:8px; padding-top:8px; }
@media (max-width:600px) {
  .acct-top { padding:12px 16px; }
  .content > .note.flash { margin:16px 16px 0; }
  .acct-title { font-size:26px; }
  .proj { padding:16px; }
}

/* Team pages (members, keys, audit): inside the sidebar shell, forms and lists, no polling. */
.view-team { max-width:1000px; margin:0; }
.tm-page { display:flex; flex-direction:column; gap:28px; padding:14px 0 40px; }
.tm-card { display:flex; flex-direction:column; gap:12px; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); }
.tm-h2 { margin:0; font-size:18px; font-weight:600; }
.tm-count { color:var(--muted); font-weight:400; }
.tm-section { display:flex; flex-direction:column; gap:12px; }
.tm-invite { margin:0; display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
.tm-grow { flex:1 1 280px; }
.tm-role { flex:0 1 180px; }
.field input[type=email], .field input[type=url], .field input[type=search] { width:100%; min-height:44px; padding:10px 12px; background:var(--ground); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-md); font-family:inherit; font-size:16px; }
.field input[type=email]:focus-visible, .field input[type=url]:focus-visible { outline:var(--focus-ring); outline-offset:2px; }
.field.invalid input[type=email], .field.invalid input[type=url] { border-color:var(--state-block); }
select { min-height:44px; padding:8px 12px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-md); font-family:inherit; font-size:15px; }
.tm-card select { background:var(--ground); }
select:focus-visible { outline:var(--focus-ring); outline-offset:2px; }
.tm-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.tm-item { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; padding:10px 4px; border-bottom:1px solid var(--line); }
.tm-who { flex:1 1 260px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tm-name { font-size:16px; font-weight:600; overflow-wrap:anywhere; }
.tm-email { font-family:var(--font-mono); font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
.tm-strong { color:var(--ink); font-size:14px; }
.tm-fixed { min-width:96px; font-size:15px; }
.tm-note { min-width:150px; font-size:13px; color:var(--muted); }
.tm-warn { color:var(--state-review); }
.tm-inline { margin:0; display:flex; align-items:center; gap:8px; }
.tm-inline .btn { padding:8px 14px; font-size:14px; }
@media (max-width:600px) {
  .tm-note, .tm-fixed { min-width:0; }
  .tm-item { gap:8px 12px; }
}
.tm-denied { max-width:560px; background:transparent; }
.tm-denied-title { margin:0; font-family:var(--font-display); font-size:24px; line-height:1.2; font-weight:700; letter-spacing:0; }
.tm-empty { display:flex; flex-direction:column; gap:8px; padding:28px 24px; border:1px dashed var(--line); border-radius:var(--radius-md); }
.tm-conn.waiting .dot { background:var(--muted); }
.tm-reveal { display:flex; flex-direction:column; gap:14px; padding:20px; background:var(--viridian-tint); border:1px solid var(--viridian); border-radius:var(--radius-md); }
.tm-reveal-text { margin:0; font-size:15px; line-height:1.5; }
.tm-copy { display:flex; flex-wrap:wrap; gap:8px; align-items:stretch; }
.tm-code { flex:1 1 360px; min-width:0; padding:12px 14px; background:var(--ground); border:1px solid var(--line); border-radius:var(--radius-md); font-family:var(--font-mono); font-size:14px; line-height:1.5; overflow-wrap:anywhere; user-select:all; }
.tm-h3 { margin:6px 0 0; font-size:16px; font-weight:600; }
.tm-snippet-wrap { display:flex; flex-direction:column; gap:8px; }
.tm-snippet { margin:0; padding:12px 14px; background:var(--ground); border:1px solid var(--line); border-radius:var(--radius-md); font-family:var(--font-mono); font-size:13px; line-height:1.6; color:var(--ink); overflow-x:auto; white-space:pre; tab-size:4; }
.tm-snippet .c { color:var(--muted); }
.tm-snippet .k { font-weight:600; }
.tm-snippet .s { color:var(--viridian); }
.tm-snippet-copy { align-self:flex-end; }
.sn { display:flex; flex-direction:column; gap:12px; }
.sn-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); }
.sn-tabs [role="tab"] { min-height:44px; transition:color var(--duration-fast) var(--ease-out); appearance:none; background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; padding:8px 12px; font:inherit; font-weight:600; color:var(--muted); cursor:pointer; }
.sn-tabs [role="tab"][aria-selected="true"] { color:var(--ink); border-bottom-color:var(--ink); }
.sn-tabs [role="tab"]:hover { color:var(--ink); }
.sn-tabs [role="tab"]:focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
.sn-panel { display:flex; flex-direction:column; gap:12px; }
.sn-panel[hidden] { display:none; }
.sn-step { display:flex; flex-direction:column; gap:6px; }
.sn-step-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sn-name { font-size:16px; font-weight:600; color:var(--ink); }
.sn-name b { display:inline-grid; place-items:center; width:20px; height:20px; margin-right:6px; border-radius:var(--radius-pill); border:1px solid var(--line); color:var(--ink); font-family:var(--font-mono); font-size:12px; font-weight:500; }
.sn-note { margin:0; font-size:14px; line-height:1.5; }
.sn-agent { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:12px; border-top:1px solid var(--line); }
.sn-agent .meta { margin:0; font-size:14px; flex:1 1 240px; }
.sn-agent .btn { white-space:nowrap; }
.tm-saved { align-self:flex-start; color:var(--ink); border-color:var(--viridian); }
.tm-muted { color:var(--muted); }
.tm-revoked th, .tm-revoked td { color:var(--muted); }
.tm-actions { text-align:right; padding-top:8px; padding-bottom:8px; }
.tm-actions .tm-inline { justify-content:flex-end; }
.tm-filters { margin:0; display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
.tm-filter { flex:0 1 240px; min-width:0; display:flex; flex-direction:column; gap:6px; }
.tm-filter label { font-size:14px; font-weight:600; }
.tm-filter select { width:100%; }
.tm-audit { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.tm-entry { display:grid; grid-template-columns:150px minmax(0, 1fr); gap:4px 16px; padding:14px 4px; border-bottom:1px solid var(--line); }
.tm-ts { font-family:var(--font-mono); font-size:13px; color:var(--muted); }
.tm-what { font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
.tm-actor { font-weight:600; }
.tm-target { font-family:var(--font-mono); font-size:14px; }
.tm-detail { grid-column:2; font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
.tm-older { align-self:flex-start; }
@media (max-width:600px) {
  .tm-entry { grid-template-columns:minmax(0, 1fr); }
  .tm-detail { grid-column:1; }
  .tm-filter { flex:1 1 100%; }
}


/* Logout: icon + label; the collapsed rail of Actividad keeps only the icon (label stays for screen readers). */
.session .logout { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); }
@media (min-width:901px) {
  .shell:is([data-rail="on"], :not([data-rail="off"]):has(.view-actividad)) .session { align-items:center; }
  .shell:is([data-rail="on"], :not([data-rail="off"]):has(.view-actividad)) .session .who,
  .shell:is([data-rail="on"], :not([data-rail="off"]):has(.view-actividad)) .session .logout-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .shell:is([data-rail="on"], :not([data-rail="off"]):has(.view-actividad)) .session .logout { width:44px; padding:0; }
}
/* Activity with nothing to list yet: one column, no orphan list title. */
main.view-actividad:not(:has(.row, .item)) { grid-template-columns:minmax(0, 1fr); }
main.view-actividad:not(:has(.row, .item)) > nav { display:none; }
/* Rail toggle (wide screens): collapses the sidebar to icons; the choice persists per browser. */
.rail-btn { display:none; }
@media (min-width:901px) {
  .side .brand { flex-direction:row; align-items:center; justify-content:space-between; }
  .rail-btn:not([hidden]) { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; color:var(--muted); background:transparent; border:0; border-radius:var(--radius-md); cursor:pointer; transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
  .rail-btn:hover { background:var(--surface-hover); color:var(--ink); }
  .shell:is([data-rail="on"], :not([data-rail="off"]):has(.view-actividad)) .side .brand { flex-direction:column; gap:12px; }
}

/* Public unlock page (/desbloquear/{token}): the customer's brand. --unlock-accent is set only from a validated #RRGGBB. */
.unlock-brand { display:flex; align-items:center; min-height:40px; }
.unlock-logo { display:block; max-height:40px; max-width:100%; width:auto; }
.unlock-name { font-family:var(--font-display); font-size:20px; font-weight:700; }
.unlock-detail { margin:0; display:flex; flex-direction:column; gap:var(--space-2); border:1px solid var(--line); border-radius:var(--radius-md); padding:12px 14px; }
.unlock-detail div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-2); }
.unlock-detail dt { color:var(--muted); font-size:14px; }
.unlock-detail dd { margin:0; font-size:14px; font-weight:600; }
.unlock-page .unlock-button { background:var(--unlock-accent, var(--viridian)); border-color:var(--unlock-accent, var(--viridian)); color:var(--unlock-on-accent, var(--on-viridian)); }
.unlock-support a { color:var(--ink); overflow-wrap:anywhere; }
.tm-facts { margin:0; display:flex; flex-direction:column; gap:var(--space-2); }
.tm-facts div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-2); }
.tm-facts dt { color:var(--muted); font-size:14px; }
.tm-facts dd { margin:0; font-size:14px; font-weight:600; overflow-wrap:anywhere; }