/* Quiniela Mundialista 2026 — Custom Styles */

:root {
    --q-gold: #F5A623;
    --q-dark: #1a1a2e;
}

/* ── Transiciones globales ── */
.card        { transition: box-shadow .2s; }
.hover-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.15) !important; }

/* ── Navbar ── */
.navbar-brand { letter-spacing: .5px; }

/* ── Inputs de pronóstico ── */
.pred-input {
    border-radius: 8px;
    border: 2px solid #dee2e6;
    transition: border-color .2s, box-shadow .2s;
    font-weight: 700;
    font-size: 1.1rem;
}
.pred-input:focus {
    border-color: var(--q-gold);
    box-shadow: 0 0 0 3px rgba(245,166,35,.2);
    outline: none;
}
.pred-input.is-valid   { border-color: #198754 !important; animation: flash-green .4s; }
.pred-input.is-invalid { border-color: #dc3545 !important; }

@keyframes flash-green {
    0%   { background-color: #d1e7dd; }
    100% { background-color: transparent; }
}

/* ── Tarjeta de partido ── */
.match-card { transition: transform .15s; }
.match-card:hover { transform: translateY(-2px); }

/* ── Ranking ── */
.table td, .table th { vertical-align: middle; }
.table-warning td    { background-color: rgba(255,193,7,.08) !important; }

/* ── Código de grupo ── */
.letter-spacing-2 { letter-spacing: 4px; }

/* ── Badges de puntaje ── */
.badge.bg-success { font-size: .75rem; }

/* ── Join code input ── */
input[style*="letter-spacing"] { font-family: 'Courier New', monospace; }

/* ── Avatar ── */
.avatar-sm { font-size: 13px; font-weight: 600; }

/* ── Save status ── */
.save-status { height: 14px; font-size: 11px; }

/* ── Footer ── */
footer { border-top: 1px solid rgba(255,255,255,.05); }

/* ── Responsive fixes ── */
@media (max-width: 576px) {
    .pred-input { width: 44px !important; font-size: 1rem; }
    .container  { padding-left: 12px; padding-right: 12px; }
}