/* ==========================================================
   SCANIA · Mundos en familia — Sistema visual compartido
   Colores y tipografía según Scania Identity Manual 2021.10
   Desarrollo: BBM PRODUCCIONES SAS
   ========================================================== */
@font-face{font-family:"Scania Sans Headline";src:url("ScaniaSansHeadline-Bold.otf") format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"Scania Sans Headline";src:url("ScaniaSansHeadline-Regular.otf") format("opentype");font-weight:400;font-display:swap}

:root{
  /* Colores de marca (manual p. 60) */
  --sc-blue:#041E42;      /* Scania Blue */
  --sc-white:#FAFAFA;     /* Scania White */
  --sc-red:#D6001C;       /* Scania Red — uso moderado */
  --sc-silver:#C8C9C7;    /* aproximación digital de Silver/Light Grey */
  /* Grises de soporte */
  --sc-grey-l:#C8C9C7; --sc-grey-m:#97999B; --sc-grey-d:#53565A; --sc-black:#2D2926;
  /* Secundarios (manual p. 61) */
  --sc-orange:#E35205; --sc-beige:#CEB888; --sc-pale-green:#94A596; --sc-green:#2C5234;
  /* Derivados para interfaz (tonos de superficie, no colores de marca) */
  --ui-blue-2:#0B2C5C; --ui-blue-3:#123A72; --ui-line:rgba(250,250,250,.14);
  --font-head:"Scania Sans Headline","Helvetica Neue",Arial,sans-serif;
  --font-body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --r:6px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--sc-blue);color:var(--sc-white);font-family:var(--font-body);
  -webkit-user-select:none;user-select:none;overscroll-behavior:none;-webkit-text-size-adjust:100%}
img{-webkit-user-drag:none;user-select:none}
h1,h2,h3,.head{font-family:var(--font-head);font-weight:700;letter-spacing:.01em;margin:0;line-height:1.05}
.up{text-transform:uppercase}
button{font-family:var(--font-head);font-weight:700;cursor:pointer;border:0;color:inherit;background:none}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;
  border-radius:var(--r);font-size:18px;letter-spacing:.04em;text-transform:uppercase;transition:transform .15s var(--ease),filter .15s,background .2s}
.btn:active{transform:scale(.96);filter:brightness(1.15)}
.btn-primary{background:var(--sc-white);color:var(--sc-blue)}
.btn-ghost{background:transparent;color:var(--sc-white);box-shadow:inset 0 0 0 2px var(--ui-line)}
.btn-orange{background:var(--sc-orange);color:var(--sc-white)}
.btn[disabled]{opacity:.35;pointer-events:none}

.card{background:var(--ui-blue-2);border:1px solid var(--ui-line);border-radius:10px}
.muted{color:var(--sc-grey-m)}

/* Crédito obligatorio BBM — franja inferior, fuera del área de marca */
.bbm-credit{position:fixed;right:10px;bottom:6px;z-index:9000;font:600 10px/1 var(--font-body);letter-spacing:.06em;
  color:rgba(250,250,250,.55);pointer-events:none;text-transform:none}
.bbm-credit.dark{color:rgba(4,30,66,.55)}

/* Marca Scania: símbolo arriba-derecha, wordmark abajo-derecha (grilla del manual) */
.sc-symbol{position:fixed;top:14px;right:14px;width:46px;z-index:50;pointer-events:none}
.sc-wordmark{display:block;height:auto}

/* Toast */
.toast{position:fixed;left:50%;top:18px;transform:translate(-50%,-140%);background:var(--sc-white);color:var(--sc-blue);
  padding:12px 18px;border-radius:var(--r);font:700 15px var(--font-head);z-index:9500;transition:transform .35s var(--ease);max-width:90vw;text-align:center}
.toast.show{transform:translate(-50%,0)}

/* Ranking (estilo podio en vivo) */
.rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rank-row{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r);
  background:rgba(250,250,250,.06);transition:transform .4s var(--ease),background .3s}
.rank-row .pos{font:700 20px var(--font-head);color:var(--sc-grey-m)}
.rank-row .nm{font:700 17px var(--font-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-row .pt{font:700 20px var(--font-head);font-variant-numeric:tabular-nums}
.rank-row.r1{background:var(--sc-white);color:var(--sc-blue)} .rank-row.r1 .pos{color:var(--sc-blue)}
.rank-row.r2,.rank-row.r3{background:rgba(250,250,250,.16)}
.rank-row.me{box-shadow:inset 0 0 0 2px var(--sc-orange)}
.rank-row.enter{animation:rowIn .5s var(--ease) both}
@keyframes rowIn{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}

.fade-in{animation:fadeIn .4s var(--ease) both}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hidden{display:none!important}

/* Iconos SVG */
.ico{width:22px;height:22px;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}