/* ==========================================================================
   Portal Licencia de Conducir CR — hoja de estilos completa
   Armado por herramientas/unir.py desde: base.css + componentes.css + portal.css + paginas.css + ux.css
   Version: 2.6 2026-10-18
   No editar este archivo a mano: edite las fuentes y vuelva a unir.
   Orden del CSS: 1) base (variables y estructura) 2) componentes 3) portal
   ========================================================================== */

/* ---------- base.css ---------- */
/* ============================================================================
   Portal Licencia de Conducir CR — BASE
   Tokens de diseño, reinicio, tipografía, contenedor 1300 px, accesibilidad y
   utilidades. Es el cimiento de TODAS las páginas del portal.
   Prefijo único: lc-  ·  Sin dependencias externas.
   ========================================================================== */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root {
	/* Marca */
	--lc-rojo: #c0281c;
	--lc-rojo-osc: #9e1f15;
	--lc-rojo-claro: #fdecea;
	--lc-azul: #12315c;
	--lc-azul-claro: #1a5298;
	--lc-azul-suave: #eef3fa;

	/* Neutros */
	--lc-tinta: #111827;
	--lc-tinta-2: #374151;
	--lc-gris: #5b6472;
	--lc-gris-claro: #8b93a1;
	--lc-linea: #e5e7eb;
	--lc-linea-fuerte: #cbd5e1;
	--lc-suave: #f6f7f9;
	--lc-suave-2: #eef0f4;
	--lc-blanco: #ffffff;

	/* Estados */
	--lc-ok: #047857;
	--lc-ok-suave: #e7f6f0;
	--lc-aviso: #b45309;
	--lc-aviso-suave: #fff7e6;
	--lc-error: #b91c1c;
	--lc-error-suave: #fdecec;

	/* Semántica de superficie */
	--lc-fondo: var(--lc-blanco);
	--lc-fondo-pagina: var(--lc-suave);
	--lc-superficie: var(--lc-blanco);
	--lc-superficie-2: var(--lc-suave);
	--lc-texto: var(--lc-tinta);
	--lc-texto-suave: var(--lc-gris);
	--lc-borde: var(--lc-linea);
	--lc-acento: var(--lc-rojo);
	--lc-acento-fondo: var(--lc-rojo);
	--lc-acento-fondo-hover: var(--lc-rojo-osc);
	--lc-acento-texto: #ffffff;
	--lc-enlace: var(--lc-azul-claro);

	/* Medidas */
	--lc-contenedor: 1300px;      /* escritorio: el ancho pedido */
	--lc-contenedor-estrecho: 780px;  /* lectura larga (manuales, artículos) */
	--lc-contenedor-ancho: 1440px;    /* piezas a sangre cuando haga falta */
	--lc-gutter: clamp(16px, 4vw, 32px);
	--lc-alto-cabecera: 72px;   /* la usan las barras pegajosas y los enlaces con # */

	/* Espaciado (escala de 4 px) */
	--lc-1: 4px;  --lc-2: 8px;  --lc-3: 12px; --lc-4: 16px; --lc-5: 24px;
	--lc-6: 32px; --lc-7: 48px; --lc-8: 64px; --lc-9: 96px;

	/* Tipografía */
	--lc-fuente: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--lc-fuente-titulo: var(--lc-fuente);
	--lc-fuente-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--lc-tam-base: clamp(16px, 0.55vw + 15px, 17.5px);
	--lc-interlinea: 1.65;
	--lc-medida: 72ch;            /* ancho cómodo de lectura */

	/* Formas y sombras */
	--lc-radio: 12px;
	--lc-radio-sm: 8px;
	--lc-radio-pill: 999px;
	--lc-sombra-sm: 0 1px 2px rgba(16, 24, 40, .06);
	--lc-sombra: 0 6px 20px rgba(16, 24, 40, .10);
	--lc-sombra-lg: 0 18px 44px rgba(16, 24, 40, .14);

	/* Movimiento y capas */
	--lc-transicion: .2s ease;
	--lc-z-cabecera: 100;
	--lc-z-menu: 110;
	--lc-z-flotante: 120;
	--lc-z-modal: 200;

	/* Esquema de color para los controles del navegador */
	color-scheme: light;
}

/* ── 2. Modo oscuro ──────────────────────────────────────────────────────── */
/* Se activa con la clase en <html>: .lc-oscuro (elegido) o .lc-auto (sistema). */
html.lc-oscuro,
html.lc-auto {
	color-scheme: light;
}
html.lc-oscuro {
	--lc-fondo: #0f172a;
	--lc-fondo-pagina: #0f172a;
	--lc-superficie: #16213c;
	--lc-superficie-2: #1d2947;
	--lc-suave: #1d2947;
	--lc-suave-2: #24314f;
	--lc-texto: #e8ecf5;
	--lc-texto-suave: #a9b7d0;
	--lc-gris: #a9b7d0;
	--lc-tinta: #f1f4fa;
	--lc-tinta-2: #dbe2ee;
	--lc-borde: #2c3a5c;
	--lc-linea: #2c3a5c;
	--lc-linea-fuerte: #3c4d75;
	--lc-blanco: #16213c;
	--lc-azul-suave: #1b2b4d;
	--lc-acento: #ff5a4d;
	--lc-enlace: #7fb4ff;
	color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
	html.lc-auto {
		--lc-fondo: #0f172a; --lc-fondo-pagina: #0f172a; --lc-superficie: #16213c;
		--lc-superficie-2: #1d2947; --lc-suave: #1d2947; --lc-suave-2: #24314f;
		--lc-texto: #e8ecf5; --lc-texto-suave: #a9b7d0; --lc-gris: #a9b7d0;
		--lc-tinta: #f1f4fa; --lc-tinta-2: #dbe2ee; --lc-borde: #2c3a5c; --lc-linea: #2c3a5c;
		--lc-linea-fuerte: #3c4d75; --lc-blanco: #16213c; --lc-azul-suave: #1b2b4d;
		--lc-acento: #ff5a4d; --lc-enlace: #7fb4ff;
		color-scheme: dark;
	}
}

/* ── 3. Reinicio ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; overflow-x: clip; }
body {
	margin: 0;
	background: var(--lc-fondo-pagina);
	color: var(--lc-texto);
	font-family: var(--lc-fuente);
	font-size: var(--lc-tam-base);
	line-height: var(--lc-interlinea);
	-webkit-font-smoothing: antialiased;
	/* Sin overflow-x en el cuerpo: dentro de Bricks abre un segundo
	   contenedor de scroll y el contenido queda con un hueco a la derecha. */
}
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
img { border-style: none; }
figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--lc-borde); margin: var(--lc-6) 0; }
[hidden] { display: none !important; }
::selection { background: var(--lc-rojo); color: #fff; }

/* ── 4. Tipografía ───────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--lc-fuente-titulo);
	color: var(--lc-tinta);
	line-height: 1.2;
	margin: 0 0 var(--lc-3);
	text-wrap: balance;
	font-weight: 800;
	letter-spacing: -.01em;
}
h1 { font-size: clamp(28px, 4.2vw, 46px); }
h2 { font-size: clamp(23px, 2.6vw, 33px); }
h3 { font-size: clamp(19px, 1.8vw, 24px); }
h4 { font-size: clamp(17px, 1.2vw, 20px); font-weight: 700; }
h5, h6 { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--lc-gris); }
p { margin: 0 0 var(--lc-4); }
p, li { max-width: var(--lc-medida); }
small, .lc-pequeno { font-size: .875em; }
strong, b { font-weight: 700; color: var(--lc-tinta); }
a { color: var(--lc-enlace); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--lc-acento); }
blockquote {
	margin: var(--lc-5) 0; padding: var(--lc-4) var(--lc-5);
	background: var(--lc-superficie-2); border-left: 4px solid var(--lc-acento);
	border-radius: 0 var(--lc-radio-sm) var(--lc-radio-sm) 0;
}
blockquote > :last-child { margin-bottom: 0; }
code, pre, kbd { font-family: var(--lc-fuente-mono); font-size: .92em; }
code { background: var(--lc-superficie-2); padding: .15em .4em; border-radius: 4px; }
pre { background: var(--lc-azul); color: #e8ecf5; padding: var(--lc-4); border-radius: var(--lc-radio-sm); overflow: auto; }
ul, ol { padding-left: 1.3em; }
li { margin: .3em 0; }
table { width: 100%; border-collapse: collapse; font-size: .95em; }
th, td { border: 1px solid var(--lc-borde); padding: 10px 12px; text-align: left; }
th { background: var(--lc-superficie-2); font-weight: 700; }

/* ── 5. Contenedor (1300 px) y retículas ─────────────────────────────────── */
.lc-contenedor {
	width: 100%; max-width: var(--lc-contenedor);
	margin-inline: auto; padding-inline: var(--lc-gutter);
}
.lc-contenedor--estrecho { max-width: var(--lc-contenedor-estrecho); }
.lc-contenedor--ancho { max-width: var(--lc-contenedor-ancho); }
.lc-seccion { padding-block: clamp(32px, 5vw, 64px); }
.lc-seccion--suave { background: var(--lc-superficie-2); }
.lc-seccion--marca { background: var(--lc-azul); color: #fff; }
.lc-seccion--marca h1, .lc-seccion--marca h2, .lc-seccion--marca h3 { color: #fff; }

.lc-rejilla { display: grid; gap: var(--lc-5); }
.lc-rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.lc-rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.lc-rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.lc-lateral { display: grid; gap: var(--lc-6); grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
@media (max-width: 1024px) { .lc-lateral { grid-template-columns: 1fr; } }
.lc-pila > * + * { margin-top: var(--lc-4); }
.lc-fila { display: flex; flex-wrap: wrap; gap: var(--lc-4); align-items: center; }
.lc-fila--entre { justify-content: space-between; }

/* ── 6. Accesibilidad ────────────────────────────────────────────────────── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--lc-azul-claro);
	outline-offset: 2px;
	border-radius: 4px;
}
html.lc-oscuro :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--lc-acento); }

.lc-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.lc-sr:focus, .lc-sr-foco:focus {
	position: fixed !important; top: 12px; left: 12px; z-index: var(--lc-z-modal);
	width: auto; height: auto; clip: auto; clip-path: none; margin: 0;
	padding: 12px 18px; background: var(--lc-blanco); color: var(--lc-texto);
	border: 3px solid var(--lc-azul-claro); border-radius: var(--lc-radio-sm);
	font-weight: 700; text-decoration: none; box-shadow: var(--lc-sombra);
}
/* Zonas táctiles cómodas (44 px) sin deformar la pieza */
.lc-btn, .lc-chip, .lc-tab, button, [role="button"], input[type="submit"], input[type="button"] {
	min-height: 44px;
}
.lc-icono-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
		transition-duration: .001ms !important; scroll-behavior: auto !important; }
	html { scroll-behavior: auto; }
}
html.lc-alto-contraste { --lc-texto-suave: #3f4756; --lc-gris: #3f4756; --lc-borde: #9aa3b2; }

/* ── 7. Utilidades ───────────────────────────────────────────────────────── */
.lc-oculto { display: none !important; }
@media (max-width: 860px) { .lc-solo-escritorio { display: none !important; } }
@media (min-width: 861px) { .lc-solo-movil { display: none !important; } }
.lc-centrado { text-align: center; }
.lc-centrado > p, .lc-centrado > ul, .lc-centrado > ol { margin-inline: auto; }
.lc-sin-lista { list-style: none; padding: 0; margin: 0; }
.lc-mt-0 { margin-top: 0 !important; }
.lc-mb-0 { margin-bottom: 0 !important; }
.lc-mb-4 { margin-bottom: var(--lc-4); }
.lc-mb-6 { margin-bottom: var(--lc-6); }
.lc-texto-suave { color: var(--lc-texto-suave); }
.lc-etiqueta-seccion {
	display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .12em;
	text-transform: uppercase; color: var(--lc-acento); margin-bottom: var(--lc-2);
}
.lc-ancla { scroll-margin-top: 96px; }   /* que los enlaces con # no queden bajo la cabecera */
.lc-sin-js .lc-necesita-js { display: none !important; }

/* ── 8. Impresión (manuales y guías) ─────────────────────────────────────── */
@media print {
	.lc-cabecera, .lc-pie, .lc-flotante, .lc-barra-progreso, .lc-migas, .lc-acciones { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	a { color: #000; text-decoration: underline; }
	.lc-contenedor { max-width: none; padding: 0; }
}

/* ==========================================================================
   MODO OSCURO — ajustes finos
   Los tonos de marca están pensados para fondo blanco: sobre fondo oscuro hay
   que aclarar los que se usan como TEXTO y dejar oscuro el que se usa como
   FONDO de botón (para que el texto blanco siga leyéndose).
   ========================================================================== */
html.lc-oscuro {
	--lc-acento: #ff8b80;
	--lc-acento-fondo: #b8271b;
	--lc-acento-fondo-hover: #9e1f15;
	--lc-azul-claro: #8fbcff;
	--lc-azul: #1b3a6b;
	--lc-rojo-claro: #3a1d1b;
	--lc-ok: #5ee0a8;
	--lc-ok-suave: #10322a;
	--lc-error: #ff9a8f;
	--lc-error-suave: #3a1a1c;
	--lc-aviso: #ffc266;
	--lc-aviso-suave: #3a2a12;
}
@media (prefers-color-scheme: dark) {
	html.lc-auto {
		--lc-acento: #ff8b80;
		--lc-acento-fondo: #b8271b;
		--lc-acento-fondo-hover: #9e1f15;
		--lc-azul-claro: #8fbcff;
		--lc-azul: #1b3a6b;
		--lc-rojo-claro: #3a1d1b;
		--lc-ok: #5ee0a8;
		--lc-ok-suave: #10322a;
		--lc-error: #ff9a8f;
		--lc-error-suave: #3a1a1c;
		--lc-aviso: #ffc266;
		--lc-aviso-suave: #3a2a12;
	}
}

/* ---------- componentes.css ---------- */
/* ============================================================================
   Portal Licencia de Conducir CR — COMPONENTES
   Piezas reutilizables: botones, tarjetas, avisos, acordeones, formularios,
   exámenes (el corazón del sitio), progreso y estados vacíos.
   ========================================================================== */

/* ── Botones ─────────────────────────────────────────────────────────────── */
.lc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--lc-2);
	padding: 12px 20px; border: 1px solid transparent; border-radius: var(--lc-radio-pill);
	font: inherit; font-weight: 700; line-height: 1.1; text-decoration: none; cursor: pointer;
	transition: transform var(--lc-transicion), box-shadow var(--lc-transicion), background var(--lc-transicion), color var(--lc-transicion);
	background: var(--lc-acento); color: var(--lc-acento-texto) !important;
	box-shadow: var(--lc-sombra-sm);
}
.lc-btn:hover { transform: translateY(-1px); box-shadow: var(--lc-sombra); background: var(--lc-rojo-osc); }
.lc-btn:active { transform: translateY(0); }
.lc-btn--azul { background: var(--lc-azul); }
.lc-btn--azul:hover { background: var(--lc-azul-claro); }
.lc-btn--linea { background: transparent; color: var(--lc-texto) !important; border-color: var(--lc-borde); box-shadow: none; }
.lc-btn--linea:hover { background: var(--lc-superficie-2); border-color: var(--lc-linea-fuerte); }
.lc-btn--texto { background: transparent; color: var(--lc-acento) !important; padding-inline: 6px; box-shadow: none; }
.lc-btn--texto:hover { background: transparent; text-decoration: underline; }
.lc-btn--sm { padding: 9px 14px; font-size: .9rem; }
.lc-btn--lg { padding: 15px 26px; font-size: 1.05rem; }
.lc-btn--bloque { width: 100%; }
.lc-btn[disabled], .lc-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.lc-acciones { display: flex; flex-wrap: wrap; gap: var(--lc-3); align-items: center; }

/* ── Etiquetas ───────────────────────────────────────────────────────────── */
.lc-badge, .lc-chip {
	display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--lc-radio-pill);
	font-size: .78rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
	background: var(--lc-rojo-claro); color: var(--lc-rojo-osc);
}
.lc-chip { background: var(--lc-superficie-2); color: var(--lc-texto-suave); text-transform: none; letter-spacing: 0; }
.lc-badge--azul { background: var(--lc-azul-suave); color: var(--lc-azul-claro); }
.lc-badge--ok { background: var(--lc-ok-suave); color: var(--lc-ok); }
.lc-badge--aviso { background: var(--lc-aviso-suave); color: var(--lc-aviso); }
.lc-badge--error { background: var(--lc-error-suave); color: var(--lc-error); }

/* ── Tarjetas ────────────────────────────────────────────────────────────── */
.lc-tarjeta {
	background: var(--lc-superficie); border: 1px solid var(--lc-borde); border-radius: var(--lc-radio);
	overflow: hidden; display: flex; flex-direction: column;
	transition: transform var(--lc-transicion), box-shadow var(--lc-transicion), border-color var(--lc-transicion);
}
.lc-tarjeta--enlazable:hover { transform: translateY(-2px); box-shadow: var(--lc-sombra); border-color: var(--lc-linea-fuerte); }
.lc-tarjeta__media { aspect-ratio: 16 / 9; background: var(--lc-superficie-2); overflow: hidden; }
.lc-tarjeta__media img { width: 100%; height: 100%; object-fit: cover; }
.lc-tarjeta__cuerpo { padding: var(--lc-5); display: flex; flex-direction: column; gap: var(--lc-2); flex: 1; }
.lc-tarjeta__titulo { font-size: 1.15rem; margin: 0; }
.lc-tarjeta__titulo a { color: var(--lc-tinta) !important; text-decoration: none; }
.lc-tarjeta__titulo a:hover { color: var(--lc-acento) !important; }
.lc-tarjeta__pie { margin-top: auto; display: flex; align-items: center; gap: var(--lc-3); font-size: .85rem; color: var(--lc-texto-suave); }
.lc-tarjeta--fila { flex-direction: row; }
.lc-tarjeta--fila .lc-tarjeta__media { flex: 0 0 38%; aspect-ratio: 4 / 3; }
@media (max-width: 620px) { .lc-tarjeta--fila { flex-direction: column; } .lc-tarjeta--fila .lc-tarjeta__media { flex: none; width: 100%; } }

/* ── Avisos ──────────────────────────────────────────────────────────────── */
.lc-aviso {
	display: flex; gap: var(--lc-3); padding: var(--lc-4); border-radius: var(--lc-radio-sm);
	background: var(--lc-azul-suave); border-left: 4px solid var(--lc-azul-claro); margin: var(--lc-5) 0;
}
.lc-aviso > :last-child { margin-bottom: 0; }
.lc-aviso--ok { background: var(--lc-ok-suave); border-left-color: var(--lc-ok); }
.lc-aviso--aviso { background: var(--lc-aviso-suave); border-left-color: var(--lc-aviso); }
.lc-aviso--error { background: var(--lc-error-suave); border-left-color: var(--lc-error); }
.lc-aviso__icono { flex: 0 0 auto; font-size: 1.2rem; line-height: 1.3; }

/* ── Acordeón (con <details>, teclado y lectores de pantalla gratis) ─────── */
.lc-acordeon { border: 1px solid var(--lc-borde); border-radius: var(--lc-radio); background: var(--lc-superficie); overflow: hidden; }
.lc-acordeon + .lc-acordeon { margin-top: var(--lc-2); }
.lc-acordeon > summary {
	cursor: pointer; padding: var(--lc-4) var(--lc-5); font-weight: 700; color: var(--lc-tinta);
	display: flex; align-items: center; justify-content: space-between; gap: var(--lc-3); list-style: none; min-height: 44px;
}
.lc-acordeon > summary::-webkit-details-marker { display: none; }
.lc-acordeon > summary::after { content: "+"; font-size: 1.35rem; line-height: 1; color: var(--lc-acento); transition: transform var(--lc-transicion); }
.lc-acordeon[open] > summary::after { content: "–"; }
.lc-acordeon > summary:hover { background: var(--lc-superficie-2); }
.lc-acordeon__cuerpo { padding: 0 var(--lc-5) var(--lc-5); }
.lc-acordeon__cuerpo > :last-child { margin-bottom: 0; }

/* ── Pestañas ────────────────────────────────────────────────────────────── */
.lc-tabs { display: flex; flex-wrap: wrap; gap: var(--lc-2); border-bottom: 1px solid var(--lc-borde); margin-bottom: var(--lc-5); }
.lc-tab {
	border: 1px solid transparent; border-bottom: 3px solid transparent; background: transparent;
	color: var(--lc-texto-suave); font: inherit; font-weight: 700; padding: 10px 16px; cursor: pointer; border-radius: var(--lc-radio-sm) var(--lc-radio-sm) 0 0;
}
.lc-tab[aria-selected="true"] { color: var(--lc-acento); border-bottom-color: var(--lc-acento); background: var(--lc-superficie); }
.lc-tab:hover { color: var(--lc-texto); background: var(--lc-superficie-2); }
.lc-panel[hidden] { display: none; }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.lc-campo { display: block; margin-bottom: var(--lc-4); }
.lc-campo > span, .lc-campo > label { display: block; font-weight: 700; margin-bottom: 6px; font-size: .95rem; }
.lc-input, .lc-select, .lc-textarea {
	width: 100%; padding: 12px 14px; font: inherit; color: var(--lc-texto);
	background: var(--lc-superficie); border: 1px solid var(--lc-linea-fuerte); border-radius: var(--lc-radio-sm); min-height: 44px;
}
.lc-input::placeholder, .lc-textarea::placeholder { color: var(--lc-gris-claro); }
.lc-input:focus, .lc-select:focus, .lc-textarea:focus { border-color: var(--lc-azul-claro); outline: 3px solid color-mix(in srgb, var(--lc-azul-claro) 35%, transparent); outline-offset: 1px; }
.lc-ayuda { display: block; font-size: .85rem; color: var(--lc-texto-suave); margin-top: 4px; }
.lc-error { display: block; font-size: .85rem; color: var(--lc-error); margin-top: 4px; font-weight: 700; }
.lc-campo--error .lc-input { border-color: var(--lc-error); }

/* ── Examen / simulador ──────────────────────────────────────────────────── */
.lc-examen__barra {
	position: sticky; top: var(--lc-alto-cabecera); z-index: 90; background: var(--lc-superficie);
	border-bottom: 1px solid var(--lc-borde); padding: var(--lc-3) 0;
}
.lc-examen__barra-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-4); justify-content: space-between; }
.lc-examen__datos { display: flex; flex-wrap: wrap; gap: var(--lc-3) var(--lc-5); align-items: center; font-size: .9rem; }
.lc-dato { display: flex; flex-direction: column; line-height: 1.2; }
.lc-dato b { font-size: 1.15rem; color: var(--lc-tinta); }
.lc-tiempo { font-variant-numeric: tabular-nums; font-weight: 800; }
.lc-tiempo--poco { color: var(--lc-error); }

.lc-pregunta { background: var(--lc-superficie); border: 1px solid var(--lc-borde); border-radius: var(--lc-radio); padding: clamp(16px, 3vw, 28px); }
.lc-pregunta__numero { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lc-acento); }
.lc-pregunta__texto { font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 700; color: var(--lc-tinta); margin: var(--lc-2) 0 var(--lc-5); max-width: var(--lc-medida); }
.lc-opciones { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lc-3); }
.lc-opcion {
	display: flex; gap: var(--lc-3); align-items: flex-start; width: 100%; text-align: left;
	background: var(--lc-superficie); border: 2px solid var(--lc-borde); border-radius: var(--lc-radio-sm);
	padding: var(--lc-4); font: inherit; color: var(--lc-texto); cursor: pointer; min-height: 44px;
	transition: border-color var(--lc-transicion), background var(--lc-transicion), transform var(--lc-transicion);
}
.lc-opcion:hover { border-color: var(--lc-azul-claro); transform: translateX(2px); }
.lc-opcion__letra {
	flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
	background: var(--lc-superficie-2); font-weight: 800; font-size: .85rem;
}
.lc-opcion[aria-pressed="true"], .lc-opcion.lc-elegida { border-color: var(--lc-azul-claro); background: var(--lc-azul-suave); }
.lc-opcion.lc-correcta { border-color: var(--lc-ok); background: var(--lc-ok-suave); }
.lc-opcion.lc-correcta .lc-opcion__letra { background: var(--lc-ok); color: #fff; }
.lc-opcion.lc-incorrecta { border-color: var(--lc-error); background: var(--lc-error-suave); }
.lc-opcion.lc-incorrecta .lc-opcion__letra { background: var(--lc-error); color: #fff; }
.lc-opcion[disabled] { cursor: default; }
.lc-explicacion { margin-top: var(--lc-4); padding: var(--lc-4); border-radius: var(--lc-radio-sm); background: var(--lc-superficie-2); border-left: 4px solid var(--lc-azul-claro); }
.lc-explicacion > :last-child { margin-bottom: 0; }

.lc-navegador { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-navegador button {
	width: 40px; min-height: 40px; border-radius: var(--lc-radio-sm); border: 1px solid var(--lc-borde);
	background: var(--lc-superficie); color: var(--lc-texto-suave); font-weight: 700; font-size: .85rem; cursor: pointer;
}
.lc-navegador button[data-estado="hecha"] { background: var(--lc-azul-suave); border-color: var(--lc-azul-claro); color: var(--lc-azul-claro); }
.lc-navegador button[data-estado="bien"] { background: var(--lc-ok-suave); border-color: var(--lc-ok); color: var(--lc-ok); }
.lc-navegador button[data-estado="mal"] { background: var(--lc-error-suave); border-color: var(--lc-error); color: var(--lc-error); }
.lc-navegador button[aria-current="true"] { outline: 3px solid var(--lc-azul-claro); outline-offset: 1px; }
.lc-navegador button[disabled] { opacity: .34; cursor: not-allowed; border-style: dashed; }
.lc-navegador button:not([disabled]):hover { border-color: var(--lc-azul-claro); }

.lc-resultado { text-align: center; }
.lc-resultado__nota { font-size: clamp(46px, 9vw, 82px); font-weight: 800; line-height: 1; color: var(--lc-acento); font-variant-numeric: tabular-nums; }
.lc-resultado--aprobado .lc-resultado__nota { color: var(--lc-ok); }
.lc-resultado--reprobado .lc-resultado__nota { color: var(--lc-error); }
.lc-resultado__cifras { display: flex; flex-wrap: wrap; gap: var(--lc-5); justify-content: center; margin: var(--lc-5) 0; }

/* ── Progreso ────────────────────────────────────────────────────────────── */
.lc-progreso { background: var(--lc-superficie-2); border-radius: var(--lc-radio-pill); height: 10px; overflow: hidden; }
.lc-progreso > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--lc-acento), var(--lc-azul-claro)); transition: width .25s ease; }

/* ── Índice, estados y varios ────────────────────────────────────────────── */
.lc-indice { background: var(--lc-superficie-2); border: 1px solid var(--lc-borde); border-radius: var(--lc-radio); padding: var(--lc-5); }
.lc-indice ol, .lc-indice ul { margin: 0; padding-left: 1.1em; }
.lc-indice a { text-decoration: none; }
.lc-indice a:hover, .lc-indice a[aria-current="true"] { color: var(--lc-acento); font-weight: 700; }
.lc-vacio { text-align: center; padding: var(--lc-8) var(--lc-4); color: var(--lc-texto-suave); }
/* ---------- ajustes que solo usan las páginas de contenido ---------- */
.lc-entrada { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--lc-texto-suave); max-width: var(--lc-medida); margin-bottom: var(--lc-4); }
.lc-lista-marcada { list-style: none; margin: 0 0 var(--lc-4); padding: 0; display: grid; gap: var(--lc-2); }
.lc-lista-marcada li { position: relative; padding-left: 26px; max-width: none; margin: 0; }
.lc-lista-marcada li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--lc-ok); font-weight: 800; }
.lc-lista-enlaces { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lc-lista-enlaces li { max-width: none; margin: 0; }
.lc-lista-enlaces a { display: block; padding: 7px 10px; border-radius: var(--lc-radio-sm); text-decoration: none; color: var(--lc-tinta); }
.lc-lista-enlaces a:hover { background: var(--lc-superficie-2); color: var(--lc-azul-claro); }
.lc-lista-enlaces [aria-current="page"] { display: block; padding: 7px 10px; border-radius: var(--lc-radio-sm); background: var(--lc-azul-suave); color: var(--lc-azul-claro); }
.lc-lateral__principal { min-width: 0; }
.lc-lateral__barra { position: sticky; top: calc(var(--lc-alto-cabecera) + 16px); }
@media (max-width: 1024px) {
	.lc-lateral__barra { position: static; }
}
.lc-examen__cantidad-caja .lc-pequeno { display: block; margin-bottom: 2px; }
/* ---------- Panel del mega: cada quien arma su examen ---------- */
.lc-panel { background: var(--lc-superficie); border: 1px solid var(--lc-borde); border-radius: var(--lc-radio); padding: clamp(18px, 3vw, 30px); }
.lc-panel__titulo { margin: 0 0 var(--lc-2); }
.lc-panel__ayuda { color: var(--lc-texto-suave); max-width: var(--lc-medida); margin-bottom: var(--lc-5); }
.lc-panel__rejilla { display: grid; gap: var(--lc-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.lc-panel__campo { display: grid; gap: 6px; }
.lc-panel__campo label { font-weight: 700; font-size: .95rem; }
.lc-panel__campo b { color: var(--lc-azul-claro); }
.lc-panel__campo input[type="range"] { width: 100%; accent-color: var(--lc-azul-claro); min-height: 32px; }
.lc-panel__campo select { min-height: 44px; }
.lc-explicacion--error { border-left-color: var(--lc-error); }
.lc-vacio__icono { font-size: 2.4rem; margin-bottom: var(--lc-2); }
.lc-sello { display: flex; align-items: center; gap: var(--lc-2); font-size: .85rem; font-weight: 700; color: var(--lc-texto-suave); }
.lc-divisor { display: flex; align-items: center; gap: var(--lc-3); color: var(--lc-texto-suave); font-size: .85rem; margin: var(--lc-5) 0; }
.lc-divisor::before, .lc-divisor::after { content: ""; flex: 1; height: 1px; background: var(--lc-borde); }
/* El botón principal usa el tono de FONDO (el que aguanta texto blanco);
   el acento aclarado se reserva para textos y gráficos. */
.lc-btn { background-color: var(--lc-acento-fondo); }
.lc-btn:hover { background-color: var(--lc-acento-fondo-hover); }
.lc-btn--azul { background-color: var(--lc-azul); }
.lc-btn--azul:hover { background-color: var(--lc-azul-claro); }
/* Los botones de contorno y de texto deben seguir sin relleno: sin estas dos
   líneas, la regla de arriba los pintaba de rojo y la letra oscura se perdía. */
.lc-btn--linea, .lc-btn--linea:hover { background-color: transparent; }
.lc-btn--texto, .lc-btn--texto:hover { background-color: transparent; }

/* ---------- portal.css ---------- */
/* ============================================================================
   Portal Licencia de Conducir CR — MARCO DEL PORTAL
   Cabecera, pie, migas, portadas de sección, barra lateral y flotantes.
   Todo con el sistema; nada de estilos por página.
   ========================================================================== */

/* ── Cabecera ────────────────────────────────────────────────────────────── */
.lc-barra-superior {
	background: var(--lc-azul); color: #e8ecf5; font-size: .85rem;
}
.lc-barra-superior a { color: #e8ecf5; text-decoration: none; }
.lc-barra-superior a:hover { color: #fff; text-decoration: underline; }
.lc-barra-superior__in { display: flex; flex-wrap: wrap; gap: var(--lc-3) var(--lc-5); align-items: center; justify-content: space-between; padding: 7px 0; }

.lc-cabecera {
	position: sticky; top: 0; z-index: var(--lc-z-cabecera);
	background: var(--lc-superficie); border-bottom: 1px solid var(--lc-borde);
}
.lc-cabecera__in { display: flex; align-items: center; gap: var(--lc-5); min-height: 72px; }
.lc-marca { display: flex; align-items: center; gap: var(--lc-3); text-decoration: none; flex: 0 0 auto; }
.lc-marca img { max-height: 44px; width: auto; }
.lc-marca__texto { display: flex; flex-direction: column; line-height: 1.15; }
.lc-marca__nombre { font-weight: 800; font-size: 1.15rem; color: var(--lc-tinta); }
.lc-marca__lema { font-size: .78rem; color: var(--lc-texto-suave); }

.lc-nav { margin-left: auto; }
.lc-menu { display: flex; align-items: center; gap: var(--lc-1); list-style: none; margin: 0; padding: 0; }
.lc-menu > li { position: relative; }
.lc-menu a {
	display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: var(--lc-radio-sm);
	color: var(--lc-tinta); font-weight: 600; text-decoration: none; min-height: 44px;
}
.lc-menu a:hover, .lc-menu a[aria-current="page"] { background: var(--lc-superficie-2); color: var(--lc-acento); }
.lc-menu .lc-submenu {
	position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px; z-index: var(--lc-z-menu);
	background: var(--lc-superficie); border: 1px solid var(--lc-borde); border-radius: var(--lc-radio);
	box-shadow: var(--lc-sombra-lg); padding: var(--lc-2); list-style: none; margin: 0;
	opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--lc-transicion), transform var(--lc-transicion), visibility var(--lc-transicion);
}
.lc-menu li:hover > .lc-submenu, .lc-menu li:focus-within > .lc-submenu { opacity: 1; visibility: visible; transform: none; }
.lc-submenu a { display: block; padding: 10px 12px; }
.lc-cabecera__acciones { display: flex; align-items: center; gap: var(--lc-2); flex: 0 0 auto; }
.lc-icono-btn {
	border: 1px solid var(--lc-borde); background: transparent; color: var(--lc-tinta);
	border-radius: var(--lc-radio-sm); cursor: pointer; padding: 8px;
}
.lc-icono-btn:hover { background: var(--lc-superficie-2); color: var(--lc-acento); }
.lc-hamburguesa { display: none; }
.lc-hamburguesa__barras, .lc-hamburguesa__barras::before, .lc-hamburguesa__barras::after {
	display: block; width: 18px; height: 2px; background: currentColor;
}
.lc-hamburguesa__barras { position: relative; }
.lc-hamburguesa__barras::before, .lc-hamburguesa__barras::after { content: ""; position: absolute; left: 0; }
.lc-hamburguesa__barras::before { top: -6px; }
.lc-hamburguesa__barras::after { top: 6px; }

/* En escritorio el submenú se abre al pasar el ratón: el botón no se usa. */
@media (min-width: 1025px) { .lc-submenu-boton { display: none !important; } }

@media (max-width: 860px) {
	:root { --lc-alto-cabecera: 64px; }
	.lc-cabecera__in { min-height: 64px; }
}
@media (max-width: 1024px) {
	.lc-hamburguesa { display: inline-flex; }
	.lc-nav {
		position: absolute; top: 100%; left: 0; right: 0; background: var(--lc-superficie);
		border-bottom: 1px solid var(--lc-borde); box-shadow: var(--lc-sombra); padding: var(--lc-4) var(--lc-gutter) var(--lc-5);
		display: none; margin: 0;
	}
	body.lc-menu-abierto .lc-nav { display: block; }
	.lc-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.lc-menu > li { border-bottom: 1px solid var(--lc-borde); }
	.lc-menu a { padding: 14px 0; }
	.lc-menu .lc-submenu {
		position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
		border: 0; border-left: 2px solid var(--lc-borde); border-radius: 0; padding: 0 0 0 var(--lc-4);
		margin: 0 0 var(--lc-3); display: none;
	}
	.lc-menu li.lc-abierto > .lc-submenu { display: block; }
	.lc-submenu-boton {
		position: absolute; top: 4px; right: 0; width: 44px; height: 44px; border: 0; background: none;
		color: inherit; cursor: pointer; font-size: 1.1rem;
	}
	.lc-menu li:has(> .lc-submenu) > a { padding-right: 52px; }
}

/* ── Migas y portadas de sección ─────────────────────────────────────────── */
.lc-migas { border-bottom: 1px solid var(--lc-borde); background: var(--lc-superficie); }
.lc-migas__lista { display: flex; flex-wrap: wrap; gap: var(--lc-2); list-style: none; margin: 0; padding: 10px 0; font-size: .85rem; }
.lc-migas__lista li { display: flex; align-items: center; gap: var(--lc-2); max-width: none; margin: 0; color: var(--lc-texto-suave); }
.lc-migas__lista li + li::before { content: "›"; color: var(--lc-gris-claro); }
.lc-migas a { color: var(--lc-texto-suave); text-decoration: none; }
.lc-migas a:hover { color: var(--lc-acento); text-decoration: underline; }

.lc-hero { background: var(--lc-azul); color: #fff; position: relative; overflow: hidden; }
.lc-hero__in { padding-block: clamp(32px, 6vw, 72px); position: relative; z-index: 1; }
.lc-hero h1, .lc-hero h2 { color: #fff; }
.lc-hero p { color: rgba(255, 255, 255, .88); }
.lc-hero__etiqueta { color: #ffd7d3; }
.lc-hero--suave { background: var(--lc-superficie-2); color: var(--lc-texto); }
.lc-hero--suave h1, .lc-hero--suave h2 { color: var(--lc-tinta); }
.lc-hero--suave p { color: var(--lc-texto-suave); }
.lc-hero__datos { display: flex; flex-wrap: wrap; gap: var(--lc-5); margin-top: var(--lc-5); }
.lc-hero__dato b { display: block; font-size: 1.5rem; color: #fff; }

.lc-cabecera-seccion { margin-bottom: var(--lc-6); }
.lc-cabecera-seccion p { color: var(--lc-texto-suave); margin-bottom: 0; }

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.lc-pie { background: var(--lc-azul); color: #dbe4f2; margin-top: var(--lc-9); }
.lc-pie a { color: #dbe4f2; text-decoration: none; }
.lc-pie a:hover { color: #fff; text-decoration: underline; }
.lc-pie__cols { display: grid; gap: var(--lc-6); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); padding-block: var(--lc-7); }
.lc-pie h2, .lc-pie h3 { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--lc-3); }
.lc-pie ul { list-style: none; padding: 0; margin: 0; }
.lc-pie li { margin: 0; padding: 6px 0; max-width: none; }
.lc-pie__abajo { border-top: 1px solid rgba(255, 255, 255, .18); padding-block: var(--lc-4); font-size: .85rem; }
.lc-pie__abajo-in { display: flex; flex-wrap: wrap; gap: var(--lc-3) var(--lc-5); align-items: center; justify-content: space-between; }
.lc-redes { display: flex; gap: var(--lc-2); }
.lc-redes a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; }
.lc-redes a:hover { background: rgba(255, 255, 255, .12); }

/* ── Flotantes: tema, volver arriba y progreso de lectura ────────────────── */
.lc-flotante { position: fixed; z-index: var(--lc-z-flotante); }
.lc-volver { right: 18px; bottom: 18px; }
.lc-tema { left: 18px; bottom: 18px; }
.lc-volver button, .lc-tema button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--lc-borde); background: var(--lc-superficie); color: var(--lc-tinta); box-shadow: var(--lc-sombra); cursor: pointer; }
.lc-volver button:hover, .lc-tema button:hover { background: var(--lc-acento); color: #fff; border-color: var(--lc-acento); }
.lc-barra-progreso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: var(--lc-z-modal); pointer-events: none; }
.lc-barra-progreso > span { display: block; height: 100%; width: 0; background: var(--lc-acento); }

/* ── Impresión ───────────────────────────────────────────────────────────── */
@media print {
	.lc-barra-superior, .lc-cabecera, .lc-pie, .lc-flotante { display: none !important; }
}

/* En celular, la barra superior solo deja el enlace de ayuda (ahorra alto) */
@media (max-width: 620px) {
	.lc-barra-superior__in p:first-child { display: none; }
	.lc-barra-superior__in { justify-content: flex-end; }
}

/* ---------- paginas.css ---------- */
/* ==========================================================================
   PÁGINAS DE CONTENIDO DEL PORTAL (portada, contacto, legales, manuales)
   Se suman a base.css + componentes.css antes de unir todo en licencia.css
   ========================================================================== */

/* ---------- Portada: héroe con imagen ---------- */
.lc-hero-portada { position: relative; background: var(--lc-azul); color: #fff; overflow: hidden; }
.lc-hero-portada__in { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: 1.05fr .95fr; align-items: center; padding-block: clamp(36px, 6vw, 72px); }
.lc-hero-portada h1 { color: #fff; margin-bottom: var(--lc-3); }
.lc-hero-portada p { color: #dbe6f7; max-width: 56ch; }
.lc-hero-portada__img { margin: 0; }
.lc-hero-portada__img img { width: 100%; height: auto; display: block; border-radius: var(--lc-radio); box-shadow: 0 24px 60px rgba(4, 12, 30, .45); }
.lc-hero-portada__etiqueta { display: inline-flex; align-items: center; gap: var(--lc-2); background: rgba(255, 255, 255, .14); color: #fff; border-radius: var(--lc-radio-pill); padding: 6px 14px; font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--lc-4); }
.lc-hero-portada__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--lc-4); margin-top: var(--lc-5); padding-top: var(--lc-4); border-top: 1px solid rgba(255, 255, 255, .18); }
.lc-hero-portada__datos b { display: block; font-size: 1.5rem; color: #fff; }
.lc-hero-portada__datos span { font-size: .84rem; color: #c9d8ef; }
.lc-hero-portada .lc-btn--linea { color: #fff !important; border-color: rgba(255, 255, 255, .5); }
.lc-hero-portada .lc-btn--linea:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* ---------- Pasos numerados (el método) ---------- */
.lc-pasos { counter-reset: paso; display: grid; gap: var(--lc-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); list-style: none; margin: 0; padding: 0; }
.lc-paso { background: var(--lc-superficie); border: 1px solid var(--lc-borde); border-radius: var(--lc-radio); padding: var(--lc-5); }
.lc-paso::before { counter-increment: paso; content: counter(paso); display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--lc-radio-pill); background: var(--lc-azul-suave); color: var(--lc-azul-claro); font-weight: 800; margin-bottom: var(--lc-3); }
.lc-paso h3 { margin: 0 0 var(--lc-2); }

/* ---------- Fichas de capítulo ---------- */
.lc-cap { display: grid; grid-template-columns: 56px 1fr; gap: var(--lc-4); align-items: start; background: var(--lc-superficie); border: 1px solid var(--lc-borde); border-radius: var(--lc-radio); padding: var(--lc-5); height: 100%; }
.lc-cap__num { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--lc-radio-sm); background: var(--lc-azul); color: #fff; font-weight: 800; font-size: 1.25rem; }
.lc-cap h3 { margin: 0 0 4px; font-size: 1.05rem; }
.lc-cap__temas { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: var(--lc-3) 0; padding: 0; }
.lc-cap__temas li { max-width: none; margin: 0; font-size: .78rem; background: var(--lc-superficie-2); border-radius: var(--lc-radio-pill); padding: 3px 10px; color: var(--lc-texto-suave); }
.lc-cap__acciones { display: flex; flex-wrap: wrap; gap: var(--lc-2); margin-top: var(--lc-3); }

/* ---------- Banda de cierre ---------- */
.lc-banda { background: var(--lc-azul); color: #fff; }
.lc-banda h2 { color: #fff; }
.lc-banda p { color: #dbe6f7; }
.lc-banda__in { display: grid; gap: var(--lc-5); justify-items: start; padding-block: clamp(32px, 5vw, 56px); }

@media (max-width: 900px) {
	.lc-hero-portada__in { grid-template-columns: 1fr; }
	.lc-hero-portada__img { order: -1; }
}

/* ---------- Cuerpo del manual (lectura larga) ---------- */
.lc-manual { color: var(--lc-texto); }
.lc-manual h2 { font-size: 1.4rem; margin-top: var(--lc-7); padding-top: var(--lc-4); border-top: 1px solid var(--lc-borde); }
.lc-manual h3 { font-size: 1.12rem; margin-top: var(--lc-5); }
.lc-manual p, .lc-manual li { max-width: var(--lc-medida); }
.lc-manual ul, .lc-manual ol { padding-left: 1.2em; }
.lc-manual img { max-width: 100%; height: auto; border-radius: var(--lc-radio-sm); }
.lc-manual table { width: 100%; border-collapse: collapse; margin: var(--lc-5) 0; display: block; overflow-x: auto; }
.lc-manual th, .lc-manual td { border: 1px solid var(--lc-borde); padding: 10px 12px; text-align: left; }
.lc-manual th { background: var(--lc-superficie-2); }
.lc-manual blockquote { margin: var(--lc-5) 0; padding: var(--lc-4) var(--lc-5); background: var(--lc-superficie-2); border-left: 4px solid var(--lc-azul-claro); border-radius: 0 var(--lc-radio-sm) var(--lc-radio-sm) 0; }
.lc-manual a { color: var(--lc-enlace); }

/* ---------- Páginas legales ---------- */
.lc-legal h2 { font-size: 1.15rem; margin-top: var(--lc-6); }
.lc-legal p { max-width: var(--lc-medida); color: var(--lc-texto); }

/* Índice del botón "volver arriba" en páginas largas */
.lc-manual-pagina .lc-volver { display: block; }

/* ---------- El manual como libro, con su índice pegajoso ---------- */
.lc-libro { display: grid; gap: var(--lc-6); align-items: start; }
@media (min-width: 1025px) {
	.lc-libro { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); gap: var(--lc-7); }
	.lc-libro__indice { position: sticky; top: calc(var(--lc-alto-cabecera) + 16px); max-height: calc(100vh - var(--lc-alto-cabecera) - 40px); overflow: auto; }
}
.lc-libro__indice {
	background: var(--lc-superficie); border: 1px solid var(--lc-borde);
	border-radius: var(--lc-radio); padding: var(--lc-4);
}
.lc-libro__indice summary {
	cursor: pointer; font-weight: 800; font-size: .95rem; letter-spacing: .02em;
	display: flex; align-items: center; gap: 8px; list-style: none;
}
.lc-libro__indice summary::-webkit-details-marker { display: none; }
.lc-libro__indice summary::after { content: "▾"; margin-left: auto; color: var(--lc-texto-suave); }
.lc-libro__indice[open] summary::after { content: "▴"; }
.lc-libro__indice ol { margin: var(--lc-3) 0 0; padding: 0; list-style: none; counter-reset: tema; display: grid; gap: 2px; }
.lc-libro__indice li { max-width: none; margin: 0; }
.lc-libro__indice a {
	display: block; padding: 7px 10px; border-radius: var(--lc-radio-sm); text-decoration: none;
	color: var(--lc-texto); font-size: .9rem; line-height: 1.35;
}
.lc-libro__indice a::before { counter-increment: tema; content: counter(tema) ". "; color: var(--lc-texto-suave); font-variant-numeric: tabular-nums; }
.lc-libro__indice a:hover { background: var(--lc-superficie-2); color: var(--lc-azul-claro); }
.lc-libro__cuerpo { background: var(--lc-superficie); border: 1px solid var(--lc-borde); border-radius: var(--lc-radio); padding: clamp(20px, 3vw, 40px); }
@media (max-width: 620px) { .lc-libro__indice { max-height: 46vh; overflow: auto; } }
/* Los títulos no se esconden bajo la cabecera al saltar desde el índice */
.lc-manual h2, .lc-manual h3 { scroll-margin-top: calc(var(--lc-alto-cabecera) + 20px); }
.lc-manual h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

/* ---------- ux.css ---------- */
/* ==========================================================================
   AJUSTES FINOS DE UX, SIMETRÍA Y RITMO (van al final: mandan sobre todo)
   Medido con herramientas/auditar_ux.py en 1440, 1024 y 390 px.
   ========================================================================== */

/* ---------- 1. Botones: una sola altura por tamaño ----------
   Antes convivían 44, 45 y 50 px en la misma fila porque el alto salía del
   relleno + la línea. Ahora el alto es exacto y el texto queda centrado. */
.lc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding-block: 0;
}
.lc-btn--sm { min-height: 44px; }
.lc-btn--lg { min-height: 56px; }
/* Mismo criterio para los botones de icono y los campos */
.lc-icono-btn { min-height: 44px; min-width: 44px; }
.lc-input { min-height: 46px; }

/* ---------- 2. Fila de datos del hero: columnas parejas ----------
   Las etiquetas se parten en dos líneas y quedaban desparejas: ahora todas
   ocupan el mismo alto y arrancan a la misma altura. */
.lc-hero__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--lc-3); align-items: stretch; }
.lc-hero__dato { display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; }
.lc-hero__dato span { min-height: 2.4em; }

/* ---------- 3. Ritmo vertical uniforme ---------- */
.lc-seccion { padding-block: clamp(40px, 5vw, 72px); }
.lc-tarjeta__cuerpo > :last-child { margin-bottom: 0; }
.lc-tarjeta__cuerpo > :first-child { margin-top: 0; }
/* Los encabezados no arrastran su margen al borde de la tarjeta */
.lc-tarjeta__titulo + * { margin-top: var(--lc-2); }
/* Rejillas: mismo hueco en todas y sin sobras raras */
.lc-rejilla { gap: var(--lc-5); }
.lc-pila > :last-child { margin-bottom: 0; }
/* Los bloques de contenido arrancan siempre a la misma altura */
.lc-lateral > * { min-width: 0; }
.lc-lateral:not(:first-child) { margin-top: var(--lc-6); }

/* ---------- 4. Detalles de precisión ---------- */
/* Los avisos y tarjetas comparten radio y borde: nada se ve "de otro sistema" */
.lc-aviso { border-radius: var(--lc-radio); }
/* Separación igual entre la miga de pan y el título en todas las páginas */
.lc-migas + .lc-seccion { padding-top: var(--lc-6); }
/* La barra del examen no se pega a la cabecera al saltar con el teclado */
.lc-examen__barra { scroll-margin-top: calc(var(--lc-alto-cabecera) + 12px); }
/* En pantallas medianas, el lateral del simulador pasa debajo con aire */
@media (max-width: 1024px) {
	.lc-lateral { gap: var(--lc-6); }
}

/* ---------- 5. CABECERA: proporción y marca ----------
   Antes la marca (logo + nombre + lema) se desbordaba y el lema quedaba
   pegado al nombre. Ahora la marca es una fila ordenada, el logo tiene tope
   de alto y el lema se separa y se corta con puntos suspensivos si es largo. */
.lc-cabecera__in {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 28px);
	min-height: var(--lc-alto-cabecera);
	padding-block: 10px;
}
.lc-marca { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; }
.lc-marca img, .lc-marca .custom-logo, .lc-marca .lc-marca__logo {
	display: block; width: auto; max-height: 40px; object-fit: contain;
	border-radius: var(--lc-radio-sm);
}
.lc-marca__texto { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.lc-marca__nombre { font-weight: 800; font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.15; letter-spacing: -.01em; }
.lc-marca__lema {
	font-size: .76rem; line-height: 1.2; color: var(--lc-texto-suave);
	max-width: 46ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.lc-cabecera__acciones { display: flex; align-items: center; gap: var(--lc-2); margin-left: auto; }
.lc-nav .lc-menu { display: flex; align-items: center; gap: clamp(4px, .8vw, 12px); }
.lc-barra-superior__in { display: flex; align-items: center; justify-content: space-between; gap: var(--lc-4); }
@media (max-width: 1100px) { .lc-marca__lema { max-width: 28ch; } }
@media (max-width: 860px)  { .lc-marca__lema { display: none; } .lc-barra-superior__in { justify-content: center; } }

/* ---------- 6. Portada del simulador (antes de empezar) ---------- */
.lc-panel__datos {
	list-style: none; margin: var(--lc-5) 0 0; padding: 0;
	display: grid; gap: var(--lc-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.lc-panel__datos li {
	display: flex; flex-direction: column; gap: 2px; max-width: none; margin: 0;
	background: var(--lc-superficie-2); border: 1px solid var(--lc-borde);
	border-radius: var(--lc-radio-sm); padding: var(--lc-3) var(--lc-4);
}
.lc-panel__datos b { font-size: 1.35rem; font-weight: 800; color: var(--lc-tinta); font-variant-numeric: tabular-nums; }
.lc-panel__datos span { font-size: .82rem; color: var(--lc-texto-suave); }

/* ==========================================================================
   MÁS DISEÑO: ilustraciones, tarjetas de simulador y detalles visuales
   ========================================================================== */
.lc-ilus { width: 100%; height: auto; display: block; color: var(--lc-azul-claro); }

/* --- Encabezado del simulador (ilustración + título) --- */
.lc-sim-encabezado { display: flex; align-items: center; gap: var(--lc-5); margin-bottom: var(--lc-4); }
.lc-sim-encabezado__ilus {
	flex: 0 0 auto; width: clamp(120px, 15vw, 176px); padding: var(--lc-4);
	background: linear-gradient(160deg, var(--lc-superficie-2), var(--lc-superficie));
	border: 1px solid var(--lc-borde); border-radius: var(--lc-radio);
	color: var(--lc-azul-claro);
}
.lc-sim-encabezado > div { min-width: 0; }
.lc-sim-encabezado h1 { margin-bottom: 0; }

/* --- Tarjetas del centro de simuladores --- */
.lc-sim-rejilla { align-items: stretch; }
.lc-sim { min-width: 0; }
.lc-sim__enlace {
	display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: var(--lc-4);
	height: 100%; padding: var(--lc-4);
	background: var(--lc-superficie); border: 1px solid var(--lc-borde); border-radius: var(--lc-radio);
	text-decoration: none; color: inherit; transition: transform var(--lc-transicion), box-shadow var(--lc-transicion), border-color var(--lc-transicion);
}
.lc-sim__enlace:hover { transform: translateY(-3px); box-shadow: var(--lc-sombra); border-color: var(--lc-azul-claro); }
.lc-sim__ilus {
	display: grid; place-items: center; padding: var(--lc-2);
	background: linear-gradient(160deg, var(--lc-superficie-2), transparent);
	border: 1px solid var(--lc-borde); border-radius: var(--lc-radio-sm); color: var(--lc-azul-claro);
}
.lc-sim__texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--lc-2); min-width: 0; }
.lc-sim__titulo { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.lc-sim__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .82rem; color: var(--lc-texto-suave); }
.lc-sim__meta i { font-style: normal; }
.lc-sim__meta i + i::before { content: "·"; margin-right: 10px; color: var(--lc-gris-claro); }
.lc-sim__flecha { font-size: 1.3rem; color: var(--lc-acento); transition: transform var(--lc-transicion); }
.lc-sim__enlace:hover .lc-sim__flecha { transform: translateX(4px); }
@media (max-width: 620px) {
	.lc-sim__enlace { grid-template-columns: 68px 1fr; }
	.lc-sim__flecha { display: none; }
}

/* --- Capítulos en la portada --- */
.lc-cap__ilus {
	display: grid; place-items: center; width: 84px; height: 84px; padding: var(--lc-2);
	background: linear-gradient(160deg, var(--lc-superficie-2), transparent);
	border: 1px solid var(--lc-borde); border-radius: var(--lc-radio);
	color: var(--lc-azul-claro); flex: 0 0 auto;
}
.lc-cap__ilus .lc-ilus { max-height: 62px; }

/* --- Detalles de brillo para que no se vea plano --- */
.lc-tarjeta { background: linear-gradient(180deg, var(--lc-superficie), var(--lc-superficie)); }
.lc-tarjeta--enlazable:hover { border-color: var(--lc-azul-claro); }
.lc-seccion--suave { background: linear-gradient(180deg, var(--lc-superficie-2), var(--lc-fondo-pagina)); }
.lc-etiqueta-seccion { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- 7. Menos aire muerto y jerarquía medida ---------- */
/* Dos secciones seguidas no suman su relleno: el hueco de en medio se parte */
.lc-seccion + .lc-seccion { padding-top: clamp(8px, 1.5vw, 20px); }
.lc-seccion > .lc-contenedor > h2 { margin-top: clamp(20px, 3vw, 40px); }
.lc-sim-encabezado h1 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); line-height: 1.15; }
.lc-sim-encabezado .lc-etiqueta-seccion { margin-bottom: 6px; }
@media (max-width: 620px) {
	.lc-sim-encabezado { flex-direction: column; align-items: flex-start; gap: var(--lc-3); }
	.lc-sim-encabezado__ilus { width: 104px; }
}
/* Los datos de la portada del simulador, en cuadros parejos */
.lc-panel__datos { margin-top: var(--lc-5); }
.lc-panel { border-top: 4px solid var(--lc-acento); }

/* ---------- 8. Contacto: formulario y preguntas frecuentes ---------- */
.lc-contacto { display: grid; gap: var(--lc-6); align-items: start; }
@media (min-width: 1025px) { .lc-contacto { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.lc-tarjeta--contacto { border-top: 4px solid var(--lc-acento); }
.lc-form { display: grid; gap: var(--lc-4); }
.lc-form__fila { display: grid; gap: var(--lc-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.lc-campo { display: grid; gap: 6px; }
.lc-campo > span { font-weight: 700; font-size: .93rem; }
.lc-campo textarea { min-height: 148px; resize: vertical; font-family: inherit; line-height: 1.6; }
.lc-check { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; }
.lc-check input { margin-top: 3px; width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--lc-acento); }
.lc-acordeon { border: 1px solid var(--lc-borde); border-radius: var(--lc-radio-sm); padding: var(--lc-3) var(--lc-4); margin-bottom: 8px; background: var(--lc-superficie); }
.lc-acordeon:last-child { margin-bottom: 0; }
.lc-acordeon summary { cursor: pointer; font-weight: 700; font-size: .95rem; }
.lc-acordeon summary:hover { color: var(--lc-azul-claro); }
.lc-acordeon p { margin: var(--lc-2) 0 0; font-size: .92rem; color: var(--lc-texto-suave); }
.lc-contacto__lado .lc-tarjeta { margin-bottom: var(--lc-4); }

/* ---------- 9. Menos aire y titulares más contenidos (menos "plano") ---------- */
.lc-seccion { padding-block: clamp(24px, 3.2vw, 44px); }
.lc-seccion > .lc-contenedor > :last-child { margin-bottom: 0; }
.lc-seccion + .lc-seccion { padding-top: clamp(20px, 2.6vw, 36px); }
h1 { font-size: clamp(1.75rem, 3.2vw, 2.45rem); line-height: 1.15; }
h2 { font-size: clamp(1.25rem, 2.1vw, 1.6rem); }
.lc-entrada { margin-block: var(--lc-3) var(--lc-5); }
.lc-hero__texto { max-width: 46rem; }
.lc-seccion h2 + .lc-entrada { margin-top: var(--lc-2); }
/* La portada del simulador, más compacta y con presencia */
.lc-panel { padding: clamp(18px, 2.6vw, 26px); }
.lc-panel__datos { gap: var(--lc-3); }

/* ---------- 10. Barra del examen en celular: sin migas de progreso ---------- */
@media (max-width: 560px) {
	.lc-examen__barra-in > [data-examen-progreso] { display: none; }
	.lc-examen__barra-in { gap: var(--lc-2); }
	.lc-examen__barra-in .lc-dato { font-size: .82rem; }
	.lc-examen__barra-in .lc-btn { padding-inline: 14px; }
}

/* ---------- 11. Más aire para los botones del examen ---------- */
[data-examen-cuerpo] .lc-acciones { gap: var(--lc-4); }
[data-examen-cuerpo] .lc-acciones .lc-btn { min-height: 50px; padding-inline: 26px; }
.lc-opciones { gap: var(--lc-4); }
.lc-opcion { padding: 16px 18px; }
@media (max-width: 560px) {
	[data-examen-cuerpo] .lc-acciones { gap: 12px; }
	[data-examen-cuerpo] .lc-acciones .lc-btn { flex: 1 1 140px; padding-inline: 16px; }
	.lc-opcion { padding: 15px 14px; }
}

/* ---------- 12. Botones del examen: rojo con letra blanca, en claro y en oscuro ---------- */
[data-examen-anterior],
[data-examen-siguiente] {
	background-color: var(--lc-acento-fondo) !important;
	color: #fff !important;
	border-color: transparent !important;
}
[data-examen-anterior]:hover,
[data-examen-siguiente]:hover { background-color: var(--lc-acento-fondo-hover) !important; }
/* Aire simétrico: ni pegados a la tarjeta de arriba ni al bloque de abajo */
[data-examen-cuerpo] .lc-acciones { margin-block: 16px; }

/* ---------- 13. Tipografía con tamaño propio ----------
   Los botones usaban "font: inherit" y tomaban el tamaño del contenedor donde
   estuvieran (la barra del examen baja a .9rem, así que el botón quedaba en
   14.4 px). Aquí cada pieza tiene su tamaño, escalado con la misma curva que la
   base del portal, para que ni el tema de WordPress ni el contenedor la encojan. */
.lc-seccion { font-size: var(--lc-tam-base, 16px); }
.lc-btn { font-size: clamp(16px, .35vw + 15px, 17px); }
.lc-btn--sm { font-size: clamp(15px, .3vw + 14px, 16px); }
.lc-btn--lg { font-size: clamp(17px, .4vw + 16px, 18.5px); }
.lc-opcion { font-size: clamp(16px, .4vw + 15px, 17.5px); line-height: 1.45; }
.lc-examen__datos { font-size: clamp(14.5px, .3vw + 14px, 15.5px); }
.lc-dato { font-size: clamp(14.5px, .3vw + 14px, 15.5px); }
.lc-dato b { font-size: clamp(17px, .5vw + 16px, 19px); }
.lc-navegador button { font-size: clamp(15px, .3vw + 14px, 16px); }
.lc-pregunta__texto { font-size: clamp(19px, 1.1vw + 15px, 22.5px); }
.lc-entrada { font-size: clamp(16.5px, .4vw + 15.5px, 17.5px); }
.lc-pequeno, small { font-size: clamp(14px, .25vw + 13.5px, 15px); }
.lc-tarjeta__titulo { font-size: clamp(18px, .5vw + 17px, 19.5px); }
.lc-etiqueta-seccion { font-size: 12.8px; }

/* ---------- 14. Botones a prueba de temas ----------
   WordPress y los maquetadores traen sus propias reglas para <button> (relleno,
   altura de línea, alineación, apariencia nativa) y a veces con !important.
   Aquí se fijan las propiedades de estructura de nuestros componentes, con
   !important, para que el diseño no dependa del tema que esté activo. */
.lc-btn,
.lc-navegador button,
.lc-opcion,
.lc-tab {
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	font-family: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.lc-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	line-height: 1.2 !important;
	border-radius: var(--lc-radio-pill) !important;
	border: 1px solid transparent !important;
	text-decoration: none !important;
}

/* Números de "Sus respuestas": caja cuadrada con el dígito centrado */
.lc-navegador button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	min-height: 40px !important;
	padding: 0 !important;
	line-height: 1 !important;
	text-align: center !important;
	border-radius: var(--lc-radio-sm) !important;
	font-variant-numeric: tabular-nums;
}

/* La opción alinea la letra y el texto arriba, no en el centro */
.lc-opcion {
	display: flex !important;
	align-items: flex-start !important;
	gap: var(--lc-3) !important;
	width: 100% !important;
	text-align: left !important;
	padding: 16px 18px !important;
	border: 1px solid var(--lc-borde) !important;
	border-radius: var(--lc-radio-sm) !important;
	line-height: 1.45 !important;
	background-color: var(--lc-superficie) !important;
	color: var(--lc-texto) !important;
}
@media (max-width: 560px) { .lc-opcion { padding: 15px 14px !important; } }
.lc-opcion__letra { flex: 0 0 auto; }

/* Rellenos y colores de los tres tipos de botón */
.lc-btn,
.lc-btn--lg,
.lc-btn--sm { padding: 12px 22px !important; }
.lc-btn--sm { padding: 9px 16px !important; }
.lc-btn--lg { padding: 15px 28px !important; }
.lc-btn { background-color: var(--lc-acento-fondo) !important; color: #fff !important; }
.lc-btn:hover { background-color: var(--lc-acento-fondo-hover) !important; }
.lc-btn--azul { background-color: var(--lc-azul) !important; }
.lc-btn--azul:hover { background-color: var(--lc-azul-claro) !important; }
.lc-btn--linea,
.lc-btn--linea:hover {
	background-color: var(--lc-superficie) !important;
	color: var(--lc-tinta) !important;
	border-color: var(--lc-linea-fuerte) !important;
	box-shadow: none !important;
}
.lc-btn--linea:hover { background-color: var(--lc-superficie-2) !important; }
.lc-btn--texto,
.lc-btn--texto:hover {
	background-color: transparent !important;
	color: var(--lc-acento) !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

/* Los ayudantes de visibilidad mandan sobre el display forzado de los botones */
@media (max-width: 860px) { .lc-solo-escritorio { display: none !important; } }
@media (min-width: 861px) { .lc-solo-movil { display: none !important; } }

/* El botón "Terminar" del examen: secundario, pero con el rojo del portal */
[data-examen-terminar] {
	color: var(--lc-acento) !important;
	border-color: var(--lc-acento) !important;
	background-color: var(--lc-superficie) !important;
}
[data-examen-terminar]:hover { background-color: var(--lc-acento-suave, #fdecea) !important; }

/* ---------- 15. Ajustes puntuales pedidos ---------- */
/* "Ver el manual" y demás botones de bloque: letra de botón principal */
.lc-btn.lc-btn--bloque { font-size: clamp(17px, .4vw + 16px, 18px) !important; }
.lc-btn--sm { font-size: clamp(15.5px, .3vw + 14.5px, 16.5px) !important; }

/* "Empezar ahora": aire arriba y abajo, no pegado a los datos ni al texto */
.lc-acciones:has([data-examen-comenzar]) { margin-block: 26px 20px !important; }
[data-examen-comenzar] { margin: 0 !important; }
.lc-acciones:has([data-examen-comenzar]) + p { margin-top: 0 !important; }

/* "Terminar": que se vea y se sienta como acción disponible */
[data-examen-terminar] { font-weight: 800 !important; }
[data-examen-terminar][disabled] { opacity: .45 !important; cursor: default !important; }

/* ---------- 16. Botón de contorno sobre fondo oscuro ----------
   La regla general de .lc-btn--linea usa fondo claro y tinta oscura; en el hero
   (fondo azul) eso dejaba letra blanca sobre fondo blanco. */
.lc-hero-portada .lc-btn--linea,
.lc-hero-portada .lc-btn--linea:hover {
	background-color: transparent !important;
	color: #fff !important;
	border-color: rgba(255, 255, 255, .65) !important;
}
.lc-hero-portada .lc-btn--linea:hover { background-color: rgba(255, 255, 255, .16) !important; }

/* ---------- 17. Tarjetas del centro de simuladores: ilustración cuadrada ---------- */
.lc-sim__enlace { grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; }
.lc-sim__ilus {
	width: 104px;
	height: 104px;
	padding: 10px;
	display: grid;
	place-items: center;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}
.lc-sim__ilus .lc-ilus { width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
.lc-sim-encabezado__ilus {
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.lc-sim-encabezado__ilus .lc-ilus { width: 100%; height: 100%; }
@media (max-width: 620px) {
	.lc-sim__enlace { grid-template-columns: 76px minmax(0, 1fr); }
	.lc-sim__ilus { width: 76px; height: 76px; padding: 8px; }
}

/* ---------- 18. Megasimulador: acabado premium ---------- */
.lc-premium__sello {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	padding: 6px 14px;
	border-radius: 999px;
	background: linear-gradient(100deg, #b8860b, #e6b333 55%, #b8860b);
	color: #1b1b1b !important;
	font-size: 12.5px !important;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	box-shadow: 0 6px 18px rgba(184, 134, 11, .25);
}

/* El panel donde se arma el examen: tarjeta oscura con filo dorado */
.lc-premium .lc-panel {
	background: linear-gradient(155deg, #10233d, #0b1a2e 60%, #0a1626);
	border: 1px solid rgba(230, 179, 51, .45);
	box-shadow: 0 18px 40px rgba(8, 20, 36, .28);
	color: #eaf0f8;
}
.lc-premium .lc-panel__titulo,
.lc-premium .lc-panel__ayuda,
.lc-premium .lc-panel label,
.lc-premium .lc-panel__campo span { color: #eaf0f8 !important; }
.lc-premium .lc-panel__ayuda,
.lc-premium .lc-panel .lc-pequeno { color: #b9c8dc !important; }
.lc-premium .lc-panel .lc-input,
.lc-premium .lc-panel select {
	background: #0f2438 !important;
	border-color: rgba(230, 179, 51, .35) !important;
	color: #eaf0f8 !important;
}
.lc-premium .lc-panel .lc-btn { background-color: #e6b333 !important; color: #1b1b1b !important; }
.lc-premium .lc-panel .lc-btn:hover { background-color: #f0c24d !important; }

/* Presets: tres formas de empezar, en tarjetas */
.lc-presets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
	margin: 18px 0 22px;
}
.lc-preset {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 14px 16px;
	text-align: left;
	cursor: pointer;
	border-radius: var(--lc-radio-sm);
	border: 1px solid rgba(230, 179, 51, .35);
	background: rgba(255, 255, 255, .04);
	color: #eaf0f8;
	font: inherit;
	transition: transform var(--lc-transicion), border-color var(--lc-transicion), background var(--lc-transicion);
}
.lc-preset b { font-size: 15.5px; }
.lc-preset span { font-size: 13.5px; color: #b9c8dc; }
.lc-preset:hover { transform: translateY(-2px); border-color: #e6b333; background: rgba(230, 179, 51, .12); }

/* Sello premium en su propia línea */
.lc-premium__sello { display: flex !important; width: max-content; }
/* La meta de la tarjeta no arrastra el separador al segundo renglón */
.lc-sim__meta { gap: 2px 14px; }
.lc-sim__meta i + i::before { content: none; }
/* Ilustración un poco más grande dentro de su cuadro */
.lc-sim__ilus .lc-ilus { transform: scale(1.12); }

/* Presets del mega: texto legible sobre el panel oscuro */
.lc-preset b, .lc-preset strong { color: #fff !important; }
.lc-preset span { color: rgba(255, 255, 255, .78) !important; }
.lc-preset:hover b { color: var(--lc-oro, #d4a12a) !important; }

/* ---------- 19. Modo oscuro dentro de Bricks ----------
   Bricks pinta sus propias secciones y contenedores con color claro; al activar
   el modo oscuro esas cajas seguían blancas y el bloque parecía no cambiar. */
html.lc-oscuro body.lc-portal-wp { background-color: var(--lc-fondo-pagina); }
html.lc-oscuro .brxe-code,
html.lc-oscuro .brxe-code .brxe-block,
html.lc-oscuro .brxe-code .brxe-container,
html.lc-oscuro .brxe-code .brxe-section { background-color: transparent !important; }
html.lc-oscuro .lc-seccion { background-color: transparent; }
html.lc-oscuro .lc-tarjeta,
html.lc-oscuro .lc-panel { background-color: var(--lc-superficie); }

/* ---------- 20. Portada: tarjetas de capítulo sin solapes ---------- */
.lc-cap { grid-template-columns: 84px minmax(0, 1fr) !important; align-items: start; }
.lc-cap > div { min-width: 0; }
.lc-cap__ilus { width: 84px; height: 84px; padding: 8px; overflow: hidden; }
.lc-cap__ilus .lc-ilus { width: 100%; height: 100%; max-height: none; }
@media (max-width: 560px) {
	.lc-cap { grid-template-columns: 64px minmax(0, 1fr) !important; }
	.lc-cap__ilus { width: 64px; height: 64px; padding: 6px; }
}

/* ---------- 21. Simetría vertical de las secciones ---------- */
.lc-rejilla { align-items: stretch; }
.lc-seccion > .lc-contenedor > .lc-rejilla { margin-top: 28px; }
.lc-seccion > .lc-contenedor > .lc-acciones { margin-top: 32px; }
.lc-seccion > .lc-contenedor > .lc-acciones + .lc-rejilla { margin-top: 28px; }
.lc-acciones { gap: var(--lc-4); }

/* ---------- 22. Botón de imprimir en los manuales ---------- */
.lc-libro__barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-3); justify-content: space-between; margin-bottom: var(--lc-4); }
@media print {
	.lc-libro__barra, .lc-cabecera, .lc-pie, .lc-migas, .lc-volver, .lc-barra-superior { display: none !important; }
	.lc-libro { display: block !important; }
	.lc-libro__indice { display: none !important; }
	.lc-libro__cuerpo { border: 0 !important; box-shadow: none !important; }
}

/* Cualquier botón suelto dentro de una sección guarda su aire */
.lc-seccion > .lc-contenedor > p:has(> .lc-btn) { margin-top: 32px; }
/* Tarjetas de capítulo: misma altura y el botón siempre al pie */
.lc-cap { display: flex !important; flex-direction: column; }
.lc-cap > div { display: flex; flex-direction: column; height: 100%; }
.lc-cap__acciones { margin-top: auto !important; padding-top: var(--lc-3); }

/* ---------- 21. Escala tipográfica accesible ----------
   Ningún texto visible baja de 13,5 px. Etiquetas y chips suben para leerse
   sin esfuerzo en celular, y el texto de apoyo se queda en 14,5-15,5 px. */
.lc-etiqueta-seccion,
.lc-premium__sello { font-size: 13.5px !important; }
.lc-badge, .lc-chip { font-size: 13.5px !important; }
.lc-cap__temas li { font-size: 14px !important; }
.lc-pregunta__numero { font-size: 13.5px !important; }
.lc-dato { font-size: 14.5px !important; }
.lc-dato b { font-size: 18px !important; }
.lc-marca__lema { font-size: 13.5px !important; }
.lc-pie__col a, .lc-pie__col li, .lc-pie__col p { font-size: 14.5px !important; }
.lc-nav a, .lc-submenu a { font-size: 15.5px !important; }
.lc-pequeno, small { font-size: clamp(14.5px, .25vw + 14px, 15.5px) !important; }
.lc-ayuda, .lc-error, .lc-sim__meta { font-size: 14px !important; }
.lc-navegador button { font-size: 16px !important; }
.lc-tab { font-size: 15.5px !important; }
.lc-opcion__letra { font-size: 15px !important; }
.lc-explicacion p { font-size: 15.5px !important; }
.lc-resultado__cifras { font-size: 15.5px !important; }
.lc-migas__lista { font-size: 14.5px !important; }

/* Etiquetas del panel y del hero, un punto más grandes */
.lc-panel__datos span, .lc-hero-portada__datos span { font-size: 14.5px !important; }
.lc-hero-portada__etiqueta { font-size: 13.5px !important; }
.lc-badge, .lc-chip { font-size: 14px !important; }
.lc-pie__legal, .lc-pie__legal p { font-size: 14.5px !important; }
.lc-etiqueta-seccion, .lc-pregunta__numero, .lc-premium__sello { font-size: 14px !important; }
.lc-pie p, .lc-pie a, .lc-pie span { font-size: 14.5px !important; }

/* ---------- 22. Estados de la opción (mandan sobre el relleno fijo) ---------- */
.lc-opcion.lc-elegida, .lc-opcion[aria-pressed="true"] {
	background-color: var(--lc-azul-suave) !important;
	border-color: var(--lc-azul-claro) !important;
}
.lc-opcion.lc-correcta { background-color: var(--lc-ok-suave) !important; border-color: var(--lc-ok) !important; }
.lc-opcion.lc-incorrecta { background-color: var(--lc-error-suave) !important; border-color: var(--lc-error) !important; }
.lc-opcion.lc-elegida .lc-opcion__letra { background: var(--lc-azul-claro) !important; color: #fff !important; }

/* ---------- 23. Centro de simuladores: tarjetas parejas ---------- */
/* Los puntos separadores dejaban un "·" colgando al final de la línea */
.lc-sim__meta i + i::before { content: none !important; }
.lc-sim__meta { gap: 2px 14px !important; font-size: 14px !important; }
/* La tarjeta se adapta a su propio ancho, no al de la rejilla */
.lc-sim { container-type: inline-size; }
.lc-sim__enlace { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; }
.lc-sim__ilus { width: 88px; height: 88px; padding: 6px; overflow: hidden; }
.lc-sim__ilus .lc-ilus { width: 100%; height: 100%; max-height: none; }
/* Tarjeta angosta (3 y 4 columnas): la ilustración pasa arriba */
@container (max-width: 430px) {
	.lc-sim__enlace { grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
	.lc-sim__ilus { width: 100%; height: 78px; }
	.lc-sim__flecha { display: none; }
	.lc-sim__titulo { font-size: 1.02rem !important; }
}
@container (max-width: 250px) {
	.lc-sim__ilus { height: 70px; }
}
/* Texto de entrada del centro: línea de lectura cómoda */
.lc-entrada { max-width: 68ch; }
/* Las rejillas de capítulos: 3 por fila para que las 6 tarjetas llenen 2 filas */
.lc-sim-rejilla { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important; }
@media (min-width: 1100px) { .lc-sim-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 1099px) and (min-width: 700px) { .lc-sim-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* El destino del enlace «saltar al contenido» no debe mostrar foco visible */
#contenido:focus, main:focus { outline: none !important; }

/* ---------- 24. Menú móvil: cajón lateral (off-canvas) ---------- */
.lc-velo { display: none; }
@media (max-width: 1024px) {
	.lc-hamburguesa { display: inline-flex !important; }
	.lc-velo {
		display: block; position: fixed; inset: 0; z-index: 90;
		background: rgba(8, 13, 25, .58); opacity: 0; pointer-events: none;
		transition: opacity .25s ease; backdrop-filter: blur(2px);
	}
	body.lc-menu-abierto .lc-velo { opacity: 1; pointer-events: auto; }
	body.lc-menu-abierto { overflow: hidden; }
	.lc-nav {
		position: fixed !important; inset: 0 0 0 auto !important;
		width: min(86vw, 380px) !important; max-width: 380px; height: 100dvh;
		margin: 0 !important; padding: 0 0 24px !important;
		background: var(--lc-superficie) !important;
		border-left: 1px solid var(--lc-borde); border-bottom: 0 !important;
		box-shadow: -24px 0 60px rgba(0, 0, 0, .28);
		/* Cerrado no ocupa espacio ni crea desborde: se apaga del todo. */
		display: none !important; visibility: hidden;
		overflow-y: auto; overscroll-behavior: contain; z-index: 95;
	}
	body.lc-menu-abierto .lc-nav {
		display: block !important; visibility: visible;
		animation: lc-entra .26s cubic-bezier(.4, 0, .2, 1) both;
	}
	@keyframes lc-entra {
		from { transform: translateX(28px); opacity: .4; }
		to   { transform: none; opacity: 1; }
	}
	.lc-nav__cabecera {
		position: sticky; top: 0; z-index: 2; display: flex; align-items: center;
		justify-content: space-between; gap: 12px; padding: 14px 16px;
		background: var(--lc-superficie); border-bottom: 1px solid var(--lc-borde);
	}
	.lc-nav__titulo { font-weight: 800; font-size: .95rem; letter-spacing: .02em; color: var(--lc-texto-suave); text-transform: uppercase; }
	.lc-nav__cabecera button { color: var(--lc-tinta) !important; font-size: 1.15rem; }
	.lc-nav .lc-menu { flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0; }
	.lc-nav .lc-menu > li { border-bottom: 1px solid var(--lc-borde); position: relative; }
	.lc-nav .lc-menu > li > a {
		display: block; padding: 16px; font-size: 1rem; font-weight: 600;
		color: var(--lc-tinta); text-decoration: none; line-height: 1.3;
	}
	.lc-nav .lc-menu > li > a:hover { background: var(--lc-superficie-2); }
	.lc-nav .lc-menu .lc-submenu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; border-radius: 0; margin: 0; padding: 0 0 8px 16px;
		background: var(--lc-superficie-2); display: none;
	}
	.lc-nav .lc-menu li.lc-abierto > .lc-submenu { display: block; }
	.lc-nav .lc-menu .lc-submenu a { display: block; padding: 12px 16px; font-size: .95rem; color: var(--lc-texto-suave); border-bottom: 1px solid var(--lc-borde); }
	.lc-nav .lc-menu .lc-submenu li:last-child a { border-bottom: 0; }
	.lc-nav .lc-menu li:has(> .lc-submenu) > a { padding-right: 60px; }
	.lc-nav .lc-submenu-boton {
		position: absolute; top: 6px; right: 6px; width: 44px; height: 44px;
		min-height: 44px; border: 0; border-radius: 10px; background: none;
		color: var(--lc-texto-suave); cursor: pointer; font-size: 1.1rem;
	}
	.lc-nav .lc-submenu-boton:hover { background: var(--lc-superficie-2); color: var(--lc-tinta); }
}

/* Remate del cajón: los dos botones que de verdad importan */
@media (max-width: 1024px) {
	.lc-nav__pie { padding: 18px 16px 8px; border-top: 1px solid var(--lc-borde); display: grid; gap: 10px; margin-top: 8px; }
	.lc-nav__pie .lc-btn { width: 100%; justify-content: center; }
	/* La hamburguesa se convierte en X mientras el cajón está abierto */
	body.lc-menu-abierto .lc-hamburguesa__barras { background: transparent !important; }
	body.lc-menu-abierto .lc-hamburguesa__barras::before { top: 0 !important; transform: rotate(45deg); }
	body.lc-menu-abierto .lc-hamburguesa__barras::after { top: 0 !important; transform: rotate(-45deg); }
	body.lc-menu-abierto .lc-hamburguesa { color: var(--lc-tinta); }
}

/* El cajón solo existe en pantallas chicas: en PC no se muestran sus piezas */
.lc-nav__cabecera, .lc-nav__pie { display: none; }
@media (max-width: 1024px) {
	.lc-nav__cabecera { display: flex; }
	.lc-nav__pie { display: grid; }
}

/* ---------- 25. Cajón sin acordeón: todo a la vista ---------- */
@media (max-width: 1024px) {
	/* El botón de la X, grande y cómodo */
	.lc-nav__cabecera { padding: 10px 12px 10px 16px !important; }
	.lc-nav__cabecera button {
		width: 48px !important; height: 48px !important; min-height: 48px !important;
		display: inline-flex !important; align-items: center; justify-content: center;
		border-radius: 12px !important; background: var(--lc-superficie-2) !important;
		color: var(--lc-tinta) !important; font-size: 1.5rem !important; line-height: 1;
	}
	.lc-nav__cabecera button svg { width: 26px; height: 26px; }

	/* Sin acordeón: los submenús siempre abiertos, con su raya a la izquierda */
	.lc-nav .lc-menu .lc-submenu {
		display: block !important; position: static !important; opacity: 1 !important;
		visibility: visible !important; transform: none !important; box-shadow: none !important;
		border: 0 !important; border-radius: 0 !important; margin: 0 !important;
		padding: 0 0 10px !important; background: var(--lc-superficie-2) !important;
	}
	.lc-nav .lc-submenu-boton { display: none !important; }
	.lc-nav .lc-menu li:has(> .lc-submenu) > a { padding-right: 16px !important; }
	.lc-nav .lc-menu .lc-submenu a {
		display: block; padding: 12px 16px 12px 30px; font-size: .95rem;
		color: var(--lc-texto-suave); border-bottom: 1px solid var(--lc-borde);
		position: relative;
	}
	.lc-nav .lc-menu .lc-submenu a::before {
		content: ""; position: absolute; left: 16px; top: 50%; width: 6px; height: 6px;
		margin-top: -3px; border-radius: 50%; background: var(--lc-acento); opacity: .55;
	}
	.lc-nav .lc-menu .lc-submenu a:hover { background: var(--lc-superficie); color: var(--lc-tinta); }
	.lc-nav .lc-menu .lc-submenu li:last-child a { border-bottom: 0; }

}

/* ---------- 26. Cuenta en la cabecera ---------- */
.lc-cuenta { display: flex; align-items: center; }
.lc-cuenta__btn {
	display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px;
	border: 1px solid var(--lc-borde); border-radius: 999px;
	background: var(--lc-superficie); color: var(--lc-tinta);
	font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer;
	transition: border-color .2s, color .2s, background .2s;
}
.lc-cuenta__btn:hover, .lc-cuenta__btn[aria-expanded="true"] {
	border-color: var(--lc-azul); color: var(--lc-azul);
}
.lc-cuenta__caja { position: relative; }
.lc-cuenta__menu {
	position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px;
	background: var(--lc-superficie); border: 1px solid var(--lc-borde);
	border-radius: 14px; box-shadow: 0 20px 44px rgba(8, 20, 45, .18);
	padding: 8px; margin: 0; list-style: none; display: none; z-index: 70;
}
.lc-cuenta__menu[data-abierto="1"] { display: block; }
.lc-cuenta__menu a {
	display: block; padding: 10px 12px; border-radius: 9px;
	color: var(--lc-tinta); font-size: 15px; text-decoration: none;
}
.lc-cuenta__menu a:hover { background: var(--lc-superficie-2); color: var(--lc-azul); }
.lc-cuenta__menu hr { border: 0; height: 1px; background: var(--lc-borde); margin: 6px 4px; }
@media (max-width: 1024px) { .lc-cabecera__acciones > .lc-cuenta { display: none !important; } }

/* La cuenta dentro del cajón móvil */
.lc-nav__cuenta { padding: 16px; border-top: 1px solid var(--lc-borde); display: grid; gap: 10px; }
.lc-nav__cuenta .lc-cuenta__btn, .lc-nav__cuenta .lc-btn { width: 100%; justify-content: center; }
.lc-nav__cuenta__nombre { font-size: 15px; color: var(--lc-texto-suave); }

/* La cuenta del cajón solo existe en móvil: en PC vive en la cabecera */
.lc-nav__cuenta { display: none; }
@media (max-width: 1024px) { .lc-nav__cuenta { display: grid; } }

/* ---------- 27. Cabecera de PC: alto fijo y menú compacto ---------- */
@media (min-width: 1025px) {
	.lc-cabecera__in { min-height: 56px !important; padding-block: 0 !important; }
	.lc-nav .lc-menu { gap: 2px !important; }
	.lc-nav .lc-menu > li > a { padding: 8px 12px !important; font-size: 15px !important; line-height: 1.2 !important; }
	.lc-cabecera__acciones { gap: 10px !important; }
	.lc-cuenta__btn { padding: 8px 13px !important; font-size: 14.5px !important; }
}

/* ---------- 28. Barra de WordPress (solo con sesión) ---------- */
/* El nombre de usuario de la barra se salía del ancho en celular y
   arrastraba la página: se recorta y en móvil no se muestra. */
#wpadminbar { min-width: 0 !important; }
#wpadminbar .quicklinks { max-width: 100% !important; }
#wpadminbar #wp-admin-bar-my-account .display-name {
	display: inline-block; max-width: 120px; overflow: hidden;
	text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
@media (max-width: 782px) {
	#wpadminbar #wp-admin-bar-my-account .display-name { display: none; }
	body.admin-bar .lc-cabecera { top: var(--wp-admin--admin-bar--height, 46px); }
}
body.admin-bar.lc-portal-wp .lc-cabecera { top: var(--wp-admin--admin-bar--height, 32px); }

/* ---------- 29. Productos de WooCommerce dentro de Bricks ---------- */
/* La lista de productos hereda la sangría de listas del tema y el bloque
   se ve corrido a la derecha. Se anula solo en las listas de productos. */
ul.products, .products,
.brxe-woocommerce-products ul.products,
.brxe-products ul.products,
.wc-block-grid__products {
	margin-left: 0 !important; margin-right: 0 !important;
	padding-left: 0 !important; padding-right: 0 !important;
	list-style: none !important;
}
ul.products li.product,
.wc-block-grid__products li { margin-left: 0 !important; margin-right: 0 !important; }
.brxe-woocommerce-products { max-width: 100% !important; }