/* ============ RHINO · Control de Activos TI ============ */

:root{
  /* neutrales con sesgo verde-carbón, tomados del logotipo #1B201E */
  --ground:#F4F5F2; --surface:#FFFFFF; --surface-2:#FAFBF8; --surface-3:#EEF0EC;
  --border:#E0E4DE; --border-strong:#C8CFC8;
  --ink:#171A18; --ink-2:#4B524D; --ink-3:#79817B; --ink-4:#A1A8A2;
  --rail:#1B201E; --rail-ink:#EAEEE9; --rail-ink-2:#9AA39C; --rail-hover:#272E2B;
  --brand:#FFB600; --brand-deep:#D89A00; --on-brand:#1B201E;
  --focus:#2F6FA8;
  --shadow-1:0 1px 2px rgba(23,26,24,.06), 0 1px 3px rgba(23,26,24,.05);
  --shadow-2:0 4px 12px rgba(23,26,24,.08), 0 1px 3px rgba(23,26,24,.06);
  --shadow-3:0 16px 48px rgba(23,26,24,.16), 0 2px 8px rgba(23,26,24,.08);

  --st-asig-fg:#245C8C; --st-asig-bg:#E4EEF7; --st-asig-dot:#2F6FA8;
  --st-disp-fg:#1F6B4C; --st-disp-bg:#E1F1E8; --st-disp-dot:#2E7D5B;
  --st-nuev-fg:#0F6670; --st-nuev-bg:#DDF0F2; --st-nuev-dot:#197D86;
  --st-repa-fg:#8C5800; --st-repa-bg:#FBEED2; --st-repa-dot:#C07C08;
  --st-perd-fg:#5C564A; --st-perd-bg:#EBEAE5; --st-perd-dot:#7C7466;
  --st-roba-fg:#96291B; --st-roba-bg:#FAE4E0; --st-roba-dot:#B33A2B;
  --st-fuer-fg:#4A4460; --st-fuer-bg:#EAE7F1; --st-fuer-dot:#5C5470;
  --st-resg-fg:#3A4C7A; --st-resg-bg:#E6EAF6; --st-resg-dot:#4C63A8;
  --st-devu-fg:#0E6152; --st-devu-bg:#DCF0EB; --st-devu-dot:#17806B;

  --ok:#2E7D5B; --warn:#C07C08; --crit:#B33A2B;
  --ok-bg:#E1F1E8; --warn-bg:#FBEED2; --crit-bg:#FAE4E0;

  --r-sm:5px; --r:8px; --r-lg:12px;
  --sans:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --disp:'Archivo','IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --mono:'Roboto Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#121412; --surface:#1B201E; --surface-2:#222825; --surface-3:#2A312D;
    --border:#333A36; --border-strong:#48514B;
    --ink:#EDF0EC; --ink-2:#B4BCB6; --ink-3:#838B85; --ink-4:#666E68;
    --rail:#0E100F; --rail-ink:#EAEEE9; --rail-ink-2:#8D958F; --rail-hover:#1E2422;
    --brand:#FFB600; --brand-deep:#FFC63D; --on-brand:#1B201E;
    --focus:#79B3E6;
    --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 4px 14px rgba(0,0,0,.45);
    --shadow-3:0 18px 52px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
    --st-asig-fg:#8FBEE8; --st-asig-bg:#1C2B39; --st-asig-dot:#5D9BD4;
    --st-disp-fg:#7CD4A8; --st-disp-bg:#162E24; --st-disp-dot:#4FBB89;
    --st-nuev-fg:#6FCFD8; --st-nuev-bg:#122E31; --st-nuev-dot:#3FB3BD;
    --st-repa-fg:#F0BE5C; --st-repa-bg:#33270D; --st-repa-dot:#DFA228;
    --st-perd-fg:#B0A99A; --st-perd-bg:#282621; --st-perd-dot:#8F887A;
    --st-roba-fg:#F09285; --st-roba-bg:#3A1E19; --st-roba-dot:#D4614F;
    --st-fuer-fg:#B6ACD4; --st-fuer-bg:#262232; --st-fuer-dot:#8377A8;
    --st-resg-fg:#9FB0E0; --st-resg-bg:#1E2337; --st-resg-dot:#7189CC;
    --st-devu-fg:#6ECBB4; --st-devu-bg:#122E28; --st-devu-dot:#3AAE93;
    --ok:#4FBB89; --warn:#DFA228; --crit:#D4614F;
    --ok-bg:#162E24; --warn-bg:#33270D; --crit-bg:#3A1E19;
  }
}

:root[data-theme="dark"]{
  --ground:#121412; --surface:#1B201E; --surface-2:#222825; --surface-3:#2A312D;
  --border:#333A36; --border-strong:#48514B;
  --ink:#EDF0EC; --ink-2:#B4BCB6; --ink-3:#838B85; --ink-4:#666E68;
  --rail:#0E100F; --rail-ink:#EAEEE9; --rail-ink-2:#8D958F; --rail-hover:#1E2422;
  --brand:#FFB600; --brand-deep:#FFC63D; --on-brand:#1B201E;
  --focus:#79B3E6;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 4px 14px rgba(0,0,0,.45);
  --shadow-3:0 18px 52px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  --st-asig-fg:#8FBEE8; --st-asig-bg:#1C2B39; --st-asig-dot:#5D9BD4;
  --st-disp-fg:#7CD4A8; --st-disp-bg:#162E24; --st-disp-dot:#4FBB89;
  --st-nuev-fg:#6FCFD8; --st-nuev-bg:#122E31; --st-nuev-dot:#3FB3BD;
  --st-repa-fg:#F0BE5C; --st-repa-bg:#33270D; --st-repa-dot:#DFA228;
  --st-perd-fg:#B0A99A; --st-perd-bg:#282621; --st-perd-dot:#8F887A;
  --st-roba-fg:#F09285; --st-roba-bg:#3A1E19; --st-roba-dot:#D4614F;
  --st-fuer-fg:#B6ACD4; --st-fuer-bg:#262232; --st-fuer-dot:#8377A8;
  --st-resg-fg:#9FB0E0; --st-resg-bg:#1E2337; --st-resg-dot:#7189CC;
  --st-devu-fg:#6ECBB4; --st-devu-bg:#122E28; --st-devu-dot:#3AAE93;
  --ok:#4FBB89; --warn:#DFA228; --crit:#D4614F;
  --ok-bg:#162E24; --warn-bg:#33270D; --crit-bg:#3A1E19;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--disp); font-weight:600; margin:0; text-wrap:balance;
  font-variation-settings:'wdth' 108; letter-spacing:-.011em}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important}}

.mono{font-family:var(--mono); font-variant-ligatures:none; letter-spacing:-.005em}
.mono b,.mono strong,b .mono,strong .mono{font-weight:700}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.eyebrow{font-family:var(--disp); font-size:10.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); font-variation-settings:'wdth' 100}

/* ---------- LOGIN ---------- */
#login{position:fixed; inset:0; display:grid; place-items:center; background:var(--rail); z-index:200; padding:24px}
#login .sheet{width:100%; max-width:380px; background:var(--surface); border-radius:var(--r-lg);
  box-shadow:var(--shadow-3); overflow:hidden; border:1px solid var(--border)}
#login .cap{background:var(--rail); padding:26px 28px 22px; border-bottom:3px solid var(--brand)}
#login .cap img{height:30px; display:block}
#login .cap p{margin:14px 0 0; color:var(--rail-ink-2); font-size:12.5px; letter-spacing:.02em}
#login .cap strong{display:block; color:var(--rail-ink); font-family:var(--disp); font-size:17px;
  font-weight:600; font-variation-settings:'wdth' 110; letter-spacing:-.01em}
#login form{padding:26px 28px 28px; display:flex; flex-direction:column; gap:14px}
#login .err{background:var(--crit-bg); color:var(--crit); padding:9px 12px; border-radius:var(--r-sm);
  font-size:12.5px; font-weight:500}
#login .hint{font-size:11.5px; color:var(--ink-3); text-align:center; margin:2px 0 0}

/* ---------- SHELL ---------- */
#app{display:none; min-height:100vh}
#app.on{display:grid; grid-template-columns:236px 1fr}

.rail{background:var(--rail); color:var(--rail-ink); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; border-right:1px solid rgba(255,255,255,.06)}
.rail .brand{padding:20px 20px 18px; border-bottom:1px solid rgba(255,255,255,.08);
  display:block; text-decoration:none; transition:background .12s}
.rail .brand:hover{background:var(--rail-hover)}
.rail .brand img{height:26px; display:block}
.rail .brand span{display:block; margin-top:9px; font-family:var(--disp); font-size:10.5px;
  font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--rail-ink-2)}
.rail nav{padding:12px 10px; display:flex; flex-direction:column; gap:1px; overflow-y:auto; flex:1}
.rail nav button{display:flex; align-items:center; gap:11px; width:100%; padding:9px 11px;
  background:none; border:0; border-radius:var(--r-sm); color:var(--rail-ink-2); cursor:pointer;
  font-size:13.5px; font-weight:500; text-align:left; transition:background .12s,color .12s; position:relative}
.rail nav button:hover{background:var(--rail-hover); color:var(--rail-ink)}
.rail nav button.on{background:var(--rail-hover); color:var(--rail-ink); font-weight:600}
.rail nav button.on::before{content:""; position:absolute; left:-10px; top:6px; bottom:6px;
  width:3px; background:var(--brand); border-radius:0 2px 2px 0}
.rail nav button svg{width:17px; height:17px; flex:none; stroke-width:1.7}
.rail nav .tally{margin-left:auto; font-size:11px; font-variant-numeric:tabular-nums; color:var(--rail-ink-2);
  background:rgba(255,255,255,.07); padding:1px 6px; border-radius:20px}
.rail .foot{padding:12px 14px; border-top:1px solid rgba(255,255,255,.08); display:flex;
  align-items:center; gap:9px; font-size:12px; color:var(--rail-ink-2)}
.rail .foot .who{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--rail-ink)}
.rail .foot button{background:none; border:0; color:var(--rail-ink-2); cursor:pointer; padding:4px; border-radius:4px}
.rail .foot button:hover{color:var(--brand); background:rgba(255,255,255,.07)}

main{min-width:0; display:flex; flex-direction:column}
.topbar{position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border); padding:16px 28px 14px;
  display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap}
.topbar h1{font-size:21px}
.topbar .sub{color:var(--ink-3); font-size:12.5px; margin-top:2px}
.topbar .acts{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.view{padding:22px 28px 56px; flex:1}

.banner{margin:0 28px; margin-top:14px; padding:9px 13px; border-radius:var(--r-sm); font-size:12.5px;
  display:flex; gap:9px; align-items:center; background:var(--warn-bg); color:var(--warn); font-weight:500}

/* ---------- CONTROLS ---------- */
.btn{display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:var(--r-sm);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); cursor:pointer;
  font-size:13px; font-weight:500; transition:background .12s,border-color .12s,transform .06s; white-space:nowrap}
.btn:hover{background:var(--surface-3); border-color:var(--ink-4)}
.btn:active{transform:translateY(.5px)}
.btn svg{width:15px; height:15px; stroke-width:1.8; flex:none}
.btn.pri{background:var(--brand); border-color:var(--brand); color:var(--on-brand); font-weight:600}
.btn.pri:hover{background:var(--brand-deep); border-color:var(--brand-deep)}
.btn.ghost{background:none; border-color:transparent; color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-3); color:var(--ink)}
.btn.danger{color:var(--crit); border-color:var(--border-strong)}
.btn.danger:hover{background:var(--crit-bg); border-color:var(--crit)}
.btn.sm{padding:5px 10px; font-size:12px}
.btn:disabled{opacity:.45; cursor:not-allowed}

.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field label{font-size:11.5px; font-weight:600; color:var(--ink-2); letter-spacing:.015em}
.inp{width:100%; padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink); font-size:13.5px; transition:border-color .12s,box-shadow .12s}
.inp:focus{outline:0; border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 18%,transparent)}
.inp::placeholder{color:var(--ink-4)}
select.inp{cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2379817B' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 9px center; padding-right:28px}
textarea.inp{resize:vertical; min-height:70px; font-family:inherit}
.search{position:relative; flex:1; min-width:200px; max-width:340px}
.search .inp{padding-left:31px}
.search svg{position:absolute; left:9px; top:50%; transform:translateY(-50%); width:15px; height:15px;
  color:var(--ink-4); stroke-width:2; pointer-events:none}

.check{display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; padding:4px 0; user-select:none}
.check input{width:15px; height:15px; accent-color:var(--brand-deep); cursor:pointer; flex:none; margin:0}

/* ---------- CARDS / TILES ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-1)}
.card>header{padding:14px 16px 12px; border-bottom:1px solid var(--border); display:flex;
  align-items:center; gap:10px; flex-wrap:wrap}
.card>header h3{font-size:14px}
.card>header .acts{margin-left:auto; display:flex; gap:6px}
.card .body{padding:16px}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:20px}
/* fichas de «requiere atención»: más chicas que las del parque, para que se
   lean como avisos y no compitan con los números del inventario */
.atencion{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px;
  margin-bottom:20px}
.atencion .tile{padding:12px 14px 13px}
.atencion .tile .v{font-size:24px; margin-top:5px}
.tile{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px 16px 15px;
  box-shadow:var(--shadow-1); position:relative; overflow:hidden; cursor:pointer; text-align:left; width:100%;
  transition:border-color .14s, box-shadow .14s, transform .1s}
.tile:hover{border-color:var(--border-strong); box-shadow:var(--shadow-2); transform:translateY(-1px)}
.tile::after{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--tone,var(--border-strong))}
.tile .k{font-family:var(--disp); font-size:10.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3)}
.tile .v{font-family:var(--disp); font-size:30px; font-weight:600; line-height:1.05; margin-top:7px;
  font-variant-numeric:tabular-nums; font-variation-settings:'wdth' 112; letter-spacing:-.02em}
.tile .n{font-size:11.5px; color:var(--ink-3); margin-top:3px}

.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px}
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px}

/* ---------- BAR CHART ---------- */
.bars{display:flex; flex-direction:column; gap:9px}
.bars .row{display:grid; grid-template-columns:minmax(84px,34%) 1fr auto; gap:10px; align-items:center; font-size:12.5px}
.bars .lbl{color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bars .track{height:7px; background:var(--surface-3); border-radius:20px; overflow:hidden}
.bars .fill{display:block; height:100%; border-radius:20px; background:var(--tone,var(--brand)); transition:width .5s cubic-bezier(.2,.8,.3,1)}
.bars .val{font-variant-numeric:tabular-nums; color:var(--ink-2); font-weight:600; min-width:30px; text-align:right}

.donut{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.donut svg{flex:none}
.donut .legend{display:flex; flex-direction:column; gap:6px; font-size:12.5px; flex:1; min-width:150px}
.donut .legend div{display:flex; align-items:center; gap:8px}
.donut .legend i{width:9px; height:9px; border-radius:2px; flex:none}
.donut .legend b{margin-left:auto; font-variant-numeric:tabular-nums}

/* ---------- TABLE ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-1)}
table{width:100%; border-collapse:collapse; font-size:13px}
thead th{position:sticky; top:0; z-index:2; background:var(--surface-2); text-align:left; padding:9px 12px;
  font-family:var(--disp); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); border-bottom:1px solid var(--border); white-space:nowrap; user-select:none}
thead th.sortable{cursor:pointer}
thead th.sortable:hover{color:var(--ink)}
thead th .ar{opacity:.45; margin-left:3px}
tbody td{padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:var(--surface-2)}
td.r,th.r{text-align:right; font-variant-numeric:tabular-nums}
.empty{padding:44px 20px; text-align:center; color:var(--ink-3); font-size:13.5px}
.empty svg{width:30px; height:30px; stroke-width:1.4; opacity:.4; margin-bottom:9px}

.pill{display:inline-flex; align-items:center; gap:5px; padding:2.5px 9px 2.5px 7px; border-radius:20px;
  font-size:11.5px; font-weight:600; white-space:nowrap; background:var(--pb,var(--surface-3)); color:var(--pf,var(--ink-2))}
.pill::before{content:""; width:5.5px; height:5.5px; border-radius:50%; background:var(--pd,currentColor); flex:none}
.pill.flat::before{display:none}
.st-Asignado{--pf:var(--st-asig-fg); --pb:var(--st-asig-bg); --pd:var(--st-asig-dot)}
.st-Disponible{--pf:var(--st-disp-fg); --pb:var(--st-disp-bg); --pd:var(--st-disp-dot)}
.st-Nuevo{--pf:var(--st-nuev-fg); --pb:var(--st-nuev-bg); --pd:var(--st-nuev-dot)}
.st-Reparacion{--pf:var(--st-repa-fg); --pb:var(--st-repa-bg); --pd:var(--st-repa-dot)}
.st-Perdido{--pf:var(--st-perd-fg); --pb:var(--st-perd-bg); --pd:var(--st-perd-dot)}
.st-Robado{--pf:var(--st-roba-fg); --pb:var(--st-roba-bg); --pd:var(--st-roba-dot)}
.st-Fuera{--pf:var(--st-fuer-fg); --pb:var(--st-fuer-bg); --pd:var(--st-fuer-dot)}
.st-Resguardo{--pf:var(--st-resg-fg); --pb:var(--st-resg-bg); --pd:var(--st-resg-dot)}
.st-Devuelto{--pf:var(--st-devu-fg); --pb:var(--st-devu-bg); --pd:var(--st-devu-dot)}
.tag{display:inline-block; padding:2px 7px; border-radius:4px; font-size:11px; font-weight:600;
  background:var(--surface-3); color:var(--ink-2); border:1px solid var(--border)}

.chips{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.chip{display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:20px; font-size:12px;
  background:var(--surface-3); color:var(--ink-2); border:1px solid var(--border); cursor:pointer}
.chip button{background:none; border:0; padding:0; cursor:pointer; color:var(--ink-3); display:flex}
.chip button:hover{color:var(--crit)}

/* ---------- DRAWER / MODAL ---------- */
.scrim{position:fixed; inset:0; background:rgba(20,24,22,.42); backdrop-filter:blur(2px); z-index:100;
  opacity:0; pointer-events:none; transition:opacity .18s}
.scrim.on{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(720px,100%); background:var(--ground);
  box-shadow:var(--shadow-3); z-index:101; transform:translateX(100%); transition:transform .24s cubic-bezier(.3,.9,.3,1);
  display:flex; flex-direction:column; border-left:1px solid var(--border)}
.drawer.on{transform:none}
.drawer>header{padding:16px 20px 0; background:var(--surface); border-bottom:1px solid var(--border)}
.drawer>header .top{display:flex; align-items:flex-start; gap:12px}
.drawer>header h2{font-size:18px; line-height:1.25}
.drawer>header .x{margin-left:auto; background:none; border:0; cursor:pointer; color:var(--ink-3);
  padding:5px; border-radius:var(--r-sm); display:flex; flex:none}
.drawer>header .x:hover{background:var(--surface-3); color:var(--ink)}
.drawer .tabs{display:flex; gap:2px; margin-top:14px; overflow-x:auto}
.drawer .tabs button{background:none; border:0; padding:8px 12px; cursor:pointer; font-size:13px;
  font-weight:500; color:var(--ink-3); border-bottom:2px solid transparent; white-space:nowrap}
.drawer .tabs button:hover{color:var(--ink)}
.drawer .tabs button.on{color:var(--ink); border-bottom-color:var(--brand); font-weight:600}
.drawer .pane{flex:1; overflow-y:auto; padding:20px}
.drawer>footer{padding:12px 20px; border-top:1px solid var(--border); background:var(--surface);
  display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.drawer>footer .sp{flex:1}

.modal{position:fixed; z-index:101; top:50%; left:50%; transform:translate(-50%,-48%) scale(.98);
  width:min(560px,calc(100% - 32px)); max-height:86vh; background:var(--surface); border-radius:var(--r-lg);
  box-shadow:var(--shadow-3); display:flex; flex-direction:column; opacity:0; pointer-events:none;
  transition:opacity .16s, transform .16s; border:1px solid var(--border)}
.modal.on{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1)}
.modal>header{padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px}
.modal>header h2{font-size:16px}
.modal>header .x{margin-left:auto; background:none; border:0; cursor:pointer; color:var(--ink-3); padding:5px;
  border-radius:var(--r-sm); display:flex}
.modal>header .x:hover{background:var(--surface-3); color:var(--ink)}
.modal .pane{padding:20px; overflow-y:auto}
.modal>footer{padding:12px 20px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end}

.formgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px}
.formgrid .wide{grid-column:1/-1}
fieldset{border:1px solid var(--border); border-radius:var(--r); padding:14px 16px 16px; margin:0}
legend{font-family:var(--disp); font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); padding:0 6px}
.stack{display:flex; flex-direction:column; gap:16px}
.rowcheck{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:2px 14px}

.dl{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:13px; align-items:baseline}
.dl dt{color:var(--ink-3); font-size:12px; white-space:nowrap}
.dl dd{margin:0; word-break:break-word}

.timeline{position:relative; padding-left:20px; display:flex; flex-direction:column; gap:14px}
.timeline::before{content:""; position:absolute; left:5px; top:5px; bottom:5px; width:1.5px; background:var(--border)}
.timeline .ev{position:relative}
.timeline .ev::before{content:""; position:absolute; left:-19px; top:4px; width:9px; height:9px; border-radius:50%;
  background:var(--surface); border:2px solid var(--border-strong)}
.timeline .ev.cur::before{border-color:var(--brand); background:var(--brand)}
.timeline .ev .who{font-weight:600; font-size:13.5px}
.timeline .ev .when{font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; margin-top:1px}
.timeline .ev .note{font-size:12.5px; color:var(--ink-2); margin-top:3px}

.progress{height:6px; background:var(--surface-3); border-radius:20px; overflow:hidden; margin-top:6px}
.progress i{display:block; height:100%; border-radius:20px; background:var(--tone,var(--ok))}

.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(12px); z-index:300;
  background:var(--rail); color:var(--rail-ink); padding:10px 16px; border-radius:var(--r); font-size:13px;
  box-shadow:var(--shadow-3); opacity:0; pointer-events:none; transition:opacity .18s,transform .18s;
  display:flex; align-items:center; gap:9px; max-width:min(440px,calc(100% - 32px))}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.bad{background:var(--crit); color:#fff}

.note{font-size:12.5px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--border);
  border-left:3px solid var(--brand); padding:11px 13px; border-radius:0 var(--r-sm) var(--r-sm) 0; line-height:1.55}
.note strong{color:var(--ink)}

.repopts{display:flex; flex-direction:column; gap:2px}
.repopts button{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px 12px;
  background:none; border:0; border-radius:var(--r-sm); cursor:pointer; font-size:13.5px; color:var(--ink-2)}
.repopts button:hover{background:var(--surface-2); color:var(--ink)}
.repopts button.on{background:var(--surface-3); color:var(--ink); font-weight:600}
.repopts button .c{margin-left:auto; font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}

.pager{display:flex; align-items:center; gap:10px; padding:11px 14px; font-size:12.5px; color:var(--ink-3);
  border-top:1px solid var(--border); background:var(--surface-2)}
.pager .sp{flex:1}

/* ---------- barra superior y cajón lateral en móvil ---------- */
.barra-movil{display:none}
.velo{display:none}

@media (max-width:900px){
  #app.on{grid-template-columns:1fr}

  .barra-movil{display:flex; align-items:center; gap:12px; padding:10px 14px;
    background:var(--rail); position:sticky; top:0; z-index:60;
    border-bottom:1px solid rgba(255,255,255,.08)}
  .barra-movil .marca-movil{display:flex; align-items:center}
  .barra-movil img{height:22px; display:block}
  .barra-movil .titulo-movil{font-family:var(--disp); font-size:13px; font-weight:600;
    color:var(--rail-ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

  .hamburguesa{width:38px; height:38px; flex:none; display:flex; flex-direction:column;
    justify-content:center; align-items:center; gap:4.5px; background:none; border:0;
    cursor:pointer; border-radius:var(--r-sm); padding:0}
  .hamburguesa:hover{background:rgba(255,255,255,.08)}
  .hamburguesa span{display:block; width:19px; height:2px; background:var(--rail-ink);
    border-radius:2px; transition:transform .2s, opacity .15s}
  .hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
  .hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

  .rail{position:fixed; top:0; left:0; bottom:0; width:min(272px,82vw); z-index:80;
    transform:translateX(-100%); transition:transform .22s cubic-bezier(.3,.9,.3,1);
    box-shadow:var(--shadow-3); height:100dvh}
  .rail.abierto{transform:none}
  .velo{display:block; position:fixed; inset:0; z-index:70; background:rgba(20,24,22,.5);
    opacity:0; pointer-events:none; transition:opacity .2s}
  .velo.on{opacity:1; pointer-events:auto}
  .velo[hidden]{display:none}

  .topbar{top:59px}
  .topbar h1{font-size:19px}
  .topbar,.view{padding-left:16px; padding-right:16px}
  .banner{margin-left:16px; margin-right:16px}
  .filtros .field,.filtros .search{width:100%; max-width:none}
  .grid2,.grid3{grid-template-columns:1fr}
  dialog .sheet{width:calc(100vw - 20px); max-height:92vh}
  .drawer{width:100%}
  .portal .top .who{margin-left:0; text-align:left; width:100%; order:3}
}

@media (max-width:560px){
  .tiles{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .topbar{flex-direction:column; align-items:flex-start; gap:10px}
  .topbar .acts{margin-left:0; width:100%}
  .tabs{gap:0}
  .tabs a{padding:9px 10px; font-size:12.5px}
}
@media print{ .rail,.topbar .acts{display:none} }

/* ================= añadidos de la versión servidor ================= */

a{color:inherit}
a.plain{text-decoration:none}
a.plain:hover{text-decoration:underline}
.link{color:var(--ink); font-weight:600; text-decoration:none}
.link:hover{text-decoration:underline}

/* diálogos nativos */
dialog{border:0; padding:0; background:transparent; max-width:none; max-height:none}
dialog::backdrop{background:rgba(20,24,22,.42); backdrop-filter:blur(2px)}
dialog .sheet{width:min(600px,calc(100vw - 32px)); max-height:86vh; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-3);
  display:flex; flex-direction:column; overflow:hidden}
dialog .sheet>header{padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px}
dialog .sheet>header h2{font-size:16px}
dialog .sheet>header button{margin-left:auto; background:none; border:0; cursor:pointer; color:var(--ink-3);
  padding:5px; border-radius:var(--r-sm); display:flex}
dialog .sheet>header button:hover{background:var(--surface-3); color:var(--ink)}
dialog .sheet .pane{padding:20px; overflow-y:auto}
dialog .sheet>footer{padding:12px 20px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end}

/* pestañas de la ficha de equipo */
.tabs{display:flex; gap:2px; overflow-x:auto; border-bottom:1px solid var(--border); margin-bottom:20px}
.tabs a{padding:9px 13px; font-size:13.5px; font-weight:500; color:var(--ink-3);
  border-bottom:2px solid transparent; text-decoration:none; white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--ink); border-bottom-color:var(--brand); font-weight:600}

/* avisos */
.aviso{padding:11px 14px; border-radius:var(--r-sm); font-size:13px; font-weight:500;
  display:flex; gap:9px; align-items:center; margin-bottom:16px}
.aviso.ok{background:var(--ok-bg); color:var(--ok)}
.aviso.error{background:var(--crit-bg); color:var(--crit)}
.aviso svg{width:16px; height:16px; flex:none}

/* páginas públicas */
.publico{min-height:100vh; display:grid; place-items:center; background:var(--rail); padding:24px}
.publico .sheet{width:100%; max-width:400px; background:var(--surface); border-radius:var(--r-lg);
  box-shadow:var(--shadow-3); overflow:hidden; border:1px solid var(--border)}
.publico .cap{background:var(--rail); padding:26px 28px 22px; border-bottom:3px solid var(--brand)}
.publico .cap img{height:30px; display:block}
.publico .cap strong{display:block; margin-top:14px; color:var(--rail-ink); font-family:var(--disp);
  font-size:17px; font-weight:600; font-variation-settings:'wdth' 110}
.publico .cap p{margin:2px 0 0; color:var(--rail-ink-2); font-size:12.5px}
.publico form{padding:26px 28px 28px; display:flex; flex-direction:column; gap:14px}
.publico .pie{padding:0 28px 24px; font-size:11.5px; color:var(--ink-3); text-align:center}
.publico .pie a{color:var(--ink-2)}
.codigo-inp{font-family:var(--mono); font-size:26px; letter-spacing:12px; text-align:center;
  font-weight:700; padding:12px 10px}

/* portal del empleado */
.portal{max-width:1000px; margin:0 auto; padding:0 20px 60px}
.portal.top,.portal .top{display:flex; align-items:center; gap:14px; padding:16px 0; flex-wrap:wrap}
.portal.top img,.portal .top img{height:24px; display:block}
.portal.top .who,.portal .top .who{margin-left:auto; font-size:13px; line-height:1.4; text-align:right}
.portal-cab{background:var(--rail); padding:0 20px; margin-bottom:26px}
.portal-cab .eyebrow{color:var(--rail-ink-2)}
.portal-cab .who{color:var(--rail-ink)}
.eqcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1); margin-bottom:14px; overflow:hidden}
.eqcard>header{padding:14px 18px; border-bottom:1px solid var(--border); display:flex;
  align-items:baseline; gap:12px; flex-wrap:wrap}
.eqcard>header h3{font-size:17px; font-family:var(--mono); font-weight:700; letter-spacing:-.01em}
.eqcard .body{padding:16px 18px}

/* utilidades */
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0}
.filtros{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.filtros .field{width:150px}
.right{margin-left:auto}
.mt0{margin-top:0}
.mb0{margin-bottom:0}
@media print{ .rail,.topbar,.tabs,.filtros,.pager{display:none} .view{padding:0} }

/* menú lateral en la versión servidor (enlaces, no botones) */
.rail nav a{display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--r-sm);
  color:var(--rail-ink-2); text-decoration:none; font-size:13.5px; font-weight:500;
  transition:background .12s,color .12s; position:relative}
.rail nav a:hover{background:var(--rail-hover); color:var(--rail-ink)}
.rail nav a.on{background:var(--rail-hover); color:var(--rail-ink); font-weight:600}
.rail nav a.on::before{content:""; position:absolute; left:-10px; top:6px; bottom:6px;
  width:3px; background:var(--brand); border-radius:0 2px 2px 0}
.rail nav a svg{width:17px; height:17px; flex:none; stroke-width:1.7}

/* opciones del catálogo de reportes */
.repopts a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-sm);
  text-decoration:none; font-size:13.5px; color:var(--ink-2)}
.repopts a:hover{background:var(--surface-2); color:var(--ink)}
.repopts a.on{background:var(--surface-3); color:var(--ink); font-weight:600}

/* fila de acciones compacta dentro de una tabla */
.acciones-fila{display:flex; gap:2px; justify-content:flex-end; align-items:center}
.acciones-fila form{display:contents}

/* tarjeta de solicitud */
.solicitud{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1); overflow:hidden; margin-bottom:12px}
.solicitud>header{padding:13px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.solicitud>header .folio{font-family:var(--mono); font-weight:700; font-size:14px}
.solicitud .body{padding:14px 16px}
.st-Enviada{--pf:var(--st-asig-fg); --pb:var(--st-asig-bg); --pd:var(--st-asig-dot)}
.st-Proceso{--pf:var(--st-repa-fg); --pb:var(--st-repa-bg); --pd:var(--st-repa-dot)}
.st-Completada{--pf:var(--st-disp-fg); --pb:var(--st-disp-bg); --pd:var(--st-disp-dot)}
.st-Rechazada{--pf:var(--st-roba-fg); --pb:var(--st-roba-bg); --pd:var(--st-roba-dot)}
/* «Con problema» en naranja fuerte y «Listo para entrega» en el azul del flujo */
.st-Problema{--pf:#8C4A00; --pb:#FDE7CE; --pd:#D97706}
.st-Listo{--pf:var(--st-nuev-fg); --pb:var(--st-nuev-bg); --pd:var(--st-nuev-dot)}
.solicitud.problema{border-color:var(--warn)}
.solicitud.problema>header{background:var(--warn-bg)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .st-Problema{--pf:#F0A952; --pb:#3A2A12; --pd:#E08A2B}
}
:root[data-theme="dark"] .st-Problema{--pf:#F0A952; --pb:#3A2A12; --pd:#E08A2B}

/* lista de detalles de una solicitud con problema */
.detalles{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.detalles li{display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:1.5;
  padding:7px 10px; border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface-2)}
.detalles li.listo{opacity:.62}
.detalles li.listo .txt{text-decoration:line-through}
.detalles .txt{flex:1; min-width:0; overflow-wrap:anywhere}
.detalles .cuando{font-size:11px; color:var(--ink-3); white-space:nowrap}
.detalles form{display:contents}

/* subsecciones del menú lateral */
.rail .subnav{display:flex; flex-direction:column; margin:2px 0 6px 28px;
  border-left:1px solid rgba(255,255,255,.12); padding-left:8px}
.rail .subnav a{display:flex; align-items:center; gap:8px; padding:6px 9px; border-radius:var(--r-sm);
  font-size:12.5px; color:var(--rail-ink-2); text-decoration:none}
.rail .subnav a:hover{background:var(--rail-hover); color:var(--rail-ink)}
.rail .subnav a.on{color:var(--rail-ink); font-weight:600; background:var(--rail-hover)}
.rail .subnav .tally{margin-left:auto; font-size:10.5px; font-variant-numeric:tabular-nums;
  color:var(--rail-ink-2)}

/* salida al portal del personal desde la gestión */
.rail .ir-portal{display:flex; align-items:center; gap:9px; margin:0 10px 10px; padding:9px 11px;
  border-radius:var(--r-sm); font-size:12.5px; color:var(--rail-ink-2); text-decoration:none;
  border:1px dashed rgba(255,255,255,.18)}
.rail .ir-portal:hover{color:var(--brand); border-color:var(--brand); background:var(--rail-hover)}
.rail .ir-portal svg{flex:none}

/* bloque de acceso dentro de la ficha de personal */
.acceso-box{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r);
  padding:14px 16px; display:flex; flex-direction:column; gap:12px}

/* pestañas del portal del personal */
.tabs-portal{display:flex; gap:4px; padding:0 0 0; overflow-x:auto}
.tabs-portal a{padding:9px 13px; font-size:13px; font-weight:500; color:var(--rail-ink-2);
  text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap}
.tabs-portal a:hover{color:var(--rail-ink)}
.tabs-portal a.on{color:var(--rail-ink); border-bottom-color:var(--brand); font-weight:600}
.chip.on{background:var(--brand); border-color:var(--brand); color:var(--on-brand); font-weight:600}
.chip b{font-variant-numeric:tabular-nums}

/* fusión de fichas duplicadas */
.dupe{display:block}
.dupe .check{justify-content:center}
hr.sep{border:0; border-top:1px solid var(--border); margin:6px 0}

/* franja del modo pruebas */
.pruebas-franja{position:sticky; top:0; z-index:60; display:flex; align-items:center;
  justify-content:center; gap:8px; padding:7px 14px; text-align:center;
  background:var(--warn-bg,#FFF4D6); color:var(--warn,#8C5800);
  border-bottom:1px solid var(--warn,#E7C55A); font-size:12.5px; font-weight:600;
  letter-spacing:.2px}
.pruebas-franja span{font-weight:400}
.pruebas-caja{background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r); padding:14px 16px; display:flex; flex-direction:column; gap:10px}
.pruebas-caja.on{border-color:var(--warn); background:var(--warn-bg)}

/* orden de arrendamientos: formulario GET en la barra de acciones */
.orden-arr{display:flex; align-items:center; gap:8px}
.orden-arr label{font-size:12px; color:var(--ink-3); font-weight:600; white-space:nowrap}
.orden-arr select{width:210px}

/* vista previa de la firma de correo
   Dos tercios para la firma y uno para la instalación y los datos: es el 8 y 4
   de una rejilla de doce columnas. La firma de RHINO mide 520px y hasta ahora
   se veía apretada en media pantalla. */
.grid-firma{display:grid; grid-template-columns:2fr 1fr; gap:16px; align-items:start}
@media (max-width:1040px){ .grid-firma{grid-template-columns:1fr} }
.firma-marco{background:#ffffff; border:1px solid var(--border); border-radius:var(--r);
  padding:14px; overflow-x:auto}
.firma-marco iframe{display:block; width:100%; min-width:540px; max-width:none; height:104px;
  border:0; background:#ffffff}

/* El nombre no se parte en tres renglones aunque la tabla traiga pocas filas. */
.t-personal th:first-child, .t-personal td:first-child{min-width:200px}

/* historial de movimientos de una persona */
.hist{list-style:none; margin:0; padding:0; max-height:560px; overflow-y:auto}
.hist li{padding:9px 0 9px 14px; border-left:2px solid var(--border); position:relative}
.hist li::before{content:""; position:absolute; left:-5px; top:15px; width:8px; height:8px;
  border-radius:50%; background:var(--border-strong)}
.hist li:first-child::before{background:var(--ok)}
.hist-cab{display:flex; gap:10px; align-items:baseline; justify-content:space-between;
  font-size:13px; flex-wrap:wrap}
.hist-cab .muted{font-size:11.5px; white-space:nowrap}
.hist-det{font-size:12.5px; color:var(--ink-2); line-height:1.5; margin-top:2px;
  overflow-wrap:anywhere}
.hist-pie{font-size:11.5px; color:var(--ink-3); margin-top:2px}

/* responsiva firmada incrustada */
.pdf-marco{border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
  background:var(--surface-2)}
.pdf-marco iframe,
.pdf-marco object{display:block; width:100%; height:640px; border:0; background:#f6f6f4}
.pdf-vacio{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; height:100%; padding:30px; text-align:center; color:var(--ink-3)}
.pdf-vacio p{margin:0; font-size:13.5px}
.pdf-barra{display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  padding:10px 12px; border-bottom:1px solid var(--border); background:var(--surface)}
.pdf-barra .crece{margin-left:auto}
@media (max-width:900px){ .pdf-marco iframe, .pdf-marco object{height:420px} }

/* paso a paso del estatus de una solicitud: verde lo alcanzado, gris lo que falta */
.pasos{list-style:none; margin:0 0 18px; padding:0; display:flex; gap:0; flex-wrap:wrap}
.pasos li{flex:1 1 160px; min-width:0; position:relative; padding:0 14px 0 0;
  display:flex; flex-direction:column; gap:7px}
.pasos li::after{content:""; position:absolute; left:30px; right:4px; top:11px; height:2px;
  background:var(--border); z-index:0}
.pasos li:last-child::after{display:none}
.pasos li.hecho::after{background:var(--ok)}
.pasos .marca{position:relative; z-index:1; flex:none; width:23px; height:23px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--border);
  background:var(--surface); color:var(--ink-3)}
.pasos .marca .punto{width:7px; height:7px; border-radius:50%; background:var(--ink-3); opacity:.55}
.pasos .txt{display:flex; flex-direction:column; min-width:0}
.pasos .txt b{font-size:12.5px; font-weight:600; color:var(--ink-3); line-height:1.35}
.pasos .txt i{font-style:normal; font-size:11.5px; color:var(--ink-3); line-height:1.45}
.pasos li.hecho .marca{border-color:var(--ok); background:var(--ok); color:#fff}
.pasos li.hecho .txt b{color:var(--ink); font-weight:700}
.pasos li.hecho .txt i{color:var(--ink-2)}
.pasos li.detenido .marca{border-color:var(--crit); background:var(--crit); color:#fff}
.pasos li.detenido .txt b{color:var(--crit); font-weight:700}
.pasos li.detenido .txt i{color:var(--crit)}
/* «Con problema» es una parada temporal, no un cierre: va en naranja, no en rojo */
.pasos.problema li.detenido .marca{border-color:var(--warn); background:var(--warn); color:#fff}
.pasos.problema li.detenido .txt b,
.pasos.problema li.detenido .txt i{color:var(--warn)}
@media (max-width:640px){
  .pasos{flex-direction:column; gap:12px}
  .pasos li{flex:none; padding:0; flex-direction:row; align-items:flex-start; gap:9px}
  .pasos li::after{display:none}
}

/* solicitud cuya fecha de ingreso ya pasó */
.solicitud.vencida{border-color:var(--crit)}
.solicitud.vencida>header{background:var(--crit-bg)}
.vencida-tag{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  color:var(--crit); background:var(--crit-bg); border:1px solid var(--crit);
  border-radius:999px; padding:2px 9px}

/* el portal se ensancha en las pantallas con tabla */
.portal.ancho{max-width:1240px}

/* aviso de la nomenclatura del hostname */
.nota-hostname{display:block; font-size:11.5px; line-height:1.5; color:var(--ink-3); margin-top:3px}
.nota-hostname.ok{color:var(--ok)}
.nota-hostname.mal{color:var(--crit); font-weight:600}
.hostname-mal{color:var(--crit); font-weight:600}