:root{
  --bg1:#0b1720;
  --bg2:#0e2e35;
  --card:#0f2230;
  --text:#eaf2f7;
  --muted:#bcd0da;
  --border:rgba(255,255,255,.15);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 20% -10%, #3a179f 0%, transparent 60%),
    radial-gradient(900px 600px at 120% 10%, #0ea5b7 0%, transparent 55%),
    linear-gradient(120deg, var(--bg1), var(--bg2));
  min-height:100dvh;
}

.wrap{max-width:1100px;margin:auto;padding:0 20px}

/* Top bar */
.bar{
  position:sticky;top:0;z-index:20;
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,.25);
}
.bar-in{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
h1{margin:0;font-size:20px;font-weight:800}
h1 .g{background:linear-gradient(90deg,#fbbf24,#fb7185,#0ea5b7);
  -webkit-background-clip:text;color:transparent}
.sub{color:var(--muted)}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:12px;border:1px solid var(--border);
  background:rgba(255,255,255,.06);color:var(--text);cursor:pointer;font-weight:600;
}
.btn.primary{background:#fff;color:#0b1720;border-color:#fff}
.btn.ghost{background:rgba(255,255,255,.08)}
.btn:active{transform:translateY(1px)}
.actions{display:flex;gap:10px}

/* Panel de controles */
.main{display:grid;grid-template-columns:380px 1fr;gap:18px;padding:20px 0}
@media (max-width: 980px){ .main{grid-template-columns:1fr} }

.panel{
  border:1px solid var(--border);background:var(--card);
  border-radius:var(--radius);padding:16px;display:grid;gap:14px;
}
.row{display:grid;gap:8px}
.lab{opacity:.9}
.mini{opacity:.85}
.stops #stops, .dist #positions{display:grid;gap:10px}
.stop-actions{display:flex;gap:10px}

/* Inputs de paradas */
.stop{
  display:grid;grid-template-columns:90px 1fr auto;gap:10px;align-items:center;
}
.stop input[type="color"]{width:90px;height:40px;border:none;background:none}
.stop input[type="range"]{width:100%}

/* Segment control */
.seg{display:inline-grid;grid-template-columns:auto auto;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.seg input{display:none}
.seg label{padding:8px 12px;background:rgba(255,255,255,.06);cursor:pointer}
.seg input:checked + label{background:#fff;color:#0b1720;font-weight:700}

/* Código */
.code{
  display:block;white-space:nowrap;overflow:auto;
  padding:10px 12px;border-radius:10px;border:1px solid var(--border);
  background:rgba(255,255,255,.06);
}

/* Preview */
.preview{
  min-height:280px;border:1px solid var(--border);border-radius:var(--radius);
  background:linear-gradient(135deg,#6d28d9,#0891b2);
  position:relative;overflow:hidden;
}
.badge{
  position:absolute;left:12px;top:12px;font-size:.8rem;
  background:rgba(0,0,0,.25);border:1px solid var(--border);
  padding:6px 10px;border-radius:999px
}

.playground{
  margin: 18px 0 50px;
  margin-top: 30px;
  grid-column: 1 / -1;
}

.play-title{margin:0 0 12px;opacity:.9}

.playground .ui-demo {
  width: 100%;
  border-radius: 20px;
}

.ui-demo{
  --c0:#10161d; --c1:#14212b; --c2:#172a36; --c3:#3b82f6; --c4:#fbbf24;
  display:grid;grid-template-columns:230px 1fr;min-height:420px;border:1px solid var(--border);
  border-radius:16px;overflow:hidden;background:var(--c0)
}
.ui-sidebar{background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 85%,#000 15%),var(--c1));border-right:1px solid var(--border);padding:16px}
.ui-logo{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:#0b1720;background:var(--c4);margin-bottom:16px}
.ui-nav{display:grid;gap:8px}
.ui-nav a{text-decoration:none;color:color-mix(in srgb,#fff 88%,var(--c0) 12%);padding:8px 10px;border-radius:10px}
.ui-nav a:hover{background:color-mix(in srgb,#fff 8%,var(--c1) 92%)}
.ui-main{padding:16px;display:grid;gap:16px}
.ui-topbar{display:flex;gap:10px;align-items:center;justify-content:space-between;background:color-mix(in srgb,var(--c2) 70%,#000 30%);border:1px solid var(--border);border-radius:12px;padding:10px}
.ui-search{flex:1;min-width:180px;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:10px;color:#fff;padding:10px 12px}
.ui-cta{border:1px solid transparent;background:var(--c3);color:#0b1720;font-weight:800;padding:10px 14px;border-radius:10px;cursor:pointer}
.ui-cta:hover{filter:brightness(1.06)}
.ui-grid{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.ui-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ui-demo{grid-template-columns:1fr}.ui-grid{grid-template-columns:1fr}}
.ui-card{border:1px solid var(--border);border-radius:14px;background:var(--c2);padding:12px}
.ui-thumb{height:120px;border-radius:10px;margin-bottom:10px;background:
  radial-gradient(80% 100% at 10% 0%, var(--c4) 0%, transparent 60%),
  radial-gradient(120% 100% at 90% 10%, var(--c3) 0%, transparent 50%),
  color-mix(in srgb, var(--c2) 65%, #000 35%);}
.ui-btn{margin-top:10px;border:1px solid color-mix(in srgb,var(--c3) 65%,#fff 35%);background:color-mix(in srgb,var(--c3) 85%,#fff 15%);color:#0b1720;padding:8px 12px;border-radius:10px;cursor:pointer}
.ui-btn:hover{filter:brightness(1.05)}

/* Overlay fullscreen */
.overlay{
  position:fixed;inset:0;z-index:1000;cursor:pointer;
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:2rem
}
.overlay::after{content:'(clic para salir)';position:absolute;bottom:40px;font-size:1rem;opacity:.75}

.foot{opacity:.8;padding:20px 0 40px;border-top:1px solid var(--border)}

/* Asegura que el overlay no capte eventos si está oculto */
#overlay[hidden]{
  display: none !important;
  pointer-events: none !important;
}