/* v5: tema según la referencia */
:root{
  --bg:#EEF3FA; --app-top:#E3EDFC; --desk:#DCE5F2; --surface:#FFFFFF; --surface-2:#F3F6FB; --ink:#0F1A2B; --ink-2:#5D687A; --line:#E3E9F2; --edge:rgba(255,255,255,.95);
  --sign:#1766EA; --sign-ink:#FFFFFF; --sign-soft:#E4EEFF; --sign-text:#1766EA; --grad:linear-gradient(180deg,#3384F7 0%,#1561E2 100%);
  --ok:#1C8A50; --ok-soft:#DDF5E7; --warn:#B45309; --warn-soft:#FFF1DE; --bad:#E5322D; --bad-soft:#FFE6E5;
  --green:#1E9E5A; --green-soft:#DDF5E7; --violet:#7C3AED; --violet-soft:#EFE8FF; --hero-tint:#D9E7FD; --glass:rgba(255,255,255,.82);
  --shadow:0 1px 2px rgba(20,40,90,.04), 0 12px 32px -14px rgba(30,70,150,.22);
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D131D; --app-top:#132137; --desk:#080C13; --surface:#151D29; --surface-2:#1C2633; --ink:#EAF0F8; --ink-2:#9DADC2; --line:#243041; --edge:#243041;
    --sign:#3B82F6; --sign-soft:#182A46; --sign-text:#82B2FF; --grad:linear-gradient(180deg,#3D88F8 0%,#1F64E0 100%);
    --ok:#5CC98B; --ok-soft:#14321F; --warn:#F2A66A; --warn-soft:#3A2717; --bad:#FF7A72; --bad-soft:#3B1D1B;
    --green:#4CC987; --green-soft:#14321F; --violet:#B194FF; --violet-soft:#2A2145; --hero-tint:#1B2C49; --glass:rgba(21,29,41,.86);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 32px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bg:#0D131D; --app-top:#132137; --desk:#080C13; --surface:#151D29; --surface-2:#1C2633; --ink:#EAF0F8; --ink-2:#9DADC2; --line:#243041; --edge:#243041;
  --sign:#3B82F6; --sign-soft:#182A46; --sign-text:#82B2FF; --grad:linear-gradient(180deg,#3D88F8 0%,#1F64E0 100%);
  --ok:#5CC98B; --ok-soft:#14321F; --warn:#F2A66A; --warn-soft:#3A2717; --bad:#FF7A72; --bad-soft:#3B1D1B;
  --green:#4CC987; --green-soft:#14321F; --violet:#B194FF; --violet-soft:#2A2145; --hero-tint:#1B2C49; --glass:rgba(21,29,41,.86);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 32px -14px rgba(0,0,0,.7);
}
body{-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
.app{background:linear-gradient(180deg,var(--app-top) 0%,var(--bg) 320px)}
@media (min-width:700px){ .app{border-color:var(--edge)} }
h1{font-size:30px;font-weight:800;letter-spacing:-.025em}
h2{font-size:21px;letter-spacing:-.015em}
.lede{font-size:15.5px;line-height:1.45}

/* Cabecera y selector de rol */
.top{padding:16px 20px 12px}
.brand{font-size:26px;font-weight:800;gap:12px;letter-spacing:-.02em}
.brand .logo{width:46px;height:46px;border-radius:14px;background:var(--grad);display:grid;place-items:center;box-shadow:0 8px 16px -8px rgba(23,102,234,.75)}
.brand .logo svg{width:26px;height:26px}
.iconbtn{width:46px;height:46px;border-radius:999px;border:1px solid var(--edge);background:var(--surface);box-shadow:var(--shadow);color:var(--ink)}
.subhead .iconbtn{width:42px;height:42px}
.menu{top:68px;border-radius:18px;border-color:var(--line)}
.rolebar{padding:2px 18px 14px}
.role{grid-template-columns:repeat(3,minmax(0,1fr));background:var(--glass);border:1px solid var(--edge);border-radius:999px;padding:5px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.role button{border-radius:999px;padding:11px 3px 10px;font-size:14px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;white-space:nowrap;overflow:hidden}
.role button .ic{width:17px;height:17px}
@media (max-width:389px){ .role button .ic{display:none} }

/* Botones y segmentos */
.btn{border-radius:18px;font-weight:700}
.btn.primary{background:var(--grad);box-shadow:0 12px 22px -14px rgba(23,102,234,.95)}
.btn.secondary{border-color:var(--line);box-shadow:0 1px 2px rgba(20,40,90,.05)}
.seg{border-radius:999px;padding:4px;border-color:var(--line);box-shadow:0 1px 2px rgba(20,40,90,.05)}
.seg button{border-radius:999px;padding:9px 16px 8px;font-weight:600;color:var(--ink-2)}
.seg button[aria-checked="true"]{background:var(--grad);color:#fff;box-shadow:0 8px 16px -10px rgba(23,102,234,.9)}
.chip{border-radius:999px;border-color:var(--line);background:var(--surface);box-shadow:0 1px 2px rgba(20,40,90,.05);padding:10px 16px 9px;font-weight:600;white-space:nowrap}
.chip .ic{width:18px;height:18px}
.chip[aria-checked="true"]{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 8px 16px -10px rgba(23,102,234,.9)}
.field,textarea{border-radius:14px;border-color:var(--line)}
.linkbtn{text-decoration:none;font-weight:600}

/* Tarjetas */
.composer,.repeat,.form,.plan,.ticket,.list,.aviso,.drvdoc{border-radius:24px;border:1px solid var(--edge);box-shadow:var(--shadow)}
.empty{border-radius:22px}
.callout{border-radius:22px}
.note,.done,.voided,.elim{border-radius:16px}
.hero{position:relative;overflow:hidden;background:linear-gradient(105deg,var(--surface) 40%,var(--hero-tint) 100%);border:1px solid var(--edge);border-radius:28px;padding:24px 20px 22px;margin-top:4px;box-shadow:var(--shadow);min-height:160px;display:flex;align-items:center}
.hero-txt{position:relative;z-index:1;max-width:64%}
.hero h1{font-size:30px;line-height:1.08;margin:0 0 10px}
.hero .lede{font-size:15.5px}
.hero-art{position:absolute;right:-26px;top:50%;transform:translateY(-46%);width:170px;height:auto;pointer-events:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hero-art{opacity:.6} }
:root[data-theme="dark"] .hero-art{opacity:.6}
.stats{gap:10px;margin-top:16px}
.stat{position:relative;display:block;width:100%;text-align:left;border-radius:24px;border:1px solid var(--edge);background:var(--surface);box-shadow:var(--shadow);padding:14px 14px 14px;color:var(--ink)}
.stat .tile{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;margin-bottom:12px}
.stat .tile .ic{width:21px;height:21px;stroke-width:2}
.tile.blue{background:var(--sign-soft);color:var(--sign)}
.tile.green{background:var(--green-soft);color:var(--green)}
.tile.violet{background:var(--violet-soft);color:var(--violet)}
.stat b{font-size:32px;line-height:1}
.stat span{font-size:14.5px;margin-top:6px;color:var(--ink-2)}
.stat .go{position:absolute;right:10px;top:62px;color:var(--ink-2)}
.stat .go .ic{width:18px;height:18px}
.sechead{display:flex;align-items:center;justify-content:space-between;margin:30px 2px 12px}
.sechead h2{margin:0}
.more{border:0;background:none;color:var(--sign-text);font-weight:600;font-size:15.5px;display:inline-flex;align-items:center;gap:2px;padding:6px 0}
.more .ic{width:17px;height:17px}
.filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -18px 12px;padding:2px 18px 8px;gap:8px}
.filters::-webkit-scrollbar{display:none}
.filters .chips{flex-wrap:nowrap}
.fsep{width:1px;flex:none;align-self:stretch;background:var(--line);margin:6px 2px}
.rowcard{display:flex;align-items:center;gap:14px;width:100%;background:var(--surface);border:1px solid var(--edge);border-radius:22px;padding:16px;box-shadow:var(--shadow);font-weight:600;font-size:16.5px;color:var(--ink);text-align:left;margin:0 0 12px}
.rowcard > .ic{width:24px;height:24px;color:var(--ink-2)}
.rowcard span.t{flex:1}
.chev,.rowcard .chev{color:var(--ink-2);display:grid;flex:none}
.chev .ic{width:18px;height:18px}

/* Listas */
.list .item{position:relative;border-top:0;padding:16px 12px 16px 16px}
.list .item + .item::before{content:"";position:absolute;left:16px;right:16px;top:0;border-top:1px solid var(--line)}
.item .time{font-weight:500;font-size:16px;width:52px;color:var(--ink-2)}
.route{font-size:17px;font-weight:700;letter-spacing:-.01em}
.route .ic{width:17px;height:17px}
.meta{font-size:14.5px}
.badge{font-size:13px;font-weight:600;padding:5px 12px 4px}
.plate{height:30px;border-radius:6px}
.plate .eu{width:17px}
.plate .num{font-size:16px;padding:4px 9px 0}
.group{font-size:14px;font-weight:700;margin:22px 4px 10px}
.list .item{gap:10px}
.item .route{display:block;font-size:16.5px;line-height:1.3}
.item .route .ic{display:inline-block;vertical-align:-3px;margin:0 2px}
.item .time{width:46px;font-size:15px}
.item .plate{height:27px}
.item .plate .eu{width:15px}
.item .plate .num{font-size:14.5px;padding:3px 7px 0}

/* Barra inferior */
.tabs{margin:0 10px calc(6px + env(safe-area-inset-bottom,0px) * 0);border:1px solid var(--edge);border-radius:30px;background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 -4px 30px -14px rgba(30,70,150,.3);padding:8px}
.tabs button{border-radius:22px;padding:9px 0 8px;font-size:13px;font-weight:600;gap:4px}
.tabs button .ic{width:26px;height:26px}
.tabs button[aria-current="page"]{background:var(--sign-soft);color:var(--sign-text)}
.toast{bottom:104px;border-radius:16px}

/* v6: blanco, gris y negro con cristal */
:root{
  --bg:#E6E6E8; --desk:#D4D4D8; --surface:#FFFFFF; --surface-2:rgba(255,255,255,.7); --ink:#111113; --ink-2:#3F3F45; --line:rgba(17,17,19,.1); --edge:rgba(255,255,255,.8);
  --sign:#111113; --sign-ink:#FFFFFF; --sign-soft:rgba(17,17,19,.08); --sign-text:#111113; --grad:#111113;
  --ok:#111113; --ok-soft:rgba(17,17,19,.07); --warn:#111113; --warn-soft:rgba(17,17,19,.06); --bad:#111113; --bad-soft:rgba(17,17,19,.08);
  --sug:rgba(255,255,255,.92); --sug-line:#6B6B72;
  --glass:rgba(255,255,255,.56); --glass-strong:rgba(255,255,255,.86); --field:rgba(255,255,255,.82); --blur:blur(22px) saturate(140%);
  --t-box:rgba(255,255,255,.92); --t-stripe:#8E8E94; --t-cab:#111113; --t-win:rgba(255,255,255,.72); --t-bump:#3A3A40; --t-wheel:#111113; --t-hub:#D4D4D8;
  --blob-a:rgba(255,255,255,1); --blob-b:rgba(42,42,46,.42); --blob-c:rgba(156,156,163,.7); --blob-d:rgba(58,58,63,.45);
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 14px 32px -18px rgba(0,0,0,.38);
  --font:"Figtree", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A0A0B; --desk:#000000; --surface:#1A1A1D; --surface-2:rgba(255,255,255,.07); --ink:#F4F4F6; --ink-2:#B4B4BA; --line:rgba(255,255,255,.12); --edge:rgba(255,255,255,.16);
    --sign:#F4F4F6; --sign-ink:#0A0A0B; --sign-soft:rgba(255,255,255,.1); --sign-text:#F4F4F6; --grad:#F4F4F6;
    --ok:#F4F4F6; --ok-soft:rgba(255,255,255,.08); --warn:#F4F4F6; --warn-soft:rgba(255,255,255,.07); --bad:#F4F4F6; --bad-soft:rgba(255,255,255,.1);
    --sug:rgba(255,255,255,.1); --sug-line:#8E8E94;
    --glass:rgba(255,255,255,.08); --glass-strong:rgba(28,28,31,.9); --field:rgba(255,255,255,.07);
    --t-box:#2C2C31; --t-stripe:#8E8E94; --t-cab:#F4F4F6; --t-win:rgba(10,10,11,.5); --t-bump:#5A5A60; --t-wheel:#000000; --t-hub:#8E8E94;
    --blob-a:rgba(107,107,114,.5); --blob-b:rgba(58,58,64,.8); --blob-c:rgba(138,138,144,.32); --blob-d:rgba(74,74,80,.6);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 32px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#0A0A0B; --desk:#000000; --surface:#1A1A1D; --surface-2:rgba(255,255,255,.07); --ink:#F4F4F6; --ink-2:#B4B4BA; --line:rgba(255,255,255,.12); --edge:rgba(255,255,255,.16);
  --sign:#F4F4F6; --sign-ink:#0A0A0B; --sign-soft:rgba(255,255,255,.1); --sign-text:#F4F4F6; --grad:#F4F4F6;
  --ok:#F4F4F6; --ok-soft:rgba(255,255,255,.08); --warn:#F4F4F6; --warn-soft:rgba(255,255,255,.07); --bad:#F4F4F6; --bad-soft:rgba(255,255,255,.1);
  --sug:rgba(255,255,255,.1); --sug-line:#8E8E94;
  --glass:rgba(255,255,255,.08); --glass-strong:rgba(28,28,31,.9); --field:rgba(255,255,255,.07);
  --t-box:#2C2C31; --t-stripe:#8E8E94; --t-cab:#F4F4F6; --t-win:rgba(10,10,11,.5); --t-bump:#5A5A60; --t-wheel:#000000; --t-hub:#8E8E94;
  --blob-a:rgba(107,107,114,.5); --blob-b:rgba(58,58,64,.8); --blob-c:rgba(138,138,144,.32); --blob-d:rgba(74,74,80,.6);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 32px -16px rgba(0,0,0,.8);
}
.app{background:
  radial-gradient(circle at 108% -4%, var(--blob-a) 0, transparent 42%),
  radial-gradient(circle at -14% 28%, var(--blob-b) 0, transparent 38%),
  radial-gradient(circle at 112% 62%, var(--blob-c) 0, transparent 40%),
  radial-gradient(circle at 26% 108%, var(--blob-d) 0, transparent 38%),
  var(--bg)}
.hero,.stat,.composer,.repeat,.form,.plan,.list,.aviso,.drvdoc,.rowcard,.role,.tabs,.iconbtn,.empty,.seg,.callout,.btn.secondary,.annul,.elim,.chip:not([aria-checked="true"]){
  background:var(--glass);border-color:var(--edge);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.annul{border:1.5px solid var(--ink)}
.ticket,.menu{background:var(--glass-strong);border-color:var(--edge);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.hero{background:var(--glass)}
.hero-art{opacity:1!important}
.field,textarea,.composer textarea{background:var(--field);border-color:var(--line)}
.field.sug{border-style:dashed;border-width:1.5px}
.chip.sug{border-style:dashed;border-color:var(--sug-line)}
.chip[aria-checked="true"],.seg button[aria-checked="true"],.role button[aria-checked="true"]{background:var(--sign);color:var(--sign-ink);box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
.chip.platechip[aria-checked="true"]{background:var(--glass-strong);color:var(--ink);box-shadow:0 0 0 2px var(--sign) inset}
.tabs button[aria-current="page"]{background:var(--sign);color:var(--sign-ink)}
.btn.primary{background:var(--sign);color:var(--sign-ink);box-shadow:0 12px 22px -14px rgba(0,0,0,.7)}
.btn.danger{background:var(--glass);border-color:var(--ink);color:var(--ink)}
.btn.danger.solid{background:var(--ink);color:var(--sign-ink)}
.badge.bad{background:var(--ink);color:var(--sign-ink)}
.badge.ok{background:var(--sign-soft);color:var(--ink)}
.badge.warn{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.voided{background:var(--sign-soft);color:var(--ink)}
.brand .logo{background:var(--sign);box-shadow:0 8px 18px -8px rgba(0,0,0,.6)}
.brand .logo svg{stroke:var(--sign-ink)}
.tile.blue{background:var(--sign);color:var(--sign-ink)}
.tile.green{background:var(--sign-soft);color:var(--ink)}
.tile.violet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.more{color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-weight:700}
.linkbtn{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sign{background:#111113}
.sign-in{border-color:#FFFFFF;color:#FFFFFF}
.stamp{background:var(--glass-strong)}
.mic{background:var(--field);border-color:var(--line)}
.mic.rec{background:var(--sign);color:var(--sign-ink);border-color:var(--sign)}
@keyframes micpulse{0%{box-shadow:0 0 0 0 rgba(17,17,19,.35)}100%{box-shadow:0 0 0 12px rgba(17,17,19,0)}}
.toast{background:var(--ink);color:var(--bg)}

/* v7: logo D en blanco, gris y negro */
:root{ --mark-tile:#FFFFFF; --mark-grad:conic-gradient(from 180deg at 11.66px 14.02px, #0B0B0D 0%, #2C2C31 18%, #5A5A61 38%, #8E8E95 55%, #C2C2C8 72%, #E6E6EA 86%, #FFFFFF 100%); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --mark-tile:#1C1C20; --mark-grad:conic-gradient(from 180deg at 11.66px 14.02px, #FFFFFF 0%, #E2E2E6 18%, #B4B4BA 38%, #85858C 55%, #5A5A61 72%, #36363B 86%, #1C1C20 100%); } }
:root[data-theme="dark"]{ --mark-tile:#1C1C20; --mark-grad:conic-gradient(from 180deg at 11.66px 14.02px, #FFFFFF 0%, #E2E2E6 18%, #B4B4BA 38%, #85858C 55%, #5A5A61 72%, #36363B 86%, #1C1C20 100%); }
.brand .logo{background:var(--mark-tile);border:1px solid var(--edge);box-shadow:0 8px 18px -10px rgba(0,0,0,.45)}
.dmark{display:block;width:25.2px;height:28px;background:var(--mark-grad);clip-path:path('M0 0H10.9C19.13 0 25.17 6.33 25.17 14.02C25.17 21.96 19.13 28 11.66 28H0Z')}

/* v8: planes y precios */
.plan .plan-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plan .price{display:flex;align-items:baseline;gap:4px;margin:8px 0 0;color:var(--ink)}
.plan .amount{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.plan .per{font-size:16px;font-weight:600;color:var(--ink-2)}
.plan .sub{margin:2px 0 0;font-size:14px;color:var(--ink-2)}
.plan.star:not(.current){box-shadow:0 0 0 1.5px var(--ink) inset, var(--shadow)}
.plans .plan .btn{margin-top:2px}
.tabs.t5{padding:6px}.tabs.t5 button{font-size:11.5px;padding:9px 0 7px;letter-spacing:-.01em}
.opt{font-weight:500;color:var(--ink-2);font-size:14px}
button:disabled{opacity:.55;cursor:default}