/*
 * Crypto Soccer Theme - Match Details Modal Styles (v2 - Final)
 */

/* --- Contenedor Principal del Modal (v3 - Layout Definitivo y Espacioso) --- */
.cs-match-details-modal-content {
    /* Definimos un tamaño dinámico basado en la pantalla */
    width: 90vw; /* Ocupa el 90% del ancho de la pantalla */
    height: 90vh; /* Ocupa el 90% del alto de la pantalla */

    /* Establecemos límites para que no sea demasiado grande en monitores gigantes */
    max-width: 1200px; 
    max-height: 820px;

    /* El resto de los estilos que ya teníamos para el layout interno */
    background: radial-gradient(ellipse at top, rgba(29, 242, 96, 0.1), transparent 70%), var(--cs-card-dark);
    border: 2px solid var(--cs-border-dark);
    padding: 0; 
    display: flex; 
    flex-direction: column; 
    border-radius: 1.3em;
    overflow: hidden; /* Asegura que los bordes redondeados se respeten */
}

#cs-match-details-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

#cs-match-details-content .cs-loader-ball {
    margin: 8em auto;
}

/* --- Cabecera del Modal (Fija) --- */
.cs-match-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5em 2em; /* Devolvemos el padding aquí */
    border-bottom: 1px solid var(--cs-border-dark);
    flex-shrink: 0; /* Evita que la cabecera se encoja */
}

/* --- Cuerpo del Modal (Scrollable) --- */
.cs-match-modal-body {
    padding: 1.5em 2em 2em; /* Padding para el contenido */
    overflow-y: auto; /* ¡LA CLAVE! Añade scroll si el contenido es muy largo */
    flex-grow: 1; /* Permite que el cuerpo crezca para llenar el espacio */
}

.cs-match-modal-team { display: flex; flex-direction: column; align-items: center; gap: 0.8em; width: 120px; }
.cs-match-modal-team img { width: 72px; height: 72px; }
.cs-match-modal-team-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.3em; letter-spacing: 1px; text-align: center; }
.cs-match-modal-score-info { text-align: center; }
.cs-match-modal-score { font-family: 'Orbitron', sans-serif; font-size: 3.5em; font-weight: bold; margin: 0; line-height: 1; }
.cs-match-modal-status { font-family: 'Bebas Neue', sans-serif; font-size: 1.2em; letter-spacing: 2px; color: var(--cs-green-neon); text-shadow: var(--cs-text-glow); text-transform: uppercase; }

/* --- Pestañas y Contenido --- */
.cs-match-modal-tabs { display: flex; justify-content: center; gap: 0.5em; margin-bottom: 1.5em; }
.cs-match-modal-tab { padding: 0.6em 1.5em; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--cs-border-dark); color: #ccc; cursor: pointer; border-radius: 2em; font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; font-size: 1.1em; transition: all 0.2s ease; }
.cs-match-modal-tab:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.cs-match-modal-tab.active { background: var(--cs-green-neon); color: var(--cs-bg-dark); border-color: var(--cs-green-neon); font-weight: bold; }
.cs-match-modal-tab-content { display: none; }
.cs-match-modal-tab-content.active { display: block; animation: cs-fade-in-up 0.5s ease; }

/* --- Alineaciones --- */
.cs-match-field { background-color: #006422; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='none' stroke='%231df260' stroke-width='2' stroke-opacity='0.1' /%3E%3Ccircle cx='50' cy='50' r='10' fill='none' stroke='%231df260' stroke-width='2' stroke-opacity='0.1' /%3E%3C/svg%3E"); border: 2px solid var(--cs-border-dark); border-radius: 8px; padding: 1em; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1em; margin-bottom: 1.5em; }
.cs-lineup-side h5 { text-align: center; margin: 0 0 1em 0; color: #fff; font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; }
.cs-player-list { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }
.cs-player-list li { display: flex; align-items: center; gap: 0.8em; padding: 0.5em; background: rgba(0,0,0,0.2); border-radius: 4px; margin-bottom: 0.5em; }
.cs-player-number { background: #000; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; }
.cs-player-name { word-break: break-word; }

/* --- Eventos --- */
.cs-event-timeline { list-style: none; padding: 0; margin: 0; }
.cs-event-item { display: flex; align-items: center; gap: 1em; padding: 0.8em 0; border-bottom: 1px solid var(--cs-border-dark); }
.cs-event-item:last-child { border-bottom: none; }
.cs-event-minute { font-family: 'Orbitron', sans-serif; font-size: 1.2em; font-weight: bold; width: 50px; text-align: center; flex-shrink: 0; }
.cs-event-icon { font-size: 1.5em; }
.cs-event-details { line-height: 1.4; }

/* --- Estadísticas --- */
.cs-stats-table { width: 100%; border-collapse: collapse; }
.cs-stats-table td { padding: 0.8em 0.5em; border-bottom: 1px solid var(--cs-border-dark); }
.cs-stats-table .stat-category { text-align: center; font-weight: bold; color: #ccc; }
.cs-stats-table .stat-value { font-family: 'Orbitron', sans-serif; font-size: 1.2em; font-weight: bold; width: 3em; }
.cs-stats-table .stat-value.home { text-align: right; }
.cs-stats-table .stat-value.away { text-align: left; }
.cs-stat-bar-container { height: 12px; background: rgba(0,0,0,0.3); border-radius: 6px; display: flex; }
.cs-stat-bar { height: 100%; background: var(--cs-green-neon); border-radius: 6px; }

/* --- Modo Claro --- */
html.cs-light .cs-match-details-modal-content { background: #f8f9fa; border-color: #e2e8f0; }
html.cs-light .cs-match-modal-header { border-bottom-color: #e2e8f0; }
html.cs-light .cs-match-modal-status { color: var(--cs-green-compliant-text); text-shadow: none; }
html.cs-light .cs-match-modal-tab { background: #e9ecef; border-color: #dee2e6; color: var(--cs-text-light-secondary); }
html.cs-light .cs-match-modal-tab:hover { background: #d1d5db; color: var(--cs-text-light-primary); }
html.cs-light .cs-match-modal-tab.active { background: var(--cs-green-compliant-text); border-color: var(--cs-green-compliant-text); color: #fff; }
html.cs-light .cs-match-field { background-color: #e6f7ec; border-color: #c3e6cb; }
html.cs-light .cs-lineup-side h5 { color: var(--cs-text-light-primary); }
html.cs-light .cs-player-list li { background: #fff; }
html.cs-light .cs-event-item { border-bottom-color: #e9ecef; }
html.cs-light .cs-stats-table td { border-bottom-color: #e9ecef; }
html.cs-light .cs-stats-table .stat-category { color: var(--cs-text-light-secondary); }
html.cs-light .cs-stat-bar-container { background: #e9ecef; }
html.cs-light .cs-stat-bar { background: var(--cs-green-compliant-text); }

/* --- Responsividad --- */
@media (max-width: 600px) {
    .cs-match-field { grid-template-columns: 1fr; }
    .cs-match-modal-team-name { font-size: 1.1em; }
    .cs-match-modal-score { font-size: 2.5em; }
}
/* === INICIO: Estilos para la Tabla de Posiciones (Standings) === */

.cs-standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.cs-standings-table th,
.cs-standings-table td {
    padding: 0.75em 0.5em;
    text-align: center;
    border-bottom: 1px solid var(--cs-border-dark);
}

.cs-standings-table th {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
    color: #ccc;
}

.cs-standings-table td.team-name {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.8em;
    font-weight: bold;
}

.cs-standings-table td.team-name img {
    width: 24px;
    height: 24px;
}

.cs-standings-table td.points {
    font-weight: bold;
    color: var(--cs-green-neon);
}

.cs-standings-table tr.highlighted-team {
    background-color: rgba(29, 242, 96, 0.1);
}

/* Modo Claro */
html.cs-light .cs-standings-table th,
html.cs-light .cs-standings-table td {
    border-bottom-color: #e9ecef;
}
html.cs-light .cs-standings-table th {
    color: var(--cs-text-light-secondary);
}
html.cs-light .cs-standings-table td.points {
    color: var(--cs-green-compliant-text);
}
html.cs-light .cs-standings-table tr.highlighted-team {
    background-color: #e6f7ec;
}

/* === FIN: Estilos para la Tabla de Posiciones (Standings) === */
/* === INICIO: Estilos para la Pestaña de Estadísticas de Pronósticos === */

.prediction-stats-container {
    padding-top: 1em;
}

.total-predictions-stat {
    text-align: center;
    font-size: 1.2em;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
    color: #ccc;
    margin-bottom: 2em;
}

.total-predictions-stat strong {
    color: var(--cs-green-neon);
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5em;
    vertical-align: middle;
}

.prediction-bars-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.prediction-bar-container {
    display: grid;
    grid-template-columns: 100px 1fr 50px;
    gap: 1em;
    align-items: center;
    font-size: 0.9em;
}

.prediction-bar-label {
    text-align: right;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prediction-progress-bar {
    height: 20px;
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #444;
}

.prediction-progress-bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s ease-in-out;
}

.prediction-progress-bar-fill.home { background: var(--cs-green-neon); }
.prediction-progress-bar-fill.draw { background: #888; }
.prediction-progress-bar-fill.away { background: var(--cs-accent-blue); }

.prediction-bar-percentage {
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 1.1em;
}

/* Modo Claro */
html.cs-light .total-predictions-stat {
    color: var(--cs-text-light-secondary);
}
html.cs-light .total-predictions-stat strong {
    color: var(--cs-green-compliant-text);
}
html.cs-light .prediction-progress-bar {
    background: #e9ecef;
    border-color: #dee2e6;
}
html.cs-light .prediction-progress-bar-fill.home { background: var(--cs-green-compliant-text); }
html.cs-light .prediction-progress-bar-fill.draw { background: #6c757d; }
html.cs-light .prediction-progress-bar-fill.away { background: #0056b3; }

/* === FIN: Estilos para Estadísticas === */