:root{

    /* ==========================
       COLORES PRINCIPALES
    ========================== */

    --primary: #2563eb;
    --primary-dark: #1d4ed8;

    --success: #16a34a;
    --danger: #dc2626;
    --warning: #f59e0b;

    --background: #f5f7fb;
    --card: #ffffff;

    --text: #1f2937;
    --text-light: #6b7280;

    --border: #dbe3ec;

    --header-bg: #0f4c81;
    --menu-bg: #ffffff;

    --shadow: 0 2px 10px rgba(0,0,0,.06);

}

/* ==========================
   GENERAL
========================== */

body{

    margin:0;
    padding:0;

    background:var(--background);

    color:var(--text);

    font-family:
        "Segoe UI",
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

    font-size:14px;

}

/* ==========================
   NAVBAR
========================== */

.navbar{

    background:var(--header-bg)!important;

    border-bottom:1px solid rgba(255,255,255,.15);

    box-shadow:var(--shadow);

}

.navbar-brand{

    color:#fff!important;

    font-weight:700;

    font-size:1.3rem;

}

.navbar .badge{

    font-size:.75rem;

}

/* ==========================
   MENU
========================== */

.menu-principal{

    background:var(--menu-bg);

    padding:8px;

    box-shadow:var(--shadow);

    border:1px solid var(--border);

    margin-bottom:15px;

    gap:6px;

    flex-wrap:nowrap;

    overflow-x:auto;

}

.menu-principal .nav-link{

    color:var(--text);

    border:1px solid var(--border);

    min-width:90px;

    text-align:center;

    font-size:.82rem;

    padding:8px;

    transition:.2s;

    background:#fff;

}

.menu-principal .nav-link:hover{

    background:#eef4ff;

    color:var(--primary);

}

.menu-principal .nav-link.active{

    background:var(--primary);

    border-color:var(--primary);

    color:white;

}

.menu-principal .nav-link i{

    display:block;

    font-size:1.1rem;

    margin-bottom:3px;

}

/* ==========================
   CONTENEDOR
========================== */

#contenido{

    min-height:500px;

}

/* ==========================
   TARJETAS
========================== */

.card-worldcup{

    background:var(--card);

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    margin-bottom:15px;

}

.card-body{

    padding:15px;

}

/* ==========================
   CALENDARIO
========================== */

.calendar-day{

    background:var(--primary);

    color:white;

    padding:8px 12px;

    margin-top:15px;

    margin-bottom:5px;

    font-weight:600;

}

.match-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:white;

    border-bottom:1px solid #ececec;

    padding:8px 10px;

}

.team-col{

    width:40%;

    color:var(--text);

    font-size:.9rem;

}

.score-col{

    width:20%;

    text-align:center;

    font-weight:700;

    color:var(--primary);

    font-size:.9rem;

}

/* ==========================
   TABLAS
========================== */

.table{

    background:white;

    margin-bottom:0;

}

.table th{

    background:#eef4ff;

    color:var(--text);

    border-bottom:2px solid var(--border);

    font-size:.85rem;

}

.table td{

    color:var(--text);

}

.table-sm th,
.table-sm td{

    padding:6px;

    font-size:.83rem;

}

/* ==========================
   GRUPOS
========================== */

.group-title{

    background:var(--primary);

    color:white;

    padding:6px 10px;

    font-size:.8rem;

    font-weight:600;

}

/* ==========================
   GOLEADORES
========================== */

.player-name{

    font-weight:600;

}

.player-goals{

    font-weight:700;

    color:var(--primary);

}

/* ==========================
   FASES
========================== */

.phase-box{

    background:white;

    border:1px solid var(--border);

    padding:10px;

    margin-bottom:10px;

}

.phase-title{

    color:var(--primary);

    font-weight:700;

    margin-bottom:8px;

}

/* ==========================
   BADGES
========================== */

.badge-live{

    background:var(--danger);

    color:white;

}

.badge-finished{

    background:var(--success);

    color:white;

}

.badge-upcoming{

    background:var(--primary);

    color:white;

}

/* ==========================
   BOTONES
========================== */

.btn-primary{

    background:var(--primary);

    border-color:var(--primary);

}

.btn-primary:hover{

    background:var(--primary-dark);

    border-color:var(--primary-dark);

}

.btn-group .btn{

    border-radius:0;

    font-size:.85rem;

}

/* ==========================
   LOADING
========================== */

.loading{

    text-align:center;

    padding:40px;

}

/* ==========================
   SCROLL
========================== */

::-webkit-scrollbar{

    width:8px;
    height:8px;

}

::-webkit-scrollbar-thumb{

    background:#cbd5e1;

}

::-webkit-scrollbar-track{

    background:#f8fafc;

}

/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

    body{

        font-size:13px;

    }

    .navbar-brand{

        font-size:1.1rem;

    }

    .menu-principal .nav-link{

        min-width:80px;

        font-size:.75rem;

        padding:6px;

    }

    .menu-principal .nav-link i{

        font-size:1rem;

    }

    .team-col{

        font-size:.8rem;

    }

    .score-col{

        font-size:.85rem;

    }

    .card-body{

        padding:10px;

    }

}