/* ==========================================================================
   ChromaTour PRO · Hoja de estilos
   1. Base y tipografía          6. Relieve (#prof)
   2. Pantalla de inicio (#home) 7. Banner y publicidad (#bn)
   3. Panel de dirección (#ctl)  8. Podio (#pod)
   4. Monitor y pantalla verde   9. Cuadros de alerta (#extAnimLayer)
   5. Gráficos en escenario      10. Estudio de estilo y tamaño
   11-13. Banner gigante, relieve en imagen, alertas semitransparentes
   ========================================================================== */
:root{--broadcast-shadow:0 2px 3px #0009;--slot-divider:#ffffff50;--slot-ink:#fff;--ac:#FFD100;--fg:#111;--bg:#f3f4f6;--pn:#fff;--ln:#d8dbe0;--tx:#1b1d21;--mu:#6b717b}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.4 'DM Sans',sans-serif;overflow-x:hidden}
button,input,select{font:inherit;color:inherit}
.cd{font-family:'Barlow Condensed',sans-serif;font-variant-numeric:tabular-nums}

/* Launcher (#home) */
#home{min-height:100vh;display:grid;place-content:center;gap:22px;padding:28px;max-width:780px;margin:auto}
#home h1{font:800 68px/.92 'Barlow Condensed',sans-serif;margin:0;letter-spacing:.01em}
#home p{color:var(--mu);margin:0;max-width:58ch}
.big{display:block;width:100%;text-align:left;padding:22px 26px;border-radius:12px;border:1px solid var(--ln);background:var(--pn);cursor:pointer;transition:transform .15s,box-shadow .15s}
.big:hover{transform:translateY(-2px);box-shadow:0 10px 24px #0001}
.big b{display:block;font:800 30px 'Barlow Condensed',sans-serif}
.big span{color:var(--mu); display:block; margin-top:4px}
.big.p{background:var(--ac);color:var(--fg);border:0;box-shadow:0 8px 20px #0002}
.big.p span{color:#000b}
.home-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Launcher pulido: portada oscura estilo broadcast + tarjeta de acceso */
#home{background:radial-gradient(1100px 560px at 50% -12%,#232b3d 0%,#12161f 46%,#0a0d13 100%);color:#eef1f6;position:relative;overflow:hidden}
#home:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.014) 3px 4px);pointer-events:none}
#home>*{position:relative}
#home .badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,209,0,.12);border:1px solid rgba(255,209,0,.4);color:var(--ac);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;padding:5px 14px;border-radius:30px;width:fit-content}
#home .badge i{width:8px;height:8px;border-radius:50%;background:#e11d48;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
#home h1{color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.5)}
#home h1 span{color:var(--ac);font-style:italic}
#home p{color:#9aa3b2}
.lcard{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);border-radius:16px;padding:24px 26px;backdrop-filter:blur(14px);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.lcard h2{margin:0 0 4px;font:800 26px 'Barlow Condensed',sans-serif;letter-spacing:.03em;color:#fff}
.lcard p{font-size:13.5px;margin:0 0 14px}
.lcard label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8b93a3;margin:10px 0 5px}
.lcard input{width:100%;background:rgba(10,13,19,.7);border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:11px 13px;color:#fff;font-size:15px}
.lcard input:focus{outline:2px solid var(--ac);border-color:transparent}
.lcard input::placeholder{color:#5b6373}
.lcard .err{color:#fda4af;font-size:13px;min-height:18px;margin:8px 0 0;font-weight:600}
.lcard .enter{width:100%;margin-top:12px;background:var(--ac);color:#111;border:0;border-radius:9px;padding:12px;font-weight:800;font-size:16px;cursor:pointer;letter-spacing:.02em;transition:filter .15s,transform .15s}
.lcard .enter:hover{filter:brightness(1.06);transform:translateY(-1px)}
.hello{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 16px;width:fit-content}
.hello .av{width:38px;height:38px;border-radius:50%;background:var(--ac);color:#111;display:grid;place-items:center;font:800 19px 'Barlow Condensed',sans-serif}
.hello b{color:#fff}
.hello button{background:none;border:0;color:#8b93a3;cursor:pointer;font-size:13px;text-decoration:underline}
#home .big{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);color:#fff;backdrop-filter:blur(10px)}
#home .big:hover{box-shadow:0 14px 34px rgba(0,0,0,.4);border-color:rgba(255,255,255,.25)}
#home .big span{color:#9aa3b2}
#home .big.p{background:var(--ac);color:#111;border:0}
#home .big.p span{color:#0009}
#home .home-actions .b{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#dfe4ec}
#home .home-actions .b:hover{background:rgba(255,255,255,.14)}
#home #lnk{color:#6d7686;font-size:13px;word-break:break-all}

/* Control Studio (#ctl) */
#ctl{display:none;min-height:100vh}
.top{display:flex;gap:10px;align-items:center;padding:10px 18px;border-bottom:1px solid var(--ln);background:var(--pn);flex-wrap:wrap;position:sticky;top:0;z-index:30}
.top .t{font:800 24px 'Barlow Condensed',sans-serif;margin-right:auto;letter-spacing:.02em}
.tabs{display:flex;gap:4px;padding:10px 18px 0;background:var(--pn);border-bottom:1px solid var(--ln);overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:8px 14px;cursor:pointer;color:var(--mu);font-weight:600;white-space:nowrap}
.tabs button.on{color:var(--tx);border-color:var(--ac)}
.wrap{display:grid;grid-template-columns:minmax(320px,440px) 1fr;gap:18px;padding:18px;align-items:start}
@media(max-width:960px){.wrap{grid-template-columns:1fr}}
.box{background:var(--pn);border:1px solid var(--ln);border-radius:10px;padding:14px;margin-bottom:14px;box-shadow:0 2px 5px #00000006}
.box h3{margin:0 0 10px;font:700 16px 'DM Sans',sans-serif;display:flex;align-items:center;justify-content:space-between}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.row>label{color:var(--mu);min-width:86px;font-size:13.5px}
input,select{background:#fff;border:1px solid var(--ln);border-radius:6px;padding:7px 9px;min-width:0}
input[type=number]{width:84px}
input.w{flex:1}
.b{background:#eceef1;border:1px solid var(--ln);border-radius:6px;padding:7px 12px;cursor:pointer;font-weight:500;transition:background .15s}
.b:hover{background:#dfe3e8}
.b:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ac)}
.b.ac{background:var(--ac);color:var(--fg);border:0;font-weight:700}
.b.ac:hover{filter:brightness(.95)}
.b.live{background:#16a34a;border-color:#15803d;color:#fff;font-weight:700}
.b.danger{background:#fee2e2;border-color:#fca5a5;color:#991b1b}

/* Monitor de Retorno en Vivo (#mon) */
.mon-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px;flex-wrap:wrap}
.mon{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:8px;border:2px solid #22c55e;background:#00FF00;box-shadow:inset 0 0 20px #0002}
.mon.bg-dark{background:radial-gradient(circle at 50% 30%,#283040,#0d1017)}
.mon.bg-grid{background-color:#181c24;background-image:linear-gradient(45deg,#232936 25%,transparent 25%),linear-gradient(-45deg,#232936 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#232936 75%),linear-gradient(-45deg,transparent 75%,#232936 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
.mon iframe{display:none}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.hit{display:flex;gap:10px;align-items:center;background:#f3f4f6;border-radius:8px;padding:8px;margin:8px 0;border:1px solid #e5e7eb}
.hit img,.ph{width:46px;height:46px;border-radius:6px;object-fit:cover;background:#1f242d;color:var(--ac);display:grid;place-items:center;font-weight:800;font-family:'Barlow Condensed',sans-serif;font-size:20px;flex-shrink:0}
.chip{display:inline-flex;align-items:center;gap:6px;background:#e3e6ea;border-radius:20px;padding:3px 8px 3px 11px;margin:0 6px 6px 0;font-size:13.5px;font-weight:500}
.chip button{background:none;border:0;cursor:pointer;color:var(--mu);font-weight:700;padding:0 2px}
.pane{display:none}.pane.on{display:block}
small,.mu{color:var(--mu)}
summary{cursor:pointer;user-select:none}
details.box .row{margin-top:8px}

/* Output Green Screen (#out) & Shared 1920x1080 Broadcast Stage (#stage) */
#out{display:none;position:fixed;inset:0;overflow:hidden;background:#00FF00;z-index:50}
#out.alpha{background:transparent}
#out.pv{background:#00FF00}
#outExitBar{display:none!important;position:fixed;top:12px;right:12px;z-index:99;display:flex;gap:8px;padding:8px 12px;border-radius:10px;background:#0b0e14d9;color:#fff;backdrop-filter:blur(8px);opacity:.18;transition:opacity .25s;border:1px solid #fff3}
#outExitBar:hover{opacity:1}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;font-family:'Barlow Condensed',sans-serif;color:#fff;font-variant-numeric:tabular-nums;pointer-events:none;overflow:hidden}

/* Broadcast Graphics Styling on Stage */
.g{position:absolute;filter:drop-shadow(0 12px 22px rgba(0,0,0,.65));will-change:transform,opacity,clip-path}
.ch{background:linear-gradient(165deg,#252932 0%,#0f1116 68%,#08090c 100%);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.14)}
.ch:before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--ac),rgba(255,255,255,.35),transparent)}

/* 1. Top Header (#hdr) */
#hdr{left:60px;top:36px;width:1500px}
#hdr .ch{height:96px;display:flex;align-items:center;gap:34px;padding:0 40px 0 0;clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%);border-bottom:6px solid var(--ac)}
.stg{align-self:stretch;background:var(--ac);color:var(--fg);padding:12px 42px 0 28px;clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%);margin-right:-10px;display:flex;flex-direction:column;justify-content:center}
.stg b{display:block;font-size:40px;line-height:.95;font-weight:800;text-transform:uppercase}
.stg span{font-size:18px;font-weight:700;text-transform:uppercase;opacity:.88}
.km{display:flex;align-items:center;gap:12px}
.km svg{width:38px;filter:drop-shadow(0 2px 4px #0008)}
.km b{font-size:66px;line-height:1;font-weight:800}
.km small{color:var(--ac);font-size:19px;font-weight:700;max-width:72px;line-height:1.05}
.m b{font-size:44px;font-weight:800;line-height:1}
.m small{display:block;color:#a8b0bd;font-size:15px;text-transform:uppercase;font-weight:600}
.lb{margin-left:auto;font-size:29px;font-weight:700;font-style:italic;color:#f1f5f9;background:rgba(255,255,255,.07);padding:6px 20px;border-left:4px solid var(--ac)}

/* 2. Corner Sponsor Bug (#mo) */
#mo{right:60px;top:36px;width:260px;height:96px}
#mo .ch{height:96px;display:grid;place-items:center;font-size:38px;font-weight:800;border-bottom:6px solid var(--ac);clip-path:polygon(26px 0,100% 0,100% 100%,0 100%);padding:8px 16px}
#mo img,#bAd img{max-height:64px;max-width:210px;object-fit:contain}

/* 3. Breakaway & Peloton Situation (#grp) */
#grp{left:60px;top:148px;width:820px}
#grp .ch{padding:6px 0;border-top:3px solid var(--ac)}
.gr{display:flex;align-items:center;gap:14px;padding:9px 22px;border-left:8px solid #555;flex-wrap:wrap}
.gr.f{border-color:var(--ac);background:linear-gradient(90deg,rgba(255,255,255,.09),transparent)}
.gr h4{margin:0;width:155px;font:800 23px 'Barlow Condensed',sans-serif;color:var(--ac);letter-spacing:.03em}
.gr .gp{font-size:32px;font-weight:800;margin-left:auto;color:var(--ac)}
.rd{display:inline-flex;align-items:center;gap:8px;font-size:26px;font-weight:700;background:rgba(0,0,0,.45);padding:3px 12px 3px 4px;border-radius:24px;border:1px solid rgba(255,255,255,.15)}
.rd img,.rd i{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#333;border:2px solid var(--ac);font-style:normal;display:grid;place-items:center;font-size:20px}
.rd em{color:var(--ac);font-style:normal;font-weight:800}

/* 4. 3D Rider Spotlight Card (#card) */
#card{left:60px;top:420px;width:660px;perspective:1000px}
#card .ch{display:flex;height:300px;clip-path:polygon(0 0,calc(100% - 32px) 0,100% 32px,100% 100%,0 100%);border-left:8px solid var(--ac)}
.cp{width:240px;background:linear-gradient(145deg,#2a2f3a,#12151b);position:relative;display:grid;place-items:center;font-size:110px;font-weight:800;color:rgba(255,255,255,.18);border-right:1px solid rgba(255,255,255,.12)}
.cp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ci{flex:1;padding:22px 28px;display:flex;flex-direction:column}
.tag{align-self:flex-start;background:var(--ac);color:var(--fg);font-weight:800;font-size:23px;padding:3px 16px;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);letter-spacing:.04em}
.ci .dn{font-size:90px;font-weight:800;line-height:.95;color:var(--ac);margin-top:6px}
.ci .nm{font-size:48px;font-weight:800;line-height:1;text-transform:uppercase;margin-top:4px}
.ci .ex{margin-top:auto;font-size:26px;color:#cbd5e1;font-weight:600;border-top:1px solid rgba(255,255,255,.12);padding-top:10px}

/* 5. General Classification Tower (#gc) */
#gc{right:60px;top:156px;width:440px}
#gc .ch{padding:0 0 8px;border-bottom:5px solid var(--ac)}
#gc h4{margin:0;background:var(--ac);color:var(--fg);padding:10px 20px;font:800 27px 'Barlow Condensed',sans-serif;letter-spacing:.03em}
.gl{display:flex;gap:12px;align-items:center;padding:9px 20px;border-bottom:1px solid rgba(255,255,255,.1);font-size:28px;font-weight:700}
.gl i{font-style:normal;background:rgba(255,255,255,.1);color:var(--ac);width:32px;height:32px;border-radius:6px;display:grid;place-items:center;font-weight:800}
.gl:first-of-type i{background:var(--ac);color:var(--fg)}
.gl s{text-decoration:none;margin-left:auto;color:var(--ac);font-weight:800}
/* Clasificación con tiempo y/o puntos (data-cols = t | p | tp): columnas alineadas y la torre se ensancha con las dos */
.gl .gl-n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl .gl-t,.gl .gl-p{margin-left:0;flex:none;text-align:right;white-space:nowrap}
.gl .gl-t{min-width:118px}
.gl .gl-p{min-width:92px}
#gc[data-cols=tp]{width:570px}
#gc[data-cols=tp] .gl-p,.final-row .final-p,.win-vals .win-sub{color:#fff;font-size:.8em;background:rgba(255,255,255,.14);border-radius:6px;padding:2px 10px}
#gc[data-cols=tp] .gl-p:empty,.final-row .final-p:empty{background:none}
#final[data-cols=p] .final-row .final-p{color:var(--ac);font-size:29px;background:none;padding:0;min-width:148px}
.final-row .final-p{min-width:116px;text-align:right;white-space:nowrap}
.win-vals{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:6px}
.win-vals strong{margin-top:0!important}
.win-vals .win-sub{font-size:26px!important}
.pm em.pm-sub{font-size:28px;color:#fff;opacity:.92;margin-top:2px}

/* 6. Stage Elevation Profile (#prof) */
#prof{left:60px;right:60px;bottom:140px;height:210px}
#prof .ch{height:210px;border-top:3px solid var(--ac)}

/* 7. Bottom Banner & Commercial Stinger (#bn) */
#bn{left:60px;right:60px;bottom:40px;height:84px}
#bn .ch{height:84px;clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%);border-bottom:6px solid var(--ac)}
#bSp,#bAd{position:absolute;inset:0;display:flex;align-items:center;gap:30px;padding:0 60px 0 34px;font-size:36px;font-weight:800}
#bAd{opacity:0;gap:40px;color:#fff;justify-content:center}
#bAd b{font-size:54px;letter-spacing:.03em}
#bAd span{font-size:34px;font-weight:600;font-style:italic}
#wipe{position:absolute;top:-10px;bottom:-10px;left:0;width:36%;transform:translateX(-140%) skewX(-20deg);background:var(--ac);box-shadow:0 0 40px #0008;z-index:3}

/* 8. Full-Screen Winners Podium (#pod) */
#pod{position:absolute;inset:0;background:radial-gradient(circle at 50% 25%,#2e3138,#08090b);border-top:10px solid var(--ac);z-index:20}
.pt{position:absolute;left:90px;top:44px}
.pt span{font-size:34px;font-weight:600;color:#ccc;text-transform:uppercase}
.pt b{display:block;font-size:130px;line-height:.95;font-weight:800;color:var(--ac)}
.pr{position:absolute;left:0;right:0;bottom:60px;display:flex;justify-content:center;align-items:flex-end;gap:46px}
.pc{width:500px;text-align:center}
.pf{margin:auto;overflow:hidden;background:#2a2d33;display:grid;place-items:center;font-size:170px;font-weight:800;color:#555;border:6px solid var(--ac);border-radius:14px}
.pf img{width:100%;height:100%;object-fit:cover}
.p1 .pf{width:440px;height:470px}
.p2 .pf,.p3 .pf{width:340px;height:340px}
.pn{background:var(--ac);color:var(--fg);font-size:96px;font-weight:800;line-height:1;padding:6px 0}
.p1 .pn{font-size:120px}
.pm b{display:block;font-size:54px;text-transform:uppercase;line-height:1.05;margin-top:10px}
.p1 .pm b{font-size:72px}
.pm span{font-size:28px;color:#ccc}
.pm em{display:block;font-size:46px;color:var(--ac);font-style:normal;font-weight:800}

/* Capa de Pequeños Cuadros de Alerta en Pantalla Verde (#extAnimLayer) */
#extAnimLayer{position:absolute;inset:0;pointer-events:none;z-index:25;overflow:hidden}
.ext-alert-box{
  position:absolute;
  left:60px;
  top:250px;
  width:500px;
  background:linear-gradient(165deg,rgba(15,18,26,.94),rgba(9,11,16,.97));
  border:1px solid rgba(255,255,255,.18);
  border-left:8px solid var(--alert-col,#E30613);
  border-radius:12px;
  box-shadow:0 16px 38px rgba(0,0,0,.55);
  color:#fff;
  overflow:hidden;
  font-family:'Barlow Condensed',sans-serif;
}
.ext-alert-top{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 18px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--alert-col,#E30613) 88%,#000),rgba(15,18,26,.92));
  border-bottom:1px solid rgba(255,255,255,.14);
}
.ext-alert-badge{
  width:74px;
  height:74px;
  border-radius:10px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.22);
  display:grid;
  place-items:center;
  flex-shrink:0;
  overflow:hidden;
  font-size:38px;
}
.ext-alert-badge img,.ext-alert-badge video{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.ext-alert-titles{
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1;
}
.ext-alert-titles b{
  font-size:44px;
  font-weight:800;
  line-height:0.96;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.ext-alert-titles span{
  font-size:20px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
  margin-top:4px;
}
.ext-alert-rider{
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 18px;
  background:rgba(12,15,22,.92);
}
.ext-alert-rphoto{
  width:84px;
  height:84px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  background:transparent;
}
.ext-alert-rphoto img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:bottom center;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.6));
}
.ext-alert-rinfo{
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1;
}
.ext-alert-rinfo .r-dorsal{
  display:inline-block;
  align-self:flex-start;
  background:var(--alert-col,#E30613);
  color:#fff;
  font-size:22px;
  font-weight:800;
  padding:2px 10px;
  border-radius:5px;
  line-height:1.1;
}
.ext-alert-rinfo .r-name{
  font-size:34px;
  font-weight:800;
  line-height:1.05;
  color:#fff;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ext-alert-rinfo .r-meta{
  font-size:20px;
  font-weight:600;
  color:#cbd5e1;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Varios ciclistas en el mismo cuadro: 2–3 filas medianas, 4–5 filas compactas (dorsal y nombre en una línea) */
.ext-alert-box[data-size=m] .ext-alert-rider{padding:8px 18px;gap:14px}
.ext-alert-box[data-size=m] .ext-alert-rphoto{width:66px;height:66px}
.ext-alert-box[data-size=m] .ext-alert-rinfo .r-dorsal{font-size:18px}
.ext-alert-box[data-size=m] .ext-alert-rinfo .r-name{font-size:28px}
.ext-alert-box[data-size=m] .ext-alert-rinfo .r-meta{font-size:17px}
.ext-alert-box[data-size=s] .ext-alert-rider{padding:6px 16px;gap:12px}
.ext-alert-box[data-size=s] .ext-alert-rphoto{width:54px;height:54px}
.ext-alert-box[data-size=s] .ext-alert-rinfo{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center}
.ext-alert-box[data-size=s] .ext-alert-rinfo .r-dorsal{font-size:16px;padding:1px 8px}
.ext-alert-box[data-size=s] .ext-alert-rinfo .r-name{font-size:25px;margin-top:0}
.ext-alert-box[data-size=s] .ext-alert-rinfo .r-meta{font-size:15px;grid-column:1/-1;margin-top:1px}

/* Toast Notification (Replaces blocked alert()) */
#toastBar{position:fixed;bottom:18px;right:18px;z-index:100;background:#111827;color:#fff;padding:11px 18px;border-radius:10px;border-left:5px solid var(--ac);box-shadow:0 10px 25px #0005;font-weight:600;font-size:14px;display:none}
.code-box{background:#111827;color:#e5e7eb;padding:12px 14px;border-radius:8px;font:12.5px/1.5 monospace;overflow-x:auto;margin:8px 0}

/* ===== 10. Estudio de estilo y tamaño ===== */
#stage .ch{background:linear-gradient(165deg,var(--bxa1) 0%,var(--bxa2) 68%,var(--bxa3) 100%)!important;backdrop-filter:blur(var(--blur,0px));-webkit-backdrop-filter:blur(var(--blur,0px));border-color:var(--bdr,rgba(255,255,255,.14))!important}
#stage{color:var(--stx,#fff)!important}
#stage .cp{background:transparent!important}
#styFab{position:fixed;right:22px;bottom:22px;z-index:200;display:flex;align-items:center;gap:10px;padding:14px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(17,19,24,.78);color:#fff;font:700 15px 'DM Sans',sans-serif;cursor:pointer;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .15s}
#styFab:hover{transform:translateY(-2px)}
#styFab .dot{width:18px;height:18px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 3px rgba(255,255,255,.2)}
#styDr{position:fixed;top:12px;right:12px;bottom:12px;width:380px;max-width:calc(100vw - 24px);z-index:201;background:rgba(20,22,28,.62);color:#f3f4f6;backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);border:1px solid rgba(255,255,255,.16);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:auto;padding:18px;transform:translateX(calc(100% + 24px));opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s}
#styDr.on{transform:none;opacity:1}
#styDr h3{margin:18px 0 10px;font:800 13px 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
#styDr .hd{display:flex;justify-content:space-between;align-items:center}
#styDr .hd b{font:800 26px 'Barlow Condensed',sans-serif}
#styDr button{cursor:pointer;font:inherit}
.sx{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:10px;padding:8px 12px;font-weight:600}
.sx:hover{background:rgba(255,255,255,.2)}
.sx.on{background:var(--ac);color:var(--fg);border-color:transparent}
#styDr .sx.big{line-height:1;font-size:22px;font-weight:800;width:52px;height:52px;padding:0}
.srow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}
.srow label{flex:1;font-size:14px;color:rgba(255,255,255,.8)}
.srow input[type=color]{width:46px;height:34px;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:2px;background:transparent;cursor:pointer}
.srow input[type=range]{flex:1;accent-color:var(--ac)}
.pre{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pre button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 4px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font-size:12px}
.pre button:hover{background:rgba(255,255,255,.16)}
.pre i{display:flex;width:44px;height:16px;border-radius:4px;overflow:hidden}.pre i span{flex:1}
.gsel{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.szbox{margin-top:10px;padding:14px;border-radius:14px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.1)}
.szv{font:800 40px 'Barlow Condensed',sans-serif;min-width:90px;text-align:center}
.pad{display:grid;grid-template-columns:repeat(3,44px);gap:4px;justify-content:center}
.pad .sx{padding:0;height:40px}
/* Clean Broadcast Lower-Third Banner (#bn) & Zero-Black-Box Rider Cutouts */
#stage{--banner-height:104px;text-shadow:var(--broadcast-shadow)}
#stage .ch{backdrop-filter:none;-webkit-backdrop-filter:none}
#bn{left:60px;right:60px;bottom:28px;width:1800px;height:var(--banner-height);filter:drop-shadow(0 12px 26px rgba(0,0,0,.45))}
#stage #bn .ch{
  height:100%;
  clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%);
  background:linear-gradient(165deg,color-mix(in srgb,var(--banner-color,#0f1116) var(--banner-opacity,88%),rgba(18,22,31,.92)),color-mix(in srgb,var(--banner-color,#0f1116) var(--banner-opacity,88%),rgba(8,10,15,.96)))!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-bottom:5px solid var(--ac)!important;
  overflow:hidden;
}
#bn .ch:before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--ac),rgba(255,255,255,.4),transparent);display:block;z-index:2}
#bSp{position:absolute;inset:0;display:flex;flex-direction:row;align-items:stretch;gap:0;padding:0;font-size:30px}
#bnRacePillWrap{display:flex;align-items: stretch;flex-shrink:0}
.bn-race-pill{
  background:var(--ac);
  color:var(--fg);
  padding:0 38px 0 26px;
  clip-path:polygon(0 0,100% 0,calc(100% - 22px) 100%,0 100%);
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:255px;
  z-index:2;
  text-shadow:none;
}
.bn-race-pill small{font-size:16px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.85;line-height:1}
.bn-race-pill b{font-size:32px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;line-height:1.05;margin-top:2px}
#brandSlots{
  display:grid;
  grid-template-columns:repeat(var(--brand-count,1),minmax(0,1fr));
  grid-template-rows:repeat(var(--brand-rows,1),minmax(0,1fr));
  height:100%;
  flex:1;
  min-height:0;
  gap:14px;
  padding:10px 36px 10px 18px;
  align-items:stretch;
}
.brand-slot{
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-left:5px solid var(--sc,var(--ac));
  border-radius:8px;
  padding:6px 18px;
  position:relative;
}
.brand-slot.image-cover{padding:0;border-left:0}
.brand-slot img{max-width:100%;max-height:100%;width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.brand-slot.image-cover img{max-width:none;max-height:none;object-fit:cover;filter:none}
.brand-clean-card{justify-content:flex-start;gap:14px;padding:8px 20px;background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.02))}
.brand-clean-card .brand-dot{width:14px;height:38px;border-radius:4px;background:var(--sc,var(--ac));flex-shrink:0;transform:skewX(-14deg);box-shadow:0 0 12px var(--sc,var(--ac))}
.brand-clean-card .brand-txt{display:flex;flex-direction:column;min-width:0}
.brand-clean-card .brand-txt b{font-size:32px;line-height:1;letter-spacing:.03em;color:#fff;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-clean-card .brand-txt small{font-size:17px;color:#cbd5e1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}

/* Commercial Takeover Mode (#bAd) */
#bAd{position:absolute;inset:0;padding:0;gap:0;overflow:hidden;z-index:2}
.ad-clean-wrap{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  gap:28px;
  padding:0 44px 0 0;
  background:linear-gradient(115deg,var(--sc,#0057B8) 0%,color-mix(in srgb,var(--sc,#0057B8) 65%,#080b12) 60%,#0a0e17 100%);
}
.ad-badge{
  align-self:stretch;
  min-width:250px;
  max-width:340px;
  padding:10px 42px 10px 28px;
  background:rgba(255,255,255,.96);
  color:#111;
  clip-path:polygon(0 0,100% 0,calc(100% - 24px) 100%,0 100%);
  display:flex;
  align-items:center;
  justify-content:center;
}
.ad-badge img{max-height:74px;max-width:240px;width:auto;height:auto;object-fit:contain}
.ad-monogram{font-size:52px;font-weight:800;color:var(--sc,#0057B8);letter-spacing:.04em}
.ad-copy{display:flex;align-items:center;gap:22px;flex:1;min-width:0}
.ad-copy b{font-size:54px;line-height:1;letter-spacing:.03em;color:#fff;white-space:nowrap}
.ad-copy .ad-sep{width:3px;height:42px;background:var(--ac);transform:skewX(-15deg);flex-shrink:0}
.ad-copy span{font-size:32px;font-weight:600;font-style:italic;color:#f1f5f9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-tag{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.22);border-left:4px solid var(--ac);padding:6px 18px;font-size:21px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;white-space:nowrap}
.ad-full-bleed{position:absolute;inset:0;width:100%;height:100%}
.ad-full-bleed img{width:100%;height:100%;object-fit:cover;display:block}
.ad-overlay-pill{position:relative;z-index:2;margin-left:auto;margin-right:36px;background:rgba(10,13,20,.86);border-left:5px solid var(--sc,var(--ac));padding:8px 24px;border-radius:8px;display:flex;align-items:center;gap:16px}
.ad-overlay-pill b{font-size:36px;color:#fff}
.ad-overlay-pill span{font-size:24px;color:#e2e8f0;font-style:italic}

#prof{bottom:calc(var(--banner-height) + 48px)}
#stage .lb,#stage .rd{background:var(--bxa2)}
.sponsor-edit{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--ln);padding:12px 0}
.brand-thumb{width:90px;height:56px;display:grid;place-items:center;background:var(--bg);overflow:hidden;border:1px solid var(--ln);border-radius:4px}
.brand-thumb img{width:100%;height:100%;object-fit:contain}
.sponsor-fields{flex:1;min-width:180px;display:grid;gap:6px}
.sponsor-fields label{display:flex;gap:8px;align-items:center;font-size:13px;flex-wrap:wrap}
.sponsor-fields input[type=file]{width:100%;max-width:260px}
#createdLink{font-size:12px;word-break:break-all}
#home{max-width:none}
#home>*{width:min(660px,100%);margin-inline:auto}
#home [hidden]{display:none!important}
#ctl [hidden]{display:none!important}
#panelCreatedLink input{width:100%;margin:8px 0}#userCreateStatus{overflow-wrap:anywhere;color:var(--tx)}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}
/* Compact race situation and final results share the studio's live color tokens. */
:root{--race-panel:var(--bxa2);--race-ink:var(--stx);--race-line:var(--bdr)}
#hdr{width:950px;top:42px}
#hdr>.ch{height:92px;width:max-content;max-width:950px;gap:22px;padding:0;border:0;clip-path:none;background:none!important;overflow:visible}
#hdr>.ch:before{display:none}
.head-race{width:360px;background:var(--race-panel);flex-shrink:0}
#o-head-lead{display:block;font-size:22px;font-weight:700;height:29px;padding-left:22px;line-height:29px}
.head-distance{height:60px;display:flex;align-items:center;gap:14px;border:5px solid var(--ac);padding:0 16px}
.head-distance b{font-size:50px;line-height:1}.head-distance small{font-size:32px;color:inherit}
.finish-mark{font-size:33px;color:var(--fg);background:var(--ac);width:40px;height:40px;display:grid;place-items:center;border-radius:50%;text-shadow:none}
.head-gap{display:flex;align-items:center;gap:15px;height:90px;min-width:245px;background:var(--race-panel);padding:8px 18px}
.head-gap[hidden]{display:none}.head-gap small{display:block;font-size:22px;color:inherit}.head-gap b{display:block;font-size:39px;line-height:1.1}
.gap-arrow{width:48px;height:48px;display:grid;place-items:center;background:var(--stx);color:var(--fg);border-radius:50%;font-size:34px;text-shadow:none}
.head-meta{display:flex;align-items:center;gap:22px;margin-top:9px;font-size:20px;max-width:940px}
.head-meta .stg{background:none;clip-path:none;padding:0;margin:0;color:inherit;max-width:155px}.head-meta .stg b{font-size:22px}.head-meta .stg span{font-size:18px}
.head-meta .m b{font-size:24px}.head-meta .m small{font-size:16px;color:inherit}.head-meta .lb{font-size:21px;padding:0 12px;background:none;max-width:450px;overflow-wrap:anywhere}
#grp{top:220px;width:950px}#grp .ch{padding:0;border:0;background:none!important}#grp .ch:before{display:none}
#grp .gr{padding:0;gap:10px;border:0;background:none}.rd{background:var(--race-panel);border:0;border-radius:24px;padding:4px 14px 4px 4px;font-size:26px}.rd img,.rd i{width:40px;height:40px;background:transparent!important}.chase-row{margin-top:10px;background:var(--race-panel)!important;padding:8px 16px!important;max-width:600px}.compact-label{font-size:26px}
.final-edit{flex-wrap:nowrap}.final-edit label{min-width:26px}.final-edit select{flex:1;min-width:0;width:auto}.final-edit input[data-final-time]{width:96px}.final-edit input[data-final-pts]{width:72px}
.final-head{margin:4px 0 -2px;font-size:11.5px;color:var(--mu);font-weight:700;text-transform:uppercase;letter-spacing:.04em}.final-head span:first-child{min-width:26px}.final-head span:nth-child(2){flex:1}.final-head span:nth-child(3){width:96px}.final-head span:nth-child(4){width:72px}
.pod-edit{flex-wrap:nowrap}.pod-edit select{flex:1;min-width:0}.pod-edit input[data-pt]{width:96px}.pod-edit input[data-pp]{width:72px}
#final{left:140px;top:215px;width:1640px;z-index:19;letter-spacing:0}
#final>.ch{background:transparent!important;border:0;border-top:6px solid var(--ac);padding:24px 32px 30px}
.final-heading,.final-table,.winner-caption{background:color-mix(in srgb,var(--bx-solid) var(--final-opacity),transparent)}
.final-heading{border-bottom:1px solid var(--race-line);padding-bottom:16px;margin-bottom:14px}.final-heading span{font-size:25px}.final-heading h4{font-size:58px;margin:0;line-height:1.08;color:var(--ac)}
.final-body{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:36px}.final-row{height:57px;padding:0 10px;font-size:31px;gap:14px}.final-row i{flex-shrink:0;width:40px;height:40px;border-radius:0;background:none}.final-name{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.05}.final-country{font-size:23px;white-space:nowrap}.final-row s{min-width:148px;text-align:right;white-space:nowrap;font-size:29px}.final-row:first-child{border-left:4px solid var(--ac)}
.final-winner{min-width:0}.winner-photo{height:390px;overflow:hidden;border-bottom:5px solid var(--ac);display:grid;place-items:center}.winner-photo img{height:100%;width:100%;object-fit:contain;object-position:bottom center}.winner-photo>span{font-size:220px;color:var(--ac)}
.winner-caption{padding-top:14px}.winner-caption>span{font-size:25px;color:var(--ac)}.winner-caption b{display:block;font-size:48px;line-height:1.05;overflow-wrap:anywhere}.winner-caption small{display:block;font-size:24px;color:inherit;margin-top:8px}.winner-caption strong{display:block;font-size:36px;color:var(--ac);margin-top:6px}

/* Zero Black Background for Rider Cutouts in #card, #grp, #pod, #final */
#stage #final,#stage #card,#stage #grp,#stage #mo{filter:none}
#stage .cp,#stage .pf,#stage .rd img,#stage .rd i,#stage .winner-photo,.hit img{background:transparent!important}
#stage #card>.ch{background:transparent!important;border:0!important;clip-path:none!important;overflow:visible!important;align-items:flex-end}
#stage #card>.ch:before{display:none!important}
#stage #card .cp{width:260px;height:310px;border:0!important;overflow:visible}
#stage #card .cp img{object-fit:contain!important;object-position:bottom center!important;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
#stage #card .ci{
  background:linear-gradient(165deg,rgba(22,26,35,.88),rgba(12,15,21,.94))!important;
  border:1px solid rgba(255,255,255,.16);
  border-left:7px solid var(--ac);
  clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%);
  min-height:265px;
  box-shadow:0 14px 28px rgba(0,0,0,.4);
}
#stage #pod{background:transparent!important;border-top:0!important}
#stage #pod .pf{background:transparent!important;border:0!important;border-bottom:6px solid var(--ac)!important;border-radius:0!important}
#stage #pod .pf img{object-fit:contain!important;object-position:bottom center!important;filter:drop-shadow(0 12px 22px rgba(0,0,0,.55))}
#stage #pod .pm{background:rgba(12,15,21,.86);padding:10px 16px;border-radius:0 0 12px 12px;border:1px solid rgba(255,255,255,.14);border-top:0}
#stage .winner-photo img{object-fit:contain!important;object-position:bottom center!important;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5))}
.sponsor-fields input[type=range]{flex:1;min-width:90px;accent-color:var(--ac)}
.sponsor-fields output{min-width:42px;text-align:right}

/* ==========================================================================
   11. Banner gigante de patrocinadores (ancho completo, abajo)
   Las fotos ocupan espacios iguales y se reparten solas según cuántas marcas haya.
   ========================================================================== */
#stage #bn{left:0!important;right:0!important;bottom:0!important;width:auto!important;height:var(--banner-height)!important;filter:none!important}
#stage #bn .ch{clip-path:none!important;border:0!important;border-top:4px solid var(--ac)!important;border-radius:0!important;background:color-mix(in srgb,var(--banner-color,#0f1116) var(--banner-opacity,60%),transparent)!important;backdrop-filter:none!important}
#stage #bn .ch:before{display:none!important}
#bSp,#bAd{inset:0;padding:0!important;gap:0!important}
#brandSlots{gap:0!important;padding:0!important;width:100%}
#stage .brand-slot{border:0!important;border-radius:0!important;padding:0!important;background:transparent!important;box-shadow:inset -1px 0 0 var(--slot-divider)}
#stage .brand-slot:last-child{box-shadow:none}
#stage .brand-slot img{width:100%;height:100%;max-width:none;max-height:none;filter:none;transform-origin:center}
#stage .brand-clean-card{justify-content:center;background:transparent!important}
#stage #prof{bottom:calc(var(--banner-height) + 24px)}

/* ==========================================================================
   12. Relieve subido como imagen (respeta transparencia)
   ========================================================================== */
#stage #prof.prof-image .ch{background:transparent!important;border:0!important;backdrop-filter:none!important}
#stage #prof .prof-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom center}

/* ==========================================================================
   13. Cuadros de alerta semitransparentes (siguen la opacidad del estudio de estilo)
   ========================================================================== */
#stage .ext-alert-box{background:linear-gradient(165deg,var(--bxa1,rgba(15,18,26,.35)),var(--bxa2,rgba(9,11,16,.35)));backdrop-filter:blur(var(--blur,0px));-webkit-backdrop-filter:blur(var(--blur,0px));border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 28px rgba(0,0,0,.25);text-shadow:0 2px 6px rgba(0,0,0,.65);will-change:transform,opacity,clip-path}
#stage .ext-alert-top{background:linear-gradient(90deg,color-mix(in srgb,var(--alert-col,#E30613) 78%,transparent),transparent)}
#stage .ext-alert-rider{background:transparent;border-top:1px solid rgba(255,255,255,.12)}
#stage .ext-alert-badge{background:rgba(0,0,0,.18)}

/* ==========================================================================
   14. Banner en desplazamiento continuo (cinta de patrocinadores)
   ========================================================================== */
#bn.ticker-mode #brandSlots{display:block;overflow:hidden;position:relative;height:100%;width:100%}
#bn .tk-track{display:flex;height:100%;width:max-content;will-change:transform;backface-visibility:hidden}
#bn .tk-set{display:flex;height:100%;flex:none}
#bn .tk-item{height:100%;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset -1px 0 0 var(--slot-divider)}
#stage #bn .tk-item img{height:100%;width:auto;max-width:none;max-height:none;display:block;filter:none;transform-origin:center}
#bn .tk-text{min-width:560px;padding:0 48px;gap:18px;justify-content:flex-start;background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.02))}
#bn .tk-text .brand-dot{width:14px;height:44px;border-radius:4px;background:var(--sc,var(--ac));flex-shrink:0;transform:skewX(-14deg);box-shadow:0 0 12px var(--sc,var(--ac))}
#bn .tk-text .brand-txt{display:flex;flex-direction:column;font-size:44px;line-height:1.05;font-weight:800;white-space:nowrap}
#bn .tk-text .brand-txt small{font-size:24px;font-weight:600;opacity:.85}

/* ==========================================================================
   15. Monitor flotante (pantalla verde visible al editar cualquier pestaña)
   ========================================================================== */
#monFloat{--mf-w:560px;position:fixed;right:16px;bottom:16px;width:var(--mf-w);max-width:calc(100vw - 32px);z-index:60;background:var(--pn);border:1px solid var(--ln);border-radius:12px;padding:8px;box-shadow:0 14px 40px rgba(0,0,0,.35)}
#monFloat[hidden],#monFloatPill[hidden]{display:none}
#monFloat .mf-bar{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:6px;font-size:13px}
#monFloat .mf-bar .b{padding:4px 8px;font-size:12px}
#monFloat .mf-actions{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
#monFloat .mf-actions .b{padding:5px 10px;font-size:12.5px}
#monFloat .mf-file{cursor:pointer}
#monFloatPill{position:fixed;right:16px;bottom:16px;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.3)}

/* ==========================================================================
   16. Pestañas Animaciones y Estilo (con mini pantalla verde)
   ========================================================================== */
.wrap.rev{grid-template-columns:minmax(0,1fr) minmax(360px,520px)}
@media(max-width:960px){.wrap.rev{grid-template-columns:1fr}}
.mon-dock{position:sticky;top:70px;background:var(--pn);border:1px solid var(--ln);border-radius:12px;padding:10px;box-shadow:0 2px 8px #0000000d}
.mon-dock .mon-bar{margin-bottom:8px;font-size:14px}
.mon-dock .b{padding:5px 10px;font-size:12.5px}

/* cuadros de alerta */
.fa-tools{display:flex;gap:6px;flex-wrap:wrap}
.fa-tools .b{font-size:13px;padding:6px 10px;cursor:pointer}
.fa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.fa-card{display:flex;flex-direction:column;gap:7px;padding:10px;border:1px solid var(--ln);border-left:6px solid var(--c,#E30613);border-radius:10px;background:#fff;transition:box-shadow .2s,border-color .2s}
.fa-card.on{box-shadow:0 0 0 2px #16a34a;border-color:#16a34a;border-left-color:#16a34a}
.fa-head{display:flex;align-items:center;gap:8px}
.fa-ico{width:44px;height:44px;flex:none;border-radius:8px;background:var(--c,#E30613);display:grid;place-items:center;overflow:hidden;cursor:pointer;font-size:22px}
.fa-ico img,.fa-ico video{width:100%;height:100%;object-fit:contain}
.fa-title{flex:1;min-width:0;font-weight:800;font-size:15px}
.fa-head input[type=color]{width:34px;height:34px;padding:2px;flex:none}
.fa-card>input,.fa-card>select{width:100%;font-size:13.5px}
.fa-riders{display:flex;flex-direction:column;gap:5px}
.fa-riders>small{color:var(--mu);font-size:12px}
.fa-rider-slot{display:flex;align-items:center;gap:6px}
.fa-rider-slot>span{width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--c,#E30613);color:#fff;font:700 11px/1 'DM Sans',sans-serif}
.fa-rider-slot.add>span{background:#e5e7eb;color:#374151}
.fa-rider-slot input{width:74px;flex:none;font-size:14px;font-weight:700;text-align:center}
.fa-rider-slot.add input{border-style:dashed}
.fa-rider-slot input::-webkit-calendar-picker-indicator{display:none!important}
.fa-rider-name{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fa-rider-slot .b{padding:2px 8px;flex:none}
.fa-actions{display:flex;gap:6px}
.fa-actions .b:first-child{flex:1;font-weight:700}

/* movimiento de cada gráfico */
.adv-toggle{font:500 13px 'DM Sans',sans-serif;color:var(--mu);display:flex;gap:5px;align-items:center;cursor:pointer}
.gs-row{display:flex;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid #eee;flex-wrap:wrap}
.gs-row:last-child{border-bottom:0}
.gs-row b{flex:1 1 150px;font-size:14px}
.gs-row select{max-width:210px}
.gs-row .adv{display:none}
#gsapEditorRows.show-adv .gs-row .adv{display:block}
.gs-d{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--mu)}
.gs-d input{width:62px}
details.more summary{cursor:pointer;font:700 15px 'DM Sans',sans-serif}
details.more[open] summary{margin-bottom:10px}

/* pestaña Estilo: los controles oscuros del antiguo panel flotante, en claro */
#styDr{position:static;transform:none;opacity:1;width:auto;background:var(--pn);color:var(--tx);backdrop-filter:none;overflow:visible}
#styDr .sty-title{margin:0 0 4px;font:800 22px 'Barlow Condensed',sans-serif;text-transform:none;letter-spacing:0;color:var(--tx)}
#styDr h3{color:var(--mu)}
#styDr .srow label{color:var(--tx)}
#styDr .sx{background:#eceef1;border:1px solid var(--ln);color:var(--tx)}
#styDr .sx:hover{background:#dfe3e8}
#styDr .sx.on{background:var(--ac);color:var(--fg);border-color:transparent}
#styDr .srow input[type=color]{border-color:var(--ln)}
#styDr .szbox{background:#f6f7f9;border-color:var(--ln)}
#styDr .szv{color:var(--tx)}
#styDr .pre button{color:var(--tx)}
#styDr .pre button{background:#f3f4f6;border-color:var(--ln)}#styDr .pre button:hover{background:#e5e7eb}

/* filas del banner en desplazamiento */
#bn .tk-row{height:100%;overflow:hidden;position:relative}
#brandSlots.two-rows .tk-row{height:50%}
#brandSlots.two-rows .tk-row+.tk-row{border-top:1px solid var(--slot-divider)}
#brandSlots.two-rows .tk-text{min-width:380px}
#brandSlots.two-rows .tk-text .brand-txt{font-size:32px}
#brandSlots.two-rows .tk-text .brand-txt small{font-size:18px}

/* ==========================================================================
   17. Gráficos extra (cara a cara, camisetas, puerto) y textos de ficha/relieve
   ========================================================================== */
#stage #vs{left:310px;width:1300px;bottom:calc(var(--banner-height,200px) + 150px);filter:none}
#vs .ch{overflow:visible}
.vs-wrap{display:grid;grid-template-columns:1fr 130px 1fr;align-items:end}
.vs-side{display:flex;align-items:flex-end;min-height:300px}
.vs-side.r{flex-direction:row-reverse}
.vs-ph{width:250px;height:330px;flex:none;display:grid;place-items:center;position:relative;z-index:2;font-size:90px;color:rgba(255,255,255,.2);font-weight:800}
.vs-ph img{width:100%;height:100%;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.vs-info{flex:1;margin:0 -30px;padding:18px 44px 18px 44px;background:linear-gradient(165deg,rgba(22,26,35,.9),rgba(12,15,21,.95));border:1px solid rgba(255,255,255,.16);box-shadow:0 14px 28px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:2px}
.vs-side.l .vs-info{border-left:7px solid var(--ac);padding-left:50px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.vs-side.r .vs-info{border-right:7px solid var(--ac);padding-right:50px;text-align:right;clip-path:polygon(22px 0,100% 0,100% 100%,0 100%,0 22px)}
.vs-d{font-size:52px;line-height:1;color:var(--ac);font-weight:800}
.vs-n{font-size:40px;line-height:1.05;text-transform:uppercase;font-weight:800}
.vs-t{font-size:22px;color:#cbd5e1;font-weight:600;margin-bottom:6px}
.vs-info ul{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.vs-info li{display:flex;justify-content:space-between;gap:16px;padding:5px 0;font-size:24px;border-bottom:1px solid rgba(255,255,255,.08)}
.vs-info li span{color:#9aa4b2;font-weight:600;letter-spacing:.05em}
.vs-info li b{color:#fff}
.vs-mid{display:grid;place-items:center;align-self:center}
.vs-mid b{width:104px;height:104px;border-radius:50%;background:var(--ac);color:var(--fg);display:grid;place-items:center;font:800 50px 'Barlow Condensed',sans-serif;box-shadow:0 0 0 7px rgba(0,0,0,.4);z-index:3}

#stage #jer{left:60px;bottom:calc(var(--banner-height,200px) + 36px);filter:none}
.jer-wrap{display:flex;gap:14px}
.jer-item{display:flex;align-items:center;gap:12px;padding:10px 22px 10px 14px;background:linear-gradient(165deg,rgba(22,26,35,.9),rgba(12,15,21,.95));border:1px solid rgba(255,255,255,.16);border-left:6px solid var(--ac);box-shadow:0 12px 24px rgba(0,0,0,.4);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.jer-item small{display:block;font-size:17px;letter-spacing:.08em;color:#9aa4b2;font-weight:700}
.jer-item b{font-size:30px;font-weight:800;line-height:1.05}

#stage #cima{right:60px;bottom:calc(var(--banner-height,200px) + 36px);width:470px;filter:none}
.cima-wrap{background:linear-gradient(165deg,rgba(22,26,35,.9),rgba(12,15,21,.95));border:1px solid rgba(255,255,255,.16);border-left:7px solid var(--ac);box-shadow:0 14px 28px rgba(0,0,0,.4);padding:14px 26px 16px;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%)}
.cima-top{display:flex;gap:12px;align-items:center;font-size:30px;font-weight:800;letter-spacing:.03em}
.cima-top span{font-size:36px}
.cima-main{display:flex;align-items:baseline;gap:12px;margin-top:2px}
.cima-main small{font-size:24px;color:#9aa4b2;font-weight:700;letter-spacing:.06em}
.cima-main b{font-size:100px;line-height:1;color:var(--ac);font-weight:800}
.cima-main i{font-size:34px;font-style:normal;font-weight:700}
.cima-main em{font-style:normal;font-size:54px;font-weight:800;color:var(--ac)}
.cima-sub{font-size:25px;font-weight:700;color:#e5e7eb;border-top:1px solid rgba(255,255,255,.14);padding-top:8px;margin-top:6px}

.cstats{margin-top:6px;font-size:23px;font-weight:700;color:var(--ac)}
#o-prof{position:relative}
.prof-info{position:absolute;right:20px;bottom:8px;padding:6px 16px;background:rgba(10,12,16,.78);border-left:5px solid var(--ac);font-size:26px;font-weight:700;color:#fff}

/* ==========================================================================
   18. Pestaña Operación, semáforo y control móvil
   ========================================================================== */
.sync{display:inline-block;padding:5px 12px;border-radius:999px;font:600 13px 'DM Sans',sans-serif;background:#eef0f3;color:#475569;margin-right:auto;white-space:nowrap}
.sync[hidden]{display:none}
.sync.ok{background:#dcfce7;color:#166534}
.sync.warn{background:#fef3c7;color:#92400e}
.sync.bad{background:#fee2e2;color:#991b1b}
.ops-block{padding:10px 0;border-top:1px solid #eee}
.ops-block:first-of-type{border-top:0}
.ops-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:8px 0}
.ops-grid label{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--mu)}
#p-ops textarea{width:100%;font:13px 'DM Mono',monospace;border:1px solid var(--ln);border-radius:8px;padding:8px}
#p-ops .row{flex-wrap:wrap;gap:8px;align-items:center}
table.rep,table.keys{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0}
table.rep th,table.rep td,table.keys td{padding:6px 8px;border-bottom:1px solid #eee;text-align:left}
table.rep th{font-size:12px;color:var(--mu)}
kbd{background:#eef0f3;border:1px solid #cfd4dc;border-bottom-width:2px;border-radius:5px;padding:1px 6px;font:600 12px 'DM Mono',monospace}

#remote{min-height:100vh;background:#f3f4f6;padding:0 12px 28px;font-family:'DM Sans',sans-serif}
#remote header{display:flex;gap:10px;align-items:center;padding:14px 4px;position:sticky;top:0;background:#f3f4f6;z-index:5}
#remote header b{font-size:18px}
#remote header button{padding:8px 12px;border-radius:10px;border:1px solid var(--ln);background:#fff}
#remote h4{margin:18px 4px 8px;font-size:14px;color:var(--mu);text-transform:uppercase;letter-spacing:.06em;display:flex;justify-content:space-between}
.rm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.rm-grid.g3{grid-template-columns:repeat(3,1fr)}
.rm-grid.g4{grid-template-columns:repeat(4,1fr)}
#remote button{font:700 17px 'DM Sans',sans-serif;min-height:58px;border-radius:14px;border:2px solid var(--c,#d5d9e0);border-left-width:8px;background:#fff;color:#111;touch-action:manipulation}
#remote .g3 button,#remote .g4 button{border-left-width:2px;font-size:15px}
#remote button.live{background:#16a34a;color:#fff;border-color:#15803d}
#remote .rm-wide{width:100%;margin-top:10px;border-left-width:2px}
#remote .rm-clear{width:100%;margin-top:22px;min-height:70px;background:#dc2626;color:#fff;border-color:#b91c1c;border-left-width:2px;font-size:20px}
#remote header button{min-height:0;font-size:14px;border-left-width:1px}


/* =====================================================================
   IDENTIDAD VISUAL · KRONT LIVE
   Tipografías: Good Times (primaria, titulares) · Mayeka Bold (secundaria, textos)
   Coloca los archivos en /public/chromatour/fonts/ (ver fonts/LEEME_FUENTES.txt)
   ===================================================================== */
@font-face{font-family:'Good Times';font-weight:400 900;font-style:normal;font-display:swap;
  src:local('Good Times'),local('GoodTimes'),local('Good Times Rg'),
      url('/chromatour/fonts/GoodTimes.woff2') format('woff2'),
      url('/chromatour/fonts/GoodTimes.otf') format('opentype'),
      url('/chromatour/fonts/GoodTimes.ttf') format('truetype')}
@font-face{font-family:'Mayeka';font-weight:400 900;font-style:normal;font-display:swap;
  src:local('Mayeka Bold'),local('Mayeka-Bold'),local('Mayeka Bold Demo'),local('Mayeka'),
      url('/chromatour/fonts/Mayeka-Bold.woff2') format('woff2'),
      url('/chromatour/fonts/Mayeka-Bold.otf') format('opentype'),
      url('/chromatour/fonts/Mayeka-Bold.ttf') format('truetype')}

:root{
  --font-display:'Good Times','Orbitron','Barlow Condensed',sans-serif;   /* logotipo y grandes titulares */
  --font-text:'Mayeka','Poppins','DM Sans','Barlow Condensed',sans-serif; /* textos y subtítulos */
}

/* Texto base de todo lo que sale en pantalla */
#stage,#stage .ext-alert-box,#stage .cd,#stage .ph{font-family:var(--font-text)}
#stage{letter-spacing:.01em;font-weight:700}

/* Titulares y cifras de impacto -> Good Times */
#stage .stg b,
#stage #o-head-lead,
#stage .head-distance b,
#stage .head-gap b,
#stage .gr h4,
#stage #gc h4,
#stage .final-heading h4,
#stage .pt b,
#stage .pn,
#stage .tag,
#stage .ci .dn,
#stage .ci .nm,
#stage .pm em,
#stage #bAd b,
#stage .ad-copy b,
#stage .ext-alert-titles b,
#stage .ext-alert-badge,
#stage #o-mo{font-family:var(--font-display);font-weight:400;letter-spacing:.04em}

/* Good Times es muy ancha: se compensan los tamaños más grandes */
#stage .head-distance b{font-size:38px}
#stage #o-head-lead{font-size:18px}
#stage .head-gap b{font-size:30px}
#stage .gr h4{font-size:19px}
#stage #gc h4{font-size:22px}
#stage .final-heading h4{font-size:44px}
#stage .pt b{font-size:96px}
#stage .pn{font-size:72px}
#stage .p1 .pn{font-size:88px}
#stage .tag{font-size:19px}
#stage .ci .dn{font-size:64px}
#stage .ci .nm{font-size:34px}
#stage .pm em{font-size:34px}
#stage .pm em.pm-sub{font-size:24px}
#stage #bAd b,#stage .ad-copy b{font-size:40px}

/* =====================================================================
   LOGO KRONT LIVE · esquina superior derecha
   ===================================================================== */
#brand{
  position:absolute;right:60px;top:42px;z-index:30;
  height:92px;padding:0 26px;display:flex;align-items:center;justify-content:center;
  background:var(--race-panel);
  border-bottom:6px solid var(--ac);
  pointer-events:none;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.55));
}
#brand img{display:block;height:58px;width:auto}

/* El logo de patrocinador (mosca) pasa a la izquierda del logo de marca */
#mo{right:calc(60px + 330px);top:42px;height:92px}
#mo .ch{height:92px}

/* Logo de marca: versión navy sobre cuadro claro */
#brand.navy{background:rgba(255,255,255,.94);border-bottom-color:#061c2e}

/* Textos con ajuste automático (js/fit-text.js): una sola línea, el script reduce el tamaño si no cabe */
#stage .fit{white-space:nowrap}
#stage .fit.fit-wrap{white-space:normal;overflow-wrap:anywhere}
/* La ficha no debe ensancharse con nombres largos: el texto se ajusta dentro de su caja */
#stage #card .ci,#stage #card .ci>*{min-width:0}

/* Pantalla verde a ventana completa: el escenario se estira a la proporción de la ventana (js/users-nav.js · fitOutStage).
   Lo que va centrado se centra con porcentajes en vez de coordenadas fijas de 1920 px. */
#stage #final{left:calc(50% - 820px)}
#stage #prof{left:calc(50% - 900px);right:auto;width:1800px}

/* Editor de ciclista dentro de la lista */
.rider-edit{background:#fff;border:2px solid var(--ac,#FFD100);border-radius:10px;padding:12px;margin:8px 0;display:grid;grid-template-columns:120px 1fr;gap:12px}
.re-photo{display:flex;flex-direction:column;align-items:center;gap:6px}
.re-photo img,.re-photo .ph{width:110px;height:110px;border-radius:8px;object-fit:contain;background:#1f242d}
.re-photo .b{width:100%;font-size:12px;text-align:center}
.re-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.re-grid label{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:700;color:var(--mu)}
.re-grid input,.re-grid select{width:100%;font-size:14px}
.re-actions{grid-column:1/-1;display:flex;gap:8px}
.re-actions .ac{flex:1}
@media (max-width:640px){.rider-edit{grid-template-columns:1fr}}

.app-version{margin-left:8px;font-size:11px;color:#9ca3af;font-weight:600;letter-spacing:.02em}

/* Cabecera: título de la carrera, etapa y fase apilados, alineados a la izquierda */
.head-meta{align-items:flex-start}
.head-meta .stg{max-width:520px;min-width:0;gap:2px}
.head-meta .stg b,.head-meta .stg span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head-meta .stg b{font-size:24px}
.head-meta .stg span{font-size:18px}
.head-meta .stg .lb{margin:3px 0 0;align-self:flex-start;max-width:100%;font-size:19px;font-style:italic;text-transform:none;opacity:1;padding:2px 12px;background:none;border-left:4px solid var(--ac)}
.head-meta .stg .lb[hidden]{display:none}
.head-meta .m{padding-top:2px}
#stage .head-meta .stg .lb{background:none}
/* la fase va debajo de la etapa: la delantera baja un poco para no pegarse */
#grp{top:252px}