@charset "utf-8";
/* CSS Document */
/* --- ESTILOS GENERALES (ESCRITORIO) --- */
body { background-color: #225868; margin: 0; padding: 0; font-family: Arial, sans-serif; }
.container { width: 86%; margin: 20px auto; background-color: #FFF; box-sizing: border-box; }
.contenedor { width: 100%; overflow: hidden; background-color: #FFF; padding-bottom: 20px; box-sizing: border-box; }

/* Layout Escritorio */
.temas { width: 18%; float: left; padding: 10px 0 10px 30px; box-sizing: border-box; }
.contenido { width: 60%; float: left; padding: 0 2%; box-sizing: border-box; font-size: .9em; }
.bloque20 { width: 20%; float: left; text-align: center; box-sizing: border-box; }

/* Bloques y Tablas */
.bloque100 { width: 100%; float: left; clear: both; padding: 5px 0; }
.cabecera { width: 100%; color: #225868; font-size: 3.5em; font-weight: 700; text-align: center; text-decoration: underline; }
.encabezado_temas { font-size: 1.5em; color: #FFF; text-align: center; padding: 5px; }
.cajas { background-color: #FC3; text-align: center; }

table { width: 100%; border-collapse: collapse; }
td { vertical-align: top; font-weight: bold; text-align: center; padding: 5px; }
/* Color general de los enlaces en negro */
/* 1. Todos los enlaces en NEGRO y NEGRITA por defecto */
a:link, a:visited { 
    text-decoration: none; 
    color: #000000 !important; 
    font-weight: bold !important; 
}

/* 2. El enlace activo (el azul que ya tenías en el HTML) */
/* Mantenemos el color azul pero nos aseguramos de que sea muy grueso (900) */
a[style*="color:#225868"], 
a[style*="color: #225868"] { 
    color: #225868 !important; 
    font-weight: 900 !important; 
}

/* 3. El efecto al pasar el ratón (Hover) */
a:hover { 
    text-decoration: none; 
    color: #900000 !important; 
}

/* --- RESPONSIVE: MÓVIL (MÁXIMO 800PX) --- */
/* =========================================================
   RESPONSIVE: MÓVIL (MÁXIMO 800PX) 
   Fusión de estilosmovil.css con ajustes de integridad
   ========================================================= */
@media (max-width: 800px) {
    /* 1. Reset de Fondo y Contenedores */
    body { background-color: #FFF; overflow-x: hidden; }
    
    .container { 
        width: 100% !important; 
        margin: 0 !important; 
        padding: 0 !important; 
        border: none !important;
        box-shadow: none !important;
    }
    
    .contenedor { 
        width: 100% !important; 
        padding: 5px 0 !important; 
    }

    /* 2. Reordenación: Temas arriba, Contenido debajo */
    .temas { 
        width: 100% !important; 
        float: none !important; 
        padding: 15px !important; 
        text-align: center !important; 
        border-bottom: 2px solid #F8B900;
        box-sizing: border-box;
    }
    
    .temas p { 
        margin-bottom: 10px !important; 
        padding: 0 !important;
        font-size: 1.1em;
    }

    .contenido { 
        width: 100% !important; 
        float: none !important; 
        padding: 5px 2px !important; /* Pegamos al borde izquierdo */
        box-sizing: border-box;
    }

    /* 3. Integridad de Tablas (Fiel a la foto) */
    .contenido table { 
        display: table !important; /* Mantenemos estructura de tabla */
        width: 100% !important; 
        margin-left: 0 !important;
        border-spacing: 0 !important; /* Ganamos espacio vital */
        border-collapse: collapse;
    }

    .contenido td { 
        display: table-cell !important; 
        padding: 2px !important; /* Espacio mínimo entre iconos */
        vertical-align: top;
        text-align: center;
        word-wrap: break-word; /* Evita que textos largos ensanchen la tabla */
    }

    /* 4. Ajuste de imágenes y textos de los iconos */
    .contenido td img {
        width: 100% !important; /* Aprovecha el ancho de la celda */
        max-width: none !important; 
        height: auto !important;
        display: block;
        margin: 0 auto;
    }

    .contenido td a {
        font-size: 0.72em !important; /* Tamaño óptimo para que quepan descripciones */
        line-height: 1.1;
        display: block;
        margin-top: 4px;
        font-weight: bold;
    }

    /* 5. Cabeceras y bloques especiales */
    .cabecera { 
        font-size: 1.8em !important; 
        text-decoration: underline; 
        margin: 15px 0 !important; 
    }

    .encabezado_temas { 
        font-size: 1.1em !important; 
        padding: 8px 4px !important; 
    }

    .cajas { 
        font-size: 0.9em !important; 
        padding: 5px !important;
        border: 1px solid #000; /* Resalta el bloque amarillo */
    }

    /* 6. Bloques inferiores (Otros cursos) */
    .bloque20, .bloque100 { 
        width: 100% !important; 
        float: none !important; 
        margin: 10px 0 !important;
        padding: 0 !important;
        text-align: center;
    }

    .bloque20 img {
        width: 80% !important; /* Para que los banners de otros cursos no sean gigantes */
        margin: 0 auto;
    }

    /* 7. Cookies adaptadas */
    .cookiesms { 
        width: 100% !important; 
        height: auto !important; 
        padding: 10px !important; 
        font-size: 0.9em !important; 
        position: static !important; /* Evita que tape contenido en móviles pequeños */
    }
    .cookies2 { display: none; }
	/* --- AJUSTE FINO PARA LOS BANNERS DE CURSOS (2º, 3º, 4º) --- */
    
    /* Buscamos los bloques 20 que están en la zona de contenido */
    .contenido .bloque20 {
        width: 23% !important; /* Forzamos que ocupen menos de una cuarta parte */
        float: left !important; /* Los obligamos a flotar a la izquierda para que sigan en línea */
        margin: 5px 1% !important; /* Un poco de separación entre ellos */
        display: block !important;
        height: auto !important;
    }

    /* Aseguramos que las imágenes de esos bloques se adapten al 23% */
    .contenido .bloque20 img {
        width: 100% !important;
        height: auto !important;
        display: block;
        margin: 0 auto;
    }

    /* Limpiamos el float después de los 4 bloques para que lo que venga debajo no suba */
    .contenido .bloque20:last-child:after {
        content: "";
        display: table;
        clear: both;
    }
}