/**
 * Theme Name:     Hello Elementor Child
 * Author:         MRodas
 * Template:       hello-elementor
 * Text Domain:	   hello-elementor-child
 * Description:    Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
 */

/* Contenedor Flex para alinear elementos horizontal y verticalmente */
.sp-event-block-flex-container {
    display: flex;
    align-items: center; /* CENTRADO VERTICAL */
    justify-content: space-between;
    width: 100%;
}

/* Columnas de los logos */
.sp-event-logo-col {
    width: 20%;
    max-width: 6em;
    flex-shrink: 0;
}

.sp-event-logo-col.local-logo {
    text-align: left;
}

.sp-event-logo-col.visitor-logo {
    text-align: right;
}

/* Columna de detalles centrales */
.sp-event-details-col {
    flex-grow: 1;
    text-align: center;
    padding: 0 15px; /* Espacio de separación con los escudos */
}

/* Sobrescribir floats y estilos por defecto de SportsPress */
.sp-event-block-flex-container .team-logo {
    float: none !important;
    display: inline-block !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

.sp-event-block-flex-container .team-logo img {
    max-width: 100% !important;
    max-height: 4.5em !important; /* Ajusta la altura máxima según tus escudos */
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
}


/* ==========================================================================
   Alineación de datos en tabla de clasificación (excluyendo el Club)
   ========================================================================== */
.sp-league-table td:not(.data-name),
.sp-league-table th:not(.data-name) {
    text-align: center !important;
    vertical-align: middle !important;
}

/* ==========================================================================
   Estilos para la fila del equipo destacado (ej: ATLETICO SANLUCAR C.F.)
   ========================================================================== */

/* Fondo y bordes superior/inferior de las celdas de la fila destacada */
.sp-league-table tr.highlighted td {
    /* Color de fondo: usa la variable de Elementor con el fallback #EFF3FF */
    background-color: var(--e-global-color-contenedor-claro, #EFF3FF) !important;
    /* Bordes superior e inferior: usa la variable de Elementor "Principal" con el fallback #006591 */
    border-top: 1.5px solid var(--e-global-color-primary, #006591) !important;
    border-bottom: 1.5px solid var(--e-global-color-primary, #006591) !important;
}

/* Borde izquierdo para la primera celda (Posición) */
.sp-league-table tr.highlighted td:first-child {
    border-left: 1.5px solid var(--e-global-color-primary, #006591) !important;
}

/* Borde derecho para la última celda (Puntos) */
.sp-league-table tr.highlighted td:last-child {
    border-right: 1.5px solid var(--e-global-color-primary, #006591) !important;
}