/* ============================================================
   Rendio Turnos · Design system
   ============================================================ */

* { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
/* Sin 300ms delay al tocar botones en iOS antiguo + mejor respuesta táctil */
button, a, .shift-btn, .day-all-btn, .pref-btn, .state-pick-btn, .tab-btn { touch-action: manipulation; }

/* Safe-area bottom para el sticky bar del conductor (iPhone X+ home indicator).
   Solo aplica en mobile (en md+ el bar se vuelve static). */
@media (max-width: 767px) {
  .driver-save-bar-safe {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
  }
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- Splash / boot animation ---------- */
#screen-splash {
  transition: opacity 700ms ease-out;
}
#screen-splash.fade-out {
  opacity: 0;
  pointer-events: none;
}
.splash-logo {
  opacity: 0;
  transform: scale(0.92);
  animation: splash-in 1100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes splash-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .splash-logo { animation: none; opacity: 1; transform: none; }
  #screen-splash { transition: none; }
}

/* ---------- Tabs (admin) ---------- */
.tab-btn { font-weight: 600; color: rgb(71 85 105); transition: all 0.15s; }
.tab-btn:hover { color: rgb(15 23 42); }
.tab-btn.active { color: rgb(244 121 31); border-bottom-color: rgb(244 121 31) !important; }

/* ---------- Schedule table (admin + driver pie) ---------- */
#schedule-table { border-collapse: collapse; width: 100%; min-width: 720px; }
#schedule-table th, #schedule-table td {
  border: 1px solid rgb(226 232 240);
  padding: 8px 10px;
  vertical-align: middle;
}
#schedule-table thead th { background: white; font-weight: 700; }
.row-morning   { background-color: rgb(219 234 254); }
.row-afternoon { background-color: rgb(186 230 253); }
.row-rest td   { font-style: italic; font-weight: 600; color: rgb(71 85 105); }
.cell-label    { background: white !important; font-weight: 700; text-align: left; min-width: 180px; }
.shift-cell    { cursor: pointer; text-align: center; font-weight: 600; white-space: nowrap; }
.shift-cell:hover { outline: 2px solid rgb(244 121 31); outline-offset: -2px; }
.row-coord     { background-color: rgb(220 252 231); }
.row-coord td  { font-weight: 700; color: rgb(22 101 52); }

/* ---------- Availability matrix ---------- */
#availability-table th, #availability-table td {
  border: 1px solid rgb(226 232 240);
  padding: 6px 8px;
}
#availability-table th { font-weight: 600; }

.avail-pill {
  font-size: 11px; padding: 5px 9px; border-radius: 6px; font-weight: 700;
  border: 1px solid transparent; cursor: pointer; user-select: none;
  letter-spacing: 0.5px;
}
.avail-pill[data-state="available"]    { background-color: rgb(187 247 208); color: rgb(20 83 45); }
.avail-pill[data-state="prefer_rest"]  { background-color: rgb(253 230 138); color: rgb(120 53 15); }
.avail-pill[data-state="unavailable"]  { background-color: rgb(254 205 211); color: rgb(136 19 55); }
/* Bloqueado por parametrización: gris pizarra con borde punteado (regla fija
   del sistema, distinto del rosado "No disponible" que pide el conductor). */
.avail-pill[data-state="blocked"]      { background-color: rgb(226 232 240); color: rgb(51 65 85); border-style: dashed; border-color: rgb(148 163 184); cursor: not-allowed; }

/* ---------- Driver: day cards (mobile-first) ---------- */
.day-card {
  background: white;
  border: 1px solid rgb(226 232 240);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s;
}
.day-card.is-weekend { background: linear-gradient(135deg, #fff 0%, #F8FAFC 100%); border-color: rgb(255 226 203); }
.day-card.is-today { border-color: rgb(244 121 31); box-shadow: 0 0 0 3px rgba(244,121,31,0.1); }

.day-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.day-card-day {
  font-size: 18px; font-weight: 800; color: rgb(10 10 10);
  letter-spacing: -0.3px;
}
.day-card-date {
  font-size: 11px; font-weight: 600; color: rgb(100 116 139);
  text-transform: uppercase; letter-spacing: 1px;
}

.day-card-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}

.shift-btn {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 4px; padding: 12px;
  border-radius: 12px; border: 2px solid transparent;
  cursor: pointer; transition: transform 0.1s, box-shadow 0.15s;
  text-align: center; user-select: none;
}
.shift-btn:active { transform: scale(0.97); }
.shift-btn-label {
  font-size: 10px; font-weight: 700;
  color: rgb(100 116 139);
  letter-spacing: 1.5px;
}
.shift-btn-state {
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

.shift-btn[data-state="available"]    { background: rgb(220 252 231); border-color: rgb(187 247 208); }
.shift-btn[data-state="available"] .shift-btn-state { color: rgb(20 83 45); }
.shift-btn[data-state="prefer_rest"]  { background: rgb(254 243 199); border-color: rgb(253 230 138); }
.shift-btn[data-state="prefer_rest"] .shift-btn-state { color: rgb(120 53 15); }
.shift-btn[data-state="unavailable"]  { background: rgb(254 226 226); border-color: rgb(254 205 211); }
.shift-btn[data-state="unavailable"] .shift-btn-state { color: rgb(136 19 55); }
/* Bloqueado por parametrización (descanso fijo) — solo lectura. */
.shift-btn[data-state="blocked"], .shift-btn-blocked {
  background: rgb(241 245 249); border-color: rgb(203 213 225); border-style: dashed;
  cursor: not-allowed; opacity: 0.92;
}
.shift-btn[data-state="blocked"] .shift-btn-state, .shift-btn-blocked .shift-btn-state { color: rgb(51 65 85); }
.day-fixed-note {
  margin: 6px 2px 0; font-size: 12px; font-weight: 600; color: rgb(71 85 105);
}

.day-all-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  font-size: 13px; padding: 11px 16px; border-radius: 12px;
  background: rgb(244 121 31); border: 1.5px solid rgb(244 121 31);
  color: white; font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(244,121,31,0.25);
  transition: background 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.day-all-btn:hover {
  background: rgb(216 95 8); border-color: rgb(216 95 8); color: white;
  box-shadow: 0 4px 12px rgba(244,121,31,0.3);
}
.day-all-btn:active { transform: scale(0.98); }

/* Colapsable "Horario completo del equipo" (vista conductor) */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
.details-chevron {
  display: inline-block;
  transition: transform 0.2s ease;
}
details[open] .details-chevron { transform: rotate(180deg); }

/* Mis turnos resaltados en el horario publicado (vista conductor) */
.my-shift-cell {
  background: rgb(255 226 203);        /* brand-100 */
  color: rgb(168 73 8);                /* brand-700 */
  font-weight: 800;
  outline: 2px solid rgb(244 121 31);  /* brand */
  outline-offset: -3px;
  border-radius: 6px;
  position: relative;
}

/* Preferencia AM/PM/Indistinto por día (solo si AM y PM disponibles) */
.day-pref-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.day-pref-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgb(100 116 139);
  font-weight: 600;
}
.pref-btn {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgb(203 213 225);
  background: white;
  color: rgb(71 85 105);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.pref-btn:hover { background: rgb(241 245 249); }
.pref-btn.pref-on {
  background: rgb(244 121 31);
  border-color: rgb(244 121 31);
  color: white;
}

/* Approval badge dentro de shift-btn */
.approval-badge {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  padding: 2px 6px; border-radius: 999px;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.approval-badge[data-state="pending"]   { background-color: rgb(219 234 254); color: rgb(30 64 175); }
.approval-badge[data-state="approved"]  { background-color: rgb(209 250 229); color: rgb(6 95 70); }
.approval-badge[data-state="rejected"]  { background-color: rgb(254 226 226); color: rgb(153 27 27); }

/* State dot (legend + picker) */
.state-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 999px;
  flex-shrink: 0;
}
.state-available    { background-color: rgb(16 185 129); }
.state-prefer-rest  { background-color: rgb(245 158 11); }
.state-unavailable  { background-color: rgb(225 29 72); }

/* State picker modal */
.state-pick-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgb(248 250 252);
  border: 2px solid rgb(226 232 240); border-radius: 12px;
  cursor: pointer; transition: all 0.15s;
}
.state-pick-btn:hover { background: white; border-color: rgb(244 121 31); }
.state-pick-btn:active { transform: scale(0.98); }

/* ---------- Request cards (driver "Mis solicitudes") ---------- */
.request-card {
  background: white; border: 1px solid rgb(226 232 240);
  border-radius: 12px; padding: 12px 14px;
  display: flex; gap: 12px; align-items: flex-start;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.request-card-icon {
  width: 36px; height: 36px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 16px;
}
.request-card[data-state="pending"]  .request-card-icon { background: rgb(219 234 254); color: rgb(30 64 175); }
.request-card[data-state="approved"] .request-card-icon { background: rgb(209 250 229); color: rgb(6 95 70); }
.request-card[data-state="rejected"] .request-card-icon { background: rgb(254 226 226); color: rgb(153 27 27); }

/* ---------- Approval cards (admin) ---------- */
.approval-card {
  background: white; border: 1px solid rgb(226 232 240);
  border-radius: 16px; padding: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.approval-card.has-conflict {
  border-color: rgb(245 158 11);
  background: linear-gradient(135deg, #fff 0%, #fffbeb 100%);
}
.approval-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; }
.approval-row + .approval-row { border-top: 1px solid rgb(241 245 249); }

/* ---------- Worker cards ---------- */
.worker-card {
  background: white; border: 1px solid rgb(226 232 240);
  border-radius: 12px; padding: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.worker-card.coordinator { border-color: rgb(244 121 31); background: linear-gradient(135deg, #fff 0%, #F8FAFC 100%); }
.worker-card.is-suspended { opacity: 0.85; background: rgb(248 250 252); border-style: dashed; }
.worker-actions { display: flex; gap: 8px; margin-top: 12px; }
.wk-btn {
  flex: 1; font-size: 12px; font-weight: 700; padding: 8px 10px;
  border-radius: 9px; border: 1.5px solid; cursor: pointer;
  background: white; transition: background 0.15s, color 0.15s;
}
.wk-suspend    { border-color: rgb(245 158 11); color: rgb(180 83 9); }
.wk-suspend:hover    { background: rgb(245 158 11); color: white; }
.wk-reactivate { border-color: rgb(16 185 129); color: rgb(4 120 87); }
.wk-reactivate:hover { background: rgb(16 185 129); color: white; }
.wk-delete     { border-color: rgb(244 63 94); color: rgb(190 18 60); }
.wk-delete:hover     { background: rgb(244 63 94); color: white; }
.wk-coord-on   { border-color: rgb(244 121 31); color: white; background: rgb(244 121 31); }
.wk-coord-on:hover   { background: rgb(216 95 8); border-color: rgb(216 95 8); }
.wk-coord-off  { border-color: rgb(203 213 225); color: rgb(100 116 139); }
.wk-coord-off:hover  { background: rgb(241 245 249); }
.wk-btn:disabled { opacity: 0.5; cursor: default; }
/* ---------- Strikes (Fase 2) ---------- */
.wk-strike     { border-color: rgb(245 158 11); color: rgb(146 64 14); }
.wk-strike:hover     { background: rgb(245 158 11); color: white; }
.wk-history    { border-color: rgb(148 163 184); color: rgb(71 85 105); }
.wk-history:hover    { background: rgb(241 245 249); }
.wk-strike-void { flex: 0 0 auto; border-color: rgb(148 163 184); color: rgb(71 85 105); font-size: 11px; padding: 4px 8px; }
.worker-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wk-strike-badge {
  font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
  background: rgb(254 243 199); color: rgb(146 64 14); border: 1px solid rgb(253 230 138);
}
.wk-susp-badge {
  font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
  background: rgb(254 226 226); color: rgb(153 27 27); border: 1px solid rgb(254 205 211);
}
/* Modal genérico (historial de strikes) */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 60;
}
.modal-card {
  background: white; border-radius: 16px; width: 100%; max-width: 460px;
  max-height: 80vh; overflow-y: auto; padding: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.modal-head { margin-bottom: 12px; }
.modal-title { font-size: 16px; font-weight: 800; color: rgb(15 23 42); }
.modal-subtitle { font-size: 13px; color: rgb(100 116 139); margin-top: 2px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.strikes-list { display: flex; flex-direction: column; gap: 8px; }
.strike-item {
  display: flex; gap: 10px; justify-content: space-between; align-items: flex-start;
  border: 1px solid rgb(226 232 240); border-radius: 10px; padding: 10px 12px;
}
.strike-item-reason { font-size: 13px; font-weight: 600; color: rgb(30 41 59); }
.strike-item-meta { font-size: 11px; color: rgb(100 116 139); margin-top: 2px; }
.strike-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.strike-tag { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.strike-tag-active   { background: rgb(254 243 199); color: rgb(146 64 14); }
.strike-tag-void     { background: rgb(241 245 249); color: rgb(100 116 139); }
.strike-tag-consumed { background: rgb(224 231 255); color: rgb(55 48 163); }
/* Expirado: ni anulado ni consumido, pero de un mes ya cerrado — hoy no cuenta.
   Va con borde punteado y sin relleno justamente para NO parecerse a 'Anulado':
   a un anulado lo perdonó alguien, un expirado se venció solo al cambiar el mes.
   El conductor que venga a reclamar tiene derecho a ver esa diferencia. */
.strike-tag-expired  { background: transparent; color: rgb(100 116 139); border: 1px dashed rgb(203 213 225); padding: 1px 6px; }

/* ---------- Swaps / cambios de turno (Fase 3) ---------- */
.swap-card {
  background: white; border: 1px solid rgb(226 232 240); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px;
}
.swap-card[data-state="accepted"] { border-color: rgb(167 243 208); background: rgb(240 253 244); }
.swap-card[data-state="rejected"] { border-color: rgb(254 205 211); background: rgb(254 242 242); }
.swap-card[data-state="cancelled"] { opacity: 0.7; }
.swap-card-title { font-size: 13px; font-weight: 700; color: rgb(30 41 59); }
.swap-card-detail { font-size: 12px; color: rgb(71 85 105); margin-top: 4px; }
.swap-card-note { font-size: 12px; color: rgb(100 116 139); font-style: italic; margin-top: 4px; }
.swap-card-actions { display: flex; gap: 8px; margin-top: 10px; }
.swap-field { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; font-size: 12px; font-weight: 700; color: rgb(71 85 105); }
.swap-field select, .swap-field input {
  font-size: 14px; font-weight: 500; padding: 9px 10px; border-radius: 9px;
  border: 1.5px solid rgb(203 213 225); color: rgb(15 23 42); background: white;
}

/* ---------- Editor de reglas / descansos fijos (Fase 4) ---------- */
.rules-grid { display: flex; flex-direction: column; gap: 6px; }
.rule-row { display: flex; align-items: center; gap: 8px; }
.rule-day { flex: 1; font-size: 13px; font-weight: 600; color: rgb(51 65 85); }
.rule-cell {
  flex: 0 0 84px; font-size: 12px; font-weight: 700; padding: 7px 8px; border-radius: 8px;
  border: 1.5px solid rgb(203 213 225); background: white; color: rgb(100 116 139); cursor: pointer;
}
.rule-cell.rule-on { background: rgb(226 232 240); border-color: rgb(148 163 184); border-style: dashed; color: rgb(51 65 85); }
.rule-cell:disabled { opacity: 0.5; cursor: default; }

/* ---------- Barra de activar notificaciones (Fase 5) ---------- */
.push-bar {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  background: rgb(255 247 237); border: 1px solid rgb(254 215 170);
  color: rgb(154 52 18); font-size: 12px; font-weight: 600;
  padding: 10px 14px; border-radius: 12px; margin: 10px;
}

/* ---------- Conflict modal (pre-Generar) ---------- */
.conflict-group {
  background: white; border: 1px solid rgb(226 232 240);
  border-radius: 14px; padding: 12px;
}
.conflict-group.is-forced { border-color: rgb(244 63 94); background: linear-gradient(135deg, #fff 0%, #fff1f2 100%); }
.conflict-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.conf-dec { background: white; border-color: rgb(203 213 225); color: rgb(71 85 105); }
.conf-dec-on.conf-rest { background: rgb(16 185 129); border-color: rgb(16 185 129); color: white; }
.conf-dec-on.conf-work { background: rgb(244 121 31); border-color: rgb(244 121 31); color: white; }

/* ---------- Print ---------- */
@media print {
  header, nav, #schedule-warnings, #worker-summary, .no-print, button, #toast,
  #driver-save-bar, #driver-requests-container { display: none !important; }
  main { padding: 0; max-width: none; }
  #schedule-container, #driver-schedule-container { border: none; box-shadow: none; }
  body { background: white; }
  section[data-panel]:not([data-panel="schedule"]) { display: none !important; }
  #screen-driver > *:not(:last-child):not(#driver-schedule-container) { display: none !important; }
}

/* =====================================================================
   Personal — reskin dirección C (maestro-detalle). VISUAL ONLY.
   Todo scopeado bajo .pc para no afectar el resto de la app.
   ===================================================================== */
.pc{
  --pc-panel:#FFFFFF; --pc-panel2:#F1F5F9; --pc-ink:#211D18; --pc-ink2:#6B6258; --pc-ink3:#A39A8D;
  --pc-line:#E2E8F0; --pc-line2:#CBD5E1;
  --pc-orange:#F26522; --pc-orange-soft:#FCE4D6;
  --pc-green:#16936A; --pc-green-soft:#E0F1E8;
  --pc-amber:#D98A12; --pc-amber-soft:#FBEBCF;
  --pc-red:#DB4B3F; --pc-red-soft:#FADFDC;
  --pc-shadow:0 8px 20px rgba(33,29,24,.08);
  font-family:"Hanken Grotesk",system-ui,sans-serif; color:var(--pc-ink);
}
.pc *{box-sizing:border-box}
.pc .pc-icon{width:14px;height:14px;flex:0 0 auto;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none;display:inline-block;vertical-align:middle}
.pc .av{border-radius:999px;display:grid;place-items:center;font-weight:800;color:#fff;letter-spacing:-.02em;flex:0 0 auto}
.pc .statechip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap;background:var(--pc-green-soft);color:var(--pc-green)}
.pc .statechip.warn{background:var(--pc-amber-soft);color:var(--pc-amber)}
.pc .statechip.sus{background:var(--pc-ink);color:var(--pc-panel)}
.pc .statechip.risk{background:var(--pc-red-soft);color:var(--pc-red)}
.pc .statechip.role{background:var(--pc-panel2);color:var(--pc-ink2)}
.pc .statechip.coord{background:var(--pc-orange-soft);color:var(--pc-orange)}
.pc .sdot{width:8px;height:8px;border-radius:999px;flex:0 0 auto}
.pc .sdot.ok{background:var(--pc-green)} .pc .sdot.warn{background:var(--pc-amber)} .pc .sdot.sus{background:var(--pc-ink3)} .pc .sdot.risk{background:var(--pc-red)}
.pc .strikes{display:inline-flex;gap:4px;align-items:center}
.pc .strikes i{width:10px;height:10px;border-radius:3px;background:var(--pc-line);border:1px solid var(--pc-line2)}
.pc .strikes i.f{background:var(--pc-amber);border-color:var(--pc-amber)} .pc .strikes.risk i.f{background:var(--pc-red);border-color:var(--pc-red)}

/* layout maestro-detalle */
.pc .md{display:grid;grid-template-columns:330px 1fr;gap:16px;align-items:start}
.pc .mdlist{background:var(--pc-panel);border:1px solid var(--pc-line);border-radius:16px;overflow:hidden;box-shadow:var(--pc-shadow)}
.pc .mdlist .lh{padding:10px 12px;border-bottom:1px solid var(--pc-line);background:var(--pc-panel2)}
.pc .pc-search{display:flex;align-items:center;gap:8px;height:36px;border:1px solid var(--pc-line2);border-radius:10px;background:var(--pc-panel);padding:0 11px;color:var(--pc-ink3)}
.pc .pc-search input{border:0;background:transparent;outline:none;font-family:inherit;font-size:13px;color:var(--pc-ink);width:100%}
.pc .pc-secth{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--pc-ink3);padding:10px 14px 5px;background:var(--pc-panel2)}
.pc .mrow{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--pc-line);cursor:pointer;transition:background .12s}
.pc .mrow:hover{background:var(--pc-panel2)}
.pc .mrow.on{background:var(--pc-orange-soft)}
.pc .mrow.sus{opacity:.6}
.pc .mrow .av{width:34px;height:34px;font-size:12px}
.pc .mrow .nm{min-width:0}
.pc .mrow .nm b{font-size:13px;font-weight:700;letter-spacing:-.01em;display:block;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc .mrow .nm span{font-size:10.5px;color:var(--pc-ink2);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc .mrow .mini{width:42px;height:5px;border-radius:99px;background:var(--pc-line);overflow:hidden}
.pc .mrow .mini i{display:block;height:100%;background:var(--pc-green)} .pc .mrow .mini.hi i{background:var(--pc-red)} .pc .mrow .mini.lo i{background:var(--pc-amber)}

.pc .detail{background:var(--pc-panel);border:1px solid var(--pc-line);border-radius:16px;box-shadow:var(--pc-shadow);overflow:hidden}
.pc .dhead{display:flex;align-items:center;gap:16px;padding:20px 22px;background:linear-gradient(180deg,var(--pc-panel2),var(--pc-panel));border-bottom:1px solid var(--pc-line)}
.pc .dhead .av{width:58px;height:58px;font-size:19px}
.pc .dhead h2{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0}
.pc .dhead .mail{font-size:13px;color:var(--pc-ink2);margin-top:3px}
.pc .dhead .chips{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.pc .dbody{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--pc-line)}
.pc .dblock{background:var(--pc-panel);padding:16px 20px}
.pc .dblock.full{grid-column:1/-1}
.pc .dblock h3{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pc-ink3);margin:0 0 12px}
.pc .bigload{display:flex;align-items:center;gap:14px}
.pc .bigload .num{font-size:28px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.pc .bigload .num s{font-size:15px;color:var(--pc-ink3);text-decoration:none}
.pc .bigload .bar{flex:1;height:9px;border-radius:99px;background:var(--pc-line);overflow:hidden}
.pc .bigload .bar i{display:block;height:100%;background:var(--pc-green)} .pc .bigload.hi .bar i{background:var(--pc-red)} .pc .bigload.lo .bar i{background:var(--pc-amber)}
.pc .breakdown{display:flex;gap:18px;margin-top:14px}
.pc .breakdown div{font-size:12px;color:var(--pc-ink2)} .pc .breakdown div b{display:block;font-size:18px;font-weight:800;color:var(--pc-ink);font-variant-numeric:tabular-nums}
.pc .ruleitem{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--pc-line)}
.pc .ruleitem:last-child{border-bottom:0}
.pc .ruleitem .t{font-size:13px;color:var(--pc-ink);font-weight:600}
.pc .ruleitem .v{font-size:12px;color:var(--pc-ink2);text-align:right}
.pc .ruleitem .v.lock{color:var(--pc-ink);font-weight:700}
.pc .dactions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;padding:14px 20px;border-top:1px solid var(--pc-line);background:var(--pc-panel2)}
.pc .dactions .spacer{flex:1}
.pc .pc-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--pc-line2);background:var(--pc-panel);color:var(--pc-ink2);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:.14s}
.pc .pc-btn:hover{color:var(--pc-ink);border-color:var(--pc-ink3)}
.pc .pc-btn.on{background:var(--pc-orange-soft);color:var(--pc-orange);border-color:transparent}
.pc .pc-btn.danger{color:var(--pc-red);border-color:color-mix(in srgb,var(--pc-red) 40%,var(--pc-line2))}
.pc .pc-btn:disabled{opacity:.5;cursor:default}
@media(max-width:900px){.pc .md{grid-template-columns:1fr}}

/* ==================== Inicio de turno (shift-flow.js) ==================== */
/* Stepper de 6 segmentos del wizard (espeja el diseño de /Visual). */
.sf-stepper{display:flex;gap:6px}
.sf-seg{flex:1;height:4px;border-radius:999px;background:#E2E8F0;transition:background .2s}
.sf-seg.done{background:#F4791F}
.sf-seg.active{background:#FAA260}

/* =====================================================================
   Horario — Tablero v4 (board drag & drop). VISUAL ONLY.
   Todo scopeado bajo #schedule-board para no afectar el resto de la app.
   Modo oscuro: data-theme="dark" en #schedule-board (NO en <html>).
   ===================================================================== */
#schedule-board{
  --bg:#F8FAFC; --panel:#FFFFFF; --panel2:#F1F5F9; --ink:#211D18; --ink2:#6B6258; --ink3:#A39A8D;
  --line:#E2E8F0; --line2:#CBD5E1;
  --orange:#F26522; --orange-soft:#FCE4D6;
  --green:#16936A; --green-soft:#E0F1E8;
  --amber:#D98A12; --amber-soft:#FBEBCF;
  --red:#DB4B3F; --red-soft:#FADFDC;
  --am-zone:#DBEAFE; --pm-zone:#BAE6FD; --co-zone:#DCFCE7;
  --shadow:0 8px 20px rgba(33,29,24,.08); --shadow-lg:0 22px 44px rgba(33,29,24,.20);
  --font:"Hanken Grotesk",system-ui,sans-serif; --serif:"Newsreader",Georgia,serif; --mono:"Space Mono",ui-monospace,monospace;
  font-family:var(--font); color:var(--ink); background:var(--bg);
  display:grid; grid-template-rows:auto auto 1fr; border:1px solid var(--line); border-radius:16px;
  overflow:hidden; height:calc(100vh - 200px); min-height:540px; transition:background .3s,color .3s;
}
#schedule-board[data-theme="dark"]{
  --bg:#0C0D10; --panel:#15171C; --panel2:#1A1D24; --ink:#E8EAEE; --ink2:#9AA1AB; --ink3:#5B626D;
  --line:#262A32; --line2:#333944;
  --orange:#FF7A3D; --orange-soft:#2A1810;
  --green:#2ED391; --green-soft:#10271E;
  --amber:#F5B53D; --amber-soft:#2C2212;
  --red:#FF5E4F; --red-soft:#2E1512;
  --am-zone:#16202E; --pm-zone:#102530; --co-zone:#12251B;
  --shadow:0 8px 20px rgba(0,0,0,.4); --shadow-lg:0 22px 44px rgba(0,0,0,.55);
}
#schedule-board *{box-sizing:border-box;margin:0;padding:0}
#schedule-board .icon{width:14px;height:14px;flex:0 0 auto;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}

/* top bar */
#schedule-board .top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:0 18px;min-height:58px;background:var(--panel);border-bottom:1px solid var(--line)}
#schedule-board .wm{display:flex;align-items:baseline;gap:9px}
#schedule-board .wm b{font-size:19px;font-weight:800;letter-spacing:-.03em}
#schedule-board .wm i{width:7px;height:7px;border-radius:999px;background:var(--orange);display:inline-block;transform:translateY(-1px)}
#schedule-board .wm s{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);text-decoration:none}
#schedule-board .weeknav{display:flex;align-items:center;gap:8px;justify-self:start}
#schedule-board .weeknav button{width:30px;height:30px;border:1px solid var(--line2);background:var(--panel);border-radius:9px;color:var(--ink2);display:grid;place-items:center;cursor:pointer;font-size:15px}
#schedule-board .weeknav .wk{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
#schedule-board .weeknav .chip{margin-left:6px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--amber-soft);color:var(--amber)}
#schedule-board .weeknav .chip.ok{background:var(--green-soft);color:var(--green)}
#schedule-board .acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;padding:8px 0}
#schedule-board .iconbtn{width:36px;height:36px;border:1px solid var(--line2);background:var(--panel);border-radius:10px;color:var(--ink2);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
#schedule-board .iconbtn:hover{color:var(--ink)}
#schedule-board .btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:10px;border:0;background:var(--orange);color:#fff;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 9px 22px rgba(242,101,34,.28)}
#schedule-board .btn[disabled]{background:var(--line2);color:var(--ink3);box-shadow:none;cursor:not-allowed}
#schedule-board .btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line2);box-shadow:none}

/* KPI band */
#schedule-board .kpis{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.5fr;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
#schedule-board .k{background:var(--panel);padding:11px 18px;display:flex;align-items:center;gap:13px;min-width:0}
#schedule-board .ring{width:46px;height:46px;border-radius:999px;flex:0 0 auto;position:relative;display:grid;place-items:center;background:conic-gradient(var(--rc) calc(var(--p)*1%),var(--line) 0);transition:background .4s}
#schedule-board .ring::after{content:"";position:absolute;width:35px;height:35px;border-radius:999px;background:var(--panel)}
#schedule-board .ring b{position:relative;z-index:1;font-family:var(--mono);font-size:12px;font-weight:700}
#schedule-board .k .tx{min-width:0}
#schedule-board .k .tx em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);display:block;margin-bottom:4px}
#schedule-board .k .tx b{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1;display:block;font-variant-numeric:tabular-nums}
#schedule-board .k .tx span{font-size:11px;color:var(--ink2);display:block;margin-top:4px;line-height:1.3}
#schedule-board .k.warn .tx b{color:var(--amber)} #schedule-board .k.alert .tx b{color:var(--red)} #schedule-board .k.ok .tx b{color:var(--green)}
#schedule-board .k .dotrow{display:flex;gap:4px;margin-top:6px}
#schedule-board .k .dotrow i{width:7px;height:7px;border-radius:99px;background:var(--green)}
#schedule-board .k .dotrow i.e{background:var(--red)} #schedule-board .k .dotrow i.w{background:var(--amber)}

/* layout */
#schedule-board .layout{display:grid;grid-template-columns:1fr 284px;min-height:0}

/* pool */
#schedule-board .pool{background:var(--panel);border-left:1px solid var(--line);display:grid;grid-template-rows:auto auto 1fr auto;min-height:0}
#schedule-board .pool-h{padding:14px 16px 9px}
#schedule-board .pool-h h2{font-size:15px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
#schedule-board .pool-h h2 em{font-style:normal;font-size:12px;font-weight:800;color:var(--panel);background:var(--ink);border-radius:999px;padding:1px 9px}
#schedule-board .pool-h p{font-size:11.5px;color:var(--ink2);margin-top:5px;line-height:1.4}
#schedule-board .search{margin:0 16px 11px;height:34px;border:1px solid var(--line2);border-radius:10px;background:var(--panel2);display:flex;align-items:center;gap:8px;padding:0 11px;color:var(--ink3)}
#schedule-board .search input{border:0;background:transparent;outline:none;font-family:inherit;font-size:12.5px;color:var(--ink);width:100%}
#schedule-board .plist{overflow-y:auto;padding:0 12px 8px;display:grid;gap:6px;align-content:start}
#schedule-board .plist::-webkit-scrollbar{width:8px} #schedule-board .plist::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
#schedule-board .pcard{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:grab;transition:transform .12s,box-shadow .15s,border-color .15s,opacity .15s}
#schedule-board .pcard:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:var(--line2)}
#schedule-board .pcard:active{cursor:grabbing}
#schedule-board .pcard.dragging{opacity:.4}
#schedule-board .pcard[hidden]{display:none}
#schedule-board .av{width:30px;height:30px;border-radius:999px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;flex:0 0 auto}
#schedule-board .pcard .nm{min-width:0}
#schedule-board .pcard .nm b{font-size:13px;font-weight:700;letter-spacing:-.01em;display:block;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#schedule-board .pcard .nm span{font-size:10.5px;color:var(--ink2);display:block;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#schedule-board .load{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
#schedule-board .load b{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink2)}
#schedule-board .meter{width:40px;height:5px;border-radius:99px;background:var(--line);overflow:hidden}
#schedule-board .meter i{display:block;height:100%;border-radius:99px;background:var(--green);transition:width .4s,background .3s}
#schedule-board .meter.hi i{background:var(--red)} #schedule-board .meter.lo i{background:var(--amber)}
#schedule-board .pcard.hi{border-color:var(--red)} #schedule-board .pcard.lo{border-color:var(--green);background:var(--green-soft)}
#schedule-board .pcard.out{opacity:.55;cursor:not-allowed} #schedule-board .pcard.out .av{background:var(--ink3)!important}
#schedule-board .pool-f{padding:11px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
#schedule-board .pool-f b{font-size:12px;font-weight:700;display:flex;align-items:center;gap:7px}
#schedule-board .pool-f span{font-size:11px;color:var(--ink2);line-height:1.4}
#schedule-board .pool.drophere{background:var(--orange-soft)}

/* board */
#schedule-board .board{padding:13px 16px 14px;min-height:0;min-width:0;display:grid;grid-template-rows:auto 1fr;gap:10px}
#schedule-board .board-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
#schedule-board .board-h h1{font-size:18px;font-weight:800;letter-spacing:-.03em}
#schedule-board .board-h p{font-size:12px;color:var(--ink2);margin-top:3px;max-width:560px;line-height:1.4}
#schedule-board .legend{display:flex;gap:13px;font-size:11px;color:var(--ink2);flex-wrap:wrap}
#schedule-board .legend span{display:inline-flex;align-items:center;gap:6px}
#schedule-board .legend i{width:10px;height:10px;border-radius:3px;background:var(--green)}
#schedule-board .legend i.h{background:transparent;border:1.5px dashed var(--line2)} #schedule-board .legend i.c{background:var(--red)}

#schedule-board .week{display:grid;grid-template-columns:54px repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line2);border-radius:16px;overflow:auto;box-shadow:var(--shadow);min-height:0}
#schedule-board .corner{background:var(--panel2);display:grid;place-items:center;color:var(--ink3);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.04em;position:sticky;left:0;z-index:2}
#schedule-board .bl{background:var(--panel2);display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);padding:4px 0;position:sticky;left:0;z-index:2}
#schedule-board .dhead{background:var(--panel2);display:flex;flex-direction:column;gap:7px;padding:9px 11px;justify-content:flex-start}
#schedule-board .dhead .drow{display:flex;align-items:baseline;gap:7px}
#schedule-board .dhead .dnum{font-size:18px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
#schedule-board .dhead .dow{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}
#schedule-board .dhead .cvbar{height:4px;border-radius:99px;background:var(--line);overflow:hidden}
#schedule-board .dhead .cvbar i{display:block;height:100%;border-radius:99px;background:var(--green);transition:width .4s,background .3s}
#schedule-board .dhead .cvtx{font-size:9.5px;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}
#schedule-board .dhead.warn .cvbar i{background:var(--amber)} #schedule-board .dhead.warn .cvtx{color:var(--amber)}
#schedule-board .dhead.alert .cvbar i{background:var(--red)} #schedule-board .dhead.alert .cvtx{color:var(--red)}
#schedule-board .dhead.today{background:var(--orange-soft);box-shadow:inset 0 3px 0 var(--orange)}
#schedule-board .dhead.today .dnum{color:var(--orange)}
#schedule-board .zone{background:var(--panel);padding:7px;display:grid;gap:6px;align-content:start;min-height:0;transition:background .15s,box-shadow .15s}
#schedule-board .zone.wknd{background:var(--panel2)}
/* Color por jornada: AM azul, PM cian, Coordinación verde (diferencia visual). */
#schedule-board .zone[data-kind="morning"]{background:var(--am-zone)}
#schedule-board .zone[data-kind="afternoon"]{background:var(--pm-zone)}
#schedule-board .zone[data-kind^="coord"]{background:var(--co-zone)}
#schedule-board .zone.over{background:var(--orange-soft);box-shadow:inset 0 0 0 2px var(--orange)}
#schedule-board .slot{min-height:42px;display:grid}
#schedule-board .asg{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;background:var(--panel);border:1px solid var(--line);box-shadow:0 2px 5px rgba(33,29,24,.05);cursor:grab;transition:transform .12s,box-shadow .15s,opacity .15s}
#schedule-board .asg.just{animation:sb-drop .34s cubic-bezier(.2,.8,.2,1)}
#schedule-board .asg:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
#schedule-board .asg:active{cursor:grabbing}
#schedule-board .asg.dragging{opacity:.35}
#schedule-board .asg .av{width:23px;height:23px;font-size:9.5px}
#schedule-board .asg .nm{min-width:0;flex:1 1 auto}
#schedule-board .asg .lead{flex:0 0 auto;width:16px;height:20px;display:grid;place-items:center;font-size:14px;line-height:1;color:var(--ink3);opacity:0;cursor:pointer;border:0;background:transparent;padding:0;transition:opacity .15s,color .12s,transform .1s}
#schedule-board .asg:hover .lead{opacity:.55}
#schedule-board .asg .lead:hover{color:var(--orange);opacity:.95;transform:scale(1.15)}
#schedule-board .asg .lead.on{opacity:1;color:var(--orange)}
#schedule-board .asg.lead-on{border-color:var(--orange)}
#schedule-board .asg.coord .nm span{color:var(--orange);font-weight:700}
#schedule-board .asg .nm b{font-size:12px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:1.1}
#schedule-board .asg .nm span{font-size:9px;color:var(--ink3);display:block}
#schedule-board .asg .x{margin-left:auto;width:18px;height:18px;border-radius:6px;display:grid;place-items:center;color:var(--ink3);opacity:0;transition:opacity .15s,background .15s;flex:0 0 auto;cursor:pointer}
#schedule-board .asg:hover .x{opacity:1} #schedule-board .asg .x:hover{background:var(--line);color:var(--ink)}
#schedule-board .asg.coord{background:var(--orange-soft);border-color:transparent}
#schedule-board .asg.conf{background:var(--red-soft);border-color:var(--red)} #schedule-board .asg.conf .nm b{color:var(--red)}
#schedule-board .asg.conf .nm span{color:var(--red);opacity:.85}
#schedule-board .asg.soft{background:var(--amber-soft);border-color:var(--amber)}
#schedule-board .drop{border:1.4px dashed var(--line2);border-radius:9px;min-height:42px;display:grid;place-items:center;color:var(--ink3);font-size:11px;font-weight:600;gap:1px;text-align:center;opacity:.65;transition:opacity .15s,border-color .15s,color .15s;cursor:pointer}
#schedule-board .zone:hover .drop,#schedule-board .zone.over .drop{opacity:1}
#schedule-board .zone.over .drop{border-color:var(--orange);color:var(--orange)}
#schedule-board .drop small{font-size:9px;font-weight:600;color:var(--ink3)}
@keyframes sb-drop{from{opacity:0;transform:scale(.94) translateY(-4px)}to{opacity:1;transform:none}}
#schedule-board .conf-badge{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(80px);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:12px;font-size:13px;font-weight:600;box-shadow:var(--shadow-lg);z-index:25;display:flex;align-items:center;gap:9px;transition:transform .3s cubic-bezier(.2,.8,.2,1);max-width:560px;pointer-events:none}
#schedule-board .conf-badge.show{transform:translateX(-50%) translateY(0)}
#schedule-board .conf-badge .led{width:8px;height:8px;border-radius:99px;background:var(--red);box-shadow:0 0 8px var(--red)}

@media(max-width:1080px){#schedule-board .layout{grid-template-columns:1fr 248px}#schedule-board .kpis{grid-template-columns:1.4fr 1fr 1fr 1.4fr}#schedule-board .kpis .k:nth-child(4){display:none}}
@media(max-width:760px){#schedule-board{height:auto;min-height:0}#schedule-board .layout{grid-template-columns:1fr}#schedule-board .pool{border-left:0;border-top:1px solid var(--line)}#schedule-board .kpis{grid-template-columns:1fr 1fr}#schedule-board .kpis .k:nth-child(4){display:flex}#schedule-board .week{overflow-x:auto}}

/* ── Home del conductor (¿Cómo vas a operar hoy?) — animaciones de las tarjetas ── */
.tap{transition:transform .12s ease}
.tap:active{transform:scale(.985)}
@media (prefers-reduced-motion: no-preference){
  .pc-in{animation:pcIn .55s cubic-bezier(.16,1,.3,1) both}
  .pc-in.d1{animation-delay:.06s}
  .pc-in.d2{animation-delay:.18s}
  .sheen{position:relative;overflow:hidden}
  .sheen::after{content:'';position:absolute;top:0;bottom:0;width:55%;left:-80%;pointer-events:none;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);
    animation:sheen 3.6s ease-in-out infinite}
  .bob{animation:bob 2.8s ease-in-out infinite}
  .float{animation:float 3.4s ease-in-out infinite}
}
@keyframes pcIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sheen{0%,55%{left:-80%}88%,100%{left:135%}}
@keyframes bob{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion: no-preference){ .sf-livedot{animation:sfLivedot 1.6s ease-in-out infinite} }
@keyframes sfLivedot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* =====================================================================
   Ajustes — paleta limpia. VISUAL ONLY. Scopeado bajo .set-ui.
   Mismos tokens que el Tablero v4. La lógica vive en admin-personal.js:
   renderSettings / renderPriorityList / renderRulesEditor.
   ===================================================================== */
.set-ui{
  --bg:#F8FAFC; --panel:#FFFFFF; --panel2:#F1F5F9; --ink:#211D18; --ink2:#6B6258; --ink3:#A39A8D;
  --line:#E2E8F0; --line2:#CBD5E1;
  --orange:#F26522; --orange-soft:#FCE4D6;
  --green:#16936A; --green-soft:#E0F1E8;
  --amber:#D98A12; --amber-soft:#FBEBCF;
  --red:#DB4B3F; --red-soft:#FADFDC;
  --rest:#586273; --rest-soft:#EAECEF;
  --shadow:0 6px 18px rgba(33,29,24,.07);
  --font:"Hanken Grotesk",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace;
  font-family:var(--font); color:var(--ink);
}
.set-ui *{box-sizing:border-box}
.set-ui .icon{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}

.set-ui .set-head{margin-bottom:18px}
.set-ui .set-head h1{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.set-ui .set-head p{font-size:13px;color:var(--ink2);margin-top:7px;max-width:680px;line-height:1.4}

.set-ui .set-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);margin-bottom:16px}
.set-ui .set-ch{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}
.set-ui .set-ci{width:36px;height:36px;border-radius:10px;background:var(--panel2);display:grid;place-items:center;color:var(--ink2);flex:0 0 auto}
.set-ui .set-ch h2{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.set-ui .set-ch p{font-size:12px;color:var(--ink2);margin-top:2px;max-width:560px;line-height:1.35}
.set-ui .set-saved{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--green);display:inline-flex;align-items:center;gap:6px;opacity:0;transition:opacity .2s}
.set-ui .set-saved.show{opacity:1}
.set-ui .set-cb{padding:18px}

.set-ui .set-row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.set-ui .set-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.set-ui .set-field > label:not(.set-checkrow){display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:7px}
.set-ui .set-input{height:42px;width:100%;border:1px solid var(--line2);border-radius:10px;background:var(--panel);padding:0 13px;font-family:var(--font);font-size:14px;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
.set-ui .set-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.set-ui .set-input.mono{font-family:var(--mono);font-size:13px}
.set-ui .set-hint{font-size:11.5px;color:var(--ink3);margin-top:6px}
.set-ui .set-foot{display:flex;align-items:center;gap:12px;margin-top:18px}

/* Tabla de tiempos de la operación (0062): una rejilla de zonas × franjas.
   Los inputs van chiquitos porque son minutos (2 dígitos), y la tabla scrollea
   sola en el móvil sin empujar la página — de eso se encarga el contenedor. */
.set-ui .set-matrix{border-collapse:collapse;width:100%;min-width:520px}
.set-ui .set-matrix th{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);padding:0 8px 8px;text-align:center;white-space:nowrap}
.set-ui .set-matrix th.franja{text-align:left;padding-left:2px}
.set-ui .set-matrix td{padding:3px 5px;text-align:center}
.set-ui .set-matrix td.franja{text-align:left;font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;padding-left:2px}
.set-ui .set-matrix td.franja small{display:block;font-weight:500;color:var(--ink3);font-size:10.5px}
.set-ui .set-matrix input{width:52px;height:34px;border:1px solid var(--line2);border-radius:8px;background:var(--panel);text-align:center;font-family:var(--font);font-size:13px;color:var(--ink);outline:none}
.set-ui .set-matrix input:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.set-ui .set-matrix input.asumida{border-color:var(--orange);border-style:dashed}
.set-ui .set-matrix .sep{color:var(--ink3);font-size:11px;padding:0 1px}

/* Zona de cada conjunto */
.set-ui .rz-row{display:flex;align-items:center;gap:12px;padding:8px 2px;border-bottom:1px solid var(--line2)}
.set-ui .rz-row:last-child{border-bottom:0}
.set-ui .rz-name{flex:1;font-size:13.5px;color:var(--ink)}
.set-ui .rz-name small{display:block;font-size:10.5px;color:var(--ink3)}
.set-ui .rz-row select{height:36px;min-width:180px;border:1px solid var(--line2);border-radius:9px;background:var(--panel);padding:0 10px;font-family:var(--font);font-size:13px;color:var(--ink)}
.set-ui .rz-row.sin select{border-color:var(--orange);border-style:dashed}

.set-ui .set-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:11px;border:0;background:var(--orange);color:#fff;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 9px 22px rgba(242,101,34,.26)}
.set-ui .set-btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line2);box-shadow:none;height:42px}
.set-ui .set-btn.dark{background:var(--ink);color:var(--panel);box-shadow:none}
.set-ui .set-btn:disabled{opacity:.55;cursor:not-allowed}

/* antigüedad */
.set-ui .set-prow{display:flex;align-items:center;gap:13px;padding:11px 0;border-bottom:1px solid var(--line)}
.set-ui .set-prow:last-child{border-bottom:0}
.set-ui .set-avt{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;flex:0 0 auto;text-transform:uppercase}
.set-ui .set-pinfo{flex:1;min-width:0}
.set-ui .set-pinfo b{font-size:13.5px;font-weight:700;letter-spacing:-.01em;display:block;line-height:1.15;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-ui .set-pinfo span{font-size:11.5px;color:var(--ink2)}
.set-ui .set-seg3{display:inline-flex;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:3px;gap:2px;flex:0 0 auto}
.set-ui .set-seg3 button{height:30px;min-width:34px;padding:0 9px;border:0;border-radius:7px;background:transparent;color:var(--ink2);font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer;transition:.14s;display:inline-flex;align-items:center;gap:6px}
.set-ui .set-seg3 button .num{font-family:var(--mono);font-size:11px}
.set-ui .set-seg3 button.on{background:var(--ink);color:#fff}
.set-ui .set-seg3 button.on.s4{background:var(--orange)}
.set-ui .set-seg3 button.on.s3{background:var(--green)}
.set-ui .set-seg3 button.on.s2{background:var(--amber)}
.set-ui .set-seg3 button.on.s1{background:var(--rest)}
.set-ui .set-seg3 button:disabled{opacity:.55;cursor:default}

/* descansos fijos */
.set-ui .set-selwrap{position:relative}
.set-ui .set-sel{height:42px;width:100%;border:1px solid var(--line2);border-radius:10px;background:var(--panel);padding:0 38px 0 13px;font-family:var(--font);font-size:14px;font-weight:600;color:var(--ink);outline:none;appearance:none;cursor:pointer}
.set-ui .set-sel:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.set-ui .set-chev{position:absolute;right:13px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ink3)}
.set-ui .set-drow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.set-ui .set-drow:last-child{border-bottom:0}
.set-ui .set-dname{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2)}
.set-ui .set-drow.wknd .set-dname{color:var(--ink)}
.set-ui .set-twin{display:flex;gap:7px}
.set-ui .set-tg{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:9px;border:1px solid var(--line2);background:var(--panel);color:var(--ink2);font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer;transition:.14s;min-width:58px;justify-content:center}
.set-ui .set-tg:hover{border-color:var(--ink3)}
.set-ui .set-tg.on{background:var(--rest-soft);border-color:var(--rest);color:var(--rest)}
.set-ui .set-tg:disabled{opacity:.5;cursor:default}
.set-ui .set-tg .icon{width:12px;height:12px}
.set-ui .set-dnote{font-size:11.5px;color:var(--ink3);margin-top:12px;display:flex;align-items:center;gap:7px}

/* crear conductor */
.set-ui .set-pwwrap{display:flex;gap:8px}
.set-ui .set-pwwrap .set-input{flex:1}
.set-ui .set-checkrow{display:flex;align-items:center;gap:11px;cursor:pointer;user-select:none;min-height:42px}
.set-ui .set-chk-input{position:absolute;opacity:0;width:0;height:0}
.set-ui .set-chk{width:22px;height:22px;border-radius:7px;border:1.6px solid var(--line2);background:var(--panel);display:grid;place-items:center;color:transparent;transition:.14s;flex:0 0 auto}
.set-ui .set-chk-input:checked + .set-chk{background:var(--orange);border-color:var(--orange);color:#fff}
.set-ui .set-checkrow > span:last-child{font-size:13px;color:var(--ink2);line-height:1.3}
.set-ui .set-cstate{font-size:11.5px;font-weight:600}

@media(max-width:860px){.set-ui .set-row2,.set-ui .set-grid2{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   ACORDEÓN de Ajustes (.set-sec) y texto plegado (.set-why).
   Ajustes era un muro: 245 líneas de HTML y ~10.000 caracteres siempre a la
   vista. Ahora cada sección se pliega, PERO con dos reglas que no se negocian:
     1) cerrada sigue mostrando el valor (.set-sec-val) — plegar no es esconder.
     2) el texto largo NO se borra, se guarda un toque más allá, detrás de un
        "¿Por qué?" que se ve como pastilla tocable EN REPOSO (nada de hover:
        en un teléfono no hay hover, y la mitad del admin se abre desde el
        celular).
   El chevron no necesita CSS propio: styles.css:167-174 ya trae
   summary{list-style:none} y details[open] .details-chevron{rotate}, globales.
   --------------------------------------------------------------------- */
.set-ui .set-sec{border-top:1px solid var(--line);margin:0 -18px;padding:0 18px}
.set-ui .set-sec:first-of-type{border-top:0}
.set-ui .set-sec > summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:12px 0;cursor:pointer;list-style:none;user-select:none}
.set-ui .set-sec > summary:hover .set-sec-t{color:var(--orange)}
.set-ui .set-sec > summary:focus-visible{outline:2px solid var(--orange);outline-offset:-2px;border-radius:8px}
.set-ui .set-sec-t{font-size:13px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
/* El valor que se ve con la sección CERRADA: el jefe barre el acordeón y lee
   los números sin abrir nada. Se apaga al abrir para no repetir el dato. */
.set-ui .set-sec-val{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--ink2);background:var(--panel2);border-radius:999px;padding:3px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.set-ui .set-sec[open] .set-sec-val{opacity:0;pointer-events:none}
/* Vacía no es una pastilla gris sin nada adentro: es nada. Pasa en el instante
   entre que el panel existe y que setPintarValores() lo llena. */
.set-ui .set-sec-val:empty{display:none}
.set-ui .set-sec .details-chevron{color:var(--ink3);flex:0 0 auto;margin-left:6px}
.set-ui .set-sec[open] > summary{border-bottom:1px dashed var(--line)}
.set-ui .set-sec-body{padding:14px 0 18px}

/* Punto naranja: esta sección tiene cambios sin guardar. Se ve AUNQUE esté
   cerrada — si no, plegar convierte el botón Guardar global en una trampa. */
.set-ui .set-sec-dot{width:7px;height:7px;border-radius:999px;background:var(--orange);flex:0 0 auto;opacity:0;transition:opacity .15s}
.set-ui .set-sec.sucio .set-sec-dot{opacity:1}
/* Chip verde para lo que NO espera al botón: guarda al instante. */
.set-ui .set-sec-ya{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--green);background:var(--green-soft);border-radius:999px;padding:2px 8px;flex:0 0 auto}
/* En la cabecera de una tarjeta el chip va al extremo derecho, donde en las
   otras va el "Guardado". Es la misma pregunta contestada al revés: ahí el jefe
   busca si esto necesita botón, y acá la respuesta es que no. */
.set-ui .set-ch .set-sec-ya{margin-left:auto}

/* El "¿Por qué?" — la explicación larga, plegada pero nunca borrada.
   min-height 44 porque es blanco táctil, y borde+fondo en reposo porque tiene
   que parecer un control antes de que nadie lo toque. */
.set-ui .set-why{margin-top:8px}
.set-ui .set-why > summary{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;cursor:pointer;list-style:none;font-size:12px;font-weight:700;color:var(--orange);border:1px solid var(--line2);border-radius:999px;background:var(--panel);transition:background .14s,border-color .14s}
.set-ui .set-why > summary:hover{background:var(--orange-soft);border-color:var(--orange)}
.set-ui .set-why > summary:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.set-ui .set-why[open] > summary{background:var(--orange-soft);border-color:var(--orange)}
.set-ui .set-why .set-why-body{font-size:11.5px;color:var(--ink2);line-height:1.5;margin-top:10px;padding:12px 14px;background:var(--panel2);border-radius:10px;border-left:3px solid var(--orange)}
.set-ui .set-why .set-why-body b{color:var(--ink)}

/* ---------------------------------------------------------------------
   TEXTO PLEGADO SUELTO (.rd-why) — septiembre 2026.
   El "¿Por qué este número?" de acá arriba funcionó: Ajustes dejó de ser un
   muro y nadie perdió una palabra. Pero nació scopeado bajo .set-ui, así que
   al resto del admin no le llegó nada y ahí seguían los párrafos de 200 y de
   300 caracteres de Repuestos, Eventualidades, Privados, Reservas y Turnos
   activos. Esto es la misma pieza sin dueño: sirve en cualquier panel.

   POR QUÉ NO LLEVA UN SOLO HEXADECIMAL. Todos los paneles del admin cuelgan
   de .admin-shell (línea 1976), que ya define --panel, --panel2, --line2,
   --ink, --ink2 y --orange; el componente se pinta con esos y con nada más.
   Así, el día que un panel declare su tema oscuro —como ya lo hacen
   #routes-ui y #consola-ui— esto se apaga con él. Lo contrario ya nos costó
   caro: los fondos pastel escritos a mano quedaron como parches luminosos
   cuando llegó el modo nocturno del auxiliar (rc-auxiliar.css, bloque
   "Fondos claros fijos"). No se repite.

   Reusa lo global de las líneas 167-174 (summary{list-style:none} y
   details[open] .details-chevron{rotate}); no vuelve a declarar nada de eso.
   El aria-expanded y la tecla Escape los pone rdWhy(), que vive en
   admin-turnos-activos.js.
   --------------------------------------------------------------------- */
.rd-why{display:block;margin-top:8px}
/* Tiene que parecer un control ANTES de que nadie lo toque: borde, fondo y
   color de marca EN REPOSO. En un teléfono no hay hover, y buena parte de
   este admin se abre desde el celular, de noche, con una mano. Los 44px de
   alto son el blanco táctil mínimo, no una decisión estética. */
.rd-why > summary{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;cursor:pointer;list-style:none;font-family:inherit;font-size:12px;font-weight:700;line-height:1.3;text-align:left;color:var(--orange);background:var(--panel);border:1px solid var(--line2);border-radius:999px;transition:background .14s,border-color .14s}
.rd-why > summary::-webkit-details-marker{display:none}
.rd-why > summary:hover{background:var(--orange-soft);border-color:var(--orange)}
.rd-why > summary:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.rd-why[open] > summary{background:var(--orange-soft);border-color:var(--orange)}
/* El chevron se dibuja acá y no se le confía al .icon de cada panel:
   #privados-ui no declara ninguno, y sin tamaño el <svg> sale de 300px o de
   cero según el navegador. */
.rd-why > summary .details-chevron{width:13px;height:13px;flex:0 0 auto;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
/* text-align:left explícito porque varios estados vacíos centran todo, y un
   párrafo de 130 caracteres centrado no se lee. */
.rd-why .rd-why-body{margin-top:10px;padding:12px 14px;background:var(--panel2);border-radius:10px;border-left:3px solid var(--orange);font-size:12px;line-height:1.55;color:var(--ink2);text-align:left}
.rd-why .rd-why-body b{color:var(--ink)}

/* Variante 'hereda': para cuando el plegado cae DENTRO de un bloque que ya
   tiene color propio (la franja ámbar de Eventualidades, la advertencia de
   Privados). Ahí una pastilla naranja de marca se pelea con el fondo; esta
   toma prestado el color del bloque con currentColor y se deja de pelear.
   color-mix ya se usa en este archivo (#parts-ui .rbtn.pri), no es nuevo. */
.rd-why.hereda > summary{color:inherit;background:transparent;border-color:currentColor;opacity:.85}
.rd-why.hereda > summary:hover,.rd-why.hereda[open] > summary{background:color-mix(in srgb,currentColor 10%,transparent);opacity:1}
.rd-why.hereda > summary:focus-visible{outline:2px solid currentColor}
.rd-why.hereda .rd-why-body{color:inherit;background:color-mix(in srgb,currentColor 8%,transparent);border-left-color:currentColor}

@media(prefers-reduced-motion:reduce){.rd-why > summary{transition:none}}

/* Barra de guardado pegada al pie: dice CUÁNTO cubre, porque con secciones
   cerradas "Guardar" a secas no dice qué se está guardando.
   #app-main trae pb-24 en móvil (index.html:283) y el admin no tiene barra
   inferior (setTab esconde #driver-nav, core.js:413), así que el sticky
   inferior queda libre y no tapa nada. */
.set-ui .set-savebar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px -18px -18px;padding:13px 18px;background:var(--panel);border-top:1px solid var(--line);border-radius:0 0 16px 16px;box-shadow:0 -6px 18px rgba(33,29,24,.05)}
.set-ui .set-savebar .set-savenote{font-size:11.5px;color:var(--ink3);line-height:1.35}
.set-ui .set-savebar .set-savenote b{color:var(--orange)}

@media(max-width:640px){
  .set-ui .set-sec{margin:0 -14px;padding:0 14px}
  .set-ui .set-sec-val{max-width:38%;font-size:11px}
  .set-ui .set-savebar{margin:16px -14px -14px;padding:12px 14px}
  .set-ui .set-cb{padding:14px}
  .set-ui .set-head h1{font-size:22px}
}


/* =====================================================================
   Pantallas de datos migradas (Balance / Disponibilidad / Solicitudes).
   Tokens compartidos — mismos valores que .set-ui + acentos (blue/rest).
   VISUAL ONLY. La lógica vive en admin-balance/disponibilidad/solicitudes.js (IDs intactos).
   ===================================================================== */
#balance-ui,#avail-ui,#solic-ui{
  --bg:#F8FAFC; --panel:#FFFFFF; --panel2:#F1F5F9; --ink:#211D18; --ink2:#6B6258; --ink3:#A39A8D;
  --line:#E2E8F0; --line2:#CBD5E1;
  --orange:#F26522; --orange-soft:#FCE4D6;
  --green:#16936A; --green-soft:#E0F1E8;
  --amber:#D98A12; --amber-soft:#FBEBCF;
  --red:#DB4B3F; --red-soft:#FADFDC;
  --blue:#2A6FDB; --blue-soft:#E2ECFB;
  --rest:#586273; --rest-soft:#EAECEF;
  --shadow:0 6px 18px rgba(33,29,24,.07);
  --font:"Hanken Grotesk",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace;
  font-family:var(--font); color:var(--ink);
}
#balance-ui *,#avail-ui *,#solic-ui *{box-sizing:border-box}
#balance-ui .icon,#avail-ui .icon,#solic-ui .icon{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
#balance-ui .rl-phead,#avail-ui .rl-phead,#solic-ui .rl-phead{margin-bottom:18px}
#balance-ui .rl-phead h1,#avail-ui .rl-phead h1,#solic-ui .rl-phead h1{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
#balance-ui .rl-phead p,#avail-ui .rl-phead p,#solic-ui .rl-phead p{font-size:13px;color:var(--ink2);margin-top:7px;max-width:620px;line-height:1.4}
#balance-ui .rl-phead p b,#avail-ui .rl-phead p b,#solic-ui .rl-phead p b{color:var(--ink);font-weight:700}

/* ---- Balance ---- */
#balance-ui .bal-controls{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px 18px;display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:16px}
#balance-ui .rl-field label{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
#balance-ui .rl-input{height:40px;border:1px solid var(--line2);border-radius:10px;background:var(--panel);padding:0 12px;font-family:var(--font);font-size:13px;color:var(--ink);outline:none}
#balance-ui .rl-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
#balance-ui .rl-input[type=date]{font-family:var(--mono);font-size:12.5px}
#balance-ui .rl-spacer{flex:1}
#balance-ui .rl-btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border-radius:11px;border:0;background:var(--orange);color:#fff;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 9px 22px rgba(242,101,34,.26)}
#balance-ui .rl-btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line2);box-shadow:none}
#balance-ui .rl-btn.green{background:var(--green);box-shadow:0 9px 22px rgba(22,147,106,.22)}
#balance-ui .bal-summary{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
#balance-ui .bal-summary:empty{display:none}
#balance-ui .bal-scard{flex:1;min-width:140px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
#balance-ui .bal-scard .n{font-size:25px;font-weight:800;letter-spacing:-.025em;line-height:1;font-variant-numeric:tabular-nums}
#balance-ui .bal-scard .n s{font-size:14px;color:var(--ink3);text-decoration:none;font-weight:700}
#balance-ui .bal-scard .l{font-size:11.5px;color:var(--ink2);font-weight:600;margin-top:5px}
#balance-ui .bal-scard.accent{background:linear-gradient(180deg,var(--panel),var(--orange-soft));border-color:color-mix(in srgb,var(--orange) 26%,var(--line))}
#balance-ui .bal-scard.accent .n{color:var(--orange)}
#balance-ui .bal-report{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
#balance-ui .bal-rhead{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--panel2)}
#balance-ui .bal-rhead h2{font-size:14px;font-weight:800;letter-spacing:-.01em}
#balance-ui .bal-rhead .period{font-size:12px;color:var(--ink2);font-family:var(--mono);margin-left:auto}
#balance-ui table.bal-bt{width:100%;border-collapse:collapse}
#balance-ui .bal-bt thead th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);padding:11px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
#balance-ui .bal-bt thead th.num{text-align:right}
#balance-ui .bal-bt tbody td{padding:11px 16px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
#balance-ui .bal-bt tbody tr:last-child td{border-bottom:0}
#balance-ui .bal-bt tbody tr:hover{background:var(--panel2)}
#balance-ui .bal-bt .num{text-align:right;font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
#balance-ui .bal-bt .person{display:flex;align-items:center;gap:11px}
#balance-ui .bal-avt{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;font-size:11.5px;font-weight:800;color:#fff;flex:0 0 auto;text-transform:uppercase}
#balance-ui .bal-bt .person b{font-size:13px;font-weight:700;letter-spacing:-.01em;display:block;line-height:1.15;margin-bottom:2px;white-space:nowrap}
#balance-ui .bal-bt .person span{font-size:11px;color:var(--ink2);white-space:nowrap}
#balance-ui .bal-hrs{display:flex;align-items:center;gap:10px;justify-content:flex-end}
#balance-ui .bal-hrs .bar{width:120px;height:7px;border-radius:99px;background:var(--line);overflow:hidden;flex:0 0 auto}
#balance-ui .bal-hrs .bar i{display:block;height:100%;border-radius:99px;background:var(--orange)}
#balance-ui .bal-hrs b{font-family:var(--mono);font-size:13px;font-weight:700;min-width:54px;text-align:right}
#balance-ui .bal-pill{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 7px;border-radius:7px;font-family:var(--mono);font-size:11.5px;font-weight:700}
#balance-ui .bal-pill.am{background:var(--amber-soft);color:var(--amber)}
#balance-ui .bal-pill.pm{background:var(--rest-soft);color:var(--rest)}
#balance-ui .bal-pill.co{background:var(--orange-soft);color:var(--orange)}
#balance-ui .bal-pill.z{background:var(--panel2);color:var(--ink3)}
#balance-ui .bal-bt tfoot td{padding:12px 16px;border-top:2px solid var(--line);background:var(--panel2);font-weight:800;font-size:13px}
#balance-ui .bal-bt tfoot .num{font-size:13px;text-align:right;font-family:var(--mono)}
#balance-ui .bal-empty{background:var(--panel);border:1px dashed var(--line2);border-radius:16px;padding:48px 24px;text-align:center;color:var(--ink3)}
#balance-ui .bal-empty h3{font-size:15px;font-weight:800;color:var(--ink2)}
#balance-ui .bal-empty p{font-size:13px;margin-top:5px}
@media(max-width:720px){#balance-ui .bal-hrs .bar{width:64px}}

/* ---- Disponibilidad ---- */
#avail-ui .av-phead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
#avail-ui .av-weeknav{display:flex;align-items:center;gap:8px}
#avail-ui .av-weeknav button{width:32px;height:32px;border:1px solid var(--line2);background:var(--panel);border-radius:9px;color:var(--ink2);display:grid;place-items:center;cursor:pointer}
#avail-ui .av-weeknav button:hover{color:var(--ink)}
#avail-ui .av-weeknav .wk{font-size:13.5px;font-weight:700;letter-spacing:-.01em;min-width:128px;text-align:center}
#avail-ui .av-summary{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
#avail-ui .av-scard{flex:1;min-width:150px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 15px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow)}
#avail-ui .av-scard[data-jump]{cursor:pointer}
#avail-ui .av-scard[data-jump]:hover{border-color:var(--line2)}
#avail-ui .av-scard .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto}
#avail-ui .av-scard .ic.blue{background:var(--blue-soft);color:var(--blue)}
#avail-ui .av-scard .ic.rest{background:var(--rest-soft);color:var(--rest)}
#avail-ui .av-scard .ic.lock{background:var(--amber-soft);color:var(--amber)}
#avail-ui .av-scard .ic.warn{background:var(--red-soft);color:var(--red)}
#avail-ui .av-scard .ic.none{background:var(--line);color:var(--ink3)}
#avail-ui .av-scard .n{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
#avail-ui .av-scard .l{font-size:11.5px;color:var(--ink2);font-weight:600;margin-top:3px}
#avail-ui .av-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
#avail-ui .av-search{height:38px;min-width:210px;border:1px solid var(--line2);border-radius:11px;background:var(--panel);display:flex;align-items:center;gap:9px;padding:0 12px;color:var(--ink3)}
#avail-ui .av-search input{border:0;background:transparent;outline:none;font-family:var(--font);font-size:13px;color:var(--ink);width:100%}
#avail-ui .av-seg{display:inline-flex;background:var(--panel);border:1px solid var(--line2);border-radius:11px;padding:3px;gap:2px}
#avail-ui .av-seg button{height:30px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--ink2);font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s}
#avail-ui .av-seg button.on{background:var(--ink);color:var(--panel)}
#avail-ui .av-board{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:auto}
#avail-ui table.av-tbl{border-collapse:collapse;width:100%}
#avail-ui .av-tbl th,#avail-ui .av-tbl td{border-bottom:1px solid var(--line)}
#avail-ui .av-tbl thead th{position:sticky;top:0;z-index:3;background:var(--panel2);padding:0;border-bottom:1px solid var(--line)}
#avail-ui .av-tbl thead .dcell{padding:9px 6px 8px;text-align:center}
#avail-ui .av-tbl thead .dow{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
#avail-ui .av-tbl thead .dnum{font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:1px}
#avail-ui .av-tbl thead .dcell.wknd{background:var(--panel2)}
#avail-ui .av-tbl thead th.namehead{position:sticky;left:0;z-index:4;text-align:left;padding:11px 16px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);min-width:200px}
#avail-ui .covrow td{background:var(--panel2);border-bottom:1px solid var(--line);padding:0}
#avail-ui .covrow .namehead2{position:sticky;left:0;z-index:2;background:var(--panel2);padding:5px 16px;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);text-align:left}
#avail-ui .covcell{display:flex;gap:5px;justify-content:center;padding:5px 6px}
#avail-ui .covpip{font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--ink2);display:inline-flex;align-items:center;gap:3px}
#avail-ui .covpip .d{width:6px;height:6px;border-radius:99px;background:var(--green)}
#avail-ui .covpip.warn .d{background:var(--amber)} #avail-ui .covpip.bad .d{background:var(--red)}
#avail-ui .covpip.warn{color:var(--amber)} #avail-ui .covpip.bad{color:var(--red)}
#avail-ui .av-tbl tbody .name{position:sticky;left:0;z-index:1;background:var(--panel);padding:9px 16px;min-width:200px}
#avail-ui .av-tbl tbody tr:hover .name{background:var(--panel2)}
#avail-ui .av-none{padding:20px 16px;color:var(--ink3);font-size:13px}
#avail-ui .person{display:flex;align-items:center;gap:10px}
#avail-ui .av-avt{width:30px;height:30px;border-radius:999px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;flex:0 0 auto;text-transform:uppercase}
#avail-ui .person b{font-size:13px;font-weight:700;letter-spacing:-.01em;line-height:1.15;display:block;margin-bottom:1px;color:var(--ink)}
#avail-ui .person span{font-size:11px;color:var(--ink2)}
#avail-ui .daycell{padding:7px 6px;text-align:center}
#avail-ui .daycell.wknd{background:color-mix(in srgb,var(--panel2) 60%,var(--panel))}
#avail-ui .slots{display:inline-flex;gap:4px}
#avail-ui .av-slot{width:42px;height:34px;border-radius:9px;border:1px solid var(--line2);background:var(--panel);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;transition:transform .08s,background .12s,border-color .12s,color .12s;user-select:none;font-family:var(--font);color:var(--ink2)}
#avail-ui .av-slot:active{transform:scale(.93)}
#avail-ui .av-slot .lbl{font-size:10px;font-weight:800;letter-spacing:.03em;line-height:1}
#avail-ui .av-slot .ic{width:11px;height:11px;stroke-width:2.2}
#avail-ui .av-slot.avail{color:var(--green);border-color:color-mix(in srgb,var(--green) 26%,var(--line2))}
#avail-ui .av-slot.req{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 3px 9px rgba(42,111,219,.28)}
#avail-ui .av-slot.off{background:var(--rest);border-color:var(--rest);color:#fff}
#avail-ui .av-slot.rej{background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 40%,var(--line2));color:var(--red)}
#avail-ui .av-slot.lock{background:var(--rest-soft);border-color:var(--line2);color:var(--ink3);cursor:not-allowed}
#avail-ui .av-slot.lock:active{transform:none}
/* "Sin marcar": el conductor no respondió. Borde punteado y apagado, para que
   el jefe distinga de un golpe al que dijo que sí del que nunca abrió la app
   (rediseño de Disponibilidad, 2026-08-16). */
#avail-ui .av-slot.none{background:transparent;border-style:dashed;border-color:var(--line2);color:var(--ink3)}
#avail-ui .av-legend{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:16px;font-size:12px;color:var(--ink2)}
#avail-ui .av-legend .it{display:inline-flex;align-items:center;gap:7px}
#avail-ui .av-legend .legkey{width:24px;height:18px;border-radius:6px;border:1px solid var(--line2);display:inline-grid;place-items:center;font-size:8px;font-weight:800;color:var(--ink2)}
#avail-ui .av-legend .legkey.avail{color:var(--green);border-color:color-mix(in srgb,var(--green) 26%,var(--line2))}
#avail-ui .av-legend .legkey.req{background:var(--blue);border-color:var(--blue);color:#fff}
#avail-ui .av-legend .legkey.off{background:var(--rest);border-color:var(--rest);color:#fff}
#avail-ui .av-legend .legkey.rej{background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 40%,var(--line2));color:var(--red)}
#avail-ui .av-legend .legkey.lock{background:var(--rest-soft);color:var(--ink3)}
#avail-ui .av-legend .hint{margin-left:auto;color:var(--ink3)}

/* ---- Solicitudes ---- */
#solic-ui .rl-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:11px;border:0;background:var(--orange);color:#fff;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 9px 22px rgba(242,101,34,.26)}
#solic-ui .rl-btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line2);box-shadow:none}
#solic-ui .sol-phead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
#solic-ui .sol-phead h1{display:flex;align-items:center;gap:11px}
#solic-ui .sol-ct{font-size:13px;font-weight:800;font-family:var(--mono);background:var(--blue-soft);color:var(--blue);border-radius:999px;padding:3px 11px}
#solic-ui .sol-tabs{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
#solic-ui .sol-seg{display:inline-flex;background:var(--panel);border:1px solid var(--line2);border-radius:11px;padding:3px;gap:2px}
#solic-ui .sol-seg button{height:32px;padding:0 13px;border:0;border-radius:8px;background:transparent;color:var(--ink2);font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:7px}
#solic-ui .sol-seg button.on{background:var(--ink);color:var(--panel)}
#solic-ui .sol-seg button .n{font-family:var(--mono);font-size:10.5px;opacity:.8}
#solic-ui .sol-groups{display:flex;flex-direction:column;gap:14px}
#solic-ui .sol-group{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
#solic-ui .sol-group.conflict{border-color:color-mix(in srgb,var(--red) 45%,var(--line));box-shadow:0 0 0 3px rgba(219,75,63,.08),var(--shadow)}
#solic-ui .sol-ghead{display:flex;align-items:center;gap:13px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--panel2);flex-wrap:wrap}
#solic-ui .sol-slot{display:inline-flex;align-items:center;gap:8px}
#solic-ui .sol-slot b{font-size:15px;font-weight:800;letter-spacing:-.01em}
#solic-ui .sol-slot .band{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--ink);color:var(--panel)}
#solic-ui .sol-slot .band.pm{background:var(--rest)}
#solic-ui .sol-cupoinfo{font-size:12px;color:var(--ink2);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#solic-ui .sol-cupoinfo b{color:var(--ink);font-weight:700}
#solic-ui .sol-gtag{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.03em}
#solic-ui .sol-gtag.conflict{background:var(--red-soft);color:var(--red)}
#solic-ui .sol-gtag.single{background:var(--green-soft);color:var(--green)}
#solic-ui .sol-gtag.review{background:var(--amber-soft);color:var(--amber)}
#solic-ui .sol-gactions{display:flex;gap:7px}
#solic-ui .sol-minibtn{height:30px;padding:0 11px;border-radius:8px;border:1px solid var(--line2);background:var(--panel);color:var(--ink2);font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.14s}
#solic-ui .sol-minibtn:hover{color:var(--ink);border-color:var(--ink3)}
#solic-ui .sol-minibtn.green:hover{color:var(--green);border-color:var(--green);background:var(--green-soft)}
#solic-ui .sol-req{display:grid;grid-template-columns:34px 1fr auto auto;gap:13px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)}
#solic-ui .sol-req:last-child{border-bottom:0}
#solic-ui .sol-req.done{opacity:.6}
#solic-ui .sol-avt{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;text-transform:uppercase}
#solic-ui .sol-who{min-width:0}
#solic-ui .sol-who b{font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1.15;display:block;color:var(--ink)}
#solic-ui .sol-who .meta{font-size:12px;color:var(--ink2);margin-top:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#solic-ui .sol-who .meta .rsn{color:var(--ink);font-weight:600}
#solic-ui .sol-senior{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--ink2);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:2px 9px;white-space:nowrap}
#solic-ui .sol-senior .dot{width:6px;height:6px;border-radius:99px;background:var(--ink3)}
#solic-ui .sol-senior.s3 .dot{background:var(--green)} #solic-ui .sol-senior.s2 .dot{background:var(--amber)} #solic-ui .sol-senior.s1 .dot{background:var(--ink3)}
#solic-ui .sol-ractions{display:flex;gap:7px}
#solic-ui .sol-rbtn{height:34px;padding:0 14px;border-radius:9px;border:1px solid var(--line2);background:var(--panel);font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.14s;color:var(--ink2)}
#solic-ui .sol-rbtn.ok{color:var(--green);border-color:color-mix(in srgb,var(--green) 40%,var(--line2))}
#solic-ui .sol-rbtn.ok:hover{background:var(--green);color:#fff;border-color:var(--green)}
#solic-ui .sol-rbtn.no{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,var(--line2))}
#solic-ui .sol-rbtn.no:hover{background:var(--red);color:#fff;border-color:var(--red)}
#solic-ui .sol-rbtn:disabled{opacity:.5;cursor:default}
#solic-ui .sol-resolved{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:0 6px}
#solic-ui .sol-resolved.ok{color:var(--green)} #solic-ui .sol-resolved.no{color:var(--red)}
#solic-ui .sol-empty{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:56px 24px;text-align:center}
#solic-ui .sol-empty .circle{width:60px;height:60px;border-radius:999px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;margin:0 auto 16px}
#solic-ui .sol-empty .circle .icon{width:28px;height:28px;stroke-width:2.4}
#solic-ui .sol-empty h3{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
#solic-ui .sol-empty p{font-size:13.5px;color:var(--ink2);margin-top:6px}
@media(max-width:640px){#solic-ui .sol-req{grid-template-columns:34px 1fr;gap:10px}#solic-ui .sol-senior{grid-column:2}#solic-ui .sol-ractions{grid-column:1/-1;justify-content:flex-end}}

/* =============== ADMIN: INSPECCIONES (paleta limpia) ===============
   Estructura del diseño UX (Rendio Admin - Inspecciones); tokens del app
   para consistencia con el resto del admin. Scopeado bajo #inspections-ui.
   Lo pintan renderInspections / renderInspectionDetail / renderInspChecklist. */
#inspections-ui{
  --bg:#F8FAFC; --panel:#FFFFFF; --panel2:#F1F5F9; --ink:#211D18; --ink2:#6B6258; --ink3:#A39A8D;
  --line:#E2E8F0; --line2:#CBD5E1;
  --orange:#F26522; --orange-soft:#FCE4D6;
  --green:#16936A; --green-soft:#E0F1E8;
  --amber:#D98A12; --amber-soft:#FBEBCF;
  --red:#DB4B3F; --red-soft:#FADFDC;
  --blue:#2A6FDB; --blue-soft:#E2ECFB;
  --shadow:0 8px 20px rgba(33,29,24,.08); --shadow-lg:0 22px 44px rgba(33,29,24,.20);
  --font:"Hanken Grotesk",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace;
  font-family:var(--font); color:var(--ink);
}
#inspections-ui *{box-sizing:border-box}
#inspections-ui .icon{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
#inspections-ui .view{display:none}
#inspections-ui .view.on{display:block}
#inspections-ui .btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:11px;border:0;background:var(--orange);color:#fff;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 9px 22px rgba(242,101,34,.24)}
#inspections-ui .btn.dark{background:var(--ink);color:#fff;box-shadow:none}
#inspections-ui .btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line2);box-shadow:none}
#inspections-ui .btn.sm{height:34px;padding:0 13px;font-size:12.5px}
#inspections-ui .btn:disabled{opacity:.5;cursor:not-allowed}
#inspections-ui .phead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px}
#inspections-ui .phead h1{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1;display:flex;align-items:center;gap:11px;color:var(--ink)}
#inspections-ui .phead h1 .ct{font-size:13px;font-weight:800;font-family:var(--mono);background:var(--amber-soft);color:var(--amber);border-radius:999px;padding:3px 11px}
#inspections-ui .phead p{font-size:13px;color:var(--ink2);margin-top:8px;max-width:600px;line-height:1.5}
#inspections-ui .phead p b{color:var(--ink);font-weight:700}
#inspections-ui .seg{display:inline-flex;background:var(--panel);border:1px solid var(--line2);border-radius:11px;padding:3px;gap:2px;margin-bottom:16px;flex-wrap:wrap}
#inspections-ui .seg button{height:32px;padding:0 13px;border:0;border-radius:8px;background:transparent;color:var(--ink2);font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
#inspections-ui .seg button.on{background:var(--ink);color:#fff}
#inspections-ui .seg button .n{font-family:var(--mono);font-size:10.5px;opacity:.8}
#inspections-ui .seg button.on .n{opacity:1}
#inspections-ui .icard{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:15px 17px;display:grid;grid-template-columns:42px 1fr auto;gap:15px;align-items:center;margin-bottom:12px;transition:box-shadow .15s,border-color .15s}
#inspections-ui .icard:hover{box-shadow:var(--shadow-lg);border-color:var(--line2)}
#inspections-ui .icard.grave{border-left:3px solid var(--red)}
#inspections-ui .avt{width:42px;height:42px;border-radius:12px;color:#fff;font-weight:800;font-size:14px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
#inspections-ui .who{min-width:0}
#inspections-ui .who b{font-size:14.5px;font-weight:800;display:block;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
#inspections-ui .who .sub{font-size:12.5px;color:var(--ink2);margin-top:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#inspections-ui .who .veh{font-family:var(--mono);font-size:11px;background:var(--panel2);border:1px solid var(--line);padding:2px 7px;border-radius:6px;color:var(--ink2)}
#inspections-ui .who .when{display:inline-flex;align-items:center;gap:5px}
#inspections-ui .who .novdesc{font-size:13px;color:var(--ink2);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#inspections-ui .right{display:flex;flex-direction:column;gap:9px;align-items:flex-end}
#inspections-ui .chips{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
#inspections-ui .thumbs{display:flex;gap:5px}
#inspections-ui .thumb{width:36px;height:28px;border-radius:7px;border:1px solid var(--line2);background:var(--panel2);display:flex;align-items:center;justify-content:center;color:var(--ink3);overflow:hidden}
#inspections-ui .thumb img{width:100%;height:100%;object-fit:cover}
#inspections-ui .thumb svg{width:13px;height:13px}
#inspections-ui .qactions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
#inspections-ui .chip{display:inline-flex;align-items:center;gap:6px;height:25px;padding:0 11px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.02em}
#inspections-ui .chip svg{width:13px;height:13px;flex:0 0 auto;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
#inspections-ui .chip.leve{background:var(--green-soft);color:var(--green)}
#inspections-ui .chip.media{background:var(--amber-soft);color:var(--amber)}
#inspections-ui .chip.grave{background:var(--red-soft);color:var(--red)}
#inspections-ui .chip.fallas{background:var(--panel2);color:var(--ink2);border:1px solid var(--line)}
#inspections-ui .st{display:inline-flex;align-items:center;gap:6px;height:25px;padding:0 11px;border-radius:999px;font-size:11px;font-weight:800}
#inspections-ui .st svg{width:13px;height:13px}
#inspections-ui .st.pend{background:var(--amber-soft);color:var(--amber)}
#inspections-ui .st.appr{background:var(--green-soft);color:var(--green)}
#inspections-ui .st.rej{background:var(--red-soft);color:var(--red)}
#inspections-ui .rbtn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:10px;background:var(--panel);border:1.5px solid var(--line2);color:var(--ink2);font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer;transition:.14s}
#inspections-ui .rbtn svg{width:15px;height:15px}
#inspections-ui .rbtn.ok{color:var(--green);border-color:color-mix(in srgb,var(--green) 40%,var(--line2))}
#inspections-ui .rbtn.ok:hover{background:var(--green);color:#fff;border-color:var(--green)}
#inspections-ui .rbtn.no{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,var(--line2))}
#inspections-ui .rbtn.no:hover{background:var(--red);color:#fff;border-color:var(--red)}
#inspections-ui .empty{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);text-align:center;padding:60px 24px}
#inspections-ui .empty .circle{width:58px;height:58px;border-radius:999px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;margin:0 auto 14px}
#inspections-ui .empty .circle .icon{width:26px;height:26px;stroke-width:2.4}
#inspections-ui .empty h3{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
#inspections-ui .empty p{font-size:13.5px;color:var(--ink2);margin-top:5px}
#inspections-ui .back{appearance:none;border:0;background:transparent;color:var(--ink2);font-family:var(--font);font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 0;margin-bottom:10px}
#inspections-ui .back:hover{color:var(--ink)}
#inspections-ui .card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px 20px;margin-bottom:16px}
#inspections-ui .card h2{font-size:15px;font-weight:800;display:flex;align-items:center;gap:9px;letter-spacing:-.01em;color:var(--ink)}
#inspections-ui .card h2 .icon{color:var(--ink3)}
#inspections-ui .card .csub{font-size:12.5px;color:var(--ink2);margin:3px 0 14px}
#inspections-ui .dhead{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
#inspections-ui .dhead .grow{flex:1;min-width:0}
#inspections-ui .dhead h2{font-size:18px}
#inspections-ui .cols{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
@media(max-width:820px){#inspections-ui .cols{grid-template-columns:1fr}}
#inspections-ui .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#inspections-ui .photo{position:relative;aspect-ratio:4/3;border-radius:12px;border:1px solid var(--line2);background:var(--panel2);display:flex;align-items:center;justify-content:center;color:var(--ink3);cursor:zoom-in;overflow:hidden;transition:.14s}
#inspections-ui .photo:hover{border-color:var(--ink3)}
#inspections-ui .photo img{width:100%;height:100%;object-fit:cover}
#inspections-ui .photo>.icon{width:24px;height:24px}
#inspections-ui .photo .plabel{position:absolute;left:8px;bottom:7px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);background:var(--panel);border:1px solid var(--line);padding:2px 7px;border-radius:6px}
#inspections-ui .cklist{display:flex;flex-direction:column;gap:1px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
#inspections-ui .ckrow{display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--panel);font-size:13.5px}
#inspections-ui .ckrow .lbl{font-weight:600;color:var(--ink)}
#inspections-ui .ckrow .hint{font-size:11.5px;color:var(--ink3);margin-top:1px}
#inspections-ui .ckrow .badge{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px}
#inspections-ui .ckrow .ci{width:18px;height:18px;flex-shrink:0}
#inspections-ui .ckrow.ok .ci{color:var(--green)}
#inspections-ui .ckrow.ok .badge{background:var(--green-soft);color:var(--green)}
#inspections-ui .ckrow.issue{background:var(--red-soft)}
#inspections-ui .ckrow.issue .ci{color:var(--red)}
#inspections-ui .ckrow.issue .badge{background:var(--red);color:#fff}
#inspections-ui .kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
#inspections-ui .kv:last-child{border-bottom:0}
#inspections-ui .kv .k{color:var(--ink2)}
#inspections-ui .kv .v{font-weight:700;text-align:right;color:var(--ink)}
#inspections-ui .kv .v.mono{font-family:var(--mono)}
#inspections-ui .note{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:13px;color:var(--ink);line-height:1.5}
#inspections-ui .abar{display:flex;gap:10px;align-items:center;justify-content:flex-end;padding-top:4px}
#inspections-ui .rejbox{margin-top:14px;display:none}
#inspections-ui .rejbox.show{display:block}
#inspections-ui .rejbox label{display:block;font-size:12px;font-weight:700;color:var(--ink2);margin:0 0 6px 2px}
#inspections-ui .rejbox textarea{width:100%;min-height:74px;border:1px solid var(--line2);border-radius:11px;padding:10px 12px;font-family:var(--font);font-size:13px;color:var(--ink);background:var(--panel);resize:vertical;outline:none}
#inspections-ui .rejbox textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
#inspections-ui .snapnote{margin-top:13px;display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--ink2);background:var(--blue-soft);border:1px solid color-mix(in srgb,var(--blue) 22%,var(--line));border-radius:11px;padding:10px 12px;line-height:1.5}
#inspections-ui .snapnote svg{width:16px;height:16px;color:var(--blue);flex-shrink:0;margin-top:1px}
#inspections-ui .snapnote b{color:var(--ink)}
#inspections-ui .crow{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:8px;transition:opacity .15s}
#inspections-ui .crow.off{opacity:.5}
#inspections-ui .grip{color:var(--ink3);cursor:grab;font-size:15px;letter-spacing:-2px;user-select:none}
#inspections-ui .crow .ctxt{flex:1;min-width:0}
#inspections-ui .crow .ctxt b{font-size:13.5px;font-weight:700;color:var(--ink)}
#inspections-ui .crow .ctxt span{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px}
#inspections-ui .tg{position:relative;width:40px;height:23px;border-radius:999px;background:var(--line2);cursor:pointer;flex-shrink:0;transition:background .15s;border:0}
#inspections-ui .tg::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .15s}
#inspections-ui .tg.on{background:var(--green)}
#inspections-ui .tg.on::after{left:19px}
#inspections-ui .cfgbtn{appearance:none;border:1px solid var(--line2);background:var(--panel);width:32px;height:32px;border-radius:9px;color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.14s}
#inspections-ui .cfgbtn:hover{color:var(--ink);border-color:var(--ink3)}
#inspections-ui .cfgbtn.danger:hover{color:var(--red);border-color:var(--red)}
#inspections-ui .additem{display:flex;gap:10px;align-items:flex-end;margin-top:14px;padding-top:15px;border-top:1px dashed var(--line2);flex-wrap:wrap}
#inspections-ui .additem .f{flex:1;min-width:160px}
#inspections-ui .additem label{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin:0 0 6px 2px}
#inspections-ui .additem input{width:100%;height:40px;border:1px solid var(--line2);border-radius:11px;padding:0 12px;font-family:var(--font);font-size:13px;background:var(--panel);color:var(--ink);outline:none}
#inspections-ui .additem input:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.insp-lbx{position:fixed;inset:0;background:rgba(12,13,16,.82);display:none;align-items:center;justify-content:center;padding:24px;z-index:80}
.insp-lbx.show{display:flex}
.insp-lbx img{max-width:92vw;max-height:86vh;border-radius:14px;box-shadow:0 22px 44px rgba(0,0,0,.5);background:#222}
.insp-lbx .x{position:absolute;top:18px;right:20px;color:#fff;background:rgba(255,255,255,.16);border:0;width:40px;height:40px;border-radius:50%;font-size:22px;cursor:pointer;line-height:1}
@media(max-width:680px){#inspections-ui .icard{grid-template-columns:42px 1fr}#inspections-ui .icard .right{grid-column:1/-1;align-items:flex-start}#inspections-ui .qactions{justify-content:flex-start}}

/* =====================================================================
   Turnos activos (admin) — red de seguridad de cierre de turno.
   ===================================================================== */
#shifts-ui{
  --bg:#F8FAFC; --panel:#FFFFFF; --ink:#211D18; --ink2:#6B6258; --ink3:#A39A8D;
  --line:#E2E8F0; --line2:#CBD5E1;
  --orange:#F26522; --orange-soft:#FCE4D6;
  --amber:#D98A12; --amber-soft:#FBEBCF;
  --red:#DB4B3F; --red-soft:#FADFDC;
  --font:"Hanken Grotesk",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace;
  font-family:var(--font); color:var(--ink);
}
#shifts-ui *{box-sizing:border-box}
#shifts-ui .icon{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
#shifts-ui .sh-phead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px}
#shifts-ui .sh-phead h1{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1;display:flex;align-items:center;gap:11px;color:var(--ink)}
#shifts-ui .sh-phead h1 .sh-ct{font-size:13px;font-weight:800;font-family:var(--mono);background:var(--amber-soft);color:var(--amber);border-radius:999px;padding:3px 11px}
#shifts-ui .sh-phead p{font-size:13px;color:var(--ink2);margin-top:8px;max-width:640px;line-height:1.5}
#shifts-ui .sh-phead p b{color:var(--ink);font-weight:700}
#shifts-ui .set-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:11px;border:0;background:var(--orange);color:#fff;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 9px 22px rgba(242,101,34,.26)}
#shifts-ui .set-btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line2);box-shadow:none}
#shifts-ui .set-btn.dark{background:var(--ink);color:var(--panel);box-shadow:none}
#shifts-ui .set-btn:disabled{opacity:.55;cursor:not-allowed}
#shifts-ui #shifts-list{display:grid;gap:10px}
#shifts-ui .shift-row{display:flex;align-items:center;gap:14px;justify-content:space-between;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
#shifts-ui .shift-row.stale{border-color:var(--red);background:var(--red-soft)}
#shifts-ui .shift-main{min-width:0}
#shifts-ui .shift-main b{font-size:15px;font-weight:800;color:var(--ink)}
#shifts-ui .shift-sub{font-size:13px;color:var(--ink2);margin-top:2px}
#shifts-ui .shift-sub .shift-st{font-weight:700;color:var(--ink)}
#shifts-ui .shift-meta{font-size:11.5px;color:var(--ink3);margin-top:3px}
#shifts-ui .shift-flag{color:var(--red);font-weight:800}
#shifts-ui .sh-empty{text-align:center;padding:46px 20px;color:var(--ink2)}
#shifts-ui .sh-empty .icon{width:34px;height:34px;color:var(--ink3);margin:0 auto 10px}
#shifts-ui .sh-empty h3{font-size:16px;font-weight:800;color:var(--ink)}
#shifts-ui .sh-empty p{font-size:13px;margin-top:4px}

/* ============================================================
   Admin · Reservas (tabla operativa de traslados de auxiliares)
   Reusa la paleta y las piezas de Turnos activos (.sh-phead/.set-btn).
   ============================================================ */
#rv-ui *{box-sizing:border-box}
#rv-ui .icon{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
#rv-ui .sh-phead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:16px}
#rv-ui .sh-phead h1{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1;display:flex;align-items:center;gap:11px;color:var(--ink)}
#rv-ui .sh-phead h1 .sh-ct{font-size:13px;font-weight:800;font-family:var(--mono);background:var(--amber-soft);color:var(--amber);border-radius:999px;padding:3px 11px}
#rv-ui .sh-phead p{font-size:13px;color:var(--ink2);margin-top:8px;max-width:660px;line-height:1.5}
#rv-ui .sh-phead p b{color:var(--ink);font-weight:700}
#rv-ui .set-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:11px;border:0;background:var(--orange);color:#fff;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 9px 22px rgba(242,101,34,.26)}
#rv-ui .set-btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line2);box-shadow:none}
#rv-ui .set-btn.danger{background:var(--red);color:#fff;box-shadow:none}
#rv-ui .set-btn:disabled{opacity:.55;cursor:not-allowed}
#rv-ui .set-input{width:100%;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);font-family:var(--font);font-size:13px}
/* Filtros + días */
#rv-ui .rv-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
#rv-ui .rv-fbtn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);color:var(--ink2);font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer}
#rv-ui .rv-fbtn.on{background:var(--ink);color:var(--panel);border-color:var(--ink)}
#rv-ui .rv-fbtn i{font-style:normal;font-family:var(--mono);font-size:11px;opacity:.7}
#rv-ui .rv-days{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
#rv-ui .rv-chip{height:30px;padding:0 12px;border-radius:9px;border:1px solid var(--line2);background:var(--panel);color:var(--ink2);font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer;text-transform:capitalize}
#rv-ui .rv-chip.on{background:var(--orange);color:#fff;border-color:var(--orange)}
/* Filas */
#rv-ui #rv-list{display:grid;gap:10px}
#rv-ui .rv-row{display:flex;align-items:flex-start;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
#rv-ui .rv-row.off{opacity:.62}
#rv-ui .rv-when{flex:0 0 auto;text-align:center;min-width:64px;padding-top:2px}
#rv-ui .rv-when b{display:block;font-size:17px;font-weight:800;font-family:var(--mono);color:var(--ink);letter-spacing:-.02em}
#rv-ui .rv-when span{display:block;font-size:11px;color:var(--ink3);text-transform:capitalize;margin-top:2px}
#rv-ui .rv-main{flex:1 1 auto;min-width:0}
#rv-ui .rv-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#rv-ui .rv-top b{font-size:15px;font-weight:800;color:var(--ink)}
#rv-ui .rv-st{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--line2);color:var(--ink2)}
#rv-ui .rv-st.ok{background:var(--green-soft,#E7F8F1);color:var(--green,#0F7B5A)}
#rv-ui .rv-st.warn{background:var(--amber-soft);color:var(--amber)}
#rv-ui .rv-st.bad{background:var(--red-soft);color:var(--red)}
#rv-ui .rv-sub{font-size:12.5px;color:var(--ink2);margin-top:3px;line-height:1.45}
#rv-ui .rv-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
#rv-ui .rv-tag{font-size:11px;font-weight:700;padding:3px 9px;border-radius:7px;background:var(--line2);color:var(--ink2)}
#rv-ui .rv-tag.pern{background:#EEF2FF;color:#4338CA}
#rv-ui .rv-tag.tent{background:var(--amber-soft);color:var(--amber)}
#rv-ui .rv-tag.late{background:var(--red-soft);color:var(--red)}
#rv-ui .rv-tag.ready{background:var(--green-soft,#E7F8F1);color:var(--green,#0F7B5A)}
#rv-ui .rv-tag.star{background:#FEF3C7;color:#B45309}
#rv-ui .rv-note{font-size:11.5px;color:var(--ink3);margin-top:6px;font-style:italic}
#rv-ui .rv-cancel{margin-top:10px;padding:12px;border:1px solid var(--red);background:var(--red-soft);border-radius:12px}
#rv-ui .rv-cancel-acts{display:flex;gap:8px;margin-top:9px}
#rv-ui .rv-acts{flex:0 0 auto;display:flex;align-items:center;gap:8px}
#rv-ui .rv-ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--line2);color:var(--ink2);background:var(--panel)}
/* El de escribir es un <button>, no un <a>: hay que resetearle lo de botón. */
#rv-ui button.rv-ic{padding:0;font:inherit;cursor:pointer}
#rv-ui .rv-msg{font-size:13px;color:var(--ink2);padding:8px}
#rv-ui .rv-msg.bad{color:var(--red)}
#rv-ui .rv-empty{text-align:center;padding:46px 20px;color:var(--ink2)}
#rv-ui .rv-empty .icon{width:34px;height:34px;color:var(--ink3);margin:0 auto 10px}
#rv-ui .rv-empty h3{font-size:16px;font-weight:800;color:var(--ink)}
#rv-ui .rv-empty p{font-size:13px;margin-top:4px}
@media(max-width:640px){
  #rv-ui .rv-row{flex-wrap:wrap}
  #rv-ui .rv-acts{width:100%;justify-content:flex-end}
}

/* Inspecciones — filtro "Autos" (selector de vehículo) + resolución con foto del admin */
#inspections-ui .autosel{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#inspections-ui .autosel label{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
#inspections-ui .autosel select{height:40px;min-width:230px;border:1px solid var(--line2);border-radius:11px;padding:0 12px;font-family:var(--font);font-size:13px;background:var(--panel);color:var(--ink);outline:none;cursor:pointer}
#inspections-ui .autosel select:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
#inspections-ui #insp-decision label{display:block;font-size:12px;font-weight:700;color:var(--ink2);margin:0 0 6px 2px}
#inspections-ui #insp-decision textarea{width:100%;min-height:74px;border:1px solid var(--line2);border-radius:11px;padding:10px 12px;font-family:var(--font);font-size:13px;color:var(--ink);background:var(--panel);resize:vertical;outline:none}
#inspections-ui #insp-decision textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
#inspections-ui .adminphoto{margin-top:12px}
#inspections-ui .adminphoto-prev{position:relative;display:inline-block;margin-top:10px}
#inspections-ui .adminphoto-prev img{width:120px;height:90px;object-fit:cover;border-radius:11px;border:1px solid var(--line2);display:block}
#inspections-ui .adminphoto-prev .x{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:13px;cursor:pointer;line-height:1}

/* Ajustes — gestión de vehículos (flota) */
.set-ui .set-divider{height:1px;background:var(--line);border:0}
.set-ui .veh-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:8px}
.set-ui .veh-info{flex:1;min-width:0}
.set-ui .veh-info b{display:block;font-size:14px;font-weight:800;color:var(--ink)}
.set-ui .veh-info span{display:block;font-size:12px;color:var(--ink2);margin-top:1px}
.set-ui .veh-stat{font-size:11px;font-weight:800;border-radius:999px;padding:3px 10px;background:var(--panel2);color:var(--ink2);white-space:nowrap}
.set-ui .veh-stat.st-available{background:var(--green-soft);color:var(--green)}
.set-ui .veh-stat.st-in_use,.set-ui .veh-stat.st-reserved{background:var(--amber-soft);color:var(--amber)}
.set-ui .veh-stat.st-maintenance,.set-ui .veh-stat.st-blocked{background:var(--red-soft);color:var(--red)}
.set-ui .veh-del{flex:0 0 auto;width:34px;height:34px;border-radius:9px;border:1px solid var(--line2);background:var(--panel);color:var(--red);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.14s}
.set-ui .veh-del:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* ===== Admin: Recompensas — diseño UX/UI, scopeado #rewards-ui ===== */
#rewards-ui{
  --bg:#F8FAFC;--panel:#FFFFFF;--panel2:#F1F5F9;--ink:#211D18;--ink2:#6B6258;--ink3:#A39A8D;
  --line:#E2E8F0;--line2:#CBD5E1;
  --orange:#F26522;--orange-soft:#FCE4D6;
  --green:#16936A;--green-soft:#E0F1E8;
  --amber:#D98A12;--amber-soft:#FBEBCF;
  --red:#DB4B3F;--red-soft:#FADFDC;
  --plata:#7E8794;--plata-soft:#ECEEF1;--oro:#C9810F;--oro-soft:#FBEBCF;--diamante:#1E91A6;--diamante-soft:#DEF0F3;
  --shadow:0 6px 18px rgba(33,29,24,.07);
  --font:"Hanken Grotesk",system-ui,sans-serif;--mono:"Space Mono",ui-monospace,monospace;
  color:var(--ink);padding:4px 0 48px;font-family:var(--font)
}
#rewards-ui .icon{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
#rewards-ui .phead{margin-bottom:20px}
#rewards-ui .phead h1{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1}
#rewards-ui .phead p{font-size:13px;color:var(--ink2);margin-top:7px}
#rewards-ui .card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);margin-bottom:16px}
#rewards-ui .ch{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
#rewards-ui .ch .ci{width:36px;height:36px;border-radius:10px;background:var(--panel2);display:grid;place-items:center;color:var(--ink2);flex:0 0 auto}
#rewards-ui .ch h2{font-size:15.5px;font-weight:800;letter-spacing:-.01em}
#rewards-ui .ch p{font-size:12px;color:var(--ink2);margin-top:2px}
#rewards-ui .ch .count{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:700;background:var(--panel2);border:1px solid var(--line);color:var(--ink2);border-radius:999px;padding:3px 10px}
#rewards-ui .ch .count.alert{background:var(--amber-soft);border-color:transparent;color:var(--amber)}
#rewards-ui .cbody{padding:16px 20px}
#rewards-ui .cbody.flush{padding:0}
#rewards-ui .tier{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto}
#rewards-ui .tier svg{width:22px;height:22px}
#rewards-ui .tier.plata{background:var(--plata-soft);color:var(--plata)}
#rewards-ui .tier.oro{background:var(--oro-soft);color:var(--oro)}
#rewards-ui .tier.diamante{background:var(--diamante-soft);color:var(--diamante)}
#rewards-ui .tier.sm{width:34px;height:34px;border-radius:10px}#rewards-ui .tier.sm svg{width:18px;height:18px}
#rewards-ui .levelchip{display:inline-flex;align-items:center;gap:6px;height:21px;padding:0 9px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
#rewards-ui .levelchip.plata{background:var(--plata-soft);color:var(--plata)}
#rewards-ui .levelchip.oro{background:var(--oro-soft);color:var(--oro)}
#rewards-ui .levelchip.diamante{background:var(--diamante-soft);color:var(--diamante)}
#rewards-ui .redrow{display:grid;grid-template-columns:38px 1fr auto auto;gap:14px;align-items:center;padding:13px 20px;border-bottom:1px solid var(--line)}
#rewards-ui .redrow:last-child{border-bottom:0}
#rewards-ui .redrow.done{opacity:.55}
#rewards-ui .avt{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;font-size:12.5px;font-weight:800;color:#fff;flex:0 0 auto}
#rewards-ui .rwho{min-width:0}
#rewards-ui .rwho b{font-size:13.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2;display:block}
#rewards-ui .rwho .meta{font-size:12px;color:var(--ink2);margin-top:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#rewards-ui .rwho .meta .rw{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink)}
#rewards-ui .rwho .meta .when{display:inline-flex;align-items:center;gap:5px}
#rewards-ui .kmtag{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink2);background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:3px 8px;white-space:nowrap}
#rewards-ui .ractions{display:flex;gap:7px}
#rewards-ui .rbtn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:9px;background:var(--panel);border:1.5px solid var(--line2);color:var(--ink2);font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer;transition:.14s}
#rewards-ui .rbtn svg{width:14px;height:14px}
#rewards-ui .rbtn.ok{color:var(--green);border-color:color-mix(in srgb,var(--green) 40%,var(--line2))}
#rewards-ui .rbtn.ok:hover{background:var(--green);color:#fff;border-color:var(--green)}
#rewards-ui .rbtn.no{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,var(--line2))}
#rewards-ui .rbtn.no:hover{background:var(--red);color:#fff;border-color:var(--red)}
#rewards-ui .resolved{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:0 4px}
#rewards-ui .resolved svg{width:14px;height:14px}
#rewards-ui .resolved.ok{color:var(--green)}#rewards-ui .resolved.no{color:var(--red)}
#rewards-ui .undo{background:none;border:0;color:var(--orange);font-weight:700;font-size:12px;cursor:pointer;text-decoration:underline;font-family:var(--font)}
#rewards-ui .emptyrow{padding:30px 20px;text-align:center;color:var(--ink3);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:9px}
#rewards-ui .emptyrow .circle{width:46px;height:46px;border-radius:999px;background:var(--green-soft);color:var(--green);display:grid;place-items:center}
#rewards-ui .emptyrow .circle .icon{width:22px;height:22px;stroke-width:2.4}
#rewards-ui .emptyrow b{color:var(--ink2);font-weight:700;font-size:13.5px}
#rewards-ui .rwd{display:grid;grid-template-columns:42px 1fr auto;gap:14px;align-items:center;padding:13px 20px;border-bottom:1px solid var(--line)}
#rewards-ui .rwd:last-child{border-bottom:0}
#rewards-ui .rwd.off{opacity:.55}
#rewards-ui .rinfo{min-width:0}
#rewards-ui .rinfo .rtop{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
#rewards-ui .rinfo b{font-size:14.5px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
#rewards-ui .rinfo .km{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--orange)}
#rewards-ui .rinfo .desc{font-size:12.5px;color:var(--ink2);margin-top:4px}
#rewards-ui .rctl{display:flex;align-items:center;gap:8px}
#rewards-ui .tg{position:relative;width:42px;height:24px;border-radius:999px;background:var(--line2);cursor:pointer;flex-shrink:0;transition:background .15s;border:0}
#rewards-ui .tg::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .15s}
#rewards-ui .tg.on{background:var(--green)}#rewards-ui .tg.on::after{left:20px}
#rewards-ui .tglabel{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);width:54px}
#rewards-ui .tglabel.on{color:var(--green)}
#rewards-ui .cfgbtn{appearance:none;border:1px solid var(--line2);background:var(--panel);width:32px;height:32px;border-radius:9px;color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.14s}
#rewards-ui .cfgbtn:hover{color:var(--ink);border-color:var(--ink3)}
#rewards-ui .cfgbtn.danger:hover{color:var(--red);border-color:var(--red)}
#rewards-ui .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#rewards-ui .field label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:7px}
#rewards-ui .input{height:42px;width:100%;border:1px solid var(--line2);border-radius:10px;background:var(--panel);padding:0 13px;font-family:var(--font);font-size:14px;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
#rewards-ui .input:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
#rewards-ui .input.mono{font-family:var(--mono);font-size:13px}
#rewards-ui .selwrap{position:relative}
#rewards-ui select.sel{height:42px;width:100%;border:1px solid var(--line2);border-radius:10px;background:var(--panel);padding:0 38px 0 13px;font-family:var(--font);font-size:14px;font-weight:600;color:var(--ink);outline:none;appearance:none;cursor:pointer}
#rewards-ui select.sel:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
#rewards-ui .selwrap .chev{position:absolute;right:13px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ink3)}
#rewards-ui .formfoot{display:flex;align-items:center;gap:12px;margin-top:16px}
#rewards-ui .btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:11px;border:0;background:var(--orange);color:#fff;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 9px 22px rgba(226,85,26,.26)}
#rewards-ui .btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line2);box-shadow:none}
#rewards-ui .btn:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:760px){#rewards-ui .grid2{grid-template-columns:1fr}#rewards-ui .redrow{grid-template-columns:38px 1fr;row-gap:10px}#rewards-ui .redrow .kmtag{grid-column:2}#rewards-ui .redrow .ractions{grid-column:1/-1;justify-content:flex-end}}

/* ===== Horario: vista MÓVIL de solo lectura (diseño UX, scopeado #schedule-mobile) ===== */
/* En computador se ve el Tablero drag&drop; en celular, esta vista. */
#schedule-mobile{display:none}
@media(max-width:768px){
  section[data-panel="schedule"] #schedule-board{display:none !important}
  #schedule-mobile{display:block}
  #admin-greeting-block{display:none}
}
#schedule-mobile{
  --plata:#7E8794;--plata-soft:#ECEEF1;
  --bg:#F8FAFC;--panel:#FFFFFF;--panel2:#F1F5F9;--ink:#211D18;--ink2:#6B6258;--ink3:#A39A8D;
  --line:#E2E8F0;--line2:#CBD5E1;--orange:#F26522;--orange-soft:#FCE4D6;--green:#16936A;--green-soft:#E0F1E8;
  --amber:#D98A12;--amber-soft:#FBEBCF;--red:#DB4B3F;--red-soft:#FADFDC;--shadow:0 6px 18px rgba(33,29,24,.07);
  --font:"Hanken Grotesk",system-ui,sans-serif;--mono:"Space Mono",ui-monospace,monospace;
  color:var(--ink);font-family:var(--font);max-width:480px;margin:0 auto
}
#schedule-mobile .icon{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;fill:none}
#schedule-mobile .sm-wknav{display:flex;align-items:center;gap:10px;padding:4px 0 12px}
#schedule-mobile .sm-wknav button{width:36px;height:36px;border:1px solid var(--line2);background:var(--panel);border-radius:10px;color:var(--ink2);display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
#schedule-mobile .sm-wknav .wk{flex:1;text-align:center}
#schedule-mobile .sm-wknav .wk b{font-size:15px;font-weight:800;letter-spacing:-.01em;display:block;line-height:1.1;color:var(--ink)}
#schedule-mobile .sm-wknav .wk span{font-size:11px;color:var(--ink2);font-weight:700;display:inline-flex;align-items:center;gap:5px;margin-top:2px}
#schedule-mobile .sm-wknav .wk span i{width:6px;height:6px;border-radius:99px;background:var(--amber)}
#schedule-mobile .kpis{display:flex;gap:8px;margin-bottom:12px}
#schedule-mobile .kpi{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:10px 11px;min-width:0}
#schedule-mobile .kpi em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);display:block}
#schedule-mobile .kpi b{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1;display:block;margin-top:5px;font-variant-numeric:tabular-nums}
#schedule-mobile .kpi span{font-size:10px;color:var(--ink2);display:block;margin-top:3px;line-height:1.2}
#schedule-mobile .kpi.ok b{color:var(--green)}#schedule-mobile .kpi.warn b{color:var(--amber)}#schedule-mobile .kpi.alert b{color:var(--red)}
#schedule-mobile .strip{display:flex;gap:7px;overflow-x:auto;margin-bottom:12px;scrollbar-width:none}
#schedule-mobile .strip::-webkit-scrollbar{display:none}
#schedule-mobile .dcell{flex:0 0 auto;width:50px;padding:8px 6px;border-radius:13px;border:1.5px solid var(--line);background:var(--panel);text-align:center;cursor:pointer}
#schedule-mobile .dcell .dow{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
#schedule-mobile .dcell .dnum{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-top:2px;font-variant-numeric:tabular-nums;color:var(--ink)}
#schedule-mobile .dcell .cv{height:4px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:6px}
#schedule-mobile .dcell .cv i{display:block;height:100%;border-radius:99px;background:var(--green)}
#schedule-mobile .dcell.warn .cv i{background:var(--amber)}#schedule-mobile .dcell.alert .cv i{background:var(--red)}
#schedule-mobile .dcell.today{border-color:var(--orange-soft)}#schedule-mobile .dcell.today .dnum{color:var(--orange)}
#schedule-mobile .dcell.sel{border-color:var(--orange);background:var(--orange-soft);box-shadow:0 0 0 3px rgba(242,101,34,.12)}
#schedule-mobile .dcell.sel .dnum{color:var(--orange)}
#schedule-mobile .modebar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
#schedule-mobile .seg{display:inline-flex;background:var(--panel);border:1px solid var(--line2);border-radius:11px;padding:3px;gap:2px}
#schedule-mobile .seg button{height:32px;padding:0 15px;border:0;border-radius:8px;background:transparent;color:var(--ink2);font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer}
#schedule-mobile .seg button.on{background:var(--ink);color:var(--panel)}
#schedule-mobile .modebar .leg{margin-left:auto;display:flex;gap:11px;font-size:10.5px;color:var(--ink2)}
#schedule-mobile .modebar .leg span{display:inline-flex;align-items:center;gap:5px}
#schedule-mobile .modebar .leg i{width:9px;height:9px;border-radius:3px;background:var(--green)}
#schedule-mobile .modebar .leg i.h{background:transparent;border:1.4px dashed var(--line2)}#schedule-mobile .modebar .leg i.c{background:var(--red)}
#schedule-mobile .daytitle{display:flex;align-items:baseline;gap:9px;margin:2px 2px 12px}
#schedule-mobile .daytitle b{font-size:21px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
#schedule-mobile .daytitle span{font-size:12px;font-weight:700;color:var(--ink2)}
#schedule-mobile .daytitle .tnow{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--orange);background:var(--orange-soft);padding:3px 9px;border-radius:999px;margin-left:auto}
#schedule-mobile .band{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden}
#schedule-mobile .band-h{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line);background:var(--panel2)}
#schedule-mobile .band-h .bi{width:30px;height:30px;border-radius:9px;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2)}
#schedule-mobile .band-h .bt{font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
#schedule-mobile .band-h .bsub{font-size:11px;color:var(--ink2);margin-top:1px}
#schedule-mobile .band-h .cvpill{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;background:var(--green-soft);color:var(--green)}
#schedule-mobile .band-h .cvpill.warn{background:var(--amber-soft);color:var(--amber)}#schedule-mobile .band-h .cvpill.alert{background:var(--red-soft);color:var(--red)}
#schedule-mobile .band-b{padding:9px 13px 13px;display:grid;gap:8px}
#schedule-mobile .arow{display:flex;align-items:center;gap:11px;padding:8px 6px 8px 4px}
#schedule-mobile .arow+.arow{border-top:1px solid var(--line)}
#schedule-mobile .av{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;flex:0 0 auto}
#schedule-mobile .arow .nm{min-width:0;flex:1}
#schedule-mobile .arow .nm b{font-size:14px;font-weight:700;letter-spacing:-.01em;display:block;line-height:1.2;color:var(--ink)}
#schedule-mobile .arow .nm span{font-size:11.5px;color:var(--ink2);display:block;margin-top:1px}
#schedule-mobile .tag{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px;flex:0 0 auto}
#schedule-mobile .tag.coord{background:var(--orange-soft);color:var(--orange)}
#schedule-mobile .tag.conf{background:var(--red);color:#fff;display:inline-flex;align-items:center;gap:4px}
#schedule-mobile .arow.conf .nm b{color:var(--red)}
#schedule-mobile .empty{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1.4px dashed var(--line2);border-radius:11px;color:var(--ink3);background:var(--panel2)}
#schedule-mobile .empty .ei{width:30px;height:30px;border-radius:999px;border:1.4px dashed var(--line2);display:grid;place-items:center;flex:0 0 auto}
#schedule-mobile .empty b{font-size:13px;font-weight:700;color:var(--amber)}
#schedule-mobile .empty span{font-size:11px;color:var(--ink3);display:block}
#schedule-mobile .wkcard{background:var(--panel);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);margin-bottom:10px;overflow:hidden}
#schedule-mobile .wkcard.today{border-color:var(--orange-soft);box-shadow:0 0 0 2px var(--orange-soft),var(--shadow)}
#schedule-mobile .wkc-h{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}
#schedule-mobile .wkc-h .wd{display:flex;align-items:baseline;gap:8px}
#schedule-mobile .wkc-h .wd b{font-size:16px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
#schedule-mobile .wkc-h .wd span{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
#schedule-mobile .wkc-h .cvpill{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;background:var(--green-soft);color:var(--green)}
#schedule-mobile .wkc-h .cvpill.warn{background:var(--amber-soft);color:var(--amber)}#schedule-mobile .wkc-h .cvpill.alert{background:var(--red-soft);color:var(--red)}
#schedule-mobile .wkc-h .chev{color:var(--ink3);transition:transform .2s}
#schedule-mobile .wkcard.open .wkc-h .chev{transform:rotate(90deg)}
#schedule-mobile .wkc-b{display:none;padding:6px 14px 12px}
#schedule-mobile .wkcard.open .wkc-b{display:block}
#schedule-mobile .brow{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
#schedule-mobile .brow:last-child{border-bottom:0}
#schedule-mobile .blab{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);width:46px;flex:0 0 auto;padding-top:5px}
#schedule-mobile .chips{display:flex;flex-wrap:wrap;gap:6px;flex:1}
#schedule-mobile .nchip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 4px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink)}
#schedule-mobile .nchip .dd{width:20px;height:20px;border-radius:999px;display:grid;place-items:center;font-size:8.5px;font-weight:800;color:#fff}
#schedule-mobile .nchip.coord{background:var(--orange-soft);border-color:transparent;color:var(--orange);font-weight:700}
#schedule-mobile .nchip.conf{background:var(--red-soft);border-color:var(--red);color:var(--red);font-weight:700}
#schedule-mobile .nchip.gap{background:transparent;border:1.4px dashed var(--line2);color:var(--amber);font-weight:700;padding:0 11px}
#schedule-mobile .footnote{text-align:center;font-size:11px;color:var(--ink3);padding:8px 4px 4px;line-height:1.5}
#schedule-mobile .footnote b{color:var(--ink2)}

/* =====================================================================
   Conductor — barra de navegación inferior (pestañas) + ajustes de layout
   ===================================================================== */
#driver-nav{position:fixed;bottom:0;left:0;right:0;z-index:40;display:none;background:#fff;border-top:1px solid #E2E8F0;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -4px 16px rgba(33,29,24,.06)}
#driver-nav.show{display:grid;grid-template-columns:repeat(5,1fr)}
#driver-nav .dnav-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 8px;background:none;border:0;cursor:pointer;color:#94A3B8;font-family:inherit;font-size:11px;font-weight:700;transition:color .12s}
#driver-nav .dnav-btn .dnav-ic{font-size:20px;line-height:1;filter:grayscale(.4);opacity:.7;transition:.12s}
#driver-nav .dnav-btn.active{color:#F26522}
#driver-nav .dnav-btn.active .dnav-ic{filter:none;opacity:1;transform:translateY(-1px)}
/* Deja aire al final SOLO cuando la barra inferior está visible (no en el Inicio limpio) */
#driver-tabs-root.nav-on{padding-bottom:124px}
/* La barra de Guardar se ubica SOBRE la barra de pestañas */
#driver-save-bar{bottom:calc(60px + env(safe-area-inset-bottom))}


/* ████████████████████████████████████████████████████████████████████████████
   RUTAS DE AUXILIARES — Consola + Asignación  (feat/rutas-consola)
   Tokens y estilos portados de los previews del UX (Hanken Grotesk + Space Mono).
   Scopeados bajo #routes-ui y #consola-ui (sin :root, igual que el resto del repo).
   ████████████████████████████████████████████████████████████████████████████ */

#routes-ui {
    --bg:#F4F3F0; --panel:#FFFFFF; --panel2:#F7F6F3; --ink:#1E1C19; --ink2:#5F5B55; --ink3:#9D998F;
    --line:#E7E5DF; --line2:#D6D2C9;
    --orange:#E2551A; --orange-soft:#FBE5D8;
    --green:#16936A; --green-soft:#E3F1EA;
    --amber:#C9810F; --amber-soft:#FBEBCF;
    --red:#D6473B; --red-soft:#FADFDC;
    --blue:#2A6FDB; --blue-soft:#E2ECFB;
    /* tonos operativos (brief) */
    --h2a:#E2551A; --h2a-soft:#FBE5D8;     /* salida casa→aeropuerto */
    --a2h:#16936A; --a2h-soft:#E3F1EA;     /* llegada aeropuerto→casa */
    --hotel:#C9810F; --hotel-soft:#FBEBCF; /* pasa por hotel */
    --shadow:0 6px 18px rgba(30,28,25,.07); --shadow-lg:0 22px 44px rgba(30,28,25,.18);
    --font:"Hanken Grotesk",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace;
  }
#routes-ui[data-theme="dark"] {
    --bg:#0C0D10; --panel:#15171C; --panel2:#1A1D24; --ink:#E8EAEE; --ink2:#9AA1AB; --ink3:#5B626D;
    --line:#262A32; --line2:#333944;
    --orange:#FF7A3D; --orange-soft:#2A1810;
    --green:#2ED391; --green-soft:#10271E;
    --amber:#F5B53D; --amber-soft:#2C2212;
    --red:#FF5E4F; --red-soft:#2E1512;
    --blue:#5B9BFF; --blue-soft:#11203A;
    --h2a:#FF7A3D; --h2a-soft:#2A1810; --a2h:#2ED391; --a2h-soft:#10271E; --hotel:#F5B53D; --hotel-soft:#2C2212;
    --shadow:0 8px 20px rgba(0,0,0,.4); --shadow-lg:0 22px 44px rgba(0,0,0,.55);
  }
#routes-ui * {box-sizing:border-box;margin:0;padding:0}
#routes-ui {height:100%}
#routes-ui {background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;
    display:grid;grid-template-rows:auto auto 1fr;height:100%;overflow:hidden;transition:background .3s,color .3s}
#routes-ui .icon {width:16px;height:16px;flex:0 0 auto;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
#routes-ui .mono {font-family:var(--mono);font-variant-numeric:tabular-nums}

  /* top bar */
#routes-ui .top {display:flex;align-items:center;gap:16px;padding:0 22px;height:56px;background:var(--panel);border-bottom:1px solid var(--line)}
#routes-ui .wm {display:flex;align-items:baseline;gap:8px;text-decoration:none;color:inherit}
#routes-ui .wm b {font-size:19px;font-weight:800;letter-spacing:-.03em}
#routes-ui .wm i {width:6px;height:6px;border-radius:999px;background:var(--orange);display:inline-block;transform:translateY(-1px)}
#routes-ui .crumb {display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink3);font-weight:600;margin-left:4px}
#routes-ui .crumb a {color:var(--ink3);text-decoration:none}.crumb a:hover{color:var(--ink2)}
#routes-ui .crumb .sep {color:var(--line2)}
#routes-ui .crumb b {color:var(--ink);font-weight:800;font-size:14px;letter-spacing:-.01em}
#routes-ui .crumb .wsdot {display:inline-flex;align-items:center;gap:6px;background:var(--blue-soft);color:var(--blue);font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px}
#routes-ui .top .right {margin-left:auto;display:flex;align-items:center;gap:9px}
#routes-ui .iconbtn {width:36px;height:36px;border:1px solid var(--line2);background:var(--panel);border-radius:10px;color:var(--ink2);display:grid;place-items:center;cursor:pointer}
#routes-ui .iconbtn:hover {color:var(--ink)}

  /* subhead / control bar */
#routes-ui .sub {display:flex;align-items:center;gap:14px;padding:13px 22px;background:var(--panel2);border-bottom:1px solid var(--line);flex-wrap:wrap}
#routes-ui .sub h1 {font-size:19px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
#routes-ui .daypick {display:flex;align-items:center;gap:7px;color:var(--ink2)}
#routes-ui .daypick .nav {width:30px;height:30px;border:1px solid var(--line2);background:var(--panel);border-radius:8px;color:var(--ink2);display:grid;place-items:center;cursor:pointer}
#routes-ui .daypick b {font-size:13.5px;font-weight:700;min-width:104px;text-align:center}
#routes-ui .seg {display:inline-flex;background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:3px;gap:2px}
#routes-ui .seg button {height:30px;padding:0 13px;border:0;border-radius:7px;background:transparent;color:var(--ink2);font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.14s}
#routes-ui .seg button .dot {width:8px;height:8px;border-radius:99px}
#routes-ui .seg button[data-trip=sal] .dot {background:var(--h2a)} .seg button[data-trip=lle] .dot{background:var(--a2h)}
#routes-ui .seg button.on {background:var(--ink);color:var(--panel)}
#routes-ui .sub .spacer {flex:1}
#routes-ui .daystat {display:flex;gap:8px}
#routes-ui .ds {background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:6px 12px;text-align:center;min-width:64px}
#routes-ui .ds b {font-size:17px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;display:block}
#routes-ui .ds span {font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);display:block;margin-top:3px}
#routes-ui .ds.ok b {color:var(--green)} .ds.warn b{color:var(--amber)} .ds.bad b{color:var(--red)}
#routes-ui .btn {display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 17px;border-radius:11px;border:0;background:var(--orange);color:#fff;font-family:var(--font);font-size:13.5px;font-weight:800;cursor:pointer;box-shadow:0 9px 22px rgba(226,85,26,.26)}
#routes-ui .btn:disabled {opacity:.5;cursor:not-allowed;box-shadow:none}
#routes-ui .btn.ghost {background:var(--panel);color:var(--ink);border:1px solid var(--line2);box-shadow:none;font-weight:700}
#routes-ui .btn .icon {width:16px;height:16px}

  /* alert banner */
#routes-ui .alert {display:none;align-items:center;gap:11px;margin:0;padding:11px 22px;background:var(--red-soft);border-bottom:1px solid color-mix(in srgb,var(--red) 30%,var(--line));color:var(--red);font-size:13px;font-weight:700}
#routes-ui .alert.show {display:flex}
#routes-ui .alert .icon {width:17px;height:17px}
#routes-ui .alert .fix {margin-left:auto;background:var(--red);color:#fff;border:0;height:30px;padding:0 13px;border-radius:8px;font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer}

  /* stage */
#routes-ui .stage {display:grid;grid-template-columns:300px 1fr;min-height:0;overflow:hidden}
  /* pool */
#routes-ui .pool {background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
#routes-ui .pool-h {padding:14px 16px 10px;border-bottom:1px solid var(--line)}
#routes-ui .pool-h .t {display:flex;align-items:center;gap:9px}
#routes-ui .pool-h .t b {font-size:14px;font-weight:800;letter-spacing:-.01em}
#routes-ui .pool-h .t .c {margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:700;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:2px 9px;color:var(--ink2)}
#routes-ui .pool-h p {font-size:11.5px;color:var(--ink3);margin-top:6px;line-height:1.4}
#routes-ui .pool-list {flex:1;overflow-y:auto;padding:11px;display:flex;flex-direction:column;gap:8px;min-height:0}
#routes-ui .pool-list::-webkit-scrollbar {width:8px}.pool-list::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
#routes-ui .pool-list.dragover {background:var(--blue-soft)}
#routes-ui .pool-empty {margin:auto;text-align:center;color:var(--ink3);padding:30px 14px}
#routes-ui .pool-empty .circle {width:50px;height:50px;border-radius:999px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;margin:0 auto 12px}
#routes-ui .pool-empty b {font-size:13.5px;color:var(--ink2);font-weight:700;display:block}
#routes-ui .pool-empty span {font-size:12px;display:block;margin-top:4px}

  /* aux card */
#routes-ui .aux {background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:10px 11px;cursor:grab;transition:box-shadow .14s,border-color .14s,transform .08s;position:relative}
#routes-ui .aux:hover {box-shadow:var(--shadow);border-color:var(--ink3)}
#routes-ui .aux:active {cursor:grabbing}
#routes-ui .aux.dragging {opacity:.4}
#routes-ui .aux .a-top {display:flex;align-items:center;gap:9px}
#routes-ui .aux .a-av {width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;flex:0 0 auto}
#routes-ui .aux .a-nm {min-width:0;flex:1}
#routes-ui .aux .a-nm b {font-size:13px;font-weight:700;letter-spacing:-.01em;line-height:1.15;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#routes-ui .aux .a-nm span {font-size:11px;color:var(--ink2);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#routes-ui .aux .a-meta {display:flex;align-items:center;gap:7px;margin-top:9px}
#routes-ui .triptype {display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
#routes-ui .triptype.sal {background:var(--h2a-soft);color:var(--h2a)} .triptype.lle{background:var(--a2h-soft);color:var(--a2h)} .triptype.hotel{background:var(--hotel-soft);color:var(--hotel)}
#routes-ui .triptype .icon {width:11px;height:11px}
#routes-ui .dl {margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--ink2)}
#routes-ui .dl.hard {color:var(--h2a)} .dl .icon{width:12px;height:12px}
#routes-ui .aux .pax {position:absolute;top:9px;right:10px;font-size:10px;font-weight:800;color:var(--ink3)}
  /* Contexto del auxiliar en la tarjeta: vuelo, nota al conductor y teléfono */
#routes-ui .aux .a-flight {font-size:10px;font-weight:800;font-family:var(--mono);color:var(--ink2);background:var(--panel2);border:1px solid var(--line2);padding:2px 6px;border-radius:6px}
#routes-ui .aux .a-note {display:flex;align-items:flex-start;gap:5px;margin-top:8px;font-size:11px;line-height:1.35;color:var(--ink2);background:var(--panel2);border-radius:8px;padding:6px 8px}
#routes-ui .aux .a-note .icon {width:11px;height:11px;flex:0 0 auto;margin-top:2px}
#routes-ui .aux .a-tel {display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:11.5px;font-weight:700;color:var(--h2a);text-decoration:none}
#routes-ui .aux .a-tel .icon {width:12px;height:12px}
#routes-ui .aux .a-tel:hover {text-decoration:underline}
#routes-ui .stop .s-note {display:flex;align-items:flex-start;gap:4px;margin-top:5px;font-size:10px;line-height:1.3;color:var(--ink2);white-space:normal}
#routes-ui .stop .s-note .icon {flex:0 0 auto;margin-top:1.5px}

  /* lanes */
#routes-ui .lanes {overflow-y:auto;padding:16px;display:grid;grid-template-columns:440px minmax(0,1fr);gap:16px;align-items:start;align-content:start;min-height:0;background:var(--bg)}
#routes-ui .lanes::-webkit-scrollbar {width:10px}.lanes::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
#routes-ui .axis {display:flex;align-items:center;gap:0;padding:0 4px 0 232px;height:18px;color:var(--ink3);font-size:10px;font-weight:700;font-family:var(--mono)}
#routes-ui .axis span {flex:1;border-left:1px solid var(--line);padding-left:6px}
#routes-ui .axis span:first-child {border-left:0}

#routes-ui .lane {background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;transition:border-color .15s,box-shadow .15s}
#routes-ui .lane.ontime {border-left:4px solid var(--green)}
#routes-ui .lane.tight {border-left:4px solid var(--amber)}
#routes-ui .lane.late {border-left:4px solid var(--red);box-shadow:0 0 0 2px var(--red-soft),var(--shadow)}
#routes-ui .lane.empty {border-left:4px solid var(--line2)}
#routes-ui .lane-h {display:flex;align-items:center;gap:13px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--panel2)}
#routes-ui .car {display:flex;align-items:center;gap:10px;min-width:200px}
#routes-ui .car .cav {width:38px;height:38px;border-radius:11px;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2)}
#routes-ui .car .cinfo b {font-size:14.5px;font-weight:800;letter-spacing:-.01em;display:block;line-height:1.1}
#routes-ui .car .cinfo .drv {font-size:11.5px;margin-top:2px;display:inline-flex;align-items:center;gap:5px}
#routes-ui .car .cinfo .drv.none {color:var(--amber);font-weight:700}
#routes-ui .car .cinfo .drv.set {color:var(--ink2)}
#routes-ui .car .cinfo .drv .av {width:16px;height:16px;border-radius:99px;font-size:8px;font-weight:800;color:#fff;display:grid;place-items:center}

#routes-ui .cap {display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--ink2)}
#routes-ui .cap .pips {display:flex;gap:3px}
#routes-ui .cap .pip {width:11px;height:11px;border-radius:4px;background:var(--line);border:1px solid var(--line2)}
#routes-ui .cap .pip.f {background:var(--ink);border-color:var(--ink)}
#routes-ui .cap.full .pip.f {background:var(--red);border-color:var(--red)}

#routes-ui .sema {margin-left:auto;display:flex;align-items:center;gap:12px}
#routes-ui .holg {text-align:right}
#routes-ui .holg .big {font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
#routes-ui .holg .sm {font-size:10.5px;color:var(--ink3);margin-top:1px}
#routes-ui .spill {display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
#routes-ui .spill .icon {width:13px;height:13px}
#routes-ui .spill.ontime {background:var(--green-soft);color:var(--green)}
#routes-ui .spill.tight {background:var(--amber-soft);color:var(--amber)}
#routes-ui .spill.late {background:var(--red);color:#fff}
#routes-ui .spill.empty {background:var(--panel);color:var(--ink3);border:1px solid var(--line2)}
#routes-ui .assignbtn {height:34px;padding:0 13px;border-radius:9px;border:1.5px solid var(--line2);background:var(--panel);color:var(--ink2);font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.14s}
#routes-ui .assignbtn:hover {color:var(--ink);border-color:var(--ink3)}
#routes-ui .assignbtn.cta {border-color:var(--orange);color:var(--orange);background:var(--orange-soft)}

  /* lane body: stop sequence */
#routes-ui .seq {display:flex;align-items:stretch;gap:0;padding:14px 16px;overflow-x:auto;min-height:84px}
#routes-ui .seq::-webkit-scrollbar {height:7px}.seq::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
#routes-ui .seq.dragover {background:var(--blue-soft)}
#routes-ui .stop {flex:0 0 auto;width:158px;background:var(--panel);border:1px solid var(--line2);border-radius:11px;padding:9px 10px;cursor:grab;transition:.12s;position:relative}
#routes-ui .stop:hover {border-color:var(--ink3);box-shadow:var(--shadow)}
#routes-ui .stop.dragging {opacity:.4}
#routes-ui .stop .s-top {display:flex;align-items:center;gap:8px}
#routes-ui .stop .s-n {width:20px;height:20px;border-radius:6px;background:var(--ink);color:var(--panel);font-size:10px;font-weight:800;display:grid;place-items:center;flex:0 0 auto}
#routes-ui .stop .s-av {width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:9.5px;font-weight:800;color:#fff;flex:0 0 auto}
#routes-ui .stop .s-nm {font-size:12px;font-weight:700;letter-spacing:-.01em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
#routes-ui .stop .s-meta {display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:6px}
#routes-ui .stop .s-zona {font-size:10.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#routes-ui .stop .s-eta {font-size:10.5px;font-weight:700;color:var(--ink2);font-family:var(--mono);flex:0 0 auto}
#routes-ui .stop .s-dl {font-size:10px;color:var(--ink3);font-family:var(--mono);margin-top:3px;display:flex;align-items:center;gap:4px}
#routes-ui .stop.over-dl {border-color:var(--red)} .stop.over-dl .s-dl{color:var(--red);font-weight:700}
#routes-ui .arrow {flex:0 0 auto;width:22px;display:grid;place-items:center;color:var(--ink3)}
#routes-ui .arrow .icon {width:15px;height:15px}
#routes-ui .airport {flex:0 0 auto;width:128px;border-radius:11px;border:1.5px dashed var(--line2);background:var(--panel2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--ink2);padding:8px}
#routes-ui .airport .icon {width:20px;height:20px;color:var(--ink3)}
#routes-ui .airport b {font-size:12px;font-weight:800}
#routes-ui .airport .arr {font-size:11px;font-weight:700;font-family:var(--mono)}
#routes-ui .airport.ontime {border-color:var(--green);color:var(--green)} .airport.ontime .icon{color:var(--green)}
#routes-ui .airport.tight {border-color:var(--amber);color:var(--amber)} .airport.tight .icon{color:var(--amber)}
#routes-ui .airport.late {border-color:var(--red);background:var(--red-soft);color:var(--red)} .airport.late .icon{color:var(--red)}
#routes-ui .lane-empty {padding:18px 16px;display:flex;align-items:center;gap:10px;color:var(--ink3);font-size:12.5px;border:1.4px dashed var(--line2);border-radius:11px;margin:14px 16px}
#routes-ui .lane-empty .icon {width:18px;height:18px}

  /* optimizing overlay */
#routes-ui .ovl {position:fixed;inset:0;background:rgba(30,28,25,.42);display:none;align-items:center;justify-content:center;z-index:70;backdrop-filter:blur(2px)}
#routes-ui .ovl.show {display:flex}
#routes-ui .ovl .box {background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);padding:30px 34px;text-align:center;width:340px}
#routes-ui .ovl .ring {width:54px;height:54px;margin:0 auto 16px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--orange);animation:spin-rt .8s linear infinite}
  @keyframes spin-rt{to{transform:rotate(360deg)}}
  .ovl b{font-size:16px;font-weight:800;letter-spacing:-.01em;display:block}
#routes-ui .ovl p {font-size:12.5px;color:var(--ink2);margin-top:6px;line-height:1.5}
#routes-ui .ovl .step {font-size:11.5px;color:var(--ink3);margin-top:14px;font-family:var(--mono);min-height:16px}

  /* drawer */
#routes-ui .scrim {position:fixed;inset:0;background:rgba(30,28,25,.4);opacity:0;pointer-events:none;transition:opacity .25s;z-index:80}
#routes-ui .scrim.show {opacity:1;pointer-events:auto}
#routes-ui .drawer {position:fixed;top:0;right:0;bottom:0;width:min(440px,94vw);background:var(--panel);border-left:1px solid var(--line);box-shadow:var(--shadow-lg);
    transform:translateX(100%);transition:transform .28s cubic-bezier(.3,.9,.3,1);z-index:85;display:flex;flex-direction:column}
#routes-ui .drawer.show {transform:translateX(0)}
#routes-ui .dr-h {display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
#routes-ui .dr-h .cav {width:42px;height:42px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2)}
#routes-ui .dr-h b {font-size:17px;font-weight:800;letter-spacing:-.02em;display:block;line-height:1.1}
#routes-ui .dr-h span {font-size:12px;color:var(--ink2);margin-top:2px;display:block}
#routes-ui .dr-h .x {margin-left:auto;width:34px;height:34px;border:1px solid var(--line2);background:var(--panel);border-radius:9px;color:var(--ink2);cursor:pointer;display:grid;place-items:center}
#routes-ui .dr-b {flex:1;overflow-y:auto;padding:18px 20px}
#routes-ui .dr-b::-webkit-scrollbar {width:8px}.dr-b::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
#routes-ui .dsec {margin-bottom:20px}
#routes-ui .dsec h3 {font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);margin-bottom:11px}
#routes-ui .sumcard {border:1px solid var(--line);border-radius:13px;overflow:hidden}
#routes-ui .sumrow {display:flex;justify-content:space-between;gap:12px;padding:11px 13px;font-size:13px;border-bottom:1px solid var(--line)}
#routes-ui .sumrow:last-child {border-bottom:0}
#routes-ui .sumrow .k {color:var(--ink2)} .sumrow .v{font-weight:700;text-align:right}
#routes-ui .sumrow .v.mono {font-family:var(--mono)}
#routes-ui .sumrow.hl {background:var(--panel2)}
#routes-ui .sumrow .v .spill {height:24px;font-size:11px;padding:0 10px}
#routes-ui .stoplist {display:flex;flex-direction:column;gap:7px}
#routes-ui .sl {display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
#routes-ui .sl .n {width:19px;height:19px;border-radius:6px;background:var(--ink);color:var(--panel);font-size:10px;font-weight:800;display:grid;place-items:center}
#routes-ui .sl .av {width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:9.5px;font-weight:800;color:#fff}
#routes-ui .sl .nm {flex:1;min-width:0}.sl .nm b{font-size:12.5px;font-weight:700;display:block;line-height:1.1}.sl .nm span{font-size:10.5px;color:var(--ink2)}
#routes-ui .sl .eta {font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink2)}
#routes-ui .drv-opt {display:flex;align-items:center;gap:11px;padding:11px 12px;border:1.5px solid var(--line2);border-radius:12px;cursor:pointer;margin-bottom:8px;transition:.14s}
#routes-ui .drv-opt:hover {border-color:var(--ink3)}
#routes-ui .drv-opt.sel {border-color:var(--orange);background:var(--orange-soft)}
#routes-ui .drv-opt .av {width:34px;height:34px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff}
#routes-ui .drv-opt .info {flex:1;min-width:0}.drv-opt .info b{font-size:13.5px;font-weight:700;display:block;line-height:1.15}.drv-opt .info span{font-size:11.5px;color:var(--ink2)}
#routes-ui .drv-opt .tick {width:22px;height:22px;border-radius:999px;border:1.5px solid var(--line2);display:grid;place-items:center;color:transparent;flex:0 0 auto}
#routes-ui .drv-opt.sel .tick {background:var(--orange);border-color:var(--orange);color:#fff}
#routes-ui .dr-f {padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;background:var(--panel2)}
#routes-ui .dr-f .btn {flex:1;justify-content:center}

#routes-ui .toast {position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(90px);background:var(--ink);color:var(--bg);
    padding:11px 18px;border-radius:12px;font-size:13px;font-weight:600;box-shadow:var(--shadow-lg);z-index:95;display:flex;align-items:center;gap:10px;transition:transform .3s cubic-bezier(.2,.8,.2,1);max-width:80vw}
#routes-ui .toast.show {transform:translateX(-50%) translateY(0)}
#routes-ui .toast .led {width:8px;height:8px;border-radius:99px;background:var(--orange)}

#consola-ui {
    --bg:#F4F3F0; --panel:#FFFFFF; --panel2:#F7F6F3; --ink:#1E1C19; --ink2:#5F5B55; --ink3:#9D998F;
    --line:#E7E5DF; --line2:#D6D2C9;
    --orange:#E2551A; --orange-soft:#FBE5D8;
    --green:#16936A; --green-soft:#E3F1EA;
    --amber:#C9810F; --amber-soft:#FBEBCF;
    --red:#D6473B; --red-soft:#FADFDC;
    --blue:#2A6FDB; --blue-soft:#E2ECFB;
    --shadow:0 6px 18px rgba(30,28,25,.07); --shadow-lg:0 22px 44px rgba(30,28,25,.18);
    --font:"Hanken Grotesk",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace;
    --side:264px;
  }
#consola-ui[data-theme="dark"] {
    --bg:#0C0D10; --panel:#15171C; --panel2:#1A1D24; --ink:#E8EAEE; --ink2:#9AA1AB; --ink3:#5B626D;
    --line:#262A32; --line2:#333944;
    --orange:#FF7A3D; --orange-soft:#2A1810;
    --green:#2ED391; --green-soft:#10271E;
    --amber:#F5B53D; --amber-soft:#2C2212;
    --red:#FF5E4F; --red-soft:#2E1512;
    --blue:#5B9BFF; --blue-soft:#11203A;
    --shadow:0 8px 20px rgba(0,0,0,.4); --shadow-lg:0 22px 44px rgba(0,0,0,.55);
  }
#consola-ui * {box-sizing:border-box;margin:0;padding:0}
#consola-ui {height:100%}
#consola-ui {background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;
    display:grid;grid-template-columns:var(--side) 1fr;height:100%;overflow:hidden;transition:background .3s,color .3s}
#consola-ui body.collapsed {--side:72px}
#consola-ui .icon {width:18px;height:18px;flex:0 0 auto;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}

  /* ===== SIDEBAR ===== */
#consola-ui .side {background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;overflow:hidden}
#consola-ui .sbrand {display:flex;align-items:center;gap:10px;padding:16px 18px;height:60px;flex:0 0 auto}
#consola-ui .sbrand .logo {display:flex;align-items:baseline;gap:8px;min-width:0;overflow:hidden}
#consola-ui .sbrand .logo b {font-size:20px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
#consola-ui .sbrand .logo i {width:7px;height:7px;border-radius:999px;background:var(--orange);display:inline-block;transform:translateY(-1px);flex:0 0 auto}
#consola-ui .sbrand .collapse {margin-left:auto;width:34px;height:34px;border:1px solid var(--line2);background:var(--panel);border-radius:9px;color:var(--ink2);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;transition:.15s}
#consola-ui .sbrand .collapse:hover {color:var(--ink)}
#consola-ui body.collapsed .sbrand {justify-content:center;padding:16px 0}
#consola-ui body.collapsed .sbrand .logo b, #consola-ui body.collapsed .sbrand .collapse {display:none}

  /* workspace switcher */
#consola-ui .wsw {padding:4px 14px 12px;flex:0 0 auto}
#consola-ui .wsw .lbl {font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);padding:0 4px 7px}
#consola-ui .wstabs {display:flex;background:var(--panel2);border:1px solid var(--line2);border-radius:11px;padding:3px;gap:2px}
#consola-ui .wstabs button {flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;border:0;border-radius:8px;background:transparent;
    color:var(--ink2);font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;transition:.15s;min-width:0}
#consola-ui .wstabs button .icon {width:15px;height:15px}
#consola-ui .wstabs button.on {background:var(--ink);color:var(--panel);box-shadow:var(--shadow)}
#consola-ui body.collapsed .wsw .lbl {display:none}
#consola-ui body.collapsed .wstabs {flex-direction:column;background:transparent;border:0;padding:0;gap:6px}
#consola-ui body.collapsed .wstabs button {height:40px}
#consola-ui body.collapsed .wstabs button span {display:none}
#consola-ui body.collapsed .wstabs button {border:1px solid var(--line2)}
#consola-ui body.collapsed .wstabs button.on {border-color:var(--ink)}

  /* nav groups */
#consola-ui .snav {flex:1;overflow-y:auto;padding:6px 12px 16px;min-height:0}
#consola-ui .snav::-webkit-scrollbar {width:7px} .snav::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
#consola-ui .grp {margin-top:14px}
#consola-ui .grp:first-child {margin-top:4px}
#consola-ui .grp-h {display:flex;align-items:center;gap:8px;padding:4px 10px 7px;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
#consola-ui .grp-h .gi {width:14px;height:14px;color:var(--ink3)}
#consola-ui body.collapsed .grp-h {justify-content:center;padding:8px 0 6px}
#consola-ui body.collapsed .grp-h .gtext {display:none}
#consola-ui body.collapsed .grp {border-top:1px solid var(--line);margin-top:8px;padding-top:4px}
#consola-ui body.collapsed .grp:first-child {border-top:0}

#consola-ui .nav-i {display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;cursor:pointer;color:var(--ink2);transition:background .13s,color .13s;position:relative;margin-bottom:2px}
#consola-ui .nav-i:hover {background:var(--panel2);color:var(--ink)}
#consola-ui .nav-i.active {background:var(--orange-soft);color:var(--orange)}
#consola-ui .nav-i.active .ni-ic {color:var(--orange)}
#consola-ui .nav-i .ni-ic {width:19px;height:19px;color:var(--ink3);flex:0 0 auto}
#consola-ui .nav-i:hover .ni-ic {color:var(--ink2)}
#consola-ui .nav-i .ni-tx {font-size:13.5px;font-weight:600;white-space:nowrap;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
#consola-ui .nav-i .badge {font-family:var(--mono);font-size:10px;font-weight:700;background:var(--red);color:#fff;border-radius:999px;padding:1px 7px;line-height:1.4;flex:0 0 auto}
#consola-ui .nav-i .badge.soft {background:var(--panel2);color:var(--ink3);border:1px solid var(--line2)}
#consola-ui .nav-i .soon {font-size:8.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:2px 6px;flex:0 0 auto}
#consola-ui .nav-i.dim {opacity:.62}
#consola-ui .nav-i.dim:hover {opacity:1}
#consola-ui body.collapsed .nav-i {justify-content:center;padding:10px 0}
#consola-ui body.collapsed .nav-i .ni-tx, #consola-ui body.collapsed .nav-i .soon {display:none}
#consola-ui body.collapsed .nav-i .badge {position:absolute;top:3px;right:8px;padding:0 5px;font-size:8.5px}
#consola-ui body.collapsed .nav-i .badge.soft {display:none}

  /* tooltip when collapsed */
#consola-ui .nav-i[data-tip]::after {content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
    background:var(--ink);color:var(--bg);font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .14s;z-index:30;box-shadow:var(--shadow-lg)}
#consola-ui body.collapsed .nav-i:hover[data-tip]::after {opacity:1}

#consola-ui .sfoot {flex:0 0 auto;border-top:1px solid var(--line);padding:10px 12px}
#consola-ui .sf-i {display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;cursor:pointer;color:var(--ink2);transition:.13s}
#consola-ui .sf-i:hover {background:var(--panel2);color:var(--ink)}
#consola-ui .sf-i .ni-ic {width:19px;height:19px;color:var(--ink3)}
#consola-ui .sf-i .ni-tx {font-size:13px;font-weight:600;white-space:nowrap}
#consola-ui body.collapsed .sf-i {justify-content:center;padding:10px 0} body.collapsed .sf-i .ni-tx{display:none}

  /* ===== MAIN ===== */
#consola-ui .main {display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
#consola-ui .mhead {height:60px;flex:0 0 auto;border-bottom:1px solid var(--line);background:var(--panel);display:flex;align-items:center;gap:14px;padding:0 22px}
#consola-ui .mhead .crumb {display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink3);font-weight:600}
#consola-ui .mhead .crumb b {color:var(--ink);font-weight:800;font-size:15px;letter-spacing:-.01em}
#consola-ui .mhead .crumb .sep {color:var(--line2)}
#consola-ui .mhead .msearch {margin-left:auto;height:38px;width:260px;max-width:36vw;border:1px solid var(--line2);border-radius:11px;background:var(--panel);display:flex;align-items:center;gap:9px;padding:0 12px;color:var(--ink3)}
#consola-ui .mhead .msearch input {border:0;background:transparent;outline:none;font-family:var(--font);font-size:13px;color:var(--ink);width:100%}
#consola-ui .mhead .msearch input::placeholder {color:var(--ink3)}
#consola-ui .mhead .ibtn {width:38px;height:38px;border:1px solid var(--line2);background:var(--panel);border-radius:11px;color:var(--ink2);display:grid;place-items:center;cursor:pointer}
#consola-ui .mhead .ibtn:hover {color:var(--ink)}

#consola-ui .mscroll {flex:1;overflow-y:auto;min-height:0;padding:24px 26px 60px}
#consola-ui .mscroll::-webkit-scrollbar {width:10px} .mscroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
#consola-ui .mwrap {width:min(1180px,100%);margin:0 auto}

#consola-ui .whead {display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:6px}
#consola-ui .whead h1 {font-size:30px;font-weight:800;letter-spacing:-.035em;line-height:1;display:flex;align-items:center;gap:12px}
#consola-ui .whead h1 .wtag {font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 11px;border-radius:999px}
#consola-ui .wtag.turnos {background:var(--orange-soft);color:var(--orange)} .wtag.rutas{background:var(--blue-soft);color:var(--blue)}
#consola-ui .whead p {font-size:13.5px;color:var(--ink2);margin-top:8px;max-width:560px;line-height:1.5}

  /* strategy strip */
#consola-ui .strat {display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:13px 16px;margin:18px 0 26px}
#consola-ui .strat .si {width:38px;height:38px;border-radius:11px;background:var(--orange-soft);color:var(--orange);display:grid;place-items:center;flex:0 0 auto}
#consola-ui .strat .stx {font-size:12.5px;color:var(--ink2);line-height:1.5;flex:1;min-width:0}
#consola-ui .strat .stx b {color:var(--ink);font-weight:700}
#consola-ui .strat .lvls {display:flex;align-items:center;gap:7px;flex:0 0 auto;font-size:11px;font-weight:700;color:var(--ink2)}
#consola-ui .strat .lvls .pill {background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
#consola-ui .strat .lvls .ar {color:var(--ink3)}
  @media(max-width:880px){#consola-ui .strat .lvls{display:none}}

  /* group section in main */
#consola-ui .gsec {margin-bottom:26px}
#consola-ui .gsec-h {display:flex;align-items:center;gap:10px;margin-bottom:13px}
#consola-ui .gsec-h .gi {width:20px;height:20px;color:var(--ink2);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#consola-ui .gsec-h h2 {font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
#consola-ui .gsec-h .gcount {font-family:var(--mono);font-size:11px;color:var(--ink3);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
#consola-ui .gsec-h .rule {flex:1;height:1px;background:var(--line)}
#consola-ui .gsec-h .gdesc {font-size:11.5px;color:var(--ink3);font-weight:600}

#consola-ui .cards {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
  @media(max-width:980px){#consola-ui .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:620px){#consola-ui .cards{grid-template-columns:1fr}}
#consola-ui .mcard{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);padding:15px;cursor:pointer;
    display:flex;flex-direction:column;gap:11px;transition:box-shadow .16s,border-color .14s,transform .1s;font-family:var(--font);min-height:120px}
#consola-ui .mcard:hover {box-shadow:var(--shadow-lg);border-color:var(--line2)}
#consola-ui .mcard:active {transform:translateY(1px)}
#consola-ui .mcard.soon {cursor:default;background:var(--panel2);box-shadow:none}
#consola-ui .mcard.soon:hover {box-shadow:none;border-color:var(--line)}
#consola-ui .mc-top {display:flex;align-items:center;gap:11px}
#consola-ui .mc-ic {width:40px;height:40px;border-radius:11px;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2);flex:0 0 auto}
#consola-ui .mcard.soon .mc-ic {color:var(--ink3)}
#consola-ui .mc-top .mc-name {font-size:15px;font-weight:800;letter-spacing:-.015em;flex:1;min-width:0}
#consola-ui .mc-top .badge {font-family:var(--mono);font-size:10.5px;font-weight:700;background:var(--red);color:#fff;border-radius:999px;padding:2px 8px;flex:0 0 auto}
#consola-ui .mc-top .star {color:var(--orange)}
#consola-ui .mc-desc {font-size:12.5px;color:var(--ink2);line-height:1.45;flex:1}
#consola-ui .mc-foot {display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700}
#consola-ui .mc-foot.go {color:var(--orange)} .mc-foot.go .icon{width:14px;height:14px}
#consola-ui .mc-foot.soonf {color:var(--ink3)}
#consola-ui .mc-foot .tagsoon {font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--panel);border:1px solid var(--line2);color:var(--ink3);border-radius:999px;padding:3px 8px}
#consola-ui .mc-foot .tagext {font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--blue-soft);border:1px solid transparent;color:var(--blue);border-radius:999px;padding:3px 8px}

#consola-ui .toast {position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(90px);background:var(--ink);color:var(--bg);
    padding:11px 18px;border-radius:12px;font-size:13px;font-weight:600;box-shadow:var(--shadow-lg);z-index:60;display:flex;align-items:center;gap:10px;transition:transform .3s cubic-bezier(.2,.8,.2,1);max-width:80vw}
#consola-ui .toast.show {transform:translateX(-50%) translateY(0)}
#consola-ui .toast .led {width:8px;height:8px;border-radius:99px;background:var(--orange)}


/* ============================================================================
   RUTAS — integración en el shell de la PWA (panel embebido bajo <main>).
   El preview era full-screen (grid top/sub/stage); aquí omitimos su .top
   (lo cubre el header del admin) y dejamos que .stage ocupe el alto restante.
   ============================================================================ */
#routes-ui{display:flex;flex-direction:column;height:calc(100dvh - 150px);min-height:540px;overflow:hidden;border:1px solid var(--line);border-radius:16px}
#routes-ui .sub{border-top-left-radius:16px;border-top-right-radius:16px}
#routes-ui .stage{flex:1;min-height:0}

/* ============================================================================
   CONSOLA — integración: sin sidebar (la nav del admin ya existe arriba);
   se muestra el contenido principal (switcher + grupos de cards) en flujo.
   ============================================================================ */
#consola-ui{display:block;height:auto;min-height:0;overflow:visible}
#consola-ui .mhead{display:none}
#consola-ui .mscroll{overflow:visible;padding:18px 22px 48px}
#consola-ui .mwrap{width:100%;max-width:1180px;margin:0 auto}
/* switcher de espacio de trabajo (Turnos/Rutas) como control superior */
#consola-ui .wsw-top{display:inline-flex;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:4px;gap:3px;margin:0 0 18px}
#consola-ui .wsw-top button{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:0;border-radius:9px;background:transparent;color:var(--ink2);font-family:var(--font);font-size:13.5px;font-weight:700;cursor:pointer;transition:.15s}
#consola-ui .wsw-top button.on{background:var(--ink);color:var(--panel);box-shadow:var(--shadow)}
#consola-ui .wsw-top button .icon{width:16px;height:16px}

/* ████████████████████████████████████████████████████████████████████████████
   SHELL ADMIN — Sidebar de navegación por capas (reemplaza la barra de pestañas).
   Vive FUERA de #consola-ui/#routes-ui, así que define su propia paleta del UX.
   Solo se activa cuando #app-shell tiene la clase .admin-shell (rol admin).
   ████████████████████████████████████████████████████████████████████████████ */
.admin-shell{
  --bg:#F4F3F0; --panel:#FFFFFF; --panel2:#F7F6F3; --ink:#1E1C19; --ink2:#5F5B55; --ink3:#9D998F;
  --line:#E7E5DF; --line2:#D6D2C9;
  --orange:#E2551A; --orange-soft:#FBE5D8;
  --green:#16936A; --green-soft:#E3F1EA;
  --amber:#C9810F; --amber-soft:#FBEBCF;
  --red:#D6473B; --red-soft:#FADFDC;
  --blue:#2A6FDB; --blue-soft:#E2ECFB;
  --shadow:0 6px 18px rgba(30,28,25,.07); --shadow-lg:0 22px 44px rgba(30,28,25,.18);
  --font:"Hanken Grotesk",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace;
  --adm-side:264px;
}

/* ----- Layout: sidebar (col 1) + breadcrumb (fila 1) + main (fila 2) ----- */
/* Header del shell (conductor): es sticky top-0, así que en iPhone instalado
   quedaba pegado bajo la barra de estado junto con su botón Salir. */
#app-header{padding-top:env(safe-area-inset-top,0px)}

#app-shell.admin-shell{
  display:grid;
  grid-template-columns:var(--adm-side) minmax(0,1fr);
  /* La fila de la barra superior crece con el inset del iPhone (0 sin notch). */
  grid-template-rows:calc(56px + env(safe-area-inset-top,0px)) minmax(0,1fr);
  height:100vh; height:100dvh; overflow:hidden;
}
#app-shell.admin-shell.collapsed{--adm-side:72px}
#app-shell.admin-shell > #app-header{display:none}           /* el header de pestañas no se usa en admin */
#app-shell.admin-shell > #admin-side{grid-column:1;grid-row:1/3}
#app-shell.admin-shell > #admin-mhead{grid-column:2;grid-row:1}
/* FIX: #admin-side/#admin-mhead son selectores de id → una clase .hidden (menor
   especificidad) NO los ocultaba, y el sidebar del admin se colaba en la vista
   del CONDUCTOR. id+clase gana al id solo. */
#admin-side.hidden,#admin-mhead.hidden{display:none}
#app-shell.admin-shell > #app-main{grid-column:2;grid-row:2;overflow-y:auto;min-height:0;min-width:0}

/* ===== SIDEBAR ===== */
/* En móvil el sidebar es fixed de borde a borde: sin estos insets su cabecera
   se mete bajo la barra de estado y el "Salir" del pie bajo el home indicator. */
#admin-side{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;overflow:hidden;font-family:var(--font);color:var(--ink);padding-top:env(safe-area-inset-top,0px)}
#admin-side .icon{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
/* Todos los SVG del sidebar son iconos de línea (grupo .gi, módulo .ni-ic, etc.): nunca rellenos. */
#admin-side svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#admin-side .sbrand{display:flex;align-items:center;gap:10px;padding:16px 18px;height:60px;flex:0 0 auto}
#admin-side .brand-btn{display:flex;align-items:center;border:0;background:transparent;padding:0;cursor:pointer;min-width:0;overflow:hidden}
#admin-side .logo{display:flex;align-items:baseline;gap:8px;min-width:0;overflow:hidden}
#admin-side .logo b{font-size:20px;font-weight:800;letter-spacing:-.03em;white-space:nowrap;color:var(--ink)}
#admin-side .logo i{width:7px;height:7px;border-radius:999px;background:var(--orange);display:inline-block;transform:translateY(-1px);flex:0 0 auto}
#admin-side .collapse{margin-left:auto;width:34px;height:34px;border:1px solid var(--line2);background:var(--panel);border-radius:9px;color:var(--ink2);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;transition:.15s}
#admin-side .collapse:hover{color:var(--ink)}
.admin-shell.collapsed #admin-side .sbrand{justify-content:center;padding:16px 0}
.admin-shell.collapsed #admin-side .logo b,.admin-shell.collapsed #admin-side .collapse{display:none}

/* switcher Turnos/Rutas */
#admin-side .wsw{padding:4px 14px 12px;flex:0 0 auto}
#admin-side .wsw .lbl{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);padding:0 4px 7px}
#admin-side .wstabs{display:flex;background:var(--panel2);border:1px solid var(--line2);border-radius:11px;padding:3px;gap:2px}
#admin-side .wstabs button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--ink2);font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;transition:.15s;min-width:0}
#admin-side .wstabs button .icon{width:15px;height:15px}
#admin-side .wstabs button.on{background:var(--ink);color:var(--panel);box-shadow:var(--shadow)}
.admin-shell.collapsed #admin-side .wsw .lbl{display:none}
.admin-shell.collapsed #admin-side .wstabs{flex-direction:column;background:transparent;border:0;padding:0;gap:6px}
.admin-shell.collapsed #admin-side .wstabs button{height:40px;border:1px solid var(--line2)}
.admin-shell.collapsed #admin-side .wstabs button span{display:none}
.admin-shell.collapsed #admin-side .wstabs button.on{border-color:var(--ink)}

/* navegación por grupos */
#admin-side .snav{flex:1;overflow-y:auto;padding:6px 12px 16px;min-height:0}
#admin-side .snav::-webkit-scrollbar{width:7px}
#admin-side .snav::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
#admin-side .grp{margin-top:14px}
#admin-side .grp:first-child{margin-top:4px}
#admin-side .grp-h{display:flex;align-items:center;gap:8px;padding:4px 10px 7px;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
#admin-side .grp-h .gi{width:14px;height:14px;color:var(--ink3)}
.admin-shell.collapsed #admin-side .grp-h{justify-content:center;padding:8px 0 6px}
.admin-shell.collapsed #admin-side .grp-h .gtext{display:none}
.admin-shell.collapsed #admin-side .grp{border-top:1px solid var(--line);margin-top:8px;padding-top:4px}
.admin-shell.collapsed #admin-side .grp:first-child{border-top:0}

#admin-side .nav-i{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;cursor:pointer;color:var(--ink2);transition:background .13s,color .13s;position:relative;margin-bottom:2px;border:0;background:transparent;width:100%;text-align:left;font-family:var(--font)}
#admin-side .nav-i:hover{background:var(--panel2);color:var(--ink)}
#admin-side .nav-i.active{background:var(--orange-soft);color:var(--orange)}
#admin-side .nav-i.active .ni-ic{color:var(--orange)}
#admin-side .nav-i .ni-ic{width:19px;height:19px;color:var(--ink3);flex:0 0 auto}
#admin-side .nav-i:hover .ni-ic{color:var(--ink2)}
#admin-side .nav-i.active:hover .ni-ic{color:var(--orange)}
#admin-side .nav-i .ni-tx{font-size:13.5px;font-weight:600;white-space:nowrap;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
#admin-side .nav-i .badge{font-family:var(--mono);font-size:10px;font-weight:700;background:var(--red);color:#fff;border-radius:999px;padding:1px 7px;line-height:1.4;flex:0 0 auto}
#admin-side .nav-i .badge.hidden{display:none}
#admin-side .nav-i .soon{font-size:8.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:2px 6px;flex:0 0 auto}
#admin-side .nav-i.dim{opacity:.62}
#admin-side .nav-i.dim:hover{opacity:1}
.admin-shell.collapsed #admin-side .nav-i{justify-content:center;padding:10px 0}
.admin-shell.collapsed #admin-side .nav-i .ni-tx,.admin-shell.collapsed #admin-side .nav-i .soon{display:none}
.admin-shell.collapsed #admin-side .nav-i .badge{position:absolute;top:3px;right:8px;padding:0 5px;font-size:8.5px}

/* tooltip cuando está colapsado */
#admin-side .nav-i[data-tip]::after{content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:var(--ink);color:var(--bg);font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .14s;z-index:30;box-shadow:var(--shadow-lg)}
.admin-shell.collapsed #admin-side .nav-i:hover[data-tip]::after{opacity:1}

/* footer */
#admin-side .sfoot{flex:0 0 auto;border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))}
#admin-side .sf-i{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;cursor:pointer;color:var(--ink2);transition:.13s}
#admin-side .sf-i:hover{background:var(--panel2);color:var(--ink)}
#admin-side .sf-i .ni-ic{width:19px;height:19px;color:var(--ink3);display:grid;place-items:center}
#admin-side .sf-i .ni-tx{font-size:13px;font-weight:600;white-space:nowrap}
.admin-shell.collapsed #admin-side .sf-i{justify-content:center;padding:10px 0}
.admin-shell.collapsed #admin-side .sf-i .ni-tx{display:none}

/* ===== BREADCRUMB (barra superior del main) ===== */
/* El padding superior baja la barra por debajo del reloj/isla del iPhone: con
   viewport-fit=cover el contenido llega hasta el borde y el botón Salir quedaba
   tapado por la barra de estado. En pantallas sin notch el inset es 0. */
.adm-mhead{display:flex;align-items:center;gap:14px;padding:env(safe-area-inset-top,0px) 22px 0;background:var(--panel);border-bottom:1px solid var(--line);font-family:var(--font)}
.adm-mhead .icon{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.adm-mhead .crumb{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink3);font-weight:600}
.adm-mhead .crumb b{color:var(--ink);font-weight:800;font-size:15px;letter-spacing:-.01em}
.adm-mhead .crumb .sep{color:var(--line2)}
.adm-mhead .adm-ibtn{width:38px;height:38px;border:1px solid var(--line2);background:var(--panel);border-radius:11px;color:var(--ink2);display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.adm-mhead .adm-ibtn:hover{color:var(--ink)}
#adm-mobmenu{display:none}

/* velo del drawer móvil */
#admin-side-scrim{position:fixed;inset:0;background:rgba(30,28,25,.42);z-index:49}

/* ===== MÓVIL: el sidebar se vuelve un cajón deslizable ===== */
@media(max-width:768px){
  #app-shell.admin-shell{grid-template-columns:minmax(0,1fr)}
  #app-shell.admin-shell > #admin-side{position:fixed;left:0;top:0;bottom:0;width:272px;z-index:50;grid-column:auto;grid-row:auto;transform:translateX(-100%);transition:transform .25s ease}
  #app-shell.admin-shell.side-open > #admin-side{transform:translateX(0);box-shadow:var(--shadow-lg)}
  #app-shell.admin-shell > #admin-mhead{grid-column:1}
  #app-shell.admin-shell > #app-main{grid-column:1}
  #adm-mobmenu{display:grid}
}

/* ████████████████████████████████████████████████████████████████████████████
   RUTAS · OPERACIÓN EN VIVO — mapa real OSM (Leaflet) + lista de carros + feed.
   Scopeado bajo #oper-ui (sin :root). Clases prefijadas op- (cero colisiones).
   ████████████████████████████████████████████████████████████████████████████ */
#oper-ui{
  --bg:#F4F3F0; --panel:#FFFFFF; --panel2:#F7F6F3; --ink:#1E1C19; --ink2:#5F5B55; --ink3:#9D998F;
  --line:#E7E5DF; --line2:#D6D2C9;
  --orange:#E2551A; --orange-soft:#FBE5D8;
  --green:#16936A; --green-soft:#E3F1EA;
  --amber:#C9810F; --amber-soft:#FBEBCF;
  --red:#D6473B; --red-soft:#FADFDC;
  --blue:#2A6FDB; --blue-soft:#E2ECFB;
  --shadow:0 6px 18px rgba(30,28,25,.07); --shadow-lg:0 22px 44px rgba(30,28,25,.18);
  --font:"Hanken Grotesk",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace;
  font-family:var(--font);color:var(--ink);
  /* Llena el alto disponible del shell admin (viewport - breadcrumb - padding del main). */
  height:calc(100dvh - 104px);min-height:440px;display:flex;flex-direction:column;
  margin:-4px 0;
}
#oper-ui *{box-sizing:border-box}
#oper-ui .icon{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}

/* barra superior */
#oper-ui .op-top{display:flex;align-items:center;gap:14px;height:46px;flex:0 0 auto;padding:0 4px 10px}
#oper-ui .op-top h1{font-size:19px;font-weight:800;letter-spacing:-.02em}
#oper-ui .op-spacer{flex:1}
#oper-ui .op-live{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--green);background:var(--green-soft);padding:5px 11px;border-radius:999px}
#oper-ui .op-pulse{width:8px;height:8px;border-radius:99px;background:var(--green);position:relative}
#oper-ui .op-pulse::after{content:"";position:absolute;inset:-4px;border-radius:99px;border:2px solid var(--green);animation:op-ring 1.6s ease-out infinite}
@keyframes op-ring{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.8);opacity:0}}
#oper-ui .op-clock{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--ink2)}
#oper-ui .op-stub{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--amber);background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--amber) 30%,var(--line));padding:5px 10px;border-radius:999px}

/* layout 3 columnas */
#oper-ui .op-stage{flex:1;min-height:0;display:grid;grid-template-columns:320px 1fr 300px;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
@media(max-width:1180px){#oper-ui .op-stage{grid-template-columns:280px 1fr}#oper-ui .op-feed{display:none}}
@media(max-width:760px){#oper-ui .op-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr}#oper-ui .op-cars{max-height:38%}}

/* IZQUIERDA: lista de carros */
#oper-ui .op-cars{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;min-width:0}
#oper-ui .op-cars-h{padding:13px 14px 11px;border-bottom:1px solid var(--line)}
#oper-ui .op-kpis{display:flex;gap:8px}
/* Estado vacío de Operación: sin carros reales no se pinta nada inventado */
#oper-ui .op-empty{text-align:center;padding:34px 18px;color:var(--ink2)}
#oper-ui .op-empty .icon{width:30px;height:30px;color:var(--ink3);margin:0 auto 10px;display:block;stroke:currentColor;stroke-width:1.8;fill:none}
#oper-ui .op-empty b{display:block;font-size:14.5px;font-weight:800;color:var(--ink);margin-bottom:5px}
#oper-ui .op-empty span{display:block;font-size:12.5px;line-height:1.5;max-width:300px;margin:0 auto}
#oper-ui .op-empty.sm{padding:18px 14px}
#oper-ui .op-kpi{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:8px 9px;text-align:center}
#oper-ui .op-kpi b{font-size:18px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;display:block}
#oper-ui .op-kpi span{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);display:block;margin-top:4px}
#oper-ui .op-kpi.ok b{color:var(--green)} #oper-ui .op-kpi.warn b{color:var(--amber)} #oper-ui .op-kpi.bad b{color:var(--red)}
#oper-ui .op-cars-l{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:9px;min-height:0}
#oper-ui .op-cars-l::-webkit-scrollbar{width:8px}#oper-ui .op-cars-l::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}

#oper-ui .op-cc{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:11px 12px;cursor:pointer;transition:box-shadow .15s,border-color .15s}
#oper-ui .op-cc:hover{box-shadow:var(--shadow);border-color:var(--line2)}
#oper-ui .op-cc.sel{border-color:var(--orange);box-shadow:0 0 0 2px var(--orange-soft)}
#oper-ui .op-cc.late{border-left:4px solid var(--red)}
#oper-ui .op-cc.tight{border-left:4px solid var(--amber)}
#oper-ui .op-cc.ontime{border-left:4px solid var(--green)}
#oper-ui .op-cc.done{border-left:4px solid var(--line2);opacity:.72}
#oper-ui .op-cc-top{display:flex;align-items:center;gap:10px}
#oper-ui .op-cc-dot{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;flex:0 0 auto}
#oper-ui .op-cc-dot .icon{width:16px;height:16px}
#oper-ui .op-cc-id{font-size:14px;font-weight:800;letter-spacing:-.01em}
#oper-ui .op-cc-id span{font-size:11px;font-weight:600;color:var(--ink2);margin-left:6px}
#oper-ui .op-cc-state{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;padding:3px 9px;border-radius:999px}
#oper-ui .op-cc-state .icon{width:11px;height:11px}
#oper-ui .op-cc-state.ontime{background:var(--green-soft);color:var(--green)}
#oper-ui .op-cc-state.tight{background:var(--amber-soft);color:var(--amber)}
#oper-ui .op-cc-state.late{background:var(--red);color:#fff}
#oper-ui .op-cc-state.done{background:var(--panel2);color:var(--ink3);border:1px solid var(--line)}
#oper-ui .op-cc-body{display:flex;align-items:center;gap:9px;margin-top:10px}
#oper-ui .op-cc-drv{display:flex;align-items:center;gap:7px;min-width:0;flex:1}
#oper-ui .op-cc-drv .av{width:22px;height:22px;border-radius:99px;font-size:9px;font-weight:800;color:#fff;display:grid;place-items:center;flex:0 0 auto}
#oper-ui .op-cc-drv b{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#oper-ui .op-cc-pax{font-size:11px;font-weight:700;color:var(--ink2);display:inline-flex;align-items:center;gap:4px}
#oper-ui .op-cc-pax .icon{width:13px;height:13px}
#oper-ui .op-cc-next{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink2)}
#oper-ui .op-cc-next .icon{width:13px;height:13px;color:var(--ink3)}
#oper-ui .op-cc-next b{color:var(--ink);font-weight:700}
#oper-ui .op-cc-next .eta{margin-left:auto;font-family:var(--mono);font-weight:700}
#oper-ui .op-cc-next .eta.late{color:var(--red)} #oper-ui .op-cc-next .eta.tight{color:var(--amber)}
/* Frescura de la posición: de dónde salió el punto y hace cuánto. Solo en vivo. */
#oper-ui .op-cc-fresh{margin-top:6px;display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--ink3)}
#oper-ui .op-cc-freshdot{width:5px;height:5px;border-radius:3px;background:var(--green);flex:none}
#oper-ui .op-cc-fresh.fresh .op-cc-freshdot{animation:opPulse 1.8s infinite}
#oper-ui .op-cc-fresh.stale{color:var(--amber)}
#oper-ui .op-cc-fresh.stale .op-cc-freshdot{background:var(--amber);animation:none}
/* Punto viejo = carro translúcido: se ve que es una foto, no el ahora. */
#oper-ui .op-marker.stale{opacity:.55}
@keyframes opPulse{0%,100%{opacity:1}50%{opacity:.25}}

/* CENTRO: mapa real */
#oper-ui .op-mapwrap{position:relative;overflow:hidden;background:#EAE7E0;min-width:0}
#oper-ui #oper-map{position:absolute;inset:0;width:100%;height:100%;z-index:0}
#oper-ui .op-legend{position:absolute;right:12px;bottom:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:9px 12px;display:flex;flex-direction:column;gap:6px;z-index:600}
#oper-ui .op-li{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;color:var(--ink2)}
#oper-ui .op-sw{width:12px;height:12px;border-radius:5px}

/* marcadores de carro (DivIcon de Leaflet) */
.op-marker{display:grid;place-items:center}
.op-marker .op-mk-body{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.3);border:2.5px solid #fff;position:relative}
.op-marker .op-mk-body svg{width:16px;height:16px;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.op-marker.late .op-mk-body{animation:op-shake .9s ease-in-out infinite}
@keyframes op-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.5px)}75%{transform:translateX(1.5px)}}
.op-mk-air{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#1E1C19;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.35);border:2px solid #fff}
.op-mk-air svg{width:16px;height:16px;stroke:#fff;stroke-width:1.8;fill:none}

/* alerta de atraso (regla #1) */
#oper-ui .op-delay{position:absolute;left:50%;top:12px;transform:translateX(-50%);width:min(540px,calc(100% - 24px));z-index:900;
  background:var(--panel);border:1px solid color-mix(in srgb,var(--red) 40%,var(--line));border-left:4px solid var(--red);border-radius:14px;box-shadow:var(--shadow-lg);padding:13px 15px;display:none}
#oper-ui .op-delay.show{display:block;animation:op-drop .3s cubic-bezier(.2,.8,.2,1)}
@keyframes op-drop{from{transform:translateX(-50%) translateY(-12px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
#oper-ui .op-delay-h{display:flex;align-items:center;gap:10px}
#oper-ui .op-delay-h .op-ic{width:30px;height:30px;border-radius:9px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;flex:0 0 auto}
#oper-ui .op-delay-h b{font-size:14px;font-weight:800;letter-spacing:-.01em}
#oper-ui .op-delay-h .op-sub{font-size:11.5px;color:var(--ink2);margin-top:1px}
#oper-ui .op-delay-h .op-close{margin-left:auto;width:28px;height:28px;border:0;background:transparent;color:var(--ink3);cursor:pointer;border-radius:7px;flex:0 0 auto}
#oper-ui .op-delay-h .op-close:hover{background:var(--panel2);color:var(--ink)}
#oper-ui .op-delay-acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
#oper-ui .op-dact{flex:1;min-width:120px;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;border-radius:10px;border:1.5px solid var(--line2);background:var(--panel);color:var(--ink);font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer;transition:.14s}
#oper-ui .op-dact:hover{border-color:var(--ink3)}
#oper-ui .op-dact.primary{background:var(--orange);color:#fff;border-color:var(--orange);box-shadow:0 8px 18px rgba(226,85,26,.24)}
#oper-ui .op-dact .icon{width:15px;height:15px}

/* DERECHA: feed */
#oper-ui .op-feed{background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;min-width:0}
#oper-ui .op-feed-h{padding:13px 14px 11px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px}
#oper-ui .op-feed-h b{font-size:14px;font-weight:800;letter-spacing:-.01em}
#oper-ui .op-feed-h .icon{width:16px;height:16px;color:var(--ink2)}
#oper-ui .op-feed-l{flex:1;overflow-y:auto;padding:4px 0;min-height:0}
#oper-ui .op-feed-l::-webkit-scrollbar{width:8px}#oper-ui .op-feed-l::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
#oper-ui .op-ev{display:flex;gap:11px;padding:11px 15px;border-bottom:1px solid var(--line);animation:op-fadein .35s ease}
@keyframes op-fadein{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
#oper-ui .op-ev .op-evdot{width:9px;height:9px;border-radius:99px;margin-top:5px;flex:0 0 auto;background:var(--ink3)}
#oper-ui .op-ev.ok .op-evdot{background:var(--green)} #oper-ui .op-ev.warn .op-evdot{background:var(--amber)} #oper-ui .op-ev.bad .op-evdot{background:var(--red)} #oper-ui .op-ev.info .op-evdot{background:var(--blue)}
#oper-ui .op-ev .op-evtx{flex:1;min-width:0}
#oper-ui .op-ev .op-evtx p{font-size:12.5px;color:var(--ink);line-height:1.4}
#oper-ui .op-ev .op-evtx p b{font-weight:700}
#oper-ui .op-ev .op-evtx .op-evt{font-size:10.5px;color:var(--ink3);font-family:var(--mono);margin-top:3px}

/* ---- Rutas: previsualización del trayecto (mapa OSRM) ---- */
#routes-ui .mapbtn {height:34px;padding:0 13px;border-radius:9px;border:1.5px solid var(--line2);background:var(--panel);color:var(--ink2);font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.14s;margin-right:8px}
#routes-ui .mapbtn:hover {color:var(--ink);border-color:var(--ink3)}
#routes-ui .mapovl {position:fixed;inset:0;background:rgba(15,14,12,.55);z-index:400;display:none;align-items:center;justify-content:center;padding:24px}
#routes-ui .mapovl.show {display:flex}
#routes-ui .mapbox {background:var(--panel);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.35);width:min(980px,94vw);overflow:hidden;display:flex;flex-direction:column}
#routes-ui .maphead {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line2)}
#routes-ui .maphead b {font-size:15.5px;color:var(--ink);font-weight:800}
#routes-ui .maphead span {display:block;font-size:12px;color:var(--ink3);margin-top:2px;font-family:var(--mono)}
#routes-ui .mapclose {width:34px;height:34px;border-radius:9px;border:1.5px solid var(--line2);background:var(--panel);color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
#routes-ui .mapclose:hover {color:var(--ink);border-color:var(--ink3)}
#routes-ui #rt-mapCanvas {height:min(62vh,560px);width:100%}

/* ---- Rutas: Reloj 24h dual (día completo) — diseño /Visual/admin-clock.jsx ---- */
#routes-ui .clockpanel {background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:14px 16px 6px;margin:0;display:flex;flex-direction:column;align-items:center;position:sticky;top:0}
#routes-ui .clock-h {width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:6px}
#routes-ui .clock-h > b {font-size:15px;font-weight:800;color:var(--ink)}
#routes-ui .clock-legend {display:flex;gap:14px;flex-wrap:wrap}
#routes-ui .clock-legend .lg {display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink2)}
#routes-ui .clock-legend .lg.muted {opacity:.45}
#routes-ui .clock-legend .lg i {width:12px;height:12px;border-radius:4px;display:inline-block}
#routes-ui .clock-legend .lg i.nowline {width:14px;height:2.5px;border-radius:2px;background:var(--ink)}
#routes-ui #rt-clock {display:flex;justify-content:center;width:100%;padding:6px 0 2px}
#routes-ui #rt-clock path[data-arc]:hover {opacity:1;filter:brightness(1.06)}
#routes-ui .clock-hint {font-size:11.5px;color:var(--ink3);margin:6px 0 8px;text-align:center}
#routes-ui .lane.flash {outline:3px solid #F26522;outline-offset:3px;transition:outline .2s}

/* ---- Rutas: llegadas (MDE → casa) en el tablero general ---- */
#routes-ui .airport.lle {border-color:#10B981;color:#0B7A5C;background:#ECFDF5}

/* ---- Rutas: tarjetas por vehículo (ruta completa del día) ---- */
#routes-ui .carcard {background:var(--panel);border:1px solid var(--line2);border-radius:16px;margin:0 0 14px;overflow:hidden;min-width:0}
#routes-ui .cc-h {display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line2);background:var(--panel)}
#routes-ui .cc-h .cc-t {display:flex;align-items:center;gap:10px;min-width:0}
#routes-ui .cc-h .cc-t b {font-size:15px;font-weight:800;color:var(--ink)}
#routes-ui .cc-h .cc-n {margin-left:auto;font-size:12px;color:var(--ink3);font-family:var(--mono);flex:0 0 auto}
#routes-ui .cc-b {display:flex;flex-direction:column}
#routes-ui .triprow {display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px dashed var(--line2);cursor:pointer;transition:background .12s}
#routes-ui .cc-b .triprow:last-child {border-bottom:none}
#routes-ui .triprow:hover {background:var(--panel2)}
#routes-ui .triprow.dragover {background:#FFF4EC;box-shadow:inset 0 0 0 2px #F26522}
#routes-ui .triprow .tr-dot {width:11px;height:11px;border-radius:4px;flex:0 0 auto}
#routes-ui .triprow .tr-dot.sal {background:#F26522}
#routes-ui .triprow .tr-dot.lle {background:#10B981}
#routes-ui .triprow .tr-dot.hotel {background:#F59E0B}
#routes-ui .triprow .tr-v {font-size:12.5px;font-weight:800;color:var(--ink);flex:0 0 auto;min-width:26px}
#routes-ui .triprow .tr-time {font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink);flex:0 0 auto}
#routes-ui .triprow .tr-info {font-size:11.5px;color:var(--ink3);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#routes-ui .triprow .mapbtn.sm {height:28px;padding:0 9px;margin:0}
#routes-ui .triprow .tr-chev {width:14px;height:14px;color:var(--ink3);flex:0 0 auto}
#routes-ui .carcard .lane {margin:10px 12px;border-radius:12px}
/* Pool oculto cuando todos están ruteados (reaparece al arrastrar) */
#routes-ui .stage.nopool {grid-template-columns:1fr}
#routes-ui .stage.nopool .pool {display:none}

/* Reloj junto a las tarjetas: en pantallas angostas vuelve a una columna */
#routes-ui #rt-laneWrap {min-width:0}
@media (max-width: 1180px) {
  #routes-ui .lanes {grid-template-columns:1fr}
  #routes-ui .clockpanel {position:static;max-width:560px;margin:0 auto;width:100%}
}

/* ============================================================
   Rol Auxiliar (pasajero) — mobile-first, canvas tipo teléfono
   Colores compartidos con rutas: salida #F26522 · llegada #10B981 · hotel #F59E0B
   ============================================================ */
html,body{overflow-x:hidden}
/* touch-action:manipulation mata el zoom por DOBLE TOQUE, que es el que se
   dispara sin querer al tocar rápido dos campos seguidos y deja la pantalla
   corrida de lado. El pinza-para-ampliar se conserva: quien necesite
   agrandar el texto tiene que poder. */
#auxiliar-root{position:fixed;inset:0;z-index:20;background:#EEF1F4;display:flex;justify-content:center;overflow:hidden;touch-action:manipulation}
#auxiliar-root.hidden{display:none}
#auxiliar-ui{--a-bg:#F7F8FA;--a-card:#FFFFFF;--a-text:#0F1113;--a-t2:#5B636B;--a-t3:#98A0A8;--a-line:#E7EAEE;--a-line2:#EDF0F3;
  --a-accent:#F4791F;--a-h2a:#F26522;--a-a2h:#10B981;--a-hotel:#F59E0B;--a-ok:#0B7A5C;--a-radius:16px;
  width:100%;max-width:480px;height:100%;background:var(--a-bg);color:var(--a-text);display:flex;flex-direction:column;
  font-family:Inter,system-ui,-apple-system,sans-serif;position:relative;box-shadow:0 0 48px rgba(0,0,0,.08)}
/* border-box para todo el rol.
   Sin esto, cada .ax-toggle / .ax-opt / .ax-trip mide «100% del ancho MÁS sus
   28-35 px de relleno y borde», o sea que se sale de la pantalla y arrastra el
   formulario entero de lado: en el teléfono se veía «atos del vuelo» en vez de
   «Datos del vuelo». Lo tienen todos los demás paneles (#settings-ui, #rv-ui,
   #oper-ui…); el rol auxiliar era el único que dependía del preflight de
   Tailwind, que llega por CDN y en dev puede no llegar. */
#auxiliar-ui, #auxiliar-ui *, #auxiliar-ui *::before, #auxiliar-ui *::after{box-sizing:border-box}
#auxiliar-ui .icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
#auxiliar-ui .ax-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 18px;-webkit-overflow-scrolling:touch}
/* Barra PWA del auxiliar: Instalar app + Activar notificaciones */
#auxiliar-ui .ax-pwa{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
#auxiliar-ui .ax-pwa.hidden{display:none}
#auxiliar-ui .ax-pwa-btn{flex:1;min-width:140px;padding:11px 12px;border-radius:12px;border:1px solid var(--a-line);background:var(--a-card,#fff);color:var(--a-accent);font-size:13px;font-weight:700;cursor:pointer}
#auxiliar-ui .ax-pwa-btn.hidden{display:none}
/* Ya no reserva sitio para la barra (que ahora ocupa el suyo): solo deja un
   respiro al final del formulario. */
#auxiliar-ui .ax-spacer{height:12px}
#auxiliar-ui .hidden{display:none}

/* Header — #auxiliar-root es fixed inset:0, así que el encabezado arranca en el
   borde superior de la pantalla: sin el inset queda bajo el reloj del iPhone. */
#auxiliar-ui .ax-head{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;padding:calc(22px + env(safe-area-inset-top,0px)) 18px 10px}
#auxiliar-ui .ax-head h1{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:2px 0 0}
#auxiliar-ui .ax-hi{font-size:13px;color:var(--a-t2);font-weight:500}
#auxiliar-ui .ax-avatar{width:42px;height:42px;border-radius:50%;background:var(--a-accent);color:#fff;font-weight:800;font-size:16px;border:none;cursor:pointer}

/* Secciones + tarjetas de viaje */
#auxiliar-ui .ax-next-label,#auxiliar-ui .ax-sec{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--a-t3);margin:18px 2px 10px}
#auxiliar-ui .ax-trip{display:block;width:100%;text-align:left;background:var(--a-card);border:1px solid var(--a-line);border-radius:var(--a-radius);padding:14px;margin-bottom:10px;cursor:pointer;transition:.14s}
#auxiliar-ui .ax-trip:hover{border-color:var(--a-t3)}
#auxiliar-ui .ax-trip.hero{box-shadow:0 8px 28px rgba(0,0,0,.07);border-color:transparent}
#auxiliar-ui .ax-trip-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
#auxiliar-ui .ax-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
#auxiliar-ui .ax-chip .icon{width:13px;height:13px}
#auxiliar-ui .ax-chip.h2a{background:#FEEDE4;color:var(--a-h2a)}
#auxiliar-ui .ax-chip.a2h{background:#E7F8F1;color:var(--a-ok)}
#auxiliar-ui .ax-status{font-size:11.5px;font-weight:700}
#auxiliar-ui .ax-status.ok{color:var(--a-ok)}#auxiliar-ui .ax-status.warn{color:var(--a-hotel)}#auxiliar-ui .ax-status.muted{color:var(--a-t3)}
#auxiliar-ui .ax-trip-route{display:flex;align-items:center;gap:10px}
#auxiliar-ui .ax-trip-route b{font-size:16px;font-weight:800;letter-spacing:-.01em}
#auxiliar-ui .ax-arrow{width:16px;height:16px;color:var(--a-t3)}
#auxiliar-ui .ax-trip-bot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:12px;color:var(--a-t2)}
#auxiliar-ui .ax-trip-bot span{display:inline-flex;align-items:center;gap:6px}
#auxiliar-ui .ax-trip-bot .icon{width:13px;height:13px}
#auxiliar-ui .ax-flight{font-family:'Space Mono',ui-monospace,monospace;font-weight:700;color:var(--a-text)}

/* Empty */
#auxiliar-ui .ax-empty{text-align:center;padding:40px 20px;display:flex;flex-direction:column;align-items:center;gap:6px}
#auxiliar-ui .ax-empty-ic{width:56px;height:56px;border-radius:50%;background:var(--a-line2);display:flex;align-items:center;justify-content:center;color:var(--a-t3);margin-bottom:6px}
#auxiliar-ui .ax-empty b{font-size:16px;font-weight:800}
#auxiliar-ui .ax-empty span{font-size:13px;color:var(--a-t2)}

/* CTA bar + botones */
/* La barra de acción NO flota: ocupa su sitio.

   Estaba en position:absolute sobre el cuerpo, y el cuerpo le pasaba por
   detrás: se veía media tarjeta asomando por encima del botón y otra por
   debajo. El degradado que lo disimulaba no alcanza cuando lo que pasa
   detrás son tarjetas blancas sobre fondo claro.

   #auxiliar-ui ya es una columna flex con .ax-body en flex:1, así que
   basta con dejar la barra como un hijo más: el cuerpo se encoge solo y el
   contenido NUNCA queda debajo del botón. De paso se acaban los
   espaciadores para «hacerle hueco» a algo que flotaba.

   Lo mismo para .ax-tabs, por la misma razón. */
#auxiliar-ui .ax-cta-bar{flex:0 0 auto;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));background:var(--a-bg)}
#auxiliar-ui .ax-cta-bar.with-tabs{padding-bottom:12px}
#auxiliar-ui .ax-btn{width:100%;height:52px;border-radius:14px;border:none;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.14s}
#auxiliar-ui .ax-btn-primary{background:var(--a-accent);color:#fff;box-shadow:0 8px 20px rgba(244,121,31,.28)}
#auxiliar-ui .ax-btn-primary:disabled{background:var(--a-line);color:var(--a-t3);box-shadow:none;cursor:not-allowed}
#auxiliar-ui .ax-btn-ghost{background:var(--a-card);color:var(--a-text);border:1.5px solid var(--a-line);height:46px;margin-top:10px}

/* Tabs inferiores */
#auxiliar-ui .ax-tabs{flex:0 0 auto;height:calc(62px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--a-card);border-top:1px solid var(--a-line);display:flex}
#auxiliar-ui .ax-tab{flex:1;border:none;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--a-t3);font-size:11px;font-weight:600;cursor:pointer}
#auxiliar-ui .ax-tab.on{color:var(--a-accent)}

/* Formulario */
/* El padding de arriba lleva el área segura del iPhone. Sin esto, en la PWA
   instalada el encabezado queda DEBAJO de la isla dinámica y del reloj: se ve
   recortado y el botón de atrás no se deja tocar. Le pasaba a los cinco sitios
   que usan esta clase (pedido, privado, soporte, detalle del viaje y registro);
   .ax-head, el encabezado del inicio, sí lo tenía desde siempre — por eso el
   inicio se veía bien y el resto no. En el navegador env() vale 0 y todo queda
   como estaba. */
#auxiliar-ui .ax-form-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(18px + env(safe-area-inset-top,0px)) 18px 18px}
#auxiliar-ui .ax-form-head b{font-size:15px;font-weight:800}
#auxiliar-ui .ax-icbtn{width:38px;height:38px;border-radius:11px;border:1.5px solid var(--a-line);background:var(--a-card);color:var(--a-text);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
#auxiliar-ui .ax-steps{display:flex;gap:6px;flex:1;justify-content:center}
#auxiliar-ui .ax-dot{width:26px;height:5px;border-radius:3px;background:var(--a-line)}
#auxiliar-ui .ax-dot.on{background:var(--a-accent)}
#auxiliar-ui .ax-step-n{font-size:12px;font-weight:700;color:var(--a-t3);font-family:'Space Mono',monospace}
#auxiliar-ui .ax-form-title{font-size:23px;font-weight:800;letter-spacing:-.02em;margin:4px 0 4px}
#auxiliar-ui .ax-lead{font-size:14px;color:var(--a-t2);margin-bottom:14px}

/* Opciones tipo de viaje */
#auxiliar-ui .ax-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--a-card);border:1.5px solid var(--a-line);border-radius:var(--a-radius);padding:16px;margin-bottom:12px;cursor:pointer;transition:.14s}
#auxiliar-ui .ax-opt .ax-opt-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
#auxiliar-ui .ax-opt.h2a .ax-opt-ic{background:#FEEDE4;color:var(--a-h2a)}
#auxiliar-ui .ax-opt.a2h .ax-opt-ic{background:#E7F8F1;color:var(--a-ok)}
#auxiliar-ui .ax-opt div b{font-size:16px;font-weight:800;display:block}
#auxiliar-ui .ax-opt div span{font-size:12.5px;color:var(--a-t2)}
#auxiliar-ui .ax-opt .ax-radio{margin-left:auto;width:24px;height:24px;border-radius:50%;border:2px solid var(--a-line);display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
#auxiliar-ui .ax-opt.sel{border-color:var(--a-accent)}
#auxiliar-ui .ax-opt.sel .ax-radio{background:var(--a-accent);border-color:var(--a-accent)}
#auxiliar-ui .ax-opt.sel .ax-radio .icon{width:14px;height:14px}

/* Campos */
#auxiliar-ui .ax-label{display:block;font-size:12.5px;font-weight:700;color:var(--a-t2);margin:14px 0 0}
#auxiliar-ui .ax-input{width:100%;margin-top:7px;background:var(--a-card);border:1.5px solid var(--a-line);border-radius:12px;padding:13px 14px;font-family:inherit;font-size:15px;color:var(--a-text);box-sizing:border-box}
#auxiliar-ui .ax-input:focus{outline:none;border-color:var(--a-accent)}
#auxiliar-ui textarea.ax-input{resize:none}
#auxiliar-ui .ax-geo-hint{font-size:11.5px;color:var(--a-t3);margin-top:6px}

/* Mapa + pin */
#auxiliar-ui .ax-map{height:170px;border-radius:12px;overflow:hidden;margin-top:12px;border:1px solid var(--a-line)}
#auxiliar-ui .ax-pin-row{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;color:var(--a-t2)}
#auxiliar-ui .ax-pin-row.ok{color:var(--a-ok);font-weight:700}
#auxiliar-ui .ax-pin-row .ax-link{margin-left:auto;background:none;border:none;color:var(--a-accent);font-weight:700;font-size:12.5px;cursor:pointer}

/* Toggles */
#auxiliar-ui .ax-toggles{margin-top:18px;display:flex;flex-direction:column;gap:10px}
#auxiliar-ui .ax-toggle{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--a-card);border:1.5px solid var(--a-line);border-radius:12px;padding:13px 14px;cursor:pointer}
#auxiliar-ui .ax-toggle div b{font-size:14px;font-weight:700;display:block}
#auxiliar-ui .ax-toggle div span{font-size:11.5px;color:var(--a-t2)}
#auxiliar-ui .ax-toggle .ax-switch{margin-left:auto;width:44px;height:26px;border-radius:999px;background:var(--a-line);position:relative;transition:.15s;flex:0 0 auto}
#auxiliar-ui .ax-toggle .ax-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.15s}
#auxiliar-ui .ax-toggle.on .ax-switch{background:var(--a-accent)}
#auxiliar-ui .ax-toggle.on .ax-knob{left:21px}

/* Hint */
#auxiliar-ui .ax-hint{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--a-t2);background:var(--a-line2);border-radius:10px;padding:10px 12px;margin-top:14px;line-height:1.4}
#auxiliar-ui .ax-hint .icon{width:15px;height:15px;margin-top:1px}
#auxiliar-ui .ax-hint.ok{background:#E7F8F1;color:var(--a-ok)}

/* Resumen (paso 4 + detalle) */
#auxiliar-ui .ax-sum{background:var(--a-card);border:1px solid var(--a-line);border-radius:var(--a-radius);overflow:hidden;margin-top:6px}
#auxiliar-ui .ax-sum-head{display:flex;align-items:center;gap:8px;padding:12px 14px;font-size:13px;font-weight:700;border-bottom:1px solid var(--a-line2)}
#auxiliar-ui .ax-sum-head.h2a{color:var(--a-h2a)}#auxiliar-ui .ax-sum-head.a2h{color:var(--a-ok)}
#auxiliar-ui .ax-sum-row{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;font-size:13.5px;border-bottom:1px solid var(--a-line2)}
#auxiliar-ui .ax-sum-row:last-child{border-bottom:none}
#auxiliar-ui .ax-sum-row span{color:var(--a-t2)}#auxiliar-ui .ax-sum-row b{font-weight:700;text-align:right}

/* Detalle: hero + conductor */
#auxiliar-ui .ax-trip-hero{display:flex;align-items:center;justify-content:space-between;padding:16px;border-radius:var(--a-radius);margin-top:6px;background:var(--a-card);border:1px solid var(--a-line)}
#auxiliar-ui .ax-driver{display:flex;align-items:center;gap:12px;background:var(--a-card);border:1px solid var(--a-line);border-radius:var(--a-radius);padding:14px;margin-top:6px}
#auxiliar-ui .ax-driver-av{width:44px;height:44px;border-radius:50%;background:var(--a-accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
#auxiliar-ui .ax-driver div b{font-size:15px;font-weight:800;display:block}
#auxiliar-ui .ax-driver div span{font-size:12.5px;color:var(--a-t2)}
#auxiliar-ui .ax-eta{margin-left:auto;text-align:right;font-size:11px;color:var(--a-t2)}
#auxiliar-ui .ax-eta b{font-size:16px;color:var(--a-text);font-family:'Space Mono',monospace}

/* --- Auxiliar: confirmación, seguimiento en vivo y calificación --- */
#auxiliar-ui .ax-center{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:30px}
#auxiliar-ui .ax-big{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:14px 0 4px}
#auxiliar-ui .ax-tc{text-align:center;max-width:300px}
#auxiliar-ui .ax-success{width:76px;height:76px;border-radius:50%;background:#E7F8F1;color:var(--a-ok);display:flex;align-items:center;justify-content:center}
#auxiliar-ui .ax-success .icon{width:38px;height:38px;stroke-width:2.5}
/* Timeline (P1) */
#auxiliar-ui .ax-timeline{width:100%;margin-top:26px;text-align:left}
#auxiliar-ui .ax-tl-row{display:flex;gap:14px;padding:0 4px 18px;position:relative}
#auxiliar-ui .ax-tl-row:not(:last-child)::before{content:'';position:absolute;left:9px;top:18px;bottom:-2px;width:2px;background:var(--a-line)}
#auxiliar-ui .ax-tl-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--a-line);background:var(--a-card);flex:0 0 auto;z-index:1}
#auxiliar-ui .ax-tl-row.done .ax-tl-dot{background:var(--a-ok);border-color:var(--a-ok)}
#auxiliar-ui .ax-tl-row b{font-size:14px;font-weight:700;display:block}
#auxiliar-ui .ax-tl-row span{font-size:12px;color:var(--a-t3)}
/* Mapa de seguimiento + hoja inferior */
#auxiliar-ui .ax-track-map{position:absolute;top:64px;left:0;right:0;bottom:0}
#auxiliar-ui .ax-car{font-size:24px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
/* Paradas que faltan por visitar: numeradas en orden de visita. La 'next' es a
   donde va el carro ahora; 'mine' es la tuya; 'end' el destino final del viaje. */
#auxiliar-ui .ax-stop{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;background:var(--a-t3);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.28)}
#auxiliar-ui .ax-stop.next{background:var(--a-accent);transform:scale(1.15)}
#auxiliar-ui .ax-stop.mine{background:var(--a-ok)}
#auxiliar-ui .ax-stop.end{background:#18181B;font-size:13px}
#auxiliar-ui .ax-track-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--a-card);border-radius:22px 22px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.14);padding:18px 18px calc(18px + env(safe-area-inset-bottom));z-index:500}
#auxiliar-ui .ax-eta-hero{text-align:center;margin-bottom:14px}
#auxiliar-ui .ax-eta-hero span{font-size:12px;color:var(--a-t2);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
#auxiliar-ui .ax-eta-hero b{display:block;font-size:34px;font-weight:800;letter-spacing:-.02em;font-family:'Space Mono',monospace}
#auxiliar-ui .ax-eta-hero b.sm{font-size:23px}
#auxiliar-ui .ax-onboard-badge{display:inline-flex;align-items:center;gap:7px;background:#E7F8F1;color:var(--a-ok);font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:999px;margin-bottom:12px}
#auxiliar-ui .ax-onboard-badge .icon{width:14px;height:14px}
/* A bordo pero el carro todavía tiene paradas: no es "listo", es "espera". */
#auxiliar-ui .ax-onboard-badge.wait{background:#FEF4E2;color:#B45309}
#auxiliar-ui .ax-driver-acts{margin-left:auto;display:flex;align-items:center;gap:10px}
#auxiliar-ui .ax-icbtn.sm{width:38px;height:38px;color:var(--a-accent);border-color:var(--a-line)}
/* ---- Chat con el conductor (0052) ---- */
/* Panel completo encima de la pantalla del viaje: entrar al chat no puede
   desmontar el mapa que va rastreando debajo. */
#auxiliar-ui .ax-chat{position:absolute;inset:0;z-index:900;background:var(--a-bg);display:flex;flex-direction:column}
#auxiliar-ui .ax-chat.hidden{display:none}
#auxiliar-ui .ax-chat-head{display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 14px 12px;background:var(--a-card);border-bottom:1px solid var(--a-line)}
#auxiliar-ui .ax-chat-who{flex:1;min-width:0}
#auxiliar-ui .ax-chat-who b{display:block;font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#auxiliar-ui .ax-chat-who span{font-size:12px;color:var(--a-t2)}
#auxiliar-ui .ax-chat-body{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:8px}
#auxiliar-ui .ax-msg{max-width:78%;padding:9px 12px;border-radius:16px;position:relative}
#auxiliar-ui .ax-msg p{margin:0;font-size:14px;line-height:1.4;word-break:break-word;white-space:pre-wrap}
#auxiliar-ui .ax-msg span{display:block;margin-top:3px;font-size:10.5px;opacity:.65;text-align:right}
#auxiliar-ui .ax-msg.mine{align-self:flex-end;background:var(--a-accent);color:#fff;border-bottom-right-radius:5px}
#auxiliar-ui .ax-msg.their{align-self:flex-start;background:var(--a-card);border:1px solid var(--a-line);border-bottom-left-radius:5px}
/* El jefe en el hilo (0067): mismo lado que el conductor, pero marcado — el
   tripulante tiene que saber que le está escribiendo Rendio, no su conductor. */
#auxiliar-ui .ax-msg em{display:block;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;opacity:.7;margin-bottom:3px}
#auxiliar-ui .ax-msg.rendio{border-color:var(--a-accent)}
#auxiliar-ui .ax-chat-empty{margin:auto;text-align:center;padding:0 24px;color:var(--a-t2)}
#auxiliar-ui .ax-chat-empty .icon{width:34px;height:34px;color:var(--a-t3);margin-bottom:10px}
#auxiliar-ui .ax-chat-empty b{display:block;font-size:15px;color:var(--a-text);margin-bottom:5px}
#auxiliar-ui .ax-chat-empty span{font-size:12.5px;line-height:1.45}
#auxiliar-ui .ax-chat-foot{display:flex;align-items:center;gap:9px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--a-card);border-top:1px solid var(--a-line)}
#auxiliar-ui .ax-chat-foot input{flex:1;min-width:0;height:42px;padding:0 14px;border-radius:999px;border:1px solid var(--a-line);background:var(--a-bg);font-size:14px;font-family:inherit;color:var(--a-text)}
#auxiliar-ui .ax-chat-foot input:focus{outline:none;border-color:var(--a-accent)}
#auxiliar-ui .ax-chat-send{width:42px;height:42px;flex:0 0 auto;border:none;border-radius:50%;background:var(--a-accent);color:#fff;display:grid;place-items:center;cursor:pointer}
#auxiliar-ui .ax-chat-send .icon{width:18px;height:18px}
/* Contador de mensajes sin leer sobre el botón de escribir */
#auxiliar-ui .ax-chat-btn{position:relative}
#auxiliar-ui .ax-badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--a-accent);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;border:2px solid var(--a-card)}
/* Hora estimada de llegada (OSRM). Se oculta sola si no hay dato confiable.
   OJO: NO usar .ax-eta — esa clase ya es el "recogida" de la tarjeta del conductor. */
#auxiliar-ui .ax-etaline{text-align:center;font-size:13.5px;color:var(--a-t2);font-weight:600;margin:-6px 0 10px}
#auxiliar-ui .ax-etaline b{color:var(--a-text);font-weight:800;font-family:'Space Mono',monospace}
#auxiliar-ui .ax-etaline.hidden{display:none}
/* Contador de posición en la ruta (Vas N de M · Sale HH:MM) */
#auxiliar-ui .ax-count{text-align:center;font-size:13px;color:var(--a-t2);font-weight:600;margin:-4px 0 8px}
#auxiliar-ui .ax-count.hidden{display:none}
/* Frescura del punto en el seguimiento en vivo */
#auxiliar-ui .ax-track-fresh{text-align:center;font-size:12px;color:var(--a-t2);font-weight:600;margin:10px 0 4px;transition:opacity .2s}
#auxiliar-ui .ax-track-fresh.stale{opacity:.45}
/* Banner "va tarde" (semáforo del auxiliar, basado en el horario) */
#auxiliar-ui .ax-late{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;padding:10px 13px;border-radius:12px;margin:0 0 12px}
#auxiliar-ui .ax-late .icon{width:16px;height:16px;flex:none}
#auxiliar-ui .ax-late.ok{background:#E7F8F1;color:var(--a-ok)}
#auxiliar-ui .ax-late.warn{background:#FEF6E7;color:#B7791F}
#auxiliar-ui .ax-late.late{background:#FDECEC;color:#C53030}
/* Calificación (P5) */
#auxiliar-ui .ax-driver-av.lg{width:64px;height:64px;font-size:24px}
#auxiliar-ui .ax-stars{display:flex;gap:8px;margin:18px 0 6px}
#auxiliar-ui .ax-star{width:46px;height:46px;border:none;background:none;font-size:34px;line-height:1;color:var(--a-line);cursor:pointer;transition:.1s;padding:0}
#auxiliar-ui .ax-star .icon{display:none}
#auxiliar-ui .ax-star.on{color:#F59E0B;transform:scale(1.05)}
#auxiliar-ui .ax-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px;max-width:320px}
#auxiliar-ui .ax-tag{border:1.5px solid var(--a-line);background:var(--a-card);color:var(--a-t2);font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:999px;cursor:pointer}
#auxiliar-ui .ax-tag.on{border-color:var(--a-accent);background:#FEEDE4;color:var(--a-h2a)}
#auxiliar-ui .ax-skip{display:block;width:100%;text-align:center;background:none;border:none;color:var(--a-t2);font-weight:600;font-size:13.5px;padding:12px;cursor:pointer;margin-top:2px}
#auxiliar-ui .ax-link{color:var(--a-accent);font-weight:700;background:none;border:none;cursor:pointer}

/* Espera en el punto de recogida — reloj REAL (arranca en actual_arrival_at) */
#auxiliar-ui .ax-wait{display:flex;align-items:center;justify-content:center;gap:10px;background:#E7F8F1;color:var(--a-ok);border-radius:12px;padding:10px 14px;margin:0 0 12px;font-size:13px;font-weight:700}
#auxiliar-ui .ax-wait.hidden{display:none}
#auxiliar-ui .ax-wait b{font-size:20px;font-variant-numeric:tabular-nums;letter-spacing:.5px}
#auxiliar-ui .ax-wait.over{background:#FDECEC;color:#C53030}
#auxiliar-ui .ax-wait.over b{font-size:14px}
/* Aviso duro del formulario (fecha ya pasada) */
#auxiliar-ui .ax-hint.bad{background:#FDECEC;color:#C53030;font-weight:600}
/* Cancelar traslado */
#auxiliar-ui .ax-cancel-link{display:block;width:100%;text-align:center;color:#C53030;font-size:13.5px;padding:14px 0 4px;margin-top:6px}
#auxiliar-ui .ax-cancel-box{border:1.5px solid #F5C6C6;background:#FFF7F7;border-radius:14px;padding:14px;margin-top:16px}
#auxiliar-ui .ax-cancel-box b{display:block;font-size:14.5px;color:#C53030;margin-bottom:4px}
#auxiliar-ui .ax-cancel-box>span{display:block;font-size:12.5px;color:var(--a-t2);line-height:1.45;margin-bottom:10px}
#auxiliar-ui .ax-cancel-box .ax-input{margin-bottom:10px}
#auxiliar-ui .ax-cancel-acts{display:flex;gap:8px}
#auxiliar-ui .ax-cancel-acts .ax-btn{flex:1;margin-top:0;height:44px;font-size:14px}
#auxiliar-ui .ax-btn-danger{background:#C53030;color:#fff;border:none}
#auxiliar-ui .ax-btn-ghost.ax-danger{color:#C53030;border-color:#F5C6C6;margin-top:16px}
/* Perfil del auxiliar */
#auxiliar-ui .ax-prof-card{display:flex;align-items:center;gap:14px;background:var(--a-card);border:1px solid var(--a-line);border-radius:16px;padding:16px;margin-bottom:16px}
#auxiliar-ui .ax-prof-card b{display:block;font-size:16px}
#auxiliar-ui .ax-prof-card span{font-size:12.5px;color:var(--a-t2);word-break:break-all}

/* ============================================================
   Conductor · Mi ruta (rutas de auxiliares) — alta legibilidad al volante
   ============================================================ */
/* ============================================================
   Ruta del conductor — diseño UX (/Visual/route-screens.jsx)
   Tokens --r-* scopeados al contenedor. Ver [feedback-seguir-diseno-ux].
   ============================================================ */
#driver-ruta-root{
  --r-bg:#F8F8F6;--r-card:#FFFFFF;--r-accent:#F26522;--r-accent-soft:#FEEEE3;
  --r-text:#18181B;--r-text-2:#71717A;--r-text-3:#A1A1AA;
  --r-border:#E4E4E7;--r-border-strong:#D4D4D8;--r-surface-2:#F4F4F1;
  --r-h2a:#F26522;--r-h2a-soft:#FEEEE3;--r-a2h:#10B981;--r-a2h-soft:#E7F8F1;
  --r-error:#EF4444;--r-error-soft:#FEECEC;--r-warn:#F59E0B;--r-warn-soft:#FEF4E2;
  --r-info:#3B82F6;--r-info-soft:#EAF2FE;
  --r-font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;
  --r-shadow:0 1px 3px rgba(20,20,30,.05),0 4px 16px rgba(20,20,30,.04);
  position:fixed;inset:0;z-index:40;background:var(--r-bg);color:var(--r-text);
  overflow-y:auto;-webkit-overflow-scrolling:touch}
/* Decisión UX (2026-07-15): el diseño del conductor es CLARO siempre (la maqueta
   es clara). NO seguir el modo oscuro del OS — por eso no hay bloque prefers-dark. */
#driver-ruta-root.hidden{display:none}
#driver-ruta-ui{max-width:520px;margin:0 auto;min-height:100%;position:relative}
#driver-ruta-ui .icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
/* Top bar / header */
#driver-ruta-ui .dr-topbar{display:flex;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top)) 20px 4px}
#driver-ruta-ui .dr-topbar>b{font-size:15px;font-weight:600;flex:1}
#driver-ruta-ui .dr-hd{padding:6px 20px 4px}
#driver-ruta-ui .dr-eyebrow{font-size:12px;font-weight:500;color:var(--r-text-2);text-transform:uppercase;letter-spacing:.06em}
#driver-ruta-ui .dr-title{font-family:var(--r-font-display);font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:3px}
#driver-ruta-ui .dr-sub{font-size:13.5px;color:var(--r-text-2);margin-top:5px}
#driver-ruta-ui .dr-icbtn{width:44px;height:44px;border-radius:22px;border:none;background:var(--r-card);color:var(--r-text);display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:var(--r-shadow);cursor:pointer}
#driver-ruta-ui .dr-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--r-text-3);background:var(--r-surface-2);padding:5px 10px;border-radius:999px;white-space:nowrap}
#driver-ruta-ui .dr-live .dot{width:7px;height:7px;border-radius:50%;background:var(--r-text-3)}
#driver-ruta-ui .dr-live.on{color:var(--r-a2h);background:var(--r-a2h-soft)}
#driver-ruta-ui .dr-live.on .dot{background:var(--r-a2h);animation:drpulse 1.6s infinite}
@keyframes drpulse{0%,100%{opacity:1}50%{opacity:.3}}
#driver-ruta-ui .dr-loading{text-align:center;color:var(--r-text-2);padding:80px 20px;font-size:14px}
/* Body + tarjeta de vuelta (overview multi-vuelta) */
#driver-ruta-ui .dr-body{padding:6px 20px calc(24px + env(safe-area-inset-bottom))}
#driver-ruta-ui .dr-seclabel{font-size:12px;color:var(--r-text-2);text-transform:uppercase;letter-spacing:.5px;font-weight:500;margin:16px 4px 8px}
#driver-ruta-ui .dr-vcard{display:block;width:100%;text-align:left;background:var(--r-card);border:1px solid var(--r-border);border-radius:16px;padding:16px;margin-bottom:12px;cursor:pointer;box-shadow:var(--r-shadow);color:inherit}
#driver-ruta-ui .dr-vcard.done{opacity:.5}
#driver-ruta-ui .dr-vc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
#driver-ruta-ui .dr-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:5px 11px;border-radius:999px;text-transform:uppercase;letter-spacing:.4px}
#driver-ruta-ui .dr-chip .icon{width:13px;height:13px}
#driver-ruta-ui .dr-chip.sal{background:var(--r-h2a-soft);color:var(--r-h2a)}
#driver-ruta-ui .dr-chip.lle{background:var(--r-a2h-soft);color:var(--r-a2h)}
#driver-ruta-ui .dr-vc-time{font-size:13px;font-weight:500;color:var(--r-text-2);font-variant-numeric:tabular-nums}
#driver-ruta-ui .dr-vc-route{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:600;letter-spacing:-.01em}
#driver-ruta-ui .dr-ar{width:16px;height:16px;color:var(--r-text-3)}
#driver-ruta-ui .dr-vc-bot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:13px;color:var(--r-text-2)}
#driver-ruta-ui .dr-vc-cta{font-weight:600;color:var(--r-accent)}
/* Route overview (una vuelta): mapa + lista de paradas con conector */
#driver-ruta-ui .dr-map{height:210px;margin:6px 20px 0;border-radius:16px;overflow:hidden;border:1px solid var(--r-border);position:relative}
#driver-ruta-ui .dr-map-chip{position:absolute;top:10px;right:10px;padding:6px 10px;border-radius:8px;background:var(--r-card);font-size:11px;font-weight:500;color:var(--r-text-2);border:1px solid var(--r-border);z-index:500}
/* Popup de mapa grande (tocar el mapa o el botón ⤢ en la vista previa) */
#driver-ruta-ui .dr-map-expand{position:absolute;right:10px;bottom:10px;z-index:500;width:38px;height:38px;border-radius:10px;border:1px solid var(--r-border);background:var(--r-card);color:var(--r-text-1,#18181B);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.15);cursor:pointer}
/* Mismo criterio que .dr-chat: no salirse de la columna del conductor. */
#driver-ruta-ui .dr-modal{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;z-index:3000;background:var(--r-bg,#F8F8F6);display:flex;flex-direction:column}
#driver-ruta-ui .dr-modal.hidden{display:none}
#driver-ruta-ui .dr-modal-head{display:flex;align-items:center;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;font-size:16px;font-weight:700;color:var(--r-text-1,#18181B)}
#driver-ruta-ui .dr-modal-map{flex:1;width:100%}
/* ---- Chat con el auxiliar (0052) ---- */
/* Encima de todo: el mapa de ejecución sigue vivo debajo con el GPS.
   Fijo al viewport (para que el teclado del celular no lo empuje) pero SIN
   salirse de la columna de 520px en la que vive la app del conductor: con
   inset:0 se abría a todo el ancho de la pantalla en un computador. */
#driver-ruta-ui .dr-chat{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;z-index:3200;background:var(--r-bg,#F8F8F6);display:flex;flex-direction:column}
#driver-ruta-ui .dr-chat-head{display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 14px 12px;background:var(--r-card);border-bottom:1px solid var(--r-border)}
#driver-ruta-ui .dr-chat-who{flex:1;min-width:0}
#driver-ruta-ui .dr-chat-who b{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#driver-ruta-ui .dr-chat-who span{font-size:12px;color:var(--r-text-2)}
#driver-ruta-ui .dr-chat-body{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:8px}
#driver-ruta-ui .dr-msg{max-width:78%;padding:9px 12px;border-radius:16px}
#driver-ruta-ui .dr-msg p{margin:0;font-size:14.5px;line-height:1.4;word-break:break-word;white-space:pre-wrap}
#driver-ruta-ui .dr-msg span{display:block;margin-top:3px;font-size:10.5px;opacity:.65;text-align:right}
#driver-ruta-ui .dr-msg.mine{align-self:flex-end;background:var(--r-h2a);color:#fff;border-bottom-right-radius:5px}
#driver-ruta-ui .dr-msg.their{align-self:flex-start;background:var(--r-card);border:1px solid var(--r-border);border-bottom-left-radius:5px}
/* El jefe en el hilo (0067): mismo lado que el tripulante, pero marcado. */
#driver-ruta-ui .dr-msg em{display:block;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;opacity:.7;margin-bottom:3px}
#driver-ruta-ui .dr-msg.rendio{border-color:var(--r-h2a)}
#driver-ruta-ui .dr-chat-empty{margin:auto;text-align:center;padding:0 26px;color:var(--r-text-2)}
#driver-ruta-ui .dr-chat-empty .icon{width:34px;height:34px;color:var(--r-text-3);margin-bottom:10px}
#driver-ruta-ui .dr-chat-empty b{display:block;font-size:15px;color:var(--r-text-1,#18181B);margin-bottom:5px}
#driver-ruta-ui .dr-chat-empty span{font-size:12.5px;line-height:1.45}
#driver-ruta-ui .dr-chat-foot{display:flex;align-items:center;gap:9px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--r-card);border-top:1px solid var(--r-border)}
#driver-ruta-ui .dr-chat-foot input{flex:1;min-width:0;height:46px;padding:0 15px;border-radius:999px;border:1px solid var(--r-border);background:var(--r-bg);font-size:15px;font-family:inherit;color:var(--r-text-1,#18181B)}
#driver-ruta-ui .dr-chat-foot input:focus{outline:none;border-color:var(--r-h2a)}
#driver-ruta-ui .dr-chat-send{width:46px;height:46px;flex:0 0 auto;border:none;border-radius:50%;background:var(--r-h2a);color:#fff;display:grid;place-items:center;cursor:pointer}
#driver-ruta-ui .dr-chat-send .icon{width:19px;height:19px}
#driver-ruta-ui .dr-cbtn{position:relative}
#driver-ruta-ui .dr-badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--r-error,#EF4444);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;border:2px solid var(--r-card)}
/* Paradas numeradas en el mapa grande: el número es el MISMO de la lista
   "Paradas en orden". 'next' = a donde va ahora · 'done' = ya visitada. */
#driver-ruta-ui .dr-mk{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;background:var(--r-h2a);border:2px solid #fff;box-shadow:0 2px 7px rgba(0,0,0,.3)}
#driver-ruta-ui .dr-mk.done{background:var(--r-text-3);opacity:.75}
#driver-ruta-ui .dr-mk.next{background:var(--r-h2a);transform:scale(1.18);box-shadow:0 0 0 4px rgba(242,101,34,.25),0 2px 7px rgba(0,0,0,.3)}
#driver-ruta-ui .dr-mk.apt{background:var(--r-a2h)}
#driver-ruta-ui .dr-mk.me{background:#2563EB;font-size:15px}
#driver-ruta-ui .dr-mk.sm{width:22px;height:22px;font-size:11px;border-width:2px}
/* Nivel 1: mi punto azul en vivo + botón centrarme + distancia a la próxima */
#driver-ruta-ui .dr-me{width:18px;height:18px;border-radius:50%;background:#2563EB;border:3px solid #fff;box-shadow:0 0 0 2px rgba(37,99,235,.35),0 1px 5px rgba(0,0,0,.35)}
#driver-ruta-ui .dr-ex-chip .dr-dist{font-weight:700;text-transform:none;letter-spacing:0}
#driver-ruta-ui .dr-recenter{position:absolute;top:calc(112px + env(safe-area-inset-top));right:16px;z-index:12;width:44px;height:44px;border-radius:50%;border:none;background:var(--r-card);color:var(--r-a2h);box-shadow:0 3px 10px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;cursor:pointer}
#driver-ruta-ui .dr-recenter.hidden{display:none}
#driver-ruta-ui .dr-stops{position:relative;padding:4px 20px 0}
#driver-ruta-ui .dr-stops::before{content:"";position:absolute;left:39px;top:28px;bottom:36px;width:2px;background:var(--r-border)}
#driver-ruta-ui .dr-stop{display:flex;gap:14px;align-items:flex-start;padding:8px 0;position:relative}
#driver-ruta-ui .dr-stop-n{width:40px;height:40px;border-radius:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;position:relative;z-index:1;background:var(--r-card);border:2px solid var(--r-border-strong);color:var(--r-text-2)}
#driver-ruta-ui .dr-stop-n.first{background:var(--r-h2a);border:none;color:#fff}
#driver-ruta-ui .dr-stop-n.apt{background:var(--r-a2h);border:none;color:#fff}
#driver-ruta-ui .dr-stop-b{flex:1;padding:2px 0 8px}
#driver-ruta-ui .dr-stop-b .r1{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
#driver-ruta-ui .dr-stop-b .nm{font-size:15px;font-weight:600}
#driver-ruta-ui .dr-stop-b .eta{font-size:14px;font-weight:500;color:var(--r-text-2);font-variant-numeric:tabular-nums;flex:0 0 auto}
#driver-ruta-ui .dr-stop-b .ad{font-size:13px;color:var(--r-text-2);margin-top:2px}
#driver-ruta-ui .dr-bottom{position:sticky;bottom:0;padding:14px 20px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--r-bg) 74%,transparent)}
#driver-ruta-ui .dr-btn-primary{width:100%;height:56px;border-radius:14px;border:none;background:var(--r-accent);color:#fff;font-family:inherit;font-size:17px;font-weight:600;letter-spacing:-.2px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
/* Ejecución: mapa de fondo + bottom sheet */
#driver-ruta-ui.exec{position:absolute;inset:0;max-width:none;margin:0}
#driver-ruta-ui .dr-ex-map{position:absolute;inset:0;z-index:0}
#driver-ruta-ui .dr-ex-topbar{position:absolute;top:calc(14px + env(safe-area-inset-top));left:16px;right:16px;z-index:10;display:flex;gap:8px;align-items:center}
#driver-ruta-ui .dr-ex-pill{flex:1;height:44px;border-radius:22px;background:var(--r-card);box-shadow:0 2px 8px rgba(0,0,0,.14);display:flex;align-items:center;padding:0 16px;gap:10px;font-size:13px;font-weight:500}
#driver-ruta-ui .dr-ex-pill .sp{flex:1}
#driver-ruta-ui .dr-ex-chip{position:absolute;top:calc(70px + env(safe-area-inset-top));left:16px;z-index:10;padding:6px 12px;border-radius:100px;color:#fff;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;display:inline-flex;align-items:center;gap:6px}
#driver-ruta-ui .dr-ex-chip.sal{background:var(--r-h2a)}
#driver-ruta-ui .dr-ex-chip.lle{background:var(--r-a2h)}
#driver-ruta-ui .dr-sheet{position:absolute;bottom:0;left:0;right:0;z-index:20;background:var(--r-card);border-radius:24px 24px 0 0;box-shadow:0 -4px 24px rgba(0,0,0,.14)}
#driver-ruta-ui .dr-sheet-h{display:flex;justify-content:center;padding:8px 0 4px}
#driver-ruta-ui .dr-sheet-h i{width:40px;height:4px;border-radius:2px;background:var(--r-border-strong);display:block}
#driver-ruta-ui .dr-sheet-b{padding:12px 20px calc(20px + env(safe-area-inset-bottom))}
#driver-ruta-ui .dr-aux{display:flex;align-items:center;gap:12px;margin-bottom:14px}
#driver-ruta-ui .dr-aux-av{width:48px;height:48px;border-radius:24px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;flex-shrink:0}
#driver-ruta-ui .dr-aux-av.sal{background:var(--r-h2a-soft);color:var(--r-h2a)}
#driver-ruta-ui .dr-aux-av.lle{background:var(--r-a2h-soft);color:var(--r-a2h)}
#driver-ruta-ui .dr-aux-t{flex:1;min-width:0}
#driver-ruta-ui .dr-aux-t .nm{font-size:17px;font-weight:600;letter-spacing:-.2px}
#driver-ruta-ui .dr-aux-t .ad{font-size:13px;color:var(--r-text-2);margin-top:2px}
#driver-ruta-ui .dr-call{width:44px;height:44px;border-radius:22px;background:var(--r-accent-soft);color:var(--r-accent);display:flex;align-items:center;justify-content:center;text-decoration:none;flex-shrink:0}
#driver-ruta-ui .dr-state{padding:12px 14px;border-radius:12px;font-size:13px;margin-bottom:12px;display:flex;align-items:center;gap:10px}
#driver-ruta-ui .dr-state.info{background:var(--r-info-soft);color:var(--r-info)}
#driver-ruta-ui .dr-state.wait{background:var(--r-accent-soft);color:var(--r-accent)}
#driver-ruta-ui .dr-state.warn{background:var(--r-warn-soft);color:var(--r-warn)}
#driver-ruta-ui .dr-state .sp{flex:1}
#driver-ruta-ui .dr-noshow{display:flex;gap:8px;margin-bottom:12px}
#driver-ruta-ui .dr-noshow button{flex:1;height:40px;border-radius:10px;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
#driver-ruta-ui .dr-noshow .again{border:1px solid var(--r-border-strong);background:var(--r-card);color:var(--r-text)}
#driver-ruta-ui .dr-noshow .no{border:1px solid var(--r-error);background:var(--r-error-soft);color:var(--r-error)}
#driver-ruta-ui .dr-cta{width:100%;height:56px;border-radius:14px;border:none;cursor:pointer;font-family:inherit;font-size:17px;font-weight:600;letter-spacing:-.2px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--r-text);color:var(--r-bg)}
#driver-ruta-ui .dr-cta.go{background:var(--r-accent);color:#fff}
#driver-ruta-ui .dr-foot{display:flex;justify-content:space-between;align-items:center;padding-top:12px;margin-top:12px;border-top:1px solid var(--r-border);font-size:12px;color:var(--r-text-2)}
#driver-ruta-ui .dr-foot button{background:none;border:none;font:inherit;font-size:12px;color:var(--r-text-2);cursor:pointer;text-decoration:underline}
/* Completado */
#driver-ruta-ui .dr-done{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:32px;text-align:center}
#driver-ruta-ui .dr-done-ic{width:88px;height:88px;border-radius:44px;background:var(--r-accent-soft);color:var(--r-accent);display:flex;align-items:center;justify-content:center;margin-bottom:24px}
#driver-ruta-ui .dr-done-ic .icon{width:44px;height:44px}
#driver-ruta-ui .dr-done h1{font-family:var(--r-font-display);font-size:28px;font-weight:600;letter-spacing:-.5px}
#driver-ruta-ui .dr-done p{font-size:15px;color:var(--r-text-2);margin-top:10px;line-height:1.5;max-width:280px}
#driver-ruta-ui .dr-done-card{margin-top:24px;width:100%;max-width:320px;background:var(--r-card);border:1px solid var(--r-border);border-radius:16px;padding:12px 16px}
#driver-ruta-ui .dr-done-card .row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px}
#driver-ruta-ui .dr-done-card .row span:first-child{color:var(--r-text-2)}
#driver-ruta-ui .dr-done-card .row span:last-child{font-weight:500}
#driver-ruta-ui .dr-done .close{margin-top:24px;height:52px;padding:0 24px;border-radius:12px;border:none;background:var(--r-accent);color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
/* Sin ruta asignada — mismo bloque visual que "vuelta completa" */
#driver-ruta-ui .dr-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:76vh;padding:32px;text-align:center}
#driver-ruta-ui .dr-empty-ic{width:88px;height:88px;border-radius:44px;background:var(--r-surface-2);color:var(--r-text-3);display:flex;align-items:center;justify-content:center;margin-bottom:24px}
#driver-ruta-ui .dr-empty-ic .icon{width:40px;height:40px}
#driver-ruta-ui .dr-empty h1{font-family:var(--r-font-display);font-size:26px;font-weight:600;letter-spacing:-.5px}
#driver-ruta-ui .dr-empty p{font-size:15px;color:var(--r-text-2);margin-top:10px;line-height:1.5;max-width:300px}
#driver-ruta-ui .dr-empty .close{margin-top:24px;height:52px;padding:0 24px;border-radius:12px;border:none;background:var(--r-accent);color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
/* --- Overview: barra de progreso + pill "compartiendo" + tarjetas maqueta --- */
#driver-ruta-ui .dr-progress{display:flex;align-items:center;gap:12px;padding:12px 4px 2px}
#driver-ruta-ui .dr-pbar{flex:0 0 84px;height:6px;border-radius:3px;background:var(--r-surface-2);overflow:hidden;position:relative}
#driver-ruta-ui .dr-pbar i{position:absolute;left:0;top:0;bottom:0;background:var(--r-a2h);border-radius:3px}
#driver-ruta-ui .dr-pnum{font-size:12px;font-weight:600;color:var(--r-text-2);font-variant-numeric:tabular-nums}
#driver-ruta-ui .dr-share{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--r-text-3);background:var(--r-surface-2);padding:5px 11px;border-radius:999px}
#driver-ruta-ui .dr-share.on{color:var(--r-a2h);background:var(--r-a2h-soft)}
#driver-ruta-ui .dr-share .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
#driver-ruta-ui .dr-share.on .dot{animation:drpulse 1.6s infinite}
#driver-ruta-ui .dr-vcard{position:relative;overflow:hidden;padding:16px 16px 14px 20px}
#driver-ruta-ui .dr-vcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}
#driver-ruta-ui .dr-vcard.sal::before{background:var(--r-h2a)}
#driver-ruta-ui .dr-vcard.lle::before{background:var(--r-a2h)}
#driver-ruta-ui .dr-vcard.hotel::before{background:var(--r-warn)}
#driver-ruta-ui .dr-vc-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
#driver-ruta-ui .dr-vc-type{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
#driver-ruta-ui .dr-vcard.sal .dr-vc-type{color:var(--r-h2a)}
#driver-ruta-ui .dr-vcard.lle .dr-vc-type{color:var(--r-a2h)}
#driver-ruta-ui .dr-vcard.hotel .dr-vc-type{color:var(--r-warn)}
#driver-ruta-ui .dr-vc-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--r-surface-2);color:var(--r-text-2)}
#driver-ruta-ui .dr-vc-badge.curso{background:var(--r-h2a-soft);color:var(--r-h2a);display:inline-flex;align-items:center;gap:5px}
#driver-ruta-ui .dr-vc-badge.curso::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
#driver-ruta-ui .dr-vc-time2{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
#driver-ruta-ui .dr-vc-when{font-size:13px;color:var(--r-text-2);margin-top:4px}
#driver-ruta-ui .dr-vc-route2{font-size:15px;font-weight:600;margin-top:8px}
#driver-ruta-ui .dr-vc-meta{display:flex;align-items:center;gap:14px;margin-top:12px;font-size:12.5px;color:var(--r-text-2)}
#driver-ruta-ui .dr-vc-meta span{display:inline-flex;align-items:center;gap:5px}
#driver-ruta-ui .dr-vc-meta .icon{width:14px;height:14px;color:var(--r-text-3)}
#driver-ruta-ui .dr-vc-meta .chev{margin-left:auto;width:16px;height:16px;color:var(--r-text-3)}
/* --- Exec: chips row, 2 contactos, notas, distancia, fila Navegar+primario --- */
#driver-ruta-ui .dr-ex-chips{position:absolute;top:calc(70px + env(safe-area-inset-top));left:16px;right:16px;z-index:10;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#driver-ruta-ui .dr-ex-chip{position:static}
#driver-ruta-ui .dr-ex-share{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:6px 11px;border-radius:100px;background:var(--r-card);color:var(--r-text-3);box-shadow:0 2px 8px rgba(0,0,0,.14)}
#driver-ruta-ui .dr-ex-share.on{color:var(--r-a2h)}
#driver-ruta-ui .dr-ex-share .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
#driver-ruta-ui .dr-ex-share.on .dot{animation:drpulse 1.6s infinite}
#driver-ruta-ui .dr-aux-btns{display:flex;gap:8px;flex-shrink:0}
#driver-ruta-ui .dr-cbtn{width:44px;height:44px;border-radius:22px;display:flex;align-items:center;justify-content:center;text-decoration:none;border:none;cursor:pointer;flex:0 0 auto}
#driver-ruta-ui .dr-cbtn.msg{background:var(--r-a2h-soft);color:var(--r-a2h)}
#driver-ruta-ui .dr-cbtn.tel{background:var(--r-accent-soft);color:var(--r-accent)}
#driver-ruta-ui .dr-notes{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:10px;background:var(--r-surface-2);font-size:13px;color:var(--r-text-2);margin-bottom:12px}
#driver-ruta-ui .dr-notes .icon{width:15px;height:15px;flex:0 0 auto;margin-top:1px}
#driver-ruta-ui .dr-eta{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:12px;background:var(--r-info-soft);color:var(--r-info);font-size:13px;margin-bottom:12px}
#driver-ruta-ui .dr-eta .km{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}
#driver-ruta-ui .dr-btnrow{display:flex;gap:10px}
#driver-ruta-ui .dr-btnrow .nav{flex:0 0 auto;height:56px;padding:0 18px;border-radius:14px;border:1px solid var(--r-border-strong);background:var(--r-card);color:var(--r-text);font:inherit;font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
#driver-ruta-ui .dr-btnrow .nav .icon{color:var(--r-accent);width:18px;height:18px}
#driver-ruta-ui .dr-btnrow .dr-cta{flex:1;width:auto}
#driver-ruta-ui .dr-foot .links{display:inline-flex;gap:14px}
#driver-ruta-ui .dr-foot button[disabled]{opacity:.4;cursor:not-allowed;text-decoration:none}
/* Reloj de espera en el punto de recogida (mismo número que ve el auxiliar) */
#driver-ruta-ui .dr-wait{display:flex;align-items:center;justify-content:center;gap:10px;background:#E7F8F1;color:#0F7B5A;border-radius:12px;padding:10px 14px;margin-top:12px;font-size:13px;font-weight:700}
#driver-ruta-ui .dr-wait b{font-size:20px;font-variant-numeric:tabular-nums;letter-spacing:.5px}
#driver-ruta-ui .dr-wait.over{background:#FDECEC;color:#C53030}
#driver-ruta-ui .dr-wait.over b{font-size:15px}

/* ============================================================
   Admin · Eventualidades (bandeja de lo que se sale del plan)
   Reusa la paleta y las piezas de Turnos activos (.sh-phead/.set-btn),
   pero con filas plegables y tamaños de toque: esta pantalla se abre
   en el celular a las 4 de la mañana, no en el escritorio.
   ============================================================ */
#evt-ui{
  --bg:#F8FAFC; --panel:#FFFFFF; --ink:#211D18; --ink2:#6B6258; --ink3:#A39A8D;
  --line:#E2E8F0; --line2:#CBD5E1;
  --orange:#F26522; --orange-soft:#FCE4D6;
  --amber:#D98A12; --amber-soft:#FBEBCF;
  --red:#DB4B3F; --red-soft:#FADFDC;
  --info:#2563A8; --info-soft:#E3EDF8;
  --font:"Hanken Grotesk",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace;
  font-family:var(--font); color:var(--ink);
}
#evt-ui *{box-sizing:border-box}
#evt-ui .icon{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
#evt-ui .sh-phead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:16px}
#evt-ui .sh-phead h1{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1;display:flex;align-items:center;gap:11px;color:var(--ink)}
#evt-ui .sh-phead h1 .sh-ct{font-size:13px;font-weight:800;font-family:var(--mono);background:var(--red-soft);color:var(--red);border-radius:999px;padding:3px 11px}
#evt-ui .sh-phead p{font-size:13px;color:var(--ink2);margin-top:8px;max-width:660px;line-height:1.5}
#evt-ui .sh-phead p b{color:var(--ink);font-weight:700}
#evt-ui .set-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:11px;border:0;background:var(--orange);color:#fff;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 9px 22px rgba(242,101,34,.26)}
#evt-ui .set-btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line2);box-shadow:none}

/* Aviso de "nadie ha visto esto": lo primero que debe saltar al abrir. */
#evt-ui .evt-unack{display:none;align-items:center;gap:10px;background:var(--red-soft);border:1px solid var(--red);color:var(--red);border-radius:13px;padding:11px 14px;margin-bottom:14px;font-size:13px;font-weight:700}
#evt-ui .evt-unack.show{display:flex}
#evt-ui .evt-unack .icon{width:17px;height:17px}

#evt-ui .evt-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
#evt-ui .evt-bar button{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);color:var(--ink2);font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer}
#evt-ui .evt-bar button.on{background:var(--ink);color:var(--panel);border-color:var(--ink)}
#evt-ui .evt-bar button i{font-style:normal;font-family:var(--mono);font-size:11px;opacity:.7}

#evt-ui #evt-list{display:grid;gap:10px}
#evt-ui .evt-row{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--line2);border-radius:14px;overflow:hidden}
#evt-ui .evt-row.red{border-left-color:var(--red)}
#evt-ui .evt-row.amber{border-left-color:var(--amber)}
#evt-ui .evt-row.info{border-left-color:var(--info)}
#evt-ui .evt-row.grave{background:var(--red-soft);border-color:var(--red)}
#evt-ui .evt-row.open{box-shadow:0 10px 26px rgba(33,29,24,.08)}

/* La cabecera entera es el botón: a una mano, de noche, no se acierta un ícono. */
#evt-ui .evt-head{display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;background:none;border:0;padding:14px 16px;cursor:pointer;font-family:var(--font);color:inherit;min-height:56px}
#evt-ui .evt-ic{flex:0 0 auto;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--line);color:var(--ink2)}
#evt-ui .evt-row.red .evt-ic{background:var(--red-soft);color:var(--red)}
#evt-ui .evt-row.amber .evt-ic{background:var(--amber-soft);color:var(--amber)}
#evt-ui .evt-row.info .evt-ic{background:var(--info-soft);color:var(--info)}
#evt-ui .evt-ic .icon{width:17px;height:17px}
#evt-ui .evt-txt{min-width:0;display:block}
#evt-ui .evt-txt b{display:block;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
#evt-ui .evt-grave{font-style:normal;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;background:var(--red);color:#fff;border-radius:5px;padding:2px 6px;margin-left:7px;vertical-align:2px}
#evt-ui .evt-sub{display:block;font-size:13px;color:var(--ink2);margin-top:3px;line-height:1.45}
#evt-ui .evt-meta{display:block;font-size:11.5px;color:var(--ink3);margin-top:5px}
#evt-ui .evt-flag{color:var(--red);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:10.5px;margin-left:4px}
#evt-ui .evt-seen{color:var(--ink3);font-size:10.5px;margin-left:4px}

#evt-ui .evt-body{padding:0 16px 15px 61px;border-top:1px dashed var(--line);margin-top:2px;padding-top:13px}
#evt-ui .evt-desc{font-size:14px;color:var(--ink);line-height:1.55;white-space:pre-wrap}
#evt-ui .evt-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
#evt-ui .evt-chips span{height:27px;display:inline-flex;align-items:center;padding:0 11px;border-radius:8px;background:var(--amber-soft);color:var(--amber);font-size:12px;font-weight:700}
#evt-ui .evt-kv{display:flex;gap:22px;flex-wrap:wrap;margin-top:13px}
#evt-ui .evt-kv span{display:block;font-size:11px;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em}
#evt-ui .evt-kv b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-top:2px}
#evt-ui .evt-note{margin-top:12px;font-size:13px;color:var(--ink2);background:var(--bg);border-radius:10px;padding:10px 12px;line-height:1.5}
#evt-ui .evt-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}
#evt-ui .evt-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);font-family:var(--font);font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:none}
#evt-ui .evt-btn.dark{background:var(--ink);color:var(--panel);border-color:var(--ink)}
#evt-ui .evt-btn:disabled{opacity:.55;cursor:not-allowed}
#evt-ui .evt-btn .icon{width:16px;height:16px}

#evt-ui .evt-empty{text-align:center;padding:46px 20px;color:var(--ink2)}
#evt-ui .evt-empty .icon{width:34px;height:34px;color:var(--ink3);margin:0 auto 10px}
#evt-ui .evt-empty h3{font-size:16px;font-weight:800;color:var(--ink)}
#evt-ui .evt-empty p{font-size:13px;margin-top:4px}

/* ============================================================
   HILO DEL TRASLADO — lado del jefe (0067)
   Hoja encima, no vista aparte: se abre desde Eventualidades y desde
   Reservas, y la pantalla de abajo no pierde su filtro ni su polling.
   Vive suelta en el DOM (#jefe-chat), así que trae sus propios tokens
   en vez de heredar los de un panel.
   ============================================================ */
#jefe-chat{
  --jc-bg:#F8FAFC; --jc-panel:#FFFFFF; --jc-ink:#211D18; --jc-ink2:#6B6258; --jc-ink3:#A39A8D;
  --jc-line:#E2E8F0; --jc-line2:#CBD5E1; --jc-orange:#F26522;
  --jc-font:"Hanken Grotesk",system-ui,sans-serif;
  position:fixed;inset:0;z-index:960;background:rgba(33,29,24,.42);
  display:flex;align-items:flex-end;justify-content:center;
  font-family:var(--jc-font);color:var(--jc-ink)
}
#jefe-chat.hidden{display:none}
#jefe-chat *{box-sizing:border-box}
#jefe-chat .jc-card{width:100%;max-width:520px;max-height:88vh;background:var(--jc-panel);border-radius:18px 18px 0 0;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -14px 44px rgba(33,29,24,.22)}
#jefe-chat .jc-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--jc-line)}
#jefe-chat .jc-who{flex:1;min-width:0}
#jefe-chat .jc-who b{display:block;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#jefe-chat .jc-who span{display:block;font-size:12px;color:var(--jc-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#jefe-chat .jc-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:12px;border:1px solid var(--jc-line2);background:var(--jc-panel);color:var(--jc-ink);font-family:var(--jc-font);font-size:13.5px;font-weight:700;cursor:pointer}
#jefe-chat .jc-btn.dark{background:var(--jc-ink);color:var(--jc-panel);border-color:var(--jc-ink)}
#jefe-chat .jc-btn:disabled{opacity:.55;cursor:not-allowed}
#jefe-chat .jc-body{flex:1;min-height:180px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:9px;background:var(--jc-bg)}
#jefe-chat .jc-load{font-size:13px;color:var(--jc-ink2)}
#jefe-chat .jc-empty{margin:auto;text-align:center;padding:8px 12px;color:var(--jc-ink2)}
#jefe-chat .jc-empty b{display:block;font-size:14.5px;color:var(--jc-ink);margin-bottom:6px}
#jefe-chat .jc-empty span{font-size:12.5px;line-height:1.5}
#jefe-chat .jc-msg{max-width:80%;padding:9px 12px;border-radius:15px}
#jefe-chat .jc-msg em{display:block;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--jc-ink3);margin-bottom:3px}
#jefe-chat .jc-msg p{margin:0;font-size:14px;line-height:1.4;word-break:break-word;white-space:pre-wrap}
#jefe-chat .jc-msg span{display:block;margin-top:3px;font-size:10.5px;opacity:.65;text-align:right}
#jefe-chat .jc-msg.mine{align-self:flex-end;background:var(--jc-ink);color:var(--jc-panel);border-bottom-right-radius:5px}
#jefe-chat .jc-msg.their{align-self:flex-start;background:var(--jc-panel);border:1px solid var(--jc-line);border-bottom-left-radius:5px}
#jefe-chat .jc-foot{display:flex;align-items:center;gap:9px;padding:11px 16px calc(11px + env(safe-area-inset-bottom));border-top:1px solid var(--jc-line)}
#jefe-chat .jc-foot input{flex:1;min-width:0;height:44px;padding:0 15px;border-radius:12px;border:1px solid var(--jc-line2);background:var(--jc-bg);font-family:var(--jc-font);font-size:14px;color:var(--jc-ink)}
#jefe-chat .jc-foot input:focus{outline:none;border-color:var(--jc-orange)}

/* En escritorio se centra: ahí no se opera con el pulgar. */
@media (min-width:721px){
  #jefe-chat{align-items:center}
  #jefe-chat .jc-card{border-radius:18px}
}

@media (max-width:720px){
  #evt-ui .sh-phead h1{font-size:22px}
  #evt-ui .sh-phead p{font-size:12.5px}
  #evt-ui .evt-body{padding-left:16px}
  #evt-ui .evt-actions .evt-btn{flex:1 1 calc(50% - 5px)}
}

/* Conductor · SOS + hoja para reportar una eventualidad (0062/0063).
   El SOS vive en la barra superior de la ejecución: tiene que alcanzarse con el
   pulgar sin salir del mapa ni buscar en un menú. */
#driver-ruta-ui .dr-sos{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:999px;border:0;background:var(--r-error);color:#fff;font:inherit;font-size:13px;font-weight:800;letter-spacing:.04em;cursor:pointer;box-shadow:0 8px 20px rgba(239,68,68,.35)}
#driver-ruta-ui .dr-sos .icon{width:16px;height:16px}

#driver-ruta-ui .dr-report{position:fixed;inset:0;z-index:60;background:rgba(17,17,17,.5);display:flex;align-items:flex-end;justify-content:center}
#driver-ruta-ui .dr-rcard{width:100%;max-width:560px;max-height:92dvh;overflow:auto;background:var(--r-card);border-radius:22px 22px 0 0;padding:6px 0 max(14px,env(safe-area-inset-bottom))}
#driver-ruta-ui .dr-rhead{display:flex;align-items:center;justify-content:space-between;padding:12px 18px 6px}
#driver-ruta-ui .dr-rhead b{font-size:18px;font-weight:700;color:var(--r-text)}
#driver-ruta-ui .dr-rbody{padding:6px 18px 4px}
#driver-ruta-ui .dr-rq{margin-top:14px}
#driver-ruta-ui .dr-rq label{display:block;font-size:13px;font-weight:600;color:var(--r-text-2);margin-bottom:8px}
#driver-ruta-ui .dr-rrow{display:flex;gap:9px}
#driver-ruta-ui .dr-rrow.wrap{flex-wrap:wrap}
#driver-ruta-ui .dr-rchip{flex:1 1 auto;min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;border-radius:14px;border:1px solid var(--r-border-strong);background:var(--r-card);color:var(--r-text);font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-align:center}
#driver-ruta-ui .dr-rrow.wrap .dr-rchip{flex:1 1 calc(50% - 5px)}
#driver-ruta-ui .dr-rchip .icon{width:17px;height:17px;color:var(--r-text-3)}
#driver-ruta-ui .dr-rchip.on{border-color:var(--r-accent);background:var(--r-accent-soft,#FEEEE3);color:var(--r-accent);font-weight:700}
#driver-ruta-ui .dr-rchip.on .icon{color:var(--r-accent)}
#driver-ruta-ui .dr-rq textarea{width:100%;border-radius:14px;border:1px solid var(--r-border-strong);background:var(--r-card);color:var(--r-text);font:inherit;font-size:15px;padding:12px 14px;resize:vertical}
#driver-ruta-ui .dr-rq textarea:focus{outline:none;border-color:var(--r-accent)}
#driver-ruta-ui .dr-rfoot{font-size:12.5px;color:var(--r-text-3);margin-top:10px;line-height:1.45}
#driver-ruta-ui .dr-rsend{display:block;width:calc(100% - 36px);margin:16px 18px 4px;height:56px;border-radius:16px;border:0;background:var(--r-text);color:var(--r-card);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
#driver-ruta-ui .dr-rsend.urgent{background:var(--r-error);color:#fff}
#driver-ruta-ui .dr-rsend:disabled{opacity:.6;cursor:not-allowed}

/* Tripulante · botón rojo y su hoja (eventualidad #4).
   Convive con "Sin novedad" en la misma barra: el botón normal ocupa el ancho y
   el rojo queda al lado, cuadrado, imposible de apretar por error. */
#auxiliar-ui .ax-cta-bar{display:flex;gap:10px;align-items:stretch}
#auxiliar-ui .ax-cta-bar .ax-btn-primary{flex:1}
#auxiliar-ui .ax-alarm-btn{flex:0 0 auto;width:54px;padding:0;background:#C53030;color:#fff;border:none}
#auxiliar-ui .ax-alarm-btn .icon{width:22px;height:22px}
#auxiliar-ui .ax-alarm{position:absolute;inset:0;z-index:70;background:rgba(17,17,17,.5);display:flex;align-items:flex-end}
#auxiliar-ui .ax-alarm-card{width:100%;background:var(--a-card);border-radius:22px 22px 0 0;padding:16px 18px max(16px,env(safe-area-inset-bottom));max-height:88%;overflow:auto}
#auxiliar-ui .ax-alarm-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
#auxiliar-ui .ax-alarm-head b{font-size:18px;font-weight:700;color:var(--a-text)}
#auxiliar-ui .ax-alarm-lead{font-size:13.5px;color:var(--a-text-2);margin-top:6px;line-height:1.5}
#auxiliar-ui .ax-alarm-opts{display:grid;gap:9px;margin:14px 0 12px}
#auxiliar-ui .ax-alarm-opt{min-height:54px;padding:10px 16px;border-radius:14px;border:1.5px solid var(--a-line);background:var(--a-card);color:var(--a-text);font:inherit;font-size:15px;font-weight:600;text-align:left;cursor:pointer}
#auxiliar-ui .ax-alarm-opt.on{border-color:#C53030;background:#FDECEC;color:#C53030;font-weight:700}
#auxiliar-ui .ax-alarm-card textarea.ax-input{min-height:64px;resize:vertical;padding-top:11px}
#auxiliar-ui .ax-alarm-acts{display:flex;gap:10px;margin-top:14px}
#auxiliar-ui .ax-alarm-acts .ax-btn{flex:1}

/* El canal de avisos caído tiene que verse distinto de un día tranquilo: en los
   dos casos no suena nada, y confundirlos es cómo se pierde una falla mecánica. */
#evt-ui .evt-health{display:none;align-items:center;gap:10px;background:var(--amber-soft);border:1px solid var(--amber);color:#8a5a08;border-radius:13px;padding:11px 14px;margin-bottom:10px;font-size:13px;font-weight:600;line-height:1.45}
#evt-ui .evt-health.show{display:flex}
#evt-ui .evt-health .icon{width:17px;height:17px;flex:0 0 auto;color:var(--amber)}

/* ============================================================
   ¿DÓNDE ACOMODO ESTA RESERVA? (bloque D)
   Misma lógica de hoja suelta que #jefe-chat: se abre encima de la bandeja
   o de Operación sin desmontar lo de abajo, y trae sus propios tokens.
   ============================================================ */
#acomodar{
  --ac-bg:#F8FAFC; --ac-panel:#FFFFFF; --ac-ink:#211D18; --ac-ink2:#6B6258; --ac-ink3:#A39A8D;
  --ac-line:#E2E8F0; --ac-line2:#CBD5E1;
  --ac-ok:#16936A; --ac-ok-soft:#E2F3EC;
  --ac-tight:#D98A12; --ac-tight-soft:#FBEBCF;
  --ac-bad:#DB4B3F; --ac-bad-soft:#FADFDC;
  --ac-font:"Hanken Grotesk",system-ui,sans-serif; --ac-mono:"Space Mono",ui-monospace,monospace;
  position:fixed;inset:0;z-index:965;background:rgba(33,29,24,.42);
  display:flex;align-items:flex-end;justify-content:center;
  font-family:var(--ac-font);color:var(--ac-ink)
}
#acomodar.hidden{display:none}
#acomodar *{box-sizing:border-box}
#acomodar .ac-card{width:100%;max-width:560px;max-height:90vh;background:var(--ac-panel);border-radius:18px 18px 0 0;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -14px 44px rgba(33,29,24,.22)}
#acomodar .ac-head{display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:1px solid var(--ac-line)}
#acomodar .ac-who{flex:1;min-width:0}
#acomodar .ac-who b{display:block;font-size:15px;font-weight:800}
#acomodar .ac-who span{display:block;font-size:12px;color:var(--ac-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#acomodar .ac-btn{flex:0 0 auto;height:38px;padding:0 14px;border-radius:11px;border:1px solid var(--ac-line2);background:var(--ac-panel);color:var(--ac-ink);font-family:var(--ac-font);font-size:13px;font-weight:700;cursor:pointer}
#acomodar .ac-body{flex:1;overflow-y:auto;padding:14px 16px calc(16px + env(safe-area-inset-bottom));background:var(--ac-bg)}
#acomodar .ac-load{font-size:13px;color:var(--ac-ink2)}
#acomodar .ac-lbl{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ac-ink3);margin:4px 0 8px}
#acomodar .ac-lbl.off{margin-top:16px}

#acomodar .ac-opt{background:var(--ac-panel);border:1px solid var(--ac-line);border-left:3px solid var(--ac-line2);border-radius:12px;padding:11px 13px;margin-bottom:8px}
#acomodar .ac-opt.ok{border-left-color:var(--ac-ok)}
#acomodar .ac-opt.tight{border-left-color:var(--ac-tight)}
#acomodar .ac-opt.bad{border-left-color:var(--ac-bad);opacity:.75}
#acomodar .ac-opt-top{display:flex;align-items:center;gap:8px}
#acomodar .ac-opt-top b{font-size:14.5px;font-weight:800}
#acomodar .ac-extra{margin-left:auto;font-family:var(--ac-mono);font-size:13px;font-weight:700}
#acomodar .ac-opt-sub{font-size:12.5px;color:var(--ac-ink2);margin-top:3px;line-height:1.45}
#acomodar .ac-tag{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:2px 8px}
#acomodar .ac-tag.ok{background:var(--ac-ok-soft);color:var(--ac-ok)}
#acomodar .ac-tag.tight{background:var(--ac-tight-soft);color:var(--ac-tight)}
#acomodar .ac-tag.bad{background:var(--ac-bad-soft);color:var(--ac-bad)}
#acomodar .ac-gps{font-size:11.5px;color:var(--ac-ok);font-weight:700}
#acomodar .ac-gps.stale{color:var(--ac-tight)}
#acomodar .ac-why{margin:7px 0 0;padding-left:17px}
#acomodar .ac-why li{font-size:12.5px;color:var(--ac-bad);line-height:1.5}

#acomodar .ac-nope{background:var(--ac-panel);border:1px solid var(--ac-line);border-radius:13px;padding:14px}
#acomodar .ac-nope.tercero{background:var(--ac-bad-soft);border-color:var(--ac-bad)}
#acomodar .ac-nope b{display:block;font-size:15px;font-weight:800;margin-bottom:5px}
#acomodar .ac-nope.tercero b{color:var(--ac-bad)}
#acomodar .ac-nope span{font-size:13px;color:var(--ac-ink2);line-height:1.5}

#acomodar .ac-nota{margin-top:14px;border-top:1px solid var(--ac-line);padding-top:11px}
#acomodar .ac-nota p{font-size:12px;color:var(--ac-ink2);line-height:1.5;margin-bottom:5px}

@media (min-width:721px){
  #acomodar{align-items:center}
  #acomodar .ac-card{border-radius:18px}
}

/* ============================================================================
   REPUESTOS (admin) — mantenimiento preventivo por pieza.
   Diseño UX "Rendio Admin - Repuestos"; tokens del app, scopeado bajo #parts-ui
   para no tocar el resto. Lo pinta admin-repuestos.js.
   ========================================================================== */
#parts-ui .rule1{display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:14px;box-shadow:var(--shadow);padding:12px 16px;margin:0 0 20px}
#parts-ui .rule1 .ri{width:34px;height:34px;border-radius:10px;background:var(--amber-soft);color:var(--amber);display:grid;place-items:center;flex:0 0 auto}
#parts-ui .rule1 .rt{font-size:12.5px;color:var(--ink2);line-height:1.5;flex:1;min-width:0}
#parts-ui .rule1 .rt b{color:var(--ink);font-weight:800}
#parts-ui .legend{display:flex;gap:12px;align-items:center;flex:0 0 auto;font-size:11px;font-weight:700;color:var(--ink2)}
#parts-ui .legend span{display:inline-flex;align-items:center;gap:6px}
#parts-ui .legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
@media(max-width:900px){#parts-ui .legend{display:none}}

#parts-ui .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
@media(max-width:820px){#parts-ui .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
#parts-ui .kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:13px 15px}
#parts-ui .kpi .kl{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);display:flex;align-items:center;gap:6px}
#parts-ui .kpi .kl i{width:8px;height:8px;border-radius:3px}
#parts-ui .kpi .kv{font-family:var(--mono);font-size:27px;font-weight:700;letter-spacing:-.03em;margin-top:7px;line-height:1;display:block}
#parts-ui .kpi .kf{font-size:11.5px;color:var(--ink3);font-weight:600;margin-top:6px}
#parts-ui .kpi.bad .kv{color:var(--red)} #parts-ui .kpi.warn .kv{color:var(--amber)} #parts-ui .kpi.good .kv{color:var(--green)}

#parts-ui .sech{display:flex;align-items:center;gap:10px;margin:26px 0 12px}
#parts-ui .sech h2{font-size:12.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink2)}
#parts-ui .sech .rule{flex:1;height:1px;background:var(--line)}
#parts-ui .sech .hint{font-size:11.5px;color:var(--ink3);font-weight:600}

#parts-ui .vcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:980px){#parts-ui .vcards{grid-template-columns:1fr}}
#parts-ui .vcard{text-align:left;font-family:inherit;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:15px 16px;cursor:pointer;transition:box-shadow .16s,border-color .14s,transform .1s;display:flex;flex-direction:column;gap:12px;width:100%}
#parts-ui .vcard:hover{box-shadow:var(--shadow-lg);border-color:var(--line2)}
#parts-ui .vcard:active{transform:translateY(1px)}
#parts-ui .vcard .vh{display:flex;align-items:center;gap:9px}
#parts-ui .plate{font-family:var(--mono);font-size:11.5px;font-weight:700;background:var(--ink);color:var(--panel);border-radius:7px;padding:3px 8px}
#parts-ui .vcard .vn{font-size:14px;font-weight:800;letter-spacing:-.015em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#parts-ui .vcard .odo{display:flex;align-items:baseline;gap:8px}
#parts-ui .vcard .odo b{font-family:var(--mono);font-size:25px;font-weight:700;letter-spacing:-.03em}
#parts-ui .vcard .odo s{text-decoration:none;font-size:12px;font-weight:700;color:var(--ink3)}
#parts-ui .vcard .src{font-size:11px;color:var(--ink3);font-weight:600;margin-top:-6px;display:flex;align-items:center;gap:5px}
#parts-ui .vcard .dots{display:flex;gap:6px;flex-wrap:wrap}
#parts-ui .vcard .dot{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:800;background:var(--panel2);border:1px solid var(--line);color:var(--ink2)}
#parts-ui .vcard .dot i{width:8px;height:8px;border-radius:3px}
#parts-ui .vcard .next{border-top:1px solid var(--line);padding-top:11px;font-size:12px;color:var(--ink2);line-height:1.45}
#parts-ui .vcard .next b{color:var(--ink);font-weight:700}
#parts-ui .vcard .go{font-size:11.5px;font-weight:800;color:var(--orange);display:flex;align-items:center;gap:6px}

#parts-ui .qrow{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:13px 15px;display:grid;grid-template-columns:74px 1.5fr 1.25fr auto;gap:15px;align-items:center;margin-bottom:10px}
#parts-ui .qrow.red{border-left:3px solid var(--red)}
#parts-ui .qrow.amber{border-left:3px solid var(--amber)}
#parts-ui .qrow.nodata{border-left:3px solid var(--line2)}
@media(max-width:860px){#parts-ui .qrow{grid-template-columns:1fr;gap:11px}}
#parts-ui .qv{display:flex;flex-direction:column;gap:4px}
#parts-ui .qv .tag{font-family:var(--mono);font-size:11px;font-weight:700;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:2px 7px;color:var(--ink2);text-align:center}
#parts-ui .qv .om{font-family:var(--mono);font-size:10px;color:var(--ink3);text-align:center}
#parts-ui .qp b{font-size:14px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#parts-ui .qp .sys{font-size:11.5px;color:var(--ink3);font-weight:600;margin-top:3px}
#parts-ui .crit{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--red-soft);color:var(--red);border-radius:999px;padding:2px 7px}
#parts-ui .pbar{height:7px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
#parts-ui .pbar i{display:block;height:100%;border-radius:99px}
#parts-ui .qm{display:flex;flex-direction:column;gap:6px;min-width:0}
#parts-ui .qm .lbl{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;font-weight:700;color:var(--ink2)}
#parts-ui .qm .lbl .r{font-family:var(--mono)}
#parts-ui .qa{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}
#parts-ui .st.red{background:var(--red-soft);color:var(--red)}
#parts-ui .st.amber{background:var(--amber-soft);color:var(--amber)}
#parts-ui .st.green{background:var(--green-soft);color:var(--green)}
#parts-ui .st.nodata{background:var(--panel2);color:var(--ink3);border:1px solid var(--line)}

#parts-ui .psys{display:flex;align-items:center;gap:9px;margin:16px 0 8px}
#parts-ui .psys:first-child{margin-top:4px}
#parts-ui .psys h3{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink3)}
#parts-ui .psys .rule{flex:1;height:1px;background:var(--line)}
#parts-ui .prow{display:grid;grid-template-columns:1.35fr 92px 1fr 138px 34px;gap:13px;align-items:center;padding:9px 4px;border-bottom:1px solid var(--line);font-size:12.5px}
#parts-ui .prow:last-child{border-bottom:0}
#parts-ui .prow .pn{font-weight:700;display:flex;align-items:center;gap:7px;min-width:0}
#parts-ui .prow .pn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#parts-ui .prow .pi{font-family:var(--mono);font-size:11.5px;color:var(--ink3)}
#parts-ui .prow .pr{font-family:var(--mono);font-size:11.5px;font-weight:700;text-align:right}
#parts-ui .prow .pb{min-width:0}
#parts-ui .prow .pa{display:flex;justify-content:flex-end}
#parts-ui .mini{width:30px;height:30px;border-radius:9px;border:1px solid var(--line2);background:var(--panel);color:var(--ink3);display:grid;place-items:center;cursor:pointer}
#parts-ui .mini:hover{color:var(--orange);border-color:var(--orange)}
@media(max-width:760px){#parts-ui .prow{grid-template-columns:1fr 1fr;row-gap:6px}#parts-ui .prow .pb{grid-column:1/-1}}

#parts-ui .vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:900px){#parts-ui .vgrid{grid-template-columns:1fr}}
#parts-ui .vr{background:var(--panel);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);padding:15px 16px}
#parts-ui .vr .vrh{display:flex;align-items:center;gap:10px;margin-bottom:12px}
#parts-ui .vr .vrh b{font-size:14.5px;font-weight:800;letter-spacing:-.015em;flex:1}
#parts-ui .vr .n{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--ink3);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:2px 8px}
#parts-ui .cmp{display:flex;flex-direction:column;gap:9px}
#parts-ui .cmp .row{display:grid;grid-template-columns:96px 1fr 78px;gap:10px;align-items:center;font-size:11.5px;font-weight:700;color:var(--ink2)}
#parts-ui .cmp .row .num{font-family:var(--mono);text-align:right;color:var(--ink)}
#parts-ui .cmp .track{height:9px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
#parts-ui .cmp .track i{display:block;height:100%;border-radius:99px}
#parts-ui .vrf{margin-top:13px;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:center;gap:11px;flex-wrap:wrap}
#parts-ui .vrf .msg{font-size:12px;color:var(--ink2);line-height:1.45;flex:1;min-width:150px}
#parts-ui .vrf .msg b{color:var(--ink);font-weight:700}

#parts-ui .tblwrap{overflow-x:auto}
#parts-ui .tbl{width:100%;border-collapse:collapse;font-size:12.5px}
#parts-ui .tbl th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding:0 10px 9px;border-bottom:1px solid var(--line2);white-space:nowrap}
#parts-ui .tbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
#parts-ui .tbl tr:last-child td{border-bottom:0}
#parts-ui .tbl .nm{font-weight:700}
#parts-ui .tbl .num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
#parts-ui .tbl .dim{color:var(--ink3)}
#parts-ui .tbl .emp{font-family:var(--mono);font-weight:700}
#parts-ui .tbl .sysrow td{background:var(--panel2);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding:7px 10px}
#parts-ui .delta{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap}
#parts-ui .delta.dn{background:var(--red-soft);color:var(--red)}
#parts-ui .delta.up{background:var(--green-soft);color:var(--green)}
#parts-ui .delta.eq{background:var(--panel2);color:var(--ink3);border:1px solid var(--line)}

#parts-ui .tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:980px){#parts-ui .tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#parts-ui .tiers{grid-template-columns:1fr}}
#parts-ui .tier{background:var(--panel);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);padding:14px 15px;display:flex;flex-direction:column;gap:10px}
#parts-ui .tier .th{display:flex;align-items:baseline;gap:8px}
#parts-ui .tier .th b{font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:-.03em}
#parts-ui .tier .th s{text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
#parts-ui .tier ul{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0;padding:0}
#parts-ui .tier li{font-size:12px;color:var(--ink2);line-height:1.4;display:flex;gap:7px}
#parts-ui .tier li:before{content:"";width:5px;height:5px;border-radius:99px;background:var(--line2);flex:0 0 auto;margin-top:6px}
#parts-ui .tier .who{border-top:1px solid var(--line);padding-top:10px;font-size:11.5px;color:var(--ink3);font-weight:600;margin-top:auto}
#parts-ui .tier .who b{color:var(--ink);font-weight:700;font-family:var(--mono)}

#parts-ui .hrow{display:grid;grid-template-columns:88px 1fr 96px 128px 1fr;gap:13px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line);font-size:12.5px}
#parts-ui .hrow:last-child{border-bottom:0}
#parts-ui .hrow .d{font-family:var(--mono);font-size:11.5px;color:var(--ink3)}
#parts-ui .hrow .pn{font-weight:700}
#parts-ui .hrow .num{font-family:var(--mono);font-size:11.5px}
#parts-ui .hrow .dur{font-family:var(--mono);font-size:11.5px;font-weight:700}
#parts-ui .hrow .tl{font-size:11.5px;color:var(--ink3);text-align:right}
@media(max-width:760px){#parts-ui .hrow{grid-template-columns:1fr 1fr;row-gap:5px}#parts-ui .hrow .tl{text-align:left}}

/* Carga inicial: la pantalla donde el jefe llena los km una sola vez */
#parts-ui .brow{display:grid;grid-template-columns:1.3fr 130px 150px 1fr;gap:12px;align-items:center;padding:8px 4px;border-bottom:1px solid var(--line)}
#parts-ui .brow:last-child{border-bottom:0}
#parts-ui .brow .bn{font-weight:700;font-size:12.5px;display:flex;align-items:center;gap:7px}
#parts-ui .brow .bi{font-family:var(--mono);font-size:11px;color:var(--ink3)}
#parts-ui .brow input{font-family:var(--mono);font-size:12.5px;color:var(--ink);background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:7px 9px;outline:none;width:100%}
#parts-ui .brow input:focus{border-color:var(--orange)}
#parts-ui .brow .bs{font-size:11.5px;font-weight:600;color:var(--ink3)}
@media(max-width:760px){#parts-ui .brow{grid-template-columns:1fr 1fr;row-gap:6px}}

/* Cajón lateral de "Registrar cambio" */
#parts-ui .scrim{position:fixed;inset:0;background:rgba(20,18,16,.42);opacity:0;pointer-events:none;transition:opacity .22s;z-index:40}
#parts-ui .scrim.show{opacity:1;pointer-events:auto}
#parts-ui .drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--panel);border-left:1px solid var(--line);box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);z-index:41;display:flex;flex-direction:column}
#parts-ui .drawer.show{transform:translateX(0)}
#parts-ui .dh{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--line);flex:0 0 auto}
#parts-ui .dh b{font-size:16px;font-weight:800;letter-spacing:-.02em;flex:1}
#parts-ui .db{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
#parts-ui .fld{display:flex;flex-direction:column;gap:6px}
#parts-ui .fld label{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
#parts-ui .fld select,#parts-ui .fld input,#parts-ui .fld textarea{font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:10px 11px;outline:none;width:100%}
#parts-ui .fld input.mono,#parts-ui .fld select{font-family:var(--mono)}
#parts-ui .fld select{appearance:none;cursor:pointer}
#parts-ui .fld input:focus,#parts-ui .fld select:focus,#parts-ui .fld textarea:focus{border-color:var(--orange)}
#parts-ui .fld textarea{min-height:70px;resize:vertical;font-family:inherit}
#parts-ui .frow{display:grid;grid-template-columns:1fr 1fr;gap:11px}
#parts-ui .calc{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 13px;display:flex;flex-direction:column;gap:9px}
#parts-ui .calc .ct2{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
#parts-ui .calc .big{display:flex;align-items:baseline;gap:9px}
#parts-ui .calc .big b{font-family:var(--mono);font-size:23px;font-weight:700;letter-spacing:-.03em}
#parts-ui .calc .msg{font-size:12px;color:var(--ink2);line-height:1.5}
#parts-ui .calc .msg b{color:var(--ink)}
#parts-ui .df{flex:0 0 auto;border-top:1px solid var(--line);padding:14px 18px;display:flex;gap:9px;justify-content:flex-end}

/* Base compartida del módulo Repuestos. Cada módulo del admin re-declara la
   suya (el resto vive bajo #inspections-ui, #rewards-ui, …); aquí va la de
   #parts-ui para que no dependa del orden de carga de otra pantalla. */
#parts-ui{color:var(--ink)}
#parts-ui .icon{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
#parts-ui .view{display:none}
#parts-ui .view.on{display:block}
#parts-ui .btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:11px;border:0;background:var(--orange);color:#fff;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 9px 22px rgba(226,85,26,.26)}
#parts-ui .btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line2);box-shadow:none}
#parts-ui .btn:disabled{opacity:.45;cursor:not-allowed}
#parts-ui .phead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:16px}
#parts-ui .phead h1{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1;display:flex;align-items:center;gap:11px;color:var(--ink)}
#parts-ui .phead h1 .ct{font-size:13px;font-weight:800;font-family:var(--mono);background:var(--red-soft);color:var(--red);border-radius:999px;padding:3px 11px}
#parts-ui .phead p{font-size:13px;color:var(--ink2);margin-top:8px;max-width:640px;line-height:1.5}
#parts-ui .phead p b{color:var(--ink);font-weight:700}
#parts-ui .seg{display:inline-flex;background:var(--panel);border:1px solid var(--line2);border-radius:11px;padding:3px;gap:2px;flex-wrap:wrap}
#parts-ui .seg button{height:32px;padding:0 13px;border:0;border-radius:8px;background:transparent;color:var(--ink2);font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
#parts-ui .seg button.on{background:var(--ink);color:#fff}
#parts-ui .seg button .n{font-family:var(--mono);font-size:10.5px;opacity:.8}
#parts-ui .seg button.on .n{opacity:1}
#parts-ui .card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px 20px;margin-bottom:14px}
#parts-ui .card h2{font-size:15px;font-weight:800;display:flex;align-items:center;gap:9px;letter-spacing:-.01em;color:var(--ink)}
#parts-ui .card h2 .icon{color:var(--ink3)}
#parts-ui .cols{display:grid;grid-template-columns:1fr .78fr;gap:14px;align-items:start}
@media(max-width:960px){#parts-ui .cols{grid-template-columns:1fr}}
#parts-ui .kv{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line)}
#parts-ui .kv:last-child{border-bottom:0}
#parts-ui .kv .k{font-size:12.5px;color:var(--ink2);font-weight:600}
#parts-ui .kv .v{font-size:13px;font-weight:700}
#parts-ui .note{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:12px;color:var(--ink2);line-height:1.55;display:flex;gap:9px}
#parts-ui .note svg{width:15px;height:15px;color:var(--ink3);flex:0 0 auto;margin-top:1px}
#parts-ui .note b{color:var(--ink);font-weight:700}
#parts-ui .empty{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);text-align:center;padding:48px 24px}
#parts-ui .empty h3{font-size:16.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
#parts-ui .empty p{font-size:13px;color:var(--ink2);margin-top:5px;max-width:520px;margin-left:auto;margin-right:auto;line-height:1.5}
#parts-ui .st{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}
#parts-ui .st svg{width:13px;height:13px}
#parts-ui .rbtn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:10px;background:var(--panel);border:1.5px solid var(--line2);color:var(--ink2);font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer;transition:.14s;white-space:nowrap}
#parts-ui .rbtn svg{width:14px;height:14px}
#parts-ui .rbtn:hover{color:var(--ink);border-color:var(--ink)}
#parts-ui .rbtn.pri{color:var(--orange);border-color:color-mix(in srgb,var(--orange) 40%,var(--line2))}
#parts-ui .rbtn.pri:hover{background:var(--orange);color:#fff;border-color:var(--orange)}
#parts-ui .back{appearance:none;border:0;background:transparent;color:var(--ink2);font-family:var(--font);font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 0;margin-bottom:10px}
#parts-ui .back:hover{color:var(--ink)}

/* ████████████████████████████████████████████████████████████████████████████
   RESPONSIVE DEL ADMIN — el resto de los paneles  (2026-09-11)

   De dónde sale esto: el jefe pidió poder usar el admin desde el celular. El
   SHELL ya se resolvió (a ≤768px el sidebar se vuelve cajón con velo, línea
   2101; y el Horario ya cambia a su vista de tarjetas, línea 1425). Lo que
   nadie había tocado son los PANELES: había 37 @media repartidos en 16 anchos
   distintos (600, 620, 640, 680, 720, 760, 767, 768, 820, 860, 880, 900, 960,
   980, 1080, 1180) y NINGUNO baja de 600. O sea: a 430px no existía una sola
   regla escrita pensando en ese ancho. Todo lo de abajo de 600 era casualidad.

   EL CANON. No se agrega el número 17. Se declaran TRES líneas, y las tres ya
   existían y ya significaban algo en el proyecto:

     1180px — "tres columnas → dos". Ya la usan #oper-ui .op-stage (apaga el
              feed, línea 2145) y #routes-ui .lanes (el reloj se baja, 2310).
     900px  — "dos columnas → una". Es la línea que documentó Tripulantes en
              rc-auxiliar.css:1024 ("cinco datos no caben en 360px sin letra de
              9 puntos") y la que usa .pc .md (línea 486).
     768px  — LA línea del teléfono. Es el md: de Tailwind, es donde el sidebar
              se vuelve cajón y donde el Horario ya se cambia por tarjetas. Si
              el shell decidió que ahí empieza el celular, los paneles no pueden
              decidir otra cosa cada uno por su lado.

   Los otros 13 números no se borran hoy (hay otra mano en este archivo), pero
   quedan como deuda: cada uno hace "N columnas → menos columnas" a pocos px de
   alguna de las tres. 1080→1180 · 980/960→1180 · 880/860/820→900 ·
   760/720/680/640/620/600/767→768. Nadie va a notar la diferencia.

   Y un cuarto caso que NO lleva media query: los teléfonos chiquitos (≤380px,
   el SE y los Android baratos). Ahí no se agrega un breakpoint — se arregla con
   minmax(0,1fr), flex-wrap y min-width:0, que funcionan en cualquier ancho.

   CERO cambios de marcado. Ni una clase nueva, ni un id nuevo: todo cuelga de
   selectores que ya existen, verificados contra el CSS y contra el JS que los
   pinta. Y CERO colores nuevos: todo sale de los tokens del panel
   (var(--panel), var(--line)…), que es lo único que sobrevive al modo oscuro —
   la lección que rc-auxiliar.css dejó escrita en su línea 72.
   ████████████████████████████████████████████████████████████████████████████ */


/* ────────────────────────────────────────────────────────────────────────────
   PATRÓN C · Barra de herramientas con carril propio
   ────────────────────────────────────────────────────────────────────────────
   El problema: las barras de filtros tienen entre 4 y 5 botones y todas traen
   flex-wrap:wrap. En un teléfono eso no las salva, las parte en tres renglones
   y empuja la lista —que es lo que el jefe vino a ver— fuera de la pantalla.
   Un carril horizontal ocupa UN renglón siempre, sin importar cuántos filtros
   se agreguen mañana.

   El truco de esconder la barra de scroll ya está en el proyecto
   (#schedule-mobile .strip, línea 1451): se copia de ahí, no se inventa.
   La máscara del borde derecho es lo que dice "hay más a la derecha"; es una
   máscara, no un color, así que no hay nada que ajustar en oscuro.           */
@media (max-width: 768px) {

  /* C.1 — Carriles que sangran hasta el borde de la pantalla.
     Son los de fichas sueltas (sin caja alrededor): se ven bien tocando el
     borde y así el primer chip no arranca con 16px de aire perdido.
     El -16px es exactamente el px-4 de #app-main (index.html:283). */
  #rv-ui .rv-bar,
  #rv-ui .rv-days,
  #evt-ui .evt-bar,
  #routes-ui .daystat,
  #app-main #tripulantes-ui .tp-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  }
  #rv-ui .rv-bar::-webkit-scrollbar,
  #rv-ui .rv-days::-webkit-scrollbar,
  #evt-ui .evt-bar::-webkit-scrollbar,
  #routes-ui .daystat::-webkit-scrollbar,
  #app-main #tripulantes-ui .tp-filters::-webkit-scrollbar { display: none; }

  /* Los hijos no se pueden encoger: si se encogen, el texto del filtro se parte
     en dos renglones y el botón crece hacia abajo — que es justo lo que se
     estaba tratando de evitar. */
  #rv-ui .rv-bar > *,
  #rv-ui .rv-days > *,
  #evt-ui .evt-bar > *,
  #routes-ui .daystat > *,
  #app-main #tripulantes-ui .tp-filters > * { flex: 0 0 auto; white-space: nowrap; }

  /* C.2 — Carriles DENTRO de una caja con borde (.seg y compañía).
     Acá no se sangra: la caja tiene borde visible y cortarlo se ve roto.
     Se cambia inline-flex por flex para que la caja ocupe el ancho completo y
     el scroll pase por dentro. */
  #inspections-ui .seg,
  #parts-ui .seg,
  #solic-ui .sol-seg,
  #avail-ui .av-seg {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  #inspections-ui .seg::-webkit-scrollbar,
  #parts-ui .seg::-webkit-scrollbar,
  #solic-ui .sol-seg::-webkit-scrollbar,
  #avail-ui .av-seg::-webkit-scrollbar { display: none; }

  #inspections-ui .seg button,
  #parts-ui .seg button,
  #solic-ui .sol-seg button,
  #avail-ui .av-seg button { flex: 0 0 auto; white-space: nowrap; }

  /* El .seg de Inspecciones y el de Repuestos viven dentro de un contenedor
     flex con otros botones; sin esto se niegan a encogerse y desbordan. */
  #inspections-ui .phead > div,
  #parts-ui .phead > div { min-width: 0; max-width: 100%; }
}


/* ────────────────────────────────────────────────────────────────────────────
   PATRÓN B · Rejilla fija → una columna
   ────────────────────────────────────────────────────────────────────────────
   Todo grid con anchos en píxeles o con 2+ fracciones se vuelve una columna en
   el teléfono. La regla de oro: si una columna termina con menos de ~150px,
   no es una columna, es un accidente.                                        */
@media (max-width: 768px) {

  /* Personal · el detalle venía partido en dos y a 343px cada mitad quedaba en
     131px de contenido: el número de 28px de "carga de la semana" no cabía al
     lado de su barra. (styles.css:472) */
  .pc .dbody { grid-template-columns: 1fr; }
  .pc .breakdown { gap: 14px; flex-wrap: wrap; }

  /* Repuestos · la fila de comparación era 96px | barra | 78px = 174px fijos.
     En 303px útiles a la barra le quedaban 129px, que no alcanzan para leer una
     diferencia. Ahora el rótulo y el número comparten renglón y la barra se
     lleva el ancho completo abajo. Los tres hijos están en
     admin-repuestos.js:463 (span · span.track · span.num). */
  #parts-ui .cmp .row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  #parts-ui .cmp .row .track { grid-column: 1 / -1; grid-row: 2; }
  #parts-ui .cmp .row .num { grid-column: 2; grid-row: 1; }

  #parts-ui .frow { grid-template-columns: 1fr; }

  /* Repuestos · la fila de pendientes por confirmar trae el grid ESCRITO A MANO
     en el atributo style (admin-repuestos.js:119), así que se salta el @media
     de la línea 3122 sin despeinarse. Es el único !important del bloque y está
     acá por eso, no por pereza. */
  #parts-ui .qrow { grid-template-columns: 1fr !important; gap: 11px; }
  #parts-ui .qa { justify-content: stretch; }
  #parts-ui .qa .rbtn { flex: 1 1 0; justify-content: center; }

  /* Inspecciones · tres fotos a lo ancho daban 107px cada una: no se distingue
     un rayón de una sombra. Con dos quedan en ~160px. */
  #inspections-ui .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Recompensas · era 42px | info | controles, y los controles (etiqueta de
     54px + switch + dos botones) se comían 160px. Al título le quedaban 113px. */
  #rewards-ui .rwd { grid-template-columns: 42px minmax(0, 1fr); row-gap: 10px; }
  #rewards-ui .rwd .rctl { grid-column: 1 / -1; justify-content: flex-end; }

  /* Solicitudes · ya estaba resuelto a 640px (línea 1059). Se sube a la línea
     del canon para que entre la franja de 641–768 (tablet en vertical), donde
     hoy se ve la fila de cuatro columnas apretada. */
  #solic-ui .sol-req { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  #solic-ui .sol-senior { grid-column: 2; justify-self: start; }
  #solic-ui .sol-ractions { grid-column: 1 / -1; justify-content: flex-end; }
  #solic-ui .sol-ghead { gap: 9px; }
  #solic-ui .sol-gtag { margin-left: 0; }

  /* Lo mismo con Inspecciones (680) y Recompensas (760): la tarjeta de una
     inspección y la fila de un canje ya sabían apilarse, solo que tarde. */
  #inspections-ui .icard { grid-template-columns: 42px minmax(0, 1fr); }
  #inspections-ui .icard .right { grid-column: 1 / -1; align-items: stretch; }
  #inspections-ui .chips,
  #inspections-ui .qactions { justify-content: flex-start; }
  #inspections-ui .qactions .rbtn { flex: 1 1 0; justify-content: center; }

  #rewards-ui .grid2 { grid-template-columns: 1fr; }
  #rewards-ui .redrow { grid-template-columns: 38px minmax(0, 1fr); row-gap: 10px; }
  #rewards-ui .redrow .kmtag { grid-column: 2; justify-self: start; }
  #rewards-ui .redrow .ractions { grid-column: 1 / -1; justify-content: flex-end; }

  /* Reservas · la fila ya envolvía a 640 (línea 1298). Le faltaba que la hora
     dejara de reservar 64px a la izquierda cuando queda sola en su renglón. */
  #rv-ui .rv-row { flex-wrap: wrap; gap: 12px; }
  #rv-ui .rv-when { min-width: 0; text-align: left; display: flex; align-items: baseline; gap: 8px; }
  #rv-ui .rv-when span { margin-top: 0; }
  #rv-ui .rv-main { flex: 1 1 100%; }
  #rv-ui .rv-acts { width: 100%; justify-content: flex-end; }

  /* Eventualidades · el cuerpo abierto tenía 61px de sangría a la izquierda
     para alinearse con el ícono; en el teléfono eso es el 18% del ancho. */
  #evt-ui .evt-body { padding-left: 16px; }
  #evt-ui .evt-actions .evt-btn { flex: 1 1 calc(50% - 5px); }
  #evt-ui .evt-kv { gap: 10px 18px; }

  /* Turnos activos · la fila es un flex sin wrap: el "Forzar cierre"
     (admin-turnos-activos.js:101) se aplastaba contra el texto. Ahora el botón
     baja y ocupa el ancho: es la única acción del panel, merece el renglón. */
  #shifts-ui .shift-row { flex-wrap: wrap; gap: 10px; }
  #shifts-ui .shift-main { flex: 1 1 100%; }
  #shifts-ui .shift-row .set-btn { width: 100%; justify-content: center; }

  /* Consola · el hub ya bajaba a una columna a 620px, pero el .mscroll seguía
     poniendo 22px de padding propio ENCIMA de los 16px de #app-main: 76px de
     los 375 de la pantalla eran aire. */
  #consola-ui .mscroll { padding: 14px 0 40px; }
  #consola-ui .cards { grid-template-columns: 1fr; }
  #consola-ui .whead h1 { font-size: 24px; }
}


/* ────────────────────────────────────────────────────────────────────────────
   PATRÓN A · Tabla ancha → ficha apilada
   ────────────────────────────────────────────────────────────────────────────
   Hay dos tablas de verdad en el admin y NO se arreglan igual, porque no se
   leen igual:

   · Balance se lee POR PERSONA (¿cuántas horas hizo Fulano?). Cada fila se
     vuelve una ficha y el encabezado de la columna se repite adentro como
     rótulo. Se hace con ::before + nth-child porque la tabla la escribe el JS
     y no emite data-label; el texto de cada rótulo es palabra por palabra el
     mismo <th> de admin-balance.js:121. Si algún día se cambia el ORDEN de esas
     columnas hay que cambiar este bloque también — queda avisado acá y no en un
     ticket que nadie va a leer.

   · Disponibilidad se lee POR SEMANA (¿quién descansa el jueves?). Apilarla
     sería destruirla: la gracia es ver los siete días de corrido. Ahí lo que se
     arregla es el carril: la columna del nombre pesaba 200px de los 343
     disponibles — el 58% de la pantalla para una cosa que ni siquiera se lee,
     se reconoce.                                                             */
@media (max-width: 768px) {

  /* A.1 — Balance: cada persona, una ficha. */
  #balance-ui .bal-report { border-radius: 14px; }
  #balance-ui .bal-rhead { flex-wrap: wrap; row-gap: 4px; }
  #balance-ui .bal-rhead .period { margin-left: 0; flex: 1 1 100%; font-size: 11px; }

  #balance-ui table.bal-bt,
  #balance-ui .bal-bt thead,
  #balance-ui .bal-bt tbody,
  #balance-ui .bal-bt tfoot,
  #balance-ui .bal-bt tr,
  #balance-ui .bal-bt td { display: block; width: auto; }
  /* El <thead> no se borra, se esconde a la vista: el lector de pantalla lo
     sigue leyendo. Es el mismo truco de .sr-only que ya usa el index. */
  #balance-ui .bal-bt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  #balance-ui .bal-bt tbody tr {
    border-bottom: 1px solid var(--line);
    padding: 12px 16px 14px;
  }
  #balance-ui .bal-bt tbody tr:last-child { border-bottom: 0; }
  #balance-ui .bal-bt tbody td { border-bottom: 0; padding: 0; }

  /* La primera celda es la persona: va sola arriba, sin rótulo. */
  #balance-ui .bal-bt tbody td:first-child { margin-bottom: 10px; }
  #balance-ui .bal-bt .person b,
  #balance-ui .bal-bt .person span { white-space: normal; }

  /* Las otras cinco: rótulo a la izquierda, dato a la derecha. */
  #balance-ui .bal-bt tbody td + td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-top: 1px dashed var(--line);
  }
  #balance-ui .bal-bt tbody td + td::before {
    content: "";
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink3);
    flex: 0 0 auto;
  }
  /* Los rótulos, en el mismo orden que los <th> de admin-balance.js:121. */
  #balance-ui .bal-bt tbody td:nth-child(2)::before { content: "Turnos"; }
  #balance-ui .bal-bt tbody td:nth-child(3)::before { content: "Horas reales"; }
  #balance-ui .bal-bt tbody td:nth-child(4)::before { content: "Auto-cerrados"; }
  #balance-ui .bal-bt tbody td:nth-child(5)::before { content: "Arranques falsos"; }
  #balance-ui .bal-bt tbody td:nth-child(6)::before { content: "En curso"; }

  /* La barra de horas ya no compite con nada: se lleva el resto del renglón. */
  #balance-ui .bal-hrs { flex: 1 1 auto; }
  #balance-ui .bal-hrs .bar { width: auto; flex: 1 1 auto; min-width: 40px; }

  /* El total deja de ser un pie de tabla y se vuelve el resumen de abajo. */
  #balance-ui .bal-bt tfoot tr {
    border-top: 2px solid var(--line);
    background: var(--panel2);
    padding: 12px 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 14px;
  }
  #balance-ui .bal-bt tfoot td { padding: 0; border: 0; font-size: 12.5px; }
  #balance-ui .bal-bt tfoot td:first-child { grid-column: 1 / -1; }
  #balance-ui .bal-bt tfoot td + td { display: flex; justify-content: space-between; gap: 8px; }
  #balance-ui .bal-bt tfoot td + td::before {
    content: "";
    font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ink3);
  }
  #balance-ui .bal-bt tfoot td:nth-child(2)::before { content: "Turnos"; }
  #balance-ui .bal-bt tfoot td:nth-child(3)::before { content: "Horas"; }
  #balance-ui .bal-bt tfoot td:nth-child(4)::before { content: "Auto"; }
  #balance-ui .bal-bt tfoot td:nth-child(5)::before { content: "Falsos"; }
  #balance-ui .bal-bt tfoot td:nth-child(6)::before { content: "En curso"; }

  /* Los controles de fecha: dos campos que se reparten el renglón y los botones
     de ancho completo, que es lo que se toca con el pulgar. */
  #balance-ui .bal-controls { padding: 14px; gap: 10px; }
  #balance-ui .bal-controls .rl-field { flex: 1 1 140px; min-width: 0; }
  #balance-ui .bal-controls .rl-input { width: 100%; }
  #balance-ui .bal-controls .rl-spacer { display: none; }
  #balance-ui .bal-controls .rl-btn { flex: 1 1 100%; justify-content: center; }
  #balance-ui .bal-scard { flex: 1 1 calc(50% - 6px); min-width: 0; }

  /* A.2 — Disponibilidad: la tabla se queda tabla, pero se la puede recorrer.
     El ancho real son 200px de nombre + 7 días × 100px = 900px. Lo que estaba
     mal no era el scroll (ya existía, .av-board tiene overflow:auto), era que
     la columna pegajosa del nombre se quedara con 200 de los 343. */
  #avail-ui .av-tbl thead th.namehead,
  #avail-ui .av-tbl tbody .name { min-width: 116px; padding-left: 12px; padding-right: 10px; }
  #avail-ui .covrow .namehead2 { padding-left: 12px; padding-right: 10px; }
  #avail-ui .av-avt { display: none; }          /* el avatar es adorno; el nombre no */
  #avail-ui .person b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #avail-ui .person span { display: none; }      /* el correo no se lee en un carril */
  #avail-ui .av-board { border-radius: 14px; -webkit-overflow-scrolling: touch; }

  /* La cabecera de la semana y los resúmenes, que también se apretaban. */
  #avail-ui .av-summary { gap: 8px; }
  #avail-ui .av-scard { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 11px 12px; gap: 10px; }
  #avail-ui .av-scard .ic { width: 32px; height: 32px; }
  #avail-ui .av-scard .n { font-size: 20px; }
  #avail-ui .av-phead { align-items: flex-start; }
  #avail-ui .av-weeknav { width: 100%; justify-content: space-between; }
  #avail-ui .av-weeknav .wk { min-width: 0; flex: 1; }
  #avail-ui .av-toolbar { gap: 9px; }
  #avail-ui .av-search { flex: 1 1 100%; min-width: 0; }
  #avail-ui .av-legend { gap: 10px 14px; font-size: 11.5px; }
  #avail-ui .av-legend .hint { margin-left: 0; flex: 1 1 100%; }

  /* Repuestos ya trae su envoltorio de scroll (.tblwrap, línea 3195): lo único
     que le faltaba era decir que se puede arrastrar con el dedo. */
  #parts-ui .tblwrap { -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
}


/* ────────────────────────────────────────────────────────────────────────────
   PATRÓN D · Modal → hoja inferior (bottom sheet)
   ────────────────────────────────────────────────────────────────────────────
   Un modal centrado en un teléfono deja el botón de confirmar a media pantalla,
   justo donde el pulgar no llega, y si el contenido crece el modal se sale por
   arriba. La hoja inferior es el gesto que el conductor ya conoce (.rc-sheet,
   rc-conductor.css:175) y el que ya usa el wizard de reportes
   (#driver-ruta-ui .dr-rcard). Se le da la misma forma a lo del admin en vez de
   inventar una tercera manera de hacer lo mismo.                             */
@media (max-width: 768px) {

  /* D.1 — El modal genérico (historial de strikes, línea 320). */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-card {
    max-width: none;
    max-height: 88dvh;
    border-radius: 22px 22px 0 0;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .28);
  }
  .modal-actions { gap: 10px; }
  .modal-actions .wk-btn { flex: 1 1 0; }
  .strike-item { flex-wrap: wrap; }

  /* D.2 — El cajón de "Registrar cambio" de Repuestos (línea 3236) entraba
     desde la derecha ocupando toda la pantalla: se veía como si la app se
     hubiera cambiado de página. Entrando desde abajo se lee como lo que es,
     un formulario encima de lo que estaba mirando. */
  #parts-ui .drawer {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; max-height: 90dvh;
    border-left: 0;
    border-top: 1px solid var(--line);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }
  #parts-ui .drawer.show { transform: translateY(0); }
  #parts-ui .df { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  #parts-ui .df .btn { flex: 1 1 0; justify-content: center; }

  /* D.3 — El cajón de asignar conductor de Rutas (bloque #routes-ui, .drawer). */
  #routes-ui .drawer {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; max-height: 88dvh;
    border-left: 0;
    border-top: 1px solid var(--line);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }
  #routes-ui .drawer.show { transform: translateY(0); }
  #routes-ui .dr-f { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

  /* D.4 — La previsualización del trayecto (mapa OSRM). El padding de 24px del
     velo dejaba el mapa en 295px de ancho. */
  #routes-ui .mapovl { padding: 0; align-items: flex-end; }
  #routes-ui .mapbox { width: 100%; max-height: 92dvh; border-radius: 18px 18px 0 0; }
  #routes-ui #rt-mapCanvas { height: min(58dvh, 420px); }

  /* D.5 — El visor de fotos de Inspecciones: 24px de padding × 2 sobre 375
     dejaban la foto en 327px. La foto de una novedad es la prueba; que use la
     pantalla completa. */
  .insp-lbx { padding: 10px; }
  .insp-lbx img { max-width: 100%; max-height: 78dvh; }
  .insp-lbx .x { top: 12px; right: 12px; }
}


/* ────────────────────────────────────────────────────────────────────────────
   BLANCOS DE TOQUE · 44px
   ────────────────────────────────────────────────────────────────────────────
   Los botones de ícono del admin se diseñaron para el mouse: 30, 32, 34, 36px.
   En el teléfono, 44px es el mínimo que Apple y Google llevan diez años
   pidiendo, y no es capricho: el slot de Disponibilidad mide 34px de alto y es
   LA única cosa que se toca en ese panel. Fallar el toque ahí significa
   cambiarle el descanso a la persona equivocada.                             */
@media (max-width: 768px) {
  #avail-ui .av-slot { width: 46px; height: 44px; }
  #avail-ui .av-weeknav button,
  #routes-ui .daypick .nav,
  #inspections-ui .cfgbtn,
  #rewards-ui .cfgbtn,
  #parts-ui .mini,
  #rv-ui .rv-ic,
  .set-ui .veh-del { width: 44px; height: 44px; }
  #rewards-ui .tg,
  #inspections-ui .tg { transform: scale(1.1); transform-origin: right center; }

  /* Los botones de texto suben a 44 de alto sin engordar de más el diseño. */
  #rv-ui .rv-fbtn,
  #evt-ui .evt-bar button,
  #inspections-ui .seg button,
  #parts-ui .seg button,
  #solic-ui .sol-seg button,
  #avail-ui .av-seg button,
  #app-main #tripulantes-ui .tp-filters button { min-height: 40px; }
  #inspections-ui .rbtn,
  #parts-ui .rbtn,
  #rewards-ui .rbtn,
  #solic-ui .sol-rbtn { height: 42px; }
}


/* ────────────────────────────────────────────────────────────────────────────
   OLA 1 · Los paneles que se miran a las 4 de la mañana desde la calle
   ────────────────────────────────────────────────────────────────────────────
   Operación en vivo y Eventualidades no son pantallas de consulta: son la
   pantalla que alguien abre parado en un andén porque un carro no llegó. Estos
   dos son los que de verdad tienen que funcionar en un teléfono; el resto puede
   conformarse con no romperse.                                               */
@media (max-width: 768px) {

  /* ── Operación en vivo ──────────────────────────────────────────────────
     Dos cosas estaban mal, y la segunda es la peor:

     1) La barra de arriba es flex sin wrap y con height:46px fijo (línea 2134).
        El título + la píldora "En vivo" + el reloj + el aviso de la API key
        suman más de 600px: el aviso se aplastaba y quedaba cortado por la
        altura fija.

     2) El panel mide calc(100dvh - 104px), pero #app-main trae pb-24 en móvil
        (96px, index.html:283) además de sus 20px de arriba. 104 no alcanzaba a
        cubrir 56 del breadcrumb + 20 + 96: la página entera quedaba con scroll
        propio PELEÁNDOSE con el gesto de arrastrar el mapa. Se mueve un dedo y
        no se sabe si se movió el mapa o la página. 210 es la cuenta correcta. */
  #oper-ui { height: calc(100dvh - 210px); min-height: 420px; margin: 0; }
  #oper-ui .op-top { height: auto; flex-wrap: wrap; row-gap: 8px; gap: 10px; padding: 0 0 10px; }
  #oper-ui .op-top h1 { font-size: 17px; }
  #oper-ui .op-spacer { display: none; }
  #oper-ui .op-clock { margin-left: auto; }
  #oper-ui .op-stub { flex: 1 1 100%; font-size: 10.5px; line-height: 1.35; }

  /* La lista de carros arriba, el mapa abajo. 38% de la altura es media
     pantalla de tarjetas: suficiente para ver dos carros y decidir. */
  #oper-ui .op-stage { border-radius: 14px; }
  #oper-ui .op-kpis { gap: 6px; }
  #oper-ui .op-kpi { padding: 7px 6px; }
  #oper-ui .op-kpi b { font-size: 16px; }

  /* La alerta de atraso — la regla #1 del panel. Sus tres acciones se partían
     en 2+1 y la tercera quedaba suelta a la derecha. Una debajo de otra, de
     ancho completo: se toca sin mirar. */
  /* La animación de entrada se apaga a propósito: su keyframe (op-drop) lleva
     translateX(-50%) quemado y pelearía con el transform:none de acá — la
     alerta entraría corrida media pantalla a la izquierda. */
  #oper-ui .op-delay { left: 8px; right: 8px; top: 8px; transform: none; width: auto; }
  #oper-ui .op-delay.show { animation: none; }
  #oper-ui .op-delay-acts { flex-direction: column; gap: 7px; }
  #oper-ui .op-dact { width: 100%; min-width: 0; }

  /* La leyenda flotaba sobre la esquina del mapa y en pantalla chica tapaba
     carros. Se vuelve una tira horizontal pegada abajo. */
  #oper-ui .op-legend {
    right: 8px; left: 8px; bottom: 8px;
    flex-direction: row; justify-content: space-around;
    gap: 4px; padding: 7px 8px;
  }
  #oper-ui .op-li { font-size: 10px; }

  /* ── Eventualidades ─────────────────────────────────────────────────────
     El panel ya tenía reglas a 720 (línea 2952). Lo que le faltaba: el botón
     de refrescar del encabezado, que se quedaba arrinconado a la derecha con
     el texto partido, y la descripción larga de la novedad, que es lo que
     realmente se viene a leer. */
  #evt-ui .sh-phead { gap: 12px; }
  #evt-ui .sh-phead h1 { font-size: 22px; }
  #evt-ui .sh-phead p { font-size: 12.5px; }
  #evt-ui .sh-phead .set-btn { width: 100%; justify-content: center; }
  #evt-ui .evt-head { padding: 13px 14px; gap: 11px; }
  #evt-ui .evt-desc { font-size: 14.5px; }
  #evt-ui .evt-health,
  #evt-ui .evt-unack { align-items: flex-start; font-size: 12.5px; line-height: 1.4; }

  /* ── Reservas, Privados y Turnos activos ────────────────────────────────
     Los tres comparten el encabezado .sh-phead y el mismo problema: el botón
     de la derecha peleando el renglón con un párrafo de tres líneas. */
  #rv-ui .sh-phead,
  #shifts-ui .sh-phead,
  #app-main #tripulantes-ui .sh-phead { gap: 12px; }
  #rv-ui .sh-phead h1,
  #shifts-ui .sh-phead h1,
  #app-main #tripulantes-ui .sh-phead h1 { font-size: 22px; }
  #rv-ui .sh-phead > .set-btn,
  #shifts-ui .sh-phead > .set-btn { width: 100%; justify-content: center; }
  #app-main #tripulantes-ui .tp-acts { width: 100%; }
  #app-main #tripulantes-ui .tp-acts .set-btn { flex: 1 1 0; justify-content: center; }

  /* Privados se queda a medias A PROPÓSITO: su .sh-phead y su .set-btn no
     tienen estilos en NINGÚN css (ni styles.css ni rc-auxiliar.css), así que su
     encabezado es un <h1> por defecto de 32px y su botón el gris del navegador.
     Eso es un bug viejo, no un problema de responsive, y meterle el diseño acá
     de contrabando sería arreglar otra cosa en el parche equivocado. Va en
     'dudas'. Lo de abajo sí sirve porque .pv-card y .pv-acts sí existen. */
  #app-main #privados-ui .pv-top { flex-wrap: wrap; }
  #app-main #privados-ui .pv-meta { gap: 8px 16px; }
  #app-main #privados-ui .pv-acts,
  #app-main #privados-ui .pv-rej-acts { flex-wrap: wrap; }
  #app-main #privados-ui .pv-acts .set-btn,
  #app-main #privados-ui .pv-rej-acts .set-btn { flex: 1 1 calc(50% - 5px); justify-content: center; }
}


/* ────────────────────────────────────────────────────────────────────────────
   OLA 3 · Lo que se hace sentado — que al menos no se rompa
   ────────────────────────────────────────────────────────────────────────────
   Balance, Disponibilidad, Personal, Horario y Rutas se hacen en un escritorio
   con café al lado, no en la calle. Acá no se está rediseñando nada: se está
   evitando el desborde horizontal, que es lo que hace que la app entera se vea
   rota aunque el panel que se rompe no sea el que se está usando.            */
@media (max-width: 768px) {

  /* Rutas · ESTE era el desborde grande. .stage es 300px de pool + 1fr de
     tablero SIEMPRE (línea 1617): no hay ni un @media que lo toque. En 343px
     útiles, al tablero le quedaban 43px. Cuarenta y tres. Dentro de esos 43
     vive .seq, que tiene paradas de 158px con scroll horizontal propio.
     Ahora el pool es una franja de arriba y el tablero se lleva el resto.

     OJO: acá NO se está arreglando el panel, se está arreglando que se pueda
     LEER el plan del día desde un teléfono. Asignar sigue siendo imposible con
     el dedo y eso no lo arregla ningún CSS — ver 'dudas'. Por eso no se toca el
     texto "Arrastra un auxiliar a un carro": esa frase tiene que cambiar cuando
     se decida qué se hace, y cambiarla ahora sería tapar el hueco. */
  #routes-ui { height: calc(100dvh - 210px); min-height: 420px; }
  #routes-ui .sub { padding: 11px 12px; gap: 10px; }
  #routes-ui .sub h1 { font-size: 17px; flex: 1 1 100%; }
  #routes-ui .sub .spacer { display: none; }
  #routes-ui .daypick { flex: 1 1 100%; justify-content: space-between; }
  #routes-ui .daypick b { flex: 1; min-width: 0; }
  #routes-ui .sub .btn { flex: 1 1 0; justify-content: center; }
  #routes-ui .alert { padding: 10px 12px; flex-wrap: wrap; row-gap: 8px; }
  #routes-ui .alert .fix { margin-left: 0; }

  #routes-ui .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  #routes-ui .pool { border-right: 0; border-bottom: 1px solid var(--line); max-height: 32dvh; }
  #routes-ui .pool-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 10px; }
  #routes-ui .pool-list .aux { flex: 0 0 220px; }
  #routes-ui .lanes { padding: 12px; gap: 12px; }
  #routes-ui .lane-h { flex-wrap: wrap; gap: 10px; padding: 12px; }
  #routes-ui .car { min-width: 0; flex: 1 1 100%; }
  #routes-ui .sema { margin-left: 0; flex: 1 1 100%; justify-content: space-between; }
  #routes-ui .assignbtn { width: 100%; justify-content: center; }
  #routes-ui .clockpanel { padding: 12px 10px 4px; }
  #routes-ui .clock-legend { gap: 8px; }
  #routes-ui .clock-legend .lg { font-size: 10.5px; }
  #routes-ui .cc-h { padding: 11px 12px; }
  #routes-ui .triprow { padding: 10px 12px; gap: 8px; }
  #routes-ui .triprow .tr-info { display: none; }   /* no cabe y se cortaba a mitad de palabra */
  #routes-ui .ovl .box { width: min(340px, calc(100vw - 32px)); padding: 26px 22px; }

  /* Horario · en celular ya se ve #schedule-mobile (línea 1425), así que acá
     solo queda el resumen que cuelga debajo del tablero y que nadie escondió. */
  #worker-summary { font-size: 12.5px; }

  /* Personal · la lista maestra arriba y el detalle abajo (regla de la línea
     486). Con 20 personas eso son 20 filas antes de llegar al detalle, así que
     la lista se le pone techo y scroll propio. */
  .pc .mdlist { max-height: 46dvh; overflow-y: auto; }
  .pc .dhead { padding: 16px; gap: 12px; }
  .pc .dhead .av { width: 48px; height: 48px; font-size: 16px; }
  .pc .dhead h2 { font-size: 18px; }
  .pc .dactions { padding: 12px 14px; }
  .pc .dactions .spacer { display: none; }
  .pc .pc-btn { flex: 1 1 calc(50% - 5px); justify-content: center; }
}


/* ────────────────────────────────────────────────────────────────────────────
   RED DE SEGURIDAD · que ningún panel empuje la página a lo ancho
   ────────────────────────────────────────────────────────────────────────────
   html,body ya tienen overflow-x:hidden (línea 2318), pero eso ESCONDE el
   desborde, no lo arregla: el contenido sigue estando fuera y no se alcanza.
   Esto es lo contrario — obliga a cada panel a caber. Va al final del archivo a
   propósito: es la última palabra.                                           */
@media (max-width: 768px) {
  #app-main > section[data-panel] { min-width: 0; max-width: 100%; }
  #app-main > section[data-panel] > div { min-width: 0; max-width: 100%; }

  /* Los encabezados de panel (h1 + párrafo + botón) comparten forma en ocho
     paneles distintos. Se les baja el tamaño una vez, acá, y no ocho veces. */
  #inspections-ui .phead h1,
  #parts-ui .phead h1,
  #balance-ui .rl-phead h1,
  #avail-ui .rl-phead h1,
  #solic-ui .rl-phead h1 { font-size: 22px; }
  #inspections-ui .phead p,
  #parts-ui .phead p,
  #balance-ui .rl-phead p,
  #avail-ui .rl-phead p,
  #solic-ui .rl-phead p { font-size: 12.5px; }
  #inspections-ui .phead,
  #parts-ui .phead { gap: 12px; }
  #parts-ui .phead > div:last-child,
  #inspections-ui .phead > div:last-child { width: 100%; }
  #parts-ui .phead .btn,
  #inspections-ui .phead .btn { flex: 1 1 0; justify-content: center; }
  #parts-ui .rule1 { flex-wrap: wrap; padding: 12px 13px; }
  #parts-ui .sech { margin: 20px 0 10px; flex-wrap: wrap; }
  #parts-ui .sech .hint { flex: 1 1 100%; }
}