:root{
  --bg:#f5f7fa;--white:#fff;--border:#e4e7ec;
  --text:#101828;--muted:#667085;--small:#8a94a6;
  --primary:#101828;--primary-fg:#fff;
  --green:#027a48;--green-bg:#ecfdf3;
  --yellow:#b54708;--yellow-bg:#fffaeb;
  --blue:#175cd3;--blue-bg:#eff8ff;
  --red:#b42318;--red-bg:#fef3f2;
  --gray-bg:#f2f4f7;
  --brand:#CA0008; --brand-dim:#8F0006;
  --display:'Inter',system-ui,sans-serif; --mono:'IBM Plex Mono', monospace;
  font-family:Inter,system-ui,-apple-system,sans-serif;
  color:var(--text);background:var(--bg);
}
/* ── TEMA CORPORATIVO S&T CAPITAL GROUP — solo panel de administración y login ──
   Colores extraídos directamente del logo (navy + rojo de marca), no inventados.
   El rojo queda RESERVADO para alertas reales (algo necesita atención) — las
   acciones normales (botones, navegación) usan un tono neutro, para que el rojo
   nunca se sienta como "algo está mal" cuando en realidad todo va bien.
   La app del conductor conserva su propio diseño (pensado para uso en campo),
   así que estas variables se sobrescriben solo dentro de .shell y .login. ── */
.shell,.login{
  --bg:#0A1220; --ink-2:#0F1B2E; --white:#131F33; --border:#233047;
  --text:#EEF1F6; --muted:#98A2B3; --small:#5C6B85;
  --primary:#F3F5F9; --primary-fg:#0A1220;
  --green:#4FA97A; --green-bg:rgba(79,169,122,.14);
  --yellow:#D2A24C; --yellow-bg:rgba(210,162,76,.14);
  --blue:#6E93C4; --blue-bg:rgba(110,147,196,.14);
  --red:#CA0008; --red-bg:rgba(202,0,8,.16);
  --gray-bg:rgba(255,255,255,.06);
  --nav-hover-bg:rgba(255,255,255,.08);
  color:var(--text);
  background:var(--bg);
  background-attachment:fixed;
  min-height:100vh;min-height:100dvh;
}
/* ── MODO CLARO — mismo negocio, mismos colores de marca, fondo claro ── */
body.light-theme .shell,body.light-theme .login{
  --bg:#F3F5F9; --ink-2:#fff; --white:#fff; --border:#E1E5EC;
  --text:#101B2D; --muted:#5B6478; --small:#8A93A6;
  --primary:#101B2D; --primary-fg:#fff;
  --green:#0F7A4B; --green-bg:rgba(15,122,75,.09);
  --yellow:#92400E; --yellow-bg:rgba(146,64,14,.09);
  --blue:#1D4E89; --blue-bg:rgba(29,78,137,.09);
  --red:#CA0008; --red-bg:rgba(202,0,8,.08);
  --gray-bg:rgba(16,27,45,.05);
  --nav-hover-bg:rgba(16,27,45,.06);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;max-width:100%;overflow-x:hidden}
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{width:100%;padding:12px 14px;border:1.5px solid var(--border);
  border-radius:10px;background:var(--ink-2,var(--white));color:var(--text);outline:none;transition:border .15s}
input::placeholder,textarea::placeholder{color:var(--small)}
input:focus,select:focus,textarea:focus{border-color:var(--primary)}
textarea{min-height:90px;resize:vertical}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:10px;padding:14px 20px;font-weight:700;cursor:pointer;
  font-size:15px;min-height:52px;transition:opacity .15s,transform .1s,filter .15s;width:100%}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--primary);color:var(--primary-fg)}
.btn.primary:hover{filter:brightness(1.1)}
.shell .btn.secondary,.login .btn.secondary{background:transparent;color:var(--text);border:1.5px solid var(--border)}
.shell .btn.secondary:hover,.login .btn.secondary:hover{border-color:var(--primary)}
.btn.secondary{background:var(--gray-bg);color:var(--text)}
.btn.danger{background:var(--red-bg);color:var(--red)}
.btn.green{background:var(--green-bg);color:var(--green)}
.btn.sm{min-height:38px;padding:8px 14px;font-size:13px;border-radius:9px;width:auto}
.theme-toggle{
  background:var(--white); border:1px solid var(--border); color:var(--text);
  width:38px; height:38px; border-radius:8px; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.theme-toggle:hover{border-color:var(--small)}

/* ── LOGIN ── */
.login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:20px;position:relative}
.login-box{width:min(420px,100%);background:var(--white);border:1px solid var(--border);
  border-radius:18px;padding:36px 32px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
/* Logo de On Track en el login (móviles de conductores): el logo oficial con sus colores, sobre
   un recuadro oscuro con un resplandor verde suave; oscuro también en modo claro, como el del grupo. */
.login-brand-ontrack{margin-bottom:24px;padding:26px 20px;border-radius:12px;text-align:center;
  background:radial-gradient(ellipse at 50% 45%,rgba(74,160,96,.28),rgba(10,18,32,0) 70%),#0A1220;
  border:1px solid rgba(95,179,122,.25)}
.login-brand-ontrack img{max-width:300px;width:100%;height:auto;display:block;margin:0 auto}
.logo{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.3px}
.logo span{font-weight:400;color:var(--primary)}

/* ── DRIVER SHELL ── */
.driver-shell{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
  padding-bottom:calc(72px + env(safe-area-inset-bottom,0px));max-width:540px;margin:0 auto}

/* Header profesional */
.driver-header{
  display:flex;align-items:center;gap:12px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;
  background:linear-gradient(135deg,#0f1f12 0%,#1a3a1e 60%,#233d27 100%);
  border-bottom:1px solid #2e5234;
  position:sticky;top:0;z-index:10;
  box-shadow:0 2px 16px #00000030;
}
.dh-logo{height:34px;width:auto;max-width:48vw;object-fit:contain;flex-shrink:0}
.dh-center{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-left:4px}
.dh-status-pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;color:#a7f3c0;letter-spacing:.2px;
}
.dh-status-pill::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--dot,#6b7280);flex-shrink:0;
  box-shadow:0 0 6px var(--dot,#6b7280);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.6;transform:scale(.85)}
}
/* Botón de chat en header */
.dh-chat-btn{
  position:relative;flex-shrink:0;
  width:40px;height:40px;border-radius:12px;border:1px solid #3a5e3f;
  background:#ffffff12;color:#a7f3c0;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s,transform .1s;
}
.dh-chat-btn:active{transform:scale(.93)}
.dh-chat-btn.has-unread{background:#16a34a28;border-color:#16a34a;color:#4ade80}
.chat-badge{
  position:absolute;top:-5px;right:-5px;
  min-width:18px;height:18px;border-radius:999px;
  background:#ef4444;color:#fff;font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
  border:2px solid #0f1f12;letter-spacing:0;
  animation:badge-pop .2s ease;
}
@keyframes badge-pop{from{transform:scale(0)}to{transform:scale(1)}}

/* Bottom nav */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:min(540px,100%);background:var(--white);border-top:1px solid var(--border);
  display:flex;z-index:20;box-shadow:0 -4px 20px #0000000d;
  padding-bottom:env(safe-area-inset-bottom,0px)}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;
  gap:3px;padding:10px 4px;cursor:pointer;border:0;background:transparent;
  color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.3px;
  transition:color .15s}
.bnav-item .ico{font-size:22px;line-height:1}
.bnav-item.active{color:#16a34a}
.bnav-item.active .ico{filter:drop-shadow(0 0 4px #16a34a60)}
.driver-content{padding:16px 16px calc(8px + env(safe-area-inset-bottom,0px));flex:1}

/* ── ADMIN SHELL ── */
.shell{display:flex;min-height:100vh}
.sidebar{width:230px;background:var(--ink-2);color:#fff;padding:20px;
  display:flex;flex-direction:column;gap:4px;flex-shrink:0;border-right:1px solid var(--border)}
.brand{font-family:var(--display);font-size:17px;font-weight:800;margin:4px 8px 24px;letter-spacing:-.2px;color:var(--text)}
.brand span{font-weight:400;color:var(--primary)}
.nav-btn{background:transparent;color:var(--muted);text-align:left;border:0;
  padding:11px 12px;border-radius:9px;cursor:pointer;width:100%;font-size:14px;font-weight:500}
.nav-btn:hover,.nav-btn.active{background:var(--nav-hover-bg);color:var(--text)}
/* Submenús desplegables del menú lateral */
.nav-group{display:flex;align-items:center;gap:6px}
.nav-group.here{color:var(--text)}
.nav-caret{margin-left:auto;font-size:14px;line-height:1;transition:transform .15s;transform:rotate(-90deg)}
.nav-group.open .nav-caret{transform:none}
.nav-subs{display:flex;flex-direction:column;gap:2px;margin:0 0 4px 12px;padding-left:4px;border-left:1px solid var(--border)}
.nav-subs[hidden]{display:none}
.nav-btn.nav-sub{padding:8px 8px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-foot{display:flex;gap:6px;align-items:center}
.nav-foot .nav-btn{flex:1}
.nav-foot .nav-theme{flex:0 0 auto;width:auto;padding:11px 12px}
/* Pestañas dentro de una página (Servicios / Valoraciones) */
.page-tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--border)}
.page-tab{background:transparent;border:0;border-bottom:2px solid transparent;color:var(--muted);
  padding:9px 12px;font-size:14px;font-weight:600;cursor:pointer;margin-bottom:-1px}
.page-tab:hover{color:var(--text)}
.page-tab.on{color:var(--text);border-bottom-color:var(--primary)}
.main{flex:1;min-width:0;padding:28px;max-width:1400px}
.top{display:flex;justify-content:space-between;align-items:flex-start;
  gap:12px;margin-bottom:24px}
.page-title{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.3px;color:var(--text)}

/* ── CARDS ── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:16px}
.card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:18px}

/* ── Dashboard premium: saludo + tarjetas KPI con ícono a color ── */
.dash-greeting{margin-bottom:24px}
.dash-greeting .hi{font-size:24px;font-weight:800;color:var(--text);letter-spacing:-.3px}
.dash-greeting .sub{color:var(--muted);font-size:13px;margin-top:4px;text-transform:capitalize}

.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:24px}
.kpi-card{
  background:var(--white); border:1px solid var(--border); border-radius:16px;
  padding:20px; display:flex; align-items:center; gap:14px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.kpi-card:hover{transform:translateY(-2px); box-shadow:0 14px 28px -16px rgba(0,0,0,.3)}
.kpi-icon{
  width:48px; height:48px; border-radius:13px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.kpi-label{font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); font-weight:700}
.kpi-value{font-size:26px; font-weight:800; color:var(--text); margin-top:3px; line-height:1}

.driver-card{
  background:var(--white); border:1px solid var(--border); border-radius:14px;
  padding:16px; margin-bottom:12px; display:flex; gap:14px; align-items:flex-start;
}
.driver-avatar{
  width:42px; height:42px; border-radius:50%; flex-shrink:0; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; color:#fff;
}
.card-label{font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.card-value{font-family:var(--mono);font-size:26px;font-weight:500;margin-top:6px;color:var(--text)}
.card-sub{font-size:12px;color:var(--muted);margin-top:3px}

/* ── STATUS BADGE ── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;
  border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.3px;font-family:var(--mono)}
.badge.green{background:var(--green-bg);color:var(--green)}
.badge.yellow{background:var(--yellow-bg);color:var(--yellow)}
.badge.blue{background:var(--blue-bg);color:var(--blue)}
.badge.red{background:var(--red-bg);color:var(--red)}
.badge.gray{background:var(--gray-bg);color:var(--muted)}

/* ── SECTION / CARD ── */
.section{background:var(--white);border:1px solid var(--border);border-radius:16px;
  padding:18px;margin-bottom:14px}
.section h3{margin:0 0 14px;font-size:15px;font-weight:700;color:var(--text)}
.section-title{font-family:var(--display);font-size:15px;font-weight:700;margin-bottom:12px;color:var(--text);text-transform:uppercase;letter-spacing:.4px}

/* ── SERVICE ITEM ── */
.svc-item{display:flex;flex-direction:column;gap:8px;padding:14px 0;
  border-bottom:1px solid var(--border)}
.svc-item:last-child{border-bottom:0;padding-bottom:0}
.svc-item:first-child{padding-top:0}
.svc-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.svc-code{font-weight:700;font-size:15px;color:var(--text)}
.svc-meta{font-size:13px;color:var(--muted);margin-top:2px}
.svc-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ── FORM FIELD ── */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.field .hint{font-size:12px;color:var(--muted);margin-top:4px}

/* ── NOTICE ── */
.notice{background:var(--ink-2);border:1px solid var(--border);border-radius:12px;padding:14px;margin:12px 0;color:var(--text)}
.notice.warn{background:var(--yellow-bg);border-color:rgba(210,162,76,.4)}
.notice.info{background:var(--blue-bg);border-color:rgba(127,163,196,.4)}
.notice.success{background:var(--green-bg);border-color:rgba(95,160,132,.4)}
.notice.error{background:var(--red-bg);border-color:var(--red);color:var(--red);font-weight:600}

/* ── SWITCH ── */
.switch-row{display:flex;align-items:center;justify-content:space-between;
  padding:14px;background:var(--white);border:1.5px solid var(--border);
  border-radius:14px;margin-bottom:10px;cursor:pointer}
.switch-row label{font-size:15px;font-weight:600;cursor:pointer;color:var(--text)}
.toggle{width:46px;height:26px;background:var(--border);border-radius:999px;
  position:relative;transition:background .2s;flex-shrink:0}
.toggle.on{background:var(--primary)}
.toggle::after{content:"";position:absolute;width:20px;height:20px;
  background:#fff;border-radius:50%;top:3px;left:3px;transition:transform .2s;
  box-shadow:0 1px 4px #0004}
.toggle.on::after{transform:translateX(20px)}

/* ── SIGNATURE CANVAS ── */
.sig-canvas{width:100%;height:180px;border:2px dashed var(--border);border-radius:14px;
  background:#fafafa;display:block;touch-action:none;cursor:crosshair}
.sig-canvas.signed{border-color:var(--green);border-style:solid}

/* ── PHOTO PREVIEW ── */
.photo-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.photo-thumb{width:72px;height:72px;object-fit:cover;border-radius:10px;
  border:1.5px solid var(--border)}
.photo-thumb-wrap{position:relative}
.photo-remove{position:absolute;top:-6px;right:-6px;width:20px;height:20px;
  background:var(--red);color:#fff;border:0;border-radius:50%;font-size:11px;
  cursor:pointer;display:flex;align-items:center;justify-content:center}

/* ── OP CARD ── */
.op-card{background:var(--bg);border:1.5px solid var(--border);border-radius:14px;
  padding:14px;margin-bottom:10px}
.op-card.active{border-color:var(--primary);background:var(--white)}
.op-card h4{margin:0 0 8px;font-size:14px;font-weight:700}

/* ── STEP INDICATOR ── */
.steps{display:flex;gap:0;margin-bottom:20px;overflow:hidden;border-radius:10px}
.step{flex:1;text-align:center;padding:8px 4px;font-size:11px;font-weight:700;
  background:var(--border);color:var(--muted);letter-spacing:.3px}
.step.done{background:#d1fadf;color:var(--green)}
.step.active{background:var(--primary);color:#fff}

/* ── PROFILE ── */
.profile-avatar{width:72px;height:72px;border-radius:50%;background:var(--primary);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:800;margin:0 auto 14px;flex-shrink:0}
.stat-row{display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}
.stat-row:last-child{border-bottom:0}
.stat-row strong{font-weight:700}

/* ── UTIL ── */
.muted{color:var(--muted)}
.small{font-size:13px}
.mt{margin-top:12px}
.mb{margin-bottom:12px}
.flex{display:flex;gap:10px}
.flex-end{justify-content:flex-end}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hidden{display:none!important}
.fw{width:100%}
.empty{text-align:center;padding:32px 16px;color:var(--muted);font-size:14px}
.money{font-family:var(--mono);font-weight:500;color:var(--text)}
.tag{display:inline-block;padding:3px 8px;border-radius:6px;font-size:11px;
  font-weight:700;background:var(--gray-bg);color:var(--muted)}

/* ── NUEVO SERVICIO — svc-item destacado (punto 7/12) ── */
.new-service-item{
  border:2px solid var(--primary)!important;
  background:rgba(201,161,90,.08);
  border-radius:14px!important;
  padding:14px!important;
  margin-bottom:8px;
}

/* ── Selector de zona: cada zona es un negocio aparte ── */
.zone-tabs{display:flex;gap:6px;padding:4px;margin:0 0 18px;background:var(--ink-2);border:1px solid var(--border);border-radius:14px;overflow-x:auto;scrollbar-width:none}
.zone-tabs::-webkit-scrollbar{display:none}
.zone-tab{flex:1 0 auto;min-height:44px;padding:0 16px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.zone-tab:hover{color:var(--text)}
.zone-tab.on{background:var(--primary);color:var(--primary-fg);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.zone-select{background:var(--ink-2);color:var(--text);border:1px solid var(--border);border-radius:10px;font-size:12.5px;font-weight:700;padding:9px 10px}
.zone-select-side{margin:0 0 10px}
.zone-select-top{width:auto;max-width:45vw;margin:0 8px 0 auto;padding:8px 10px;min-height:40px}
.pulse-go{font-size:.6em;opacity:.5;vertical-align:middle}
.liq-go{color:var(--muted);font-weight:400}
.liq-link{cursor:pointer;border-radius:6px}
.liq-link:hover,.liq-link:hover span{color:var(--text)}
.liq-tickets{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.liq-ticket{border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.liq-ticket-img{display:flex;align-items:center;justify-content:center;height:170px;background:var(--ink-2);color:var(--muted);text-decoration:none}
.liq-ticket-img img{width:100%;height:100%;object-fit:cover}
.liq-ticket-info{padding:10px;display:grid;gap:3px}

/* ── RESPONSIVE (admin) ── */
.m-top,.m-tabs,.m-scrim{display:none}
@media(max-width:760px){
  .shell{flex-direction:column;max-width:100vw;overflow-x:hidden}
  /* Barra superior fija: marca + botón de menú (respeta la hora/batería del iPhone) */
  .m-top{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30;
    background:var(--ink-2);border-bottom:1px solid var(--border);
    padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px}
  .m-brand{font-weight:800;font-size:15px;letter-spacing:.2px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-brand span{font-weight:400}
  .m-menu{background:transparent;border:1px solid var(--border);color:var(--text);width:40px;height:40px;border-radius:12px;font-size:18px;cursor:pointer}
  /* Menú desplegable: se abre justo debajo de la barra al pulsar ☰ */
  .sidebar{position:fixed;top:calc(60px + env(safe-area-inset-top,0px));left:12px;right:12px;width:auto;z-index:50;
    max-height:calc(100vh - 80px - env(safe-area-inset-top,0px));overflow-y:auto;-webkit-overflow-scrolling:touch;
    border:1px solid var(--border);border-radius:16px;padding:12px;flex-direction:column;
    opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;pointer-events:none;visibility:hidden;
    transition:opacity .16s ease,transform .16s ease,visibility .16s}
  .drawer-open .sidebar{opacity:1;transform:none;pointer-events:auto;visibility:visible;box-shadow:0 18px 50px rgba(0,0,0,.55)}
  .sidebar .brand,.sidebar .sb-user{display:none}
  .sidebar .nav-btn{padding:12px 14px;font-size:15px;width:100%}
  .sidebar .nav-btn.nav-sub{padding:10px 12px;font-size:14px}
  .sidebar .nav-foot .nav-theme{width:auto}
  .m-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40;opacity:0;pointer-events:none;transition:opacity .16s}
  .drawer-open .m-scrim{opacity:1;pointer-events:auto}
  .m-tabs{display:none!important}
  .main{padding:14px 14px calc(24px + env(safe-area-inset-bottom,0px));width:100%;overflow-x:hidden}
  .section{overflow-x:auto}
  img,video,canvas{max-width:100%;height:auto}
  .cards{grid-template-columns:repeat(2,1fr)}
  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi-card{padding:14px;gap:10px;flex-direction:column;align-items:flex-start}
  .kpi-icon{width:38px;height:38px;font-size:18px}
  .kpi-value{font-size:22px}
}
@media(max-width:480px){
  .grid2{grid-template-columns:1fr}
  .page-title{font-size:20px}
  .card-value{font-size:22px}
}

/* ── FICHA COMPLETA DEL SERVICIO (svc-detail) ── */
.svc-detail-header{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,#0D1A20,#1a2f3a);
  border:1px solid var(--border);
  color:#fff;padding:16px 18px;border-radius:16px;margin-bottom:14px;
}
.svc-detail-back{
  background:rgba(255,255,255,.1);border:1px solid rgba(202,0,8,.35);color:var(--primary);
  width:34px;height:34px;border-radius:10px;font-size:18px;cursor:pointer;flex-shrink:0;
}
.svc-detail-code{font-family:var(--display);font-weight:800;font-size:16px}
.svc-detail-sub{font-size:12.5px;opacity:.75;margin-top:2px}
.svc-detail-row{
  display:flex;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--border);font-size:13.5px;
}
.svc-detail-row:last-child{border-bottom:none}
.svc-detail-label{color:var(--muted);flex:1 1 0;min-width:min(9em,40%);overflow-wrap:break-word}
.svc-detail-value{font-weight:600;text-align:right;color:var(--text);min-width:0;overflow-wrap:anywhere}
.svc-detail-maplink{color:var(--primary);font-weight:700;text-decoration:none;white-space:nowrap;margin-left:6px}
.svc-detail-obs{font-size:13.5px;color:var(--text);white-space:pre-wrap}

/* ═══════════════════════════════════════════════════════════════════════════
   PANEL DE PROPIETARIO — vista ejecutiva, aislada del resto de la app
   El rojo (--op-danger) queda reservado SOLO para negocios que necesitan
   atención real — el resto de la interfaz usa un neutro (--op-primary).
   ═══════════════════════════════════════════════════════════════════════════ */
.owner-panel{
  --op-ink:#0A1220; --op-ink-2:#0F1B2E; --op-card:#131F33; --op-border:#233047;
  --op-track:#2A3A54;
  --op-primary:#F3F5F9; --op-primary-dim:#8A93A6;
  --op-danger:#CA0008; --op-danger-dim:#8F0006;
  --op-emerald:#4FA97A; --op-amber:#D2A24C; --op-brick:#CA0008; --op-blue:#7FA3C4;
  --op-text:#EEF1F6; --op-text-dim:#98A2B3; --op-text-faint:#5C6B85;
  --op-mono:'IBM Plex Mono', monospace;

  background:var(--op-ink);
  min-height:100vh;min-height:100dvh; width:100%;
  color:var(--op-text);
  font-family:Inter,system-ui,sans-serif;
  padding:36px clamp(16px,4vw,56px) 60px;
}
body.light-theme .owner-panel{
  --op-ink:#F3F5F9; --op-ink-2:#fff; --op-card:#fff; --op-border:#E1E5EC;
  --op-track:#D7DCE5;
  --op-primary:#101B2D; --op-primary-dim:#5B6478;
  --op-danger:#CA0008; --op-danger-dim:#8F0006;
  --op-emerald:#0F7A4B; --op-amber:#B8790A; --op-brick:#CA0008; --op-blue:#3B6EA5;
  --op-text:#101B2D; --op-text-dim:#5B6478; --op-text-faint:#8A93A6;
}

.op-header{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap;
  gap:16px; padding-bottom:22px; border-bottom:1px solid var(--op-border); margin-bottom:30px;
}
.op-brand{display:flex; align-items:center; gap:14px}
.op-title{font-weight:800; font-size:clamp(20px,2.4vw,25px); color:var(--op-text); letter-spacing:-.2px}
.op-sub{color:var(--op-text-dim); font-size:12.5px; margin-top:3px; letter-spacing:.3px}
.op-back{
  background:var(--op-card); border:1px solid var(--op-border); color:var(--op-text);
  padding:9px 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer;
}
.op-back:hover{border-color:var(--op-primary-dim)}
.op-theme-toggle{
  background:var(--op-card); border:1px solid var(--op-border); color:var(--op-text);
  width:38px; height:38px; border-radius:8px; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.op-theme-toggle:hover{border-color:var(--op-primary-dim)}


.op-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px;
}
.op-card{
  background:var(--op-card); border:1px solid var(--op-border); border-radius:14px;
  padding:22px 22px 20px; cursor:pointer; transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
/* Todas las tarjetas a la misma altura y el botón ENTRAR siempre abajo, haya aviso o no */
.owner-panel .op-card{display:flex; flex-direction:column; margin-bottom:0}
.owner-panel .op-card .op-enter-btn{margin-top:auto}
.owner-panel .op-card .op-stat-list{margin-bottom:16px}
.owner-panel .op-card .op-alert-line{margin:-4px 0 16px}
.op-card:hover{transform:translateY(-3px); border-color:var(--op-primary-dim); box-shadow:0 14px 30px -14px rgba(0,0,0,.4)}
/* Solo los negocios que de verdad necesitan atención llevan borde rojo — el resto, neutro */
.op-card.op-needs-attention{border-color:rgba(202,0,8,.5)}
.op-card.op-needs-attention:hover{border-color:var(--op-danger)}
.op-card-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; gap:10px}
.op-biz-name{font-size:16.5px; font-weight:700; line-height:1.3; color:var(--op-text)}
.op-biz-tag{font-size:11.5px; color:var(--op-text-dim); margin-top:3px}

.op-status-pill{
  font-family:var(--op-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase;
  padding:4px 9px; border-radius:20px; white-space:nowrap; flex-shrink:0;
}
.op-status-creciendo{color:var(--op-emerald); background:rgba(79,169,122,.14); border:1px solid rgba(79,169,122,.35)}
.op-status-estable{color:var(--op-amber); background:rgba(210,162,76,.14); border:1px solid rgba(210,162,76,.35)}
.op-status-atencion{color:var(--op-danger); background:rgba(202,0,8,.12); border:1px solid rgba(202,0,8,.4)}

.op-gauge-row{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.op-gauge-num{font-family:var(--op-mono); font-size:24px; color:var(--op-text); font-weight:500}
.op-gauge-num span{font-size:11px; color:var(--op-text-faint)}
.op-gauge-label{font-size:10.5px; color:var(--op-text-faint); letter-spacing:.4px; margin-top:2px}

.op-stat-list{display:flex; flex-direction:column; gap:8px; margin-top:4px}
.op-stat-row{display:flex; justify-content:space-between; font-size:12.5px}
.op-stat-row .k{color:var(--op-text-dim)}
.op-stat-row .v{font-family:var(--op-mono); color:var(--op-text)}

.op-alert-line{
  margin-top:12px; padding:8px 10px; border-radius:8px; font-size:12px;
  background:rgba(202,0,8,.1); border:1px solid rgba(202,0,8,.3); color:var(--op-danger);
}
.op-enter-btn{
  margin-top:16px; width:100%; padding:10px; border-radius:8px; border:1px solid var(--op-border);
  background:transparent; color:var(--op-text); font-weight:700; font-size:12.5px;
  letter-spacing:.4px; cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.op-card:hover .op-enter-btn{background:var(--op-ink-2); border-color:var(--op-primary-dim)}
.op-card.op-needs-attention .op-enter-btn{color:var(--op-danger); border-color:rgba(202,0,8,.4)}
.op-card.op-needs-attention:hover .op-enter-btn{background:rgba(202,0,8,.08); border-color:var(--op-danger)}

.op-empty{
  font-family:var(--op-mono); color:var(--op-text-faint); text-align:center; padding:60px 20px; font-size:13px;
}

/* ── KPI cards, gráficos y actividad reciente ── */
.op-kpi-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:32px;
}
.op-kpi{
  background:var(--op-card); border:1px solid var(--op-border); border-radius:14px;
  padding:18px; display:flex; align-items:center; gap:14px;
}
.op-kpi-icon{
  width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:19px; flex-shrink:0;
}
.op-kpi-label{font-size:11.5px; color:var(--op-text-faint); letter-spacing:.3px}
.op-kpi-value{font-family:var(--op-mono); font-size:22px; font-weight:600; color:var(--op-text); margin-top:2px}

.op-section-title{
  font-size:16px; font-weight:700; color:var(--op-text); margin:28px 0 14px;
}

/* ── Lo importante hoy ── */
.op-news{margin-top:-8px}
.op-news-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.op-news-count{font-size:12px; color:var(--op-text-faint)}
.op-news-count b{color:var(--op-danger); font-weight:600}
.op-news-item{
  display:flex; align-items:center; gap:12px; padding:11px 12px; margin:0 -12px; border-radius:10px;
  border-left:3px solid transparent; cursor:pointer; transition:background .15s ease;
}
.op-news-item + .op-news-item{border-top:1px solid var(--op-border)}
.op-news-item:hover{background:var(--op-ink-2)}
.op-news-bad{border-left-color:var(--op-danger)}
.op-news-warn{border-left-color:var(--op-amber)}
.op-news-good{border-left-color:var(--op-emerald)}
.op-news-ico{font-size:17px; width:24px; text-align:center; flex-shrink:0}
.op-news-body{flex:1; min-width:0}
.op-news-title{font-size:13.5px; font-weight:600; color:var(--op-text)}
.op-news-bad .op-news-title{color:var(--op-danger)}
.op-news-sub{font-size:11.5px; color:var(--op-text-faint); margin-top:2px; overflow-wrap:anywhere}
.op-news-amount{font-family:var(--op-mono); font-size:13px; color:var(--op-text); white-space:nowrap}
.op-news-good .op-news-amount{color:var(--op-emerald)}
.op-news-go{color:var(--op-text-faint); font-size:13px; flex-shrink:0}
.op-news-item:hover .op-news-go{color:var(--op-text)}
.op-news-ok{font-size:13px; color:var(--op-text-dim); padding:6px 0}
.op-news-more{
  margin-top:10px; background:transparent; border:1px solid var(--op-border); color:var(--op-text);
  padding:8px 14px; border-radius:8px; font-size:12.5px; font-weight:600; cursor:pointer;
}
.op-news-more:hover{border-color:var(--op-primary-dim)}
@media(max-width:600px){
  .op-news-item{flex-wrap:wrap}
  .op-news-amount{margin-left:36px}
  .op-news-go{display:none}
}

.op-charts-row{
  display:grid; grid-template-columns:1.1fr 1fr 1.1fr; gap:16px; margin-top:8px;
}
@media(max-width:980px){.op-charts-row{grid-template-columns:1fr}}
.op-panel{
  background:var(--op-card); border:1px solid var(--op-border); border-radius:14px; padding:20px;
}
.op-chart-hint{font-size:11px; color:var(--op-text-faint); margin-top:10px; line-height:1.5}

.op-bars{display:flex; align-items:flex-end; gap:18px; height:190px; padding-top:10px}
.op-bar-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%}
.op-bar-value{font-family:var(--op-mono); font-size:11px; color:var(--op-text-dim); margin-bottom:6px}
.op-bar{width:100%; max-width:56px; border-radius:6px 6px 0 0; background:var(--op-primary)}
.op-bar-label{font-size:10.5px; color:var(--op-text-faint); margin-top:8px; text-align:center; line-height:1.3; min-height:2.6em}

.op-donut-legend{display:flex; flex-direction:column; gap:8px; font-size:12.5px; color:var(--op-text-dim)}
.op-donut-legend b{color:var(--op-text); font-family:var(--op-mono)}
.op-dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px}

.op-activity-item{display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--op-border)}
.op-activity-item:last-child{border-bottom:none}
.op-activity-title{font-size:12.5px; color:var(--op-text); font-weight:600}
.op-activity-sub{font-size:11px; color:var(--op-text-faint); margin-top:1px}
.op-activity-time{margin-left:auto; font-size:10.5px; color:var(--op-text-faint); white-space:nowrap}

.op-bottom-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:16px}
.op-mini-card{
  background:var(--op-card); border:1px solid var(--op-border); border-radius:14px;
  padding:18px; display:flex; align-items:center; gap:14px;
}

/* ── LECTURA RÁPIDA DEL NEGOCIO (dashboard) ── */
.pulse-hero{background:linear-gradient(135deg,var(--ink-2),var(--white));border:1px solid var(--border);border-radius:20px;padding:20px 22px;margin-bottom:14px}
.pulse-hero-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.pulse-hero-title{font-size:13px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.pulse-hero-note{font-size:11.5px;color:var(--muted)}
.pulse-main{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:end}
.pulse-util-label{font-size:12px;color:var(--muted);font-weight:600}
.pulse-util{font-size:42px;font-weight:800;letter-spacing:-1px;line-height:1.05;margin:4px 0 12px}
.pulse-util.pos{color:var(--green)}.pulse-util.neg{color:var(--red)}
.pulse-split{display:flex;gap:10px;flex-wrap:wrap}
.pulse-split>div{background:var(--gray-bg);border-radius:12px;padding:9px 13px;font-size:12.5px;color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:6px}
.pulse-split b{color:var(--text);font-size:14px;margin-left:2px}
.pulse-split .dot{width:8px;height:8px;border-radius:50%}.dot.g{background:var(--green)}.dot.r{background:var(--red)}
.pulse-mini{font-size:12px;color:var(--muted);margin-top:12px}
.pulse-chart-title{font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:6px}
.pulse-bars{display:flex;align-items:flex-end;gap:8px;height:110px}
.pulse-bar-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.pulse-bar{width:100%;max-width:34px;border-radius:6px 6px 2px 2px;background:var(--border)}
.pulse-bar.today{background:var(--primary)}
.pulse-bar-val{font-size:9.5px;color:var(--muted);margin-bottom:3px;white-space:nowrap;height:12px}
.pulse-bar-day{font-size:10.5px;color:var(--muted);margin-top:5px;font-weight:600}
.pulse-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:22px}
.pulse-tile{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:15px 16px;cursor:pointer;transition:transform .15s}
.pulse-tile:hover{transform:translateY(-2px)}
.pulse-tile.warn{border-color:rgba(210,162,76,.55)}
.pulse-tile-top{display:flex;align-items:center;gap:8px;font-size:16px}
.pulse-tile-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.pulse-tile-value{font-size:24px;font-weight:800;margin:8px 0 3px;color:var(--text);line-height:1.1}
.pulse-tile-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){.pulse-main{grid-template-columns:1fr;gap:18px}.pulse-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.pulse-hero{padding:16px}.pulse-util{font-size:36px}.pulse-tile-value{font-size:20px}}
/* ── Kilómetros recorridos (finalizar servicio) ── */
.km-input{display:flex;align-items:center;gap:10px}
.km-input input{flex:1;font-size:22px;font-weight:800;text-align:right;padding:12px 14px}
.km-unit{font-size:16px;font-weight:700;color:var(--muted);min-width:28px}

/* ── Ficha contable de zona (Zonas → zona) ─────────────────────────────── */
.zd-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.zd-kpis.zd-two{grid-template-columns:repeat(2,1fr)}
.zd-kpi .card-value{font-size:28px;margin:6px 0 4px}
.zd-num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.zd-bar-row{padding:7px 0}
.zd-bar-head{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:5px}
.zd-bar-track{height:8px;border-radius:4px;background:var(--gray-bg);overflow:hidden}
.zd-bar-fill{height:100%;border-radius:4px}
.zd-table{width:100%;border-collapse:collapse;font-size:13px}
.zd-table th{text-align:left;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.zd-table td{padding:10px;border-bottom:1px solid var(--border);vertical-align:top}
.zd-table th:not(:first-child),.zd-table td:not(:first-child){text-align:right}
.zd-table tbody tr:hover{background:var(--gray-bg)}
.zd-table tfoot td{font-weight:700;border-bottom:none;border-top:2px solid var(--border)}
.zd-legend{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-bottom:10px}
.zd-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.zd-trend{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-items:end}
.zd-trend-col{display:flex;flex-direction:column;align-items:center;min-width:0}
.zd-trend-bars{display:flex;gap:2px;align-items:flex-end;height:140px;width:100%;justify-content:center;border-bottom:1px solid var(--border)}
.zd-trend-bar{width:40%;max-width:22px;border-radius:4px 4px 0 0;min-height:2px}
.zd-trend-label{font-size:11px;color:var(--muted);margin-top:6px;text-transform:capitalize}
.zd-trend-res{font-family:var(--mono);font-size:10.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (max-width:760px){ .zd-kpis{grid-template-columns:1fr} }
.zd-link{color:inherit;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.zd-table th.zd-group{text-align:center !important;border-bottom:1px solid var(--border);color:var(--text)}
.zd-table thead tr:first-child th[rowspan]{vertical-align:bottom}
.audit-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 6px}
.audit-chip{font-size:12px;padding:4px 9px;border-radius:999px;background:var(--gray-bg);border:1px solid var(--border)}
.shift-card{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.shift-card.shift-end{display:block}
.shift-card[hidden]{display:none}
/* Inicio de jornada: opciones grandes para tocar con el dedo (gasoil, sí/no) y foto del cuentakilómetros */
.choice-row{display:flex;gap:6px;flex-wrap:wrap}
.choice-row .choice{flex:1 1 0;min-width:56px;padding:12px 6px;border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--text);font-weight:700;font-size:14px;cursor:pointer}
.choice-row .choice.on{background:var(--text);color:var(--bg,#fff);border-color:var(--text)}
.shift-photo{display:flex;align-items:center;gap:10px;margin-top:6px}
.shift-photo img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.shift-late{border:1px solid rgba(210,162,76,.5);background:var(--yellow-bg);border-radius:12px;padding:12px;margin-bottom:14px}
/* Aviso de "sin conexión" en la app del conductor (lo guardado se envía al volver la señal) */
.offline-banner{position:fixed;left:12px;right:12px;top:calc(10px + env(safe-area-inset-top));z-index:2000;max-width:520px;margin:0 auto;
  background:#fef3c7;color:#78350f;border:1px solid #f59e0b;border-radius:12px;padding:10px 14px;font-size:13.5px;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.25)}
.offline-banner.ok{background:#dcfce7;color:#14532d;border-color:#22c55e}
.offline-banner.error{background:#fee2e2;color:#7f1d1d;border-color:#ef4444}
/* Ficha del conductor: mes + botón de la liquidación */
.statement-pick{display:inline-flex;gap:6px;align-items:center}
.statement-pick input{width:auto;margin:0;padding:6px 8px;font-size:12.5px}
/* Servicios: buscador y filtro de estado */
.svc-search{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.svc-search input{margin:0}
.svc-search .choice{flex:0 0 auto;padding:8px 14px;font-size:13px}
/* Mensajes (admin): lista de conversaciones + conversación abierta. En el móvil, una u otra. */
.chat-layout{display:grid;grid-template-columns:320px 1fr;border:1px solid var(--border);border-radius:14px;overflow:hidden;height:calc(100dvh - 150px);min-height:420px;background:var(--white)}
.chat-list{border-right:1px solid var(--border);overflow-y:auto}
.chat-group{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:14px 14px 6px}
.chat-row{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border)}
.chat-row:hover{background:var(--gray-bg)}
.chat-row.active{background:var(--gray-bg);box-shadow:inset 3px 0 0 var(--primary)}
.chat-row-title{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-row-sub{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.chat-zone-ico{width:36px;height:36px;border-radius:50%;background:var(--gray-bg);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.chat-unread{background:var(--red);color:#fff;border-radius:999px;font-size:11px;font-weight:800;padding:2px 7px;flex-shrink:0}
.chat-pane{display:flex;flex-direction:column;min-width:0;min-height:0}
.chat-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
.chat-back{display:none}
.chat-tabs{display:flex;border-bottom:1px solid var(--border)}
.chat-tabs button{flex:1;padding:10px;border:0;background:transparent;color:var(--muted);font-weight:700;cursor:pointer;border-bottom:2px solid transparent}
.chat-tabs button.on{color:var(--text);border-bottom-color:var(--primary)}
.chat-body{flex:1;overflow-y:auto;padding:16px;min-height:0}
.chat-input{display:flex;gap:8px;align-items:flex-end;padding:12px;border-top:1px solid var(--border)}
.chat-input textarea{flex:1;min-width:0;width:auto;min-height:44px;resize:none;border:1px solid var(--border);border-radius:10px;padding:10px;font-size:14px;max-height:120px;font-family:inherit;margin:0}
.chat-input .btn{width:auto;flex:0 0 auto}
.chat-empty{text-align:center;padding:48px 16px;margin:auto}
.chat-msg{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:10px}
.chat-msg.mine{align-items:flex-end}
.chat-msg-row{display:flex;gap:8px;align-items:flex-end;max-width:85%}
.chat-bubble{background:var(--gray-bg);color:var(--text);border-radius:18px 18px 18px 4px;padding:10px 14px;font-size:14px;line-height:1.4;overflow-wrap:anywhere;min-width:0}
.chat-text{white-space:pre-wrap}
.chat-msg.mine .chat-bubble{background:var(--primary);color:var(--primary-fg);border-radius:18px 18px 4px 18px}
.chat-sender{font-size:11px;font-weight:700;margin-bottom:4px;white-space:normal}
.chat-meta{font-size:10.5px;color:var(--muted);margin-top:2px}
.chat-meta a{color:var(--muted)}
/* Tareas de zona */
.task-form{border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:16px}
.task-card{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:8px}
.task-card.mine{border-left:3px solid var(--primary)}
.task-card.late{border-color:var(--red);background:var(--red-bg)}
.task-card.done{opacity:.85}
.task-title{font-weight:700;overflow-wrap:anywhere}
.task-notes{font-size:13px;margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere}
/* Burbuja de chat flotante, panel encima de la pantalla y aviso de mensaje nuevo */
.chat-fab{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:900;width:58px;height:58px;border-radius:50%;border:0;
  background:var(--primary);color:var(--primary-fg);font-size:26px;box-shadow:0 8px 24px rgba(0,0,0,.35);cursor:pointer;display:flex;align-items:center;justify-content:center}
.chat-fab.hidden,body.chat-dock-open .chat-fab{display:none}
.chat-fab-badge{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--red);color:#fff;
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg)}
.chat-fab-badge[hidden]{display:none}
.chat-fab.ping{animation:chat-ping .5s ease 4}
@keyframes chat-ping{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.chat-dock{position:fixed;right:22px;bottom:22px;z-index:950;width:400px;height:min(640px,calc(100dvh - 44px));background:var(--white);
  border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;overflow:hidden}
.chat-dock[hidden]{display:none}
.chat-dock-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border)}
.chat-dock-head b{flex:1;font-size:15px}
.chat-dock .chat-layout{flex:1;height:auto;min-height:0;border:0;border-radius:0}
.chat-layout.compact{grid-template-columns:1fr}
.chat-layout.compact .chat-list{border-right:0}
.chat-layout.compact .chat-pane{display:none}
.chat-layout.compact.has-sel .chat-list{display:none}
.chat-layout.compact.has-sel .chat-pane{display:flex}
.chat-layout.compact .chat-back{display:inline-flex}
.chat-dock .grid2{grid-template-columns:1fr}
.chat-toast{position:fixed;right:22px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:960;width:min(360px,calc(100vw - 24px));display:flex;gap:10px;align-items:flex-start;
  background:var(--white);color:var(--text);border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:14px;padding:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.4);cursor:pointer;animation:chat-toast-in .25s ease}
.chat-toast[hidden]{display:none}
.chat-toast-ico{font-size:22px}
.chat-toast-body{font-size:13px;color:var(--muted);margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.chat-toast-x{border:0;background:transparent;color:var(--muted);font-size:14px;cursor:pointer;padding:0 2px}
@keyframes chat-toast-in{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:800px){
  .chat-dock{inset:0;width:auto;height:auto;border-radius:0;border:0}
  .chat-toast{left:12px;right:12px;width:auto;top:calc(12px + env(safe-area-inset-top));bottom:auto}
}
@media (max-width:800px){
  .chat-layout{grid-template-columns:1fr;height:calc(100dvh - 190px)}
  .chat-layout .chat-pane{display:none}
  .chat-layout.has-sel .chat-list{display:none}
  .chat-layout.has-sel .chat-pane{display:flex}
  .chat-back{display:inline-flex}
}
/* Dashboard: bloque "Pendiente" y filas tocables (también en la ficha del conductor) */
.pending-box{border:1px solid var(--border)}
.pending-item{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:10px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .12s}
.pending-item:last-child{border-bottom:none}
.pending-item:hover{background:var(--gray-bg)}
.pending-item.urgent{background:var(--red-bg)}
.pending-item.urgent .pending-text{color:var(--red)}
.pending-ico{font-size:20px;width:28px;text-align:center;flex-shrink:0}
.pending-text{font-weight:700;font-size:14px}
.pending-go{font-size:22px;color:var(--muted);flex-shrink:0}
.pending-item .badge{flex-shrink:0}
/* Baterías: precio y comisión editables en la propia tabla (se guardan al cambiar) */
.inline-money{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:8px;padding:0 8px;background:var(--ink-2,transparent);transition:border-color .2s,box-shadow .2s}
.inline-money input{width:72px;border:0;background:transparent;padding:6px 0;margin:0;font-family:var(--mono);font-size:13px;color:var(--text);text-align:right;box-shadow:none}
.inline-money input:focus{outline:none}
.inline-money:focus-within{border-color:var(--text)}
.inline-money span{color:var(--muted);font-size:12px}
.inline-money.saving{opacity:.6}
.inline-money.ok{border-color:var(--green);box-shadow:0 0 0 3px rgba(95,160,132,.25)}
.inline-money.err{border-color:var(--red)}
/* Lo que escribe el conductor (diferencia de baterías, daños) en el resumen de jornada:
   a todo el ancho, en varias líneas y sin salirse aunque sea una palabra muy larga. */
.shift-note{margin-top:6px;padding:8px 10px;border-left:3px solid var(--red);background:var(--red-bg);border-radius:6px;
  font-size:13px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text)}
#shift-summary-box{overflow-wrap:anywhere}
#shift-summary-box .zd-table td:first-child{width:100%}
#shift-summary-box .zd-num{overflow-wrap:normal}
#shift-summary-box .zd-table tr.has-note td{border-bottom:none;padding-bottom:4px}
#shift-summary-box .zd-table tr.note-row td{text-align:left;padding-top:0}
#shift-summary-box .zd-table tr.note-row .shift-note{margin-top:0}
.maint-form{margin-top:14px;border-top:1px solid var(--border);padding-top:14px}
.maint-form[hidden]{display:none}
.zd-table.zd-left3 th:nth-child(-n+3),.zd-table.zd-left3 td:nth-child(-n+3){text-align:left}