/* =========================================================
   Quiniela Mundial 2026 — Custom Styles
   Colores oficiales: Azul #003DA5 | Rojo #C8102E | Blanco
   ========================================================= */

/* ── Variables ─────────────────────────────────────────── */
:root {
  --color-primary:   #003DA5;
  --color-secondary: #C8102E;
  --color-accent:    #FFFFFF;
  --color-bg:        #F5F7FA;
  --color-card:      #FFFFFF;
  --color-text:      #1A1A2E;

  /* Sobreescribir Bootstrap */
  --bs-primary:      #003DA5;
  --bs-primary-rgb:  0, 61, 165;
  --bs-info:         #C8102E;
  --bs-info-rgb:     200, 16, 46;
  --bs-danger:       #C8102E;
  --bs-danger-rgb:   200, 16, 46;
  --bs-body-bg:      #F5F7FA;
  --bs-body-color:   #1A1A2E;
  --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Global ────────────────────────────────────────────── */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--bs-font-sans-serif);
}

h1, h2, h3, h4, h5 {
  color: var(--color-primary);
  font-weight: 700;
}

/* ── Navbar ────────────────────────────────────────────── */
.navbar {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.navbar-brand {
  font-weight: 800;
  letter-spacing: .5px;
  color: #fff !important;
}

.navbar .nav-link {
  color: rgba(255,255,255,.85) !important;
  transition: color .15s, border-bottom .15s;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: #fff !important;
  border-bottom-color: #fff;
}

.navbar .btn-outline-light {
  border-color: #fff;
  color: #fff;
  transition: background .15s, color .15s;
}

.navbar .btn-outline-light:hover {
  background-color: #fff;
  color: var(--color-primary);
}

.navbar .text-white-50 {
  color: rgba(255,255,255,.75) !important;
}

/* ── Botones ────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background-color: #002d80 !important;
  border-color: #002d80 !important;
}

.btn-outline-primary {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}
.btn-outline-primary:hover {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

.btn-danger,
.btn-outline-danger:hover {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  color: #fff !important;
}
.btn-outline-danger {
  border-color: var(--color-secondary) !important;
  color: var(--color-secondary) !important;
}

/* ── Cards ──────────────────────────────────────────────── */
.card {
  border-radius: .6rem;
  border: none;
  box-shadow: 0 2px 8px rgba(0,61,165,.08);
}

.card.border-top-primary,
.card {
  border-top: 4px solid var(--color-primary) !important;
}

/* Las tarjetas de resumen estadístico no necesitan borde superior */
.card.stat-card {
  border-top: 4px solid var(--color-primary) !important;
}

/* ── Card headers de sección (jornadas, etapas, tablas) ── */
.card-header {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: .6rem .6rem 0 0 !important;
  border-bottom: none !important;
}

/* Card headers blancos (formularios, detalles) */
.card-header.bg-white {
  background-color: var(--color-primary) !important;
}

/* ── Tablas ─────────────────────────────────────────────── */
.table > tbody > tr:nth-child(odd)  { background-color: #FFFFFF; }
.table > tbody > tr:nth-child(even) { background-color: #F0F4FF; }

.table thead.table-light th {
  background-color: #E8EEFF !important;
  color: var(--color-primary);
  font-weight: 600;
  border-bottom: 2px solid var(--color-primary);
}

/* ── Badges de pronóstico y resultado ───────────────────── */
.badge.bg-primary {
  background-color: var(--color-primary) !important;
}

/* visitante = info → rojo */
.badge.bg-info {
  background-color: var(--color-secondary) !important;
  color: #fff !important;
}

.badge.bg-secondary { background-color: #6c757d !important; }
.badge.bg-success   { background-color: #28a745 !important; }
.badge.bg-danger    { background-color: var(--color-secondary) !important; }
.badge.bg-warning   { background-color: #ffc107 !important; }

/* ── Puntos en tabla de pronósticos ─────────────────────── */
.puntos-acierto { color: #28a745 !important; font-weight: 700; }
.puntos-error   { color: var(--color-secondary) !important; font-weight: 700; }

/* ── Inputs con foco azul ───────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 .2rem rgba(0,61,165,.2);
}

/* ── Página de Login ────────────────────────────────────── */
body.login-page {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  min-height: 100vh;
}

body.login-page .navbar {
  background: rgba(0,0,0,.15) !important;
  box-shadow: none;
}

body.login-page main.container {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.login-card {
  border-radius: .8rem !important;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.25) !important;
  border-top: none !important;
}

.login-card .login-card-header {
  background-color: var(--color-primary);
  color: #fff;
  padding: 1.5rem 1.5rem 1rem;
  text-align: center;
}

.login-card .login-card-header h4 {
  color: #fff;
  margin: 0;
  font-size: 1.25rem;
}

.login-card .card-body {
  padding: 1.75rem !important;
}

.login-card .btn-login {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
  font-weight: 600;
}
.login-card .btn-login:hover {
  background-color: #a00d24;
  border-color: #a00d24;
}

/* ── Ranking: medallones y resaltado ────────────────────── */
.ranking-table tbody tr:nth-child(1) { background-color: #FFF8E1 !important; }
.ranking-table tbody tr:nth-child(2) { background-color: #F5F5F5 !important; }
.ranking-table tbody tr:nth-child(3) { background-color: #FBF0E6 !important; }

.ranking-table tbody tr.es-yo {
  border-left: 4px solid var(--color-secondary) !important;
}

/* Top5 en dashboard usuario */
.top5-list .list-group-item:nth-child(1) { background-color: #FFF8E1 !important; }
.top5-list .list-group-item:nth-child(2) { background-color: #F5F5F5 !important; }
.top5-list .list-group-item:nth-child(3) { background-color: #FBF0E6 !important; }
.top5-list .list-group-item.es-yo {
  border-left: 4px solid var(--color-secondary) !important;
}

/* ── Jornada abierta borde verde ────────────────────────── */
.jornada-abierta > .card-header {
  background-color: #1a7a3c !important;
}

/* Texto dentro de cualquier card-header sobre fondo oscuro */
.card-header .jornada-fase,
.card-header .jornada-limite {
  color: #FFFFFF !important;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* El nombre de jornada también debe ser blanco */
.card-header .fw-semibold {
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* ── Alerts ─────────────────────────────────────────────── */
.alert-warning { border-left: 4px solid #ffc107; }
.alert-danger  { border-left: 4px solid var(--color-secondary); }
.alert-success { border-left: 4px solid #28a745; }
.alert-info    { border-left: 4px solid var(--color-primary); }

/* ── Ajuste fino de espaciado ───────────────────────────── */
main.container { padding-top: 1.75rem !important; }

@media (max-width: 768px) {
  .navbar-brand { font-size: 1rem; }
}