/* ==========================================================================
   Ostadar S.K.T. — Tema visual 2026
   ========================================================================== */

:root {
    /* Paleta de colores principal */
    --theme-primary: #0055a4; /* Azul corporativo, más profesional */
    --theme-primary-rgb: 0, 85, 164;
    --theme-secondary: #f0f4f8; /* Gris azulado muy claro para fondos */
    --theme-accent: #ffc107; /* Amarillo para acentos y llamadas a la acción */

    /* Paleta de texto */
    --theme-text-primary: #212529; /* Negro suave (Bootstrap's default) */
    --theme-text-secondary: #6c757d; /* Gris para texto secundario */
    --theme-text-on-primary: #ffffff; /* Texto sobre fondos oscuros/azules */

    /* Variables de layout */
    --theme-border-radius: 0.375rem; /* 6px */
    --theme-container-padding: 1rem;
    --theme-header-height: 60px;
    --theme-navbar-height: 50px;
}

/* ── Reseteo y base ────────────────────────────────────────────────────── */

body {
    font-family: 'Inter', sans-serif;
    color: var(--theme-text-primary);
    background-color: var(--theme-secondary);
}

.main-content-wrapper {
    background-color: #fff;
    padding: 1.5rem var(--theme-container-padding);
    min-height: calc(100vh - var(--theme-header-height) - var(--theme-navbar-height));
}

.section {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.section-alt {
    background-color: var(--theme-secondary);
}

.post-card {
    border: none;
    border-radius: var(--theme-border-radius);
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 85, 164, 0.05), 0 1px 3px rgba(0, 85, 164, 0.08);
    transition: transform .2s ease, box-shadow .2s ease;
    height: 100%;
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px rgba(0, 85, 164, 0.08), 0 4px 6px rgba(0, 85, 164, 0.1);
}

.post-card-img-wrap {
    border-radius: var(--theme-border-radius) var(--theme-border-radius) 0 0;
    overflow: hidden;
}

.post-card-body {
    padding: 1.25rem;
}

.post-card .post-meta {
    color: var(--theme-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
}

.post-card h3 {
    font-size: 1.1rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

.post-card p {
    font-size: 0.9rem;
    color: var(--theme-text-secondary);
}

/* ── Porra ─────────────────────────────────────────────────────────────── */

.porra-hero {
    background: linear-gradient(135deg, #003f7f 0%, var(--theme-primary) 100%);
    color: #fff;
    padding: 2rem 0;
}

.porra-hero h1 {
    color: #fff;
}

.porra-table {
    font-size: 0.9rem;
}

.porra-table th {
    font-weight: 600;
    color: var(--theme-text-secondary);
}

.porra-table .pos-col { width: 50px; text-align: center; }
.porra-table .pts-col { width: 80px; text-align: right; }

.porra-table tbody tr:nth-child(odd) {
    background-color: var(--theme-secondary);
}

.porra-table tbody tr:hover {
    background-color: rgba(var(--theme-primary-rgb), 0.1);
}

.porra-table .top-10 {
    font-weight: 600;
}



h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--theme-primary);
}

a {
    color: var(--theme-primary);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

.btn-primary {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}

/* ── Layout principal ──────────────────────────────────────────────────── */

.main-header {
    height: var(--theme-header-height);
    border-bottom: 1px solid var(--theme-secondary);
}

.main-navbar {
    height: var(--theme-navbar-height);
    background-color: var(--theme-primary);
}
.main-navbar .nav-link {
    color: var(--theme-text-on-primary);
    font-size: 0.9rem;
    font-weight: 500;
}

.main-footer {
    background-color: var(--theme-secondary);
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-top: 1px solid #dee2e6;
}

/* ── Componentes ───────────────────────────────────────────────────────── */

.card {
    border: 1px solid #dee2e6;
    border-radius: var(--theme-border-radius);
    box-shadow: 0 2px 4px rgba(0,0,0,.05);
}

.sticky-cards-bar {
    background-color: var(--theme-secondary);
    border-bottom: 1px solid #dee2e6;
}

.sticky-card {
    border-radius: var(--theme-border-radius);
}

/* =====================================================
   PCS Sprites — sprite10.png
   ===================================================== */
.shirt,
.icon {
    background: url(/images/sprite10.png) no-repeat 0 0;
    display: inline-block;
    vertical-align: middle;
}

/* --- Camisetas de líderes (tamaño base 18×16) --- */
.shirt { width: 18px; height: 16px; }
.shirt.st4  { background-position: -180px 0; }
.shirt.st5  { background-position: -200px 0; }
.shirt.st7  { background-position: -220px 0; }
.shirt.st6  { background-position: -240px 0; }
.shirt.st10 { background-position: -260px 0; }
.shirt.wc   { background-position: -280px 0; }

/* variante w16 (fila -20px) */
.shirt.w16.st4  { background-position: -180px -20px; width: 16px; height: 14px; }
.shirt.w16.st5  { background-position: -200px -20px; width: 16px; height: 14px; }
.shirt.w16.st7  { background-position: -220px -20px; width: 16px; height: 14px; }
.shirt.w16.st6  { background-position: -240px -20px; width: 16px; height: 14px; }
.shirt.w16.st10 { background-position: -260px -20px; width: 16px; height: 14px; }
.shirt.w16.wc   { background-position: -280px -20px; width: 16px; height: 14px; }

/* variante w14 (fila -40px) */
.shirt.w14.st4  { background-position: -180px -40px; width: 14px; height: 12px; }
.shirt.w14.st5  { background-position: -200px -40px; width: 14px; height: 12px; }
.shirt.w14.st7  { background-position: -220px -40px; width: 14px; height: 12px; }
.shirt.w14.st6  { background-position: -240px -40px; width: 14px; height: 12px; }
.shirt.w14.st10 { background-position: -260px -40px; width: 14px; height: 12px; }
.shirt.w14.wc   { background-position: -280px -40px; width: 14px; height: 12px; }

/* variante w12 (fila -60px) */
.shirt.w12.st4  { background-position: -180px -60px; width: 12px; height: 10px; }
.shirt.w12.st5  { background-position: -200px -60px; width: 12px; height: 10px; }
.shirt.w12.st7  { background-position: -220px -60px; width: 12px; height: 10px; }
.shirt.w12.st6  { background-position: -240px -60px; width: 12px; height: 10px; }
.shirt.w12.st10 { background-position: -260px -60px; width: 12px; height: 10px; }
.shirt.w12.wc   { background-position: -280px -60px; width: 12px; height: 10px; }

/* --- Iconos de perfil de etapa (tamaño base 14×14) --- */
.icon.profile { width: 14px; height: 14px; }
.icon.profile.p1 { background-position: -180px -90px; }
.icon.profile.p2 { background-position: -200px -90px; }
.icon.profile.p3 { background-position: -220px -90px; }
.icon.profile.p5 { background-position: -240px -90px; }
.icon.profile.p4 { background-position: -260px -90px; }

/* variante w12 (fila -110px) */
.icon.profile.w12.p1 { background-position: -180px -110px; width: 12px; height: 12px; }
.icon.profile.w12.p2 { background-position: -200px -110px; width: 12px; height: 12px; }
.icon.profile.w12.p3 { background-position: -220px -110px; width: 12px; height: 12px; }
.icon.profile.w12.p5 { background-position: -240px -110px; width: 12px; height: 12px; }
.icon.profile.w12.p4 { background-position: -260px -110px; width: 12px; height: 12px; }

/* variante w10 (fila -130px) */
.icon.profile.w10.p1 { background-position: -180px -130px; width: 10px; height: 10px; }
.icon.profile.w10.p2 { background-position: -200px -130px; width: 10px; height: 10px; }
.icon.profile.w10.p3 { background-position: -220px -130px; width: 10px; height: 10px; }
.icon.profile.w10.p5 { background-position: -240px -130px; width: 10px; height: 10px; }
.icon.profile.w10.p4 { background-position: -260px -130px; width: 10px; height: 10px; }

/* variante w8 (fila -150px) */
.icon.profile.w8.p1 { background-position: -180px -150px; width: 8px; height: 8px; }
.icon.profile.w8.p2 { background-position: -200px -150px; width: 8px; height: 8px; }
.icon.profile.w8.p3 { background-position: -220px -150px; width: 8px; height: 8px; }
.icon.profile.w8.p5 { background-position: -240px -150px; width: 8px; height: 8px; }
.icon.profile.w8.p4 { background-position: -260px -150px; width: 8px; height: 8px; }