/* Portal Desarrollos TIC · Municipalidad de Colón */
:root{
  --bg:#f4f4fa; --surface:#fff; --ink:#151a3d; --ink-2:#363c66; --muted:#6b6f8f; --line:#e4e4f0; --line-2:#d4d4e6;
  --brand:#232a86; --brand-2:#3b3ab0; --accent:#f5b400; --ok:#0b9447; --err:#d6202f; --warn:#b45309;
  --rojo:#d6202f; --sol:#f5b400; --verde:#0b9447;
  --grad:linear-gradient(115deg,#141a5e 0%,#25288a 42%,#4a33a3 78%,#6a3db0 100%);
  --tri:linear-gradient(90deg,var(--rojo) 0 33.3%,var(--sol) 33.3% 66.6%,var(--verde) 66.6% 100%);
  --r:14px; --r-sm:9px; --sh:0 1px 2px rgba(15,29,43,.06),0 4px 16px rgba(15,29,43,.05);
  --sh-up:0 2px 4px rgba(15,29,43,.06),0 14px 34px rgba(15,29,43,.12);
  --sis:#2b2f8f;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5;min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
a{color:var(--brand-2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;margin:0 0 .4em;letter-spacing:-.01em}
h1,h2{font-family:Montserrat,"Plus Jakarta Sans",system-ui,sans-serif}
h1{font-size:1.65rem;font-weight:800}
h2{font-size:1.25rem;font-weight:700}
h3{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:.45rem}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:#eef2f6;padding:.1em .35em;border-radius:5px}
.muted{color:var(--muted)} .small{font-size:.82rem} .right{text-align:right} .nowrap{white-space:nowrap} .strong{font-weight:700;color:var(--ink)}
.mt{margin-top:1.2rem}
.ic{width:20px;height:20px;flex:none} .ic.sm{width:16px;height:16px} .ic.xs{width:13px;height:13px;vertical-align:-2px}

/* ---------- Topbar ---------- */
.topbar{background:var(--grad);color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.topbar-in{max-width:1280px;margin:0 auto;padding:.6rem 1.25rem;display:flex;align-items:center;gap:.8rem}
.brand{display:flex;align-items:center;gap:.65rem;color:#fff}
.brand:hover{text-decoration:none}
.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff}
.brand-mark.lg{width:58px;height:58px;border-radius:16px}.brand-mark.lg .ic{width:30px;height:30px}
.brand-txt{display:flex;flex-direction:column;line-height:1.1}
.brand-txt strong{font-family:Montserrat,sans-serif;font-size:.95rem;font-weight:800;letter-spacing:.01em}.brand-txt small{opacity:.75;font-size:.72rem}
.brand-escudo{height:40px;width:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.tricolor{height:3px;background:var(--tri)}
.crumb-sep{opacity:.35;font-size:1.3rem}
.crumb{color:#fff;display:flex;align-items:center;gap:.4rem;font-weight:600;padding:.3rem .6rem;border-radius:8px;background:rgba(255,255,255,.08)}
.crumb:hover{background:rgba(255,255,255,.16);text-decoration:none}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.bell{position:relative;color:#fff;display:grid;place-items:center;width:38px;height:38px;border-radius:10px}
.bell:hover{background:rgba(255,255,255,.12)}
.bell-n{position:absolute;top:2px;right:0;background:var(--rojo);color:#fff;font-size:.7rem;font-weight:800;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px;box-shadow:0 0 0 2px #25288a}
.bell.ring .ic{animation:ring 1s ease 2}
@keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
.usermenu{position:relative}
.usermenu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem .25rem .25rem;border-radius:999px}
.usermenu summary::-webkit-details-marker{display:none}
.usermenu summary:hover{background:rgba(255,255,255,.1)}
.avatar{width:32px;height:32px;border-radius:50%;background:#fff;color:var(--brand);font-weight:800;display:grid;place-items:center}
.uname{font-size:.88rem;font-weight:600}
.menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border-radius:12px;box-shadow:var(--sh-up);min-width:200px;padding:.4rem;border:1px solid var(--line)}
.menu a{display:flex;gap:.55rem;align-items:center;color:var(--ink-2);padding:.55rem .7rem;border-radius:8px;font-size:.9rem}
.menu a:hover{background:#f1f5f9;text-decoration:none}
.subnav{background:#fff;border-bottom:1px solid var(--line)}
.subnav-in{max-width:1280px;margin:0 auto;padding:0 1.25rem;display:flex;gap:.2rem;overflow-x:auto}
.subnav a{color:var(--ink-2);font-weight:600;font-size:.9rem;padding:.8rem .85rem;border-bottom:3px solid transparent;white-space:nowrap;display:flex;align-items:center;gap:.4rem}
.subnav a:hover{text-decoration:none;color:var(--ink)}
.subnav a.on{color:var(--sis);border-bottom-color:var(--sis)}
.pill-n{background:var(--sis);color:#fff;font-size:.7rem;border-radius:999px;padding:.05rem .45rem;font-weight:800}

.wrap{max-width:1280px;width:100%;margin:0 auto;padding:1.6rem 1.25rem 3rem;flex:1}
.foot{max-width:1280px;width:100%;margin:0 auto;padding:1rem 1.25rem 1.6rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;color:var(--muted);font-size:.78rem;border-top:1px solid var(--line)}

/* ---------- Generic ---------- */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem}
.page-head .lead{margin:.2rem 0 0;color:var(--ink-2);display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.eyebrow{margin:0 0 .25rem;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.back{display:inline-flex;align-items:center;gap:.3rem;font-size:.85rem;color:var(--muted);margin-bottom:.35rem}
.actions{display:flex;gap:.5rem;flex-wrap:wrap}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.3rem;box-shadow:var(--sh)}
.panel+.panel{margin-top:1rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid-2>.panel+.panel{margin-top:0}
.grid-ver{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1rem;align-items:start}
.grid-ver>.panel+.panel{margin-top:0}
.empty{text-align:center;padding:3rem 1rem;color:var(--muted)}
.empty h2{color:var(--ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--sis);color:#fff;border:0;border-radius:var(--r-sm);padding:.62rem 1rem;font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;transition:filter .15s,transform .05s;white-space:nowrap}
.btn:hover{filter:brightness(1.1);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:.4rem .7rem;font-size:.82rem}
.btn-block{width:100%}
.btn-ghost{background:#fff;color:var(--ink-2);border:1px solid var(--line-2)}
.btn-ghost:hover{background:#f8fafc;filter:none}
.btn-accent{background:var(--accent);color:#1a1200}
.btn-danger{background:var(--err)}

.flash{padding:.75rem 1rem;border-radius:10px;margin-bottom:1rem;font-size:.92rem;border:1px solid;display:block}
.flash .ic{vertical-align:-3px}
.flash-ok{background:#ecfdf3;border-color:#bbf7d0;color:#14532d}
.flash-error{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}
.flash-info{background:#eff6ff;border-color:#bfdbfe;color:#1e3a8a}
.flash-warn{background:#fffbeb;border-color:#fde68a;color:#78350f}
.flash.big{font-size:1rem}
code.pass{font-size:1.15rem;padding:.2em .5em;background:#fff;border:1px dashed #86efac;user-select:all}

.tag{display:inline-block;font-size:.7rem;font-weight:700;padding:.15rem .5rem;border-radius:999px;background:#eef2f6;color:var(--ink-2);letter-spacing:.02em;vertical-align:middle;margin-left:.3rem}
.tag-dark{background:var(--ink);color:#fff}
.tag-c{background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c)}
.chips{display:flex;flex-wrap:wrap;gap:.3rem}
.chip{font-size:.75rem;font-weight:600;padding:.15rem .55rem;border-radius:999px;background:color-mix(in srgb,var(--c) 10%,#fff);color:color-mix(in srgb,var(--c) 85%,#000);border:1px solid color-mix(in srgb,var(--c) 25%,#fff)}

/* ---------- Forms ---------- */
.form label{display:flex;flex-direction:column;gap:.3rem;font-size:.83rem;font-weight:600;color:var(--ink-2);margin-bottom:.85rem}
input,select,textarea{font:inherit;font-size:.92rem;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.55rem .7rem;width:100%;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--sis);box-shadow:0 0 0 3px color-mix(in srgb,var(--sis) 18%,transparent)}
input[type=checkbox]{width:17px;height:17px;accent-color:var(--sis);margin:0;flex:none}
input[type=color]{padding:.2rem;height:40px}
.form label.chk,label.chk{flex-direction:row;align-items:center;gap:.5rem;font-weight:500;cursor:pointer;margin-bottom:.5rem}
label.chk.big{font-size:.95rem;padding:.75rem .9rem;background:#f8fafc;border:1px solid var(--line);border-radius:10px}
.checks{margin:.2rem 0 .4rem}
.row-2,.row-3,.row-4{display:grid;gap:0 .9rem}
.row-2{grid-template-columns:1fr 1fr}.row-3{grid-template-columns:repeat(3,1fr)}.row-4{grid-template-columns:repeat(4,1fr)}
.span-2{grid-column:span 2}
.form-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end}
.form-actions.sticky{padding:1.1rem 0 .4rem}
.step{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--sis);color:#fff;font-size:.78rem}
.panel.is-collapsed{opacity:.75}
.remito-box{display:flex;flex-direction:column;justify-content:flex-end;margin-bottom:.85rem}
.remito-box label.chk{margin-bottom:.35rem}
.seg{display:inline-flex;background:#e9eef4;border-radius:10px;padding:3px}
.seg a{padding:.45rem .9rem;border-radius:8px;font-weight:600;font-size:.88rem;color:var(--ink-2)}
.seg a:hover{text-decoration:none}
.seg a.on{background:#fff;color:var(--sis);box-shadow:var(--sh)}
.inline-form{display:flex;gap:.4rem;align-items:center;margin-bottom:.4rem}
.inline-form input{padding:.4rem .55rem;font-size:.86rem}
.inline-form .grow{flex:1}
.inline-form label.chk{margin:0;white-space:nowrap}

/* ---------- Filtros / tablas ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1rem}
.filters select,.filters input[type=date]{width:auto;padding:.5rem .6rem;font-size:.86rem}
.filters label.inline{display:flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--muted);font-weight:600}
.search{position:relative;flex:1;min-width:220px}
.search .ic{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);color:var(--muted)}
.search input{padding-left:2.1rem}
.table-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;box-shadow:var(--sh)}
.panel .table-wrap{box-shadow:none}
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:.75rem .8rem;border-bottom:1px solid var(--line);background:#fafbfc;white-space:nowrap}
.tbl td{padding:.65rem .8rem;border-bottom:1px solid #eef1f5;vertical-align:top}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:#f8fafc}
.tbl tr.is-off td{opacity:.55}
.tbl-fx tbody tr{cursor:pointer}
.tbl-fx tr.sel td{background:color-mix(in srgb,var(--sis) 7%,#fff)!important}
.w-chk{width:36px}
.empty-row{text-align:center;color:var(--muted);padding:2.5rem!important}
.obs-mini{color:var(--err);font-size:.78rem;margin-top:.15rem}
.ok-dot{color:var(--ok);font-weight:800}
.days{display:inline-block;min-width:28px;text-align:center;font-size:.78rem;font-weight:700;padding:.1rem .35rem;border-radius:6px;background:#eef2f6;color:var(--ink-2)}
.days.late{background:#fee2e2;color:#991b1b}
.pager{display:flex;gap:.3rem;align-items:center;margin-top:1rem;flex-wrap:wrap}
.pager a{min-width:34px;text-align:center;padding:.35rem .5rem;border-radius:8px;background:#fff;border:1px solid var(--line);color:var(--ink-2);font-weight:600}
.pager a.on{background:var(--sis);color:#fff;border-color:var(--sis)}
.bulkbar{position:sticky;top:110px;z-index:5;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;background:var(--ink);color:#fff;padding:.6rem .9rem;border-radius:12px;margin-bottom:.8rem;box-shadow:var(--sh-up)}
.bulkbar .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.bulkbar label.chk{margin:0;color:#fff}

/* ---------- Estados ---------- */
.st{display:inline-block;font-size:.74rem;font-weight:700;padding:.2rem .55rem;border-radius:999px;white-space:nowrap;border:1px solid}
.st-slate{background:#f1f5f9;color:#334155;border-color:#e2e8f0}
.st-indigo{background:#eef2ff;color:#3730a3;border-color:#e0e7ff}
.st-blue{background:#eff6ff;color:#1d4ed8;border-color:#dbeafe}
.st-red{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.st-amber{background:#fffbeb;color:#92400e;border-color:#fde68a}
.st-orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}
.st-violet{background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe}
.st-green{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}
.st-gray{background:#f4f4f5;color:#52525b;border-color:#e4e4e7}

/* ---------- Portal ---------- */
.welcome{position:relative;overflow:hidden;border-radius:26px;background:radial-gradient(circle at 92% 0%,rgba(245,180,0,.25) 0,transparent 30%),var(--grad);color:#fff;padding:2.6rem 2.6rem 5.2rem;box-shadow:0 18px 40px -18px rgba(35,40,138,.55)}
.welcome-watermark{position:absolute;right:-60px;top:50%;transform:translateY(-50%) rotate(-8deg);width:360px;opacity:.08;pointer-events:none}
.welcome-in{position:relative;display:flex;align-items:center;gap:1.8rem;z-index:1}
.welcome-escudo{width:96px;height:auto;flex:none;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
.welcome h1{font-size:2.4rem;font-weight:900;margin:.1rem 0 .5rem}
.welcome-sub{margin:0;font-size:1.02rem;opacity:.92;max-width:620px}
.welcome-sub strong{color:var(--sol);font-weight:700}
.welcome-bar{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--tri)}
.cards-over{position:relative;z-index:2;margin:-3.4rem 1.6rem 0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.1rem}
.card-sis{--c:#3b3ab0;position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.35rem 1.35rem 1.2rem;color:var(--ink);box-shadow:var(--sh);transition:transform .18s ease,box-shadow .18s ease,border-color .18s;overflow:hidden;min-height:210px}
.card-sis::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--c)}
.card-sis::after{content:"";position:absolute;right:-50px;top:-50px;width:150px;height:150px;border-radius:50%;background:color-mix(in srgb,var(--c) 8%,transparent);transition:transform .3s ease}
a.card-sis:hover{transform:translateY(-3px);box-shadow:var(--sh-up);border-color:color-mix(in srgb,var(--c) 35%,var(--line));text-decoration:none}
a.card-sis:hover::after{transform:scale(1.25)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem;position:relative;z-index:1}
.card-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 70%,#6a3db0));color:#fff;box-shadow:0 8px 18px -8px var(--c)}
.card-ic .ic{width:26px;height:26px}
.card-ic.sm{width:38px;height:38px;border-radius:11px}.card-ic.sm .ic{width:20px;height:20px}
.card-sis h3{font-family:Montserrat,sans-serif;font-weight:800;font-size:1.1rem;margin-bottom:.3rem;position:relative;z-index:1}
.card-sis p{margin:0 0 1rem;color:var(--muted);font-size:.88rem;position:relative;z-index:1}
.card-go{margin-top:auto;display:inline-flex;align-items:center;gap:.35rem;font-weight:700;font-size:.88rem;color:var(--c);position:relative;z-index:1}
a.card-sis:hover .card-go .ic{transform:translateX(3px)}
.card-go .ic{transition:transform .18s}
.card-sis.is-soon{background:#fbfbfe}
.card-sis.is-soon>*{opacity:.55;filter:saturate(.35)}
.card-sis.is-soon .tag{opacity:1;filter:none}
.card-sis.is-soon::before{background:repeating-linear-gradient(90deg,var(--c) 0 10px,transparent 10px 16px)}
.card-badge{position:absolute;right:1.1rem;bottom:1.1rem;background:var(--rojo);color:#fff;font-weight:800;font-size:.78rem;padding:.25rem .6rem;border-radius:999px;z-index:1;box-shadow:0 0 0 4px #fff}
.card-admin{background:linear-gradient(160deg,#fff,#f8fafc)}

/* ---------- Usuarios ---------- */
.perm-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.perm{--c:#1d4ed8;display:flex;align-items:center;gap:.75rem;padding:.6rem .7rem;border:1px solid var(--line);border-radius:12px}
.perm-txt{flex:1;display:flex;flex-direction:column;line-height:1.2}
.perm select{width:170px}
.dl{display:grid;grid-template-columns:max-content 1fr;gap:.45rem 1.2rem;margin:0}
.dl dt{color:var(--muted);font-size:.83rem}.dl dd{margin:0;font-weight:500}
.sis-edit{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:1rem}
.sis-edit .panel+.panel{margin-top:0}
.sis-form{border-top:4px solid var(--c)}
.sis-form-head{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}

/* ---------- Facturas ---------- */
.alert-banner{display:flex;align-items:center;gap:1rem;background:linear-gradient(90deg,#fff7e6,#fff);border:1px solid #fcd9a0;border-left:5px solid var(--accent);border-radius:var(--r);padding:.9rem 1.1rem;margin-bottom:1.3rem}
.alert-banner>div{flex:1;display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}
.alert-banner>div a{color:#78350f}
.alert-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sol);color:#fff}
.pipeline{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.lane{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem;box-shadow:var(--sh);display:flex;flex-direction:column;gap:.55rem}
.lane h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:.2rem}
.lane-suministros{border-top:4px solid #2563eb}.lane-contaduria{border-top:4px solid #ea580c}.lane-tesoreria{border-top:4px solid #7c3aed}.lane-fin{border-top:4px solid #16a34a}
.stat{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.8rem;align-items:center;padding:.65rem .8rem;border-radius:11px;border:1px solid var(--line);color:var(--ink);background:#fbfcfd;transition:background .15s,border-color .15s}
.stat:hover{text-decoration:none;background:#fff;border-color:var(--line-2)}
.stat-n{grid-row:span 2;font-size:1.6rem;font-weight:800;min-width:2ch}
.stat-l{font-weight:600;font-size:.86rem}
.stat-m{font-size:.76rem;color:var(--muted)}
.stat.is-zero{opacity:.55}.stat.is-zero .stat-n{color:var(--muted)}
.st-b-red .stat-n{color:#b91c1c}.st-b-amber .stat-n{color:#b45309}.st-b-orange .stat-n{color:#c2410c}.st-b-violet .stat-n{color:#6d28d9}.st-b-blue .stat-n{color:#1d4ed8}.st-b-indigo .stat-n{color:#4338ca}.st-b-green .stat-n{color:#15803d}
.st-b-red:not(.is-zero){background:#fff5f5;border-color:#fecaca}
.st-b-amber:not(.is-zero){background:#fffbeb;border-color:#fde68a}
.mini-list{list-style:none;margin:0;padding:0}
.mini-list li a{display:flex;justify-content:space-between;gap:.6rem;align-items:center;padding:.55rem 0;border-bottom:1px solid #eef1f5;color:var(--ink)}
.mini-list li:last-child a{border:0}
.mini-list li a:hover{text-decoration:none;background:#fafbfc}
.timeline{list-style:none;margin:0;padding:0 0 0 1.1rem;border-left:2px solid var(--line)}
.timeline li{position:relative;padding:0 0 1rem .6rem;display:flex;flex-direction:column;gap:.15rem}
.timeline li::before{content:"";position:absolute;left:-1.52rem;top:.3rem;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--sis)}
.timeline li.tl-observar_sum::before,.timeline li.tl-observar_cont::before,.timeline li.tl-devolver_cont::before,.timeline li.tl-anular::before{border-color:var(--err)}
.timeline li.tl-pagar::before{border-color:var(--ok);background:var(--ok)}
.timeline a{display:flex;flex-direction:column;gap:.15rem;color:var(--ink)}
.timeline a:hover{text-decoration:none}
.tl-when{font-size:.75rem;color:var(--muted)}
.tl-who{font-size:.83rem;color:var(--ink-2)}
.tl-note{font-size:.86rem;background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:.45rem .6rem;margin-top:.2rem}
.timeline.compact li{padding-bottom:.7rem}
.stepper{list-style:none;display:flex;margin:0 0 1.3rem;padding:0;counter-reset:s;overflow-x:auto}
.stepper li{flex:1;min-width:90px;position:relative;text-align:center;font-size:.76rem;font-weight:600;color:var(--muted);padding-top:30px}
.stepper li span{position:absolute;top:0;left:50%;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--line-2);z-index:1}
.stepper li::before{content:"";position:absolute;top:10px;left:-50%;right:50%;height:2px;background:var(--line-2)}
.stepper li:first-child::before{display:none}
.stepper li.done{color:var(--ink-2)}
.stepper li.done span{background:var(--sis);border-color:var(--sis)}
.stepper li.done::before,.stepper li.now::before{background:var(--sis)}
.stepper li.now{color:var(--sis);font-weight:800}
.stepper li.now span{border-color:var(--sis);box-shadow:0 0 0 5px color-mix(in srgb,var(--sis) 18%,transparent);background:#fff}
.stepper li.now.obs{color:var(--err)}
.stepper li.now.obs span{border-color:var(--err);box-shadow:0 0 0 5px #fee2e2}
.actions-panel{border:2px solid color-mix(in srgb,var(--sis) 30%,#fff)}
.acc-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.acc-tab{font:inherit;font-size:.85rem;font-weight:600;display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .75rem;border-radius:9px;border:1px solid var(--line-2);background:#fff;color:var(--ink-2);cursor:pointer}
.acc-tab.on{background:var(--sis);color:#fff;border-color:var(--sis)}
.acc-tab.danger{color:var(--err)}
.acc-tab.danger.on{background:var(--err);color:#fff;border-color:var(--err)}
.dl-2{grid-template-columns:minmax(150px,max-content) 1fr}

/* ---------- Toasts ---------- */
.toasts{position:fixed;right:1rem;bottom:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:50}
.toast{background:var(--ink);color:#fff;padding:.8rem 1rem;border-radius:12px;box-shadow:var(--sh-up);max-width:340px;display:flex;gap:.6rem;align-items:flex-start;animation:tin .25s ease}
.toast a{color:#fcd34d;font-weight:700}
@keyframes tin{from{transform:translateY(10px);opacity:0}}

/* ---------- Login ---------- */
.login-body{flex-direction:row;background:#fff}
.login-side{flex:1.1;position:relative;overflow:hidden;background:radial-gradient(circle at 85% 15%,rgba(245,180,0,.22) 0,transparent 32%),var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;padding:3rem}
.login-side::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--tri)}
.side-watermark{position:absolute;right:-120px;bottom:-90px;width:480px;opacity:.07;pointer-events:none}
.login-side-in{max-width:420px;position:relative;z-index:1}
.login-escudo{width:110px;height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));margin-bottom:1.4rem}
.login-side h1{font-size:2.6rem;font-weight:900;margin:.2rem 0 .8rem;line-height:1.05}
.login-side p{opacity:.85}
.tricolor-line{display:block;width:84px;height:5px;border-radius:5px;background:var(--tri);margin-bottom:1rem}
.eyebrow.light{color:rgba(255,255,255,.75)}
.login-escudo-sm{display:none;width:64px;margin:0 auto 1rem;filter:invert(17%) sepia(60%) saturate(2800%) hue-rotate(232deg) brightness(80%)}
.login-card h2{font-size:1.5rem;font-weight:800}
.login-feats{list-style:none;padding:0;margin:2rem 0 0;display:flex;flex-direction:column;gap:.7rem}
.login-feats li{display:flex;gap:.6rem;align-items:center;opacity:.9}
.login-feats .ic{color:var(--sol)}
.login-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;background:var(--bg)}
.login-card{width:100%;max-width:380px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:2rem;box-shadow:var(--sh-up)}
.login-card.wide{max-width:520px}
.login-card label{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;font-weight:600;color:var(--ink-2);margin-bottom:1rem}
.login-foot{color:var(--muted);font-size:.75rem;margin-top:1.5rem}
.login-body.solo .login-main{min-height:100vh}
.checklist{list-style:none;padding:0;margin:0 0 1rem;font-size:.9rem}
.checklist li{padding:.3rem 0}.checklist .ok{color:var(--ok)}.checklist .bad{color:var(--err)}

/* ---------- Impresión ---------- */
.print-body{background:#fff;display:block}
.print-bar{padding:1rem;text-align:center}
.print-page{max-width:1000px;margin:0 auto;padding:1rem}
.print-head{display:flex;justify-content:space-between;border-bottom:2px solid #000;padding-bottom:.6rem;margin-bottom:1rem}
.print-tbl{font-size:.8rem}.print-tbl td,.print-tbl th{border:1px solid #cbd5e1;padding:.35rem .45rem;background:#fff!important}
.print-tbl td.box{width:60px}
.firmas{display:flex;justify-content:space-around;margin-top:5rem;text-align:center}
.firmas div{border-top:1px solid #000;padding-top:.4rem;min-width:240px}
@media print{.print-bar{display:none}.print-page{padding:0}@page{size:A4 landscape;margin:12mm}}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .pipeline{grid-template-columns:1fr 1fr}
  .grid-ver{grid-template-columns:1fr}
  .row-4{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .grid-2,.row-2,.row-3,.row-4,.pipeline{grid-template-columns:1fr}
  .span-2{grid-column:auto}
  .uname,.brand-txt,.crumb-sep{display:none}
  .crumb{font-size:.85rem}
  .topbar-in{padding:.55rem .9rem;gap:.5rem}
  .login-side{display:none}
  .login-escudo-sm{display:block}
  .login-card{text-align:center}.login-card label{text-align:left}
  .sis-edit{grid-template-columns:1fr}
  .perm{flex-wrap:wrap}.perm select{width:100%}
  .welcome{padding:1.8rem 1.4rem 4.4rem;border-radius:20px}
  .welcome-in{flex-direction:column;align-items:flex-start;gap:1rem}
  .welcome-escudo{width:64px}
  .welcome h1{font-size:1.75rem}
  .cards-over{margin:-3rem .6rem 0}
  .wrap{padding:1.2rem 1rem 2.5rem}
  .bulkbar{top:56px}
}