/* Astrea · workspace — dirección visual B «el instrumento» + burdeos (doc 11 §7).
   Tokens y componentes extraídos de los mockups 02/03/05/06 (la verdad visual).
   Casi monocromo, mucho aire; el burdeos firma el espacio UNA vez (membrete). */

/* fuentes auto-alojadas (soberanía: sin llamadas a Google; offline en Electron) */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/static/fonts/inter-400.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/static/fonts/inter-500.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/static/fonts/inter-600.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('/static/fonts/inter-700.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/static/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/static/fonts/ibm-plex-mono-500.woff2') format('woff2'); }

:root{
  --paper:#FCFCFD; --board:#ECEEF1; --surface:#FFFFFF; --recess:#F6F7F9;
  --hair:#E6E9EC; --hair-strong:#D2D6DB;
  --ink:#16191D; --ink-2:#5D636C; --ink-3:#9AA1AB;
  --accent:#6E2230; --accent-press:#561826; --accent-wash:#F7ECEE;
  --ok:#3F7050; --warn:#9A6B1F; --priv:#3B4A66;
  --alert:#B5402F; /* plazo urgente — reservado */
  --scan:#FBFAF6;
  /* ── movimiento: tres tiempos y un compás (la familia única de la casa) ──
     entradas que se ASIENTAN, salidas que no entretienen, esperas a un compás */
  --dur-1:120ms;      /* micro: dim del mapa, menús efímeros */
  --dur-2:160ms;      /* estados interactivos y salidas */
  --dur-3:200ms;      /* entradas: settle-in, viewer, toast, scrim */
  --dur-pulso:1200ms; /* toda espera late al mismo compás */
  --ease-out:cubic-bezier(.25,.46,.45,.94); /* entradas: desacelera al posarse */
  --ease-exit:cubic-bezier(.4,0,1,1);       /* salidas: acelera y se va */
  --ease-inout:cubic-bezier(.45,0,.55,1);   /* pulsos */
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{ background:var(--board); color:var(--ink);
      font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
      font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.mono{ font-family:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace; }
.micro{ font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
button{ font-family:inherit; }
a{ color:var(--accent); text-decoration:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
/* glifos emoji en gris de la casa (única tinta no controlada del sistema) */
.hg{ filter:grayscale(1); opacity:.75; }
input[type="checkbox"]{ appearance:none; width:15px; height:15px; flex:none; margin:0;
  border:1.5px solid var(--hair-strong); border-radius:4px; cursor:pointer; background:#fff;
  display:inline-grid; place-content:center;
  transition:background var(--dur-1) ease, border-color var(--dur-1) ease, transform 70ms ease; }
input[type="checkbox"]:active{ transform:scale(.94); }
input[type="checkbox"]:checked{ background:var(--accent); border-color:var(--accent); }
/* el ✓ asienta sin rebote: marcar es un acto, no debe saludar */
input[type="checkbox"]:checked::before{ content:"✓"; color:#fff; font-size:10px; line-height:1;
  animation:chk-in .14s cubic-bezier(.2,.7,.3,1); }
@keyframes chk-in{ from{ transform:scale(.55); opacity:0; } }

/* ── masthead — el burdeos firma el espacio una vez (membrete) ─────────────── */
.appbar{ display:flex; align-items:center; justify-content:space-between; padding:15px 22px;
         border-top:2px solid var(--accent); border-bottom:1px solid var(--hair); background:var(--paper); }
.brand{ display:flex; align-items:center; gap:12px; }
.brand a{ display:flex; align-items:center; gap:12px; color:inherit; }
.wordmark{ font-weight:600; letter-spacing:.04em; color:var(--ink); }
.sep{ color:var(--hair-strong); }
.asunto-k{ font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.asunto-n{ color:var(--ink-2); }
.cmdk{ font-size:11.5px; color:var(--ink-3); border:1px solid var(--hair-strong); border-radius:6px; padding:3px 8px; }

/* ── botones ───────────────────────────────────────────────────────────────── */
.btn-primary{ background:var(--accent); color:#fff; border:none; border-radius:8px; padding:11px 17px;
              font-size:13.5px; font-weight:600; cursor:pointer; }
.btn-primary:hover{ background:var(--accent-press); }
.btn-primary:disabled{ opacity:.5; cursor:default; }
.btn-primary.sm{ padding:9px 16px; }
.btn-outline{ background:#fff; color:var(--accent); border:1px solid var(--accent); border-radius:8px;
              padding:7px 13px; font-size:12.5px; font-weight:600; cursor:pointer; }
.btn-outline:hover{ background:var(--accent-wash); }
.btn-text{ background:none; border:none; color:var(--accent); font-weight:600; font-size:13px; cursor:pointer; }
.btn-ghost{ background:none; border:none; color:var(--ink-3); font-size:12.5px; cursor:pointer; }
.btn-ghost:hover{ color:var(--ink-2); }
/* deshabilitado se VE deshabilitado en toda la familia (el porqué vive en el title) */
.btn-outline:disabled, .btn-ghost:disabled, .open:disabled{ opacity:.45; cursor:default; }
.btn-outline:disabled:hover{ background:#fff; }
.btn-ghost:disabled:hover{ color:var(--ink-3); }
/* espera larga narrada: dos pulsos con semántica distinta, un solo compás —
   `late` atenúa un control entero; `respira` enciende un indicador diminuto */
.ocupado{ animation:late var(--dur-pulso) var(--ease-inout) infinite; }
@keyframes late{ 50%{ opacity:.55; } }
@keyframes respira{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

/* ── señales — vocabulario diminuto y disciplinado (doc 11 §6) ─────────────── */
.sig{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:500; white-space:nowrap; }
.sig .sq{ width:7px; height:7px; border-radius:1px; display:inline-block; }
.sig.ok{ color:var(--ok); } .sig.ok .sq{ background:var(--ok); }
.sig.warn{ color:var(--warn); } .sig.warn .sq{ background:var(--warn); }
.sig.priv{ color:var(--priv); } .sig.priv .sq{ background:var(--priv); }
.sig.miss{ color:var(--ink-2); } .sig.miss .sq{ background:var(--ink-3); }
.sig .vfecha{ font-weight:400; color:var(--ink-3); } /* la fecha susurra; la señal habla */

/* el sello de «verificada» — un chip con filete, no un puntito (movimiento III) */
.seal{ display:inline-flex; align-items:center; gap:8px; padding:5px 11px 5px 8px;
       border:1px solid var(--ok); border-radius:6px; background:#fff; }
.seal .ring{ width:15px; height:15px; border:1.5px solid var(--ok); border-radius:50%;
             display:inline-flex; align-items:center; justify-content:center; color:var(--ok); font-size:9px; line-height:1; }
.seal .lbl{ font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ok); }
.seal.lg{ padding:7px 13px 7px 10px; }
.seal.lg .ring{ width:18px; height:18px; }
.seal.lg .lbl{ font-size:11px; }
/* el ⊂ a 10px con tracking se lee como una «c»: recupera su forma */
.seal .sub{ font-size:13px; line-height:0; vertical-align:-1.5px; letter-spacing:0; font-weight:500; }

/* pills de plazo — calmadas hasta que importan (mockup 03) */
.plazo{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
        padding:4px 11px; border-radius:999px; border:1px solid; white-space:nowrap; }
.plazo.soon{ color:var(--warn); border-color:#E4D2A8; background:#FBF6EA; }
.plazo.urgent{ color:var(--alert); border-color:#E6C3BA; background:#FBEEEA; }

/* ── lentes ────────────────────────────────────────────────────────────────── */
.tabs{ display:flex; gap:24px; border-bottom:1px solid var(--hair); margin-bottom:22px;
       position:relative; }
.tab{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
      padding:0 1px 12px; position:relative; cursor:pointer; background:none; border:none;
      font-variant-numeric:tabular-nums; /* «Dossier · 3»: los dígitos no ensanchan */ }
.tab.active{ color:var(--ink); }
.tab.active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
                    background:var(--accent); border-radius:2px; }
/* la tinta única que VIAJA entre lentes (el ::after queda de fallback sin JS) */
.tabs.has-ink .tab.active::after{ content:none; }
.tabink{ position:absolute; left:0; bottom:-1px; height:2px; width:60px;
         background:var(--accent); border-radius:2px; transform-origin:left;
         transition:transform var(--dur-2) ease; pointer-events:none; }

/* ── la ficha-átomo (mockup 02 v2: la cita es la protagonista) ─────────────── */
.card{ border:1px solid var(--hair); border-radius:10px; padding:19px 20px; margin-bottom:14px;
       background:var(--surface); transition:border-color var(--dur-2) ease; }
.card:hover{ border-color:var(--hair-strong); }
.card .ctop{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.kind{ font-size:10px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); }
.ctitle{ font-size:14px; font-weight:600; color:var(--ink); }
.cmeta{ font-size:11.5px; color:#7A828D; margin-top:3px; }
/* la ley da un paso al frente (movimiento I): 17px, medida propia */
.quote{ margin:14px 0 0; padding-left:16px; border-left:2px solid var(--hair-strong);
        font-size:17px; line-height:1.62; color:var(--ink); max-width:56ch; }
.quote .qmore{ font-size:11.5px; color:var(--ink-3); letter-spacing:.02em; }
.prop{ margin-top:9px; font-size:12.5px; color:var(--ink-2); }
.card.priv .quote{ border-left-color:var(--priv); }
.card.open-source .quote{ border-left-color:var(--accent); }
.cfoot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:15px;
        padding-top:12px; border-top:1px solid var(--hair); }
.cfoot .actions{ display:inline-flex; align-items:center; gap:14px; }
.open{ font-size:12.5px; color:var(--accent); font-weight:600; cursor:pointer; background:none; border:none; padding:0; }
.score{ font-size:11px; color:var(--ink-3); }
.card.laguna{ border-style:dashed; border-color:var(--hair-strong); background:#FCFCFD; }
.card.laguna .ctitle{ color:var(--ink-2); }
.card.laguna .sign{ margin:10px 0 0; font-size:12.5px; color:var(--ink-2); font-style:normal; }

/* ── workspace del asunto (mockup 02) ─────────────────────────────────────── */
/* el main es PAPEL (surface), no el gris del tablero: las fichas viven sobre blanco */
.workspace{ display:flex; height:calc(100vh - 53px); background:var(--surface); }
/* cada columna scrollea sola: el CTA del rail no desaparece bajo el fold del main */
.rail, .main{ overflow-y:auto; min-height:0; }
.rail{ width:clamp(360px, 25vw, 440px); flex:none; background:var(--recess); border-right:1px solid var(--hair);
       padding:20px 20px 26px; display:flex; flex-direction:column; }
.main{ flex:1; padding:20px 32px 40px; max-width:1560px; }
.qform{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.qbox{ width:100%; resize:vertical; min-height:84px; border:1px solid var(--hair-strong); border-radius:10px;
       padding:12px 13px; font:inherit; color:var(--ink); background:#fff; line-height:1.5; }
.qbox:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.qrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gen{ display:inline-flex; align-items:center; gap:7px; font-size:12px; line-height:1.3; color:var(--ink-2); }
.status{ margin-top:16px; font-size:12.5px; color:#7A828D; min-height:18px; }
.status.err{ color:var(--accent); }
.status.busy::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:1px;
                      background:var(--accent); margin-right:8px; animation:respira var(--dur-pulso) var(--ease-inout) infinite; }
.answer{ margin-top:16px; padding:14px 15px; background:#fff; border:1px solid var(--hair);
         border-radius:10px; max-height:46vh; overflow-y:auto; }
.answer .who{ font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
              color:var(--ink-3); margin-bottom:6px; }
.answer p{ margin:0 0 8px; color:var(--ink); line-height:1.55; font-size:13.5px; }
.answer p:last-of-type{ margin-bottom:0; }
.answer .md-h{ font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
               color:var(--ink-2); margin:12px 0 6px; }
.answer .md-ul{ margin:0 0 8px; padding-left:18px; font-size:13.5px; line-height:1.55; }
.md-hr{ border:none; border-top:1px solid var(--hair); margin:14px 0; }
.bpage hr{ border:none; border-top:1px solid var(--hair); margin:20px 0; }
.answer .md-ul li{ margin-bottom:3px; }
.answer .verif{ margin-top:10px; font-size:11.5px; }
/* la caja de la síntesis asienta UNA vez (nace con el primer delta o con el
   camino clásico; completarla no la re-anima) y el colofón llega con su curva */
.answer{ animation:settle-in var(--dur-3) var(--ease-out); }
.answer .fchips, .answer .verif{ animation:settle-in var(--dur-3) var(--ease-out) backwards; }
/* el cursor de la casa mientras el texto NACE: el mismo cuadradito de
   .status.busy, al pie del último bloque — dice «sigue llegando», no adorna */
.vivo.stream > :last-child::after, .avivo.stream > :last-child::after{
  content:""; display:inline-block; width:7px; height:13px; margin-left:4px;
  vertical-align:-2px; background:var(--accent); border-radius:1px;
  animation:respira var(--dur-pulso) var(--ease-inout) infinite;
}
/* el esqueleto del armazón se retira cuando el texto real ya nació */
.andamio .avivo:not(:empty) ~ .skl{ display:none; }
/* las fuentes de la síntesis: chips → clic salta a su ficha (identidad cita↔fuente) */
.fchips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.fchip{ font-size:11px; font-weight:600; border-radius:6px; padding:3px 9px; cursor:pointer;
        border:1px solid var(--hair-strong); background:#fff; color:var(--ink-2); }
.fchip.ok{ border-color:var(--ok); color:var(--ok); }
.fchip.warn{ border-color:#E4D2A8; color:var(--warn); }
.fchip:hover{ background:var(--recess); }
.card.flash{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.laguna-rail{ border-left:2px dashed var(--ink-3); padding:2px 0 2px 14px; margin-top:16px; }
.laguna-rail .tag{ font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.laguna-rail p{ margin:6px 0 8px; font-size:12.5px; color:var(--ink-2); }
.railfoot{ margin-top:auto; padding-top:18px; }
.empty-main{ color:var(--ink-3); font-size:13.5px; padding:40px 4px; max-width:48ch; line-height:1.6; }
.secthead{ display:flex; align-items:center; justify-content:space-between; margin:26px 2px 12px; }
.secthead:first-child{ margin-top:0; }

/* mini-form de tarjeta nueva (hecho/argumento/pretensión/laguna) */
.addcard{ display:flex; gap:8px; align-items:center; margin:6px 0 18px; }
.addcard select,.addcard input{ font:inherit; font-size:12.5px; border:1px solid var(--hair-strong);
  border-radius:7px; padding:6px 9px; background:#fff; color:var(--ink); }
.addcard input{ flex:1; }
.addcard input:focus,.addcard select:focus{ outline:none; border-color:var(--accent); }

/* ── portada (mockup 03) ──────────────────────────────────────────────────── */
.app{ display:flex; min-height:100vh; border-top:2px solid var(--accent); background:var(--surface); }
.side{ width:250px; flex:none; background:var(--recess); border-right:1px solid var(--hair);
       padding:16px 12px; display:flex; flex-direction:column; }
.side .brand{ gap:10px; padding:8px 8px 14px; }
.navlabel{ font-size:10px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
           color:var(--ink-3); padding:14px 10px 6px; }
.navitem{ display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:7px;
          font-size:13.5px; color:var(--ink-2); cursor:pointer; }
.navitem .ic{ width:15px; text-align:center; color:var(--ink-3); font-size:13px; }
.navitem.active{ background:#fff; color:var(--ink); font-weight:600;
                 box-shadow:inset 2px 0 0 var(--accent), 0 1px 1px rgba(20,23,28,.04); }
.navitem.active .ic{ color:var(--accent); }
.navitem.pending{ color:var(--ink-3); cursor:default; }
.navitem .pend{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-left:auto; }
.profile{ margin-top:auto; display:flex; align-items:center; gap:10px; padding:9px 10px; border-top:1px solid var(--hair); }
.avatar{ width:26px; height:26px; border-radius:50%; background:#E7E1DA; color:var(--ink-2);
         font-size:11px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; }
.pmain{ flex:1; padding:20px 26px 28px; display:flex; flex-direction:column; align-items:center; }
.pmain > *{ width:100%; max-width:1150px; }
.search{ display:flex; align-items:center; justify-content:space-between; border:1px solid var(--hair-strong);
         border-radius:9px; padding:11px 14px; color:var(--ink-3); font-size:14px; background:#fff;
         cursor:pointer; }
.search:hover{ border-color:var(--ink-3); }
.cmdk{ cursor:pointer; }
.mainhead{ display:flex; align-items:center; justify-content:space-between; margin:26px 2px 14px; }
.hero{ border:1px solid var(--hair); border-radius:11px; padding:17px 19px; background:#fff;
       box-shadow:0 1px 2px rgba(20,23,28,.04); cursor:pointer; }
.hero .resume-lbl{ display:block; margin-bottom:9px; }
.hero .aname{ font-size:15.5px; font-weight:600; color:var(--ink); }
.hero .lastq{ margin:12px 0 0; font-size:13.5px; color:var(--ink-2); }
.hero .herobar{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; min-height:22px; }
.hero .retomar{ color:var(--accent); font-weight:600; font-size:13px; }
.list{ margin-top:8px; }
.asunto{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
         padding:16px 19px; border-bottom:1px solid var(--hair); cursor:pointer; }
.asunto:last-child{ border-bottom:none; }
.asunto:hover{ background:var(--recess); }
.aname{ font-size:14.5px; font-weight:600; color:var(--ink); }
.apulse{ font-size:12.5px; color:var(--ink-3); margin-top:5px; }
.apulse .area{ color:var(--ink-2); font-weight:500; }
.aright{ display:flex; align-items:center; gap:12px; flex:none; padding-top:2px; }
.chev{ color:var(--ink-3); font-size:15px; }
/* el ⋯ se funde en vez de aparecer a saco — y existe para el teclado */
.arow-menu{ font-size:15px; line-height:1; padding:2px 6px; opacity:0; }
.asunto:hover .arow-menu, .asunto:focus-within .arow-menu,
.arow-menu:focus-visible{ opacity:1; }
.empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
        text-align:center; padding:64px 20px; min-height:60vh; }
.empty h2{ font-size:21px; font-weight:600; margin:20px 0 10px; letter-spacing:-.01em; }
.empty p{ color:var(--ink-2); max-width:48ch; line-height:1.6; margin:0 0 26px; }
.empty .actions{ display:flex; align-items:center; gap:16px; }

/* diálogo de nuevo asunto */
dialog.nuevo{ border:1px solid var(--hair); border-radius:12px; padding:22px 24px; width:400px;
              box-shadow:0 12px 40px rgba(20,23,28,.18); }
dialog.nuevo::backdrop{ background:rgba(22,25,29,.25); animation:scrim-in var(--dur-3) ease; }
dialog.nuevo h3{ margin:0 0 14px; font-size:15px; }
dialog.nuevo label{ display:block; font-size:11px; font-weight:600; letter-spacing:.1em;
                    text-transform:uppercase; color:var(--ink-3); margin:12px 0 5px; }
dialog.nuevo input{ width:100%; font:inherit; font-size:13.5px; border:1px solid var(--hair-strong);
                    border-radius:8px; padding:9px 11px; }
dialog.nuevo input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
dialog.nuevo .dactions{ display:flex; justify-content:flex-end; gap:12px; margin-top:20px; }

/* ── lector: «ver la cita en su fuente» (mockup 02, frame 2) ──────────────── */
.viewer-scrim{ position:fixed; inset:0; background:rgba(22,25,29,.28); z-index:40; }
.viewer{ position:fixed; top:0; right:0; bottom:0; width:min(760px, 92vw); background:var(--surface);
         z-index:41; box-shadow:-14px 0 44px rgba(20,23,28,.20); display:flex; flex-direction:column;
         animation:viewer-in var(--dur-3) var(--ease-out); }
@keyframes viewer-in{ from{ transform:translateX(24px); opacity:.6; } to{ transform:none; opacity:1; } }
@keyframes viewer-out{ to{ transform:translateX(24px); opacity:0; } }
.doc-head{ padding:19px 26px; border-top:2px solid var(--accent); border-bottom:1px solid var(--hair);
           background:var(--paper); display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.doc-head h2{ margin:0 0 4px; font-size:18px; font-weight:600; letter-spacing:-.005em; }
.doc-head .sub{ font-size:12px; color:var(--ink-2); }
.doc-head .hright{ display:flex; align-items:center; gap:14px; flex:none; padding-top:2px; }
.doc-close{ background:none; border:none; color:var(--ink-3); font-size:16px; cursor:pointer; padding:2px 6px; }
.doc-close:hover{ color:var(--ink); }
.doc-body{ padding:26px 34px 10px; overflow-y:auto; flex:1; }
.doc-body .art{ font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
                color:var(--ink-3); margin:0 0 18px 62px; }
.ruler{ position:relative; max-width:780px; }
.row{ display:grid; grid-template-columns:40px 1fr; column-gap:22px; padding:8px 0; }
.row .mark{ text-align:right; font-size:12.5px; font-weight:600; color:var(--ink-3); line-height:1.66; }
.row .body{ font-size:16.5px; line-height:1.66; color:var(--ink); white-space:pre-wrap; }
.row.cited .mark{ color:var(--accent); }
mark.cite{ background:var(--accent-wash); border-bottom:2px solid var(--accent); padding:1px 3px;
           border-radius:2px; color:var(--ink); }
.doc-foot{ padding:20px 26px 24px; border-top:1px solid var(--hair); display:flex;
           align-items:center; gap:18px; flex-wrap:wrap; }
.doc-foot .note{ font-size:12.5px; color:var(--ink-3); max-width:52ch; line-height:1.5; }
.doc-foot .src{ margin-left:auto; font-size:12.5px; font-weight:600; }

/* ── lente Mapa (mockups 05 + 06 fusionados) ──────────────────────────────── */
.maphead{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 10px; }
.toggle{ display:inline-flex; border:1px solid var(--hair-strong); border-radius:8px; overflow:hidden; }
.toggle button{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
                color:var(--ink-2); background:#fff; border:none; padding:7px 14px; cursor:pointer; }
.toggle button.on{ background:var(--accent); color:#fff; }
.legend{ display:flex; gap:15px; flex-wrap:wrap; }
.lg{ display:inline-flex; align-items:center; gap:7px; font-size:11px; color:var(--ink-2); }
.lg .b{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.lg .b.priv{ background:#52608A; } .lg .b.ofi{ background:#9AA1AB; }
.lg .b.arg{ background:var(--accent); } .lg .b.lag{ background:#fff; border:1.5px dashed var(--warn); }
.legend.est .b{ border-radius:3px; } /* en Estructura la leyenda rima con las fichas (05) */
.hint{ color:#7A828D; }
/* el lienzo crece con la ventana (feedback de Pau: 540px fijos desperdiciaban
   la pantalla); el mínimo protege las ventanas bajas */
.stage{ position:relative; height:max(540px, calc(100vh - 248px)); border:1px solid var(--hair);
        border-radius:11px; background:var(--paper); overflow:hidden; }
#graph{ width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
#graph.grabbing{ cursor:grabbing; }
.link{ stroke:var(--hair-strong); stroke-width:1.1; transition:opacity var(--dur-1) ease; }
.link.weak{ stroke:var(--warn); stroke-dasharray:4 4; }
.link.dim{ opacity:.10; }
.link.sel{ stroke:var(--ink-2); stroke-width:1.8; }
.linkhit{ stroke:transparent; stroke-width:12; cursor:pointer; }
.elabel{ font-size:10px; font-weight:600; letter-spacing:.03em; fill:var(--ink-3);
         paint-order:stroke; stroke:var(--paper); stroke-width:4px; stroke-linejoin:round;
         text-anchor:middle; pointer-events:none; }
.elabel.weak{ fill:var(--warn); }
/* la transición vive donde vive el cambio: .dim apaga el <g>, no el circle —
   sin esto el nodo SNAPEA mientras su enlace funde */
.node{ cursor:pointer; transition:opacity var(--dur-1) ease; }
.node circle{ stroke:#fff; stroke-width:1.5; }
.node .lbl{ font-size:11px; fill:var(--ink-2); paint-order:stroke; stroke:var(--paper); stroke-width:3px;
            stroke-linejoin:round; pointer-events:none; }
.node.priv circle{ fill:#52608A; } .node.doc circle{ fill:#33415E; }
.node.ofi  circle{ fill:#9AA1AB; } .node.juris circle{ fill:#7E848E; }
.node.arg  circle{ fill:var(--accent); } .node.pret circle{ fill:var(--accent-press); }
.node.lag  circle{ fill:#fff; stroke:var(--warn); stroke-width:1.5; stroke-dasharray:3 3; }
.node.lag .lbl{ fill:var(--warn); }
.node.dim{ opacity:.16; }
.node.hot circle{ stroke:var(--ink); stroke-width:2; }
.node.hot .lbl{ fill:var(--ink); font-weight:600; }
.node.linksrc circle{ stroke:var(--accent); stroke-width:2.5; }
.hint{ position:absolute; left:14px; bottom:12px; font-size:11px; color:var(--ink-3); pointer-events:none; }
.hint .mono{ color:var(--ink-2); }
.detail{ position:absolute; right:14px; top:14px; width:240px; background:#fff; border:1px solid var(--hair);
         border-radius:10px; box-shadow:0 6px 20px rgba(20,23,28,.12); padding:13px 15px; display:none; }
/* el panel asienta desde su borde; re-pintar contenido sobre un panel ya
   abierto no re-anima (add sobre .show presente es no-op) */
.detail.show{ display:block; animation:panel-in var(--dur-3) var(--ease-out); }
@keyframes panel-in{ from{ opacity:0; transform:translateX(8px); } }
.detail .dtype{ font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.detail .dttl{ font-size:14px; font-weight:600; margin:6px 0 8px; line-height:1.34; }
.detail .dconn{ font-size:11.5px; color:var(--ink-3); }
.detail .dactions{ display:flex; flex-direction:column; gap:7px; margin-top:11px; align-items:flex-start; }
.detail .dopen{ font-size:12.5px; font-weight:600; color:var(--accent); background:none; border:none;
                padding:0; cursor:pointer; }
.detail .ddanger{ font-size:12px; color:var(--ink-3); background:none; border:none; padding:0; cursor:pointer; }
.detail .ddanger:hover{ color:var(--alert); }
/* selector de etiqueta de enlace */
.linklabels{ position:absolute; z-index:5; background:#fff; border:1px solid var(--hair);
             border-radius:9px; box-shadow:0 6px 20px rgba(20,23,28,.14); padding:7px; display:none;
             flex-wrap:wrap; gap:6px; width:230px; }
.linklabels.show{ display:flex; }
.linklabels button{ font-size:11px; font-weight:600; color:var(--ink-2); background:var(--recess);
                    border:1px solid var(--hair); border-radius:6px; padding:4px 9px; cursor:pointer; }
.linklabels button:hover{ border-color:var(--accent); color:var(--accent); }
.linklabels button.pre{ border-color:var(--accent); color:var(--accent); } /* preselección: Enter la confirma */
.linklabels .kno{ opacity:.5; margin-right:4px; font-weight:500; }
.linklabels:focus{ outline:none; }

/* ── el mapa como mesa de trabajo (doc 16) ─────────────────────────────────── */
/* el puerto de enlace: aparece con el hover, arrastrar desde él enlaza */
.port{ fill:#fff; stroke:var(--accent); stroke-width:1.5; opacity:0; transition:opacity var(--dur-2) ease;
       cursor:crosshair; }
.node:hover .port, .node.linksrc .port{ opacity:1; }
.ghostlink{ stroke:var(--accent); stroke-width:1.2; stroke-dasharray:5 4; opacity:.7;
            pointer-events:none; }
.node.linktgt circle{ stroke:var(--ink); stroke-width:2.5; }
.node.linktgt .ncard{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.linkhit.linktgt{ stroke:rgba(110,34,48,.16); }
/* propuesto por el pasante: HUECO = propuesto, RELLENO = del autor. Trazo
   siempre CONTINUO — el discontinuo es propiedad exclusiva de la laguna. */
.node.prop circle{ fill:#fff; stroke-width:1.5; }
.node.prop.priv circle{ stroke:#52608A; } .node.prop.doc circle{ stroke:#33415E; }
.node.prop.ofi circle{ stroke:#9AA1AB; }  .node.prop.juris circle{ stroke:#7E848E; }
.node.prop.arg circle{ stroke:var(--accent); } .node.prop.pret circle{ stroke:var(--accent-press); }
.node.prop .lbl{ fill:var(--ink-3); }
.ncard.prop{ background:var(--recess); }
.ncard.prop .ntype{ color:var(--ink-3); }
/* señales de ficha-nodo que faltaban en el vocabulario del mapa */
.ncard .nsig.miss{ color:var(--ink-2); } .ncard .nsig.miss .sq{ background:var(--ink-3); }
.ncard .nsig.priv{ color:var(--priv); } .ncard .nsig.priv .sq{ background:var(--priv); }
.node.tocada circle{ stroke:var(--warn); stroke-width:1.6; } /* en Red solo lo negativo, nada verde */
/* el camino de la pretensión: la cadena en tinta, las cargas en ámbar, sin apagarse */
.link.lit{ stroke:var(--ink-2); stroke-width:1.6; }
.link.carga{ stroke:var(--warn); }
.elabel.lit{ fill:var(--ink-2); }
.node.carga circle{ stroke:var(--warn); stroke-width:2; }
.node.carga .ncard{ border-color:var(--warn); }
.pulse{ animation:map-pulse 1.1s ease 2; } /* dos pulsos y muere — instrumento, no feria */
@keyframes map-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
/* el nacimiento: los nodos/aristas NUEVOS asientan una vez. Se escala el
   CONTENIDO, jamás el <g> — render() escribe su transform cada frame y un
   transform CSS encima lo arrancaría del sitio. El puerto queda fuera (su
   reposo es opacity:0 y animarlo lo encendería). */
.node.nace > circle:not(.port), .node.nace > foreignObject{
  transform-box:fill-box; transform-origin:center;
  animation:node-nace var(--dur-3) var(--ease-out);
}
.node.nace > .lbl, .link.nace{ animation:fade-nace var(--dur-3) ease; }
@keyframes node-nace{ from{ opacity:0; transform:scale(.72); } }
@keyframes fade-nace{ from{ opacity:0; } }
/* huecos deterministas (toggle): marca sin alarma — un hueco es frontera */
.node.hueco circle{ stroke:var(--warn); stroke-width:2; }
.nsig .sq.hueco{ background:transparent; border:1.5px solid var(--warn); }
/* el editor inline: capturar donde miras */
.nodeeditor{ position:absolute; z-index:6; width:230px; background:#fff;
             border:1px solid var(--accent); border-radius:9px;
             box-shadow:0 6px 20px rgba(20,23,28,.12); padding:10px 12px;
             animation:settle-in var(--dur-3) var(--ease-out); }
.nodeeditor select{ font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
                    color:var(--ink-3); border:none; background:none; margin-bottom:4px;
                    cursor:pointer; outline:none; }
.nodeeditor input{ width:100%; border:none; outline:none; font:inherit; font-size:12.5px;
                   font-weight:600; color:var(--ink); background:transparent; }
.nodeeditor .ehint{ margin-top:6px; font-size:10px; color:var(--ink-3); }
/* el vacío que invita: la tesis fantasma */
.map-empty{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
            justify-content:center; gap:18px; pointer-events:none; }
.map-empty .fantasma{ width:210px; pointer-events:auto; cursor:pointer; transition:border-color var(--dur-2) ease; }
.map-empty .fantasma:hover{ border-color:var(--accent); }
.map-empty .me-hints{ font-size:11px; color:var(--ink-3); display:flex; flex-direction:column;
                      gap:4px; text-align:center; }
.map-empty .me-hints .mono{ color:var(--ink-2); }
/* el panel se ensancha: en él se TRABAJA */
.detail{ width:300px; max-height:calc(100% - 28px); overflow-y:auto; }
.detail .dsigs{ display:flex; flex-wrap:wrap; gap:8px 12px; margin:2px 0 6px; }
.detail .dquote{ font-size:12.5px; line-height:1.5; color:var(--ink-2);
                 border-left:2px solid var(--hair-strong); padding-left:9px; margin:8px 0; }
.detail .dprop{ font-size:12px; color:var(--ink-2); font-style:italic; margin:4px 0; }
.detail .dttl{ cursor:text; }
.detail .dband{ background:var(--recess); border-radius:7px; padding:8px 10px; font-size:11.5px;
                color:var(--ink-2); margin:8px 0; }
.detail .dband-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:7px; }
.detail .dband-link{ font-size:11px; color:var(--ink-3); margin-top:5px; display:flex;
                     align-items:center; gap:6px; }
.detail .dconn-h{ font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
                  color:var(--ink-3); margin-top:12px; }
.detail .dback{ background:none; border:none; color:var(--ink-3); font-size:11.5px;
                cursor:pointer; padding:0 0 8px; display:block; }
.detail .dback:hover{ color:var(--ink); }
.detail .dconn-row .dfl{ color:var(--ink-3); flex:none; font-weight:600; }
.detail .dconn-row .dcl{ flex:none; font-size:10px; font-weight:600; color:var(--ink-2);
                         border:1px solid var(--hair-strong); border-radius:20px;
                         padding:1px 8px; background:#fff; }
.detail .dconn-row .dcl.weak{ color:var(--warn); border-color:#E4D2A8; border-style:dashed; }
.detail .dconn-row .dct{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.detail .dconns{ margin:6px 0 0; display:flex; flex-direction:column; gap:3px; }
.detail .dconn-row{ display:flex; gap:8px; align-items:center; font-size:11.5px; background:none;
                    border:none; padding:3px 4px; cursor:pointer; border-radius:6px; text-align:left; }
.detail .dconn-row:hover{ background:var(--recess); }
.detail .dconn-row .dcl{ color:var(--ink-3); flex:none; }
.detail .dconn-row .dct{ color:var(--ink); font-weight:500; }
.detail .dver{ margin:6px 0; font-size:12px; }
.detail .dhuecos{ display:flex; flex-direction:column; gap:2px; margin:6px 0; }
.detail .dhueco{ display:flex; gap:7px; align-items:baseline; font-size:11.5px; color:var(--ink-2);
                 background:none; border:none; padding:4px; text-align:left; cursor:pointer;
                 border-radius:6px; width:100%; }
.detail .dhueco:hover{ background:var(--recess); }
.detail .dhueco .sq{ width:6px; height:6px; flex:none; background:var(--warn); border-radius:1px;
                     align-self:center; }
.detail .dhueco .ir{ margin-left:auto; color:var(--accent); font-weight:600; flex:none; }
.detail .dobj{ padding:6px 0; border-top:1px solid var(--hair); }
.detail .dobj:first-of-type{ border-top:none; }
.detail .dobj-t{ font-size:12px; color:var(--ink); line-height:1.4; }
.detail .dobj-a{ display:flex; gap:10px; margin-top:4px; flex-wrap:wrap; }
/* chips de etiqueta: el enlace se corrige sin destruirlo */
.lchips{ display:flex; flex-wrap:wrap; gap:5px; margin:8px 0 2px; }
.lchip{ font-size:10.5px; font-weight:600; color:var(--ink-2); background:var(--recess);
        border:1px solid var(--hair); border-radius:6px; padding:3px 8px; cursor:pointer; }
.lchip:hover{ border-color:var(--accent); color:var(--accent); }
.lchip.on{ border-color:var(--accent); color:var(--accent); }
.detail .dopen[disabled]{ color:var(--ink-3); cursor:default; }
/* propuestas del pasante: arista fantasma punteada FINA (2 5, gris) — inconfundible
   con la laguna (4 4 ámbar); la etiqueta es una PREGUNTA y su tipografía lo dice */
.link.prop{ stroke:var(--ink-3); stroke-dasharray:2 5; opacity:.6; }
.elabel.prop{ fill:var(--ink-3); font-style:italic; }
.bandeja-mapa{ position:absolute; left:14px; top:14px; bottom:14px; width:300px; overflow-y:auto;
               background:var(--recess); border:1px solid var(--hair); border-radius:12px;
               padding:12px 14px; animation:settle-in var(--dur-3) var(--ease-out); z-index:5; }
.bandeja-mapa .bm-row{ padding:8px 0; border-top:1px solid var(--hair); }
.bandeja-mapa .bm-row:first-of-type{ border-top:none; }
.bandeja-mapa .bm-t{ font-size:12px; font-weight:600; color:var(--ink); line-height:1.35; }
.bandeja-mapa .bm-l{ color:var(--ink-3); font-weight:500; font-style:italic; }
.bandeja-mapa .bm-pq{ font-size:11.5px; color:var(--ink-2); margin:3px 0; line-height:1.4; }
.bandeja-mapa .bm-a{ display:flex; gap:10px; align-items:center; }
/* chips del maphead: lo pendiente, ineludible sin alarmismo */
.mapchip{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
          color:var(--ink-2); background:#fff; border:1px solid var(--hair-strong);
          border-radius:8px; padding:5px 10px; cursor:pointer; }
.mapchip .sq{ width:7px; height:7px; border-radius:1px; background:var(--ink-3); }
.mapchip.warn{ color:var(--warn); border-color:#E4D2A8; } .mapchip.warn .sq{ background:var(--warn); }
.btn-ghost.on{ color:var(--accent); }

/* ── ⌘K: «Ir a un asunto, una norma, una sentencia…» ──────────────────────── */
.cmdk-overlay{ position:fixed; inset:0; background:rgba(22,25,29,.30); z-index:60; display:none;
               align-items:flex-start; justify-content:center; padding-top:14vh; }
.cmdk-overlay.show{ display:flex; }
.cmdk-panel{ width:min(560px, 92vw); background:var(--surface); border:1px solid var(--hair);
             border-radius:12px; border-top:2px solid var(--accent);
             box-shadow:0 18px 60px rgba(20,23,28,.28); overflow:hidden; }
.cmdk-input{ width:100%; border:none; outline:none; font:inherit; font-size:15px; color:var(--ink);
             padding:15px 18px; border-bottom:1px solid var(--hair); background:var(--paper); }
.cmdk-input::placeholder{ color:var(--ink-3); }
.cmdk-list{ max-height:320px; overflow-y:auto; padding:6px; }
.cmdk-item{ display:flex; align-items:baseline; gap:11px; padding:9px 12px; border-radius:8px;
            cursor:pointer; }
.cmdk-item.active{ background:var(--recess); box-shadow:inset 2px 0 0 var(--accent); }
.cmdk-item .ckind{ flex:none; width:86px; font-size:9.5px; font-weight:700; letter-spacing:.12em;
                   text-transform:uppercase; color:var(--ink-3); }
.cmdk-item .clabel{ font-size:13.5px; color:var(--ink); font-weight:500; white-space:nowrap;
                    overflow:hidden; text-overflow:ellipsis; }
.cmdk-item .chint{ margin-left:auto; font-size:11.5px; color:var(--ink-3); white-space:nowrap; }
.cmdk-empty{ padding:18px 14px; font-size:13px; color:var(--ink-3); text-align:center; }

/* vista compacta del dossier (30+ autoridades): una fila por autoridad */
.crow{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid var(--hair); font-size:13px; cursor:pointer; }
.crow:hover{ background:var(--recess); }
.crow-t{ flex:1; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crow-v{ font-size:11px; color:var(--ink-3); }

/* la bandeja del pasante: candidatas visualmente subordinadas al dossier */
.bandeja{ background:var(--recess); border:1px solid var(--hair); border-radius:12px;
          padding:14px 16px 4px; margin-bottom:26px; }
/* al ESTRENO las candidatas llegan en cadencia (45 ms, tope en la 7.ª: de ahí
   en adelante juntas) — un re-render por guardado no re-desfila nada */
.bandeja-body > *{ animation:settle-in var(--dur-3) var(--ease-out) backwards;
                   animation-delay:calc(var(--i, 0) * 45ms); }
.bandeja-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.bandeja .card{ box-shadow:none; }
.bandeja.plegada .card, .bandeja.plegada .bandeja-body{ display:none; }

/* el diario de investigación (rail): rastro de diligencia, no chat */
.diario{ margin-top:20px; }
.diario .dq{ padding:9px 0; border-top:1px solid var(--hair); cursor:pointer; }
.diario .dq:hover .dqq{ color:var(--ink); }
.diario .dqq{ font-size:12.5px; color:var(--ink-2); line-height:1.45; }
.diario .dmeta{ font-size:11px; color:#7A828D; margin-top:3px; }

/* toast con deshacer (borrados sin miedo) */
.toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:70;
        background:var(--ink); color:#fff; font-size:13px; border-radius:9px;
        padding:11px 16px; display:flex; align-items:center; gap:14px;
        box-shadow:0 8px 30px rgba(20,23,28,.35); }
.toast button{ background:none; border:none; color:#F3C9A0; font-weight:600; font-size:13px;
               cursor:pointer; padding:0; }

/* dropzone del expediente (enseña el contrato aunque la ingesta llegue con Folio) */
.dropz{ border:1.5px dashed var(--hair-strong); border-radius:11px; padding:34px 22px;
        text-align:center; color:var(--ink-2); font-size:13.5px; max-width:520px;
        transition:border-color var(--dur-2) ease, background var(--dur-2) ease; }
.dropz .micro{ display:block; margin-top:8px; }
.dropz.armado{ border-color:var(--accent); background:rgba(110,34,48,.04); }

/* mini-form de laguna en el rail (sin prompt() nativo) */
.lagform{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.lagform input{ font:inherit; font-size:12.5px; border:1px solid var(--hair-strong); border-radius:8px;
                padding:8px 10px; background:#fff; }
.lagform input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.lagform .lagrow{ display:flex; gap:10px; align-items:center; }

/* ── lente Expediente (mockup 04) + visor del original ────────────────────── */
.exp{ display:flex; gap:24px; align-items:flex-start; }
.exp-list{ width:300px; flex:none; }
.docrow{ display:flex; align-items:center; gap:11px; padding:11px 10px; border-radius:8px;
         cursor:pointer; border:1px solid transparent; }
.docrow:hover{ background:var(--recess); }
.docrow.sel{ background:var(--recess); box-shadow:inset 2px 0 0 var(--accent); }
.docrow .di{ color:var(--ink-3); font-size:14px; width:16px; text-align:center; }
.docrow .dn{ font-size:13.5px; font-weight:500; color:var(--ink);
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.docrow .dm{ font-size:11.5px; color:#7A828D; margin-top:1px; }
.docrow .dstat{ margin-left:auto; flex:none; }
.docrow .sq{ width:7px; height:7px; border-radius:1px; display:inline-block; }
.docrow .sq.ok{ background:var(--ok); } .docrow .sq.proc{ background:var(--warn); }
.exp-detail{ flex:1; max-width:820px; }
.exp-detail .dhead{ margin-bottom:14px; }
.exp-detail .dhead h3{ margin:0 0 4px; font-size:16px; font-weight:600; }
.exp-detail .dhead .sub{ font-size:12.5px; color:#7A828D; }
.exp-detail .dactions{ display:flex; align-items:center; gap:16px; margin-top:14px; }
.grad{ border:1px solid var(--hair); border-radius:11px; padding:15px 17px; margin-top:16px;
       background:#fff; }
.grad .step{ display:flex; align-items:center; gap:11px; padding:7px 0; }
.grad .schk{ width:18px; height:18px; border:1.5px solid var(--ok); border-radius:50%;
             color:var(--ok); font-size:10px; display:inline-flex; align-items:center;
             justify-content:center; flex:none; }
.grad .schk.warn{ border-color:var(--warn); color:var(--warn); }
.grad .sname{ font-size:13px; font-weight:600; }
.grad .smeta{ font-size:11.5px; color:#7A828D; }
.grad .stag{ margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.12em;
             text-transform:uppercase; color:var(--ink-3); }
.grad .arrow{ width:18px; text-align:center; color:var(--accent); font-weight:700; flex:none; }
/* la ficha de datos extraídos (mockup 04): clave · valor · ancla ⤷ */
.ficha{ border-top:1px solid var(--hair); margin-top:9px; padding-top:5px; }
.frow{ display:flex; align-items:baseline; gap:10px; padding:6px 0 6px 29px; }
.frow .fk{ width:160px; flex:none; font-size:12px; color:var(--ink-3); }
.frow .fv{ font-size:13px; color:var(--ink); }
.frow .fa{ color:var(--accent); font-size:12px; font-weight:600; background:none; border:none;
           cursor:pointer; padding:0; }

.viewer.wide{ width:min(1240px, 97vw); }
.dv-body{ display:flex; flex:1; min-height:0; }
.dv-lines{ width:400px; flex:none; border-right:1px solid var(--hair); display:flex;
           flex-direction:column; min-height:0; }
.dv-find{ display:flex; align-items:center; gap:2px; margin:12px 14px 8px; }
.dv-find .dv-search{ margin:0; flex:1; min-width:0; }
.dv-search{ margin:12px 14px 8px; font:inherit; font-size:12.5px; border:1px solid var(--hair-strong);
            border-radius:8px; padding:7px 10px; }
.dv-search:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.dv-count{ font-size:11px; color:var(--ink-3); padding:0 7px; white-space:nowrap; }
.dv-count:empty{ display:none; }
/* la búsqueda RESALTA, no filtra: la lista entera se queda (contexto intacto);
   la ocurrencia ACTUAL destaca sobre sus hermanas (mark.cur, la parada del salto) */
.dline mark{ background:#F3E3AE; color:inherit; padding:0; border-radius:2px; }
.dline mark.cur{ background:#EAC15C; box-shadow:0 0 0 1.5px #D9A93B; }
.dv-list{ overflow-y:auto; padding:0 6px 14px; flex:1; }
.dv-psep{ padding:12px 8px 4px; }
.dline{ font-size:13px; line-height:1.45; color:var(--ink-2); padding:4px 8px; border-radius:6px;
        cursor:pointer; }
.dline.dpara{ line-height:1.55; margin:0 0 8px; } /* párrafos: bloques que respiran, no esquirlas */

/* visibilidad del asunto (doc 27 §2): lo privado se marca, lo normal calla */
.vpriv{ font-weight:600; color:#52608A; }
.vpriv::before{ content:"⚿ "; }

/* copresencia (doc 27 §4): quién más está en la sala — un susurro, no un badge */
.copresencia{ font-size:11.5px; color:var(--ink-3); white-space:nowrap; }
#bColision{ margin:0 auto 14px; max-width:860px; }
.dline:hover{ background:var(--recess); color:var(--ink); }
.dline.sel{ background:var(--accent-wash); color:var(--ink); box-shadow:inset 2px 0 0 var(--accent); }
.dv-page{ flex:1; overflow:auto; background:#EAECEF; padding:22px; }
.dv-canvas{ position:relative; margin:0 auto; max-width:860px;
            box-shadow:0 2px 6px rgba(20,23,28,.12), 0 14px 36px rgba(20,23,28,.12); }
.dv-canvas img{ display:block; width:100%; }
.dv-canvas svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.dv-tag{ font-size:9px; font-weight:700; letter-spacing:.12em; fill:var(--accent);
         font-family:'Inter',sans-serif; }

/* ── el río de la Estructura v2 (mockup 07-C): bandas por pretensión ───────── */
.banda-bg{ fill:#FAFAFB; stroke:var(--hair); }
.banda-bg.plegada{ fill:var(--recess); }
.banda-t{ font-size:13px; font-weight:700; fill:var(--ink); font-family:Inter,sans-serif; }
.banda-e{ font-size:10px; font-weight:600; fill:var(--ink-3); font-family:Inter,sans-serif;
          letter-spacing:.04em; }
.banda-e.warn{ fill:var(--warn); }
.banda-hit{ fill:transparent; cursor:pointer; }

/* las manchas de los bloques (mockup 07-A): la Red agrupada por pretensión */
.mancha{ fill:var(--accent-wash); stroke:var(--accent-wash); stroke-width:96;
         stroke-linejoin:round; stroke-linecap:round; opacity:.5; pointer-events:none; }
.mancha.sueltos{ fill:var(--recess); stroke:var(--recess); opacity:.75; }
.mancha-t{ font-size:12.5px; font-weight:700; fill:var(--accent);
           font-family:Inter,sans-serif; pointer-events:none; }
.mancha-t.sueltos{ fill:var(--ink-3); }
.mancha-e{ font-size:9.5px; font-weight:600; fill:var(--ink-3);
           font-family:Inter,sans-serif; pointer-events:none; }
.mancha-e.warn{ fill:var(--warn); }
.mancha-t.clicable{ pointer-events:auto; cursor:pointer; text-decoration:underline;
                    text-decoration-color:var(--hair-strong); text-underline-offset:3px; }
.mancha-t.clicable:hover{ text-decoration-color:var(--accent); }

/* la órbita de una pretensión (mockup 07-B): anillos por distancia lógica */
.anillo{ fill:none; stroke:var(--hair-strong); stroke-width:1; stroke-dasharray:2 5; }
.anillo-t{ font-size:8.5px; font-weight:700; letter-spacing:.14em; fill:var(--ink-3);
           font-family:Inter,sans-serif; pointer-events:none; }
.orbita-bar{ position:absolute; top:12px; left:50%; transform:translateX(-50%);
             display:flex; align-items:center; gap:10px; background:var(--surface);
             border:1px solid var(--hair); border-radius:10px; padding:7px 12px;
             box-shadow:0 8px 26px rgba(20,23,28,.12); z-index:5; max-width:92%; }
.orbita-bar .toggle{ max-width:640px; overflow-x:auto; }

/* la cola de revisión: una propuesta cada vez, con teclado */
.bandeja-mapa .bm-nav{ display:flex; gap:2px; }
.bandeja-mapa .bm-k{ font-size:9.5px; font-weight:700; letter-spacing:.12em;
                     text-transform:uppercase; color:var(--ink-3); margin-bottom:3px; }
.bandeja-mapa .bm-kbd{ font-size:9px; font-weight:600; color:var(--ink-3);
                       border:1px solid var(--hair-strong); border-radius:4px;
                       padding:0 4px; margin-left:4px; vertical-align:1px; }
.dv-nav{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2); }

/* ── lente Borrador: el escrito del autor ─────────────────────────────────── */
.btoolbar{ display:flex; align-items:center; gap:12px; margin:0 auto 14px; max-width:860px; }
.bpage{ background:#fff; border:1px solid var(--hair); border-radius:12px; max-width:860px;
        margin-left:auto; margin-right:auto;
        min-height:62vh; padding:46px 58px; font-size:16.5px; line-height:1.7; color:var(--ink);
        box-shadow:0 1px 2px rgba(20,23,28,.04); outline:none; }
.bpage:focus{ border-color:var(--hair-strong); }
.bpage:empty::before{ content:"Escribe aquí tu escrito — o inserta citas del dossier y pide un armazón al pasante.";
                      color:var(--ink-3); }
.bpage p{ margin:0 0 12px; }
.bchip{ display:inline-flex; align-items:center; gap:5px; border:1px solid var(--hair-strong);
        border-radius:6px; padding:1px 8px; font-size:13.5px; color:var(--ink-2); cursor:pointer;
        background:var(--paper); white-space:nowrap; vertical-align:baseline; }
.bchip:hover{ border-color:var(--accent); color:var(--accent); }
.bchip .bok{ color:var(--ok); font-size:11px; }
.andamio{ border:1.5px dashed var(--hair-strong); background:var(--recess); border-radius:10px;
          padding:14px 17px; margin:16px 0; }
.andamio .atag{ font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
                color:var(--warn); margin-bottom:9px; }
.andamio .acuerpo{ font-size:15px; line-height:1.6; outline:none; }
.andamio .acuerpo .md-h{ font-size:11px; font-weight:600; letter-spacing:.09em;
                         text-transform:uppercase; color:var(--ink-2); margin:12px 0 6px; }
.andamio .afoot{ display:flex; gap:14px; margin-top:12px; }
.andamio .skl{ height:11px; border-radius:4px; background:var(--hair); margin:9px 0;
               animation:respira var(--dur-pulso) var(--ease-inout) infinite; }
/* las líneas del esqueleto alternan fase: respiración, no parpadeo en bloque */
.andamio .skl + .skl{ animation-delay:calc(var(--dur-pulso) / -2); }
.bpop{ width:330px; flex-direction:column; align-items:stretch; max-height:320px; overflow-y:auto; }
.bpop button{ text-align:left; }

/* nodo-ficha del modo Estructura (mockup 05) — dentro de foreignObject */
.ncard{ background:#fff; border:1px solid var(--hair); border-radius:9px; padding:10px 12px;
        box-shadow:0 1px 2px rgba(20,23,28,.05); font-family:'Inter',sans-serif; overflow:hidden;
        height:100%; }
.ncard .ntype{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.13em;
               text-transform:uppercase; color:var(--ink-3); margin-bottom:4px; }
.ncard .ntitle{ font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.ncard .nsig{ margin-top:6px; font-size:10.5px; font-weight:500; display:inline-flex;
              align-items:center; gap:5px; }
.ncard .nsig .sq{ width:6px; height:6px; border-radius:1px; display:inline-block; }
.ncard .nsig.ok{ color:var(--ok); } .ncard .nsig.ok .sq{ background:var(--ok); }
.ncard .nsig.warn{ color:var(--warn); } .ncard .nsig.warn .sq{ background:var(--warn); }
.ncard.hecho,.ncard.priv{ box-shadow:inset 3px 0 0 var(--priv),0 1px 2px rgba(20,23,28,.05); }
.ncard.hecho .ntype,.ncard.priv .ntype{ color:var(--priv); }
.ncard.doc{ box-shadow:inset 3px 0 0 #33415E,0 1px 2px rgba(20,23,28,.05); }
.ncard.arg{ border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent),0 3px 10px rgba(110,34,48,.10); }
.ncard.arg .ntype{ color:var(--accent); }
.ncard.pret{ box-shadow:inset 3px 0 0 var(--accent-press),0 1px 2px rgba(20,23,28,.05); }
.ncard.lag{ border-style:dashed; border-color:var(--hair-strong); background:#FCFCFD; }
.ncard.lag .ntitle{ color:var(--ink-2); font-weight:500; }

/* ── Movimiento ─ una sola familia de curvas para toda la casa: los estados
      interactivos respiran (--dur-2) y cada lente/panel entra con un asentamiento
      corto (--dur-3, --ease-out). Nada rebota; sobriedad de instrumento.
      Regla de la casa: una animación de entrada en un contenedor que se recrea
      por innerHTML se ANULA cuando el contenedor ya estaba — la entrada pertenece
      al tránsito vacío→presente, no al re-pintado. */
.tab,.navitem,.docrow,.asunto,.card,.ncard,.open,button,
.btn-primary,.btn-ghost,.doc-close,.cmdk,
.crow,.dline,.search,.diario .dq{
  transition:background var(--dur-2) ease, border-color var(--dur-2) ease,
             color var(--dur-2) ease, box-shadow var(--dur-2) ease,
             opacity var(--dur-2) ease, transform var(--dur-2) ease;
}
/* la selección por teclado es SECA a propósito (rasgo, no carencia) */
.cmdk-item{ transition:none; }
/* pulsar HUNDE: la tecla de un instrumento — bajada seca (70 ms), retorno a la
   cadencia de la casa. Solo controles pulsables; jamás filas ni tarjetas. */
.btn-primary:active:not(:disabled), .btn-outline:active:not(:disabled),
.btn-text:active, .btn-ghost:active:not(:disabled), .open:active:not(:disabled),
.fchip:active, .lchip:active, .mapchip:active, .bchip:active,
.toggle button:active, .tab:active, .doc-close:active, .navitem:active{
  transform:translateY(1px);
  transition-duration:70ms;
}
/* la sombra del hover vive pre-pintada en un ::after y solo transiciona su
   opacidad (compositable): la ficha se ILUMINA, no se mueve. La laguna queda
   fuera (una carencia no invita) y la bandeja también (subordinada a la mesa). */
.card, .hero{ position:relative; }
.card::after, .hero::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  box-shadow:0 2px 10px rgba(20,23,28,.07); opacity:0;
  transition:opacity var(--dur-2) ease; pointer-events:none;
}
.card:hover::after, .hero:hover::after{ opacity:1; }
.card.laguna::after, .bandeja .card::after{ content:none; }
.hero:hover{ border-color:var(--hair-strong); }
@keyframes settle-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
@keyframes settle-out{ to{ opacity:0; transform:translateY(4px); } }
/* la mesa se pone: el primer pintado asienta (nunca «pop»); la PRIMERA llegada
   de la sesión se escalona en cuatro tiempos — buscador, cabecera, el hero,
   la lista como un solo cuerpo. El mueble (sidebar) no entra: ya estaba. */
.pmain.entra > *{ animation:settle-in var(--dur-3) var(--ease-out) backwards; }
.pmain.hola > :nth-child(1){ animation-delay:.02s; }
.pmain.hola > :nth-child(2){ animation-delay:.07s; }
.pmain.hola > :nth-child(3){ animation-delay:.12s; }
.pmain.hola > :nth-child(n+4){ animation-delay:.16s; }
[role="tabpanel"]{ animation:settle-in var(--dur-3) var(--ease-out); }
.bandeja{ animation:settle-in var(--dur-3) var(--ease-out); }
@keyframes scrim-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes scrim-out{ to{ opacity:0; } }
.viewer-scrim{ animation:scrim-in var(--dur-3) ease; }
@keyframes toast-in{ from{ opacity:0; transform:translate(-50%, 8px); } to{ opacity:1; transform:translate(-50%, 0); } }
.toast{ animation:toast-in var(--dur-3) var(--ease-out); }
dialog.nuevo[open]{ animation:settle-in var(--dur-3) var(--ease-out); }
.saliendo{ pointer-events:none; }

/* ── salidas ─ toda capa que entra sabe salir: espejo más breve y acelerando
      (--dur-2, --ease-exit) — lo que llega se asienta; lo que se va no
      entretiene. El JS espera el animationend con red de setTimeout. */
.viewer.saliendo{ animation:viewer-out var(--dur-2) var(--ease-exit) forwards; }
.viewer-scrim.saliendo{ animation:scrim-out var(--dur-2) ease forwards; }
dialog.nuevo.cerrando{ animation:settle-out var(--dur-2) var(--ease-exit) forwards; }
dialog.nuevo.cerrando::backdrop{ animation:scrim-out var(--dur-2) ease forwards; }
@keyframes toast-out{ to{ opacity:0; transform:translate(-50%, 6px); } }
.toast.saliendo{ animation:toast-out var(--dur-2) var(--ease-exit) forwards; }
/* ⌘K viene del teclado, no del papel: se asienta desde arriba, escala mínima */
.cmdk-overlay.show{ animation:scrim-in var(--dur-2) ease; }
.cmdk-overlay.show .cmdk-panel{ animation:cmdk-in var(--dur-3) var(--ease-out);
                                transform-origin:top center; }
@keyframes cmdk-in{ from{ opacity:0; transform:translateY(-6px) scale(.985); } }
.cmdk-overlay.saliendo{ animation:scrim-out 120ms var(--ease-exit) forwards; }
.cmdk-overlay.saliendo .cmdk-panel{ animation:cmdk-out 120ms var(--ease-exit) forwards; }
@keyframes cmdk-out{ to{ opacity:0; transform:translateY(-4px); } }
/* los menús efímeros nacen con un asentamiento mínimo; su cierre es SECO a
   propósito (una orden ejecutada no entretiene) */
.linklabels.show{ animation:menu-in var(--dur-1) var(--ease-out); }
@keyframes menu-in{ from{ opacity:0; transform:translateY(3px); } }

/* ── Dentro de Electron (body.electron, lo marca api.js) ─ no hay barra de título
      nativa: membrete y lomo hacen de asidero de la ventana, con hueco a la
      izquierda para el semáforo de macOS. Todo lo pulsable queda excluido. */
.electron .appbar{ -webkit-app-region:drag; padding-left:88px; }
.electron .appbar a,.electron .appbar button,.electron .appbar .cmdk{ -webkit-app-region:no-drag; }
.electron .side{ -webkit-app-region:drag; }
.electron .side .navitem,.electron .side .profile,
.electron .side a,.electron .side button{ -webkit-app-region:no-drag; }
.electron .side .brand{ padding-top:44px; }
.electron .viewer.wide{ width:min(1240px, calc(100vw - 92px)); } /* nunca bajo el semáforo */
/* el lector y el visor se pintan SOBRE la franja del membrete, y Electron evalúa
   las zonas de arrastre por rectángulo de ventana, no por z-order: sin esto la
   cabecera (‹ › ✕) no recibe ni un click dentro de la app (doc 26 §1) */
.electron .doc-head{ -webkit-app-region:no-drag; }

/* barra fina de progreso de las lecturas por ventanas (bajo el paso de la ficha);
   escala en transform (compositable) — la geometría la recorta el overflow */
.leerbar{ height:2px; background:var(--hair); border-radius:2px; margin:8px 0 2px; overflow:hidden; }
.leerbar i{ display:block; height:100%; width:100%; background:var(--accent);
            transform:scaleX(0); transform-origin:left; transition:transform .5s ease; }

/* ── escritos del Borrador (selector + estados de los chips) ─────────────── */
.bsel{ font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-2);
       border:1px solid var(--hair-strong); border-radius:8px; padding:7px 9px;
       background:#fff; max-width:300px; cursor:pointer; }
.bchip.bmuerta{ border-color:var(--alert); color:var(--alert); }
.bchip.bmuerta::before{ content:"⚠ "; }
.bchip.bhuerfana{ border-style:dashed; opacity:.7; }
.andamio .avivo{ font-size:14px; }
.andamio .avivo:empty{ display:none; }

/* ── pantallas anchas: el dossier fluye a DOS columnas de fichas ────────────
      La medida tipográfica de cada ficha no cambia (una cita no debe medir
      40 palabras por línea); lo que crece es el LAYOUT, no la línea. */
@media (min-width: 1500px){
  #dossierCards, #caseCards, .bandeja-body, #cards{
    columns: 2; column-gap: 18px;
  }
  #dossierCards > *, #caseCards > *, .bandeja-body > *, #cards > *{
    break-inside: avoid;
  }
}

/* nivel 4: la pregunta con la que el pasante encontró la candidata (bandeja) */
.cmeta.metodo{ font-style:italic; margin-top:2px; }

/* ── el papel: la teoría del caso en un A4 (doc 16 §T2b) ───────────────────── */
#printTeoria{ display:none; }
@media print{
  body > *:not(#printTeoria){ display:none !important; }
  body{ background:#fff; }
  #printTeoria{ display:block; font-family:Inter,-apple-system,sans-serif; color:#16191D;
                max-width:17.5cm; margin:0 auto; }
  .pt-head{ border-top:3px solid #6E2230; padding-top:14px; margin-bottom:22px; }
  .pt-marca{ font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
             color:#6E2230; }
  .pt-head h1{ font-size:21px; font-weight:600; margin:8px 0 4px; letter-spacing:-.01em; }
  .pt-fecha{ font-size:11px; color:#5B6470; }
  .pt-sec{ margin:16px 0; break-inside:avoid-page; }
  .pt-sec h2{ font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
              color:#7A828D; border-bottom:1px solid #E3E5E8; padding-bottom:5px; margin:0 0 8px; }
  .pt-fila{ padding:7px 0; border-bottom:1px solid #F0F1F3; break-inside:avoid; }
  .pt-titulo{ font-size:12.5px; font-weight:600; line-height:1.35; }
  .pt-prop{ font-size:11px; font-style:italic; color:#454C56; margin-top:2px; }
  .pt-sig{ font-size:10px; color:#5B6470; margin-top:3px; letter-spacing:.02em; }
  .pt-rel{ font-size:10.5px; color:#454C56; margin-top:4px; line-height:1.5; }
  .pt-lagunas h2{ color:#9A6B1F; border-bottom-color:#E4D2A8; }
  .pt-fila.pt-lag{ border:1.5px dashed #CACED3; border-radius:8px; padding:8px 11px;
                   margin:6px 0; font-size:12px; color:#454C56; }
  .pt-foot{ margin-top:24px; padding-top:10px; border-top:1px solid #E3E5E8; font-size:10px;
            color:#7A828D; line-height:1.5; }
}

/* ── ajustes: el panel y el asistente de primer arranque (doc 17) ─────────── */
.aj-shell{ max-width:660px; width:100%; margin:0 auto; }
.aj-shell .mainhead{ margin-bottom:6px; }
.aj-grupo{ border:1px solid var(--hair); border-radius:11px; background:var(--paper);
           padding:20px 22px 16px; margin:14px 0; }
.aj-grupo h2{ margin:0 0 4px; font-size:14.5px; font-weight:600; color:var(--ink); }
.aj-intro{ margin:0 0 12px; font-size:12.5px; color:var(--ink-2); line-height:1.55; }
.aj-campo{ margin:12px 0; }
.aj-campo label{ display:block; font-size:11px; font-weight:600; letter-spacing:.1em;
                 text-transform:uppercase; color:var(--ink-3); margin-bottom:5px; }
.aj-campo input, .aj-campo select{
  width:100%; font:inherit; font-size:13.5px; border:1px solid var(--hair-strong);
  border-radius:8px; padding:9px 11px; background:#fff; color:var(--ink); }
.aj-campo input:focus, .aj-campo select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.aj-campo input::placeholder{ color:var(--ink-3); }
.aj-ayuda{ font-size:11.5px; color:var(--ink-3); margin-top:5px; line-height:1.5; }
.aj-origen{ font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:none;
            color:var(--ink-3); border:1px solid var(--hair); border-radius:5px;
            padding:2px 7px; margin-left:6px; vertical-align:1px; }
.aj-acciones{ display:flex; align-items:center; gap:12px; margin-top:14px;
              padding-top:12px; border-top:1px solid var(--hair); flex-wrap:wrap; }
.aj-res{ font-size:11.5px; min-height:16px; }
.aj-res .sig{ white-space:normal; line-height:1.45; }
.sig.bad{ color:var(--alert); } .sig.bad .sq{ background:var(--alert); flex:none; }
.aj-fila-cred{ display:flex; align-items:center; gap:10px; }
.aj-fila-cred input[type="file"]{ border:none; padding:0; font-size:12px; }
.aj-aviso{ border:1px solid #E3D9C8; background:#FBF7EE; color:#6B5A33; border-radius:9px;
           padding:10px 14px; font-size:12.5px; margin:10px 0; line-height:1.5; }

/* asistente — el primer arranque es un instalador: sin mueble alrededor, cada
   paso asienta al llegar (display:none→'' reinicia la animación) y los puntos
   del camino cambian de estado en transición, no de golpe */
.aj-shell.asistente{ max-width:560px; padding-top:26px; }
body.instalador .side{ display:none; }
body.instalador .pmain{ padding-top:7vh; }
/* sin el lomo, la ventana de Electron perdía su ÚNICA zona de arrastre durante
   todo el primer arranque: una banda superior invisible hace de asidero */
.electron .drag-band{ position:fixed; top:0; left:0; right:0; height:44px;
                      -webkit-app-region:drag; z-index:1; }
.asistente .aj-paso, .asistente .aj-grupo{ animation:settle-in var(--dur-3) var(--ease-out); }
.aj-pasos{ display:flex; gap:8px; justify-content:center; margin-bottom:18px; }
.aj-pasos span{ width:22px; height:22px; border-radius:50%; border:1px solid var(--hair-strong);
                display:inline-flex; align-items:center; justify-content:center;
                font-size:10.5px; color:var(--ink-3); background:#fff; letter-spacing:0;
                transition:background var(--dur-2) ease, border-color var(--dur-2) ease,
                           color var(--dur-2) ease; }
.aj-pasos span.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.aj-pasos span.done{ border-color:var(--accent); color:var(--accent); }
.aj-nav{ display:flex; align-items:center; gap:14px; margin:18px 2px 40px; }

/* el velo del reinicio: honesto y tranquilo — entra respirando, no de golpe */
.aj-velo{ position:fixed; inset:0; background:rgba(236,238,241,.86); z-index:80;
          display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px);
          animation:scrim-in var(--dur-3) ease; }
.aj-velo-caja{ display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink-2);
               background:#fff; border:1px solid var(--hair); border-radius:12px;
               padding:18px 26px; box-shadow:0 12px 40px rgba(20,23,28,.14);
               animation:settle-in var(--dur-3) var(--ease-out); }
.busy-dot{ width:9px; height:9px; border-radius:2px; background:var(--accent);
           animation:respira var(--dur-pulso) var(--ease-inout) infinite; }

/* ── el cambio de página: se pasa una hoja, no se corta (Chromium 130) ───────
      Fundido corto asimétrico (la vieja se va en 90 ms, la nueva se asienta en
      170) y la MARCA como hilo continuo: la estrella+wordmark viaja entre el
      membrete y el lomo. Navegadores sin view transitions: corte de siempre. */
@view-transition{ navigation: auto; }
@keyframes vt-out{ to{ opacity:0; } }
@keyframes vt-in{ from{ opacity:0; } }
::view-transition-old(root){ animation:vt-out 90ms ease both; }
::view-transition-new(root){ animation:vt-in 170ms ease both; }
.appbar .brand > a{ view-transition-name:marca; } /* asunto, consulta */
.side .brand{ view-transition-name:marca; }       /* portada, ajustes */
::view-transition-group(marca){ animation-duration:180ms; }

/* ── movimiento reducido: el instrumento calla, los estados finales quedan ──
   1ms y no `none`: el frame final se pinta y animationend SIGUE disparando
   (los cierres animados por JS no se quedan colgados); iteration-count:1 mata
   los pulsos infinitos en su frame 0% = estado de reposo legible. La espera
   sigue narrada: el texto de cada botón/estado es la vía accesible real. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0ms !important; /* sin esto, los escalonados con backwards
       dejan contenido INVISIBLE durante su delay — parpadeo bajo la quietud */
    transition-duration:1ms !important;
    transition-delay:0ms !important;
  }
  html{ scroll-behavior:auto !important; }
  /* los pseudo-elementos de view transition no los alcanza *::before/after */
  @view-transition{ navigation: none; }
}

/* ── aviso de licencia (doc 23): revocación a mitad de sesión, modo remoto ──── */
.aviso-licencia{ position:fixed; top:0; left:0; right:0; z-index:9999;
  background:var(--accent); color:#fff; font-size:13px; font-weight:600; text-align:center;
  padding:10px 18px; letter-spacing:.01em; box-shadow:0 2px 12px rgba(22,25,29,.18);
  animation:baja-aviso .28s var(--ease-out); }
@keyframes baja-aviso{ from{ transform:translateY(-100%); } }
@media (prefers-reduced-motion:reduce){ .aviso-licencia{ animation:none; } }

/* ── «Mi cuenta» del cliente remoto (doc 23) ─────────────────────────────────── */
.mc{ margin:2px 0 4px; }
.mc-fila{ display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:9px 0; border-bottom:1px solid var(--hair); font-size:13.5px; }
.mc-fila:last-child{ border-bottom:none; }
.mc-k{ color:var(--ink-3); font-size:12px; }
.mc-chip{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
  padding:3px 9px; border-radius:20px; }
.mc-chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.mc-chip.ok{ color:#2E7D46; background:#EAF4EC; }
.mc-chip.bad{ color:var(--accent); background:var(--accent-wash); }
.profile.clic{ cursor:pointer; border-radius:8px; margin:-2px -6px; padding:9px 6px; transition:background .12s; }
.profile.clic:hover{ background:var(--recess); }