/*
|--------------------------------------------------------------------------
| F53 R4 · ZERO-500 VISUAL HARDENING
|--------------------------------------------------------------------------
| Última capa visual: alto contraste, ancho premium y legibilidad mínima.
| No contiene lógica de negocio.
*/

:root{
  --r4-bg:#050912;
  --r4-surface:#0c1928;
  --r4-surface-2:#102237;
  --r4-text:#f8fbff;
  --r4-soft:#d8e5ef;
  --r4-muted:#a8bdcd;
  --r4-teal:#4fe1bc;
  --r4-blue:#67b2ff;
  --r4-line:rgba(173,205,225,.18);
}

/* Las experiencias premium deben ocupar el viewport, no una tarjeta de 900px. */
@supports selector(body:has(.f360-player-hub)){
  body:has(.f360-player-hub),
  body:has(.child360-shell),
  body:has(.f53coach-shell),
  body:has(.f360-coach),
  body:has(.f53-page){
    background:var(--r4-bg)!important;
  }

  .wrap:has(.f360-player-hub),
  .wrap:has(.child360-shell),
  .wrap:has(.f53coach-shell),
  .wrap:has(.f360-coach),
  .wrap:has(.f53-page){
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:clamp(8px,1.4vw,20px) clamp(8px,1.4vw,20px) 92px!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
}

/* Player Hub adolescente: evita variables huérfanas y texto casi invisible. */
.f360-player-hub{
  --f360-bg:#050912!important;
  --f360-surface:#0d1929!important;
  --f360-surface-2:#101e30!important;
  --f360-surface-3:#152238!important;
  --f360-text:#f8fafc!important;
  --f360-muted:#a8bbcd!important;
  --f360-soft:#dce6f1!important;
  --f360-cyan:#2dd4bf!important;
  --f360-blue:#60a5fa!important;
  --f360-violet:#8b5cf6!important;
  --f360-green:#22c55e!important;
  --f360-orange:#fb923c!important;
  --f360-danger:#fb7185!important;
  width:min(1540px,100%)!important;
  color:var(--r4-text)!important;
}

.f360-player-hub .f360-card,
.f360-player-hub .f360-roadmap,
.f360-player-hub .f360-dev-review,
.f360-player-hub .f360-progress-timeline,
.f360-player-hub .f360-benchmark,
.f360-player-hub .f360-progression{
  color:var(--r4-text)!important;
}

.f360-player-hub p,
.f360-player-hub .f360-muted,
.f360-player-hub small,
.f360-player-hub .f360-roadmap-inspiration p:last-child,
.f360-player-hub .f360-roadmap-rule p,
.f360-player-hub .f360-dev-review-head>div>p:last-child,
.f360-player-hub .f360-dev-review-causality p{
  color:var(--r4-muted)!important;
}

.f360-player-hub h1,
.f360-player-hub h2,
.f360-player-hub h3,
.f360-player-hub strong{
  color:var(--r4-text);
}

.f360-player-hub .f360-eyebrow{
  color:var(--r4-teal)!important;
  font-size:.72rem!important;
}

.f360-player-hub .f360-dev-review-verdict span,
.f360-player-hub .f360-dev-review-score span,
.f360-player-hub .f360-dev-review-story span,
.f360-player-hub .f360-dev-review-dimensions span,
.f360-player-hub .f360-roadmap-inspiration-tag small{
  color:#a9bdcd!important;
  font-size:max(.66rem,11px)!important;
}

.f360-player-hub .f360-roadmap-rule strong,
.f360-player-hub .f360-dev-review-story strong,
.f360-player-hub .f360-dev-review-dimensions strong,
.f360-player-hub .f360-dev-review-score strong,
.f360-player-hub .f360-dev-review-verdict strong{
  color:#fff!important;
}

.f360-player-hub .f360-roadmap-inspiration,
.f360-player-hub .f360-dev-review{
  border-color:rgba(168,189,205,.18)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.22)!important;
}

/* Niño: conserva estética lúdica con tipografía más legible. */
.child360-shell{
  width:min(1540px,calc(100vw - 16px))!important;
  color:#f8fcff!important;
}
.child360-shell p,
.child360-shell small,
.child360-shell .child360-score-copy span,
.child360-shell .child360-score-copy small{
  color:#b6cfda;
}
.child360-kpi span,.child360-kpi small{font-size:max(.74rem,12px)!important}
.child360-teammate strong{font-size:max(.78rem,12px)!important}
.child360-teammate small,.child360-achievement small,.child360-day span,.child360-day small{font-size:max(.66rem,11px)!important}
.child360-card{box-shadow:0 18px 48px rgba(0,0,0,.18)!important}

/* Coach / desarrollo: misma densidad visual que la portada premium. */
.f53coach-shell,.f360-coach{width:min(1540px,100%)!important;margin-inline:auto!important}
.f53coach-shell p,.f53coach-shell small,.f360-coach p,.f360-coach small{line-height:1.5}

/* La barra maestra no debe tapar encabezados. */
.f53-demo-masterbar{
  top:10px!important;
  right:12px!important;
  box-shadow:0 14px 40px rgba(0,0,0,.34)!important;
}

/* Navegación inferior más legible y consistente en dark premium. */
body:has(.f360-player-hub) .bottom-nav,
body:has(.child360-shell) .bottom-nav,
body:has(.f53coach-shell) .bottom-nav,
body:has(.f360-coach) .bottom-nav{
  background:rgba(6,17,27,.94)!important;
  border-top:1px solid rgba(168,189,205,.16)!important;
  box-shadow:0 -10px 35px rgba(0,0,0,.22)!important;
}
body:has(.f360-player-hub) .bottom-nav a,
body:has(.child360-shell) .bottom-nav a,
body:has(.f53coach-shell) .bottom-nav a,
body:has(.f360-coach) .bottom-nav a{
  color:#c7d8e4!important;
}
body:has(.f360-player-hub) .bottom-nav a.active,
body:has(.child360-shell) .bottom-nav a.active,
body:has(.f53coach-shell) .bottom-nav a.active,
body:has(.f360-coach) .bottom-nav a.active{
  color:var(--r4-teal)!important;
}

@media(max-width:760px){
  .f53-demo-masterbar{max-width:calc(100vw - 18px);font-size:.65rem}
  .f53-demo-masterbar span{display:none}
  .f360-player-hub{border-radius:18px!important;padding:8px!important}
  .f360-dev-review{padding:16px!important}
}