body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
           
            background-color: #f4f4f4;
            color: #333;
        }
        /* Estilos del título principal ( Capacitate...) */
        h1 {
            color: #5306b3; /* Color morado oscuro similar a la imagen */
            font-size: 28px; /* Tamaño de fuente más grande */
            text-align: center;
            margin-bottom: 10px;
            line-height: 1.2;
            font-weight: 700; /* Negrita */
        }
        h1 span.icon {
            font-size: 32px; /* Tamaño del icono  más grande */
            margin-right: 5px;
            vertical-align: middle; /* Alinea el icono verticalmente con el texto */
        }

        /* Estilos del título del mes (JULIO 2025) */
        h2 {
            color: #f9037d; /* Color morado azulado similar a la imagen */
            font-size: 20px;
            text-align: center;
            margin-bottom: 30px; /* Mayor espacio debajo del mes */
            font-weight: 600; /* Negrita media */
            letter-spacing: 1px; /* Espaciado entre letras */
        }

        /* Estilos para la lista de capacitaciones */
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
			margin-bottom: 25px;
        }
        li {
            background: none; /* Sin fondo en los ítems de la lista */
            margin-bottom: 20px; /* Espacio entre cada capacitación */
            padding: 0;
            border-left: none; /* Eliminar el borde izquierdo */
            border-radius: 0;
            display: flex; /* Usar flexbox para alinear fecha/hora y tema */
            align-items: flex-start; /* Alinea el contenido de cada li arriba */
        }
        li:last-child {
            margin-bottom: 0; /* No hay margen en el último elemento */
        }

        /* Contenedor de la información de la fecha y hora */
        .date-info {
            flex-shrink: 0; /* Previene que este elemento se encoja */
            margin-right: 20px; /* Espacio entre la fecha/hora y el tema */
            text-align: right; /* Alinea el texto a la derecha */
            padding-right: 15px; /* Espacio antes de la línea divisoria */
            border-right: 2px solid #e0e0e0; /* Línea divisoria vertical sutil */
        }
        .date-info strong {
            font-size: 18px; /* Tamaño de la fecha (23, 24, etc.) */
            font-weight: 700; /* Más negrita */
            display: block; /* Para que el día de la semana vaya en nueva línea */
            line-height: 1.2;
			 color: #2e8b57;
        }
        .date-info .day-of-week {
            font-size: 14px; /* Tamaño del día de la semana (Miércoles, Jueves) */
            font-weight: 500;
            display: block;
            color: #666; /* Color más discreto para el día de la semana */
        }
        .date-green {
            color: #2e8b57; /* Verde oscuro para ciertas fechas */
        }
        .date-red {
            color: #cc3333; /* Rojo para ciertas fechas */
        }
        .time {
            color: #ff6347; /* Naranja-rojizo para la hora */
            font-weight: 700;
            font-size: 16px;
            display: block; /* La hora en su propia línea */
            margin-top: 5px; /* Pequeño margen superior para separar de la fecha */
        }

        /* Contenedor de la información del tema de la capacitación */
        .topic-info {
            flex-grow: 1; /* Permite que este elemento ocupe el espacio restante */
            display: flex;
            align-items: center; /* Alinea el icono de play y el texto verticalmente */
            padding-left: 0; /* Eliminar padding si se usa border-right en date-info */
        }
        .play-icon-container {
            background-color: #03a9f4; /* Azul brillante para el fondo del icono de play */
            color: white;
            padding: 5px 8px; /* Relleno del icono de play */
            border-radius: 5px; /* Ligeramente redondeado */
            margin-right: 10px; /* Espacio entre el icono y el texto del tema */
            font-size: 14px; /* Tamaño del icono de play */
            line-height: 1; /* Ajustar altura de línea para el icono */
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .topic-text {
            color: #4a4a4a; /* Gris oscuro para el texto del tema */
            font-size: 16px; /* Tamaño del texto del tema */
            font-weight: 500;
        }
 .topic  strong {
            color:  #0d5463;
	 font-size: 18px;
        }
html, body {
    min-height: 100%; /* Asegura que html y body ocupen el 100% de la altura de la ventana */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

#layoutAuthentication {
    height: 100%; /* Asegura que este contenedor principal también ocupe el 100% */
    display: flex; /* Utiliza flexbox para controlar la distribución de los elementos hijos */
    flex-direction: column; /* Coloca los elementos hijos en una columna */
}

#layoutAuthentication_content {
    flex-grow: 1; /* Permite que el contenido principal crezca y ocupe el espacio disponible */
    overflow-y: auto; /* Permite el scroll solo en este contenedor si el contenido de los dos ".container" lo supera */
}

.container2 {
    max-height: calc(100vh - 200px); /* Ajusta esta altura. 100vh es el 100% de la altura de la ventana. Resta el espacio de otros elementos. */
    overflow-y: auto; /* Habilita el scroll vertical solo para este div */
    overflow-x: hidden;
    padding-right: 15px; /* Para el espacio de la barra de scroll */
}

.news-card {
    min-height: 100%;
}

.py-4 {
	background-color: #bcc5d1;
    
}

@media (max-width: 767.98px) {
    h1 {
        font-size: 22px;
        margin-bottom: 15px;
    }

    h2 {
        font-size: 18px;
        margin-bottom: 20px;
    }

    li {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .date-info {
        margin-right: 0;
        padding-right: 0;
        border-right: 0;
        text-align: left;
        margin-bottom: 4px;
    }

    .topic-info {
        padding-left: 0;
    }

    .container2 {
        max-height: none;
        padding-right: 0;
    }

    html, body {
        overflow-y: auto;
    }

    #layoutAuthentication_content {
        padding-bottom: 2rem;
    }

    .news-card {
        height: auto !important;
    }
}