/* ===========================================================================
   Ranking del Grand Prix.

   Hoja de UNA SOLA PÁGINA: `style.css` son 320 KB que descarga todo el mundo,
   y esto solo lo necesita quien entra al campeonato. La vista la pide con
   `'css' => ['assets/css/grandprix.css']` (ver layout/main.php).

   Los colores salen de las variables del tema para que siga los cambios de
   `style.css` en vez de ir por su cuenta; solo el oro, la plata y el bronce
   del podio son propios, porque no existen en la paleta.
   =========================================================================== */

:root {
    --gp-oro:     #f6c343;
    --gp-plata:   #c9d1d9;
    --gp-bronce:  #cd7f32;
    --gp-sube:    #3fb950;
    --gp-baja:    #f85149;
    --gp-tuyo:    rgba(246, 195, 67, .14);
}

/* ------------------------------------------------------------------ cabecera */

.gp-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    align-items: center;
    justify-content: space-between;
    padding: 30px 26px;
    margin-bottom: 30px;
    border-radius: 16px;
    background:
        radial-gradient(760px 260px at 12% -20%, rgba(246, 195, 67, .20), transparent 68%),
        radial-gradient(520px 240px at 100% 120%, rgba(88, 166, 255, .14), transparent 70%),
        linear-gradient(135deg, #182944, #0c1322 65%);
    border: 1px solid rgba(246, 195, 67, .28);
    box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .9);
}

/* Un filo dorado arriba: es lo que separa esto de una caja cualquiera. */
.gp-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gp-oro), transparent);
    opacity: .75;
}

.gp-hero__texto { max-width: 52ch; }

.gp-hero__marca {
    margin: 0 0 2px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--gp-oro);
    opacity: .8;
}

.gp-hero__titulo {
    margin: 0 0 8px;
    font-size: 2.3rem;
    line-height: 1.05;
    letter-spacing: .5px;
    color: var(--gp-oro);
    text-shadow: 0 2px 18px rgba(246, 195, 67, .35);
}

.gp-hero__sub { margin: 0; opacity: .85; line-height: 1.55; }

/* Quién va primero, dicho con palabras: es lo que la gente viene a mirar. */
.gp-hero__lider {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: .88rem;
    background: rgba(246, 195, 67, .10);
    border: 1px solid rgba(246, 195, 67, .30);
}
.gp-hero__corona { color: var(--gp-oro); font-size: 1.05rem; line-height: 1; }
.gp-hero__lider strong { color: #fff; }
.gp-hero__lider-pts { opacity: .7; }

/* Las cifras, cada una en su chapa. Sueltas sobre el fondo se leían como una
   lista de la compra; con caja y separación se leen de un vistazo. */
.gp-cifras {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gp-cifras li {
    min-width: 96px;
    padding: 12px 16px;
    text-align: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
}
.gp-cifras strong {
    display: block;
    font-size: 1.55rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.gp-cifras span {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .7px;
    opacity: .65;
}
.gp-cifras li:first-child strong { color: var(--gp-oro); }

/* --------------------------------------------------------------------- podio

   El dibujo es el del juego (`ranking_top_N.png`, 260x217: corona de laurel,
   número, misil y listón), el mismo que usa el ranking normal del portal. Lo
   que hay debajo es una ficha oscura con los puntos y el récord.

   Antes había cajas con un "peldaño" de CSS: se veían huecas y el peldaño
   parecía un fallo de dibujo. */

.gp-podio {
    display: grid;
    grid-template-columns: 1fr 1.18fr 1fr;
    align-items: end;
    gap: 14px;
    margin-bottom: 32px;
}

/* 2 - 1 - 3: el campeón en el centro. */
.gp-podio__caja--1 { order: 2; }
.gp-podio__caja--2 { order: 1; }
.gp-podio__caja--3 { order: 3; }

.gp-podio__caja {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---- la corona de laurel ---- */

.gp-podio__arte {
    position: relative;
    width: 100%;
    max-width: 196px;
    aspect-ratio: 260 / 217;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}
.gp-podio__caja--1 .gp-podio__arte { max-width: 240px; }

.gp-podio__arte--1 { background-image: url('../../images/ranking_top_1.png'); }
.gp-podio__arte--2 { background-image: url('../../images/ranking_top_2.png'); }
.gp-podio__arte--3 { background-image: url('../../images/ranking_top_3.png'); }

/* El nick, encima del listón del dibujo. Los porcentajes son los del sprite,
   no un ajuste a ojo: el listón ocupa del 78 % al 91 % del alto. */
.gp-podio__liston {
    position: absolute;
    left: 11%;
    right: 11%;
    top: 78%;
    bottom: 9%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .7);
    white-space: nowrap;
    overflow: hidden;
}
.gp-podio__caja--1 .gp-podio__liston { font-size: .92rem; }
.gp-podio__nombre { overflow: hidden; text-overflow: ellipsis; }

/* ---- la ficha de debajo ---- */

.gp-podio__ficha {
    position: relative;
    width: 100%;
    margin-top: -6px;
    padding: 14px 14px 16px;
    border-radius: 12px;
    text-align: center;
    background: linear-gradient(170deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
    border: 1px solid rgba(255, 255, 255, .10);
    border-top: 2px solid rgba(255, 255, 255, .18);
}

.gp-podio__caja--1 .gp-podio__ficha {
    border-color: rgba(246, 195, 67, .45);
    border-top-color: var(--gp-oro);
    background: linear-gradient(170deg, rgba(246, 195, 67, .14), rgba(255, 255, 255, .02) 60%);
    box-shadow: 0 0 30px -12px rgba(246, 195, 67, .55);
}
.gp-podio__caja--2 .gp-podio__ficha { border-top-color: var(--gp-plata); }
.gp-podio__caja--3 .gp-podio__ficha { border-top-color: var(--gp-bronce); }

.gp-podio__caja.is-yo .gp-podio__ficha { box-shadow: 0 0 0 2px var(--gp-oro) inset; }

.gp-podio__pais {
    margin: 0 0 8px;
    font-size: .78rem;
    opacity: .7;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.gp-podio__puntos {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.gp-podio__caja--1 .gp-podio__puntos { font-size: 2.15rem; color: var(--gp-oro); }
.gp-podio__puntos span {
    display: block;
    margin-top: 4px;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    opacity: .6;
    font-weight: 400;
    color: #fff;
}

.gp-podio__vd { margin: 10px 0 0; display: flex; gap: 10px; justify-content: center; font-size: .86rem; }

.gp-podio__ficha .gp-barra { margin-top: 10px; height: 18px; }
.gp-podio__ficha .gp-barra em { line-height: 18px; font-size: .7rem; }

.gp-gana   { color: var(--gp-sube); }
.gp-pierde { color: var(--gp-baja); }
.gp-pct    { opacity: .75; }

/* ------------------------------------------------------------------- bloques */

.gp-bloque { margin-bottom: 30px; }

.gp-bloque__head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.gp-bloque__head h2 { margin: 0; font-size: 1.15rem; }
.gp-bloque__nota { margin: 0; font-size: .82rem; opacity: .7; }

.gp-busca { display: flex; gap: 8px; align-items: center; }
.gp-busca input[type="search"] {
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(0, 0, 0, .25);
    color: inherit;
    min-width: 190px;
}
.gp-busca button {
    padding: 7px 14px;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    font-weight: 600;
    color: #0e1626;
    background: var(--gp-oro);
}
.gp-busca__limpiar { font-size: .82rem; opacity: .8; }

/* -------------------------------------------------------------------- tablas */

.gp-tabla-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .09); }

.gp-tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.gp-tabla th, .gp-tabla td { padding: 9px 12px; text-align: left; white-space: nowrap; }
.gp-tabla thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .7px; opacity: .65; background: rgba(255, 255, 255, .04); }
.gp-tabla tbody tr + tr { border-top: 1px solid rgba(255, 255, 255, .06); }
.gp-tabla tbody tr:hover { background: rgba(255, 255, 255, .04); }

/* La fila propia, marcada de verdad: en un ranking de 457 hay que encontrarse. */
.gp-tabla tbody tr.is-yo { background: var(--gp-tuyo); }
.gp-tabla tbody tr.is-yo td:first-child { box-shadow: inset 3px 0 0 var(--gp-oro); }

.gp-col-puesto { width: 54px; font-weight: 700; text-align: right; }
.gp-col-mov    { width: 64px; }
.gp-col-puntos { text-align: right; font-variant-numeric: tabular-nums; }
.gp-col-vd     { text-align: center; font-variant-numeric: tabular-nums; opacity: .85; }
.gp-col-pct    { width: 120px; }
.gp-col-nick   { width: 100%; white-space: normal; }

.gp-bandera { margin-right: 6px; }

.gp-mov { font-size: .78rem; font-variant-numeric: tabular-nums; }
.gp-mov--sube  { color: var(--gp-sube); }
.gp-mov--baja  { color: var(--gp-baja); }
.gp-mov--igual,
.gp-mov--nuevo { opacity: .4; }

/* La barra del porcentaje: el número va DENTRO, no al lado, para que la
   columna no crezca y la tabla no baile al paginar. */
.gp-barra {
    position: relative;
    display: block;
    /* Con `table-layout: auto` el ancho del TH es solo una sugerencia y la
       columna se encoge a lo que ocupe el texto: sin este minimo la barra
       sale de 30 px y el relleno verde se come la mitad del numero. */
    min-width: 92px;
    height: 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}
.gp-barra::before {
    content: "";
    position: absolute; inset: 0 auto 0 0;
    width: var(--gp-pct, 0%);
    background: linear-gradient(90deg, rgba(63, 185, 80, .55), rgba(246, 195, 67, .75));
}
.gp-barra em {
    position: relative;
    display: block;
    text-align: center;
    font-style: normal;
    font-size: .72rem;
    line-height: 16px;
}

.gp-tuyo { margin-bottom: 22px; }
.gp-tuyo__titulo { margin: 0 0 8px; font-size: 1rem; opacity: .8; }
.gp-tabla--mia { border: 1px solid rgba(246, 195, 67, .35); border-radius: 12px; overflow: hidden; }

.gp-vacio { padding: 28px; text-align: center; opacity: .7; }

.gp-paginas { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 14px; font-size: .9rem; }

/* --------------------------------------------------------------------- móvil */

@media (max-width: 720px) {
    .gp-hero { padding: 22px 18px; }
    .gp-hero__titulo { font-size: 1.9rem; }

    /* En una columna el peldaño no significa nada (no hay nada al lado con
       lo que compararlo) y solo roba pantalla: se quita y se deja el orden
       natural 1, 2, 3. */
    /* En una columna el 2-1-3 no se entiende: vuelve el orden natural y el
       campeón, arriba. */
    .gp-podio { grid-template-columns: 1fr; gap: 18px; }
    .gp-podio__caja { order: 0; }
    .gp-podio__arte,
    .gp-podio__caja--1 .gp-podio__arte { max-width: 170px; }

    .gp-cifras { width: 100%; }
    .gp-cifras li { flex: 1 1 calc(50% - 10px); min-width: 0; }
    .gp-oculto-movil { display: none; }
    .gp-col-pct { width: 86px; }
    .gp-barra { min-width: 72px; }
    .gp-tabla th, .gp-tabla td { padding: 8px; }
}