:root{
  --gold:#D4A847;
  --gold-soft:#fbf3df;
  --purple:#8A5BB8;
  --purple-soft:#f3edfa;
  --ink:#150F14;
  --line:#e9e5ee;
  --muted:#6e6676;
  --bg:#f4f2f8;
  --surface:#ffffff;
  --surface-2:#f6f4fa;
  --shadow-sm:0 1px 2px rgba(21,15,20,.04),0 1px 3px rgba(21,15,20,.05);
  --shadow-md:0 4px 14px rgba(21,15,20,.07),0 2px 6px rgba(21,15,20,.04);
  --shadow-lg:0 18px 44px rgba(21,15,20,.13),0 6px 14px rgba(21,15,20,.06);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased;letter-spacing:-.005em;
  background:var(--bg);
  background-image:linear-gradient(180deg,#f7f5fb 0%,#f1eff6 100%);
  background-attachment:fixed;
}
button{font-family:inherit;cursor:pointer;}
input{font-family:inherit;}

/* ---- Layout app ---- */
.app{display:flex;min-height:100vh;}
.sidebar{
  width:240px;background:linear-gradient(180deg,#1e1620,#140e13);color:#e9e4ed;flex-shrink:0;
  display:flex;flex-direction:column;
}
.brand{display:flex;align-items:center;gap:10px;padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.08);}
.brand-logo{
  height:42px;width:auto;border-radius:10px;flex-shrink:0;display:block;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.brand-name{font-weight:800;font-size:.98rem;line-height:1.1;}
.brand-sub{font-size:.68rem;color:#a99fb2;margin-top:2px;}
.nav{flex:1;padding:10px 10px;overflow-y:auto;}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:10px 12px;margin:1px 0;border-radius:10px;
  color:#c9c1d0;font-size:.9rem;font-weight:500;border:0;background:none;width:100%;text-align:left;
  position:relative;transition:background .15s,color .15s;
}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff;}
.nav-item.active{background:linear-gradient(90deg,rgba(212,168,71,.22),rgba(212,168,71,.06));color:#fff;box-shadow:inset 0 0 0 1px rgba(212,168,71,.2);}
.nav-item.active::before{content:'';position:absolute;left:-10px;top:9px;bottom:9px;width:3px;background:var(--gold);border-radius:0 3px 3px 0;}
.nav-ico{width:20px;text-align:center;}
.nav-group{margin-bottom:4px;}
.nav-group-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.4);font-weight:700;padding:12px 12px 4px;}
.sidebar-foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:.78rem;}
.sidebar-foot .uname{font-weight:600;color:#fff;}
.sidebar-foot .urole{color:#a99fb2;font-size:.7rem;}

.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);box-shadow:0 1px 16px rgba(21,15,20,.04);
  padding:13px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.topbar-title{font-size:1.1rem;font-weight:700;letter-spacing:-.01em;}
.topbar-logout{display:none;}   /* en desktop el logout vive en el sidebar; en movil aparece aqui */
.content{padding:22px;flex:1;}

/* ---- Botones ---- */
.btn{padding:9px 16px;border-radius:10px;font-weight:600;font-size:.88rem;border:1px solid transparent;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease;}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--gold);color:var(--ink);box-shadow:0 2px 8px rgba(212,168,71,.32);}
.btn-primary:hover{background:#cda13a;transform:translateY(-1px);box-shadow:0 5px 16px rgba(212,168,71,.42);}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:var(--shadow-sm);}
.btn-ghost:hover{background:#faf9fc;transform:translateY(-1px);box-shadow:var(--shadow-md);}
.btn-block{display:block;width:100%;}

/* ---- Toggle de idioma ---- */
.lang-toggle{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.lang-toggle button{padding:6px 11px;background:#fff;border:0;font-size:.78rem;font-weight:600;color:var(--muted);}
.lang-toggle button.active{background:var(--purple);color:#fff;}
.lang-toggle .lang-globe{display:flex;align-items:center;padding:0 4px 0 8px;font-size:.9rem;}
.field-hint{font-size:.76rem;color:var(--muted);margin-top:4px;line-height:1.3;}
.field-err{border-color:#c0392b!important;box-shadow:0 0 0 3px #fbe6e3!important;}
.load-next{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 4px;padding:8px 12px;background:var(--gold-soft);border:1px solid #f0e3bd;border-radius:10px;}
.load-next .ns-tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:#7a5b12;font-weight:700;}
.hos-savebar{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:12px 4px;margin-top:14px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;z-index:5;box-shadow:0 -6px 16px rgba(21,15,20,.07);}
.hos-day.collapsed .hos-fields,.hos-day.collapsed .hos-checks{display:none;}
.hos-day .hos-expand{font-size:.74rem;color:var(--purple);cursor:pointer;font-weight:600;}

/* ---- Cards / estados ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow-sm);}
.banner{background:linear-gradient(135deg,var(--gold-soft),#fff);border:1px solid #f0e3bd;border-left:3px solid var(--gold);border-radius:12px;padding:13px 16px;margin-bottom:18px;font-size:.86rem;color:#7a5b12;box-shadow:var(--shadow-sm);}
.empty{text-align:center;padding:54px 20px;color:var(--muted);}
.empty .ico{font-size:46px;opacity:.5;margin-bottom:10px;}
.empty h3{margin:0 0 6px;color:var(--ink);}

/* ---- Auth (setup/login) ---- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 20%,#1f1620,#150F14);padding:20px;}
.auth-card{background:#fff;border-radius:18px;padding:30px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.35);}
.auth-logo{display:block;width:210px;max-width:82%;height:auto;border-radius:14px;margin:0 auto 16px;box-shadow:var(--shadow-md);}
.auth-card h1{font-size:1.25rem;text-align:center;margin:0 0 4px;}
.auth-card .sub{text-align:center;color:var(--muted);font-size:.84rem;margin:0 0 20px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:.74rem;font-weight:600;color:#574f5e;margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em;}
.field input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:.92rem;outline:none;transition:.15s;}
.field input:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-soft);}
.auth-err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;font-size:.82rem;padding:9px 12px;border-radius:9px;margin-bottom:14px;}
.auth-foot{text-align:center;margin-top:16px;}

/* ---- Botones extra ---- */
.btn-purple{background:var(--purple);color:#fff;box-shadow:0 2px 8px rgba(138,91,184,.32);}
.btn-purple:hover{background:#7a4fab;transform:translateY(-1px);box-shadow:0 5px 16px rgba(138,91,184,.42);}
.btn-danger{background:var(--surface);color:#c0392b;border-color:#f3c0ba;box-shadow:var(--shadow-sm);}
.btn-danger:hover{background:#fdf0ee;transform:translateY(-1px);box-shadow:var(--shadow-md);}
.btn-sm{padding:6px 11px;font-size:.8rem;}

/* ---- Grid de formulario ---- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-grid .full{grid-column:1 / -1;}
.field select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:.92rem;background:#fff;outline:none;}
.field select:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-soft);}
.field .row-inline{display:flex;align-items:center;gap:8px;}
.field .suffix{color:var(--muted);font-size:.82rem;white-space:nowrap;}
.check-row{display:flex;align-items:center;gap:9px;}
.check-row input{width:18px;height:18px;}

/* ---- Cabecera de vista ---- */
.view-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap;}
.view-head h2{margin:0;font-size:1.05rem;}

/* ---- Cards de camion ---- */
.truck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.truck-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;position:relative;}
.truck-card .unit{font-size:1.1rem;font-weight:800;}
.truck-card .sub{color:var(--muted);font-size:.84rem;margin-top:2px;}
.truck-meta{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0;}
.tag{font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:9999px;background:#f1edf3;color:#574f5e;}
.tag.gold{background:var(--gold-soft);color:#7a5b12;}
.tag.purple{background:var(--purple-soft);color:#5a3b86;}
.tag.gray{background:#eef0f2;color:#64748b;}
.truck-card .meter{font-size:.86rem;color:var(--ink);margin-top:4px;}
.truck-card .meter b{font-weight:700;}
.truck-actions{display:flex;gap:8px;margin-top:12px;}

/* ---- Tabla simple ---- */
.tbl{width:100%;border-collapse:collapse;}
.tbl th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);}
.tbl td{padding:11px 12px;border-bottom:1px solid #f3f0f6;font-size:.9rem;}
.tbl tbody tr{transition:background .12s;}
.tbl tbody tr:hover{background:#faf9fc;}
.tbl tbody tr:last-child td{border-bottom:0;}

/* ---- KPIs ---- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:8px;}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px 16px;box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .16s ease;}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.kpi .k-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;}
.kpi .k-val{font-size:1.55rem;font-weight:800;margin-top:5px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.kpi .k-val.pos{color:#1f9254;} .kpi .k-val.neg{color:#c0392b;}

/* ---- Tablero: titular + "necesita tu atencion" ---- */
.dash-hero{display:flex;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;align-items:center;
  background:linear-gradient(135deg,var(--ink),#2c2031);color:#fff;border:none;}
.dash-hero .hero-eyebrow{font-size:.72rem;letter-spacing:.04em;color:#cbbce0;text-transform:uppercase;font-weight:600;margin-bottom:8px;}
.dash-hero .hero-net{font-size:2.6rem;font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.dash-hero .hero-net.pos{color:#7ee2a8;} .dash-hero .hero-net.neg{color:#ff9b8a;}
.dash-hero .hero-status{font-size:.92rem;margin-top:9px;color:#efe9f5;font-weight:600;}
.dash-hero .hero-delta{display:inline-block;margin-top:10px;font-size:.8rem;font-weight:700;padding:4px 11px;border-radius:999px;}
.dash-hero .hero-delta.up{background:rgba(126,226,168,.18);color:#7ee2a8;}
.dash-hero .hero-delta.down{background:rgba(255,155,138,.18);color:#ff9b8a;}
.dash-hero .hero-delta.flat{background:rgba(255,255,255,.12);color:#d8cee6;}
.dash-hero .hero-aside{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;}
.dash-hero .ha-item{display:flex;flex-direction:column;gap:3px;}
.dash-hero .ha-item span{font-size:.68rem;color:#bdb0cf;text-transform:uppercase;letter-spacing:.04em;font-weight:600;}
.dash-hero .ha-item b{font-size:1.18rem;font-weight:700;font-variant-numeric:tabular-nums;}
.dash-hero .btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff;box-shadow:none;}
.dash-hero .btn-ghost:hover{background:rgba(255,255,255,.2);}
.dash-h{margin:20px 0 8px;font-size:1rem;}
.dash-hero .hero-subline{font-size:.8rem;color:#cbbce0;margin-top:9px;}
.op-actions{display:flex;flex-direction:column;gap:8px;}
.op-action{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--purple);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow-sm);}
.op-action .op-route{font-weight:700;font-size:.95rem;}
.attn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.attn-card{display:flex;align-items:center;gap:13px;text-align:left;width:100%;cursor:pointer;font:inherit;
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-sm);transition:transform .12s ease,box-shadow .12s ease;}
.attn-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.attn-card.urgent{border-left-color:#c0392b;background:#fdf3f1;}
.attn-card .attn-ico{font-size:1.6rem;line-height:1;}
.attn-card .attn-b{flex:1;}
.attn-card .attn-val{font-size:1.4rem;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--ink);}
.attn-card .attn-t{font-size:.86rem;font-weight:600;color:var(--ink);margin-top:1px;}
.attn-card .attn-s{font-size:.76rem;color:var(--muted);margin-top:2px;}
.attn-card .attn-arrow{font-size:1.5rem;color:var(--muted);font-weight:300;}
.attn-clear{text-align:center;color:#1f7a47;font-weight:600;background:#e9f7ef;border-color:#bfe6cf;}

/* ---- Filtros / toolbar ---- */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
.toolbar select{padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:.88rem;}
.load-search{flex:1;min-width:180px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;font-size:.88rem;outline:none;}
.load-search:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-soft);}

/* ---- Load cards ---- */
.load-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;}
.load-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;}
.load-route{font-size:1rem;font-weight:700;text-transform:uppercase;}
#m_origin,#m_destination{text-transform:uppercase;}
.load-route .arrow{color:var(--gold);margin:0 6px;}
.load-sub{color:var(--muted);font-size:.82rem;margin-top:3px;}
.load-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;}
.st{font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:9999px;}
.st-disponible{background:#eef0f2;color:#475569;}
.st-asignada{background:#e7eefb;color:#2c5cc5;}
.st-en_transito{background:#fff3d6;color:#9a6b12;}
.st-entregada{background:#e3f5ea;color:#1f7a47;}
.st-facturada{background:var(--purple-soft);color:#5a3b86;}
.st-pagada{background:#dff3df;color:#226b2b;}
.st-cancelada{background:#fbe6e3;color:#a23b2d;}
.st-overdue{background:#fbe6e3;color:#a23b2d;}
.st-soon{background:#fff3d6;color:#9a6b12;}
.st-ok{background:#e3f5ea;color:#1f7a47;}
.alert-card{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:12px 14px;margin-bottom:8px;}
.alert-card.overdue{border-left-color:#c0392b;}
.alert-card.soon{border-left-color:#d4a847;}
.alert-card .ainfo{font-size:.86rem;}
.alert-card .ameta{font-size:.76rem;color:var(--muted);margin-top:2px;}

/* ---- Mantenimiento por camion (rediseño) ---- */
.mtruck{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px;}
.mtruck-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid #f1edf3;padding-bottom:12px;margin-bottom:12px;}
.mtruck-head .unit{font-size:1.15rem;font-weight:800;}
.mtruck-head .plate{font-size:.76rem;color:var(--muted);}
.meter-edit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.meter-edit label{font-size:.72rem;font-weight:600;color:#574f5e;text-transform:uppercase;}
.meter-edit input{width:110px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;font-size:.9rem;}
.meter-note{font-size:.72rem;color:#94a3b8;margin-top:6px;}
.svc{padding:11px 0;border-bottom:1px solid #f6f4f7;}
.svc:last-child{border-bottom:0;}
.svc-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px;}
.svc-name{font-weight:600;font-size:.92rem;}
.svc-sub{font-size:.74rem;color:var(--muted);}
.svc-bar{height:8px;border-radius:6px;background:#eee7f1;overflow:hidden;margin:6px 0;}
.svc-bar span{display:block;height:100%;border-radius:6px;}
.svc-bar span.ok{background:#3aa76a;}
.svc-bar span.soon{background:var(--gold);}
.svc-bar span.overdue{background:#c0392b;}
.svc-actions{display:flex;gap:8px;margin-top:4px;}
.fin-row{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid #f1edf3;margin-top:10px;}
.fin-net{font-size:1.25rem;font-weight:800;}
.fin-net.pos{color:#1f9254;} .fin-net.neg{color:#c0392b;}
.margin-badge{font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:9999px;}
.margin-badge.pos{background:#e3f5ea;color:#1f7a47;} .margin-badge.neg{background:#fbe6e3;color:#a23b2d;}
.breakdown{margin-top:10px;font-size:.8rem;color:#574f5e;display:none;}
.breakdown.open{display:block;}
.breakdown div{display:flex;justify-content:space-between;padding:2px 0;}
.breakdown .neg{color:#c0392b;}
.link-toggle{font-size:.78rem;color:var(--purple);cursor:pointer;font-weight:600;margin-top:8px;display:inline-block;}
.addon-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.addon-row label{flex:1;margin:0;font-size:.86rem;text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink);}
.addon-row input{width:110px;}
.stop-row{display:flex;gap:6px;margin-bottom:6px;align-items:center;}
.stop-row .st-type{flex:0 0 90px;}
.stop-row input{flex:1;min-width:60px;padding:7px 8px;border:1px solid var(--line);border-radius:7px;font-size:.82rem;}
.stop-row select{padding:7px 8px;border:1px solid var(--line);border-radius:7px;font-size:.82rem;}
.stop-row .btn-danger{flex:0 0 auto;padding:4px 9px;}
.load-stops{margin-top:8px;font-size:.82rem;color:#574f5e;border-left:3px solid var(--gold);padding-left:10px;}
.load-stops div{padding:1px 0;}
@media (max-width:720px){ .stop-row{flex-wrap:wrap;} .stop-row input{flex:1 1 40%;} }

/* ---- Documentos de carga ---- */
.docs{margin-top:12px;padding-top:10px;border-top:1px solid #f1edf3;}
.docs-head{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:8px;}
.doc-chip{display:inline-flex;align-items:center;gap:5px;background:var(--purple-soft);color:#5a3b86;border-radius:8px;padding:5px 9px;font-size:.78rem;font-weight:600;cursor:pointer;margin:0 4px 6px 0;}
.doc-chip:hover{background:#e6d9f5;}
.doc-x{cursor:pointer;color:#c0392b;font-weight:700;margin:0 8px 0 -2px;font-size:.8rem;}

/* ---- Libro semanal ---- */
.week-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.week-range{font-weight:700;font-size:1rem;}
.week-grid{display:grid;gap:10px;}
.week-day{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:120px 1fr 110px 1fr;gap:10px;align-items:center;}
.week-day.today{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft);}
.week-day .dname{font-weight:700;}
.week-day .ddate{font-size:.74rem;color:var(--muted);}
.week-day select,.week-day input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:.86rem;width:100%;}
@media (max-width:720px){
  .week-day{grid-template-columns:1fr 1fr;}
  .week-day .dlabel{grid-column:1 / -1;}
}

/* ---- Tarjeta de tiempo HOS ---- */
.hos-header{background:linear-gradient(135deg,var(--purple-soft),#fff);border:1px solid #e3d4f2;border-radius:14px;padding:16px 18px;margin-bottom:14px;}
.hos-header h2{margin:0 0 4px;font-size:1.1rem;color:#5a3b86;}
.hos-legal{font-size:.72rem;color:#6b6470;line-height:1.4;}
.hos-limits{font-size:.74rem;color:#7a5b12;background:var(--gold-soft);border-radius:8px;padding:6px 10px;margin-top:8px;display:inline-block;}
.hos-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:.84rem;}
.hos-meta b{color:var(--ink);}
.hos-day{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;}
.hos-day.today{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft);}
.hos-day-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;}
.hos-day-head .dn{font-weight:800;color:#5a3b86;font-size:1rem;}
.hos-day-head .dd{font-size:.76rem;color:var(--muted);}
.hos-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.hos-fields .fld{display:flex;flex-direction:column;gap:3px;}
.hos-fields label{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:#574f5e;}
.hos-fields input,.hos-fields select{padding:7px 9px;border:1px solid var(--line);border-radius:8px;font-size:.84rem;width:100%;}
.hos-checks{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;padding-top:10px;border-top:1px solid #f1edf3;}
.hos-checks label{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:500;color:var(--ink);}
.hos-checks input{width:17px;height:17px;}
.hos-cert{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:14px;}
.hos-cert .ct{font-size:.84rem;color:#574f5e;font-style:italic;margin-bottom:12px;}
.hos-cert-done{background:#e3f5ea;color:#1f7a47;border:1px solid #bfe6cf;border-radius:8px;padding:8px 12px;font-size:.82rem;font-weight:600;margin-bottom:12px;}
@media (max-width:720px){
  .hos-fields{grid-template-columns:repeat(2,1fr);}
  .hos-fields .fld input,.hos-fields .fld select{font-size:16px;padding:10px 11px;}  /* mata auto-zoom iOS + dedo */
  .hos-checks{gap:16px 18px;}
  .hos-checks input[type=checkbox]{width:22px;height:22px;}
  .hos-checks label{font-size:.86rem;}
  .hos-checks input[type=text]{font-size:16px!important;}
  .doc-x{font-size:1.1rem;padding:4px 6px;}
}

/* ---- Modal ---- */
.modal-backdrop{position:fixed;inset:0;background:rgba(21,15,20,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:60;padding:20px;animation:gbfFade .16s ease;}
.modal{background:var(--surface);border-radius:18px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:gbfPop .18s cubic-bezier(.2,.8,.2,1);}
.modal-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.modal-head h3{margin:0;font-size:1.05rem;}
.modal-x{border:0;background:none;font-size:1.4rem;color:var(--muted);line-height:1;cursor:pointer;}
.modal-body{padding:20px;}
.modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;}

/* ---- Toast ---- */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 20px;border-radius:10px;font-size:.88rem;font-weight:600;z-index:80;box-shadow:0 10px 30px rgba(0,0,0,.3);opacity:0;transition:opacity .2s,transform .2s;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px);}
.toast.err{background:#c0392b;}

@media (max-width:720px){
  .form-grid{grid-template-columns:1fr;}
  /* 16px mata el auto-zoom de iOS al enfocar; área táctil mayor */
  .field input,.field select,.field textarea,.addon-row input{font-size:16px;padding:12px;}
  /* Cotizador: el resultado en vivo sube y queda fijo bajo los headers */
  .quote-grid{display:flex;flex-direction:column;}
  .quote-grid #quoteResult{order:-1;position:sticky;top:112px;z-index:5;box-shadow:var(--shadow-lg);border:2px solid var(--gold);}
  .quote-grid .form-grid{grid-template-columns:1fr;}
  .quote-answer .qa-rate{font-size:1.9rem;}
  .addon-row{flex-wrap:wrap;}
  .addon-row input{width:100%;}
  #qLaneHint:empty{margin:0;min-height:0;}
  .dash-2col{grid-template-columns:1fr !important;}
  .modal{max-width:100%;}
  .toast{bottom:22px;}
  .topbar-logout{display:inline-flex;align-items:center;}
  /* Menu como barra SUPERIOR fija (antes era inferior) */
  .sidebar{width:100%;position:fixed;top:0;bottom:auto;left:0;height:auto;flex-direction:row;
    z-index:40;border-bottom:1px solid rgba(255,255,255,.12);}
  .brand,.sidebar-foot{display:none;}
  .nav{display:flex;padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .nav::-webkit-scrollbar{display:none;}
  .nav-group{display:contents;}          /* en móvil los ítems fluyen en la barra horizontal */
  .nav-group-label{display:none;}        /* sin headers de sección en la barra móvil */
  .nav-item{flex:1 0 auto;width:auto;min-width:62px;flex-direction:column;gap:3px;font-size:.62rem;padding:8px 4px;justify-content:center;}
  .nav-item.active::before{left:7px;right:7px;top:auto;bottom:0;width:auto;height:3px;border-radius:2px 2px 0 0;}
  .nav-ico{font-size:1.1rem;}
  /* El topbar (titulo/idioma/salir) se pega justo debajo del menu */
  .topbar{top:56px;}
  .main{padding-top:56px;padding-bottom:0;}
}

/* ===== Mejoras de fluidez ===== */
/* Animaciones base */
@keyframes gbfFade{from{opacity:0}to{opacity:1}}
@keyframes gbfRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes gbfPop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes gbfSpin{to{transform:rotate(360deg)}}
@keyframes gbfShimmer{100%{background-position:-200% 0}}

/* Fade suave del contenido al cambiar de vista / recargar datos */
#viewBody.fade{animation:gbfRise .18s ease both;}

/* Spinner (carga) */
.spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:gbfSpin .6s linear infinite;vertical-align:-2px;}
.spin-lg{width:30px;height:30px;border-width:3px;color:var(--purple);}
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:54px 20px;color:var(--muted);}

/* Botón ocupado (Guardando…) */
.btn[disabled]{opacity:.65;cursor:default;pointer-events:none;}
.btn .spin{margin-right:6px;color:currentColor;}

/* Skeleton (placeholders mientras carga) */
.skel{background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);background-size:200% 100%;animation:gbfShimmer 1.2s ease-in-out infinite;border-radius:8px;}
.skel-line{height:12px;margin:8px 0;}
.skel-card{height:96px;margin-bottom:12px;border-radius:14px;}

/* Búsqueda en listas (reusa el look de load-search) */
.list-search{flex:1;min-width:180px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;font-size:.88rem;outline:none;}
.list-search:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-soft);}

/* Accesibilidad: si el usuario pide menos movimiento, lo respetamos */
@media (prefers-reduced-motion: reduce){
  *,#viewBody.fade,.modal,.modal-backdrop{animation:none !important;transition:none !important;}
  .spin{animation:gbfSpin .6s linear infinite;}
}

/* ===== Refinamiento moderno (profundidad) ===== */
/* Tarjetas interactivas: sombra + elevacion al pasar el cursor */
.truck-card,.load-card,.mtruck{border-radius:16px;box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .16s ease;}
.truck-card:hover,.load-card:hover,.mtruck:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}

/* Inputs de formulario mas suaves (relleno tenue dentro de tarjetas/modales) */
.field input:not([type=checkbox]),.field select,.field textarea{
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.field input:not([type=checkbox]):focus,.field select:focus,.field textarea:focus{
  background:#fff;border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-soft);
}

/* Buscadores y filtros: blancos y nitidos sobre el fondo gris */
.toolbar select,.load-search,.list-search{background:#fff;box-shadow:var(--shadow-sm);border-radius:10px;}
.toolbar select:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-soft);outline:none;}

/* Accesibilidad: anillo de foco visible por teclado */
.btn:focus-visible,.nav-item:focus-visible,.lang-toggle button:focus-visible{outline:2px solid var(--purple);outline-offset:2px;}

/* Login: tarjeta mas elevada */
.auth-card{box-shadow:var(--shadow-lg);border-radius:20px;}

/* Micro-interacciones */
.doc-chip{transition:background .15s,transform .15s;}
.doc-chip:hover{transform:translateY(-1px);}
.alert-card{box-shadow:var(--shadow-sm);border-radius:12px;}
.tag{border:1px solid rgba(21,15,20,.04);}

/* En la barra inferior movil los items van a ras (sin pill redondeado) */
@media (max-width:720px){
  .nav{padding:0;}
  .nav-item{margin:0;border-radius:0;}
}

/* Cotizador: formulario + resultado lado a lado */
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
@media (max-width:860px){ .quote-grid{grid-template-columns:1fr;} }
/* Cotizador: subtítulos de sección, respuesta clara, piso y avisos */
.form-sec{grid-column:1/-1;margin:8px 0 0;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--purple);font-weight:700;border-top:1px solid var(--line);padding-top:12px;}
.form-grid .form-sec:first-child{border-top:none;padding-top:0;margin-top:0;}
.quote-answer{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:flex-end;justify-content:space-between;padding:2px 0 14px;border-bottom:1px solid var(--line);margin-bottom:12px;}
.quote-answer .qa-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;margin-bottom:3px;}
.quote-answer .qa-rate{font-size:2.1rem;font-weight:800;color:#b8902f;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;}
.quote-answer .qa-aside{text-align:right;}
.quote-answer .qa-profit{font-size:1.5rem;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums;}
.quote-answer .qa-profit.pos,.quote-answer .qa-margin.pos{color:#1f9254;}
.quote-answer .qa-profit.neg,.quote-answer .qa-margin.neg{color:#c0392b;}
.quote-answer .qa-margin{font-size:.82rem;font-weight:600;}
.quote-floor{background:var(--gold-soft);border:1px solid #f0e3bd;border-left:3px solid var(--gold);color:#7a5b12;border-radius:10px;padding:10px 13px;font-size:.84rem;font-weight:600;margin-bottom:12px;}
.note-warn{background:var(--gold-soft);border:1px solid #f0e3bd;color:#7a5b12;border-radius:10px;padding:10px 13px;font-size:.84rem;margin-bottom:12px;}