/* Layout: franja de marcas (Migro + OT AsiSST), título del reto, mapa y posiciones; Gestión Humana suma el editor de ruta. Naranja = acciones, verde = líder y progreso, azul marino = estructura. */
:root{
  --bg:#F2F5F9; --surface:#FFFFFF; --ink:#012545; --muted:#566782; --line:#D7DFEA;
  --accent:#F26101; --accent-ink:#012545; --green:#70BC26; --green-ink:#012545; --navy:#304269;
  --chip:#FFFFFF;
  --land:#D8E4F0; --sea:#EAF1F8; --neigh:#F0F3F7; --route:#304269;
  --warn:#9A4A00; --warn-bg:#FCEFD9; --danger:#B3261E; --danger-bg:#FBE4E2;
  --font-display:'Montserrat','Segoe UI',Arial,sans-serif;
  --font-body:'Open Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#06182C; --surface:#0D2640; --ink:#E9EFF8; --muted:#95A6BF; --line:#1E3A5A;
    --accent:#F26101; --accent-ink:#012545; --green:#70BC26; --green-ink:#012545; --navy:#9FB3D6;
    --land:#17344F; --sea:#0A1F36; --neigh:#0F2742; --route:#C9D6EA;
    --warn:#F0A44B; --warn-bg:#2E2010; --danger:#FF8A80; --danger-bg:#3A1816;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#06182C; --surface:#0D2640; --ink:#E9EFF8; --muted:#95A6BF; --line:#1E3A5A;
  --accent:#F26101; --accent-ink:#012545; --green:#70BC26; --green-ink:#012545; --navy:#9FB3D6;
  --land:#17344F; --sea:#0A1F36; --neigh:#0F2742; --route:#C9D6EA;
  --warn:#F0A44B; --warn-bg:#2E2010; --danger:#FF8A80; --danger-bg:#3A1816;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:15px; line-height:1.45;
  padding-block:20px 48px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
.wrap{max-width:1180px; margin:0 auto; display:flex; flex-direction:column; gap:16px}
h1,h2{font-family:var(--font-display); margin:0; text-wrap:balance}
h1{font-size:clamp(26px,4.6vw,38px); line-height:1.1; font-weight:800; letter-spacing:-.01em}
h2{font-size:15px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:12px}
.fine{font-size:13px; color:var(--muted); margin:10px 0 0}
a{color:inherit}

.top{display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:space-between}
.brandbar{display:flex; align-items:center; gap:16px; background:var(--chip); border:1px solid var(--line); border-radius:10px; padding:8px 16px}
.brandbar img{display:block; width:auto; height:40px}
.brandbar img.ot{height:48px}
.sep{width:1px; align-self:stretch; background:#D7DFEA}
.tabs{display:flex; border:1px solid var(--line); border-radius:8px; background:var(--surface); padding:3px; gap:3px}
.tabs a{text-decoration:none; padding:8px 16px; border-radius:6px; font-weight:600; color:var(--muted)}
.tabs a[aria-current="page"]{background:var(--ink); color:var(--bg)}
.tabs a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,textarea:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.title{min-width:0}
.sub{margin:6px 0 0; color:var(--muted)}

.race-bar{height:8px; background:var(--line); border-radius:4px; overflow:hidden}
.race-bar span{display:block; height:100%; background:var(--green)}
.race-meta{display:flex; justify-content:space-between; gap:8px; font-size:13px; color:var(--muted); margin-top:5px; font-variant-numeric:tabular-nums}
.demo-note{margin:0; font-size:13px; color:var(--warn); background:var(--warn-bg); padding:8px 12px; border-radius:6px}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px; min-width:0}
.grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:16px; align-items:start}
.stack{display:flex; flex-direction:column; gap:16px; min-width:0}
@media (max-width:860px){ .grid{grid-template-columns:minmax(0,1fr)} }

.map svg{width:100%; height:auto; display:block; border-radius:6px}
.sea{fill:var(--sea)} .neigh{fill:var(--neigh); stroke:var(--line); stroke-width:.8}
.land{fill:var(--land); stroke:var(--muted); stroke-width:1}
.route{fill:none; stroke:var(--route); opacity:.7; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:1 7}
.route-solid{fill:none; stroke:var(--route); opacity:.25; stroke-linejoin:round}
.stop{fill:var(--surface); stroke:var(--route)}
.stop-start{fill:var(--green); stroke:var(--route)}
.stop-end{fill:var(--accent); stroke:var(--route)}
.city{font-family:var(--font-body); font-weight:600; fill:var(--ink); paint-order:stroke; stroke:var(--land); stroke-linejoin:round}
.lbl-box{fill:var(--surface); stroke:var(--line)}
.lbl-txt{font-family:var(--font-body); font-weight:600; fill:var(--ink)}
.mk-ring{fill:none; stroke:var(--green)}
.mk{stroke:var(--surface)}
.mk-txt{font-family:var(--font-display); font-weight:800; text-anchor:middle}
.conn{stroke:var(--muted); opacity:.7}

.trow{padding:10px 0; border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:0; padding-bottom:0}
.trow:first-child{padding-top:0}
.trow-head{display:grid; grid-template-columns:26px 12px minmax(0,1fr) auto; gap:10px; align-items:center}
.rank{font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--muted); text-align:center}
.dot{width:12px; height:12px; border-radius:50%; display:inline-block; flex:none}
.tname{font-weight:600; display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center}
.tstage{font-size:13px; color:var(--muted)}
.tkm{font-family:var(--font-display); font-weight:700; font-size:18px; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.tkm small{font-family:var(--font-body); font-weight:400; font-size:13px; color:var(--muted)}
.bar{height:6px; background:var(--line); border-radius:3px; margin:8px 0 0 48px; overflow:hidden}
.bar span{display:block; height:100%; border-radius:3px}
.pill{display:inline-block; font-size:12px; font-weight:600; padding:1px 8px; border-radius:99px; background:var(--line); color:var(--muted); line-height:1.6}
.pill.lead{background:var(--green); color:var(--green-ink)}
.pill.warn{background:var(--warn-bg); color:var(--warn)}
.pill.me{background:var(--accent); color:var(--accent-ink)}

form{display:flex; flex-direction:column; gap:12px}
.row2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px}
@media (max-width:420px){ .row2{grid-template-columns:minmax(0,1fr)} }
label{display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; color:var(--muted); min-width:0}
input,select,textarea{font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:9px 10px; min-height:40px; width:100%; min-width:0}
input[type=file]{padding:7px 8px; font-size:13px}
textarea{min-height:90px; resize:vertical}
button{font:inherit; font-weight:600; cursor:pointer; border-radius:6px; padding:9px 16px; min-height:40px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink)}
button.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
button.small{min-height:30px; padding:3px 9px; font-size:13px}
button:disabled{opacity:.4; cursor:default}
button.danger{background:transparent; color:var(--danger); border-color:var(--danger)}
.preview{font-size:14px; margin:0; color:var(--ink)}
.err{font-size:14px; margin:0; color:var(--danger); background:var(--danger-bg); padding:8px 10px; border-radius:6px}

.kv{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin:0 0 14px}
.kv div{min-width:0}
.kv dt{font-size:13px; color:var(--muted)}
.kv dd{margin:0; font-family:var(--font-display); font-weight:700; font-size:24px; line-height:1.2; font-variant-numeric:tabular-nums}
.mini{list-style:none; margin:0; padding:0; font-size:14px}
.mini li{display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid var(--line)}
.mini li span:first-child{color:var(--muted)}

.tbl-wrap{overflow-x:auto}
.tbl-wrap.scroll{max-height:340px; overflow-y:auto}
table{border-collapse:collapse; width:100%; font-size:14px}
th{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); text-align:left; font-weight:600; padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:middle}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tr.void td{opacity:.55}
tr.void td:last-child{opacity:1}
td select{min-height:32px; padding:4px 6px; font-size:13px}
td input[type=number]{min-height:32px; padding:4px 6px; font-size:13px; width:84px; text-align:right}
td.acts{white-space:nowrap; text-align:right}
td.acts button{margin-left:4px}
.inline-form{flex-direction:row; flex-wrap:wrap; align-items:flex-end; margin-top:12px}
.inline-form label{flex:1 1 160px}
details{margin-top:12px}
summary{cursor:pointer; font-weight:600; font-size:14px}
details textarea{margin:8px 0}
.rules{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px}
@media (max-width:420px){ .rules{grid-template-columns:minmax(0,1fr)} }
.route-ed{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:16px; align-items:start}
.route-form{display:flex; flex-direction:column; gap:12px; min-width:0}
@media (max-width:860px){ .route-ed{grid-template-columns:minmax(0,1fr)} }

.chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
button.chip{background:transparent; color:var(--ink); border:1px solid var(--line); min-height:32px; padding:4px 12px; font-size:13px; border-radius:99px}
button.chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.card{border:1px solid var(--line); border-radius:8px; padding:12px; display:flex; flex-direction:column; gap:6px; min-width:0}
.card.on{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.card h3{font-family:var(--font-display); font-size:15px; margin:0; font-weight:700}
.card p{margin:0; font-size:13px}
.card .meta{color:var(--muted)}
.card p.d{flex:1}
.card button{align-self:flex-start; margin-top:4px}
.route-desc{margin:-4px 0 12px; color:var(--muted)}
#toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom, 0px)); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:8px; font-weight:600; max-width:calc(100% - 32px); z-index:20; box-shadow:0 4px 16px rgba(0,0,0,.25)}
@media (prefers-reduced-motion: no-preference){ .race-bar span,.bar span{transition:width .4s ease} }

/* ---- Versión con cuentas ---- */
[hidden]{display:none!important}
.topright{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center}
.who{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted)}
.who span{max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.loading{color:var(--muted); text-align:center; padding:40px 0}
.auth-box{max-width:420px; margin:10px auto 0; display:flex; flex-direction:column; gap:12px}
.auth-box h1{font-size:28px}
.auth-links{line-height:2}
button.link{background:none; border:0; padding:0; min-height:0; color:var(--ink); text-decoration:underline; font-weight:600; font-size:14px}
.btnrow{display:flex; gap:10px; flex-wrap:wrap}
.pill.ok{background:var(--green); color:var(--green-ink)}
.pill.off{background:var(--danger-bg); color:var(--danger)}
td small{display:block; color:var(--muted); font-size:12px}
.demo-note{margin:0}

/* ---- Google Maps ---- */
.map.g{height:clamp(320px,56vw,520px); border-radius:6px; overflow:hidden}
.gm-ov{position:absolute; pointer-events:none}
.gm-stop{display:flex; align-items:center; gap:5px; transform:translate(-6px,-6px); white-space:nowrap}
.gm-stop i{width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid #304269; flex:none}
.gm-stop.start i{background:#70BC26}
.gm-stop.end i{background:#F26101}
.gm-stop span{font:600 12px 'Open Sans',system-ui,sans-serif; color:#012545; text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff}
.gm-team{display:flex; align-items:flex-start; gap:6px; transform:translate(-13px,-13px)}
.gm-cs{display:flex; flex:none}
.gm-c{width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:800 13px Montserrat,system-ui,sans-serif; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35)}
.gm-c.lead{box-shadow:0 0 0 3px #70BC26,0 1px 4px rgba(0,0,0,.35)}
.gm-ps{display:flex; flex-direction:column; gap:2px}
.gm-p{display:flex; align-items:center; gap:5px; background:#fff; color:#012545; border:1px solid #D7DFEA; border-radius:4px; padding:1px 6px; font:600 12px 'Open Sans',system-ui,sans-serif; white-space:nowrap; box-shadow:0 1px 3px rgba(0,0,0,.2)}
.gm-p b{width:8px; height:8px; border-radius:50%; flex:none}