/* Tablero público del Torneo Escalera — mobile first. */

:root {
    --verde-oscuro: #0f2e1d;
    --verde:        #1b7f4c;
    --verde-claro:  #e8f5ee;
    --lima:         #d8f24e;
    --tinta:        #16201a;
    --gris:         #6b7a72;
    --linea:        #e4eae6;
    --fondo:        #f6f8f7;
    --blanco:       #ffffff;
    --radio:        14px;
    --sombra:       0 1px 2px rgba(16, 32, 24, .06), 0 4px 14px rgba(16, 32, 24, .05);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- Encabezado ---------- */

.tope {
    background: linear-gradient(150deg, var(--verde-oscuro) 0%, #1a4a2e 100%);
    color: #fff;
    padding: 22px 18px 18px;
    padding-top: calc(22px + env(safe-area-inset-top));
    text-align: center;
}

.tope h1 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.tope .temporada {
    margin: 4px 0 0;
    font-size: .82rem;
    color: var(--lima);
    font-weight: 600;
    letter-spacing: .02em;
}

/* ---------- Tabs ---------- */

.tabs {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    gap: 4px;
    padding: 8px 10px;
    background: rgba(246, 248, 247, .94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--linea);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
    flex: 1 0 auto;
    text-align: center;
    white-space: nowrap;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--gris);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.tab:active { background: var(--verde-claro); }

.tab.activo {
    background: var(--verde);
    color: #fff;
    box-shadow: 0 2px 8px rgba(27, 127, 76, .28);
}

/* ---------- Layout ---------- */

main {
    max-width: 640px;
    margin: 0 auto;
    padding: 14px 12px 8px;
}

.bloque { margin-bottom: 22px; }

.titulo-seccion {
    margin: 0 0 8px 4px;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gris);
}

.nota {
    margin: 10px 4px;
    font-size: .82rem;
    color: var(--gris);
    text-align: center;
}

/* ---------- Listas ---------- */

.lista {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--blanco);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    overflow: hidden;
}

.fila {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--linea);
}

.fila:last-child { border-bottom: 0; }

.escalera .fila:first-child { background: linear-gradient(90deg, #fffdf0, var(--blanco) 60%); }

.pos {
    flex: 0 0 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--verde-claro);
    color: var(--verde);
    font-size: .8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pos-1 { background: #f6d76b; color: #6b4e05; }
.pos-2 { background: #dfe4e8; color: #4b555c; }
.pos-3 { background: #eccaa6; color: #6d4720; }

.avatar {
    flex: 0 0 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--verde-oscuro);
    color: var(--lima);
    font-size: .85rem;
    font-weight: 700;
}

.datos {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.nombre {
    font-size: .95rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nombre .d {
    color: var(--gris);
    font-weight: 400;
    font-size: .85em;
}

.sub {
    font-size: .76rem;
    color: var(--gris);
    font-variant-numeric: tabular-nums;
}

.rating {
    flex: 0 0 auto;
    text-align: right;
    line-height: 1.1;
}

.rating strong {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--verde-oscuro);
}

.rating small {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gris);
}

/* ---------- Partidos ---------- */

.fila-partido { align-items: flex-start; }

.fecha {
    flex: 0 0 52px;
    padding-top: 2px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--gris);
    text-transform: lowercase;
}

.partidos .nombre { white-space: normal; }

/* ---------- Head-to-head ---------- */

.tarjeta {
    background: var(--blanco);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 14px;
}

.form-h2h {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-h2h label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-h2h label span {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gris);
}

.form-h2h select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 11px 34px 11px 12px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--tinta);
    background: var(--fondo)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236b7a72' stroke-width='2'/></svg>")
        no-repeat right 13px center;
    border: 1px solid var(--linea);
    border-radius: 10px;
}

.form-h2h select:focus {
    outline: 2px solid var(--verde);
    outline-offset: 1px;
}

.form-h2h button {
    margin-top: 2px;
    padding: 12px;
    font-size: .95rem;
    font-family: inherit;
    font-weight: 700;
    color: #fff;
    background: var(--verde);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.form-h2h button:active { background: #166b40; }

.marcador-h2h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
    text-align: center;
}

.marcador-h2h .lado {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 4px;
    border-radius: 10px;
}

.marcador-h2h .lado.gana { background: var(--verde-claro); }

.marcador-h2h .nombre {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    white-space: normal;
}

.marcador-h2h .conteo {
    display: block;
    margin-top: 2px;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    color: var(--verde-oscuro);
    font-variant-numeric: tabular-nums;
}

.marcador-h2h .vs {
    flex: 0 0 auto;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--gris);
}

/* ---------- Estado vacío ---------- */

.vacio {
    background: var(--blanco);
    border: 1px dashed var(--linea);
    border-radius: var(--radio);
    padding: 30px 20px;
    text-align: center;
    color: var(--gris);
}

.vacio-ico {
    display: block;
    font-size: 1.7rem;
    margin-bottom: 6px;
}

.vacio p {
    margin: 0;
    font-size: .92rem;
    font-weight: 600;
    color: var(--tinta);
}

.vacio small {
    display: block;
    margin-top: 4px;
    font-size: .78rem;
}

/* ---------- Pie ---------- */

.pie {
    padding: 18px 16px 26px;
    text-align: center;
}

.pie p {
    margin: 0;
    font-size: .72rem;
    color: var(--gris);
}

/* ---------- Pantallas grandes ---------- */

@media (min-width: 520px) {
    .tope h1 { font-size: 1.6rem; }
    .fila { padding: 13px 16px; }
    .form-h2h {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: end;
    }
    .form-h2h button { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* Jugadores con menos de 3 partidos: su lugar todavía no es representativo. */
.fila.provisional .rating strong { color: #7a7a7a; }
.tag-prov {
    display: inline-block;
    margin-left: .4rem;
    padding: .1rem .4rem;
    border-radius: 999px;
    background: #f0f0ef;
    color: #6b6b6b;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    vertical-align: middle;
}