.elementor-608 .elementor-element.elementor-element-e75463f{--display:flex;--min-height:59vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--overlay-opacity:0.61;}.elementor-608 .elementor-element.elementor-element-e75463f:not(.elementor-motion-effects-element-type-background), .elementor-608 .elementor-element.elementor-element-e75463f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000B8;background-image:url("https://clubdetenisdemesausb.cl/wp-content/uploads/2024/09/instalacinoes.jpg");background-position:center center;background-size:cover;}.elementor-608 .elementor-element.elementor-element-e75463f::before, .elementor-608 .elementor-element.elementor-element-e75463f > .elementor-background-video-container::before, .elementor-608 .elementor-element.elementor-element-e75463f > .e-con-inner > .elementor-background-video-container::before, .elementor-608 .elementor-element.elementor-element-e75463f > .elementor-background-slideshow::before, .elementor-608 .elementor-element.elementor-element-e75463f > .e-con-inner > .elementor-background-slideshow::before, .elementor-608 .elementor-element.elementor-element-e75463f > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-608 .elementor-element.elementor-element-ae982c3 .elementor-heading-title{font-family:"Bebas Neue", Sans-serif;font-size:37px;font-weight:600;color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-608 .elementor-element.elementor-element-9ff0b54{text-align:start;font-family:"Lato", Sans-serif;font-size:20px;font-weight:400;color:#FFFFFF;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-608 .elementor-element.elementor-element-e9452f4 .elementor-icon-wrapper{text-align:center;}.elementor-608 .elementor-element.elementor-element-e9452f4.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-608 .elementor-element.elementor-element-e9452f4.elementor-view-framed .elementor-icon, .elementor-608 .elementor-element.elementor-element-e9452f4.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-608 .elementor-element.elementor-element-e9452f4.elementor-view-framed .elementor-icon, .elementor-608 .elementor-element.elementor-element-e9452f4.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-608 .elementor-element.elementor-element-d74dd4e{--display:flex;--gap:50px 0px;--row-gap:50px;--column-gap:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-608 .elementor-element.elementor-element-05916a3{text-align:center;font-family:"Lato", Sans-serif;font-size:20px;font-weight:400;}.elementor-608 .elementor-element.elementor-element-0393a26{text-align:center;}.elementor-608 .elementor-element.elementor-element-0393a26 .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:41px;font-weight:600;line-height:51px;color:var( --e-global-color-f75f226 );}:root{--page-title-display:none;}@media(max-width:767px){.elementor-608 .elementor-element.elementor-element-e75463f{--min-height:30vh;}}/* Start custom CSS for html, class: .elementor-element-4a83526 */<style>
/* Contenedor general para el scroll en desktop/tablet y manejo de mobile */
.horario-container {
    overflow-x: auto; /* Permite scroll horizontal en caso de tablas muy anchas */
    width: 100%;
}

/* Estilos de la tabla base */
.horario-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-family: Arial, sans-serif; /* Puedes ajustar la fuente */
    min-width: 700px; /* Ancho mínimo para mantener la legibilidad en pantallas grandes */
}

/* Encabezados de la tabla (desktop) */
.horario-table th {
    background-color: #333; /* Fondo oscuro para encabezados */
    color: white;
    padding: 10px;
    text-align: center;
    border: 1px solid #ccc;
    font-weight: bold;
    font-size: 14px;
}

/* Celdas de la tabla */
.horario-table td {
    padding: 8px;
    text-align: center;
    border: 1px solid #ccc;
    font-size: 13px;
    vertical-align: middle;
}

/* Colores de fondo de las filas según la imagen */
/* MÓDULO 1 - Gris Claro (GENERAL) */
.modulo-1 td { background-color: #e6e6e6; }
.modulo-1 td:nth-child(7), .modulo-1 td:nth-child(8) { background-color: #a3d9ff; } /* Sábado y Domingo - Azul Claro */

/* MÓDULO 2 - Amarillo/Verde Claro (INICIAL / FORMATIVO) */
.modulo-2 td:nth-child(2) { background-color: #ffffff; } /* Lunes - Blanco */
.modulo-2 td:nth-child(3), .modulo-2 td:nth-child(4), .modulo-2 td:nth-child(5) { background-color: #c6e0b4; } /* Martes a Jueves - Verde Inicial */
.modulo-2 td:nth-child(6) { background-color: #f2ccff; } /* Viernes - Rosado */
.modulo-2 td:nth-child(7), .modulo-2 td:nth-child(8) { background-color: #a3d9ff; } /* Sábado y Domingo - Azul Claro */

/* MÓDULO 3 - Verde Medio (FORMATIVO / AVANZADO) */
.modulo-3 td:nth-child(2), .modulo-3 td:nth-child(3), .modulo-3 td:nth-child(4), .modulo-3 td:nth-child(5) { background-color: #9acd32; } /* Lunes a Jueves - Verde Medio */
.modulo-3 td:nth-child(6) { background-color: #f2ccff; } /* Viernes - Rosado */
.modulo-3 td:nth-child(7), .modulo-3 td:nth-child(8) { background-color: #a3d9ff; } /* Sábado y Domingo - Azul Claro */

/* MÓDULO 4 - Verde Oscuro (AVANZADO / ADULTO) */
.modulo-4 td:nth-child(2), .modulo-4 td:nth-child(3), .modulo-4 td:nth-child(4), .modulo-4 td:nth-child(5) { background-color: #6aa84f; } /* Lunes a Jueves - Verde Oscuro */
.modulo-4 td:nth-child(6) { background-color: #f2ccff; } /* Viernes - Rosado */
.modulo-4 td:nth-child(7), .modulo-4 td:nth-child(8) { background-color: #a3d9ff; } /* Sábado y Domingo - Azul Claro */


/* Estilos específicos para la primera columna (MÓDULO) */
.horario-table td:first-child {
    font-weight: bold;
    background-color: white !important; /* Para evitar que los colores de fila lo sobrescriban */
    line-height: 1.4;
}


/*
 * MEDIA QUERY PARA OPTIMIZACIÓN MOBILE (Móvil Primero)
 * Transforma la tabla en tarjetas apiladas en pantallas pequeñas
 */
@media screen and (max-width: 768px) {
    .horario-container {
        overflow-x: hidden;
    }

    .horario-table {
        min-width: 100%;
        border: none;
    }

    .horario-table thead {
        display: none;
    }

    /* Cada fila (tr) se convierte en una "tarjeta" de día de la semana */
    .horario-table tr {
        display: block;
        margin-bottom: 15px; /* Más espacio entre tarjetas */
        border: none;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra para resaltar la tarjeta */
        border-radius: 5px;
        overflow: hidden; /* Importante para el borde lateral */
    }

    /* ********** SOLUCIÓN PARA EL COLOR ********** */
    /* El color de cada módulo se aplica como un borde izquierdo a la tarjeta (tr) */
    .modulo-1 { border-left: 5px solid #a3d9ff; } /* Azul Claro */
    .modulo-2 { border-left: 5px solid #c6e0b4; } /* Verde Inicial */
    .modulo-3 { border-left: 5px solid #9acd32; } /* Verde Medio */
    .modulo-4 { border-left: 5px solid #6aa84f; } /* Verde Oscuro */
    
    /* ******************************************* */

    /* Cada celda (td) se convierte en un ítem de la tarjeta */
    .horario-table td {
        display: flex;
        justify-content: space-between;
        text-align: right;
        padding: 10px 15px;
        border: none;
        border-bottom: 1px solid #eee;
        /* IMPORTANTE: Comentamos o eliminamos el background-color: white !important; */
    }
    
    /* Mantiene los colores originales de la celda si el espacio es lo suficientemente grande */
    .modulo-2 td:nth-child(2) { background-color: #ffffff; } /* Lunes de Módulo 2 es blanco */


    /* El label (título de la columna original) se muestra antes del contenido */
    .horario-table td::before {
        content: attr(data-label);
        font-weight: bold;
        text-transform: uppercase;
        margin-right: 10px;
        text-align: left;
    }
    
    /* Estilo para la primera celda (MÓDULO) - Encabezado de la tarjeta */
    .horario-table tr .modulo-header {
        display: block;
        text-align: center;
        /* Aquí sí forzamos un fondo más claro para el encabezado */
        background-color: #f0f0f0 !important;
        font-size: 16px;
        color: #333;
        font-weight: bold;
        padding: 10px;
        border-bottom: 1px solid #ccc;
    }
    
    /* Oculta el label del encabezado de la tarjeta */
    .horario-table tr .modulo-header::before {
        content: "";
        display: none;
    }
    
    /* Elimina el borde inferior de la última celda de cada fila (tarjeta) */
    .horario-table tr td:last-child {
        border-bottom: none;
    }

}
</style>/* End custom CSS */