/* Aduanas · prototipo. Claro siempre. Un acento (azul aduana), tres colores de reloj, numerales tabulares.
   Misma familia visual que Ruta: si sabes usar uno, sabes usar el otro. */
:root{
  --bg:#f6f7f9; --card:#fff; --card-2:#fbfcfd; --linea:#e4e7ec; --linea-f:#cfd4dd;
  --tx:#101828; --tx-2:#475467; --tx-3:#8a94a6;
  --ac:#1f4fb0; --ac-sv:color-mix(in srgb,var(--ac) 8%,transparent); --ac-sv2:color-mix(in srgb,var(--ac) 14%,transparent); --ac-tx:color-mix(in srgb,var(--ac) 82%,#000);
  --ok:#0b7a4b; --ok-sv:#0b7a4b12; --ad:#b45309; --ad-sv:#b4530914;
  --ma:#b42318; --ma-sv:#b4231810;
  --r:10px; --sh:0 1px 2px #1018280d, 0 1px 3px #10182814; --sh-2:0 18px 50px -12px #10182840;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --e-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:15px;line-height:1.45;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
.mono{font-family:var(--mono)}

/* ---------- marco ---------- */
.proto{display:flex;gap:10px;align-items:center;padding:7px 16px;background:var(--ac-sv);border-bottom:1px solid var(--linea);font-size:12.5px;color:var(--tx-2)}
.proto b{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ac-tx);border:1px solid var(--ac);border-radius:3px;padding:2px 6px;white-space:nowrap}
.app{display:flex;flex-direction:column;height:100dvh}
.top{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--linea)}
.marca{display:flex;align-items:baseline;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-3);white-space:nowrap}
.marca b{color:var(--tx);font-size:13px;letter-spacing:.14em}
.tasa{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--tx-2);background:var(--bg);border:1px solid var(--linea);border-radius:999px;padding:4px 11px;white-space:nowrap}
.tasa b{color:var(--tx)}
.rol{display:flex;align-items:center;gap:8px;border:1px solid var(--linea);border-radius:999px;padding:3px 4px 3px 3px;background:var(--card)}
.rol .av{width:26px;height:26px;border-radius:50%;background:var(--ac);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.rol select{border:0;background:none;font-size:13px;color:var(--tx-2);padding:2px 4px;cursor:pointer;max-width:200px}
.nav{display:flex;gap:2px;padding:0 10px;background:var(--card);border-bottom:1px solid var(--linea);overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav button{position:relative;padding:12px 14px;font-size:14px;color:var(--tx-3);white-space:nowrap;display:flex;gap:7px;align-items:center}
.nav button:hover{color:var(--tx-2)}
.nav button.on{color:var(--tx);font-weight:600}
.nav button.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--ac);border-radius:2px}
.pill{font-family:var(--mono);font-size:10.5px;background:var(--bg);border:1px solid var(--linea);color:var(--tx-2);border-radius:999px;padding:1px 7px;min-width:20px;text-align:center}
.nav button.on .pill{background:var(--ac-sv);border-color:var(--ac);color:var(--ac-tx)}
.pill.al{background:var(--ma-sv);border-color:var(--ma);color:var(--ma)}
main{flex:1;overflow-y:auto;overflow-anchor:none}
.wrap{padding:22px 28px 48px}
@media(max-width:940px){.wrap{padding:16px 14px 40px}}
h1{font-size:21px;font-weight:650;margin:0 0 3px;letter-spacing:-.015em}
h2{font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.15em;color:var(--tx-3);margin:28px 0 11px;font-weight:500;display:flex;align-items:center;gap:8px}
.sub{color:var(--tx-3);font-size:13.5px;margin:0}
.cab{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.cab .t{flex:1;min-width:220px}

/* ---------- botones, chips, insignias ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border-radius:8px;background:var(--ac);color:#fff;font-weight:600;font-size:14px;transition:filter .15s,transform .1s;white-space:nowrap}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:scale(.98)}
.btn.g{background:var(--card);color:var(--tx);border:1px solid var(--linea-f);font-weight:500}
.btn.g:hover{background:var(--bg);filter:none}
.btn.lg{padding:13px 18px;font-size:15px;width:100%}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn.peligro{color:var(--ma)}
.btn[disabled]{opacity:.45;pointer-events:none}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{padding:5px 12px;border:1px solid var(--linea);border-radius:999px;font-size:12.5px;color:var(--tx-2);white-space:nowrap;background:var(--card)}
.chip:hover{border-color:var(--linea-f)}
.chip.on{background:var(--ac);border-color:var(--ac);color:#fff;font-weight:600}
.b{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;padding:2px 7px;border-radius:5px;border:1px solid var(--linea);color:var(--tx-2);background:var(--card);white-space:nowrap}
.b.verde{color:var(--ok);border-color:#0b7a4b40;background:var(--ok-sv)}
.b.ambar{color:var(--ad);border-color:#b4530940;background:var(--ad-sv)}
.b.rojo{color:var(--ma);border-color:#b4231840;background:var(--ma-sv)}
.b.azul{color:var(--ac-tx);border-color:color-mix(in srgb,var(--ac) 30%,transparent);background:var(--ac-sv)}
.punto{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.et{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--tx-3)}

/* ---------- tarjetas y KPIs ---------- */
.caja{background:var(--card);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--sh)}
.caja>header{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--linea)}
.caja>header h3{margin:0;font-size:14px;font-weight:650;flex:1}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:22px}
.kpi{background:var(--card);border:1px solid var(--linea);border-radius:var(--r);padding:14px 15px;box-shadow:var(--sh);text-align:left;width:100%}
button.kpi:hover{border-color:var(--linea-f)}
.kpi .v{font-size:25px;font-weight:650;font-family:var(--mono);letter-spacing:-.025em;line-height:1.1;margin-top:8px}
.kpi .s{font-size:11.5px;color:var(--tx-3);margin-top:5px}
.kpi.rojo .v{color:var(--ma)}.kpi.ambar .v{color:var(--ad)}.kpi.verde .v{color:var(--ok)}
.vacio{padding:26px 18px;text-align:center;color:var(--tx-3);font-size:13.5px}
.dos{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
@media(max-width:1100px){.dos{grid-template-columns:minmax(0,1fr)}}

/* ---------- filas de trabajo (Hoy) ---------- */
.fila{display:flex;align-items:center;gap:14px;padding:13px 16px;border-top:1px solid var(--linea);cursor:pointer;transition:background .12s}
.fila:first-of-type{border-top:0}
.fila:hover{background:var(--card-2)}
.fila .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;font-family:var(--mono);font-size:13px;font-weight:700}
.fila .ic.rojo{background:var(--ma-sv);color:var(--ma)}.fila .ic.ambar{background:var(--ad-sv);color:var(--ad)}.fila .ic.azul{background:var(--ac-sv);color:var(--ac)}.fila .ic.verde{background:var(--ok-sv);color:var(--ok)}
.fila .q{flex:1;min-width:0}
.fila .q b{display:block;font-size:14.5px;font-weight:600}
.fila .q small{display:block;color:var(--tx-3);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila .der{display:flex;align-items:center;gap:10px;flex:none}
@media(max-width:700px){.fila{flex-wrap:wrap}.fila .q small{white-space:normal}.fila .der{width:100%;flex-wrap:wrap;gap:8px;padding-left:48px}.fila .der .btn{flex:1 1 auto}}

/* ---------- tablero por fases ---------- */
.filtros{display:flex;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-bottom:16px}
.busca{border:1px solid var(--linea-f);border-radius:8px;padding:7px 11px;background:var(--card);font-size:13.5px;min-width:220px}
.tablero{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
@media(max-width:1100px){.tablero{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.tablero{grid-template-columns:1fr}.col:not(.vis){display:none}}
.col{background:#eef0f4;border-radius:12px;padding:10px;min-height:120px}
.col>header{display:flex;align-items:baseline;gap:8px;padding:4px 4px 10px}
.col>header b{font-size:13.5px}
.col>header small{color:var(--tx-3);font-size:11.5px;flex:1}
.fases-tab{display:none;gap:6px;margin-bottom:12px;overflow-x:auto}
@media(max-width:700px){.fases-tab{display:flex}}
.tj{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--linea);border-left:3px solid var(--linea-f);border-radius:9px;padding:11px 12px;margin-bottom:8px;box-shadow:var(--sh);transition:border-color .15s,transform .15s,box-shadow .15s}
.tj:hover{border-color:var(--linea-f);transform:translateY(-1px);box-shadow:0 4px 14px -6px #10182830}
.tj.rojo{border-left-color:var(--ma)}.tj.ambar{border-left-color:var(--ad)}.tj.verde{border-left-color:var(--ok)}
.tj.sel{outline:2px solid var(--ac);outline-offset:1px}
.tj .l1{display:flex;align-items:baseline;gap:7px}
.tj .l1 .id{font-family:var(--mono);font-size:10.5px;color:var(--tx-3)}
.tj .l1 b{font-size:14px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tj .mc{font-size:12.5px;color:var(--tx-2);margin:2px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tj .l3{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.tj .av{margin-left:auto;width:22px;height:22px;border-radius:50%;background:var(--bg);border:1px solid var(--linea);display:grid;place-items:center;font-size:10.5px;font-weight:700;color:var(--tx-2)}
.tj .tr{margin-top:8px;font-size:12px;color:var(--ma);display:flex;gap:6px}
.barra-p{height:3px;background:var(--bg);border-radius:2px;margin:8px 0 0;overflow:hidden}
.barra-p i{display:block;height:100%;background:var(--ac);border-radius:2px;transition:width .5s var(--e-out)}

/* ---------- ficha del expediente (cajón) ---------- */
.velo{position:fixed;inset:0;background:#10182833;z-index:40;animation:velo .2s ease}
.cajon{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--bg);z-index:41;box-shadow:var(--sh-2);overflow-y:auto;overscroll-behavior:contain;animation:cajon .32s var(--e-out)}
.cajon>.c-head{background:var(--card);padding:16px 18px 14px;border-bottom:1px solid var(--linea)}
.cajon>.c-cuerpo{padding:16px 18px 40px}
.c-head .fila1{display:flex;align-items:center;gap:8px}
.c-head .cerrar{margin-left:auto;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--tx-3);font-size:18px}
.c-head .cerrar:hover{background:var(--bg)}
.c-head h3{margin:8px 0 2px;font-size:19px;letter-spacing:-.01em}
.c-head p{margin:0;color:var(--tx-2);font-size:13.5px}
.relojes{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:14px 0 0}
.reloj{border:1px solid var(--linea);border-radius:9px;padding:9px 11px;background:var(--card)}
.reloj .n{font-family:var(--mono);font-size:22px;font-weight:650;line-height:1.1}
.reloj .u{font-size:11.5px;color:var(--tx-3)}
.reloj.rojo{border-color:#b4231850;background:var(--ma-sv)}.reloj.rojo .n{color:var(--ma)}
.reloj.ambar{border-color:#b4530950;background:var(--ad-sv)}.reloj.ambar .n{color:var(--ad)}
.reloj.verde .n{color:var(--ok)}
.avanzar{margin:16px 0 4px;display:flex;gap:8px}
.avanzar .btn{flex:1}
.ayuda{font-size:12.5px;color:var(--tx-3);margin:6px 0 0}
.tranca{margin-top:12px;padding:9px 12px;border-radius:8px;background:var(--ma-sv);border:1px solid #b4231830;color:var(--ma);font-size:13px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--linea);margin:18px 0 14px;overflow-x:auto}
.tabs button{padding:8px 11px;font-size:13px;color:var(--tx-3);position:relative;white-space:nowrap}
.tabs button.on{color:var(--tx);font-weight:600}
.tabs button.on::after{content:"";position:absolute;left:6px;right:6px;bottom:-1px;height:2px;background:var(--ac)}
.pasos{list-style:none;margin:0;padding:0;position:relative}
.pasos li{display:grid;grid-template-columns:26px 1fr auto;gap:10px;padding:7px 0;align-items:start;position:relative}
.pasos li::before{content:"";position:absolute;left:12px;top:30px;bottom:-8px;width:2px;background:var(--linea)}
.pasos li:last-child::before{display:none}
.pasos .bol{width:26px;height:26px;border-radius:50%;border:2px solid var(--linea-f);background:var(--card);display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--tx-3);position:relative;z-index:1}
.pasos li.hecho .bol{background:var(--ok);border-color:var(--ok);color:#fff}
.pasos li.hecho::before{background:var(--ok)}
.pasos li.actual .bol{border-color:var(--ac);color:var(--ac);box-shadow:0 0 0 4px var(--ac-sv2)}
.pasos li.saltado .bol{border-style:dashed}
.pasos .nm{font-size:14px;font-weight:550;padding-top:2px}
.pasos li:not(.hecho):not(.actual) .nm{color:var(--tx-3);font-weight:450}
.pasos .dt{font-size:12px;color:var(--tx-3)}
.pasos .fe{font-family:var(--mono);font-size:11.5px;color:var(--tx-3);padding-top:4px;white-space:nowrap}
.lista-c{background:var(--card);border:1px solid var(--linea);border-radius:var(--r)}
.lista-c .it{display:flex;align-items:center;gap:10px;padding:10px 13px;border-top:1px solid var(--linea);font-size:14px}
.lista-c .it:first-child{border-top:0}
.lista-c .it .q{flex:1;min-width:0}
.lista-c .it small{display:block;color:var(--tx-3);font-size:12px}
.lista-c .it .m{font-family:var(--mono);font-size:13.5px}
.chk{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--linea-f);display:grid;place-items:center;flex:none;font-size:13px;color:#fff;background:var(--card);transition:background .15s,border-color .15s}
.chk.on{background:var(--ok);border-color:var(--ok)}
.totales{margin-top:10px;background:var(--card);border:1px solid var(--linea);border-radius:var(--r);padding:6px 13px}
.totales .l{display:flex;justify-content:space-between;padding:6px 0;font-size:14px}
.totales .l span:last-child{font-family:var(--mono)}
.totales .l.t{border-top:1px solid var(--linea);font-weight:650;font-size:15px;margin-top:4px;padding-top:9px}
.totales .l.ok span:last-child{color:var(--ok)}.totales .l.mal span:last-child{color:var(--ma)}
.dato{display:grid;grid-template-columns:130px 1fr;gap:6px 12px;font-size:13.5px}
.dato dt{color:var(--tx-3)}.dato dd{margin:0}

/* ---------- tablas ---------- */
.tw{overflow-x:auto;background:var(--card);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--sh)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);font-weight:500;padding:10px 13px;border-bottom:1px solid var(--linea);background:var(--card-2);white-space:nowrap}
td{padding:11px 13px;border-top:1px solid var(--linea);vertical-align:middle}
tbody tr:first-child td{border-top:0}
td.n,th.n{text-align:right;font-family:var(--mono);white-space:nowrap}
tr.lk{cursor:pointer}tr.lk:hover td{background:var(--card-2)}
td small{display:block;color:var(--tx-3);font-size:12px}

/* ---------- hojas (formularios cortos) ---------- */
.hoja-velo{position:fixed;inset:0;background:#10182840;z-index:60;display:grid;place-items:center;padding:16px;animation:velo .18s ease}
.hoja{background:var(--card);border-radius:14px;width:min(500px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;box-shadow:var(--sh-2);animation:hoja .28s var(--e-out)}
.hoja>header{padding:18px 20px 4px}
.hoja>header h3{margin:0;font-size:18px}
.hoja>header p{margin:4px 0 0;color:var(--tx-3);font-size:13px}
.hoja>.cu{padding:12px 20px 20px;display:grid;gap:12px}
@media(max-width:600px){.hoja-velo{place-items:end stretch;padding:0}.hoja{border-radius:16px 16px 0 0;width:100%;animation:sube .3s var(--e-out)}}
.f{display:grid;gap:5px}
.f>span{font-size:12.5px;color:var(--tx-2);font-weight:500}
.f input,.f select,.f textarea{border:1px solid var(--linea-f);border-radius:8px;padding:9px 11px;background:var(--card);font-size:14.5px;width:100%}
.f input:focus,.f select:focus,.f textarea:focus,.busca:focus{outline:2px solid var(--ac-sv2);border-color:var(--ac)}
.gr2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--bg);border:1px solid var(--linea);border-radius:9px;padding:3px}
.seg button{padding:8px 6px;border-radius:7px;font-size:13px;color:var(--tx-2)}
.seg button.on{background:var(--card);box-shadow:var(--sh);color:var(--tx);font-weight:600}
.canales{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.canales button{border:1.5px solid var(--linea);border-radius:10px;padding:14px 8px;font-weight:600;display:grid;gap:6px;justify-items:center;font-size:14px}
.canales button .punto{width:14px;height:14px}
.canales .verde{color:var(--ok)}.canales .ambar{color:var(--ad)}.canales .rojo{color:var(--ma)}
.canales button.on{background:currentColor}
.canales button.on span{color:#fff}.canales button.on .punto{background:#fff}
.nota-h{font-size:12.5px;color:var(--tx-3);background:var(--bg);border-radius:8px;padding:9px 11px}

/* ---------- avisos ---------- */
.aviso{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;background:var(--tx);color:#fff;padding:11px 14px 11px 16px;border-radius:10px;font-size:14px;box-shadow:var(--sh-2);display:flex;gap:12px;align-items:center;max-width:calc(100% - 28px);animation:sube .3s var(--e-out)}
.aviso.ok::before{content:"✓";color:#5ee0a4;font-weight:700}
.aviso.mal{background:var(--ma)}
.aviso button{color:#9db6ff;font-weight:600;font-size:13px;white-space:nowrap}

/* ---------- bitácora ---------- */
.log .it{display:flex;gap:10px;padding:9px 14px;border-top:1px solid var(--linea);font-size:13px;align-items:baseline}
.log .it:first-child{border-top:0}
.log .h{font-family:var(--mono);font-size:11px;color:var(--tx-3);width:38px;flex:none}
.log .tx{flex:1;min-width:0}
.log .it.des .tx{text-decoration:line-through;color:var(--tx-3)}

/* ---------- vista del importador ---------- */
.seg-cli{max-width:560px;margin:0 auto;padding:26px 18px 40px}
.seg-cli .marco{background:var(--card);border:1px solid var(--linea);border-radius:14px;box-shadow:var(--sh);padding:20px}
.seg-cli .pie{text-align:center;margin-top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3)}
.seg-cli .pie a{color:inherit;text-decoration:none;border-bottom:1px solid var(--linea-f)}
.seg-cli .pie a:hover{color:var(--tx-2);border-bottom-color:var(--tx-3)}
.progreso{display:flex;gap:4px;margin:14px 0 6px}
.progreso i{flex:1;height:6px;border-radius:3px;background:var(--linea)}
.progreso i.h{background:var(--ok)}.progreso i.a{background:var(--ac)}

/* ---------- movimiento: una curva, nada mayor a 400 ms ---------- */
@keyframes velo{from{opacity:0}}
@keyframes cajon{from{transform:translateX(40px);opacity:0}}
@keyframes hoja{from{transform:translateY(12px) scale(.98);opacity:0}}
@keyframes sube{from{transform:translate(-50%,16px);opacity:0}}
@media(max-width:600px){@keyframes sube{from{transform:translateY(30px);opacity:0}}}
@keyframes entra{from{transform:translateY(6px);opacity:0}}
#vista.entra>*{animation:entra .35s var(--e-out) backwards}
#vista.entra>*:nth-child(2){animation-delay:.03s}#vista.entra>*:nth-child(3){animation-delay:.06s}#vista.entra>*:nth-child(4){animation-delay:.09s}
@keyframes llega{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ac) 35%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
.tj.movido{animation:llega .9s ease-out 2}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:700px){.cajon{width:100%}.dato{grid-template-columns:110px 1fr}.top{gap:8px}.marca span{display:none}.rol select{max-width:120px}}
@media print{.proto,.top,.nav,.velo,.cajon,.aviso{display:none}}
@media(max-width:700px){
  .proto span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .filtros .chips:first-child,.fases-tab{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-14px;padding-right:14px}
  .filtros .chips:first-child::-webkit-scrollbar,.fases-tab::-webkit-scrollbar{display:none}
  .filtros>.chips:last-child{width:100%;flex-wrap:nowrap}.busca{min-width:0;flex:1}
  .cab .btn{width:100%}
  .kpi .v{font-size:21px}
}

/* ---------- mapa 3D ---------- */
.wrap.lleno{padding:0;height:100%}
.mapa-wrap{position:relative;height:100%;min-height:480px;overflow:hidden;background:radial-gradient(120% 90% at 70% 10%,#ffffff 0%,#eef2f7 55%,#e3e9f0 100%)}
.mapa3d{position:absolute;inset:0;outline:none}
.lienzo3d{display:block;width:100%;height:100%;touch-action:none}
.capa3d{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.et3d{position:absolute;left:0;top:0;pointer-events:auto;display:flex;align-items:center;gap:6px;padding:4px 9px 4px 7px;border-radius:999px;background:#ffffffee;
  border:1px solid var(--linea);box-shadow:0 4px 14px -6px #10182844;font-size:11.5px;white-space:nowrap;color:var(--tx);transition:transform .15s var(--e-out),box-shadow .15s,opacity .2s;will-change:transform}
.et3d::after{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;background:inherit;border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);transform:translateX(-50%) rotate(45deg)}
.et3d .pt,.pt{width:8px;height:8px;border-radius:50%;background:var(--tx-3);flex:none;display:inline-block}
.pt.verde,.et3d.verde .pt{background:var(--ok)}.pt.ambar,.et3d.ambar .pt{background:var(--ad)}.pt.rojo,.et3d.rojo .pt{background:var(--ma)}
.et3d.rojo .pt{animation:late 1.6s infinite}
.et3d b{font-family:var(--mono);font-size:10.5px;font-weight:700}
.et3d small{color:var(--tx-3);font-size:11px;max-width:0;overflow:hidden;transition:max-width .25s var(--e-out)}
.et3d:hover,.et3d.hov{z-index:5;box-shadow:0 8px 22px -8px #10182866}
.et3d:hover small,.et3d.hov small,.et3d.sel small{max-width:260px}
.et3d.sel{z-index:6;background:var(--ac);border-color:var(--ac);color:#fff;box-shadow:0 10px 26px -8px color-mix(in srgb,var(--ac) 60%,transparent)}
.et3d.sel small{color:#ffffffcc}.et3d.sel .pt{box-shadow:0 0 0 2px #ffffff88}
.et3d.off{opacity:.22;pointer-events:none}
.capa3d.lejos .et3d:not(.sel):not(.hov){padding:2px 7px 2px 6px;font-size:10px}
.capa3d.lejos .et3d:not(.sel):not(.hov) b{font-size:9.5px}
.et3d.zona{pointer-events:none;background:#ffffffd0;border-color:transparent;box-shadow:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-2);padding:3px 8px}
.et3d.zona::after{display:none}
.et3d.zona.sec{background:#ffffff99;color:var(--tx-3)}
.et3d.zona.cli{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:10.5px;background:#f1efeadd;color:var(--tx-2)}
.et3d.zona.cli.lejos{opacity:0}
@keyframes late{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ma) 60%,transparent)}100%{box-shadow:0 0 0 7px transparent}}
/* panel de cargas */
.mapa-panel{position:absolute;left:14px;top:14px;bottom:14px;width:300px;display:flex;flex-direction:column;background:#ffffffe8;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--linea);border-radius:14px;box-shadow:var(--sh-2);overflow:hidden}
.m-cab{display:flex;align-items:center;gap:10px;padding:12px 14px 10px;border-bottom:1px solid var(--linea)}
.m-cab b{display:block;font-size:16px;font-weight:650}.m-cab span{display:block;font-size:12px;color:var(--tx-3)}.m-cab i.rojo{font-style:normal;color:var(--ma);font-weight:600}
.m-asa{display:none;width:38px;height:5px;border-radius:3px;background:var(--linea-f);margin:0 auto}
.m-pista{margin:0;padding:10px 14px;font-size:12.5px;color:var(--tx-3);border-bottom:1px solid var(--linea)}
.m-sel{padding:12px 14px;border-bottom:1px solid var(--linea);background:var(--ac-sv)}
.m-sel-cab{display:flex;align-items:center;gap:7px}.m-sel-cab b{font-size:11.5px}.m-x{margin-left:auto;width:26px;height:26px;border-radius:6px;color:var(--tx-3)}.m-x:hover{background:#ffffff}
.m-sel h3{margin:6px 0 1px;font-size:15.5px}.m-sel p{margin:0 0 8px;font-size:12.5px;color:var(--tx-2)}
.m-sel-est{display:flex;flex-wrap:wrap;gap:5px}
.m-sel-acc{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.m-filtros{padding:9px 14px;border-bottom:1px solid var(--linea)}
.m-lista{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 6px 8px}
.m-zona{margin-top:6px}
.m-zona-t{width:100%;display:flex;justify-content:space-between;align-items:center;padding:6px 8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);border-radius:7px}
.m-zona-t:hover{background:var(--ac-sv)}.m-zona-t b{font-family:var(--mono);font-size:11px;background:var(--bg);border:1px solid var(--linea);border-radius:999px;padding:0 6px;color:var(--tx-2)}
.m-item{width:100%;display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;text-align:left;transition:background .12s}
.m-item:hover{background:var(--card)}.m-item.sel{background:var(--ac);color:#fff}.m-item.sel small,.m-item.sel .mono{color:#ffffffcc}.m-item.sel .av{background:#ffffff33;border-color:transparent;color:#fff}
.m-item .q{flex:1;min-width:0}.m-item .q b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-item .q .mono{font-weight:400;font-size:10.5px;color:var(--tx-3)}
.m-item small{display:block;font-size:11.5px;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-item .av{width:22px;height:22px;border-radius:50%;background:var(--bg);border:1px solid var(--linea);display:grid;place-items:center;font-size:10.5px;font-weight:700;color:var(--tx-2);flex:none}
.m-ley{display:flex;flex-wrap:wrap;gap:5px 11px;padding:9px 14px;border-top:1px solid var(--linea);font-size:11px;color:var(--tx-2)}
.m-ley i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.m-ley .verde{background:#2f9e6b}.m-ley .ambar{background:#d28a2a}.m-ley .rojo{background:#d2463b}.m-ley .marca{background:var(--ac)}
/* controles de cámara */
.mapa-ctl{position:absolute;right:14px;bottom:14px;display:grid;grid-template-columns:1fr 1fr;gap:3px;background:#ffffffe8;backdrop-filter:blur(12px);border:1px solid var(--linea);border-radius:12px;padding:5px;box-shadow:var(--sh)}
.mapa-ctl button{display:grid;justify-items:center;gap:1px;width:62px;padding:6px 4px 5px;border-radius:8px;color:var(--tx-2)}
.mapa-ctl button:hover{background:var(--bg);color:var(--tx)}.mapa-ctl button.on{background:var(--ac-sv);color:var(--ac-tx)}
.mapa-ctl .ic{font-size:17px;line-height:1.1}.mapa-ctl .tx{font-size:9.5px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.mapa-ayuda{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-size:11.5px;color:var(--tx-3);background:#ffffffcc;padding:4px 10px;border-radius:999px;pointer-events:none;white-space:nowrap}
/* color de la agencia */
.colores{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.col-m{width:30px;height:30px;border-radius:8px;border:2px solid #fff;box-shadow:0 0 0 1px var(--linea-f)}
.col-m.on{box-shadow:0 0 0 2px var(--tx)}
.colores input[type=color]{width:40px;height:32px;border:1px solid var(--linea-f);border-radius:8px;padding:2px;background:var(--card)}
@media(max-width:1100px){.mapa-panel{width:270px}}
@media(max-width:700px){
  .mapa-wrap{min-height:0}
  .mapa-panel{left:0;right:0;top:auto;bottom:0;width:auto;max-height:42%;border-radius:16px 16px 0 0;border-bottom:0;transition:max-height .3s var(--e-out)}
  .mapa-panel:not(.abierto){max-height:none;height:auto}
  .mapa-panel:not(.abierto) .m-lista,.mapa-panel:not(.abierto) .m-ley,.mapa-panel:not(.abierto) .m-filtros,.mapa-panel:not(.abierto) .m-pista{display:none}
  .m-cab{flex-wrap:wrap;padding-top:8px}.m-asa{display:block;width:100%;background:none;position:relative;height:14px}
  .m-asa::before{content:"";position:absolute;left:50%;top:4px;width:38px;height:5px;border-radius:3px;background:var(--linea-f);transform:translateX(-50%)}
  .m-cab>div{width:100%}
  .mapa-ctl{bottom:auto;top:12px;right:10px;grid-template-columns:1fr;gap:2px;padding:4px}
  .mapa-ctl button{width:44px;padding:5px 2px}.mapa-ctl .tx{display:none}
  .mapa-ayuda{display:none}
  .et3d{font-size:10.5px;padding:3px 7px 3px 6px}
}

/* "by Paenga" del encabezado: enlace discreto al catálogo de sistemas. */
.marca a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.marca a:hover{border-bottom-color:currentColor}