:root{
  --bg:#f5f6f8; --panel:#fff; --texto:#1c2430; --suave:#667085; --linea:#e3e6ec;
  --azul:#1d4ed8; --azul-suave:#eef2ff; --verde:#047857; --verde-suave:#e7f6f0;
  --ambar:#b45309; --ambar-suave:#fdf3e3; --rojo:#b42318; --rojo-suave:#fdecea;
  --gris-suave:#eef0f4; --radio:10px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--texto);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}

.top{display:flex;align-items:center;gap:16px;background:#0f172a;color:#fff;padding:0 16px;min-height:56px;flex-wrap:wrap}
.marca{color:#fff;font-weight:600;display:flex;align-items:center;gap:8px;white-space:nowrap}
.logo{background:var(--azul);width:28px;height:28px;border-radius:6px;display:grid;place-items:center;font-size:12px;font-weight:700}
.nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.nav a{color:#cbd5e1;padding:6px 9px;border-radius:6px;font-weight:500;font-size:13.5px;white-space:nowrap}
.nav a:hover{background:#1e293b;color:#fff;text-decoration:none}
.nav a.on{background:var(--azul);color:#fff}
.usuario{display:flex;align-items:center;gap:12px;color:#94a3b8;font-size:12px}
.salir{color:#cbd5e1}

.cont{max-width:1240px;margin:0 auto;padding:22px 20px 60px}
h1{font-size:22px;margin:0 0 4px}
h2{font-size:16px;margin:26px 0 10px}
.sub{color:var(--suave);margin:0 0 18px}

.panel{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:18px;margin-bottom:18px}
.panel h3{margin:0 0 12px;font-size:14px;color:var(--suave);text-transform:uppercase;letter-spacing:.04em}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.kpi{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:14px 16px}
.kpi .n{font-size:26px;font-weight:650;letter-spacing:-.02em}
.kpi .l{color:var(--suave);font-size:12px;margin-top:2px}
.kpi.alerta .n{color:var(--rojo)}
.kpi.aviso .n{color:var(--ambar)}

table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--linea);vertical-align:top}
th{background:#fafbfc;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--suave);font-weight:600}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fafbfd}
.tabla-scroll{overflow-x:auto}
td.num,th.num{text-align:right}
.vacio{padding:28px;text-align:center;color:var(--suave);background:var(--panel);border:1px dashed var(--linea);border-radius:var(--radio)}

.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap}
.badge.gris{background:var(--gris-suave);color:#475467}
.badge.azul{background:var(--azul-suave);color:var(--azul)}
.badge.verde{background:var(--verde-suave);color:var(--verde)}
.badge.ambar{background:var(--ambar-suave);color:var(--ambar)}
.badge.rojo{background:var(--rojo-suave);color:var(--rojo)}

.btn{display:inline-block;background:var(--azul);color:#fff;border:1px solid var(--azul);
  padding:8px 14px;border-radius:8px;font-weight:550;cursor:pointer;font-size:13.5px}
.btn:hover{background:#1a3fb8;text-decoration:none}
.btn.sec{background:#fff;color:var(--texto);border-color:var(--linea)}
.btn.sec:hover{background:#f3f4f6}
.btn.peligro{background:var(--rojo);border-color:var(--rojo)}
.btn.chico{padding:5px 10px;font-size:12.5px}
.acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.crece{flex:1}

form .campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
label{display:block;font-size:12.5px;color:var(--suave);margin-bottom:4px;font-weight:550}
input[type=text],input[type=date],input[type=number],input[type=password],input[type=search],select,textarea{
  width:100%;padding:8px 10px;border:1px solid #d3d8e0;border-radius:8px;background:#fff;font:inherit;color:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azul-suave);border-color:var(--azul)}
textarea{min-height:80px;resize:vertical}
.ancho-total{grid-column:1/-1}
fieldset{border:1px solid var(--linea);border-radius:var(--radio);padding:16px;margin:0 0 16px}
legend{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--suave);padding:0 6px;font-weight:600}

.flash{padding:11px 14px;border-radius:8px;margin-bottom:16px;font-weight:500}
.flash.ok{background:var(--verde-suave);color:var(--verde);border:1px solid #b7e3d2}
.flash.error{background:var(--rojo-suave);color:var(--rojo);border:1px solid #f3c6c2}
.flash.aviso{background:var(--ambar-suave);color:var(--ambar);border:1px solid #f0d9b0}

.filtros{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end;
  background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:14px;margin-bottom:16px}

.ficha{display:grid;grid-template-columns:1fr 260px;gap:18px}
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.dato .l{font-size:11.5px;color:var(--suave);text-transform:uppercase;letter-spacing:.03em}
.dato .v{font-weight:550;margin-top:2px;word-break:break-word}
.qr-caja{text-align:center}
.qr-caja svg{width:190px;max-width:100%;height:auto}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

.login-caja{max-width:360px;margin:9vh auto;background:#fff;border:1px solid var(--linea);
  border-radius:14px;padding:28px}
.login-caja h1{font-size:19px;margin-bottom:18px}
.login-caja .campo{margin-bottom:14px}

.paginacion{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.paginacion a,.paginacion span{padding:5px 10px;border:1px solid var(--linea);border-radius:6px;background:#fff}
.paginacion .actual{background:var(--azul);color:#fff;border-color:var(--azul)}

.linea-tiempo{list-style:none;margin:0;padding:0}
.linea-tiempo li{border-left:2px solid var(--linea);padding:0 0 14px 14px;position:relative}
.linea-tiempo li:before{content:'';position:absolute;left:-5px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--azul)}
.linea-tiempo .cuando{font-size:12px;color:var(--suave)}

.pie{text-align:center;color:var(--suave);font-size:12px;padding:18px}

/* Etiquetas QR imprimibles */
.hoja{background:#fff;padding:10mm;max-width:210mm;margin:0 auto}
.rej-etiquetas{display:grid;grid-template-columns:repeat(3,1fr);gap:4mm}
.etq{border:1px dashed #b9c0cc;border-radius:3mm;padding:3mm;display:flex;gap:3mm;align-items:center;
  min-height:32mm;page-break-inside:avoid}
.etq .qr{flex:0 0 auto}
.etq .qr svg{width:26mm;height:26mm;display:block}
.etq .txt{font-size:8pt;line-height:1.35;overflow:hidden;min-width:0}
.etq .txt .et{font-weight:700;font-size:9.5pt;font-family:ui-monospace,Menlo,Consolas,monospace;white-space:nowrap;letter-spacing:-.2px}
.etq .txt .em{color:#475467}

.vale{background:#fff;max-width:190mm;margin:0 auto;padding:14mm}
.vale h1{font-size:18pt;margin:0}
.vale .enc{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #0f172a;padding-bottom:10px;margin-bottom:18px}
.vale table{border:1px solid #cbd2dd}
.vale .firmas{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:60px;text-align:center}
.vale .firmas div{border-top:1px solid #333;padding-top:6px;font-size:10pt}
.leyenda{font-size:9.5pt;color:#475467;line-height:1.6;margin-top:22px}

@media print{
  .top,.pie,.no-imprimir,.acciones{display:none!important}
  body{background:#fff}
  .cont{padding:0;max-width:none}
  .hoja,.vale{padding:0;max-width:none}
  .etq{border:1px solid #ccc}
}
@media (max-width:820px){
  .ficha{grid-template-columns:1fr}
  .top{height:auto;padding:10px 14px}
}

/* --- Selector de empresa en la cabecera --- */
.marca-caja{display:flex;align-items:center;gap:10px}
.marca-txt{white-space:nowrap}
.logo-emp{height:30px;max-width:150px;object-fit:contain;display:block;
  background:#fff;border-radius:5px;padding:3px 6px}
.selector-emp{position:relative}
.chip-emp{background:#1e293b;color:#cbd5e1;border:1px solid #334155;border-radius:20px;
  padding:4px 12px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.chip-emp:hover{background:#273449;color:#fff}
.chip-emp .flecha{font-size:10px;opacity:.7}
.menu-emp{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:50;
  background:#fff;border:1px solid var(--linea);border-radius:10px;min-width:270px;
  box-shadow:0 12px 30px rgba(15,23,42,.18);overflow:hidden}
.menu-emp.abierto{display:block}
.menu-emp a{display:flex;align-items:center;gap:9px;padding:9px 13px;color:var(--texto);font-size:13.5px}
.menu-emp a:hover{background:#f4f6fa;text-decoration:none}
.menu-emp a.on{background:var(--azul-suave);color:var(--azul);font-weight:600}
.menu-emp img{height:22px;max-width:64px;object-fit:contain}
.menu-emp .punto{width:10px;height:10px;border-radius:50%;flex:0 0 auto}

/* --- Logos en pantallas y documentos --- */
.tarjeta-emp{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--linea);
  border-radius:var(--radio);background:#fff}
.tarjeta-emp img{height:44px;max-width:130px;object-fit:contain}
.tarjeta-emp .sin-logo{width:44px;height:44px;border-radius:8px;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:14px}
.logo-doc{max-height:56px;max-width:190px;object-fit:contain;display:block;margin-bottom:6px}
.enc-reporte{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  border-bottom:2px solid #0f172a;padding-bottom:10px;margin-bottom:16px}
.enc-reporte .quien{text-align:right;font-size:12px;color:var(--suave)}