/* Navegación Secundaria */
.secondary-navi {
    background-color: #0056b3; /* Azul más oscuro para la navegación secundaria */
    padding: 10px 20px;
    margin-top: 20px;
    text-align: center;
}

.secondary-navi ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Permitir que los elementos se envuelvan en pantallas más pequeñas */
    gap: 20px;
}

.secondary-navi li {
    position: relative;
}

.secondary-navi li a {
    color: #fff;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.secondary-navi li a:hover {
    background-color: #007bff; /* Azul más claro al pasar el ratón */
}



/* Estilos para el contenedor de contenido dinámico */
#content-display-area {
    padding: 40px;
    margin: 20px auto;
    max-width: 900px; /* Aumentar el ancho máximo para mejor visualización lado a lado */
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    text-align: left; /* Alinea el texto del contenido a la izquierda por defecto */
}

#content-display-area h2 {
    text-align: center; /* Centra solo el título principal de la sección */
    margin-bottom: 30px;
}

/* Contenedor Flexbox para la imagen y el texto */
.content-with-image {
    display: flex; /* Habilita Flexbox */
    align-items: flex-start; /* Alinea los ítems al inicio del eje cruzado (arriba) */
    gap: 30px; /* Espacio entre la imagen y el texto */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    margin-bottom: 40px; /* Espacio debajo de este bloque */
}

/* Estilos para la imagen dentro del contenido */
.content-with-image .content-image {
    width: 500px; /* Ancho fijo para la imagen */
    height: 300px; /* Mantiene la proporción */
    border-radius: 8px; /* Bordes ligeramente redondeados */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Sombra suave */
    flex-shrink: 0; /* Evita que la imagen se encoja si no hay espacio */
    text-align: justify;
}

/* Estilos para el texto dentro del contenido */
.content-with-image .content-text {
    flex-grow: 1; /* Permite que el texto ocupe el espacio restante */
    min-width: 250px; /* Asegura que el texto tenga un ancho mínimo antes de envolver */
    text-align: justify;
}

/* Media Query para responsividad: en pantallas pequeñas, la imagen va encima del texto */
@media (max-width: 768px) {
    .content-with-image {
        flex-direction: column; /* Apila la imagen y el texto verticalmente */
        align-items: center; /* Centra la imagen y el texto al apilarlos */
    }

    .content-with-image .content-image {
        width: 100%; /* La imagen ocupa todo el ancho */
        max-width: 300px; /* Ancho máximo para la imagen en móvil */
        margin-bottom: 20px; /* Espacio extra entre la imagen y el texto apilados */
    }

    .content-with-image .content-text {
        text-align: center; /* Centra el texto en móviles */
    }
}


/* Clase para imágenes de contenido con buena vista */
.content-image-responsive {
    max-width: auto; /* Asegura que la imagen no se desborde de su contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Elimina el espacio extra debajo de la imagen (común en img) */
    margin: 20px auto; /* Centra la imagen horizontalmente y añade margen vertical */
    border-radius: 8px; /* Bordes ligeramente redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para darle profundidad */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave para efectos hover */
}

.content-image-responsive:hover {
    transform: translateY(-5px); /* Pequeño levantamiento al pasar el ratón */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra un poco más pronunciada al pasar el ratón */
}


.content-section {
    padding: 20px;
    background-color: #ffffff; /* Fondo blanco para el contenido */
    border-radius: 10px; /* Bordes redondeados en el contenedor principal */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra suave para el contenedor */
    margin-bottom: 30px; /* Espacio debajo de la sección */
}

/* Estilos para la tabla de capacitación */
.tabla-capacitacion {
    width: 100%; /* La tabla ocupa todo el ancho disponible */
    border-collapse: collapse; /* Colapsa los bordes de las celdas para una apariencia limpia */
    margin-top: 25px; /* Espacio superior para separar del texto */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente moderna y legible */
    font-size: 0.95em; /* Tamaño de fuente adecuado */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Sombra sutil para toda la tabla */
    border-radius: 8px; /* Bordes redondeados para la tabla completa */
    overflow: hidden; /* Asegura que los bordes redondeados se apliquen bien */
}

/* Estilos para las celdas de encabezado y datos */
.tabla-capacitacion th,
.tabla-capacitacion td {
    border: 1px solid #e0e0e0; /* Bordes delgados y claros para todas las celdas */
    padding: 12px 15px; /* Espaciado interno generoso para las celdas */
    text-align: left; /* Alineación del texto a la izquierda */
    vertical-align: top; /* Alineación vertical del contenido en la parte superior */
}

/* Estilos específicos para los encabezados (th) */
.tabla-capacitacion th {
    background-color: #4CAF50; /* Un verde institucional, puedes cambiarlo por tu color de marca */
    color: #ffffff; /* Texto blanco en el encabezado */
    font-weight: 600; /* Un poco más de negrita */
    text-transform: uppercase; /* Texto en mayúsculas para los encabezados */
    letter-spacing: 0.5px; /* Pequeño espaciado entre letras */
}

/* Estilos para filas alternas (rayas de cebra) para mejor legibilidad */
.tabla-capacitacion tbody tr:nth-child(even) {
    background-color: #f8f8f8; /* Fondo gris muy claro para filas pares */
}

/* Estilo al pasar el ratón por las filas */
.tabla-capacitacion tbody tr:hover {
    background-color: #eef7ee; /* Un verde muy suave al pasar el ratón */
    cursor: pointer; /* Cambia el cursor para indicar que es interactivo */
}

/* Estilo para la primera columna (ORDEN) */
.tabla-capacitacion td:first-child,
.tabla-capacitacion th:first-child {
    text-align: center; /* Centrar el número de orden */
    width: 60px; /* Ancho fijo para la columna de orden */
}

/* Ajustes para el texto dentro de la columna TEMA para mejor lectura */
.tabla-capacitacion td:nth-child(2) {
    line-height: 1.6; /* Mayor altura de línea para el contenido del tema */
}

/* Media Queries para Responsividad (adaptación a pantallas pequeñas) */
@media screen and (max-width: 768px) {
    .tabla-capacitacion {
        border-radius: 0; /* Elimina bordes redondeados en móviles para evitar problemas de visualización */
        box-shadow: none; /* Elimina la sombra en móviles */
    }

    .tabla-capacitacion thead {
        display: none; /* Oculta el encabezado de la tabla en pantallas pequeñas */
    }

    .tabla-capacitacion tr {
        margin-bottom: 15px; /* Espacio entre las "filas" transformadas */
        display: block; /* Cada fila se comporta como un bloque */
        border: 1px solid #ddd; /* Borde alrededor de cada bloque de fila */
        border-radius: 8px; /* Bordes redondeados para cada fila-bloque */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Sombra para cada fila-bloque */
        overflow: hidden; /* Asegura que los bordes redondeados se apliquen bien */
    }

    .tabla-capacitacion td {
        border-bottom: 1px solid #eee; /* Borde inferior para separar los datos dentro de cada bloque de fila */
        display: block; /* Cada celda se comporta como un bloque */
        text-align: right; /* Alinea el contenido de la celda a la derecha */
        padding-left: 50%; /* Espacio para la etiqueta de encabezado (data-label) */
        position: relative;
    }

    .tabla-capacitacion td:last-child {
        border-bottom: 0; /* Elimina el borde inferior de la última celda en cada fila-bloque */
    }

    .tabla-capacitacion td:before {
        content: attr(data-label); /* Muestra el texto del atributo data-label como una etiqueta */
        position: absolute;
        left: 15px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #555; /* Color para las etiquetas */
    }
}


/* Estilos para el botón "Entre Aquí" */
.banner-button {
    background-color: #FFD700; /* Color amarillo dorado */
    color: #333; /* Texto gris oscuro para un buen contraste */
    padding: 10px 20px; /* **Aumenta el relleno:** Un poco más de aire para el clic */
    border: none; /* Sin borde */
    border-radius: 30px; /* Bordes muy redondeados (tipo píldora) */
    cursor: pointer; /* Cambia el cursor para indicar que es clicable */
    font-size: 2em; /* Fuente: Puedes ajustarla entre 0.8em y 1em según tu menú */
    font-weight: bold; /* Texto en negrita */
    text-transform: uppercase; /* Texto en mayúsculas */
    letter-spacing: 0.5px; /* Espaciado entre letras */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* **Sombra sutil:** Para darle un poco de relieve base */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Transiciones suaves para todos los efectos */
    display: inline-block; /* Asegura que el padding y margin funcionen correctamente */
    margin-top: 20px; /* Margen superior (si se usa fuera de top-header-bar) */
}

/* Estilos al pasar el ratón por encima del botón */
.banner-button:hover {
    background-color: #e0b000; /* **Amarillo más oscuro:** Un cambio sutil de fondo */
    color: #FF0000; /* Color de texto rojo al pasar el ratón */
    transform: translateY(-2px); /* **Ligero levantamiento:** Da sensación de interactividad */
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2); /* **Sombra más pronunciada:** Refuerza el levantamiento */
}

/* Estilos al hacer clic en el botón */
.banner-button:active {
    transform: translateY(0); /* Vuelve a su posición original al hacer clic */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra más pequeña para un efecto de "presionado" */
    background-color: #cc9900; /* Un amarillo aún más oscuro */
    color: #FF0000; /* Mantiene el texto rojo o puedes cambiarlo si quieres */
}

/* --- Ajustes específicos para el botón dentro de .top-header-bar --- */
/* (Para que sea compacto en la barra superior, pero mantenga la UX mejorada) */
.top-header-bar .banner-button {
    margin: 0; /* Elimina márgenes externos si los tenía definidos para otra ubicación */
    padding: 8px 15px; /* Ajusta el padding para que sea más compacto en el header */
    font-size: 0.9em; /* Ajusta el tamaño de fuente si lo deseas más pequeño en el header */
    box-shadow: none; /* En la barra superior, puedes mantenerlo plano si deseas */
    /* Si quieres la sombra sutil en la barra superior, quita la línea 'box-shadow: none;' de aquí */
}

.top-header-bar .banner-button:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Sombra sutil al pasar el ratón en la barra superior */
    transform: translateY(-1px); /* Ligero levantamiento en la barra superior */
}

.main-footer {
    background-color: var(--bg-dark);
    color: var(--text-light);
    padding: 10px 0;
    text-align: center;
    border-top: 2px solid var(--accent-red); /* Cambiado */
}

.main-footer p {
    margin: 5px 0;
    font-size: 0.9em;
}