/* ==========================================================================
   Torneo Escuelas Oficiales 2026 — Club Universidad de Chile
   Paleta: Azul marino #002B66 · Rojo #E30613 · Blanco
   ========================================================================== */
:root {
    --u-azul: #002B66;
    --u-azul-osc: #001d47;
    --u-rojo: #E30613;
    --u-rojo-osc: #b8050f;
    --u-gris: #f2f4f8;
    --bs-primary: var(--u-azul);
    --bs-primary-rgb: 0, 43, 102;
    --bs-link-color: var(--u-azul);
    --bs-link-hover-color: var(--u-rojo);
}

body { background: var(--u-gris); color: #1b2333; }

/* ---- Encabezado ---- */
.cab-club { background: var(--u-azul); color: #fff; border-bottom: 4px solid var(--u-rojo); }
.cab-isotipo { width: 64px; height: 64px; object-fit: contain; flex: 0 0 auto; }
.cab-logo { height: 64px; max-width: 260px; object-fit: contain; }
.cab-placeholder {
    display: flex; align-items: center; justify-content: center; text-align: center;
    border: 2px dashed rgba(255, 255, 255, .55); border-radius: 8px;
    font-size: .62rem; letter-spacing: .06em; color: rgba(255, 255, 255, .8); padding: 2px 6px;
}
.cab-logo.cab-placeholder { width: 200px; }
.cab-titulo { display: flex; flex-direction: column; line-height: 1.15; color: #fff; }
.cab-titulo small { font-size: .78rem; opacity: .85; text-transform: uppercase; letter-spacing: .05em; }
.cab-titulo strong { font-size: 1.15rem; }
.cab-nav { background: var(--u-azul-osc); padding: 0; }
.cab-nav .nav-link { color: rgba(255, 255, 255, .85); padding: .7rem 1rem; font-weight: 500; }
.cab-nav .nav-link:hover { color: #fff; }
.cab-nav .nav-link.active { color: #fff; box-shadow: inset 0 -3px 0 var(--u-rojo); }

.pie-club { background: var(--u-azul); color: rgba(255, 255, 255, .8); padding: 1rem 0; margin-top: 2rem; text-align: center; }

/* ---- Botones y tarjetas ---- */
.btn-primary { --bs-btn-bg: var(--u-azul); --bs-btn-border-color: var(--u-azul);
    --bs-btn-hover-bg: var(--u-azul-osc); --bs-btn-hover-border-color: var(--u-azul-osc);
    --bs-btn-active-bg: var(--u-azul-osc); --bs-btn-active-border-color: var(--u-azul-osc); }
.btn-danger, .btn-club { --bs-btn-bg: var(--u-rojo); --bs-btn-border-color: var(--u-rojo); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--u-rojo-osc); --bs-btn-hover-border-color: var(--u-rojo-osc); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--u-rojo-osc); --bs-btn-active-border-color: var(--u-rojo-osc); }
.btn-outline-primary { --bs-btn-color: var(--u-azul); --bs-btn-border-color: var(--u-azul);
    --bs-btn-hover-bg: var(--u-azul); --bs-btn-hover-border-color: var(--u-azul); }

.card { border: 0; box-shadow: 0 1px 3px rgba(0, 43, 102, .12); border-radius: .75rem; }
.card-header.cab-azul { background: var(--u-azul); color: #fff; border-radius: .75rem .75rem 0 0; font-weight: 600; }
.seccion-titulo { color: var(--u-azul); font-weight: 700; border-left: 5px solid var(--u-rojo); padding-left: .6rem; }
.hero { background: linear-gradient(135deg, var(--u-azul) 0%, var(--u-azul-osc) 100%); color: #fff; border-radius: .75rem; }
.hero .badge-fecha { background: var(--u-rojo); }

/* ---- Categorías (inicio) ---- */
.cat-card { transition: transform .12s ease, box-shadow .12s ease; height: 100%; }
.cat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 43, 102, .2); }
.cat-anio { font-size: 1.5rem; font-weight: 800; color: var(--u-azul); line-height: 1; }
.progress { height: .55rem; }
.progress-bar { background: var(--u-rojo); }

/* ---- Tablas de posiciones ---- */
.tabla-pos { font-size: .92rem; margin: 0; }
.tabla-pos thead th { background: var(--u-azul); color: #fff; text-align: center; font-weight: 600; white-space: nowrap; }
.tabla-pos thead th.text-start { text-align: left; }
.tabla-pos td { text-align: center; vertical-align: middle; }
.tabla-pos td.eq { text-align: left; font-weight: 500; }
.tabla-pos td.pts { font-weight: 800; color: var(--u-azul); }
.tabla-pos tr.clasifica td:first-child { box-shadow: inset 4px 0 0 #198754; }
.tabla-pos tr.mejor2 td:first-child { box-shadow: inset 4px 0 0 var(--u-rojo); }
.tabla-pos .empate-flag { color: var(--u-rojo); cursor: help; }

/* ---- Llaves ---- */
.llave { background: #fff; border-radius: .6rem; border-left: 5px solid var(--u-azul); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.llave.final { border-left-color: var(--u-rojo); }
.llave .eq { padding: .35rem .75rem; display: flex; justify-content: space-between; gap: .5rem; }
.llave .eq.gana { font-weight: 700; color: var(--u-azul); }
.llave .eq.pendiente { color: #7a8497; font-style: italic; }
.campeon-banner { background: linear-gradient(90deg, var(--u-rojo), var(--u-rojo-osc)); color: #fff; border-radius: .75rem; }

/* ---- Pantalla del turno (móvil / tablet) ---- */
.turno-paso { background: #fff; border-radius: .75rem; padding: 1rem; box-shadow: 0 1px 3px rgba(0, 43, 102, .12); }
.turno-paso .paso-num { background: var(--u-azul); color: #fff; width: 1.9rem; height: 1.9rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; margin-right: .5rem; }
.turno-paso.activo { border: 2px solid var(--u-rojo); }
.form-select-lg, .form-control-lg { min-height: 3.4rem; }
.marcador-caja { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.marcador-caja .equipo-nombre { font-weight: 700; color: var(--u-azul); text-align: center; min-height: 2.6rem; }
.goles-input { width: 100%; max-width: 6.5rem; font-size: 2.6rem; font-weight: 800; text-align: center; height: 4.5rem;
    border: 3px solid var(--u-azul); border-radius: .75rem; color: var(--u-azul); }
.btn-goles { width: 3.4rem; height: 3.4rem; font-size: 1.8rem; line-height: 1; padding: 0; border-radius: 50%; }
.vs-sep { font-size: 1.4rem; font-weight: 800; color: var(--u-rojo); }
.btn-guardar { min-height: 3.6rem; font-size: 1.15rem; font-weight: 700; }

/* ---- Admin ---- */
.tabla-admin th { background: var(--u-azul); color: #fff; white-space: nowrap; font-size: .85rem; }
.tabla-admin td { vertical-align: middle; font-size: .9rem; }
.tabla-admin input.form-control, .tabla-admin select.form-select { min-width: 5rem; }
.tabla-admin input.gol { width: 4rem; text-align: center; }
.fila-jugado { background: #f0faf3; }

@media (max-width: 575.98px) {
    .cab-isotipo { width: 48px; height: 48px; }
    .cab-titulo strong { font-size: 1rem; }
    .tabla-pos { font-size: .82rem; }
}