:root {
    --blue: #009ce4;
    --dark: #08181e;
    --white: #ffffff;
    --green: #2e7d32;
    --red: #c62828;
    --gray: #f0f0f0;
    --border: #ddd;
    --font-poppins: 'Poppins', sans-serif;
    --font-special: 'Special Gothic Expanded One', 'Oswald', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-poppins); background: var(--white); color: var(--dark); }

/* ── HEADER ────────────────────── */
header { text-align: center; padding: 20px 0; }
header img { max-width: 300px; width: 100%; height: auto; padding-top: 20px; }

/* ── HERO ──────────────────────── */
.hero {
    position: relative;
    background-image: url('assets/banner-convocados.png');
    background-size: cover;
    background-position: center bottom;
    color: var(--white);
    text-align: center;
    padding: 60px 20px 100px;
    margin-bottom: 0;
}
.hero-titulo { font-family: var(--font-poppins); font-size: clamp(16px, 4vw, 48px); font-weight: 400; letter-spacing: 2px; opacity: 0.85; }
.hero-convocados { font-family: var(--font-special); font-size: clamp(44px, 9vw, 110px); font-weight: 700; line-height: 0.9; text-transform: uppercase; color: var(--white); }
.hero-mundial { font-family: var(--font-poppins); font-size: clamp(14px, 2.5vw, 28px); font-weight: 700; letter-spacing: 4px; margin-top: 6px; opacity: 0.7; }
.hero p { font-size: clamp(12px, 1.8vw, 20px); font-weight: 300; max-width: 600px; margin: 16px auto 0; line-height: 1.4; padding-bottom: 20px; }
.hero-sponsor { margin-top: 0; padding-bottom: 33px; }
.hero-sponsor-logo { height: 84px; width: auto; display: block; margin: 0 auto; }

/* ── MAIN ──────────────────────── */
main { max-width: 1200px; margin: 0 auto; padding: 0 16px 60px; }


button#btn-modo-demo {
    display: none;
}

/* ── SECTION TITLES ─────────────── */
.section-header { display: flex; align-items: center; margin-bottom: 20px; }
#bracket-section-title { align-items: baseline; }
.section-header div.title-main {
    font-family: var(--font-special);
    font-size: clamp(22px, 3.2vw, 38px);
    font-weight: 800;
    border-bottom: 4px solid var(--dark);
    line-height: 1;
    padding-bottom: 4px;
    margin-right: 15px;
    display: inline-block;
    padding-top: 100px;
}
.section-header span.subtitle {
    font-family: var(--font-poppins);
    font-size: clamp(13px, 1.4vw, 16px);
    font-weight: 300;
    color: var(--dark);
    padding-bottom: 4px;
    line-height: 1;
    align-self: flex-end;
}

/* ── TABS ──────────────────────── */
.tab-nav {
    display: flex;
    gap: 4px;
    margin: 0 0 28px;
    border-bottom: 3px solid var(--blue);
    padding-top: 24px;
}
.tab-btn {
    flex: 1;
    padding: 10px 16px;
    background: var(--gray);
    border: none;
    font-family: var(--font-special);
    font-size: clamp(13px, 1.8vw, 18px);
    font-weight: 700;
    color: var(--dark);
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.tab-btn .tab-icon { font-size: 10px; opacity: 0; }
.tab-btn.active { background: var(--dark); color: var(--white); }
.tab-btn.active .tab-icon { opacity: 1; }
.tab-btn:hover:not(.active) { background: #ddd; }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── PROGRESS BAR ──────────────── */
.grupos-progress-bar { margin-bottom: 20px; }
.grupos-progress-text { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: #555; }
.btn-reiniciar-inline {
    background: none;
    border: none;
    font-family: var(--font-poppins);
    font-size: 12px;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    padding: 0;
    letter-spacing: 0.3px;
    transition: color 0.2s;
}
.btn-reiniciar-inline:hover { color: var(--dark); }
.grupos-progress-track { height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; }
.grupos-progress-fill { height: 100%; background: var(--blue); border-radius: 4px; transition: width 0.4s ease; }

/* ── GRUPOS GRID ───────────────── */
.grupos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

/* ── GROUP CARD ────────────────── */
.group-card {
    border: 2px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--white);
}
.group-card.complete { border-color: var(--blue); }

.group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--dark);
    color: var(--white);
    padding: 10px 14px;
}
.group-header-title {
    font-family: var(--font-special);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.group-progress-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
}
.group-progress-badge.done { background: var(--blue); }

/* ── JORNADA LABEL ─────────────── */
.jornada-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    padding: 6px 10px 3px;
    border-top: 1px solid #f0f0f0;
}
.matches-section .jornada-label:first-child { border-top: none; }

/* ── STANDINGS TABLE ───────────── */
.standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.standings-table thead th {
    background: #f5f5f5;
    padding: 5px 4px;
    text-align: center;
    font-weight: 600;
    color: #555;
    border-bottom: 1px solid var(--border);
}
.standings-table thead th:first-child { text-align: left; padding-left: 8px; }
.standings-table tbody td {
    padding: 5px 4px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}
.standings-table tbody tr:last-child td { border-bottom: none; }
.standings-table tbody td:first-child { text-align: left; }
.standings-table tbody td:nth-child(2) { text-align: left; }

.standing-team-cell {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-left: 6px;
}
.standing-pos {
    font-size: 10px;
    font-weight: 700;
    color: #999;
    width: 14px;
    text-align: center;
}
.standing-pos.qualified { color: var(--blue); }
.standing-pos.possible { color: #ff9800; }
.standing-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 1px; }
.standing-name { font-size: 10.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px; }
.standing-pts { font-weight: 700; color: var(--dark); }

/* ── MATCHES SECTION ───────────── */
.matches-section { padding: 10px 0; }
.match-row {
    display: flex;
    flex-direction: column;
    padding: 5px 10px 4px;
    border-bottom: 1px solid #f5f5f5;
    gap: 2px;
}
.match-row:last-child { border-bottom: none; }
.match-row-teams {
    display: flex;
    align-items: center;
    gap: 4px;
}
.match-meta {
    font-size: 9px;
    color: #bbb;
    text-align: right;
    line-height: 1.3;
    padding-top: 3px;
}
.match-team {
    display: flex;
    align-items: anchor-center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.match-team.right { flex-direction: row-reverse; }
.match-team-name { font-size: 10px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-team-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 1px; flex-shrink: 0; }
.match-score-wrap {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.score-input {
    width: 30px;
    height: 28px;
    text-align: center;
    font-family: var(--font-poppins);
    font-size: 16px;
    font-weight: 700;
    border: 1px solid var(--border);
    border-radius: 3px;
    outline: none;
    background: #fafafa;
    color: var(--dark);
    transition: border-color 0.2s;
    -moz-appearance: textfield;
}
.score-input::-webkit-outer-spin-button,
.score-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.score-input:focus { border-color: var(--blue); background: #fff; }
.score-input.has-value { background: #fff; border-color: #bbb; }
.score-sep { font-size: 12px; font-weight: 700; color: #999; }

/* ── LOCKED MATCHES ────────────── */
.match-row.locked-match { background: #f9fafb; }
.score-locked {
    width: 30px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #333;
    background: #e8edf2;
    border-radius: 4px;
}
.match-locked-label {
    font-size: 10px;
    color: var(--dark);
    text-align: center;
    letter-spacing: .03em;
    padding: 1px 0 2px;
}
.bk-team.locked { cursor: default; }

.bk-locked-tooltip {
    position: absolute;
    background: rgba(20,20,20,.88);
    color: #fff;
    font-size: 11px;
    font-family: 'Roboto', sans-serif;
    padding: 5px 10px;
    border-radius: 5px;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity .15s;
    white-space: nowrap;
}

.generar-container {
    text-align: center;
    padding: 20px 0 40px;
}
.grupos-incompletos-msg {
    background: var(--gray);
    border-left: 4px solid var(--dark);
    border-radius: 0;
    padding: 12px 16px;
    font-family: var(--font-poppins);
    font-size: 13px;
    text-align: left;
    max-width: 480px;
    margin: 0 auto 16px;
    display: none;
}
.grupos-incompletos-msg.visible { display: block; }
.grupos-incompletos-msg strong { font-family: var(--font-special); font-weight: 400; color: var(--dark); display: block; margin-bottom: 6px; font-size: 14px; letter-spacing: 0.3px; }
.grupos-incompletos-msg ul { padding-left: 20px; }
.grupos-incompletos-msg ul li { margin: 3px 0; color: #555; font-size: 12px; }

/* ── BUTTONS ───────────────────── */
.btn-continuar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4px 20px;
    background: #0B161A;
    color: #fff;
    font-family: var(--font-poppins);
    font-size: clamp(15px, 2vw, 22px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-bottom: 6px solid var(--blue);
    cursor: pointer;
    transition: filter 0.2s;
}
.btn-continuar:hover { filter: brightness(1.2); }
.btn-continuar img { height: 20px; }
.btn-secundario {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: transparent;
    color: #555;
    font-family: var(--font-poppins);
    font-size: 13px;
    font-weight: 600;
    border: 2px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-secundario:hover { border-color: var(--dark); color: var(--dark); }

/* ── BRACKET SECTION ───────────── */
#bracket-section { margin-top: 40px; }

.bk-scroll {
    overflow-x: auto;
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: 6px;
    padding-bottom: 12px;
}

/* Column headers */
.bk-headers {
    display: flex;
    background: var(--blue);
    padding: 6px 0;
    min-width: 700px;
}
.bkh {
    flex: 1;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
}
.bkh-center { flex: 0 0 130px; }

/* Bracket grid */
.bk-grid {
    display: flex;
    align-items: stretch;
    min-height: 640px;
    min-width: 700px;
    padding: 16px 8px;
}

/* Round columns */
.bk-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Pair: groups 2 match-groups and draws the bracket connector between them */
.bk-pair {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
}

/* Match groups */
.bk-match-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
}

/* Left side: pair draws bracket going right */
.bk-left .bk-pair { margin-right: 16px; }
/* Horizontal stub from each match to the vertical line (fills inner 8px of gap) */
.bk-left .bk-pair .bk-match-group::after {
    content: '';
    position: absolute;
    right: -8px;
    top: calc(50% - 0.5px);
    width: 8px;
    border-top: 1px solid #ccc;
}
/* Vertical bracket line — positioned 8px into the gap, never overlaps the boxes */
.bk-left .bk-pair::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 25%;
    height: 50%;
    border-right: 1px solid #ccc;
}
/* Horizontal from vertical to next column (fills outer 8px of gap) */
.bk-left .bk-pair::before {
    content: '';
    position: absolute;
    right: -16px;
    top: calc(50% - 0.5px);
    width: 8px;
    border-top: 1px solid #ccc;
}

/* Left SF: single match-group directly in column – full 16px horizontal connector */
.bk-left > .bk-match-group {
    margin-right: 16px;
    margin-top: auto;
    margin-bottom: auto;
}
.bk-left > .bk-match-group::after {
    content: '';
    position: absolute;
    right: -16px;
    top: calc(50% - 0.5px);
    width: 16px;
    border-top: 1px solid #ccc;
}

/* Right side: pair draws bracket going left */
.bk-right .bk-pair { margin-left: 16px; }
/* Horizontal stub from each match to the vertical line */
.bk-right .bk-pair .bk-match-group::after {
    content: '';
    position: absolute;
    left: -8px;
    top: calc(50% - 0.5px);
    width: 8px;
    border-top: 1px solid #ccc;
}
/* Vertical bracket line — 8px into the gap */
.bk-right .bk-pair::after {
    content: '';
    position: absolute;
    left: -8px;
    top: 25%;
    height: 50%;
    border-left: 1px solid #ccc;
}
/* Horizontal from vertical to next column */
.bk-right .bk-pair::before {
    content: '';
    position: absolute;
    left: -16px;
    top: calc(50% - 0.5px);
    width: 8px;
    border-top: 1px solid #ccc;
}

/* Right SF: single match-group directly in column – full 16px horizontal connector */
.bk-right > .bk-match-group {
    margin-left: 16px;
    margin-top: auto;
    margin-bottom: auto;
}
.bk-right > .bk-match-group::after {
    content: '';
    position: absolute;
    left: -16px;
    top: calc(50% - 0.5px);
    width: 16px;
    border-top: 1px solid #ccc;
}

/* Center column - no connectors */
.bk-center .bk-match-group { border: none !important; margin: 0 !important; }
.bk-center .bk-match-group::after { display: none !important; }

/* Desktop copa container fix */
.bk-center .copa-center-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6px 0;
}
.bk-center .bk-campeon-copa {
    width: 24px;
    height: auto;
    transition: filter 0.3s;
}
.bk-center .bk-campeon-copa.grayscale {
    filter: grayscale(100%) opacity(0.3);
}
.bk-center .bk-campeon-mini .bk-campeon-label {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: var(--dark);
}
.bk-copa-desktop-champion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.bk-copa-desktop-champion img {
    width: 44px;
    height: auto;
}
.bk-campeon-desktop-nombre {
    font-family: var(--font-poppins);
    font-size: 14px;
    font-weight: 800;
    color: #a86615;
    text-align: center;
    line-height: 1;
    max-width: 90px;
    word-break: break-word;
    padding-top: 5px;
}
.bk-campeon-desktop-label {
    font-family: var(--font-poppins);
    font-size: 15px;
    font-weight: 700;
    color: #a86615;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* ── TEAM CARDS ─────────────────── */
.bk-team {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 7px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    min-height: 28px;
    min-width: 0;
    overflow: hidden;
}
.bk-team:hover:not(.tbd):not(.no-click):not(.winner) { background: #f0f7ff; border-color: #a8cfe8; }
.bk-team.winner   { background: var(--dark); border-color: var(--dark); }
.bk-team.elim     { opacity: 0.35; }
.bk-team.tbd      { background: #fafafa; cursor: default; border-color: #eee; }
.bk-team.no-click { cursor: default; }

.bk-flag-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.08);
}
.tbd-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e8e8e8;
    flex-shrink: 0;
    display: inline-block;
}
.bk-name {
    font-size: 10px;
    font-weight: 600;
    color: var(--dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.bk-team.winner .bk-name       { color: #fff; }
.bk-team.tbd    .bk-name       { color: #bbb; }
.bk-team.winner .bk-flag-circle { border-color: rgba(255,255,255,0.2); }

/* ── CENTER COLUMN ─────────────── */
.bk-center {
    flex: 0 0 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 14px;
    padding: 0 6px;
}
.bk-box {
    background: #FFF5E6;
    border: 1px solid #E8D5A8;
    border-radius: 8px;
    padding: 8px 7px;
    overflow: hidden;
}
.bk-box-label {
    font-family: var(--font-special);
    font-size: 12px;
    text-align: center;
    margin-bottom: 7px;
    color: var(--dark);
    letter-spacing: 0.4px;
}
.bk-campeon-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-bottom: 5px;
}
.bk-campeon-copa {
    width: 28px;
    height: auto;
}
.bk-campeon-equipo {
    display: flex;
    align-items: center;
    gap: 4px;
}
.bk-campeon-flag-mini {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.bk-campeon-nombre-mini {
    font-family: var(--font-special);
    font-size: 9px;
    color: var(--dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
}
.bk-campeon-label {
    font-size: 14px;
    font-weight: 800;
    color: #a86615;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.bk-center .bk-team            { background: rgba(255,255,255,0.85); border-color: #e0cca0; }
.bk-center .bk-team:hover:not(.tbd):not(.winner) { background: #fff; border-color: #c8a870; }
.bk-center .bk-team.winner     { background: var(--dark); border-color: var(--dark); }
.bk-center .bk-team.tbd        { background: rgba(255,255,255,0.5); border-color: #edddb8; }

/* ── COMPARTIR ─────────────────── */
#compartir-section {
    max-width: 600px;
    margin: 40px auto;
    padding: 40px 20px;
    background: #f5f5f5;
    text-align: center;
    border-radius: 8px;
}
.compartir-titulo {
    font-family: var(--font-poppins);
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
}
#btn-compartir-redes { cursor: pointer; max-width: 260px; height: auto; display: block; margin: 0 auto 10px; transition: transform 0.2s; }
#btn-compartir-redes:hover { transform: scale(1.04); }
#btn-descargar-imagen {
    font-family: var(--font-poppins);
    font-size: 12px;
    color: var(--dark);
    padding: 5px 12px;
    text-transform: uppercase;
    display: inline-block;
    text-decoration: none;
    border: 1px solid var(--dark);
    border-radius: 4px;
    margin-top: 8px;
    transition: all 0.2s;
}
#btn-descargar-imagen:hover { background: var(--dark); color: #fff; }
#placa-compartir-container { margin-top: 24px; }
#placa-compartir-imagen { max-width: 100%; height: auto; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); display: none; }
#compartir-loading { display: none; flex-direction: column; align-items: center; margin-top: 20px; font-size: 13px; color: var(--blue); gap: 10px; }
.compartir-desktop { display: none; margin-bottom: 10px; justify-content: center; align-items: center; }
.compartir-desktop .btn-compartir-red { height: 60px; width: auto; cursor: pointer; transition: transform 0.2s; margin: 0 6px; }
.compartir-desktop .btn-compartir-red:hover { transform: scale(1.05); }

@media (min-width: 901px) {
    #btn-compartir-redes { display: none !important; }
    .compartir-desktop { display: flex !important; }
}

/* ── SPINNER ───────────────────── */
.spinner {
    width: 32px; height: 32px;
    border: 3px solid rgba(0,156,228,0.2);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── FOOTER ────────────────────── */
footer {
    background-image: url('assets/footer-convocados.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 100px 20px 40px;
    text-align: center;
    color: var(--white);
    margin-top: 50px;
    min-height: 250px;
}

/* ── RESPONSIVE ────────────────── */
@media (max-width: 1024px) {
    .grupos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .grupos-grid { grid-template-columns: 1fr; }
    .standings-table .hide-mobile { display: none; }
    .standing-name { max-width: 90px; }
    .match-row { padding: 5px 6px 3px; }
    header img { max-width: 220px; }
}
@media (max-width: 480px) {
    main { padding: 0 10px 40px; }
}

/* ── MOBILE BRACKET ────────────── */
/* Desktop: desktop bracket visible, mobile bracket hidden */
#bracket-inner  { display: block; }
#bracket-inner .hide-desktop { display: none !important; }
#bracket-mobile { display: none; }

/* Mobile: swap visibility */
@media (max-width: 768px) {
    #bracket-inner  { display: none; }
    #bracket-mobile { display: block; }
    .section-header div.title-main { padding-top: 0; }
}

/* Mobile wrapper */
.bk-mobile-wrap { padding: 0 1px; }

.bk-mobile-wrap .hide-desktop { display: block !important; }
.bk-mobile-wrap .hide-mobile { display: none !important; }

/* Round column headers */
.bkm-round-headers {
    display: flex;
    background: var(--blue);
    padding: 4px 1px;
}
.bkm-rh {
    flex: 1;
    text-align: center;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    overflow: hidden;
}
.bkm-rh-center {
    flex: 0 0 25px;
}

/* Mobile grid container */
.bkm-grid {
    display: flex;
    align-items: stretch;
    padding: 10px 1px;
    margin-top: 50px;
    min-height: 480px;
    position: relative;
}

/* Round columns */
.bk-mobile-wrap .bk-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Compact team cards inside the mobile grid */
.bk-mobile-wrap .bkm-grid .bk-team {
    min-height: 22px;
    padding: 2px 2px;
    gap: 0;
    border-radius: 4px;
    min-width: 0;
    justify-content: flex-end;
    background: transparent !important;
    border: none !important;
}
/* Recuadro solo cuando es ganador y avanza */
.bk-mobile-wrap .bkm-grid .bk-team {
    background: #d1cdcd!important;
    padding: 2px 6px !important;
    position: relative !important;
}
.bk-mobile-wrap .bkm-grid .bk-team.winner {
    background: var(--dark)!important;
}
.bk-mobile-wrap .bkm-grid .bk-team.winner .bk-name {
    color: #fff !important;
}

/* Circles replacing flags -> HIDDEN */
.bk-mobile-wrap .bkm-grid .bk-flag-circle,
.bk-mobile-wrap .bkm-grid .tbd-circle { 
    display: none !important; 
}
.bk-mobile-wrap .bkm-grid .bk-flag-circle {
    content: none;
}

/* Colored circles when selected 
   (User requested no colored circles, kept white) */
.bk-mobile-wrap .bkm-grid .bk-left .bk-team.winner .bk-flag-circle,
.bk-mobile-wrap .bkm-grid .bk-left .bk-team.winner .tbd-circle,
.bk-mobile-wrap .bkm-grid .bk-right .bk-team.winner .bk-flag-circle,
.bk-mobile-wrap .bkm-grid .bk-right .bk-team.winner .tbd-circle {
    display: none !important;
}

.bk-mobile-wrap .bkm-grid .bk-name { 
    font-size: 10px;
    font-weight: 500;
    color: var(--dark) !important;
    flex: 1; 
    text-align: center !important; 
    letter-spacing: 0; 
    overflow: visible; 
    display: flex;
    justify-content: center;
    align-items: center;
}
.bk-mobile-wrap .bkm-grid .bk-team.winner .bk-name {
    color: #fff !important;
}
.bk-mobile-wrap .bkm-grid .bk-team.elim .bk-name {
    color: var(--dark) !important;
}

/* Text on outside, flag on inside */
.bk-mobile-wrap .bkm-grid .bk-left .bk-team { flex-direction: row-reverse; justify-content: center; }
.bk-mobile-wrap .bkm-grid .bk-left .bk-name { text-align: center !important; }

.bk-mobile-wrap .bkm-grid .bk-right .bk-team { flex-direction: row; justify-content: center; }
.bk-mobile-wrap .bkm-grid .bk-right .bk-name { text-align: center !important; }

/* Mobile connector gaps */
.bk-mobile-wrap .bkm-grid .bk-pair::before,
.bk-mobile-wrap .bkm-grid .bk-pair::after,
.bk-mobile-wrap .bkm-grid .bk-match-group::after {
    border-width: 1px !important;
    border-color: #e0e0e0 !important;
}

/* Thicker lines for paths with winners */
.bk-mobile-wrap .bkm-grid .bk-match-group:has(> .winner)::after {
    border-width: 2px !important;
    border-color: var(--dark) !important;
}

/* Pair spine, bridge and stubs: all drawn by SVG via updateMobileSpines() */
.bk-mobile-wrap .bkm-grid .bk-left .bk-pair::after,
.bk-mobile-wrap .bkm-grid .bk-right .bk-pair::after,
.bk-mobile-wrap .bkm-grid .bk-left .bk-pair::before,
.bk-mobile-wrap .bkm-grid .bk-right .bk-pair::before,
.bk-mobile-wrap .bkm-grid .bk-left .bk-pair .bk-match-group::after,
.bk-mobile-wrap .bkm-grid .bk-right .bk-pair .bk-match-group::after {
    display: none !important;
}

/* Hide pair::before for center and any other non-side pairs */
.bk-mobile-wrap .bkm-grid .bk-pair::before { display: none !important; }


.bk-mobile-wrap .bkm-grid .bk-left > .bk-match-group::before,
.bk-mobile-wrap .bkm-grid .bk-right > .bk-match-group::before {
    display: none !important;
}


.bk-mobile-wrap .bkm-grid { gap: 10px; }

.bk-mobile-wrap .bkm-grid .bk-left .bk-pair { margin-right: 0; }
.bk-mobile-wrap .bkm-grid .bk-left .bk-pair .bk-match-group::after { right: -6px; width: 6px; }

.bk-mobile-wrap .bkm-grid .bk-right .bk-pair { margin-left: 0; }
.bk-mobile-wrap .bkm-grid .bk-right .bk-pair .bk-match-group::after { left: -6px; width: 6px; }

/* Stub moves to winner's center when selected */
.bk-mobile-wrap .bkm-grid .bk-pair .bk-match-group:has(.bk-team:first-child.winner)::after {
    top: 25%;
}
.bk-mobile-wrap .bkm-grid .bk-pair .bk-match-group:has(.bk-team:last-child.winner)::after {
    top: 75%;
}

/* SF → Center connectors handled by JavaScript SVG overlay */
.bk-mobile-wrap .bkm-grid .bk-left > .bk-match-group {
    margin-right: 0;
    margin-top: auto;
    margin-bottom: auto;
}
.bk-mobile-wrap .bkm-grid .bk-right > .bk-match-group {
    margin-left: 0;
    margin-top: auto;
    margin-bottom: auto;
}
.bk-mobile-wrap .bkm-grid .bk-left > .bk-match-group::after,
.bk-mobile-wrap .bkm-grid .bk-right > .bk-match-group::after {
    display: none !important;
}

/* Color SF connectors when selected */
.bk-mobile-wrap .bkm-grid .bk-col .bk-match-group[data-round="sf"]:has(> .winner)::before {
    border-color: var(--dark) !important;
    border-width: 2px !important;
}
.bk-mobile-wrap .bkm-grid .bk-col .bk-match-group[data-round="sf"]:has(> .winner)::after {
    border-color: var(--dark) !important;
    border-width: 2px !important;
}

/* Center column */
.bk-mobile-wrap .bkm-grid .bk-center {
    flex: 1;
    padding: 0;
    gap: 50px;
    justify-content: center;
    position: relative;
}
.bk-mobile-wrap .bkm-grid .bk-center .bk-box {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    overflow: visible !important;
}
.bk-mobile-wrap .bkm-grid .bk-center .title-float-mobile {
    position: absolute;
    top: -14px;
    width: 100%;
}
.bk-mobile-wrap .bkm-grid .bk-center .label-mobile {
    font-size: 8px;
    font-weight: 300;
    color: var(--dark);
    text-align: center;
    margin-bottom: 0px;
    text-transform: uppercase;
}
.bk-mobile-wrap .bkm-grid .bk-center-group {
    justify-content: center;
    gap: 3px;
    position: relative;
}
.bk-mobile-wrap .bkm-grid .mobile-top-area {
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    z-index: 10;
}
.bk-mobile-wrap .bkm-grid .bk-campeon-mini {
    position: static;
    transform: none;
    width: auto;
    text-align: center;
}
.bk-mobile-wrap .bkm-grid .bk-campeon-copa {
    width: 30px;
    height: auto;
    transition: filter 0.3s;
}
.bk-mobile-wrap .bkm-grid .bk-campeon-copa.grayscale {
    filter: grayscale(100%) opacity(0.3);
}
.bk-mobile-wrap .bkm-grid .bk-campeon-label {
    font-size: 14px;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.1;
    text-transform: uppercase;
}
.bk-mobile-wrap .bkm-grid .bk-box-3rd {
    display: block !important;
}