/* Portal de Validación FRISCO — sistema visual "blueprint industrial".
   Portado de la maqueta aprobada (06-prototipo/portal-maqueta.html) y extendido para
   login, home, selector de procesos y estados vacíos/deshabilitados honestos.
   Paleta grafito-acero + azul blueprint + cobre. Tipografía sistema + monoespaciada
   para etiquetas. Tema claro/oscuro. Movimiento con propósito (respeta reduce-motion). */

:root{
  --font-sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Cascadia Code", "Consolas", ui-monospace, "SF Mono", Menlo, monospace;

  --bg:#e8ecf1; --panel:#ffffff; --panel-2:#f3f6f9; --panel-3:#eaeff4;
  --ink:#14212c; --ink-2:#495a6b; --muted:#7c8a99;
  --line:#d3dbe3; --line-2:#c2ccd6;
  --accent:#1f6fb2; --accent-strong:#17537f; --accent-soft:#e4eef7; --accent-ink:#ffffff;
  --copper:#a5673d; --copper-soft:#f3e9e1;
  --good:#2b8a3e; --good-soft:#e5f3e8;
  --warn:#c47708; --warn-soft:#f9efdc;
  --crit:#cf3b2c; --crit-soft:#f8e5e2;
  --grid-line:#dbe3ea;
  --shadow:0 1px 2px rgba(20,33,44,.06), 0 8px 24px rgba(20,33,44,.08);
  --radius:12px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d141b; --panel:#141f29; --panel-2:#1a2733; --panel-3:#20303e;
    --ink:#e7eef5; --ink-2:#a6b5c5; --muted:#6d7e91;
    --line:#26333f; --line-2:#30404e;
    --accent:#4fa3de; --accent-strong:#7cc0ee; --accent-soft:#152a3b; --accent-ink:#08131d;
    --copper:#c98a5e; --copper-soft:#241a12;
    --good:#4fb865; --good-soft:#132518;
    --warn:#e0a13f; --warn-soft:#291f10;
    --crit:#e56a5c; --crit-soft:#2a1613;
    --grid-line:#1e2a35;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="light"]{
  --bg:#e8ecf1; --panel:#ffffff; --panel-2:#f3f6f9; --panel-3:#eaeff4;
  --ink:#14212c; --ink-2:#495a6b; --muted:#7c8a99;
  --line:#d3dbe3; --line-2:#c2ccd6;
  --accent:#1f6fb2; --accent-strong:#17537f; --accent-soft:#e4eef7; --accent-ink:#ffffff;
  --copper:#a5673d; --copper-soft:#f3e9e1;
  --good:#2b8a3e; --good-soft:#e5f3e8; --warn:#c47708; --warn-soft:#f9efdc;
  --crit:#cf3b2c; --crit-soft:#f8e5e2; --grid-line:#dbe3ea;
  --shadow:0 1px 2px rgba(20,33,44,.06), 0 8px 24px rgba(20,33,44,.08);
}
:root[data-theme="dark"]{
  --bg:#0d141b; --panel:#141f29; --panel-2:#1a2733; --panel-3:#20303e;
  --ink:#e7eef5; --ink-2:#a6b5c5; --muted:#6d7e91;
  --line:#26333f; --line-2:#30404e;
  --accent:#4fa3de; --accent-strong:#7cc0ee; --accent-soft:#152a3b; --accent-ink:#08131d;
  --copper:#c98a5e; --copper-soft:#241a12;
  --good:#4fb865; --good-soft:#132518; --warn:#e0a13f; --warn-soft:#291f10;
  --crit:#e56a5c; --crit-soft:#2a1613; --grid-line:#1e2a35;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--accent); text-decoration:none}
.mono{font-family:var(--font-mono)}
.eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
h1,h2,h3{margin:0; text-wrap:balance; line-height:1.2}
button{font-family:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}

/* ---- shell ---- */
.app{display:flex; flex-direction:column; min-height:100vh}
.topbar{
  display:flex; align-items:center; gap:16px; padding:12px 20px;
  background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
}
.brand{display:flex; align-items:center; gap:11px; font-weight:650; letter-spacing:-.01em; color:var(--ink)}
.brand .mark{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--accent),var(--accent-strong)); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.brand .mark svg{width:20px; height:20px}
.brand small{display:block; font-weight:500; font-size:11px; color:var(--muted); letter-spacing:.02em}
.maqueta{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--warn);
  background:var(--warn-soft); border:1px solid color-mix(in srgb,var(--warn) 32%, transparent);
  padding:4px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:6px;
}
.spacer{flex:1}
.secure{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--good)}
.secure svg{width:14px; height:14px}
.userchip{
  display:flex; align-items:center; gap:9px; padding:5px 10px 5px 6px; border:1px solid var(--line);
  border-radius:999px; background:var(--panel-2);
}
.avatar{width:26px; height:26px; border-radius:50%; background:var(--copper); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:600}
.userchip .who{font-size:12.5px; line-height:1.15}
.userchip .who b{font-weight:600}
.userchip .who span{color:var(--muted); font-family:var(--font-mono); font-size:10.5px}
.icon-btn{
  width:36px; height:36px; border-radius:9px; border:1px solid var(--line); background:var(--panel-2);
  color:var(--ink-2); display:grid; place-items:center; font-size:16px;
}
.icon-btn:hover{border-color:var(--line-2); color:var(--ink)}
.logout-btn{
  display:inline-flex; align-items:center; gap:7px; padding:0 12px; height:36px; border-radius:9px;
  border:1px solid var(--line); background:var(--panel-2); color:var(--ink-2); font-size:12.5px;
}
.logout-btn:hover{border-color:var(--line-2); color:var(--ink)}

.body{display:grid; grid-template-columns:288px 1fr; flex:1; min-height:0}

/* ---- sidebar ---- */
.side{border-right:1px solid var(--line); background:var(--panel); padding:18px 14px; display:flex; flex-direction:column; gap:20px}
.side h2{font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-family:var(--font-mono); font-weight:600; margin-bottom:2px}
.areas{display:flex; flex-direction:column; gap:3px}
.area{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; border:1px solid transparent;
  color:var(--ink-2); font-size:13.5px; text-align:left; background:none; width:100%; text-decoration:none;
}
.area .dot{width:7px; height:7px; border-radius:50%; background:var(--muted); flex:none}
.area .lbl{flex:1}
.area .lock{font-size:12px; color:var(--muted)}
.area:hover{background:var(--panel-2)}
.area.active{background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 30%, transparent); color:var(--ink); font-weight:600}
.area.active .dot{background:var(--accent)}
.area.locked{cursor:not-allowed; opacity:.62}

.ring-card{background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius); padding:15px}
.ring-wrap{display:flex; align-items:center; gap:14px}
.ring{position:relative; width:78px; height:78px; flex:none}
.ring .val{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-mono); font-weight:600; font-size:19px}
.ring-meta .big{font-size:13px; font-weight:600}
.ring-meta .sub{font-size:11.5px; color:var(--muted); margin-top:2px}

.legend{display:flex; flex-direction:column; gap:8px}
.lg{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-2)}
.lg .swatch{width:12px; height:12px; border-radius:4px; flex:none; border:1px solid rgba(0,0,0,.06)}

/* ---- main ---- */
.main{min-width:0; padding:22px 26px 40px; overflow:auto}
.crumbs{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11.5px; color:var(--muted); margin-bottom:10px; flex-wrap:wrap}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink-2)}
.crumbs b{color:var(--ink-2); font-weight:600}
.area-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.area-head h1{font-size:26px; letter-spacing:-.02em}
.area-head p{color:var(--ink-2); font-size:13.5px; margin:6px 0 0; max-width:62ch}

.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px}
.tile{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 15px; box-shadow:var(--shadow)}
.tile .k{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:6px}
.tile .n{font-size:30px; font-weight:680; font-variant-numeric:tabular-nums; margin-top:7px; letter-spacing:-.02em; line-height:1}
.tile .n small{font-size:14px; color:var(--muted); font-weight:500}
.tile .bar{height:3px; border-radius:2px; margin-top:11px; background:var(--line-2)}
.tile.accent .bar{background:var(--accent)}
.tile.good .bar{background:var(--good)}
.tile.warn .bar{background:var(--warn)}
.tile.copper .bar{background:var(--copper)}

/* ---- process tabs ---- */
.proc-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.proc-tab{
  display:flex; align-items:center; gap:9px; padding:9px 13px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink-2); font-size:13px; text-align:left;
}
.proc-tab:hover{border-color:var(--line-2); color:var(--ink)}
.proc-tab.active{border-color:color-mix(in srgb,var(--accent) 40%, transparent); background:var(--accent-soft); color:var(--ink); font-weight:600}
.proc-tab .pdot{width:8px; height:8px; border-radius:50%; flex:none}
.proc-tab .pmeta{display:block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:1px}
.tone-muted{background:var(--muted)} .tone-copper{background:var(--copper)}
.tone-accent{background:var(--accent)} .tone-good{background:var(--good)} .tone-crit{background:var(--crit)}

/* ---- map ---- */
.map-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
.map-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.map-top .t{display:flex; align-items:center; gap:10px; min-width:0}
.map-top h3{font-size:15px; overflow:hidden; text-overflow:ellipsis}
.badge{font-family:var(--font-mono); font-size:10.5px; padding:3px 8px; border-radius:6px; border:1px solid var(--line); color:var(--ink-2); background:var(--panel-2); white-space:nowrap}
.zoom{display:flex; gap:6px; align-items:center}
.zoom button{width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:var(--panel-2); color:var(--ink-2); font-size:15px; line-height:1}
.zoom button:hover{color:var(--ink); border-color:var(--line-2)}
.zoom .hint{font-family:var(--font-mono); font-size:10.5px; color:var(--muted); margin-left:4px}
.map-stage{position:relative; height:460px; overflow:hidden; background:
   radial-gradient(circle at 1px 1px, var(--grid-line) 1px, transparent 0) 0 0/22px 22px;
   cursor:grab; touch-action:none}
.map-stage.grabbing{cursor:grabbing}
svg#map{width:100%; height:100%; display:block}
/* Pantalla completa del mapa (Pieza A): overlay CSS universal — funciona igual en iOS y
   desktop. El drawer/scrim llevan un z-index superior (ver más abajo) para seguir
   operables sobre el mapa expandido. En este modo el stage es un flex-item que llena el
   alto disponible; `height:auto !important` neutraliza la altura inline que fija fit(),
   para que fit() lea el clientHeight real del flex (evita el colapso de altura). */
.map-card.expanded{position:fixed; inset:0; z-index:100; height:100vh; border-radius:0;
   display:flex; flex-direction:column}
.map-card.expanded .map-top{flex:0 0 auto}
.map-card.expanded .map-stage{flex:1 1 auto; height:auto !important; min-height:0}
.zoom button[aria-pressed="true"]{color:var(--accent); border-color:var(--accent)}
#map .edge{fill:none; stroke:var(--line-2); stroke-width:2}
#map .edge.dotted{stroke-dasharray:2 6; stroke:var(--muted); opacity:.75}
#map .edge.flow{stroke-dasharray:6 7; animation:dash 1.15s linear infinite}
#map .edge-label{fill:var(--muted); font-family:var(--font-mono); font-size:9.5px}
@keyframes dash{to{stroke-dashoffset:-13}}
#map .node{cursor:pointer; opacity:0; animation:nodein .45s ease forwards}
@keyframes nodein{to{opacity:1}}
#map .node .box{fill:var(--panel-2); stroke:var(--line-2); stroke-width:1.5}
#map .node:hover .box{stroke:var(--accent)}
#map .node.sel .box{stroke:var(--accent); stroke-width:2.5; filter:drop-shadow(0 4px 10px rgba(31,111,178,.28))}
#map .node .eyebrow-t{font-family:var(--font-mono); font-size:9px; letter-spacing:.05em; text-transform:uppercase; fill:var(--muted)}
#map .node .title-t{fill:var(--ink); font-size:12.5px; font-weight:600; font-family:var(--font-sans)}
#map .node .flag{font-family:var(--font-mono); font-size:9px; font-weight:700}
.stripe-normal{fill:var(--copper)}      /* proceso mapa_generado */
.stripe-decision{fill:var(--accent)}
.stripe-handoff{fill:#b23a86}
.stripe-gap{fill:var(--warn)}
.flag-gap{fill:var(--warn)} .flag-handoff{fill:#b23a86}

/* ---- drawer ---- */
.scrim{position:fixed; inset:0; background:rgba(10,18,25,.42); opacity:0; pointer-events:none; transition:opacity .2s; z-index:110}
.scrim.open{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(440px,94vw); background:var(--panel);
  border-left:1px solid var(--line); box-shadow:-12px 0 40px rgba(10,18,25,.22);
  transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1); z-index:120;
  display:flex; flex-direction:column;
}
.drawer.open{transform:none}
.dwr-head{padding:18px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.dwr-head h3{font-size:17px; letter-spacing:-.01em; margin:6px 0 8px}
.dwr-body{padding:18px 20px; overflow:auto; display:flex; flex-direction:column; gap:16px}
.field{font-size:13.5px; color:var(--ink-2)}
.field .lab{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:5px}
.field .src{font-family:var(--font-mono); font-size:11px; line-height:1.55; color:var(--ink-2); background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:9px 11px; word-break:break-word}
.chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em}
.chip::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.chip.autorizado{color:var(--good); background:var(--good-soft)}
.chip.validado{color:var(--accent); background:var(--accent-soft)}
.chip.capturado{color:var(--ink-2); background:var(--panel-3)}
.chip.mapa_generado{color:var(--copper); background:var(--copper-soft)}
.chip.rechazado{color:var(--crit); background:var(--crit-soft)}

.huecos-list{display:flex; flex-direction:column; gap:8px}
.hueco{display:flex; gap:9px; align-items:flex-start; padding:11px 12px; border-radius:9px; background:var(--warn-soft); border:1px solid color-mix(in srgb,var(--warn) 28%, transparent); font-size:12.5px; color:var(--ink-2)}
.hueco .hm{color:var(--warn); flex:none; font-weight:700}
.note-handoff{display:flex; gap:9px; align-items:flex-start; padding:11px 12px; border-radius:9px; background:color-mix(in srgb,#b23a86 12%, transparent); border:1px solid color-mix(in srgb,#b23a86 30%, transparent); font-size:12.5px; color:var(--ink-2)}
.note-handoff .hm{color:#b23a86; flex:none; font-weight:700}

.action{border:1px solid var(--line); border-radius:12px; padding:15px; background:var(--panel-2)}
.action h4{font-size:13px; margin:0 0 4px; display:flex; align-items:center; gap:7px}
.action .sub{font-size:12px; color:var(--muted); margin-bottom:12px}
.locked-note{display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--ink-2); background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 26%, transparent); border-radius:9px; padding:10px 12px}
.locked-note svg{width:15px; height:15px; flex:none; margin-top:1px; color:var(--accent)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 15px; border-radius:9px; font-size:13.5px; font-weight:600; border:1px solid transparent}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-strong); border-color:var(--accent-strong)}
.btn.ghost{background:var(--panel); color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--line-2)}
.btn.block{width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed}
textarea{width:100%; min-height:78px; resize:vertical; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--ink); padding:10px 12px; font-family:inherit; font-size:13.5px}
textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
textarea[disabled]{opacity:.55; cursor:not-allowed; background:var(--panel-2)}
select.fb-kind{width:100%; padding:9px 11px; margin-bottom:8px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--ink); font-family:inherit; font-size:13px}
select.fb-kind:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}

.footnote{margin-top:24px; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; display:flex; gap:8px; align-items:flex-start; max-width:82ch}
.footnote svg{width:15px;height:15px;flex:none;margin-top:1px}

/* ---- home area cards ---- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px}
.card{
  display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow); color:var(--ink);
}
.card.locked{opacity:.66; box-shadow:none; background:var(--panel-2)}
.card .card-ic{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-size:18px; background:var(--panel-2); border:1px solid var(--line); color:var(--accent)}
.card h3{font-size:15px; letter-spacing:-.01em}
.card .card-meta{font-size:12.5px; color:var(--muted)}
.card .card-go{margin-top:auto; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:6px}
.card.locked .card-go{color:var(--muted)}
.empty-state{border:1px dashed var(--line-2); border-radius:var(--radius); padding:28px; text-align:center; color:var(--ink-2); background:var(--panel)}
.empty-state .es-ic{font-size:26px; color:var(--muted)}
.empty-state h3{margin:8px 0 6px; font-size:16px}
.empty-state p{margin:0 auto; max-width:46ch; font-size:13px; color:var(--muted)}

/* ---- login ---- */
.login-wrap{min-height:calc(100vh - 61px); display:grid; place-items:center; padding:32px 18px}
.login-card{
  width:min(420px,100%); background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:30px 28px; animation:cardin .5s cubic-bezier(.2,.7,.2,1);
}
@keyframes cardin{from{opacity:0; transform:translateY(10px)}}
.login-mark{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(150deg,var(--accent),var(--accent-strong)); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.login-mark svg{width:30px; height:30px}
.login-card h1{font-size:22px; letter-spacing:-.02em; margin-bottom:6px}
.login-card .lede{font-size:13.5px; color:var(--ink-2); margin-bottom:20px; max-width:40ch}
.login-card label{display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:7px}
.login-card input{
  width:100%; padding:12px 13px; font-size:15px; border:1px solid var(--line); border-radius:10px;
  background:var(--panel-2); color:var(--ink);
}
.login-card input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.otp-input{font-family:var(--font-mono); letter-spacing:.5em; text-align:center; font-size:22px !important}
.login-card .btn{margin-top:18px}
.msg{background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 26%,transparent); color:var(--ink-2); padding:11px 13px; border-radius:9px; font-size:13px; margin-bottom:16px}
.err{background:var(--crit-soft); border:1px solid color-mix(in srgb,var(--crit) 34%,transparent); color:var(--crit); padding:11px 13px; border-radius:9px; font-size:13px; margin-bottom:16px}
.login-back{display:inline-block; margin-top:16px; font-size:12.5px; color:var(--muted)}
.login-foot{margin-top:22px; padding-top:16px; border-top:1px solid var(--line); font-size:11.5px; color:var(--muted); display:flex; gap:8px; align-items:flex-start}
.login-foot svg{width:14px; height:14px; flex:none; margin-top:1px; color:var(--good)}

/* full-page banner strip (below topbar on login) */
.pagebanner{
  background:var(--warn-soft); border-bottom:1px solid color-mix(in srgb,var(--warn) 30%, transparent);
  color:color-mix(in srgb,var(--warn) 85%, var(--ink)); font-size:12.5px; padding:8px 20px;
  display:flex; align-items:center; gap:8px; justify-content:center; font-family:var(--font-mono); letter-spacing:.02em;
}

/* signature: the balance "weighs" once on load, then settles (sober reveal) */
.brand .mark svg .beam{transform-origin:12px 7px; animation:weigh 1.4s cubic-bezier(.4,0,.2,1) 1}
.login-mark svg .beam{transform-origin:16px 9px; animation:weigh 1.6s cubic-bezier(.4,0,.2,1) 1}
@keyframes weigh{0%{transform:rotate(-9deg)}45%{transform:rotate(6deg)}100%{transform:rotate(0)}}

@media (max-width:880px){
  .body{grid-template-columns:1fr}
  .side{flex-direction:row; overflow-x:auto; -webkit-overflow-scrolling:touch; border-right:none; border-bottom:1px solid var(--line); align-items:flex-start}
  .side>*{min-width:210px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .brand small{display:none}
  .userchip .who{display:none}
}

/* ---- responsive: teléfonos (<600px) — complementa el breakpoint de tablet @880.
   ADITIVO y colocado DESPUÉS del @880: en los selectores solapados (.side, .side>*) el
   orden de origen decide, así que este bloque gana bajo 600px. No toca el desktop. ---- */
@media (max-width:600px){
  /* Topbar: quita lo redundante y aprieta (el pagebanner ya avisa "maqueta"). */
  .topbar{padding:10px 14px; gap:10px}
  .maqueta, .secure{display:none}

  /* Sidebar -> tira de navegación de áreas compacta y horizontal. El anillo de avance y
     la leyenda se OCULTAN en móvil: el espacio vertical es escaso y el foco es ver /
     validar / firmar (el Home ya muestra el avance global del discovery). */
  /* min-width:0 en .side (grid item) evita que su contenido infle el track del grid.
     align-items:stretch anula el flex-start heredado del @880: sin él, el <div> que
     envuelve .areas se dimensiona a su contenido (no se estira) y .areas no scrollea. */
  .side{flex-direction:column; align-items:stretch; overflow-x:visible; min-width:0; padding:10px 12px; gap:0}
  .side h2, .ring-card, .legend{display:none}
  .side>*{min-width:0}
  .areas{flex-direction:row; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
     padding-bottom:2px; scrollbar-width:none}
  .areas::-webkit-scrollbar{display:none}
  .area{width:auto; flex:0 0 auto; white-space:nowrap; padding:8px 12px}
  .area .lbl{flex:0 0 auto}

  /* Main más compacto + inercia de scroll nativa (iOS). */
  .main{padding:16px 14px 32px; -webkit-overflow-scrolling:touch}
  .area-head h1{font-size:22px}
  .dwr-body{-webkit-overflow-scrolling:touch}

  /* Pestañas de proceso -> scroller horizontal (no wrap) para no empujar el mapa fuera
     del viewport inicial (objeción 1 de Alpha). */
  .proc-tabs{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
     padding-bottom:4px; scrollbar-width:none}
  .proc-tabs::-webkit-scrollbar{display:none}
  .proc-tab{flex:0 0 auto}

  /* Barra del mapa: oculta la pista textual para ganar ancho. */
  .zoom .hint{display:none}
}
/* ---- authz: validación + doble firma (lado ESCRITURA, Fase 4) ---- */
.chip.firma_parcial{color:var(--accent); background:var(--accent-soft)}
.chip.enviado_a_validar{color:var(--accent); background:var(--accent-soft)}
.action.authz .cq-prompt{font-size:13px; color:var(--ink-2); line-height:1.5; margin-bottom:10px}
.action.authz .cq-draft{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--warn); margin-bottom:8px; display:inline-block}
.cq-options{display:flex; flex-direction:column; gap:8px; margin-bottom:6px}
.cq-opt{display:flex; gap:9px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--panel); font-size:13px; color:var(--ink-2); cursor:pointer}
.cq-opt:hover{border-color:var(--line-2)}
.cq-opt input{margin-top:2px; flex:none; accent-color:var(--accent)}
.cq-opt:has(input:checked){border-color:color-mix(in srgb,var(--accent) 45%, transparent); background:var(--accent-soft); color:var(--ink)}
.sig-list{display:flex; flex-direction:column; gap:8px; margin:6px 0 12px}
.sig-row{display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:9px; border:1px solid var(--line); background:var(--panel); font-size:12.5px; color:var(--ink-2)}
.sig-row.signed{border-color:color-mix(in srgb,var(--good) 34%, transparent); background:var(--good-soft)}
.sig-row .sig-ic{width:18px; height:18px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:11px; font-weight:700; background:var(--panel-3); color:var(--muted)}
.sig-row.signed .sig-ic{background:var(--good); color:#fff}
.sig-row .sig-who{display:flex; flex-direction:column}
.sig-row .sig-who b{font-size:12.5px; color:var(--ink)}
.sig-row .sig-who span{font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.authz-err{background:var(--crit-soft); border:1px solid color-mix(in srgb,var(--crit) 34%, transparent); color:var(--crit); padding:9px 11px; border-radius:9px; font-size:12px; margin-top:10px}
.authz-ok{background:var(--good-soft); border:1px solid color-mix(in srgb,var(--good) 30%, transparent); color:color-mix(in srgb,var(--good) 88%, var(--ink)); padding:9px 11px; border-radius:9px; font-size:12px}
.authz-btns{display:flex; flex-direction:column; gap:8px}
.btn.good{background:var(--good); color:#fff; border-color:var(--good)}
.btn.good:hover{filter:brightness(1.05)}
.seal{display:flex; gap:10px; align-items:center; padding:12px; border-radius:10px; background:var(--good-soft); border:1px solid color-mix(in srgb,var(--good) 34%, transparent); margin-bottom:10px}
.seal svg{width:30px; height:30px; flex:none; color:var(--good)}
.seal.just-authorized svg .beam{transform-origin:12px 7px; animation:weigh 1.4s cubic-bezier(.4,0,.2,1) 1}
.seal .seal-t b{display:block; font-size:13px; color:color-mix(in srgb,var(--good) 88%, var(--ink))}
.seal .seal-t span{font-size:11.5px; color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  #map .node{opacity:1}
}