/* =========================================================================
   ESTILOS DE LA VISTA catalogo_formacion.php
   Generado al sacar los estilos en linea de los .php (atributos style y
   bloques <style>). Solo los carga esta vista
   (partesuperior.php enlaza css/paginas/<nombre del script>.css si existe).
   Las clases ec-N / ev-<vista>-N sustituyen a un style="..." concreto. Sus
   declaraciones llevan !important porque el estilo en linea ganaba a cualquier
   regla normal; no lo llevan display/visibility/opacity (las cambia jQuery con
   .show()/.hide()) ni las propiedades en las que ya habia una regla !important
   que le ganaba al estilo en linea. En los <a> sin href ni class se usa
   data-estilo="..." (una class anularia a:not([class]) de Bootstrap).
   ========================================================================= */

/* ---------- Antes bloque <style> de catalogo_formacion.php ---------- */
	#internacional_mapa img{max-width:100%;height:auto;}

	/* --- Catálogo de formación (filtros + cards de curso) --- */

	/* Filtro por ÁREA (icono + nombre en linea). areas -> areas_codigos -> cursos_codigos */
	.areas-formacion-filtro{
		display:flex;flex-wrap:wrap;gap:6px 26px;
		justify-content:center;align-items:center;
		border-bottom:1px solid var(--sr-yellow);
		padding:0 0 14px;margin:25px 0 0;
	}
	/* El icono se alinea por su base con el texto: las imagenes traen espacio
	   blanco en la parte superior y asi no se nota descentrado. */
	.areas-formacion-filtro .area-filtro{
		display:inline-flex;align-items:flex-end;gap:4px;
		background:none;border:none;outline:none;
		padding:6px 2px;cursor:pointer;
		color:var(--sr-yellow);opacity:.8;
		font-size:.8rem;font-weight:600;line-height:1;
		text-transform:uppercase;letter-spacing:.3px;
		transition:all .2s ease;
	}
	/* !important porque #internacional_mapa img fuerza height:auto */
	.areas-formacion-filtro .area-filtro img{
		width:34px!important;height:34px!important;
		object-fit:contain;object-position:bottom;
		display:block;flex:0 0 auto;
		align-self:flex-end;margin:0;
	}
	/* El texto apoya en la base de la imagen */
	.areas-formacion-filtro .area-filtro span{
		display:inline-block;align-self:flex-end;
	}
	.areas-formacion-filtro .area-filtro:hover{opacity:1;}
	.areas-formacion-filtro .area-filtro:hover span{
		text-decoration:underline;text-underline-offset:4px;
	}
	/* El area activa se marca con subrayado, manteniendo el color */
	.areas-formacion-filtro .area-filtro.active{opacity:1;}
	.areas-formacion-filtro .area-filtro.active span{
		font-weight:800;
		text-decoration:underline;text-underline-offset:4px;
		text-decoration-thickness:2px;
	}
	/* En movil el filtro se encogia (0.72rem y iconos de 28px) buscando que
	   cupieran mas por fila, y quedaba diminuto y dificil de pulsar. Ahora se
	   deja a un tamano comodo: si no caben, bajan de linea. */
	@media(max-width:767px){
		/* En rejilla en vez de en linea: cada area ocupa una celda de 150px
		   como minimo, asi que caben dos por fila y solo una en las pantallas
		   mas estrechas. Todas quedan alineadas entre si, que en flex con
		   wrap dependia de lo largo que fuera cada nombre. */
		.areas-formacion-filtro{
			display:grid;
			grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
			gap:2px 14px;
			padding-bottom:16px;
			justify-content:stretch;
		}
		.areas-formacion-filtro .area-filtro{
			font-size:.92rem;
			gap:6px;
			padding:9px 2px;
			width:100%;
			justify-content:flex-start;
			text-align:left;
		}
		.areas-formacion-filtro .area-filtro img{width:44px!important;height:44px!important;}

		/* Las pestanas de nivel, con mas separacion y area de toque */
		.niveles-formacion-tabs{gap:4px 28px;}
		.niveles-formacion-tabs .nivel-tab{
			font-size:1rem;
			padding:12px 4px;
		}
	}

	/* Filtro por nivel de certificación (pestañas con subrayado) */
	.niveles-formacion-tabs{
		display:flex;flex-wrap:wrap;gap:10px 40px;justify-content:center;
		border-bottom:1px solid #ddd;margin:18px 0 30px;
	}
	.niveles-formacion-tabs .nivel-tab{
		padding:10px 5px;font-weight:700;color:#7a7a7a;letter-spacing:1px;font-size:.9rem;
		cursor:pointer;border-bottom:3px solid transparent;text-transform:uppercase;
		background:none;border-top:none;border-left:none;border-right:none;
		outline:none;transition:color .2s ease;
	}
	.niveles-formacion-tabs .nivel-tab:hover{color:var(--sr-dark);}
	.niveles-formacion-tabs .nivel-tab.active,
	.niveles-formacion-tabs .nivel-tab.active:focus,
	.niveles-formacion-tabs .nivel-tab.active:hover{
		color:var(--sr-dark)!important;
		border-bottom:3px solid var(--sr-yellow)!important;
	}

	/* Grid propio: 3 por fila (no depende de .normas-card display:contents) */
	.cursos-grid{display:flex;flex-wrap:wrap;margin:0 -10px;}
	.cursos-grid .curso-col{width:33.333%;padding:0 10px;box-sizing:border-box;}
	@media(max-width:991px){.cursos-grid .curso-col{width:50%;}}
	@media(max-width:575px){.cursos-grid .curso-col{width:100%;}}

	/* Card apilada: imagen arriba, título, duración y botón debajo */
	.card-curso{
		background:#fff;border-radius:8px;overflow:hidden;
		box-shadow:0 6px 22px rgba(0,0,0,.15);
		margin:10px 0;display:flex;flex-direction:column;height:100%;
		position:relative;cursor:pointer;
		transition:box-shadow .2s ease,transform .2s ease;
	}
	.card-curso:hover{
		box-shadow:0 10px 28px rgba(0,0,0,.22);transform:translateY(-3px);
	}
	/* Enlace que cubre toda la tarjeta: la hace clickable por completo */
	.card-curso .curso-link-overlay{
		position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;
	}
	.card-curso .curso-img{
		width:100%;height:180px;object-fit:cover;display:block;
	}
	.card-curso .card-body{
		padding:18px 16px;display:flex;flex-direction:column;flex:1 1 auto;
	}
	.card-curso h4{
		font-size:1.05rem;line-height:1.3;color:var(--sr-dark);
		font-weight:700;margin:0 0 12px;
	}
	.card-curso .curso-duracion{
		color:var(--sr-yellow)!important;font-weight:700;margin:0 0 4px!important;
	}
	/* Codigo del curso: separado de la duracion y con forma de etiqueta, para
	   que se lea como un dato aparte y no como una linea mas del texto. */
	.card-curso .curso-codigo{
		display:inline-block;
		margin:12px 0 16px!important;
		padding:0;
		color:#333f4f!important;
		font-weight:800;
		font-size:.82rem;
		letter-spacing:.4px;
		text-transform:uppercase;
	}
	.card-curso .btn-mas-info{
		align-self:flex-end;margin-top:auto;white-space:nowrap;
		background-color:#cfcfcf;border:none;color:#fff;
		padding:6px 20px;border-radius:4px;text-decoration:none;font-size:.82rem;
		display:inline-flex;align-items:center;justify-content:center;
		text-align:center;line-height:1.2;
		position:relative;z-index:3;
		transition:background-color .2s ease;
	}
	.card-curso:hover .btn-mas-info,
	.card-curso .btn-mas-info:hover{background-color:var(--sr-yellow);color:#fff;}
	.cursos-grid .curso-col{display:flex;margin-bottom:26px;}
	.cursos-sin-resultados{
		width:100%;text-align:center!important;
		background:none;border:none;
		color:#8a8a8a!important;font-size:1rem!important;font-weight:600!important;
		padding:38px 20px!important;margin:10px 0 20px!important;
	}
	.cursos-sin-resultados:before{
		content:"\f19d";font-family:"Font Awesome 5 Free";font-weight:900;
		display:block;font-size:1.8rem;color:var(--sr-yellow);margin-bottom:12px;
	}

	.cursos-cargar-mas-wrap{text-align:center;margin:10px 0 20px;}
	.btn-cargar-mas{
		background-color:var(--sr-yellow);border:none;color:#fff;
		font-weight:700;text-transform:uppercase;letter-spacing:.5px;
		padding:12px 36px;
		border-radius:6px;              /* cuadrado con las esquinas redondeadas */
		cursor:pointer;font-size:.85rem;
		transition:opacity .2s ease, transform .15s ease;
	}
	.btn-cargar-mas:hover{opacity:.9;transform:translateY(-2px);}
	.btn-cargar-mas:active{transform:translateY(0);}