/* ===========================================================================
   Quiniela Mundial 2026 — estilos custom (sobre Bootstrap 5)
   =========================================================================== */
/* Paleta Exeltis: azul marino + degradado cian del isotipo */
:root {
    --q-primary:    #16285a;   /* azul marino Exeltis (texto del logo) */
    --q-accent:     #00a9e0;   /* cian corporativo */
    --q-cyan-light: #5dc9f2;   /* cian claro (parte alta del isotipo) */
    --q-blue-mid:   #0f6fb8;   /* azul medio del degradado */
    --q-success:    #16a34a;
    --q-soft:       #f4f6fa;
}

body { background: var(--q-soft); }

.navbar-q { background: linear-gradient(135deg, var(--q-primary), var(--q-blue-mid)); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.brand-logo { height: 30px; width: auto; }
.footer-q { border-top: 1px solid #e5e7eb; background: #fff; }

.card-q { border: 1px solid #e5e7eb; border-radius: .75rem; background: #fff; }

/* Match cards (dashboard) ---------------------------------------------------- */
.match-card.fav-match {
    border: 2px solid #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .15);
}
.flag-lg { width: 60px; height: 42px; object-fit: cover; border-radius: .3rem; box-shadow: 0 2px 5px rgba(0,0,0,.12); }
.flag-lg-tbd {
    width: 60px; height: 42px; border-radius: .3rem;
    background: repeating-linear-gradient(45deg, #e5e7eb, #e5e7eb 6px, #f4f6fa 6px, #f4f6fa 12px);
    margin: 0 auto;
}
.flag-img { width: 22px; height: 16px; object-fit: cover; border-radius: 2px; vertical-align: middle; margin-right: 4px; }

.vs-block { text-align: center; min-width: 80px; }
.score-vs { font-size: 1.4rem; font-weight: 700; color: #94a3b8; }
.score-final { font-size: 1.6rem; font-weight: 700; color: var(--q-primary); }
.score-big { font-size: 2.4rem; font-weight: 700; color: var(--q-primary); }
.score-input { font-weight: 700; font-size: 1.4rem; }

.dash-date {
    color: var(--q-primary);
    border-left: 4px solid var(--q-accent);
    padding-left: .6rem;
    text-transform: capitalize;
}

/* mi-favorito: tiles de equipos ---------------------------------------------- */
.equipo-tile {
    text-align: left !important;
    padding: .5rem .6rem !important;
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.equipo-tile .flag-img { width: 24px; height: 18px; }

/* KPI (admin) ---------------------------------------------------------------- */
.kpi-box { color: #fff; border-radius: .75rem; padding: 1rem; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.kpi-box .kpi-num { font-size: 2rem; font-weight: 700; line-height: 1; }
.kpi-box .kpi-lbl { font-size: .8rem; text-transform: uppercase; opacity: .9; margin-top: .25rem; }

.pts-box {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    padding: .55rem .75rem;
    font-size: .95rem;
}
.pts-box .badge { margin-right: .35rem; }

@media (max-width: 575.98px) {
    .flag-lg, .flag-lg-tbd { width: 48px; height: 34px; }
    .score-big { font-size: 1.8rem; }
}

/* Botones y enlaces alineados a la marca Exeltis ----------------------------- */
.btn-primary {
    --bs-btn-bg: var(--q-blue-mid);
    --bs-btn-border-color: var(--q-blue-mid);
    --bs-btn-hover-bg: var(--q-primary);
    --bs-btn-hover-border-color: var(--q-primary);
    --bs-btn-active-bg: var(--q-primary);
    --bs-btn-active-border-color: var(--q-primary);
}
a { color: var(--q-blue-mid); }
a:hover { color: var(--q-primary); }
.text-primary { color: var(--q-primary) !important; }