/* ═══════════════════════════════════════════════════════════
   ENAUTO® Admin — Módulo VUELTAS
   Hereda tokens de admin.css. Móvil primero en la vista del mensajero.
═══════════════════════════════════════════════════════════ */

:root{
  --amber:#e0a33e;
  --p-alta:#FF495C;
  --p-media:#e0a33e;
  --p-baja:#6b8f9e;
}

/* ── Avatar del mensajero ──────────────────────────────── */
.avatar.r-mensajero{background:linear-gradient(135deg,#3f7fbf,#24486b)}

/* ── Pantalla de identificación: desplegable ───────────── */
.gate-form{max-width:440px;margin:0 auto}
.gate-label{
  display:block;font-family:'Morton',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;
}
.sel-wrap{position:relative}
.sel-caret{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;font-size:14px;
}
.sel{
  width:100%;appearance:none;-webkit-appearance:none;
  background:var(--gray2);border:1px solid rgba(255,255,255,.14);
  color:var(--white);border-radius:8px;
  font-family:'Karla',system-ui,sans-serif;font-size:16px;font-weight:600;
  padding:15px 42px 15px 16px;cursor:pointer;transition:border-color .2s,box-shadow .2s;
}
.sel:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,110,255,.14)}
.sel option{background:#1f1f1d;color:var(--white)}
.gate-btn{width:100%;margin-top:16px;justify-content:center}
.gate-error{margin-top:12px;font-size:13px;color:var(--red)}

/* ── Cabecera de página ────────────────────────────────── */
.vt{max-width:1400px;margin:0 auto;padding:28px 22px 70px}
.vt-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:24px}
.vt-head h1{font-family:'Morton',sans-serif;font-weight:900;font-size:clamp(28px,4.2vw,42px);line-height:1}
.vt-head .eyebrow{color:var(--blue)}
.vt-sub{margin-top:8px;font-size:14px;color:rgba(252,252,252,.55)}
.vt-acts{display:flex;gap:10px;flex-wrap:wrap}

/* ── Tabs ──────────────────────────────────────────────── */
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:22px}
.tab{
  flex:0 0 auto;
  background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
  font-family:'Morton',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:12px 15px;cursor:pointer;white-space:nowrap;transition:.2s;
}
.tab:hover{color:var(--white)}
.tab.on{color:var(--blue);border-bottom-color:var(--blue)}
.tab-n{
  display:inline-block;margin-left:7px;font-family:'Karla',sans-serif;font-size:10.5px;
  background:rgba(255,255,255,.08);border-radius:10px;padding:1px 7px;letter-spacing:0;
}

/* ── Estadísticas ──────────────────────────────────────── */
.vt-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:11px;margin-bottom:22px}
.vs{background:var(--gray2);border:1px solid var(--border);border-top:2px solid var(--blue);border-radius:8px;padding:14px 15px}
.vs.rojo{border-top-color:var(--red)} .vs.ambar{border-top-color:var(--amber)} .vs.verde{border-top-color:var(--green)}
.vs-n{font-family:'Morton',sans-serif;font-weight:900;font-size:27px;line-height:1}
.vs.rojo .vs-n{color:var(--red)} .vs.ambar .vs-n{color:var(--amber)} .vs.verde .vs-n{color:var(--green)}
.vs-l{margin-top:5px;font-size:11px;color:var(--muted);letter-spacing:.03em}

/* ── Tarjeta de vuelta ─────────────────────────────────── */
.lista{display:flex;flex-direction:column;gap:10px}

.vc{
  position:relative;background:var(--gray2);border:1px solid var(--border);
  border-left:3px solid var(--p-media);border-radius:9px;padding:14px 16px;
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.vc:hover{box-shadow:0 6px 18px rgba(0,0,0,.28)}
.vc.p-alta{border-left-color:var(--p-alta)}
.vc.p-media{border-left-color:var(--p-media)}
.vc.p-baja{border-left-color:var(--p-baja)}

/* La vuelta que pedí yo: se distingue sin gritar */
.vc.mia{background:linear-gradient(90deg,rgba(37,110,255,.09),var(--gray2) 220px);border-color:rgba(37,110,255,.32)}
.vc.mia::after{
  content:'TUYA';position:absolute;top:12px;right:14px;
  font-family:'Morton',sans-serif;font-size:8.5px;font-weight:800;letter-spacing:.14em;
  color:var(--blue);background:rgba(37,110,255,.14);border:1px solid rgba(37,110,255,.3);
  border-radius:3px;padding:2px 6px;
}
.vc.vencida{border-color:rgba(255,73,92,.4)}
.vc.proceso{border-color:rgba(224,163,62,.45);background:linear-gradient(90deg,rgba(224,163,62,.08),var(--gray2) 220px)}
.vc.cerrada{opacity:.62}

.vc-top{display:flex;align-items:flex-start;gap:11px;margin-bottom:8px;padding-right:56px}
.vc-tipo{
  font-family:'Morton',sans-serif;font-size:9.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);
}
.vc-desc{font-size:14.5px;font-weight:700;line-height:1.4;word-break:break-word;margin-top:3px}
.vc-lugar{margin-top:6px;font-size:12.5px;color:rgba(252,252,252,.6);display:flex;align-items:flex-start;gap:6px}
.vc-lugar svg{width:14px;height:14px;flex-shrink:0;margin-top:2px;color:var(--muted)}
.vc-lugar a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.vc-com{
  margin-top:9px;padding:9px 11px;background:rgba(255,255,255,.04);border-radius:6px;
  font-size:12.5px;line-height:1.5;color:rgba(252,252,252,.72);border-left:2px solid rgba(255,255,255,.14);
}
.vc-com b{display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}

.vc-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:11px}
.mini{
  width:23px;height:23px;border-radius:50%;font-size:9px;font-weight:800;
  font-family:'Morton',sans-serif;display:inline-flex;align-items:center;justify-content:center;
  color:var(--white);flex-shrink:0;
}
.mini.r-direccion{background:linear-gradient(135deg,rgba(255,73,92,.9),rgba(255,73,92,.45))}
.mini.r-admin{background:linear-gradient(135deg,rgba(25,244,144,.85),rgba(25,244,144,.4));color:#10120f}
.mini.r-asesor{background:linear-gradient(135deg,rgba(37,110,255,.9),rgba(37,110,255,.45))}
.mini.r-gerencia{background:linear-gradient(135deg,rgba(255,73,92,.75),rgba(37,110,255,.55))}
.mini.r-taller{background:linear-gradient(135deg,#7a7a72,#4a4a44)}
.mini.r-secretaria{background:linear-gradient(135deg,#c08a3e,#7d5722)}
.mini.r-bodega{background:linear-gradient(135deg,#5f8f7a,#33564a)}
.mini.r-mensajero{background:linear-gradient(135deg,#3f7fbf,#24486b)}
.mini.r-pendiente{background:linear-gradient(135deg,#4a4a46,#2f2f2c);color:var(--muted)}

.vc-quien{font-size:12px;color:rgba(252,252,252,.62)}
.vc-quien b{color:var(--white);font-weight:700}

.tag{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 7px;border-radius:3px;white-space:nowrap}
.tag.alta{background:rgba(255,73,92,.16);color:var(--red);border:1px solid rgba(255,73,92,.28)}
.tag.media{background:rgba(224,163,62,.14);color:var(--amber);border:1px solid rgba(224,163,62,.26)}
.tag.baja{background:rgba(255,255,255,.05);color:var(--muted);border:1px solid rgba(255,255,255,.1)}
.tag.gris{background:rgba(255,255,255,.05);color:var(--muted);border:1px solid rgba(255,255,255,.1)}
.tag.roja{background:rgba(255,73,92,.16);color:var(--red);border:1px solid rgba(255,73,92,.3)}
.tag.verde{background:rgba(25,244,144,.13);color:var(--green);border:1px solid rgba(25,244,144,.26)}
.tag.ambar{background:rgba(224,163,62,.15);color:var(--amber);border:1px solid rgba(224,163,62,.3)}

.vc-acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.mini-btn{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(252,252,252,.75);
  border-radius:5px;font-size:11.5px;font-weight:700;padding:6px 11px;cursor:pointer;transition:.2s;
}
.mini-btn:hover{border-color:var(--blue);color:var(--blue)}
.mini-btn.peligro:hover{border-color:var(--red);color:var(--red)}

/* ── Vacío ─────────────────────────────────────────────── */
.vacio{
  text-align:center;padding:44px 20px;color:var(--muted);font-size:13.5px;
  border:1px dashed rgba(255,255,255,.1);border-radius:10px;
}
.vacio svg{width:30px;height:30px;margin:0 auto 12px;color:rgba(255,255,255,.18)}

/* ── Filtros del historial ─────────────────────────────── */
.filtros-box{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;
  background:rgba(0,0,0,.18);border:1px solid var(--border);border-radius:10px;
  padding:15px;margin-bottom:20px;
}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.campo input,.campo select,.campo textarea{
  background:var(--gray2);border:1px solid rgba(255,255,255,.12);color:var(--white);
  border-radius:6px;font-family:'Karla',system-ui,sans-serif;font-size:14px;padding:10px 12px;width:100%;
}
.campo textarea{resize:vertical;min-height:82px;line-height:1.5}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,110,255,.12)
}
.campo select{appearance:none;-webkit-appearance:none;background-image:none;cursor:pointer}
.campo select option{background:#1f1f1d}
.campo .pista{font-size:11px;color:var(--muted);line-height:1.4}

/* ── Modal / hoja lateral ──────────────────────────────── */
.hoja{position:fixed;inset:0;z-index:200;display:none}
.hoja.on{display:block}
.hoja-bg{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(3px)}
.hoja-box{
  position:absolute;right:0;top:0;bottom:0;width:min(560px,100%);
  background:#1d1d1b;border-left:1px solid var(--border);
  display:flex;flex-direction:column;animation:entra .24s cubic-bezier(.4,0,.2,1);
}
@keyframes entra{from{transform:translateX(26px);opacity:0}to{transform:none;opacity:1}}
.hoja-head{
  display:flex;align-items:center;gap:12px;padding:18px 22px;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.hoja-head h2{font-family:'Morton',sans-serif;font-weight:800;font-size:16px;flex:1}
.hoja-x{background:none;border:0;color:var(--muted);font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.hoja-x:hover{color:var(--red)}
.hoja-body{padding:20px 22px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:15px}
.hoja-pie{padding:16px 22px;border-top:1px solid var(--border);display:flex;gap:10px;flex-shrink:0}
.hoja-pie .btn{flex:1;justify-content:center}
.hoja-msg{font-size:13px;line-height:1.5;min-height:18px}
.hoja-msg.err{color:var(--red)}
.hoja-msg.ok{color:var(--green)}

@media (max-width:640px){
  .hoja-box{width:100%;top:auto;height:94vh;border-left:0;border-top-left-radius:16px;border-top-right-radius:16px}
  @keyframes entra{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
}

/* ═══════════════════════════════════════════════════════
   VISTA DEL MENSAJERO — pensada para el celular
═══════════════════════════════════════════════════════ */

.mn{max-width:620px;margin:0 auto;padding:16px 14px calc(96px + env(safe-area-inset-bottom))}

.mn-hola{margin-bottom:16px}
.mn-hola h1{font-family:'Morton',sans-serif;font-weight:900;font-size:25px;line-height:1.1}
.mn-hola p{margin-top:5px;font-size:13px;color:var(--muted)}

/* Reloj de jornada */
.jor{
  background:var(--gray2);border:1px solid var(--border);border-top:2px solid var(--blue);
  border-radius:12px;padding:16px;margin-bottom:14px;
}
.jor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.jm{text-align:center;padding:9px 4px;background:rgba(255,255,255,.04);border-radius:7px;border:1px solid transparent}
.jm.hecho{background:rgba(25,244,144,.09);border-color:rgba(25,244,144,.2)}
.jm.toca{background:rgba(37,110,255,.12);border-color:rgba(37,110,255,.34)}
.jm-l{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.3}
.jm-h{font-family:'Morton',sans-serif;font-weight:800;font-size:14px;margin-top:5px}
.jm.hecho .jm-h{color:var(--green)}
.jm-h.vacio2{color:rgba(255,255,255,.2)}

.jor-aviso{
  display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.45;
  padding:10px 12px;border-radius:7px;margin-bottom:12px;
}
/* Sin esto el SVG se estira hasta llenar la fila */
.jor-aviso svg{width:16px;height:16px;flex:0 0 16px;margin-top:1px}
.jor-aviso.ambar{background:rgba(224,163,62,.11);border:1px solid rgba(224,163,62,.26);color:#f0c47a}
.jor-aviso.rojo{background:rgba(255,73,92,.1);border:1px solid rgba(255,73,92,.26);color:#ff8f9c}
.jor-aviso.verde{background:rgba(25,244,144,.09);border:1px solid rgba(25,244,144,.22);color:#8dfbc6}

/* Botones grandes: el pulgar tiene que acertar sin ver */
.btn-grande{
  width:100%;min-height:56px;border-radius:11px;border:0;cursor:pointer;
  font-family:'Morton',sans-serif;font-weight:800;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--blue);color:var(--white);transition:filter .15s,transform .1s;
}
.btn-grande:active{transform:scale(.985)}
.btn-grande:disabled{opacity:.4;cursor:not-allowed}
.btn-grande.verde{background:var(--green);color:#0f1210}
.btn-grande.rojo{background:var(--red)}
.btn-grande.gris{background:rgba(255,255,255,.09);color:rgba(252,252,252,.8);border:1px solid rgba(255,255,255,.14)}
.btn-grande svg{width:19px;height:19px}

/* Caja chica */
.caja{
  background:var(--gray2);border:1px solid var(--border);border-top:2px solid var(--amber);
  border-radius:12px;padding:15px;margin-bottom:14px;
}
.caja-t{
  font-family:'Morton',sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--amber);margin-bottom:11px;
}
.caja-row{display:flex;gap:9px}
.caja-row .btn-grande{min-height:48px;font-size:12.5px}
.caja-estado{font-size:12.5px;color:rgba(252,252,252,.66);line-height:1.5;margin-top:10px}
.caja-estado b{color:var(--white)}

/* Sección */
.mn-sec{margin-top:22px}
.mn-sec-t{
  display:flex;align-items:center;gap:9px;margin-bottom:11px;
}
.mn-sec-t h2{
  font-family:'Morton',sans-serif;font-size:11.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(252,252,252,.85);
}
.mn-sec-n{font-size:10.5px;color:var(--muted);background:rgba(255,255,255,.07);border-radius:10px;padding:2px 8px}

/* Tarjeta en modo mensajero: seleccionable */
.vc.sel-on{border-color:var(--blue);box-shadow:0 0 0 2px rgba(37,110,255,.25) inset}
.vc-check{
  position:absolute;top:13px;right:13px;width:24px;height:24px;border-radius:6px;
  border:1.5px solid rgba(255,255,255,.24);display:flex;align-items:center;justify-content:center;
  font-size:13px;color:transparent;background:rgba(255,255,255,.04);transition:.15s;
}
.vc.sel-on .vc-check{background:var(--blue);border-color:var(--blue);color:#fff}
.vc.selectable{cursor:pointer;padding-right:46px}
.vc.selectable .vc-top{padding-right:0}
.vc.selectable.mia::after{top:auto;bottom:13px;right:13px}

.vc-orden{
  position:absolute;left:-3px;top:14px;width:22px;height:22px;border-radius:0 5px 5px 0;
  background:rgba(255,255,255,.08);font-family:'Morton',sans-serif;font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center;color:var(--muted);
}

/* Barra fija de acción */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:rgba(25,25,23,.96);backdrop-filter:blur(16px);
  border-top:1px solid var(--border);
  transform:translateY(130%);transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.barra.on{transform:none}
.barra-n{font-size:12px;color:var(--muted);text-align:center;margin-bottom:9px}
.barra-n b{color:var(--white)}

/* Motivos de orden alterado */
.motivos{display:flex;gap:7px;flex-wrap:wrap}
.motivo{
  background:var(--gray2);border:1px solid var(--border);color:var(--muted);border-radius:20px;
  font-size:12px;font-weight:700;padding:8px 14px;cursor:pointer;transition:.18s;
}
.motivo:hover{border-color:rgba(255,255,255,.25);color:var(--white)}
.motivo.on{background:rgba(37,110,255,.16);border-color:rgba(37,110,255,.42);color:var(--blue)}

/* Aviso de solo lectura para quien no es David */
.mirando{
  display:flex;align-items:flex-start;gap:10px;background:rgba(37,110,255,.08);
  border:1px solid rgba(37,110,255,.22);border-radius:9px;padding:12px 14px;
  font-size:12.5px;line-height:1.5;color:rgba(252,252,252,.75);margin-bottom:16px;
}
.mirando svg{width:16px;height:16px;color:var(--blue);flex-shrink:0;margin-top:1px}

/* ── Bitácora ──────────────────────────────────────────── */
.bita{margin-top:30px;border-top:1px solid var(--border);padding-top:18px}
.bita-t{
  font-family:'Morton',sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px;
}
.bita ol{list-style:none;display:flex;flex-direction:column;gap:8px}
.bita li{font-size:12.5px;color:rgba(252,252,252,.6);line-height:1.5;display:flex;gap:9px}
.bita time{color:var(--muted);font-size:11.5px;flex-shrink:0;min-width:78px}
.bita b{color:var(--white);font-weight:700}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width:760px){
  .vt{padding:20px 14px 60px}
  .vt-head{gap:14px}
  .vt-acts{width:100%}
  .vt-acts .btn{flex:1;justify-content:center}
  .filtros-box{grid-template-columns:1fr 1fr}
  .vc.mia::after{position:static;display:inline-block;margin-left:6px}
  .vc-top{padding-right:0}
}
@media (max-width:420px){
  .jor-grid{grid-template-columns:repeat(2,1fr)}
  .filtros-box{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════
   FASE 2 — Campanilla, deméritos, permisos y panel
═══════════════════════════════════════════════════════ */

/* ── Campanilla ────────────────────────────────────────── */
.campana{position:relative}
.campana-b{
  position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:rgba(252,252,252,.8);border-radius:5px;padding:8px 11px;cursor:pointer;
  display:inline-flex;align-items:center;transition:.2s;
}
.campana-b:hover{border-color:var(--blue);color:var(--blue)}
.campana-b svg{width:17px;height:17px}
.campana-n{
  position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;
  background:var(--red);color:#fff;border-radius:9px;font-size:10.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-family:'Morton',sans-serif;
}
.campana-caja{
  position:absolute;right:0;top:calc(100% + 9px);width:min(360px,calc(100vw - 28px));
  max-height:430px;overflow-y:auto;z-index:150;
  background:#1d1d1b;border:1px solid var(--border);border-radius:10px;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.campana-caja h4{
  font-family:'Morton',sans-serif;font-size:10px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding:13px 15px 9px;
}
.av{display:block;padding:11px 15px;border-top:1px solid rgba(255,255,255,.05);font-size:12.5px;line-height:1.5}
.av.nuevo{background:rgba(37,110,255,.07)}
.av time{display:block;font-size:10.5px;color:var(--muted);margin-top:4px}
.av-vacio{padding:26px 15px;text-align:center;color:var(--muted);font-size:12.5px}

/* ── Panel de control ──────────────────────────────────── */
.ct{max-width:1180px;margin:0 auto;padding:26px 20px 70px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:11px;margin-bottom:22px}
.kpi{background:var(--gray2);border:1px solid var(--border);border-top:2px solid var(--blue);border-radius:9px;padding:14px 15px}
.kpi.rojo{border-top-color:var(--red)} .kpi.ambar{border-top-color:var(--amber)} .kpi.verde{border-top-color:var(--green)}
.kpi-n{font-family:'Morton',sans-serif;font-weight:900;font-size:24px;line-height:1.1}
.kpi.rojo .kpi-n{color:var(--red)} .kpi.ambar .kpi-n{color:var(--amber)} .kpi.verde .kpi-n{color:var(--green)}
.kpi-l{margin-top:5px;font-size:11px;color:var(--muted);line-height:1.4}

/* Tarjeta de estado del mensajero */
.ahora{
  background:linear-gradient(135deg,rgba(37,110,255,.1),var(--gray2) 60%);
  border:1px solid rgba(37,110,255,.24);border-radius:12px;padding:18px;margin-bottom:22px;
}
.ahora-t{
  font-family:'Morton',sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);margin-bottom:12px;
}
.ahora-vuelta{font-size:15px;font-weight:700;line-height:1.45}
.ahora-sub{margin-top:5px;font-size:12.5px;color:rgba(252,252,252,.6)}
.ahora-libre{font-size:14px;color:var(--muted)}

/* Filas de deméritos y permisos */
.fila{
  background:var(--gray2);border:1px solid var(--border);border-left:3px solid rgba(255,255,255,.12);
  border-radius:9px;padding:13px 15px;
}
.fila.pendiente{border-left-color:var(--amber)}
.fila.confirmado,.fila.rechazado{border-left-color:var(--red)}
.fila.justificado,.fila.aprobado{border-left-color:var(--green)}
.fila-top{display:flex;align-items:flex-start;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.fila-t{font-size:14px;font-weight:700;line-height:1.4;flex:1;min-width:160px}
.fila-d{font-size:12.5px;line-height:1.55;color:rgba(252,252,252,.7)}
.fila-d b{color:var(--white)}
.fila-pie{margin-top:9px;font-size:11.5px;color:var(--muted);line-height:1.5}
.fila-acts{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}

/* Tabla de jornadas */
.jt-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px}
.jt{width:100%;border-collapse:collapse;font-size:12.5px;min-width:660px}
.jt th{
  text-align:left;font-family:'Morton',sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  padding:11px 13px;background:rgba(0,0,0,.24);border-bottom:1px solid var(--border);white-space:nowrap;
}
.jt td{padding:11px 13px;border-bottom:1px solid rgba(255,255,255,.05);white-space:nowrap}
.jt tr:last-child td{border-bottom:0}
.jt tr:hover td{background:rgba(255,255,255,.02)}
.jt .mal{color:var(--red);font-weight:700}
.jt .bien{color:var(--green)}
.jt .nada{color:rgba(255,255,255,.2)}

@media (max-width:760px){
  .ct{padding:18px 14px 60px}
  .campana-caja{position:fixed;right:12px;left:12px;width:auto;top:70px}
}

/* ═══════════════════════════════════════════════════════
   FASE 3 — App instalable, avisos y mapa
═══════════════════════════════════════════════════════ */

/* Bloque de app y avisos en la pantalla de David */
.app-box{
  background:var(--gray2);border:1px solid var(--border);border-top:2px solid var(--green);
  border-radius:12px;padding:15px;margin-bottom:14px;
}
.app-t{
  font-family:'Morton',sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--green);margin-bottom:10px;
}
.app-txt{font-size:12.5px;line-height:1.55;color:rgba(252,252,252,.7)}
.app-txt b{color:var(--white)}

/* ── Mapa ──────────────────────────────────────────────── */
#mapa{
  height:min(60vh,520px);border-radius:11px;border:1px solid var(--border);
  background:var(--gray2);overflow:hidden;
}
.mapa-nota{
  font-size:13px;line-height:1.55;color:rgba(252,252,252,.72);
  margin-bottom:13px;
}
.mapa-nota b{color:var(--white)}
.mapa-nota .lejos{color:var(--amber);font-weight:700}
.mapa-nota .cerca{color:var(--green);font-weight:700}
.mapa-pie{margin-top:11px;font-size:11.5px;line-height:1.55;color:var(--muted)}

.leyenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:13px;font-size:11.5px;color:var(--muted)}
.leyenda span{display:inline-flex;align-items:center;gap:7px}
.leyenda .pt{width:11px;height:11px;border-radius:50%;display:inline-block;border:2px solid #fff}
.leyenda .pt.taller{background:var(--green)}
.leyenda .pt.marca{background:var(--blue)}
.leyenda .pt.vuelta{background:var(--amber)}
.leyenda .pt.ping{background:#8a8a85}
.leyenda .pt.ruta{background:#3ec98a}
.leyenda .pt.caja{background:#8e5bd0}

/* Marcadores numerados */
.pin{
  width:26px;height:26px;border-radius:50%;border:2.5px solid #fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Morton',sans-serif;font-size:11px;font-weight:800;color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.45);
}
.pin.marca {background:#256EFF}
.pin.vuelta{background:#e0a33e;color:#26210f}
.pin.ping  {background:#6f6f68}
.pin.caja  {background:#8e5bd0}
.pin.ruta  {background:#3ec98a;color:#0d2318}
.pin.fuera {border-color:#FF495C}

/* Popup de Leaflet con la piel del portal */
.leaflet-popup-content-wrapper{
  background:#1d1d1b;color:var(--white);border-radius:9px;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 34px rgba(0,0,0,.5);
}
.leaflet-popup-tip{background:#1d1d1b;border:1px solid rgba(255,255,255,.12)}
.leaflet-popup-content{margin:12px 14px;font-family:'Karla',system-ui,sans-serif;font-size:12.5px;line-height:1.55}
.leaflet-popup-content b{font-size:13px}
.leaflet-popup-content .sub{color:var(--muted);font-size:11.5px}
.leaflet-container a.leaflet-popup-close-button{color:var(--muted)}
.leaflet-container{background:#20201e}
.leaflet-control-attribution{background:rgba(25,25,23,.8)!important;color:var(--muted)!important;font-size:10px}
.leaflet-control-attribution a{color:var(--muted)!important}

/* ── Fase 2: rutas ──────────────────────────────────────────────────
   La ruta en curso es lo primero que ve David, así que va destacada. */
.mn-sec.destacada{
  border:1px solid rgba(37,110,255,.32);
  background:linear-gradient(180deg,rgba(37,110,255,.07),transparent 62%);
  border-radius:16px;padding:15px 14px 14px;margin-bottom:18px;
}
.ruta-reloj{
  margin-left:auto;font-size:11.5px;font-weight:600;color:var(--muted);
  letter-spacing:.02em;white-space:nowrap;
}
.ruta-pista{margin:9px 2px 0;font-size:11.5px;line-height:1.5;color:var(--muted)}
.acc-ruta{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}
.acc-ruta .btn-grande{flex:1 1 140px;margin:0}
.vc-pausa{
  margin:-2px 3px 8px;font-size:11.5px;line-height:1.45;color:#f0b429;
}
/* Fecha y hora juntas en el formulario de la vuelta */
.campo-fila{display:flex;gap:8px}
.campo-fila input[type=date]{flex:2 1 auto;min-width:0}
.campo-fila input[type=time]{flex:1 1 110px;min-width:0}
.fila-descargo{
  margin-top:9px;padding:9px 11px;border-radius:10px;
  background:rgba(37,110,255,.08);border:1px solid rgba(37,110,255,.22);
  font-size:12.5px;line-height:1.5;color:rgba(252,252,252,.8);
}

/* Historial de rutas: cada punto de la salida, en orden */
.rt-lista{list-style:none;margin:10px 0 4px;padding:0;display:flex;flex-direction:column;gap:7px}
.rt-lista li{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);font-size:12.5px;line-height:1.45;
}
.rt-h{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.rt-d{flex:1 1 180px;min-width:0}
.rt-m{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ahora-ruta{margin:2px 0 12px;font-size:12.5px;color:var(--muted);line-height:1.5}

/* ── Fase 3: día completo ──────────────────────────────────────────── */
.dia-barra-wrap{margin-top:16px}
.dia-barra{display:flex;height:26px;border-radius:8px;overflow:hidden;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03)}
.dia-barra i{display:block;height:100%;min-width:2px}
.dia-barra i.dentro{background:linear-gradient(180deg,#3ec98a,#2fa871)}
.dia-barra i.fuera {background:linear-gradient(180deg,#e0a33e,#c2872b)}
.dia-barra-pie{display:flex;justify-content:space-between;margin-top:6px;
  font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.dia-nota{margin-top:9px;font-size:11.5px;line-height:1.5;color:var(--muted)}

.dia-linea{list-style:none;margin:11px 0 0;padding:0;position:relative}
.dia-linea::before{content:'';position:absolute;left:52px;top:6px;bottom:6px;
  width:1px;background:rgba(255,255,255,.09)}
.dia-linea li{display:flex;gap:14px;padding:7px 0;position:relative}
.dia-linea time{flex:0 0 44px;text-align:right;font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;padding-top:2px}
.dia-linea .dot{flex:0 0 9px;height:9px;border-radius:50%;margin-top:6px;
  border:2px solid var(--bg,#151513);box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.dia-linea .dot.dentro{background:#3ec98a}
.dia-linea .dot.fuera {background:#e0a33e}
.dia-linea .cuerpo{flex:1;min-width:0;font-size:13px;line-height:1.5}
.dia-linea .cuerpo b{font-weight:650}
.dia-linea .dir{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.dia-alerta{margin-top:14px;padding:12px 14px;border-radius:11px;
  background:rgba(224,163,62,.09);border:1px solid rgba(224,163,62,.28);
  font-size:13px;line-height:1.55}