/* ==================================================================
   REDISEÑO VISUAL — ZONA PRIVADA DE ASOCIADO (inspirado en Alpha Cloud)
   Oleada 1: fundamentos (tokens) + "arriba del todo": botones/CTA
   (.ignite-btn/.ignite-cta), accesos rápidos de 3-4 columnas
   (.seccion_tres_columnas), bandas de título (.contenedor_cursos/
   .titulos), separadores de sección con foto de fondo unificados con
   el mismo estilo (.form_contacto_contenedor de diseno_contenido.php)
   y el nav superior (nav_Asociados.php).

   Regla del archivo: MISMO HTML, solo CSS nuevo. No se toca ningún
   .php ni ningún id/clase de la que dependa JS (modulos.js, nav.js,
   catalogo_cursos.js...) — se listan en el comentario de cada bloque.
   Se carga DESPUÉS de style.css/style_asociados.css/style_nav.css
   para ganar por cascada (orden de carga en servicios/index.php),
   igual que catalogo_cursos.css con el catálogo de cursos. Reutiliza
   --COLOR_PRINCIPAL/--COLOR_2/--bs-primary-rgb ya definidos en esas
   hojas en vez de fijar colores nuevos. ================================================================== */

:root {
	--asociado-radius-sm: 10px;
	--asociado-radius-md: 14px;
	--asociado-radius-lg: 20px;
	--asociado-shadow-soft: 0 12px 32px rgba(15, 23, 42, 0.08);
	--asociado-shadow-card: 0 24px 70px rgba(15, 23, 42, 0.14);
	--asociado-surface: #ffffff;
	--asociado-surface-soft: #f8fafc;
	--asociado-border: rgba(148, 163, 184, 0.28);
	--asociado-text: #0f172a;
	--asociado-text-soft: #64748b;
	--asociado-gradient: linear-gradient(135deg, var(--COLOR_PRINCIPAL) 0%, #004d6b 65%, #0076A5 100%);
}

/* ==================================================================
   BOTONES / CTA — .ignite-btn y .ignite-cta (definidas en style.css,
   34 y 8 usos respectivamente en toda la zona asociado: CTA "acceda a
   todas las aplicaciones", certificados universitarios, directorio,
   incidencias, enlaces_asociados, catalogos_comerciales...). Ningún
   JS engancha por estas clases (solo por id de cada botón concreto),
   así que redefinir su aspecto aquí no rompe nada. ================================================================== */
.ignite-cta {
	background: transparent;
	padding: 2.4em 0;
}

.ignite-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	min-height: 46px;
	padding: 1em 2em;
	color: #fff;
	border: none;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 0.03em;
	background: var(--asociado-gradient);
	border-radius: var(--asociado-radius-md);
	box-shadow: var(--asociado-shadow-soft);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ignite-btn:hover,
.ignite-btn:focus {
	color: #fff;
	border: none;
	transform: translateY(-2px);
	box-shadow: var(--asociado-shadow-card);
}

.ignite-btn:disabled,
.ignite-btn.disabled {
	color: #94a3b8;
	background: #e2e8f0;
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
}

/* ==================================================================
   ACCESOS RÁPIDOS DE 3-4 COLUMNAS — .seccion_tres_columnas (definida
   en style_asociados.css). Se usa 2 veces en zona_asociado.php:
   "Listado de cursos" (4 botones, ids boton_nav_enlace_oferta_generales/
   boton_nav_cursos_competencias/boton_nav_especialidades/
   boton_nav_cursos_system) y "Nuevos/actualizados/descatalogados" (3
   botones, ids cursos_nuevos/cursos_actualizados/cursos_eliminados).
   Esos ids los interceptan modulos.js y catalogo_cursos.js — no se
   tocan. Se conserva el patrón "primer botón = destacado, resto =
   .fondo_blanco" que ya existía (antes: relleno plano var(--COLOR_2)
   vs blanco; ahora: degradado de marca vs tarjeta blanca). ================================================================== */
.seccion_tres_columnas {
	margin: 0 0 2.2em;
	grid-column-gap: 1.2em;
	grid-row-gap: 1.2em;
}

.seccion_tres_columnas .hijo {
	border: 1px solid var(--asociado-border);
	border-radius: var(--asociado-radius-lg);
	background: var(--asociado-surface);
	box-shadow: var(--asociado-shadow-soft);
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.seccion_tres_columnas .hijo:hover {
	color: inherit;
	border-color: var(--COLOR_PRINCIPAL);
	transform: translateY(-3px);
	box-shadow: var(--asociado-shadow-card);
}

.seccion_tres_columnas .hijo .row,
.seccion_tres_columnas .hijo .row a {
	height: 100%;
	border-radius: var(--asociado-radius-lg);
}

.seccion_tres_columnas a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: 148px;
	padding: 1.6em 1.2em;
	text-align: center;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: #fff;
	background: var(--asociado-gradient);
}

.seccion_tres_columnas a i {
	font-size: 1.7em;
}

.seccion_tres_columnas a.fondo_blanco {
	background: var(--asociado-surface) !important;
	color: var(--asociado-text);
}

.seccion_tres_columnas a.fondo_blanco i {
	color: var(--COLOR_PRINCIPAL);
}

.seccion_tres_columnas a.fondo_blanco:hover {
	color: var(--COLOR_PRINCIPAL);
}

/* ==================================================================
   TÍTULOS DE SECCIÓN / SEPARADORES — deben diferenciarse claramente
   de los botones de acción (.ignite-btn: envíos de formulario, CTAs
   tipo "enviar", "acceder"...), que se quedan como píldora compacta
   centrada (bloque de más abajo). Los títulos/separadores, en cambio,
   van SIEMPRE con el degradado de marca a banda completa (borde a
   borde), sin caja/chip ni borde — como estaba `.contenedor_cursos`
   nada más aplicar el degradado (antes de convertirlo por error en un
   chip pequeño). Se unifican con el mismo tratamiento:
   - .contenedor_cursos ("PLATAFORMA DE TELEFORMACIÓN...", "INCLUIR EN
     SU WEB", "SCORM", "CALIDAD Y SEGUIMIENTO"/incidencias, y
     compartida con zona_tutores.php/catalogos_comerciales.php/2
     pantallas de ADMINISTRADOR).
   - h1.titulos ("Listado de cursos"/"Nuevos cursos...").
   - .form_contacto_contenedor (secciones/diseno_contenido.php:
     "SOCIAL MEDIA", "CERTIFICACIONES UNIVERSITARIAS", "DISEÑA TU
     CONTENIDO", "CALENDARIO DE FORMACIONES", y a mano en
     secciones/MODULO/directorio.php) — se sustituye la foto de fondo
     (.fondo_1/2/3, comprobado que solo se usan aquí) por el mismo
     degradado, en vez de quitarla sin más.
   - .videos_formacion h1.titulo ("VÍDEOS FORMATIVOS"; OJO: distinta de
     .social_media h1.titulo, que son subtítulos dentro de las 4
     tarjetas de Social Media y no se tocan, no son separador de
     sección).
   Ninguna de estas clases la usa JS por selector; tampoco se toca
   .scrolling_function_contenedor (target del scroll-spy de nav.js). ================================================================== */
.contenedor_cursos,
h1.titulos,
.form_contacto_contenedor,
.videos_formacion h1.titulo {
	background: var(--asociado-gradient) !important;
	box-shadow: var(--asociado-shadow-soft);
}

.contenedor_cursos {
	position: relative;
	padding: 2em 3em;
}

.contenedor_cursos h1,
.contenedor_cursos h4,
.contenedor_cursos h5 {
	color: #fff;
}

h1.titulos {
	display: block;
	position: relative;
	left: auto;
	transform: none;
	width: 100%;
	margin: 2.6em 0 1.4em;
	padding: 0.9em 1.2em;
	color: #fff;
	border: none;
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.15em;
	font-weight: 500;
	text-align: center;
}

.form_contacto_contenedor {
	padding: 1.6em 1.2em;
	margin: 2.6em 0 1.4em;
}

.form_contacto_contenedor h2 {
	margin: 0;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.15em;
	font-weight: 500;
}

.videos_formacion h1.titulo {
	margin: 0 0 1.4em;
	padding: 0.9em 1.2em;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.15em;
	font-weight: 500;
	text-align: center;
}

/* Barra divisoria negra entre "Listado de cursos" y "Nuevos cursos,
   actualizados y descatalogados" (zona_asociado.php), puramente
   decorativa y sin uso de JS — se retira a petición del usuario. */
.cambio_seccion {
	display: none;
}

/* ==================================================================
   ICONO DE EDICIÓN FLOTANTE — secciones/editar_section.php (icono de
   engranaje, visible solo para root/administrador con permiso). Antes
   era una imagen (icono_config.png) dentro de un <div
   class="contenedor_seccion_modificar"> que ocupaba su propia fila,
   normalmente lejos del título real de la sección. Ahora: icono
   FontAwesome minimalista, flotante en la esquina superior derecha de
   la sección (contenedor_cursos/h1.titulos, ya position:relative
   arriba; .seccion_carrousel_img ya es position:relative por ser un
   .carousel de Bootstrap). El wrapper .contenedor_seccion_modificar
   ya no se usa (se ha quitado de los .php al mover el include junto
   al título) salvo en catalogos_comerciales.php, donde se neutraliza
   aquí para que no deje hueco. Los ids (administrador_banner/
   administrador_listado_caducadosnuevos/administrador_comerciales/
   administrador_listado_cursos_tienda) no se tocan — los sigue
   mapeando catalogo_cursos.js. ================================================================== */
.contenedor_seccion_modificar {
	display: contents;
}

.editar_section {
	position: absolute;
	top: 10px;
	right: 14px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 1.05em;
	transition: background 0.18s ease, transform 0.25s ease;
}

.editar_section:hover {
	background: rgba(255, 255, 255, 0.35);
	color: #fff;
	transform: rotate(45deg);
}

/* ==================================================================
   NAV SUPERIOR — nav_Asociados.php (dos barras: nav.top-header con
   contacto/login, header.top-header con logo+menú), estilizadas en
   style_nav.css. Solo se retocan color/sombra/subrayado; la estructura
   de dropdowns (#dropdown-menu_1/2, .scrolling_function) la gestiona
   nav.js y no se toca. Los !important son necesarios porque las reglas
   originales también los usan (misma especificidad, gana la última
   cargada + !important). ================================================================== */
nav.top-header {
	background: var(--asociado-gradient) !important;
}

header.top-header {
	box-shadow: var(--asociado-shadow-soft) !important;
}

header.top-header .class_1 ul .menu-item a {
	position: relative;
	transition: color 0.18s ease;
}

header.top-header .class_1 ul .menu-item a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: var(--COLOR_PRINCIPAL);
	transform: scaleX(0);
	transition: transform 0.18s ease;
}

header.top-header .class_1 ul .menu-item a:hover::after,
header.top-header .class_1 ul .menu-item a.seleccionado_nav::after {
	transform: scaleX(1);
}