/* --- Estilos Base y Contenedor Principal --- */
#csm-full-stats-container {
    max-width: 600px; /* Ancho máximo tipo app */
    margin: 20px auto; /* Centrado */
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borde del dashboard */
    border-radius: 8px;
    background-color: #226334; /* Fondo verde del dashboard */
    color: #fff; /* Texto blanco por defecto */
    overflow: hidden; /* Para controlar transiciones si se añaden */
    position: relative; /* Para posicionar elementos internos si es necesario */
    font-family: 'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; /* Fuente del dashboard */
}

/* Ocultar todos los pasos por defecto (JS los mostrará) */
.csm-stats-step {
    display: none;
    padding: 10px 0;
}

/* Mostrar el paso activo */
#csm-full-stats-container .csm-stats-step:visible {
    display: block;
}

/* --- Estilos Selectores (Torneo y Fecha Fixture) --- */
#csm-full-stats-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #fff; /* Texto blanco */
}

#csm-full-stats-container select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borde del dashboard */
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.1); /* Fondo input dashboard */
    color: #fff; /* Texto blanco */
    box-sizing: border-box; /* Incluir padding y borde en el ancho total */
    font-size: 1em;
}
#csm-full-stats-container select option {
    background-color: #226334; /* Fondo para opciones */
    color: #fff;
}


/* --- Botones --- */
.csm-back-button {
    background: rgba(255, 255, 255, 0.2); /* Estilo botón secundario dashboard */
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 15px;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
    font-family: 'Barlow', sans-serif; /* Asegurar fuente */
    font-weight: 600;
}

.csm-back-button:hover {
    background: rgba(255, 255, 255, 0.3); /* Hover botón secundario dashboard */
}

/* --- Estilos Selección de Categoría (como botones/tabs) --- */
.csm-category-tabs {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    display: flex;
    flex-wrap: wrap; /* Permitir que los botones pasen a la siguiente línea */
    gap: 10px; /* Espacio entre botones */
}

.csm-category-tabs li {
    margin: 0;
    padding: 0;
    flex-grow: 1; /* Hacer que los botones intenten ocupar el espacio */
}

.csm-category-tabs .csm-category-tab-link {
    display: block;
    padding: 12px 10px;
    background: #f2c94c; /* Amarillo/dorado como botón principal */
    color: #000; /* Texto negro para contraste */
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    transition: background-color 0.2s ease;
    font-weight: 600; /* Peso del botón principal */
    font-family: 'Barlow', sans-serif; /* Asegurar fuente */
}

.csm-category-tabs .csm-category-tab-link:hover,
.csm-category-tabs .csm-category-tab-link.active { /* Estilo para activo */
    background: #e0b93e; /* Amarillo más oscuro para hover/activo */
    color: #000;
}

/* --- Estilos Pestañas jQuery UI (Adaptación básica) --- */
.csm-category-detail-tabs,
.csm-player-stats-tabs {
    border: none; /* Quitar borde por defecto de jQuery UI */
    background: #022f0e !important;
    padding: 0;
    font-family: 'Barlow', sans-serif !important;
    margin-top: 15px;
}

.csm-category-detail-tabs .ui-tabs-nav,
.csm-player-stats-tabs .ui-tabs-nav {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Borde del dashboard */
    padding: 0;
    display: flex; /* Hacer que las pestañas ocupen el ancho */
    justify-content: space-around; /* Distribuir espacio */
}

.csm-category-detail-tabs .ui-tabs-nav li,
.csm-player-stats-tabs .ui-tabs-nav li {
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
    flex-grow: 1; /* Ocupar espacio disponible */
}

.csm-category-detail-tabs .ui-tabs-nav li a,
.csm-player-stats-tabs .ui-tabs-nav li a {
    color: #fff; /* Texto blanco para tabs inactivas */
    padding: 10px 5px; /* Ajustar padding */
    text-align: center;
    display: block;
    border-radius: 0;
    font-weight: bold;
    font-size: 0.95em;
    white-space: nowrap; /* Evitar que el texto se rompa */
}

.csm-category-detail-tabs .ui-tabs-nav li.ui-tabs-active,
.csm-player-stats-tabs .ui-tabs-nav li.ui-tabs-active {
    background: transparent; /* Fondo transparente */
    border: none;
    border-bottom: 2px solid #f2c94c; /* Indicador activo amarillo */
    margin-bottom: -1px; /* Alinear con borde inferior */
    padding-bottom: 0;
}

.csm-category-detail-tabs .ui-tabs-nav li.ui-tabs-active a,
.csm-player-stats-tabs .ui-tabs-nav li.ui-tabs-active a {
    color: #f2c94c; /* Texto amarillo para activa */
    font-weight: bold;
}

.csm-category-detail-tabs .ui-tabs-panel,
.csm-player-stats-tabs .ui-tabs-panel {
    padding: 15px 5px; /* Padding para el contenido de las pestañas */
    border: none;
    background: transparent;
}

/* --- Estilos Tablas (Standings, Scorers, etc.) --- */
.csm-standings-table,
.csm-scorers-table,
.csm-assists-table,
.csm-player-sanctions-table,
.csm-player-mvp-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.9em; /* Tamaño de fuente ligeramente más pequeño para tablas */
    background-color: #226334; /* Fondo verde oscuro */
    color: #fff; /* Texto blanco */
    border-radius: 8px; /* Bordes redondeados como tabla dashboard */
    overflow: hidden; /* Para aplicar border-radius a celdas */
    box-shadow: none; /* Quitar sombra anterior */
}

.csm-standings-table th, .csm-standings-table td,
.csm-scorers-table th, .csm-scorers-table td,
.csm-assists-table th, .csm-assists-table td,
.csm-player-sanctions-table th, .csm-player-sanctions-table td,
.csm-player-mvp-table th, .csm-player-mvp-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Borde dashboard */
    border-left: none; /* Quitar bordes laterales */
    border-right: none;
    border-top: none; /* Quitar borde superior */
    padding: 10px 8px; /* Padding como dashboard */
    text-align: center;
}
.csm-standings-table tr:last-child td,
.csm-scorers-table tr:last-child td,
.csm-assists-table tr:last-child td,
.csm-player-sanctions-table tr:last-child td,
.csm-player-mvp-table tr:last-child td {
    border-bottom: none; /* Quitar borde inferior de la última fila */
}


.csm-standings-table th,
.csm-scorers-table th,
.csm-assists-table th,
.csm-player-sanctions-table th,
.csm-player-mvp-table th {
    background: rgba(255, 255, 255, 0.1); /* Fondo header tabla dashboard */
    font-weight: 600; /* Peso header tabla dashboard */
    color: #fff; /* Color header tabla dashboard */
    white-space: nowrap; /* Evitar que los encabezados se rompan */
}

/* Alinear texto a la izquierda para nombres */
.csm-standings-table td:nth-child(2),
.csm-scorers-table td:nth-child(2), .csm-scorers-table td:nth-child(3),
.csm-assists-table td:nth-child(2), .csm-assists-table td:nth-child(3),
.csm-player-sanctions-table td:nth-child(1), .csm-player-sanctions-table td:nth-child(2),
.csm-player-mvp-table td:nth-child(1), .csm-player-mvp-table td:nth-child(2) {
    text-align: left;
}

/* Estilo para puntos y goles destacados */
.csm-standings-table td:last-child strong,
.csm-scorers-table td:last-child strong,
.csm-assists-table td:last-child strong,
.csm-player-mvp-table td:last-child strong {
    font-weight: bold;
    color: #f2c94c; /* Amarillo para destacar */
}

/* --- Estilos Fixture --- */
.csm-fixture-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.csm-fixture-list li {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    margin-bottom: 8px;
    color:#fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 0.95em;
    width: 100%;
    text-align: center !important;
}

.csm-fixture-list li a{
    color:#fff !important;
}

.csm-fixture-score {
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.15); /* Fondo score */
    color: #f2c94c; /* Color score */
    padding: 3px 8px;
    border-radius: 3px;
    margin: 0 10px;
}

.csm-fixture-details {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.7); /* Color detalles dashboard */
    margin-left: 10px;
    white-space: nowrap;
}

/* Estilo para indicar que el LI es clickeable */
.csm-fixture-list li[data-result-id] {
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.csm-fixture-list li[data-result-id]:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Resaltar al pasar el mouse */
}

/* Estilos para la vista de detalles del resultado cargada por AJAX */
#csm-result-details-view {
    /* Hereda estilos generales, pero podemos añadir específicos si es necesario */
    padding: 10px 0;
}

/* Asegurar que los estilos de csm-result-details (si existen) se apliquen bien */
#csm-result-details-view .csm-result-details-container {
    /* Ajustes si es necesario para encajar en el contenedor del shortcode */
    margin-top: 0;
    padding: 0;
    border: none;
    background: none;
    color: inherit; /* Heredar color de texto */
}
#csm-result-details-view .csm-result-details-container h3,
#csm-result-details-view .csm-result-details-container h4 {
    color: #f2c94c; /* Mantener títulos amarillos */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
    margin-bottom: 10px;
}


/* --- Responsividad --- */
@media (max-width: 600px) {
    #csm-full-stats-container {
        margin: 10px;
        padding: 10px;
        border: none; /* Quitar borde en móviles pequeños */
    }

    /* Hacer tablas más responsivas (scroll horizontal) */
    .csm-standings-table-wrapper,
    .csm-scorers-table-wrapper,
    .csm-assists-table-wrapper,
    .csm-player-sanctions-table, /* Aplicar directamente a la tabla si no hay wrapper */
    .csm-player-mvp-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    }

    .csm-standings-table th, .csm-standings-table td,
    .csm-scorers-table th, .csm-scorers-table td,
    .csm-assists-table th, .csm-assists-table td,
    .csm-player-sanctions-table th, .csm-player-sanctions-table td,
    .csm-player-mvp-table th, .csm-player-mvp-table td {
        padding: 6px 4px; /* Menos padding en móvil */
        font-size: 0.85em; /* Fuente más pequeña */
    }

    .csm-category-tabs {
        gap: 5px; /* Menos espacio entre botones */
    }
    .csm-category-tabs .csm-category-tab-link {
        padding: 10px 8px;
    }

    .csm-category-detail-tabs .ui-tabs-nav li a,
    .csm-player-stats-tabs .ui-tabs-nav li a {
        font-size: 0.9em;
        padding: 8px 4px;
    }

    .csm-fixture-list li {
        flex-direction: column; /* Apilar elementos en móvil */
        align-items: flex-start;
        padding: 8px;
    }
    .csm-fixture-score {
        margin: 5px 0;
        align-self: center; /* Centrar el score */
    }
    .csm-fixture-details {
        margin-left: 0;
        margin-top: 5px;
        align-self: flex-start;
    }
}

/* --- Loading Indicator --- */
.csm-loading {
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.7); /* Color loading */
}
.csm-error {
    background: #226334; /* Fondo verde */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borde sutil */
    color: #fff; /* Texto blanco */
    border-left: 4px solid #d63638; /* Indicador rojo error */
    padding: 10px 15px;
    border-radius: 4px;
    margin: 15px 0;
    font-weight: 500;
}

/* Ajustes adicionales para títulos dentro de las pestañas */
.ui-tabs-panel h4,
.ui-tabs-panel h5 {
    color: #f2c94c; /* Títulos internos en amarillo */
    margin-top: 15px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ui-tabs-panel h3 { /* Título principal de la categoría */
     color: #f2c94c;
     margin-bottom: 20px;
     text-align: center;
}