/* =========================================
   1. VARIABLES Y GENERALES
   ========================================= */
:root {
    --color-principal:#222222;
    --border-soft:#e2e8f0;
    --bg-light:#f8fafc;
    --text-muted:#718096;
}

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }

/* =========================================
   2. SISTEMA DE TABS (NAVEGACIÓN)
   ========================================= */
#torneoTabs, .sub-tabs { 
    list-style:none; 
    padding:0 20px !important; 
    margin:0 -20px 5px !important; 
    display:flex; 
    gap:5px; 
    overflow-x:auto; 
    -ms-overflow-style:none; 
    scrollbar-width:none; 
}

#torneoTabs::-webkit-scrollbar, .sub-tabs::-webkit-scrollbar { display:none; }

#torneoTabs a, .sub-tabs a { 
    text-decoration:none !important; 
    background:linear-gradient(to bottom, #f1f1f1, #e2e2e2); 
    border:1px solid #ddd; 
    border-radius:4px; 
    color:#333; 
    cursor:pointer; 
    transition:all .3s ease; 
    display:inline-block; 
    text-align:center; 
    white-space:nowrap; 
}

#torneoTabs a { font-size:16px; padding:4px 20px; font-weight:700; margin:5px 0; }
.sub-tabs a { font-size:12px; padding:2px 10px; font-weight:400; }

#torneoTabs a.active, .sub-tabs a.active { background:var(--color-principal); color:#fff!important; border-color:var(--color-principal); }
#torneoTabs a:hover, .sub-tabs a:hover { border:1px solid var(--color-principal); color:var(--color-principal); }

.tab-content, .sub-tab-content { display:none; }
.tab-content.active, .sub-tab-content.active { display:block; }
.tab-content.active { animation:fadeIn .4s ease-in-out; }
.tab-content h4 { font-weight:bold; margin-top:.5em; }
.sub-tab-content { padding-bottom:20px; }

/* =========================================
   3. TABLA DE POSICIONES
   ========================================= */
.tabla-container {
    max-width:100%;
    overflow-x:auto;
    border:1px solid var(--border-soft);
    border-radius:8px;
    margin-bottom:10px;
    background:#fff;
}

.tabla-posiciones { width:100%; border-collapse:collapse; margin-bottom:6px!important; }

/* Padding solicitado entre columnas */
.tabla-posiciones th, 
.tabla-posiciones td { 
    padding:8px 2px !important; /* 0 arriba/abajo (opcional) y 2px laterales */
    border:0; 
    text-align:center; 
    font-size:13px;
}

.tabla-posiciones thead { background-color:var(--bg-light); }
.tabla-posiciones th { color:var(--text-muted); font-size:11px; text-transform:uppercase; border-bottom:1px solid var(--border-soft); }
.tabla-posiciones td { border-top:1px solid var(--border-soft); vertical-align:middle; }

/* Columna Equipo */
.tabla-posiciones td.equipos, .tabla-posiciones th.equipos { text-align:left; width:auto; min-width:150px; }
.equipo-flex { display:flex; align-items:center; gap:8px; overflow:hidden; }
.equipo-flex img { width:30px; height:30px; border-radius:3px; object-fit:contain; }
.equipo-flex span { 
    display:block; 
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    max-width:210px; 
    font-weight:600;
}

/* Columna Puntos */
.tabla-posiciones td.pts { font-weight:800; font-size:1.1em; color:var(--color-principal); }

/* =========================================
   4. FIXTURE Y PARTIDOS
   ========================================= */
.fixture-container { display:flex; flex-direction:column; gap:5px; margin-top:4px; }
.partido-item { display:flex; justify-content:space-between; align-items:center; padding:12px; border:1px solid var(--border-soft); border-radius:8px; background-color:#fff; }
.partido-item .resultado { display:block; }

.columna { display:flex; flex-direction:column; align-items:center; width:40%; }
.centro { width:20%; text-align:center; }
.full { width:100%; text-align:center; font-size:11px; }
.descripcion { font-size:14px; line-height:1.2em; font-weight:bold; color:var(--color-principal); }

.escudo { width:45px; height:45px; object-fit:contain; margin-bottom:4px; }
.equipo { font-weight:bold; color:#333; font-size:12px; line-height:1.1; }

.partido-fecha { font-size:12px; color:#666; }
.partido-hora { color:var(--color-principal); font-size:14px; font-weight:bold; }
.resultado { font-size:26px; line-height:26px; font-weight:bold; color:var(--color-principal); margin:5px 0 0; }
.resultado span { font-weight:normal; color:#999; font-size:20px; line-height:26px; }
.sets { background:var(--color-principal); color:#FFF; font-size:13px; padding:2px 8px; border-radius:4px; }

/* Voley específico */
.setvoley { display:flex; gap:2px; margin:3px 0; justify-content:center; }
.punto { display:flex; align-items:center; justify-content:center; width:35px; height:24px; border-radius:4px; color:#FFF; font-size:12px; }
.ganador { font-weight:bold; background:var(--color-principal); }
.perdedor { background:#cbd5e0; }

/* =========================================
   5. COMPONENTES EXTRA
   ========================================= */
.campeon-container { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2em 1em; border:1px solid var(--border-soft); border-radius:8px; background-color:#fff; margin-top:5px; } 
.campeon-container .escudo { width:120px; height:auto; margin-bottom:10px; } 
.campeon-container .campeon { color:#333; line-height:1.2!important; } 
.campeon-container .campeon .equipo { font-size:32px; font-weight:bold; letter-spacing:-1; } 
.campeon-container .campeon .titulo { font-size:16px; color:#666; }
.mensaje-empate { margin-bottom:5px; padding:10px; background-color:#fff5f5; color:#c53030; border:1px solid #feb2b2; border-radius:8px; font-size:12px; }
.infotabla { font-size:10px; padding:10px; color:var(--text-muted); }

/* Cargador */
#loadingMessage { display:flex; flex-direction:column; justify-content:center; align-items:center; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255, 255, 255, 0.9); z-index:9999; }
#loadingMessage .spinner { width:40px; height:40px; border:4px solid #f3f3f3; border-top:4px solid var(--color-principal); border-radius:50%; animation:spin 1s linear infinite; }

/* =========================================
   6. RESPONSIVE
   ========================================= */
@media (max-width:480px) {
    .equipo-flex span { max-width:130px; }
    .tabla-posiciones td, .tabla-posiciones th { font-size:12px; padding:6px 1px !important; }
    .resultado { font-size:24px; }
}