/* ============================================================
   UPPER LOGISTICS - WAREHOUSE VMS
   Paleta institucional: NARANJA / AZUL MARINO / GRIS
   Rojo y verde reservados para disponibilidad de cortina.
   ============================================================ */
:root{
  --naranja:#F26A21; --naranja-osc:#C6520F; --naranja-cl:#FFF1E8;
  --azul:#12294B; --azul-cl:#1D3B69; --azul-xcl:#E8EDF5;
  --gris-900:#2B3038; --gris-700:#4A515C; --gris-500:#78808D;
  --gris-300:#C8CED8; --gris-200:#E2E7EF; --gris-100:#F1F4F9; --gris-50:#F7F9FC;
  --blanco:#FFFFFF;
  --verde:#12A150; --verde-osc:#0B7A3B; --verde-cl:#E4F7EC;
  --rojo:#D92B2B; --rojo-osc:#A81E1E; --rojo-cl:#FDEAEA;
  --ambar:#E6A100; --ambar-cl:#FFF6E0;
  --naranja-ext:#F07800;
  --sombra:0 2px 6px rgba(18,41,75,.10), 0 8px 24px rgba(18,41,75,.06);
  --sombra-alta:0 6px 18px rgba(18,41,75,.18);
  --radio:10px;
  --fuente:'Segoe UI', 'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono:'Consolas','SF Mono','Roboto Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--fuente); background:var(--gris-100); color:var(--gris-900);
  font-size:15px; line-height:1.4; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
button,input,select,textarea{font-family:inherit;font-size:inherit}
table{border-collapse:collapse}

/* ---------- ENCABEZADO ---------- */
.topbar{
  background:var(--azul); color:#fff; display:grid;
  grid-template-columns:1fr auto 1fr; align-items:center;
  padding:10px 20px; gap:16px; box-shadow:var(--sombra-alta); position:relative; z-index:30;
}
.marca{display:flex;align-items:center;gap:12px}
.marca .logo{
  width:44px;height:44px;border-radius:9px;background:var(--naranja);
  display:grid;place-items:center;font-weight:800;font-size:20px;color:#fff;
  box-shadow:0 2px 0 var(--naranja-osc);flex:none;
}
.marca .txt b{display:block;font-size:17px;letter-spacing:.08em;line-height:1.1}
.marca .txt span{display:block;font-size:11px;letter-spacing:.22em;color:#9FB3D1}
.reloj{text-align:center}
.reloj .hora{
  font-family:var(--mono); font-size:44px; font-weight:700; letter-spacing:.02em;
  line-height:1; font-variant-numeric:tabular-nums;
}
.reloj .fecha{font-size:12.5px;color:#B9C8DE;text-transform:uppercase;letter-spacing:.13em;margin-top:4px}
.reloj .zona{font-size:10px;color:#7E93B4;letter-spacing:.1em;margin-top:2px}
.topbar-der{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.chip-net{
  font-size:11px;letter-spacing:.09em;padding:5px 10px;border-radius:20px;
  background:rgba(255,255,255,.09);color:#C5D5EC;border:1px solid rgba(255,255,255,.14);
}
.chip-net b{color:#fff}

/* ---------- NAVEGACIÓN ---------- */
nav.tabs{
  background:var(--azul-cl); display:flex; gap:2px; padding:0 14px;
  box-shadow:var(--sombra); position:relative; z-index:20; overflow-x:auto;
}
nav.tabs button{
  background:transparent;border:0;color:#B9C8DE;cursor:pointer;
  padding:13px 20px;font-size:13.5px;font-weight:600;letter-spacing:.1em;
  border-bottom:4px solid transparent;white-space:nowrap;transition:.14s;
}
nav.tabs button:hover{color:#fff;background:rgba(255,255,255,.06)}
nav.tabs button.on{color:#fff;border-bottom-color:var(--naranja);background:rgba(242,106,33,.13)}

main{flex:1;display:flex;flex-direction:column;min-height:0}
.vista{display:none;flex:1;flex-direction:column;min-height:0}
.vista.on{display:flex}
.pad{padding:16px}

/* ---------- PANTALLA VMS ---------- */
.vms{display:flex;flex-direction:column;gap:14px;padding:14px;flex:1;min-height:0}
.vms-top{display:grid;grid-template-columns:minmax(260px,1fr) 2.1fr;gap:14px}
.card{background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);border:1px solid var(--gris-200);overflow:hidden}
.card > h3{
  background:var(--gris-50);border-bottom:2px solid var(--gris-200);
  padding:9px 14px;font-size:12px;letter-spacing:.16em;color:var(--azul);font-weight:700;
  display:flex;justify-content:space-between;align-items:center;
}
.card > h3 .sub{font-weight:600;letter-spacing:.06em;color:var(--gris-500);font-size:11px}

/* contadores */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gris-200)}
.kpi{background:#fff;padding:14px 8px;text-align:center}
.kpi .n{font-size:44px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--azul)}
.kpi .l{font-size:10.5px;letter-spacing:.15em;color:var(--gris-500);margin-top:6px;font-weight:700}
.kpi.total .n{color:var(--naranja)}
.kpi-hist{padding:8px 14px;background:var(--gris-50);border-top:1px solid var(--gris-200);
  font-size:11.5px;color:var(--gris-700);display:flex;justify-content:space-between;letter-spacing:.05em}
.kpi-hist b{color:var(--azul);font-variant-numeric:tabular-nums}

/* eventos programados */
.prog-wrap{max-height:206px;overflow:auto}
table.mini{width:100%;font-size:13px}
table.mini th{
  position:sticky;top:0;background:var(--gris-100);color:var(--gris-700);
  font-size:10.5px;letter-spacing:.12em;text-align:left;padding:7px 10px;border-bottom:1px solid var(--gris-300);z-index:2;
}
table.mini td{padding:7px 10px;border-bottom:1px solid var(--gris-200)}
table.mini tr:last-child td{border-bottom:0}
table.mini td.h{font-family:var(--mono);font-weight:700;color:var(--azul);font-variant-numeric:tabular-nums}
.vacio{padding:22px;text-align:center;color:var(--gris-500);font-size:13px}

.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:700;letter-spacing:.07em;white-space:nowrap}
.b-prog{background:var(--azul-xcl);color:var(--azul)}
.b-oper{background:var(--verde-cl);color:var(--verde-osc)}
.b-canc{background:var(--gris-200);color:var(--gris-700);text-decoration:line-through}
.b-perd{background:var(--rojo-cl);color:var(--rojo-osc)}
.b-extra{background:#FFEEDD;color:var(--naranja-osc)}
.b-pend{background:var(--ambar-cl);color:#8A6200}
.b-comp{background:var(--verde-cl);color:var(--verde-osc)}
.b-cerr{background:var(--gris-200);color:var(--gris-700)}
.b-fuera{background:var(--rojo-cl);color:var(--rojo-osc)}
.b-dentro{background:var(--verde-cl);color:var(--verde-osc)}
.b-nd{background:var(--gris-100);color:var(--gris-500);border:1px dashed var(--gris-300)}

/* ---------- CORTINAS ---------- */
.cortinas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;flex:1;min-height:340px}
.cortina{
  border-radius:14px;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:var(--sombra-alta);border:3px solid transparent;transition:.2s;position:relative;
}
.cortina.libre{background:linear-gradient(170deg,var(--verde) 0%,var(--verde-osc) 100%);border-color:var(--verde-osc)}
.cortina.ocupada{background:linear-gradient(170deg,var(--rojo) 0%,var(--rojo-osc) 100%);border-color:var(--rojo-osc)}
.c-head{
  padding:11px 14px;background:rgba(0,0,0,.22);color:#fff;display:flex;
  justify-content:space-between;align-items:center;
}
.c-head .num{font-size:23px;font-weight:800;letter-spacing:.14em}
.c-head .tipo-op{font-size:10.5px;font-weight:800;letter-spacing:.1em;padding:4px 10px;border-radius:20px;background:rgba(255,255,255,.2)}
.c-head .tipo-op.extra{background:var(--naranja-ext);box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.c-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 12px;color:#fff;text-align:center}
.c-estado{font-size:32px;font-weight:800;letter-spacing:.16em;text-shadow:0 2px 5px rgba(0,0,0,.3)}
.c-mov{font-size:24px;font-weight:800;letter-spacing:.1em}
.c-cli{font-size:19px;font-weight:600;letter-spacing:.05em;opacity:.95}
.c-step{
  margin-top:6px;background:rgba(0,0,0,.28);border-radius:8px;padding:5px 16px;
  font-size:15px;font-weight:800;letter-spacing:.12em;
}
.c-crono{font-family:var(--mono);font-size:52px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 2px 6px rgba(0,0,0,.32)}
.c-meta{font-size:12px;opacity:.9;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.c-libre-txt{font-size:14px;opacity:.9;letter-spacing:.08em;max-width:230px}
.c-foot{padding:12px;background:rgba(0,0,0,.18);display:flex;flex-direction:column;gap:8px}
.btn-cortina{
  width:100%;padding:16px 10px;border:0;border-radius:9px;cursor:pointer;
  font-size:17px;font-weight:800;letter-spacing:.11em;color:#fff;
  background:var(--naranja);box-shadow:0 3px 0 var(--naranja-osc);transition:.12s;
}
.btn-cortina:hover{background:var(--naranja-osc);box-shadow:0 2px 0 var(--naranja-osc);transform:translateY(1px)}
.btn-cortina.fin{background:var(--azul);box-shadow:0 3px 0 #0A1830}
.btn-cortina.fin:hover{background:#0A1830}
.btn-cortina:disabled{background:var(--gris-500);box-shadow:none;cursor:not-allowed;opacity:.7}
.c-steps-line{display:flex;gap:5px}
.c-steps-line .s{
  flex:1;text-align:center;font-size:10px;font-weight:800;letter-spacing:.06em;padding:4px 2px;
  border-radius:5px;background:rgba(255,255,255,.16);color:rgba(255,255,255,.72);
}
.c-steps-line .s.ok{background:rgba(255,255,255,.92);color:var(--gris-900)}
.c-steps-line .s.cur{background:var(--naranja);color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.5)}

/* ---------- BOTONES GENERALES ---------- */
.btn{
  border:1px solid var(--gris-300);background:#fff;color:var(--gris-900);
  padding:8px 14px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:600;
  letter-spacing:.04em;transition:.12s;white-space:nowrap;
}
.btn:hover{background:var(--gris-100);border-color:var(--gris-500)}
.btn.pri{background:var(--naranja);border-color:var(--naranja-osc);color:#fff}
.btn.pri:hover{background:var(--naranja-osc)}
.btn.azul{background:var(--azul);border-color:var(--azul);color:#fff}
.btn.azul:hover{background:var(--azul-cl)}
.btn.peligro{background:#fff;border-color:var(--rojo);color:var(--rojo-osc)}
.btn.peligro:hover{background:var(--rojo-cl)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- FORMULARIOS ---------- */
label.f{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--gris-700);margin-bottom:5px}
input.f,select.f,textarea.f{
  width:100%;padding:9px 11px;border:1px solid var(--gris-300);border-radius:7px;
  background:#fff;color:var(--gris-900);outline:none;transition:.12s;
}
input.f:focus,select.f:focus,textarea.f:focus{border-color:var(--naranja);box-shadow:0 0 0 3px rgba(242,106,33,.16)}
input.f:disabled,select.f:disabled{background:var(--gris-100);color:var(--gris-500)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.campo{margin-bottom:14px}
.hint{font-size:11px;color:var(--gris-500);margin-top:4px;line-height:1.35}
.hint.warn{color:var(--naranja-osc)}

/* ---------- MODALES ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(18,41,75,.62);display:none;
  align-items:center;justify-content:center;z-index:100;padding:20px;backdrop-filter:blur(2px);
}
.overlay.on{display:flex}
.modal{
  background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);
  width:100%;max-width:560px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;
}
.modal.ancho{max-width:1000px}
.modal-h{background:var(--azul);color:#fff;padding:15px 20px;display:flex;justify-content:space-between;align-items:center}
.modal-h h2{font-size:16px;letter-spacing:.1em;font-weight:700}
.modal-h .x{background:transparent;border:0;color:#9FB3D1;font-size:26px;cursor:pointer;line-height:1;padding:0 4px}
.modal-h .x:hover{color:#fff}
.modal-b{padding:20px;overflow:auto}
.modal-f{padding:14px 20px;background:var(--gris-50);border-top:1px solid var(--gris-200);display:flex;justify-content:flex-end;gap:10px}
.modal-f .izq{margin-right:auto}

/* ---------- TABLAS GRANDES ---------- */
.tabla-wrap{overflow:auto;border:1px solid var(--gris-200);border-radius:var(--radio);background:#fff;box-shadow:var(--sombra)}
table.datos{width:100%;font-size:12.5px;white-space:nowrap}
table.datos th{
  position:sticky;top:0;background:var(--azul);color:#fff;font-size:10.5px;letter-spacing:.07em;
  padding:9px 10px;text-align:left;border-right:1px solid rgba(255,255,255,.12);z-index:3;font-weight:700;
}
table.datos td{padding:7px 10px;border-bottom:1px solid var(--gris-200);border-right:1px solid var(--gris-100)}
table.datos tbody tr:nth-child(even){background:var(--gris-50)}
table.datos tbody tr:hover{background:var(--naranja-cl)}
table.datos td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono)}
table.datos td.hh{font-family:var(--mono);font-variant-numeric:tabular-nums}
.fila-pend{box-shadow:inset 4px 0 0 var(--ambar)}
.fila-canc{opacity:.6}
.fila-activa{box-shadow:inset 4px 0 0 var(--verde)}

.barra{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:14px}
.barra .campo{margin:0;min-width:150px}
.barra .sep{flex:1}
.cuenta{font-size:12px;color:var(--gris-700);letter-spacing:.05em;padding:8px 0}
.cuenta b{color:var(--azul)}

/* ---------- INFORMES ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin-bottom:14px}
.kpi-card{background:#fff;border-radius:var(--radio);border:1px solid var(--gris-200);box-shadow:var(--sombra);padding:13px 15px}
.kpi-card .t{font-size:10.5px;letter-spacing:.13em;color:var(--gris-500);font-weight:700;margin-bottom:9px;text-transform:uppercase}
.kpi-card .v{font-size:31px;font-weight:800;color:var(--azul);line-height:1;font-variant-numeric:tabular-nums}
.kpi-card .v small{font-size:14px;color:var(--gris-500);font-weight:600;margin-left:3px}
.kpi-card .d{display:flex;gap:14px;margin-top:9px;font-size:11.5px;color:var(--gris-700);border-top:1px solid var(--gris-200);padding-top:8px}
.kpi-card .d span{display:flex;flex-direction:column;gap:1px}
.kpi-card .d b{font-size:15px;color:var(--naranja-osc);font-variant-numeric:tabular-nums}
.kpi-card .d i{font-style:normal;font-size:9.5px;letter-spacing:.1em;color:var(--gris-500)}
.graf-box{background:#fff;border-radius:var(--radio);border:1px solid var(--gris-200);box-shadow:var(--sombra);padding:14px;margin-bottom:14px}
.graf-box h4{font-size:12px;letter-spacing:.14em;color:var(--azul);margin-bottom:12px;font-weight:700}
.graf-box canvas{width:100%;display:block}

/* ---------- CONFIGURACIÓN ---------- */
.cfg-sec{background:#fff;border-radius:var(--radio);border:1px solid var(--gris-200);box-shadow:var(--sombra);margin-bottom:14px;overflow:hidden}
.cfg-sec > h3{background:var(--gris-50);border-bottom:2px solid var(--gris-200);padding:11px 16px;font-size:12.5px;letter-spacing:.14em;color:var(--azul)}
.cfg-body{padding:16px}
.aviso{
  border-left:4px solid var(--ambar);background:var(--ambar-cl);padding:11px 14px;border-radius:0 8px 8px 0;
  font-size:12.5px;color:#6B4E00;margin-bottom:14px;line-height:1.5;
}
.aviso b{letter-spacing:.06em}
.aviso.info{border-left-color:var(--azul);background:var(--azul-xcl);color:var(--azul)}
.aviso.exito{border-left-color:var(--verde);background:var(--verde-cl);color:var(--verde-osc)}

/* ---------- TOASTS ---------- */
#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:9px;z-index:200;max-width:390px}
.toast{
  background:var(--azul);color:#fff;padding:12px 16px;border-radius:9px;box-shadow:var(--sombra-alta);
  font-size:13.5px;border-left:5px solid var(--naranja);animation:slideIn .2s ease;line-height:1.4;
}
.toast.err{border-left-color:var(--rojo);background:#3A1414}
.toast.ok{border-left-color:var(--verde);background:#0C2A1A}
@keyframes slideIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}

.pill-obl{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--gris-300);
  border-radius:7px;font-size:12.5px;background:#fff;cursor:pointer;margin:0 8px 8px 0}
.pill-obl input{margin:0}

footer.pie{background:var(--azul);color:#7E93B4;font-size:11px;padding:8px 18px;
  display:flex;justify-content:space-between;letter-spacing:.06em;flex-wrap:wrap;gap:8px}
footer.pie b{color:#B9C8DE}

@media (max-width:1100px){
  .vms-top{grid-template-columns:1fr}
  .cortinas{grid-template-columns:1fr;min-height:0}
  .reloj .hora{font-size:32px}
  .c-crono{font-size:40px}
}
@media (max-width:760px){
  .topbar{grid-template-columns:1fr;text-align:center}
  .marca,.topbar-der{justify-content:center}
  .grid2,.grid3,.grid4{grid-template-columns:1fr}
}
@media print{
  .topbar,nav.tabs,footer.pie,.barra,.btn{display:none!important}
}

/* ============================================================================
   VERSIÓN 2 — acceso, centros de trabajo, plan semanal, alarmas y usuarios
   ============================================================================ */

/* ---------------------------- PANTALLA DE ACCESO -------------------------- */
#pantallaAcceso{
  position:fixed; inset:0; z-index:500; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:linear-gradient(160deg,var(--azul) 0%,#0A1830 100%);
}
#pantallaAcceso.on{display:flex}
.acceso{
  width:100%; max-width:430px; background:#fff; border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.45); overflow:hidden;
}
.acceso-h{padding:26px 28px 20px; text-align:center; border-bottom:1px solid var(--gris-200)}
.acceso-h .logo{
  width:60px;height:60px;border-radius:13px;background:var(--naranja);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:26px;margin:0 auto 14px;
  box-shadow:0 3px 0 var(--naranja-osc);
}
.acceso-h b{display:block;font-size:19px;letter-spacing:.09em;color:var(--azul)}
.acceso-h span{display:block;font-size:11px;letter-spacing:.24em;color:var(--gris-500);margin-top:4px}
.acceso-b{padding:24px 28px}
.acceso-b .btn{width:100%;padding:13px;font-size:15px;letter-spacing:.09em;margin-top:6px}
.acceso-f{padding:14px 28px;background:var(--gris-50);border-top:1px solid var(--gris-200);
  font-size:11.5px;color:var(--gris-500);text-align:center;line-height:1.5}
.acceso-error{
  background:var(--rojo-cl);border-left:4px solid var(--rojo);color:var(--rojo-osc);
  padding:10px 13px;border-radius:0 7px 7px 0;font-size:13px;margin-bottom:14px;display:none;
}
.acceso-error.on{display:block}

/* --------------------------- BARRA SUPERIOR v2 ---------------------------- */
.topbar{grid-template-columns:1fr auto 1fr}
.sel-centro{
  background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.22);
  border-radius:7px;padding:7px 11px;font-size:13px;font-weight:600;letter-spacing:.05em;cursor:pointer;
}
.sel-centro:focus{outline:2px solid var(--naranja)}
.sel-centro option{color:var(--gris-900)}
.usuario-chip{
  display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:5px 6px 5px 12px;
}
.usuario-chip .datos{line-height:1.2;text-align:right}
.usuario-chip .datos b{display:block;font-size:12.5px;color:#fff}
.usuario-chip .datos span{display:block;font-size:10px;letter-spacing:.09em;color:#9FB3D1}
.usuario-chip button{
  background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:50%;
  width:30px;height:30px;cursor:pointer;font-size:14px;line-height:1;
}
.usuario-chip button:hover{background:var(--naranja)}
.nivel-1{color:#FFD08A!important}.nivel-2{color:#B7E1FF!important}
.nivel-3{color:#B9F0CE!important}.nivel-4{color:#E2E7EF!important}

/* ------------------------------ PLAN SEMANAL ------------------------------ */
.plan-barra{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:12px}
.plan-nav{display:flex;align-items:center;gap:8px}
.plan-nav .rango{font-size:13.5px;font-weight:700;color:var(--azul);letter-spacing:.05em;min-width:210px;text-align:center}
.plan-grid{
  display:grid; grid-template-columns:62px repeat(5,1fr); gap:1px;
  background:var(--gris-200); border:1px solid var(--gris-200);
  border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra);
}
.plan-grid .celda{background:#fff}
.plan-cab{
  background:var(--azul)!important;color:#fff;padding:9px 6px;text-align:center;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;position:sticky;top:0;z-index:5;
}
.plan-cab small{display:block;font-weight:600;font-size:10px;color:#9FB3D1;letter-spacing:.05em;margin-top:2px}
.plan-cab.hoy{background:var(--naranja)!important}
.plan-cab.hoy small{color:#FFE3D0}
.plan-horas{background:var(--gris-50)!important;position:relative}
.plan-hora-etq{
  position:absolute;right:7px;font-size:10.5px;color:var(--gris-500);
  font-variant-numeric:tabular-nums;transform:translateY(-50%);font-weight:600;
}
.plan-dia{position:relative;background:#fff;min-height:520px}
.plan-linea{position:absolute;left:0;right:0;border-top:1px solid var(--gris-200)}
.plan-linea.media{border-top-style:dotted}
.plan-ahora{position:absolute;left:0;right:0;border-top:2px solid var(--rojo);z-index:4}
.plan-ahora::before{
  content:'';position:absolute;left:0;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--rojo);
}
.plan-ev{
  position:absolute;left:3px;right:3px;border-radius:6px;padding:4px 6px;overflow:hidden;
  font-size:10.5px;line-height:1.25;cursor:pointer;border-left:4px solid;z-index:2;
  transition:.12s; box-shadow:0 1px 3px rgba(18,41,75,.14);
}
.plan-ev:hover{z-index:6;box-shadow:var(--sombra-alta);transform:scale(1.015)}
.plan-ev b{display:block;font-size:11px;letter-spacing:.03em}
.plan-ev .met{display:block;color:var(--gris-700);font-size:9.5px}
.plan-ev .etq{
  display:inline-block;margin-top:2px;font-size:8.5px;font-weight:800;letter-spacing:.06em;
  padding:1px 5px;border-radius:9px;background:rgba(255,255,255,.75);
}
/* Colorimetría de estados. El color nunca va solo: siempre lleva etiqueta e icono. */
.pe-pendiente{background:#EEF1F6;border-left-color:#98A2B3;color:#2B3038}
.pe-curso    {background:#FFEBD9;border-left-color:var(--naranja);color:#6B3200}
.pe-entiempo {background:#E4F7EC;border-left-color:var(--verde);color:#0B4A26}
.pe-fuera    {background:#FDE7E7;border-left-color:var(--rojo);color:#7A1515}
.pe-cancelado{background:#F2E3EA;border-left-color:#7B2140;color:#5B1830;text-decoration:line-through}
.pe-prep     {background:#E2F0FB;border-left-color:#2B7FBF;color:#0E3E60}
.plan-leyenda{display:flex;flex-wrap:wrap;gap:14px;margin:12px 0 0;font-size:11.5px;color:var(--gris-700)}
.plan-leyenda span{display:flex;align-items:center;gap:6px}
.plan-leyenda i{width:13px;height:13px;border-radius:3px;border-left:4px solid;font-style:normal;display:inline-block}

/* -------------------------------- ALARMAS --------------------------------- */
/* Las alarmas se apilan abajo a la izquierda: así no tapan las barras de
   filtros y los botones de exportación, que viven arriba a la derecha, ni
   se encima con los avisos (#toasts, abajo a la derecha). El contenedor no
   captura clics; sólo las tarjetas, para poder descartarlas. */
#alarmas{position:fixed;bottom:18px;left:18px;z-index:190;display:flex;flex-direction:column-reverse;gap:10px;max-width:390px;pointer-events:none}
/* Entra deslizándose desde la izquierda, que es de donde ahora aparece. */
@keyframes slideInIzq{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.alarma{
  pointer-events:auto;
  background:#fff;border-radius:11px;box-shadow:0 10px 34px rgba(18,41,75,.30);
  border-left:6px solid var(--ambar);overflow:hidden;animation:slideInIzq .22s ease;
}
.alarma.exceso{border-left-color:var(--rojo)}
.alarma-h{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 13px;background:var(--ambar-cl);
}
.alarma.exceso .alarma-h{background:var(--rojo-cl)}
.alarma-h b{font-size:11.5px;letter-spacing:.1em;color:#6B4E00}
.alarma.exceso .alarma-h b{color:var(--rojo-osc)}
.alarma-h button{background:transparent;border:0;font-size:19px;line-height:1;cursor:pointer;color:var(--gris-500)}
.alarma-h button:hover{color:var(--gris-900)}
.alarma-b{padding:11px 13px;font-size:13px;line-height:1.5}
.alarma-b .grande{font-size:16px;font-weight:800;color:var(--azul);display:block;margin-bottom:3px}
.alarma-b .resto{font-family:var(--mono);font-weight:700;font-size:15px}
.icono-alerta{font-style:normal;font-weight:800}

/* --------------------------- REGISTRO DEL DÍA ----------------------------- */
.reg-dia-wrap{max-height:214px;overflow:auto}
table.mini td.st{font-family:var(--mono);font-size:11.5px;text-align:right;font-variant-numeric:tabular-nums}
table.mini th.st{text-align:right}
.tabs-panel{display:flex;gap:4px;padding:6px 10px 0;background:var(--gris-50);border-bottom:1px solid var(--gris-200)}
.tabs-panel button{
  border:0;background:transparent;padding:6px 11px;font-size:11px;font-weight:700;letter-spacing:.09em;
  color:var(--gris-500);cursor:pointer;border-bottom:3px solid transparent;
}
.tabs-panel button.on{color:var(--azul);border-bottom-color:var(--naranja)}
.tabs-panel button:hover{color:var(--azul)}

/* ------------------------------- USUARIOS --------------------------------- */
.tabla-wrap.compacta{max-height:460px}
.badge-nivel{display:inline-block;padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:700;letter-spacing:.05em}
.bn-1{background:#FFF1E8;color:var(--naranja-osc)}
.bn-2{background:var(--azul-xcl);color:var(--azul)}
.bn-3{background:var(--verde-cl);color:var(--verde-osc)}
.bn-4{background:var(--gris-200);color:var(--gris-700)}
.aviso.peligro{border-left-color:var(--rojo);background:var(--rojo-cl);color:var(--rojo-osc)}

/* ------------------------- SELECCIÓN DE EVENTO ---------------------------- */
.opcion-cita{
  border:2px solid var(--gris-200);border-radius:9px;padding:11px 13px;margin-bottom:9px;
  cursor:pointer;transition:.12s;display:flex;gap:12px;align-items:center;background:#fff;
}
.opcion-cita:hover{border-color:var(--naranja);background:var(--naranja-cl)}
.opcion-cita.sel{border-color:var(--naranja);background:var(--naranja-cl);box-shadow:0 0 0 3px rgba(242,106,33,.15)}
.opcion-cita .hora{font-family:var(--mono);font-size:19px;font-weight:800;color:var(--azul);min-width:62px}
.opcion-cita .info{flex:1;font-size:13px;line-height:1.45}
.opcion-cita .info b{display:block;font-size:14px}
.opcion-cita .info span{color:var(--gris-500);font-size:11.5px}
.opcion-cita .dif{font-size:11px;font-weight:700;letter-spacing:.05em;text-align:right;white-space:nowrap}

.solo-lectura{opacity:.55;pointer-events:none}
.sin-permiso{padding:34px;text-align:center;color:var(--gris-500);font-size:14px}

/* El diálogo de confirmación siempre se invoca desde dentro de otro modal:
   debe quedar por encima de todos ellos para poder responderse. */
#ovConf{z-index:160}
#alarmas{z-index:150}

/* -------------------- VER / OCULTAR CONTRASEÑA ---------------------------- */
.pass-wrap{position:relative;display:block}
.pass-wrap input{padding-right:44px}
.pass-wrap .ver-pass{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:32px;height:30px;border:0;border-radius:6px;background:transparent;
  cursor:pointer;color:var(--gris-500);font-size:15px;line-height:1;display:grid;place-items:center;
}
.pass-wrap .ver-pass:hover{background:var(--gris-100);color:var(--azul)}
.pass-wrap .ver-pass:focus-visible{outline:2px solid var(--naranja)}

/* ------------------------- FOLIO WMS (doble captura) ---------------------- */
input.folio-wms{
  font-family:var(--mono);font-size:16px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
}
input.folio-wms.coincide{border-color:var(--verde);box-shadow:0 0 0 3px rgba(18,161,80,.16)}
input.folio-wms.difiere{border-color:var(--rojo);box-shadow:0 0 0 3px rgba(217,43,43,.14)}

/* ---------------------- CELDAS EDITABLES EN LA MAESTRA -------------------- */
table.datos td.editable{cursor:text;position:relative}
table.datos td.editable:hover{background:var(--naranja-cl);box-shadow:inset 0 0 0 1px var(--naranja)}
table.datos td.editable::after{
  content:'✎';position:absolute;right:5px;top:50%;transform:translateY(-50%);
  font-size:10px;color:var(--gris-500);opacity:0;
}
table.datos td.editable:hover::after{opacity:1}
table.datos td.editable input,table.datos td.editable select{
  width:100%;border:1px solid var(--naranja);border-radius:4px;padding:3px 5px;font-size:12.5px;
  font-family:inherit;outline:none;
}
td.sin-cita{color:var(--gris-500);font-style:italic}

/* ---------------------------- LOGO OFICIAL -------------------------------- */
.placa-logo{
  display:inline-grid;place-items:center;background:#fff;border-radius:9px;
  padding:7px 11px;flex:none;box-shadow:0 2px 5px rgba(0,0,0,.22);
}
.placa-logo img{height:30px;width:auto;display:block}
.logo-acceso{width:236px;max-width:78%;height:auto;display:block;margin:0 auto 14px}
@media (max-width:760px){ .placa-logo img{height:24px} }