/**
 * Aviso de GRATUIDAD y prohibición de venta — componente compartido.
 *
 * Se usa en las tres superficies públicas (lista de certificaciones, landing de cada certificación y
 * curso MUN 101), que tienen shells distintos (.fc-shell vs .mr-c101). Por eso vive en su PROPIO archivo,
 * autocontenido y con variables propias `--fcfree-*`: se encola en ambas rutas sin duplicar reglas ni
 * depender de certificaciones.css o mun101.css.
 *
 * Dos piezas: la barra FIJA (sticky, siempre a la vista) y la tarjeta con el texto completo.
 */
:root {
	--fcfree-navy: #0D1E46;
	--fcfree-navy-2: #16264f;
	--fcfree-gold: #b78318;
	--fcfree-ink: #1f2937;
}

/* ---------------------------------------------------------------- Barra fija (sticky) */
.fc-free-bar {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	padding: 10px 14px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--fcfree-navy) 0%, var(--fcfree-navy-2) 100%);
	border: 1px solid rgba(183, 131, 24, .55);
	box-shadow: 0 10px 28px rgba(13, 30, 70, .22);
	color: #fff;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 13.5px;
	line-height: 1.35;
}
.fc-free-bar-ic { flex: 0 0 auto; display: grid; place-items: center; color: var(--fcfree-gold); }
.fc-free-bar-txt { flex: 1 1 auto; min-width: 0; }
.fc-free-bar-txt strong { font-weight: 800; }
.fc-free-bar-long { color: rgba(255, 255, 255, .82); font-weight: 600; }

/* El enlace de reporte gana a los `a { color }` de cualquiera de los dos shells. */
.fc-free-bar .fc-free-bar-cta,
.fc-free-bar .fc-free-bar-cta:visited {
	flex: 0 0 auto;
	padding: 6px 14px;
	border-radius: 999px;
	/* Blanco sobre #8a5c00 = 5,81:1; sobre el dorado de marca #b78318 daba 3,35:1 (AA pide 4,5:1 en 12,5px). */
	background: #8a5c00;
	color: #fff !important;
	font-weight: 800;
	font-size: 12.5px;
	text-decoration: none;
	white-space: nowrap;
}
.fc-free-bar .fc-free-bar-cta:hover { background: #6f4900; }

/* Dentro del curso MUN 101 el encabezado (.mr-c101-bar) ya es sticky en top:0 con z-index 20, así que la
   barra se pega DEBAJO de él (65px de alto en escritorio) en vez de taparlo. El z-index menor que el del
   encabezado es el seguro: si algún día el encabezado creciera, la barra pasa por detrás y no lo oculta. */
.fc-free-bar--curso { top: 65px; z-index: 19; }

/* ---------------------------------------------------------------- Tarjeta completa */
.fc-free-notice {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 18px;
	padding: 18px 20px;
	border-radius: 18px;
	background: #fffdf6;
	border: 1.6px solid #ecdcb3;
	border-left: 5px solid var(--fcfree-gold);
	box-shadow: 0 12px 32px rgba(13, 30, 70, .07);
	color: var(--fcfree-ink);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	text-align: left;
}
.fc-free-notice-ic {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--fcfree-navy);
	color: var(--fcfree-gold);
}
.fc-free-notice-body { min-width: 0; }
.fc-free-notice-kicker {
	margin: 0 0 3px;
	color: #8a5c00; /* texto: 5,57:1 sobre #fffdf6; el dorado de marca daba 3,29:1 */
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.fc-free-notice-title {
	margin: 0 0 8px;
	color: var(--fcfree-navy);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
}
.fc-free-notice-text,
.fc-free-notice-report { margin: 0; font-size: 14.5px; line-height: 1.65; }
.fc-free-notice-text strong { color: var(--fcfree-navy); font-weight: 800; }
.fc-free-notice-report {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed #e4d3ab;
	font-weight: 600;
}
.fc-free-notice-report a,
.fc-free-notice-report a:visited {
	color: var(--fcfree-navy) !important;
	font-weight: 800;
	text-decoration: underline;
	overflow-wrap: anywhere;
}

/* MUN 101 (1.106.0): invitación a pedir el convenio. Botón navy con texto blanco (15,98:1), sin dorado nuevo. */
.fc-free-notice-convenio {
	margin: 10px 0 0;
	padding: 12px 14px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid #d5dbe8;
	font-size: 14.5px;
	line-height: 1.65;
}
.fc-free-notice-convenio strong { display: block; color: var(--fcfree-navy); font-weight: 800; }
.fc-free-notice .fc-free-notice-cta,
.fc-free-notice .fc-free-notice-cta:visited {
	display: table; /* en su propia línea: un inline-block abría un hueco entre las líneas del párrafo */
	margin-top: 10px;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--fcfree-navy);
	color: #fff !important;
	font-weight: 800;
	font-size: 13.5px;
	text-decoration: none;
}
.fc-free-notice .fc-free-notice-cta:hover { background: var(--fcfree-navy-2); }
.fc-free-notice .fc-free-notice-cta:focus-visible { outline: 3px solid var(--fcfree-navy); outline-offset: 3px; }
.fc-catalogo-convenio { margin: 10px 2px 0; font-size: 14px; line-height: 1.6; }
.fc-catalogo-convenio a { font-weight: 800; text-decoration: underline; }

/* ---------------------------------------------------------------- Móvil */
@media (max-width: 720px) {
	.fc-free-bar { gap: 8px; padding: 9px 11px; font-size: 12.5px; }
	.fc-free-bar-long { display: none; } /* en pantalla chica basta con «gratuita» + el botón */
	.fc-free-bar--curso { top: 91px; } /* el encabezado del curso se apila en dos líneas en móvil */
	.fc-free-bar .fc-free-bar-cta { padding: 6px 12px; font-size: 12px; }
	.fc-free-notice { gap: 12px; padding: 16px; }
	.fc-free-notice-ic { width: 38px; height: 38px; border-radius: 12px; }
	.fc-free-notice-ic svg { width: 21px; height: 21px; }
	.fc-free-notice-title { font-size: 18px; }
	.fc-free-notice-text, .fc-free-notice-report, .fc-free-notice-convenio { font-size: 14px; }
}

/* =============================================================================
 * DIS-13 · CONTRASTE REFORZADO Y COLORES FORZADOS
 * -----------------------------------------------------------------------------
 * Este componente se encola en los DOS shells (.fc-shell y .mr-c101), así que su
 * refuerzo vive aquí y no en las hojas de cada shell: si viviera allí, una de las
 * dos superficies se quedaría sin él.
 *
 * Ratios con la fórmula de luminancia relativa de WCAG 2.1, contra el fondo REAL:
 *   · `.fc-free-bar-cta` es texto blanco de 12,5px en negrita sobre
 *     var(--fcfree-gold) #b78318 = 3,3476:1, por debajo del 4,5:1 de AA. El
 *     relleno pasa a #8a5c00 = 5,8147:1 contra el mismo blanco.
 *   · `.fc-free-notice-kicker` el mismo dorado como texto sobre el fondo real de
 *     la tarjeta (#fffdf6) = 3,2891:1 → #8a5c00 = 5,7131:1.
 *   · `.fc-free-notice` borde #ecdcb3 sobre #fffdf6 = 1,3350:1 y el separador
 *     `.fc-free-notice-report` #e4d3ab = 1,4526:1 → var(--fcfree-navy) #0D1E46
 *     = 15,9788:1 sobre ese mismo fondo.
 *   · `.fc-free-bar` borde rgba(183,131,24,.55), compuesto sobre el navy antes de
 *     medir (#6A562D), = 2,3026:1 → var(--fcfree-gold) sin alfa = 4,8582:1.
 *   · Los dos iconos (`.fc-free-bar-ic` y `.fc-free-notice-ic`) son dorado sobre
 *     navy: 4,8582:1 en un extremo del degradado y 4,4045:1 en el otro. Como
 *     contenido no textual el umbral es 3:1, así que YA pasaban y no se tocan.
 * ========================================================================== */
@media (prefers-contrast: more) {
	.fc-free-bar { border-color: var(--fcfree-gold); border-width: 2px; }
	.fc-free-bar .fc-free-bar-cta, .fc-free-bar .fc-free-bar-cta:visited { background: #8a5c00; }
	.fc-free-bar .fc-free-bar-cta:hover { background: #6f4900; }
	.fc-free-bar .fc-free-bar-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
	.fc-free-notice { border-color: var(--fcfree-navy); border-width: 2px; border-left-width: 6px; border-left-color: #8a5c00; }
	.fc-free-notice-kicker { color: #8a5c00; }
	.fc-free-notice-report { border-top-color: var(--fcfree-navy); }
	.fc-free-notice-report a:focus-visible { outline: 3px solid var(--fcfree-navy); outline-offset: 3px; }
}

/* En colores forzados el degradado de la barra y el relleno del botón de reporte
   se anulan: la barra deja de leerse como aviso y el botón deja de leerse como
   botón. Se reconstruyen con límites explícitos, y el riel izquierdo de la tarjeta
   —que hoy es un `border-left` dorado— se conserva engrosado, que es lo único que
   el navegador no aplana. */
@media (forced-colors: active) {
	.fc-free-bar { border: 1px solid CanvasText; }
	.fc-free-bar .fc-free-bar-cta, .fc-free-bar .fc-free-bar-cta:visited { border: 2px solid ButtonText; color: ButtonText !important; }
	.fc-free-notice { border: 1px solid CanvasText; border-left: 6px solid CanvasText; }
	.fc-free-notice-ic { border: 1px solid CanvasText; }
	.fc-free-bar .fc-free-bar-cta:focus-visible, .fc-free-notice-report a:focus-visible { outline: 3px solid Highlight; outline-offset: 3px; }
}