@font-face{font-family:Barlow;font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:700;font-display:swap;src:url(fonts/barlow-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:500;font-display:swap;src:url(fonts/barlow-condensed-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}

/* Tinta de blindado, acero, papel de bitácora y amarillo de precinto */
:root{
 --ink:#18263C;--ink-2:#2B3D58;--steel:#5D6B7E;--steel-2:#8794A6;
 --paper:#E6EAEF;--sheet:#FAFBFC;--rule:#CDD4DD;--rule-2:#E3E7EC;
 --seal:#F2C230;--seal-deep:#D9A60F;--seal-ink:#3D3000;--seal-wash:#FBF1CC;
 --late:#B8322A;--late-wash:#F7E3E0;--ok:#2E7A4D;--ok-wash:#E1EFE6;
 --amber:#B4741A;--amber-wash:#F6EBD8;--pause:#4E6A97;--pause-wash:#E3E9F3;
 --cond:"Barlow Condensed","Arial Narrow",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:15px/1.5 Barlow,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}
b,strong{font-weight:600}
a{color:var(--ink-2)}
:focus-visible{outline:3px solid var(--seal);outline-offset:2px}

/* Barra superior */
.bar-top{background:var(--ink);color:#fff;display:flex;align-items:center;gap:18px;padding:0 28px;min-height:64px;flex-wrap:wrap}
.plate{background:#fff;border-radius:4px;height:40px;padding:0 10px;display:flex;align-items:center}
.plate img{height:28px;display:block}
.bar-top h1{font:600 23px/1 var(--cond);letter-spacing:.2px;white-space:nowrap}
.bar-top nav{display:flex;gap:18px;flex-wrap:wrap}
.navlink{color:#D5DDE8;font-size:14.5px;font-weight:500;padding:20px 2px 18px;border-bottom:3px solid transparent;text-decoration:none}
.navlink:hover{color:#fff}
.navlink.on{color:#fff;border-color:var(--seal)}
.navlink .c{font-family:var(--cond);color:var(--seal);margin-left:4px}
.me{margin-left:auto;display:flex;align-items:center;gap:12px;text-align:right;line-height:1.25}
.me b{display:block;font-size:14px}
.me span{font-size:12.5px;color:#AEB9C9}
.me a{color:#AEB9C9;font-size:12.5px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--ink-2);display:flex;align-items:center;justify-content:center;font:600 15px var(--cond);color:var(--seal);border:1px solid #42557A;flex:0 0 36px}

.page{padding:26px 28px 40px;max-width:1440px;margin:0 auto}
.sheet{background:var(--sheet);border:1px solid var(--rule);border-radius:10px}
.pad{padding:22px 26px}
h2.t{font:600 30px/1.15 var(--cond);letter-spacing:.1px}
h3.t{font:600 20px/1.2 var(--cond)}
.hint{color:var(--steel);font-size:14px}
.tiny{font-size:12.5px;color:var(--steel)}
.k{color:var(--steel);font-size:13px}
.num{font-family:var(--cond);font-variant-numeric:tabular-nums}

/* Mensajes */
.aviso{border-radius:6px;padding:12px 16px;margin-bottom:18px;font-size:14.5px;border-left:4px solid var(--ok);background:var(--ok-wash)}
.aviso.error{border-color:var(--late);background:var(--late-wash)}
.aviso.info{border-color:var(--pause);background:var(--pause-wash)}

/* Botones y formularios */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--rule);background:#fff;color:var(--ink);padding:8px 14px;border-radius:5px;font:600 14px Barlow,Arial,sans-serif;white-space:nowrap;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--steel-2)}
.btn.go{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.go:hover{background:var(--ink-2)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.lg{padding:12px 22px;font-size:15.5px}
.btn.quiet{border-color:transparent;background:transparent;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;padding-left:4px;padding-right:4px}
.btn[disabled]{opacity:.55;cursor:wait}
label.f{display:block;font-size:13px;color:var(--steel);margin-bottom:5px;font-weight:500}
.inp,select.inp,textarea.inp{width:100%;background:#fff;border:1px solid var(--rule);border-radius:5px;padding:9px 11px;font:15px Barlow,Arial,sans-serif;color:var(--ink)}
textarea.inp{resize:vertical;line-height:1.5}
.inp:focus{border-color:var(--ink);outline:3px solid var(--seal-wash)}
.campo{margin-bottom:14px}
.seg{display:flex;border:1px solid var(--rule);border-radius:5px;overflow:hidden;background:#fff}
.seg label{flex:1;text-align:center;padding:9px 6px;font-size:14px;font-weight:500;border-right:1px solid var(--rule);cursor:pointer}
.seg label:last-child{border-right:0}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg input:checked+span{font-weight:700}
.seg label:has(input:checked){background:var(--seal-wash);box-shadow:inset 0 -3px 0 var(--seal)}
.seg label:has(input:focus-visible){outline:3px solid var(--seal);outline-offset:-3px}

/* Precinto: el folio como sello numerado */
.seal{display:inline-flex;align-items:center;gap:12px;background:var(--seal);color:var(--seal-ink);border-radius:4px 14px 14px 4px;padding:6px 18px 6px 12px;box-shadow:inset 0 -2px 0 var(--seal-deep)}
.seal:before{content:"";width:12px;height:12px;border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 2px rgba(0,0,0,.35);flex:0 0 12px}
.seal .n{font:700 26px/1 var(--cond);letter-spacing:1.5px;font-variant-numeric:tabular-nums}
.seal .l{font-size:11.5px;line-height:1.15;font-weight:600;opacity:.8}
.seal.sm{padding:3px 12px 3px 8px;gap:8px;border-radius:3px 10px 10px 3px}
.seal.sm:before{width:8px;height:8px;flex-basis:8px}
.seal.sm .n{font-size:17px;letter-spacing:1px}
.folio{font:700 17px/1 var(--cond);letter-spacing:.8px;font-variant-numeric:tabular-nums;color:var(--ink);text-decoration:none}

/* Prioridad (barras) y estatus (punto) */
.prio{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;white-space:nowrap}
.prio i{display:inline-flex;gap:2px;align-items:flex-end;height:14px}
.prio i:before,.prio i:after,.prio i b,.prio i em{content:"";display:block;width:4px;background:var(--rule)}
.prio i:before{height:5px}.prio i b{height:8px}.prio i em{height:11px}.prio i:after{height:14px}
.prio.BAJA i:before{background:var(--ink)}
.prio.MEDIA i:before,.prio.MEDIA i b{background:var(--ink)}
.prio.ALTA i:before,.prio.ALTA i b,.prio.ALTA i em{background:var(--late)}
.prio.CRITICA i:before,.prio.CRITICA i b,.prio.CRITICA i em,.prio.CRITICA i:after{background:var(--late)}
.st{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;white-space:nowrap}
.st:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--steel-2)}
.st.NUEVO:before{background:var(--seal-deep);box-shadow:0 0 0 3px var(--seal-wash)}
.st.EN_ATENCION:before{background:var(--ink-2)}
.st.ESPERA_USUARIO,.st.ESPERA_PROVEEDOR,.st.EN_COMPRA,.st.POR_CANCELAR{color:var(--pause)}
.st.POR_CANCELAR:before{background:var(--late);border-radius:2px}
.st.ESPERA_USUARIO:before,.st.ESPERA_PROVEEDOR:before,.st.EN_COMPRA:before{background:var(--pause);border-radius:2px}
.st.RESUELTO:before{background:var(--ok)}

/* Reloj de SLA */
.clock{display:flex;flex-direction:column;gap:5px;min-width:170px}
.clock .txt{font-size:14px;font-weight:600}
.track{position:relative;height:6px;background:var(--rule-2);border-radius:3px}
.track i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--ok)}
.track:after{content:"";position:absolute;left:75%;top:-3px;bottom:-3px;width:1.5px;background:var(--steel-2)}
.track.y i{background:var(--amber)}.track.r i{background:var(--late)}.track.p i{background:var(--pause)}
.c-r{color:var(--late)}.c-y{color:var(--amber)}.c-g{color:var(--ok)}.c-p{color:var(--pause)}

/* Tablas */
table{width:100%;border-collapse:collapse}
th{font-size:12.5px;font-weight:600;color:var(--steel);text-align:left;padding:11px 14px;border-bottom:1.5px solid var(--ink);white-space:nowrap}
td{padding:14px 14px;border-bottom:1px solid var(--rule-2);vertical-align:top;font-size:14px}
tr:last-child td{border-bottom:0}
tr.late td{background:var(--late-wash)}
tr.late td:first-child{box-shadow:inset 4px 0 0 var(--late)}
.sub{font-size:12.5px;color:var(--steel);margin-top:2px}
.tabla-scroll{overflow-x:auto}

/* Bitácora */
.tl{list-style:none;margin-top:12px}
.tl li{display:grid;grid-template-columns:110px 18px 1fr;gap:12px;position:relative;padding-bottom:16px}
.tl li:after{content:"";position:absolute;left:130px;top:16px;bottom:-2px;width:1.5px;background:var(--rule)}
.tl li:last-child:after{display:none}
.tl .d{font:600 14px/1.25 var(--cond);color:var(--steel);text-align:right;padding-top:1px}
.tl .dot{width:12px;height:12px;border-radius:50%;margin:4px 0 0 3px;background:var(--sheet);border:2.5px solid var(--ink);z-index:1}
.tl .b{font-size:14.5px;font-weight:600}
.tl .m{font-size:13px;color:var(--steel);margin-top:2px}
.tl .msg{background:#fff;border:1px solid var(--rule);border-radius:5px;padding:9px 12px;margin-top:6px;font-size:14px;max-width:70ch;white-space:pre-wrap}
.tl .msg.int{background:var(--amber-wash);border-color:#E7D2AE}

dl.kv{display:grid;grid-template-columns:118px 1fr;gap:8px 12px;font-size:14px;margin-top:10px}
dl.kv dt{color:var(--steel)}dl.kv dd{font-weight:600;overflow-wrap:anywhere}

.vacio{padding:40px 20px;text-align:center;color:var(--steel)}

@media (max-width:900px){
 .bar-top{padding:8px 16px;gap:10px}
 .bar-top h1{font-size:20px}
 .navlink{padding:8px 2px}
 .me{margin-left:0;width:100%;justify-content:flex-end}
 .page{padding:16px}
 .pad{padding:16px}
 .tl li{grid-template-columns:76px 14px 1fr;gap:8px}
 .tl li:after{left:90px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}