/* ============================================================================
   NúcleoFP — Sistema visual
   Hoja única de referencia: tokens, base, layout, componentes y responsive.
   Mantiene la identidad del proyecto: fondo oscuro, acento dorado (#FFBD00),
   tipografía Open Sauce Sans en todo el sitio.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. TIPOGRAFÍA (Open Sauce Sans, autoalojada)
   ---------------------------------------------------------------------------
   Los archivos están en frontend/fuentes/ y se sirven desde el propio dominio:
   sin dependencias de terceros ni peticiones extra a Google Fonts.

   · Peso 400 en formato WOFF: el paquete de origen (@fontsource/open-sauce-sans
     5.3.0) publica ese peso en woff2 con el archivo equivocado (es un PostScript
     Type 1, no una fuente web). El WOFF es válido y lo soportan todos los
     navegadores, así que se usa ese formato solo para el 400.
   · Pesos 500, 600 y 700 en woff2, que es más ligero.

   El subset es `latin`, que incluye tildes, ñ, ü, ¿, ¡, € y comillas
   tipográficas: comprobado carácter a carácter sobre la tabla cmap.
   Licencia SIL Open Font License (ver fuentes/LICENCIA.txt).
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Open Sauce Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fuentes/open-sauce-sans-latin-400-normal.woff') format('woff');
}
@font-face {
  font-family: 'Open Sauce Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fuentes/open-sauce-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sauce Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fuentes/open-sauce-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sauce Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fuentes/open-sauce-sans-latin-700-normal.woff2') format('woff2');
}

/* ---------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------ */
:root {
  /* Controles nativos (checkbox, select, scroll) en tema oscuro */
  color-scheme: dark;
  accent-color: var(--accent);

  /* Marca (identidad original, sin cambios de tono) */
  --accent: #FFBD00;
  --accent-hover: #FFD24D;
  --accent-soft: rgba(255, 189, 0, 0.12);
  --accent-contrast: #0B0B12;

  /* Fondos y superficies (escala ordenada; el fondo base no cambia) */
  --bg: #0B0B12;
  --bg-soft: #101018;
  --surface: #16161F;
  --surface-2: #1C1C27;
  --surface-3: #23232F;
  --input-bg: #0E0E16;

  /* Bordes: --border para separar bloques, --border-strong para controles
     (>= 3:1 frente a TODAS las superficies donde se usa: fondo, tarjeta,
     superficie 2, superficie 3 y campo de formulario; requisito WCAG 1.4.11 de
     contraste no textual). El valor anterior (#5F5F86) se quedaba en 2.56:1
     sobre --surface-3. */
  --border: #2B2B3B;
  --border-strong: #6B6B95;

  /* Texto */
  --text: #F2F1EA;
  --text-muted: #9C9CAD;   /* 7.26:1 sobre --bg, 6.65:1 sobre --surface  */
  --text-faint: #8A8A99;   /* 5.6:1 sobre --bg,  5.2:1 sobre --surface   */

  /* Estados */
  --danger: #FF8A8A;
  --danger-strong: #FF6B6B;
  --danger-soft: rgba(255, 107, 107, 0.12);
  --success: #6BFFA0;
  --success-soft: rgba(107, 255, 160, 0.12);
  --info: #9CC7FF;
  --info-soft: rgba(156, 199, 255, 0.12);

  /* Tipografía */
  --font-head: 'Open Sauce Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Open Sauce Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-2xs: 0.72rem;
  --fs-xs: 0.8rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: clamp(2rem, 3.4vw, 2.5rem);
  --fs-hero: clamp(2rem, 5vw, 3.4rem);

  --lh-tight: 1.1;
  --lh-head: 1.3;
  --lh-body: 1.65;

  /* Espaciado (escala única) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;

  /* Radios y sombras */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);

  /* Anchos de contenido */
  --w-form: 560px;
  --w-content: 820px;
  --w-wide: 960px;
  --w-max: 1180px;

  --header-h: 4.5rem;
  --transition: 150ms ease;

  /* Controles de la cabecera: [Ver ofertas] [Candidatos] [Empresas]
     [Accesibilidad] [Idioma] comparten UNA sola altura y UN solo padding
     vertical. La altura es explícita (no min-height) para que un texto más
     largo —«Accesibilidad», «Hizkuntza», «Irisgarritasuna»— no cambie la
     altura de ningún control ni desplace la fila. Se definen aquí las dos
     medidas y las usan todos los controles, incluidos los que cambian en móvil. */
  --control-alto: 2.5rem;
  --control-padding: 0.95rem;
}

/* ---------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main, .contenido-principal { flex: 1 0 auto; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-md); }
h4 { font-size: var(--fs-base); }

p { text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

img, svg, video { max-width: 100%; height: auto; }

strong, b { font-weight: 600; color: var(--text); }

ul, ol { list-style: none; }

hr { border: none; border-top: 1px solid var(--border); margin: var(--space-5) 0; }

/* Foco visible y consistente en TODA la aplicación (navegación por teclado) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* El outline nunca se elimina sin sustituto: se refuerza con el color del borde */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

::selection { background: var(--accent); color: var(--accent-contrast); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* El atributo `hidden` tiene que ganar SIEMPRE. Muchas reglas de esta hoja
   fijan un display propio (flex, grid, block, inline-flex) y, como el estilo
   del autor pesa más que el del navegador, el atributo dejaba de ocultar: el
   detalle de apoyo del perfil, el aviso de FP adaptada, «Limpiar filtros» o
   las sugerencias de Sena seguían a la vista cuando el guion los retiraba. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Utilidades de accesibilidad */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.saltar-contenido {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 500;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  font-weight: 600;
  transition: top var(--transition);
}
.saltar-contenido:focus { top: var(--space-4); }

/* ---------------------------------------------------------------------------
   3. LAYOUT: cabecera, navegación, pies y contenedores de página
   ------------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  min-height: var(--header-h);
  padding: var(--space-3) clamp(var(--space-4), 4vw, var(--space-6));
  background: rgba(11, 11, 18, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header .logo {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.site-header .logo img {
  display: block;
  height: 2rem;
  width: auto;
}
/* El logotipo es una imagen con la tinta en color claro y el fondo transparente,
   así que se integra directamente sobre el fondo oscuro de la cabecera. */
.site-header .logo:hover { opacity: 0.88; }

/* Cabecera: [Ver ofertas] [Candidatos] [Empresas] [Accesibilidad] [Idioma]
   El botón de accesibilidad lo añade accesibilidad.js y el de idioma
   idiomas.js, los dos como hermanos del <nav> (no pueden ir dentro:
   nav-sesion.js reescribe su contenido al iniciar sesión). Para que se vean
   como parte del mismo grupo, el <nav> se lleva el espacio libre y alinea sus
   enlaces a la derecha; los botones quedan pegados a ellos con la misma
   separación que hay entre enlaces. */
.site-header nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}

/* --- Estructura común de los controles de la cabecera ---------------------
   Una sola regla da la geometría a TODOS los controles de la cabecera:
   enlaces del menú, campana de notificaciones, botón de accesibilidad y
   selector de idioma. Así todos tienen exactamente la misma altura, el mismo
   padding vertical, el mismo tamaño de letra y el mismo radio, y quedan
   centrados en la misma fila con align-items:center. Cada control añade
   después solo su color y su borde. */
.site-header nav a,
.site-header .campana-btn,
.site-header .btn-accesibilidad,
.site-header .btn-idioma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-alto);
  padding: 0 var(--control-padding);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: var(--radius);
  text-decoration: none;
}

.site-header nav a {
  border: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.site-header nav a:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.site-header nav a.destacado {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
  font-weight: 600;
}
.site-header nav a.destacado:hover { background: var(--accent-hover); color: var(--accent-contrast); }
/* Página actual */
.site-header nav a.activo,
.site-header nav a[aria-current="page"] {
  color: var(--text);
  background: var(--surface-3);
  border-color: var(--border-strong);
}
.site-header nav a.destacado.activo,
.site-header nav a.destacado[aria-current="page"] {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

/* El enlace del avatar no es un control de texto: mantiene su forma redonda y
   no hereda la altura común de los controles de la cabecera. */
.site-header nav a.nav-avatar-link,
.site-header nav a.nav-avatar-link:hover {
  padding: 0;
  border: none;
  background: none;
  height: auto;
  min-height: auto;
}

/* Contenedores de página */
.pagina {
  width: 100%;
  max-width: var(--w-content);
  margin: 0 auto;
  padding: var(--space-7) clamp(var(--space-4), 4vw, var(--space-6)) 0;
}
.pagina--ancha { max-width: var(--w-wide); }
.pagina--completa { max-width: var(--w-max); }
.pagina--estrecha { max-width: var(--w-form); }

/* Cabecera de página: título + subtítulo, siempre alineados igual */
.pagina-cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--w-content);
  margin: 0 auto;
  padding: var(--space-7) clamp(var(--space-4), 4vw, var(--space-6)) var(--space-4);
}
.pagina-cabecera--ancha { max-width: var(--w-wide); }
.pagina-cabecera--completa { max-width: var(--w-max); }
.pagina-cabecera--centrada { flex-direction: column; align-items: center; text-align: center; }
.pagina-cabecera h1 { font-size: var(--fs-3xl); }
.pagina-cabecera .subtitulo,
.subtitulo {
  color: var(--text-muted);
  font-size: var(--fs-md);
  margin-top: var(--space-2);
  max-width: 62ch;
}
.pagina-cabecera .acciones { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Pie */
footer, .pie-sitio {
  flex-shrink: 0;
  margin-top: var(--space-9);
  padding: var(--space-6) clamp(var(--space-4), 4vw, var(--space-6));
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: center;
}
footer p { margin: 0; }
footer .pie-marca { color: var(--text); font-size: var(--fs-sm); }
footer .pie-legal { color: var(--text-faint); font-size: var(--fs-xs); margin-top: var(--space-3); }
footer .enlaces-legales,
.pie-sitio .enlaces-legales {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
footer .enlaces-legales a {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}
footer .enlaces-legales a:hover { color: var(--accent); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   4. BOTONES — jerarquía clara y tamaños coherentes
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0.7rem 1.4rem;
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-contrast); }
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--surface-3);
  border-color: var(--surface-3);
  color: var(--text-faint);
  cursor: not-allowed;
  transform: none;
}

/* Secundario: contorno neutro */
.btn-outline,
.btn-secundario {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-outline:hover,
.btn-secundario:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--accent);
}

/* Fantasma: solo texto (para acciones terciarias / volver) */
.btn-fantasma {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.btn-fantasma:hover { background: var(--surface-2); border-color: transparent; color: var(--text); }

/* Peligro: eliminar */
.btn-peligro,
.btn-borrar {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger-strong);
  font-size: var(--fs-sm);
  padding: 0.55rem 1.05rem;
  min-height: 2.4rem;
}
.btn-peligro:hover,
.btn-borrar:hover {
  background: var(--danger-strong);
  border-color: var(--danger-strong);
  color: var(--accent-contrast);
}

/* Confirmar / aprobar (acción positiva dentro de listas) */
.btn-aprobar {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
  font-size: var(--fs-sm);
  padding: 0.55rem 1.05rem;
  min-height: 2.4rem;
}
.btn-aprobar:hover { background: var(--accent); color: var(--accent-contrast); }

/* Tamaños */
.btn-sm { min-height: 2.15rem; padding: 0.4rem 0.85rem; font-size: var(--fs-sm); }
.btn-lg { min-height: 3.1rem; padding: 0.9rem 1.8rem; font-size: var(--fs-md); }
.btn-block { width: 100%; }

.btn-icono {
  min-height: 2.5rem;
  min-width: 2.5rem;
  padding: 0.4rem;
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}
.btn-icono:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

/* ---------------------------------------------------------------------------
   5. FORMULARIOS — mismo aspecto en toda la aplicación
   ------------------------------------------------------------------------ */
form { width: 100%; }

label,
.etiqueta {
  display: block;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
}

input, select, textarea {
  width: 100%;
  min-height: 2.85rem;
  padding: 0.75rem 0.9rem;
  background: var(--input-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.4;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
input:hover, select:hover, textarea:hover { border-color: var(--text-faint); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  background: var(--bg);
}
textarea { min-height: 7rem; resize: vertical; }

input::placeholder, textarea::placeholder { color: var(--text-faint); opacity: 1; }

input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-2);
  color: var(--text-faint);
  border-color: var(--border);
  cursor: not-allowed;
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C9CAD' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
}
select option { background: var(--surface); color: var(--text); }

input[type="checkbox"], input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  min-height: auto;
  accent-color: var(--accent);
  cursor: pointer;
}
input[type="file"] {
  min-height: auto;
  padding: 0.6rem;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
input[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  padding: 0.45rem 0.9rem;
  background: var(--surface-3);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--danger-strong);
}

/* Botón de envío: cubre los formularios que aún no usan .btn */
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.9rem;
  margin-top: var(--space-5);
  padding: 0.8rem 1.4rem;
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 600;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
button[type="submit"]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button[type="submit"]:active { transform: translateY(1px); }
button[type="submit"]:disabled {
  background: var(--surface-3);
  border-color: var(--surface-3);
  color: var(--text-faint);
  cursor: not-allowed;
  transform: none;
}
button { font-family: var(--font-body); font-size: var(--fs-base); }

/* Campo = etiqueta + control, siempre con el mismo ritmo */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.campo label { margin: 0; }
.campo input, .campo select, .campo textarea { margin: 0; }
.campo + .campo { margin-top: var(--space-4); }
.campo .ayuda-campo { margin-top: 0; }

.campo-password { position: relative; }
.campo-password input { padding-right: 4.5rem; }
.toggle-password {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  min-height: 2.1rem;
  padding: 0.35rem 0.7rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
}
.toggle-password:hover { color: var(--accent); border-color: var(--accent); }

.ayuda-campo,
.form-ayuda {
  display: block;
  margin-top: var(--space-2);
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.checkbox-condiciones {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-5) 0;
}
.checkbox-condiciones input { flex-shrink: 0; margin-top: 0.28rem; }
.checkbox-condiciones label {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
  cursor: pointer;
}

.condiciones-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0 var(--space-5);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}
.condiciones-box strong { color: var(--accent); }

/* ---------------------------------------------------------------------------
   Inclusión: compromiso de la empresa y necesidades de apoyo del candidato.
   La insignia es discreta a propósito: solo aparece cuando la empresa ha
   activado el compromiso en esa oferta concreta.
   ------------------------------------------------------------------------ */
.insignia-inclusion {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: var(--space-4) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.insignia-inclusion__icono {
  flex-shrink: 0;
  color: var(--accent);
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.insignia-inclusion--tarjeta {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* Candidatura ya enviada a esa oferta. La oferta sigue apareciendo en el
   listado con normalidad: esto solo avisa de que no se puede volver a enviar. */
.aviso-candidatura {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
}
.aviso-candidatura .icono { color: var(--accent); }

.bloque-inclusion,
.bloque-apoyo {
  min-width: 0;
  margin: var(--space-6) 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.bloque-inclusion { padding: var(--space-4) var(--space-5) var(--space-5); }
/* El bloque de apoyo del perfil lleva un <h2> dentro, así que necesita el mismo
   aire arriba que abajo para que el título no quede pegado al borde. */
.bloque-apoyo { padding: var(--space-5); }
/* El bloque de inclusión de la oferta sí usa <legend>; el de apoyo del perfil
   ya no (su título es un <h2> dentro de la tarjeta). */
.bloque-inclusion legend {
  padding: 0 var(--space-2);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.bloque-inclusion > p:first-of-type,
.bloque-apoyo > p:first-of-type { margin-top: 0; }
.bloque-inclusion h2 { font-size: var(--fs-lg); margin-bottom: var(--space-3); }

/* Título del bloque de apoyo del perfil, DENTRO del contenedor y como una
   sección más del formulario: separado de los bordes por el relleno de la
   tarjeta y separado de las opciones por su propio margen. Antes era un
   <legend>, que el navegador dibuja encima del borde y quedaba pegado. */
.bloque-apoyo__titulo {
  margin: 0 0 var(--space-2);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.35;
}
.bloque-apoyo .opciones-radio { margin-top: var(--space-5); }
.bloque-apoyo .campo-plegable { margin-top: var(--space-5); }

/* Campos que se despliegan al elegir una opción (detalle de apoyo). Aparecen
   con un movimiento corto; con «reduce motion» la animación global de arriba
   la deja en 0,01 ms. */
@keyframes aparecer-plegable {
  from { opacity: 0; transform: translateY(-0.25rem); }
  to { opacity: 1; transform: none; }
}
.campo-plegable:not([hidden]) { animation: aparecer-plegable 180ms ease-out; }

.lista-medidas {
  margin: var(--space-3) 0 0;
  padding-left: 1.15rem;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.inclusion-info {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.opciones-radio,
.opciones-check {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.opciones-check { flex-direction: row; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.opcion-radio,
.opcion-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
  cursor: pointer;
}
.opcion-radio input,
.opcion-check input { flex-shrink: 0; margin-top: 0.28rem; }
.etiqueta-grupo {
  margin: var(--space-5) 0 0;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Declaración de apoyo que ve la empresa en una candidatura recibida. */
.dato-apoyo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.olvido-password {
  display: block;
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: right;
}
.olvido-password:hover { color: var(--accent); }

.enlace-secundario {
  margin-top: var(--space-5);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: center;
}
.enlace-secundario a { color: var(--accent); font-weight: 600; }
.enlace-secundario a:hover { text-decoration: underline; }

.volver {
  display: block;
  margin-top: var(--space-5);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: center;
}
.volver:hover { color: var(--accent); }

/* Contenedor de la casilla de reCAPTCHA v2 (solo aparece si las claves son de v2) */
.zona-captcha {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.zona-captcha .ayuda-campo { margin: 0; }

/* La insignia flotante de reCAPTCHA se oculta porque el texto de atribución que
   exigen las condiciones de Google se muestra dentro del propio formulario
   (lo inserta recaptcha.js). Ocultarla sin esa atribución incumpliría las
   condiciones de uso de reCAPTCHA. */
.grecaptcha-badge { visibility: hidden; }

/* Texto de atribución de reCAPTCHA (obligatorio al ocultar la insignia) */
.atribucion-captcha {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}
.atribucion-captcha a { color: var(--text-muted); text-decoration: underline; }
.atribucion-captcha a:hover { color: var(--accent); }

/* ---------------------------------------------------------------------------
   6. MENSAJES Y AVISOS — mismo formato para errores, éxitos e información
   ------------------------------------------------------------------------ */
.mensaje-error,
.mensaje-exito,
.mensaje-info,
.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  line-height: 1.55;
  border: 1px solid transparent;
  border-radius: var(--radius);
}
.mensaje-icono { display: inline-flex; margin-top: 0.1rem; }
.mensaje-error,
.aviso--error {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(255, 107, 107, 0.35);
}
.mensaje-exito,
.aviso--exito {
  color: var(--success);
  background: var(--success-soft);
  border-color: rgba(107, 255, 160, 0.3);
}
.mensaje-info,
.aviso--info {
  color: var(--info);
  background: var(--info-soft);
  border-color: rgba(156, 199, 255, 0.3);
}
.mensaje-error a, .mensaje-exito a, .mensaje-info a { color: inherit; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   7. TARJETAS Y CONTENEDORES
   ------------------------------------------------------------------------ */
/* Panel equivalente al antiguo .admin-container (se mantiene el nombre para
   no romper ninguna página) */
.admin-container,
.panel {
  width: 100%;
  max-width: var(--w-form);
  margin: var(--space-5) auto;
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.admin-container h2,
.panel h2 {
  margin-bottom: var(--space-2);
  font-size: var(--fs-xl);
}
.admin-container h2 + .subtitulo { margin-top: 0; margin-bottom: var(--space-5); }
.admin-container--ancho,
.panel--ancho { max-width: var(--w-content); }
.admin-container--completo,
.panel--completo { max-width: var(--w-wide); }

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* Elementos de lista (ofertas, candidatos, alertas, postulaciones) */
.panel-oferta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.panel-oferta:last-child { margin-bottom: 0; }
.panel-oferta h3 { font-size: var(--fs-md); margin-bottom: var(--space-1); }
.panel-oferta p { color: var(--text-muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.panel-oferta strong { color: var(--text); }
.panel-oferta .acciones-item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
  align-items: center;
}

/* Rejilla de tarjetas (paneles de empresa/candidato) */
.dashboard-cards {
  display: grid;
  /* Escritorio: las cuatro tarjetas en una sola fila, todas de la misma altura */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--w-wide);
  margin: 0 auto var(--space-6);
  padding: 0 clamp(var(--space-4), 4vw, var(--space-6));
}
.dashboard-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  transition: border-color var(--transition), transform var(--transition), background var(--transition);
}
/* Icono arriba y título debajo: las cuatro tarjetas arrancan a la misma altura
   y el bloque se ve equilibrado aunque los títulos tengan largos distintos. */
.dashboard-card h2,
.dashboard-card h3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--text);
  font-size: var(--fs-md);
  line-height: 1.3;
}
.dashboard-card .icono-caja .icono { width: 1.25rem; height: 1.25rem; }
.dashboard-card p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; }
.dashboard-card:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* Ficha de candidato */
.candidato-card {
  display: flex;
  gap: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.candidato-card:last-child { margin-bottom: 0; }
.candidato-card .avatar-circle { flex-shrink: 0; }
.candidato-info { min-width: 0; }
.candidato-info h3 { font-size: var(--fs-md); margin-bottom: var(--space-1); }
.candidato-info p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-1);
  overflow-wrap: anywhere;
}
.candidato-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.candidato-tag,
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--accent);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.chip--neutro { color: var(--text-muted); }

/* Ofertas públicas */
.listado-ofertas { width: 100%; }
#listaOfertas,
.rejilla-ofertas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
  gap: var(--space-5);
  width: 100%;
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 0 clamp(var(--space-4), 4vw, var(--space-6)) var(--space-6);
  align-items: stretch;
}

/* Tarjeta de oferta */
.oferta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5) var(--space-4);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.oferta:hover,
.oferta:focus-within {
  border-color: rgba(255, 189, 0, 0.45);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.oferta-cabecera { display: flex; flex-direction: column; gap: var(--space-2); }
.oferta-fila-superior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.oferta-fecha { color: var(--text-faint); font-size: var(--fs-xs); white-space: nowrap; }
.oferta h3,
.oferta-titulo {
  font-size: 1.15rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.oferta .empresa,
.oferta-empresa {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.oferta .meta,
.oferta-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.oferta-meta span { display: inline-flex; align-items: center; gap: var(--space-2); }
.oferta .familia,
.oferta .chip {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--accent);
}
.oferta .detalles { color: var(--text-muted); font-size: var(--fs-sm); }
.oferta .descripcion,
.oferta-resumen {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.oferta-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.oferta-acciones .btn { flex: 1 1 12rem; }
.oferta .contacto {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.oferta .btn-detalle { margin-top: auto; }

/* Etiquetas de tipo de oferta y de familia */
.badge-practica,
.etiqueta-tipo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: 0.15rem 0.6rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-practica,
.etiqueta-tipo--practicas {
  background: var(--accent-soft);
  border-color: rgba(255, 189, 0, 0.35);
  color: var(--accent);
}

/* Estado de la oferta en el panel de empresa: abierta / cerrada / caducada */
.fila-etiquetas {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.estado-oferta {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.estado-oferta--abierta {
  background: var(--success-soft);
  border-color: rgba(107, 255, 160, 0.35);
  color: var(--success);
}
.estado-oferta--caducada {
  background: var(--danger-soft);
  border-color: rgba(255, 107, 107, 0.35);
  color: var(--danger);
}
.input-fecha-reapertura {
  min-height: 2.15rem;
  padding: 0.3rem 0.6rem;
  font-size: var(--fs-sm);
}

/* Iconos lineales */
.icono {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icono--pequeno { width: 0.95rem; height: 0.95rem; }
.icono--grande { width: 1.5rem; height: 1.5rem; }
.icono-caja {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  background: var(--accent-soft);
  border: 1px solid rgba(255, 189, 0, 0.3);
  border-radius: var(--radius);
  color: var(--accent);
}

/* Esqueletos de carga */
.esqueleto-tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.esqueleto-linea,
.esqueleto-bloque {
  background: linear-gradient(90deg, var(--surface-2) 20%, var(--surface-3) 50%, var(--surface-2) 80%);
  background-size: 220% 100%;
  border-radius: var(--radius-sm);
  animation: brillo 1.5s ease-in-out infinite;
}
.esqueleto-linea { height: 0.85rem; }
.esqueleto-linea--titulo { height: 1.3rem; width: 78%; }
.esqueleto-linea--media { width: 55%; }
.esqueleto-linea--corta { width: 34%; }
.esqueleto-bloque { height: 2.9rem; }
@keyframes brillo {
  0% { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .esqueleto-linea, .esqueleto-bloque { animation: none; }
}
.esqueleto-aviso {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  padding: var(--space-2) 0;
}

/* Filtros de la página de ofertas */
.pagina-titulo {
  width: 100%;
  max-width: var(--w-max);
  margin: 0 auto;
  padding: var(--space-7) clamp(var(--space-4), 4vw, var(--space-6)) 0;
}
.pagina-titulo h1 { font-size: var(--fs-3xl); }
.pagina-titulo > p { max-width: 68ch; }
.pagina-titulo .subtitulo { margin-top: var(--space-3); }
.pagina-titulo .introduccion { color: var(--text-muted); margin-top: var(--space-3); line-height: 1.7; }

/* Rejilla del bloque de filtros: título, los cuatro campos, la ayuda de la
   titulación, los botones y el contador. Cada pieza ocupa una fila o columna
   concreta, así que las etiquetas y los desplegables quedan siempre alineados
   y los espacios son los mismos en todo el bloque. */
.filtros {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-3) var(--space-4);
  width: 100%;
  max-width: var(--w-max);
  margin: 0 auto;
  padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-6)) var(--space-5);
}
.filtros-titulo {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text);
}
/* Los cuatro campos con el mismo ancho y la misma estructura interna
   (etiqueta arriba, desplegable abajo): nada puede desalinearlos. */
.filtros-izq {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-3) var(--space-4);
  min-width: 0;
}
.filtros .campo { margin: 0; min-width: 0; }
.filtros label { margin: 0; }
.filtros select { width: 100%; min-width: 0; }
/* La ayuda de «Titulación» va debajo de la fila entera y no dentro del campo:
   dentro, ese campo sería más alto y su desplegable quedaría descuadrado. */
.filtros-ayuda {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-faint);
  font-size: var(--fs-xs);
}
/* Los dos botones con la misma caja, sea cual sea su texto. Hace falta fijar
   aquí el tamaño porque el botón de envío arrastra el estilo general de
   `button[type="submit"]` (más alto, más ancho y con otro cuerpo de letra) y
   «Limpiar filtros» no, así que sin esto cada uno medía distinto. */
.filtros-acciones {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.filtros-acciones .btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 10.5rem;
  min-height: 2.6rem;
  margin: 0;
  padding: 0.55rem 1.05rem;
  font-size: var(--fs-sm);
  justify-content: center;
}
.filtros .btn { margin-top: 0; }
.filtros .filtros-info {
  grid-column: 2;
  margin: 0;
  align-self: center;
  text-align: right;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Estados de carga y vacío */
.estado-vacio,
.estado-cargando {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-5);
  color: var(--text-muted);
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  font-size: var(--fs-sm);
}
.estado-vacio strong { color: var(--text); font-size: var(--fs-md); font-family: var(--font-head); }
.estado-vacio p { max-width: 46ch; }
.estado-vacio .btn { margin-top: var(--space-4); }

/* Cabecera del listado de ofertas */
.cabecera-listado {
  width: 100%;
  max-width: var(--w-max);
  margin: 0 auto var(--space-5);
  padding: 0 clamp(var(--space-4), 4vw, var(--space-6));
}
.cabecera-listado h2 { font-size: var(--fs-xl); }
.cabecera-listado .subtitulo { margin-top: var(--space-2); }
.estado-cargando::before {
  content: '';
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   8. SUBNAVEGACIÓN (pestañas de empresa y candidato)
   ------------------------------------------------------------------------ */
.subnav-empresa,
.subnav-usuario {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  width: 100%;
  max-width: var(--w-wide);
  margin: var(--space-5) auto 0;
  padding: 0 clamp(var(--space-4), 4vw, var(--space-6));
}
.subnav-empresa a,
.subnav-usuario a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.subnav-empresa a:hover,
.subnav-usuario a:hover { color: var(--text); border-color: var(--border-strong); }
.subnav-empresa a.activo,
.subnav-usuario a.activo,
.subnav-empresa a[aria-current="page"],
.subnav-usuario a[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   9. MODAL
   ------------------------------------------------------------------------ */
.modal-fondo {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 400;
  padding: var(--space-5);
  background: rgba(6, 6, 10, 0.75);
  backdrop-filter: blur(3px);
  overflow-y: auto;
  align-items: flex-start;
  justify-content: center;
}
.modal-fondo.activo { display: flex; }
.modal-caja {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  margin: auto;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.modal-caja h2 { font-size: var(--fs-xl); margin-bottom: var(--space-2); padding-right: 2.5rem; }
.modal-caja .empresa { color: var(--text-muted); margin-bottom: var(--space-2); }
.modal-caja .detalles {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-4);
}
.modal-caja .detalle-linea { display: flex; align-items: center; gap: var(--space-2); }
.modal-caja .contacto-directo {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.modal-caja .contacto-directo:empty { display: none; }
.modal-caja .descripcion-completa {
  color: var(--text);
  line-height: 1.65;
  white-space: pre-line;
  margin-bottom: var(--space-5);
  overflow-wrap: anywhere;
}
.modal-cerrar {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.modal-cerrar:hover { color: var(--accent); border-color: var(--accent); }

/* ---------------------------------------------------------------------------
   10. AVATARES Y NOTIFICACIONES
   ------------------------------------------------------------------------ */
.avatar-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 50%;
  overflow: hidden;
}
.avatar-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-circle svg { width: 62%; height: 62%; color: var(--text-muted); }
.avatar-circle.grande { width: 80px; height: 80px; }
.avatar-circle--media { width: 56px; height: 56px; }

.campana-wrapper { position: relative; display: inline-flex; }
.campana-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-alto);
  min-height: var(--control-alto);
  min-width: var(--control-alto);
  padding: 0 0.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 1.05rem;
  cursor: pointer;
}
.campana-btn:hover { border-color: var(--accent); }
.punto-notif {
  position: absolute;
  top: -5px;
  right: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  background: var(--danger-strong);
  border-radius: var(--radius-pill);
  color: var(--accent-contrast);
  font-size: var(--fs-2xs);
  font-weight: 700;
}
.panel-notif {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  width: 320px;
  max-width: min(90vw, 320px);
  max-height: 400px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.panel-notif-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.panel-notif-cabecera button {
  background: none;
  border: none;
  color: var(--accent);
  font-size: var(--fs-xs);
  cursor: pointer;
  text-align: right;
}
.panel-notif-cabecera button:hover { text-decoration: underline; }
.item-notif {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}
.item-notif:last-child { border-bottom: none; }
.item-notif:hover { background: var(--surface-2); }
.item-notif.no-leida { background: var(--accent-soft); }
.item-notif p { font-size: var(--fs-sm); margin-bottom: var(--space-1); }
.item-notif span { font-size: var(--fs-2xs); color: var(--text-faint); }
.panel-notif .panel-vacio { padding: var(--space-4); color: var(--text-muted); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------------------
   11. PORTADA Y CONTENIDO LARGO
   ------------------------------------------------------------------------ */
/* Base de portada; la variante de conexión se define al final. */
.hero {
  width: 100%;
  max-width: var(--w-max);
  margin: 0 auto;
  padding: clamp(var(--space-8), 9vw, 7rem) clamp(var(--space-4), 4vw, var(--space-6)) var(--space-8);
  text-align: center;
}
.hero-interno { max-width: 62rem; margin: 0 auto; }
.hero h1 {
  max-width: 34ch;
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 auto var(--space-6);
}
.hero h1 .destacar { color: var(--accent); }
.hero .lead,
.hero p.lead {
  max-width: 60ch;
  margin: 0 auto var(--space-8);
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: 1.7;
}
.hero-ctas,
.cta-fila { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.hero-ctas { justify-content: center; }
.cta-fila { margin-top: var(--space-6); }
.cta-fila--centrada { justify-content: center; }

/* Secciones: mismo aire arriba y abajo en toda la página */
.seccion {
  width: 100%;
  max-width: var(--w-max);
  margin: 0 auto;
  padding: var(--space-9) clamp(var(--space-4), 4vw, var(--space-6));
}
.seccion-cabecera { max-width: 60ch; margin-bottom: var(--space-6); }
.seccion-cabecera h2 { font-size: var(--fs-xl); }
.seccion-cabecera .subtitulo { margin-top: var(--space-2); }
.seccion-cabecera p { color: var(--text-muted); line-height: 1.7; }

/* Qué es NúcleoFP: un único bloque de texto centrado en la página, con la
   primera línea de entrada y los párrafos separados para que se lea con calma */
.presentacion {
  max-width: 44rem;
  margin: 0 auto;
  border-top: 1px solid var(--border);
  padding-top: var(--space-7);
}
.presentacion h2 {
  font-size: var(--fs-2xl);
  line-height: 1.2;
  margin-bottom: var(--space-5);
}
.presentacion p {
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1.8;
  margin-bottom: var(--space-5);
}
.presentacion p:last-child { margin-bottom: 0; }
.presentacion .presentacion-entrada {
  margin-bottom: var(--space-6);
  color: var(--text);
  font-size: var(--fs-md);
  line-height: 1.7;
}
.enlace-empresas {
  margin-top: var(--space-5);
  font-size: var(--fs-sm) !important;
  color: var(--text-faint) !important;
}
.enlace-empresas strong { color: var(--text); font-weight: 600; }

.legal-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-7) clamp(var(--space-4), 4vw, var(--space-6));
}
.legal-container h1 { font-size: var(--fs-2xl); margin-bottom: var(--space-2); }
.legal-container .fecha { color: var(--text-faint); font-size: var(--fs-sm); margin-bottom: var(--space-6); }
.legal-container h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  color: var(--accent);
  font-size: var(--fs-lg);
}
.legal-container p,
.legal-container li { color: var(--text-muted); line-height: 1.75; margin-bottom: var(--space-3); }
.legal-container ul { padding-left: var(--space-5); list-style: disc; }
.legal-container li::marker { color: var(--accent); }
.legal-container strong { color: var(--text); }

/* ---------------------------------------------------------------------------
   12. CHAT DE MENSAJES (postulaciones)
   ------------------------------------------------------------------------ */
.chat-caja {
  max-height: 280px;
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-y: auto;
}
.chat-caja p { color: var(--text-muted); font-size: var(--fs-sm); }
.chat-msg {
  max-width: 85%;
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.chat-msg:last-child { margin-bottom: 0; }
.chat-msg.propio { margin-left: auto; background: var(--accent); color: var(--accent-contrast); }
.chat-msg.otro { background: var(--surface-3); border: 1px solid var(--border); color: var(--text); }
.chat-form { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.chat-form input { flex: 1; margin: 0; }
.chat-form button[type="submit"] { width: auto; margin-top: 0; padding: 0 1.2rem; }

/* Selector de estado dentro de una tarjeta */
label + select.selector-estado { margin-top: var(--space-1); }
select.selector-estado { max-width: 260px; }

/* ---------------------------------------------------------------------------
   13. RESPONSIVE
   ------------------------------------------------------------------------ */

/* Portátil */
@media (max-width: 1080px) {
  .filtros select { max-width: none; }
  /* Filtros: dos columnas antes de pasar a una sola */
  .filtros-izq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Panel de empresa: 2 × 2 antes de quedarse en una sola columna */
  .dashboard-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet */
@media (max-width: 860px) {
  :root { --header-h: 4rem; }
  .pagina-cabecera { padding-top: var(--space-6); }
  .modal-caja { padding: var(--space-5); }
  .subnav-empresa a,
  .subnav-usuario a { flex: 1 1 auto; justify-content: center; text-align: center; }
}

/* Móvil */
@media (max-width: 620px) {
  :root { --fs-2xl: 1.6rem; --control-alto: 2.35rem; --control-padding: 0.7rem; }

  .site-header {
    align-items: center;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }
  .site-header nav { gap: var(--space-1); }
  .site-header nav a { font-size: var(--fs-xs); }

  .hero { padding: var(--space-7) var(--space-4) var(--space-8); }
  .hero h1 { max-width: none; font-size: clamp(2rem, 9vw, 2.6rem); }
  .hero .lead { font-size: var(--fs-base); }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }

  .seccion { padding: var(--space-8) var(--space-4); }
  .seccion-cabecera { margin-bottom: var(--space-5); }
  .seccion-cabecera h2 { font-size: var(--fs-lg); }
  .presentacion { padding-top: var(--space-6); }
  .cta-fila .btn { width: 100%; }

  /* Panel de empresa: una tarjeta por línea para que se lean cómodas */
  .dashboard-cards { grid-template-columns: minmax(0, 1fr); }
  .dashboard-card { padding: var(--space-4) var(--space-5); }

  .pagina,
  .pagina-cabecera,
  .legal-container { padding-left: var(--space-4); padding-right: var(--space-4); }
  .pagina-cabecera { flex-direction: column; align-items: flex-start; }

  .admin-container,
  .panel { padding: var(--space-5) var(--space-4); border-radius: var(--radius); }

  /* Filtros: a una columna, cómodos con el pulgar */
  .filtros { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: var(--space-3); }
  .filtros-izq { grid-template-columns: minmax(0, 1fr); }
  .filtros-acciones { grid-column: 1; flex-direction: column; align-items: stretch; }
  .filtros-acciones .btn { width: 100%; min-width: 0; }
  .filtros .filtros-info { grid-column: 1; margin: 0; text-align: left; }

  #listaOfertas { padding: 0 var(--space-4) var(--space-6); gap: var(--space-4); grid-template-columns: 1fr; }
  .oferta { padding: var(--space-5) var(--space-4) var(--space-4); }
  .oferta-acciones .btn { flex: 1 1 100%; }
  .candidato-card { flex-direction: column; }

  .panel-notif { right: auto; left: 0; width: min(92vw, 320px); }

  .modal-fondo { padding: 0; align-items: flex-end; }
  .modal-caja {
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .chat-form { flex-direction: column; }
  .chat-form button[type="submit"] { width: 100%; }
  .chat-msg { max-width: 100%; }
}

/* Móvil pequeño */
@media (max-width: 420px) {
  /* El grupo [Ver ofertas] [Candidatos] [Empresas] [Accesibilidad] va en su
     propia fila, centrado y en dos líneas si hace falta: nada se sale de la
     pantalla ni queda descolgado del resto de la navegación. */
  .site-header {
    justify-content: center;
    gap: var(--space-2) var(--space-3);
  }
  .site-header .logo { flex: 1 1 100%; text-align: center; }
  .site-header .logo img { height: 1.75rem; margin: 0 auto; }
  .site-header nav { flex: 0 1 auto; justify-content: center; }
  .btn-accesibilidad__texto { display: inline; }
  .btn-idioma__texto { display: inline; }
  .pagina-cabecera h1 { font-size: 1.6rem; }
  .hoja-cabecera-acciones,
  .pagina-cabecera .acciones { width: 100%; }
  .pagina-cabecera .acciones .btn { width: 100%; }
  .subnav-empresa a,
  .subnav-usuario a { flex: 1 1 100%; }
  button[type="submit"] { font-size: var(--fs-base); }
}

/* ---------------------------------------------------------------------------
   14. PÁGINA PÚBLICA DE UNA OFERTA (se renderiza en el servidor)
   ------------------------------------------------------------------------ */
.migas {
  width: 100%;
  max-width: var(--w-max);
  margin: 0 auto;
  padding: var(--space-5) clamp(var(--space-4), 4vw, var(--space-6)) 0;
}
.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--text-faint);
  font-size: var(--fs-sm);
}
.migas li + li::before {
  content: '/';
  margin-right: var(--space-2);
  color: var(--border-strong);
}
.migas a { color: var(--text-muted); text-decoration: none; }
.migas a:hover { color: var(--accent); text-decoration: underline; }
.migas li[aria-current="page"] { color: var(--text); }

.ficha-oferta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-7);
}
.dato-oferta {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.dato-oferta dt {
  color: var(--text-faint);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dato-oferta dd {
  margin: var(--space-2) 0 0;
  color: var(--text);
  font-size: var(--fs-md);
  line-height: 1.4;
}

/* Solo los encabezados que son hijos directos de la sección (página de
   oferta): en la portada los <h2> van dentro de .seccion-cabecera y no
   deben cambiar de aspecto. */
.seccion > h2 { margin-top: var(--space-8); }
.seccion > h2:first-of-type { margin-top: 0; }

.descripcion-oferta {
  max-width: 72ch;
  color: var(--text-muted);
  line-height: 1.75;
}
.descripcion-oferta p { margin: 0 0 var(--space-4); }

.texto-ayuda { color: var(--text-muted); max-width: 68ch; }
.texto-ayuda a { color: var(--accent); }
.contacto-oferta { margin: var(--space-4) 0; }
#zonaPostular:not(:empty) { margin-top: var(--space-5); }
#mensajePostular:not(:empty) {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.volver-listado { margin-top: var(--space-8); }
.volver-listado a { color: var(--text-muted); text-decoration: none; }
.volver-listado a:hover { color: var(--accent); text-decoration: underline; }

/* El título de cada tarjeta del listado es un enlace real a la oferta: se ve
   como el resto de títulos y se subraya al pasar por encima. */
.oferta-titulo-enlace { color: inherit; text-decoration: none; }
.oferta-titulo-enlace:hover,
.oferta-titulo-enlace:focus-visible { color: var(--accent); text-decoration: underline; }

/* Paginación del listado cuando hay más ofertas de las que caben en una página */
.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--w-max);
  margin: var(--space-7) auto 0;
  padding: 0 clamp(var(--space-4), 4vw, var(--space-6));
}
.paginacion-info { color: var(--text-muted); font-size: var(--fs-sm); }

/* Estado "ya te has postulado": la oferta sigue visible, pero no se ofrece
   volver a postularse. */
.ya-postulado {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--text-muted);
  font-weight: 600;
}
.ya-postulado .icono { color: var(--accent); }
.ya-postulado + .texto-ayuda { margin-top: var(--space-3); }

/* Estados de una candidatura vista por el candidato (Mis postulaciones).
   Reutilizan el mismo chip que el estado de una oferta en el panel de empresa. */
.estado-oferta--pendiente { color: var(--text-muted); }
.estado-oferta--revision {
  background: var(--info-soft);
  border-color: rgba(156, 199, 255, 0.35);
  color: var(--info);
}
.estado-oferta--entrevista {
  background: var(--accent-soft);
  border-color: rgba(255, 189, 0, 0.35);
  color: var(--accent);
}
.estado-oferta--aceptada {
  background: var(--success-soft);
  border-color: rgba(107, 255, 160, 0.35);
  color: var(--success);
}
.estado-oferta--rechazada {
  background: var(--danger-soft);
  border-color: rgba(255, 107, 107, 0.35);
  color: var(--danger);
}
.postulacion-fecha { color: var(--text-faint); font-size: var(--fs-xs); }

/* Aviso del menú cuando el navegador tiene dos sesiones abiertas a la vez */
.aviso-rol {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   15. IMPRESIÓN
   ------------------------------------------------------------------------ */
@media print {
  .site-header, footer, .btn, button { display: none !important; }
  body { background: #fff; color: #000; }
  .admin-container, .panel, .oferta { border-color: #ccc; box-shadow: none; }
}

/* ---------------------------------------------------------------------------
   16. SENA — ASISTENTE DE CONSULTAS (PANEL DE EMPRESA)
   ---------------------------------------------------------------------------
   Chat de la página empresa-asistente.html. Reutiliza los tokens del sistema
   (fondo oscuro, acento dorado) y las tarjetas .candidato-card que ya usa el
   buscador de candidatos, para que los resultados se vean igual en toda la
   zona de empresa.
   ------------------------------------------------------------------------ */
.asistente-aviso-legal {
  margin-bottom: var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.asistente-aviso-legal p { margin: 0 0 var(--space-2); }
.asistente-aviso-legal p:last-child { margin-bottom: 0; }

.sena {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}

.sena-cabecera {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.sena-cabecera strong { display: block; }
.sena-estado { font-size: var(--fs-xs); color: var(--text-muted); }
.sena-limpiar { margin-left: auto; }

.sena-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.sena-avatar svg,
.sena-mensaje-avatar svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sena-chat {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: 62vh;
  overflow-y: auto;
}
.sena--inactiva .sena-chat { max-height: none; }

.sena-mensaje { display: flex; gap: var(--space-3); align-items: flex-start; }
.sena-mensaje--empresa { flex-direction: row-reverse; }

.sena-mensaje-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.sena-mensaje--sena .sena-mensaje-avatar { background: var(--accent-soft); color: var(--accent); }

.sena-mensaje-cuerpo {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-3) var(--space-4);
  max-width: min(780px, 100%);
  overflow-wrap: anywhere;
}
.sena-mensaje--empresa .sena-mensaje-cuerpo {
  background: var(--accent-soft);
  border-color: rgba(255, 189, 0, 0.35);
}

.sena-texto { margin: 0 0 var(--space-2); white-space: pre-line; }
.sena-texto:last-child { margin-bottom: 0; }

.sena-aviso {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 6px;
  font-size: var(--fs-sm);
}

.sena-error { margin: 0; color: var(--danger); }
.sena-dato { color: var(--text-muted); font-size: var(--fs-sm); }

.sena-resultados {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.sena-resultados .candidato-card { margin-bottom: 0; }

.sena-tarjeta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--space-3) var(--space-4);
}
.sena-tarjeta p { margin: 0 0 var(--space-1); }
.sena-tarjeta p:last-child { margin-bottom: 0; }

/* Ejemplos de preguntas: cada uno es una tarjeta pulsable independiente, con
   su propio borde y espaciado, para que no se lean como un párrafo seguido. */
.sena-ejemplos {
  padding: 0 var(--space-4) var(--space-4);
}
.sena-ejemplos-titulo {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.sena-sugerencias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.sena-sugerencia {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
/* Punto dorado: separa visualmente cada ejemplo del siguiente */
.sena-sugerencia::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.sena-sugerencia:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.sena-sugerencia:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sena-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  padding: var(--space-4);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
/* Cuadro de la pregunta: alto y cómodo, con varias líneas visibles. Crece solo
   con el texto hasta 15rem (el mismo tope que aplica el guion de la página), así
   que no hace falta arrastrar la esquina para agrandarlo. */
.sena-form textarea {
  flex: 1 1 12rem;
  width: 100%;
  min-height: 7.5rem;
  max-height: 15rem;
  resize: none;
  line-height: 1.5;
}
.sena-form .btn { flex: 0 0 auto; min-width: 8.5rem; }
/* El atributo hidden no hace nada frente a un display:flex del propio autor, y
   el guion de la página lo usa para retirar el formulario cuando Sena no está
   disponible. Sin esta regla el cuadro seguiría a la vista y sin servicio. */
.sena-form[hidden] { display: none; }
.sena-ayuda {
  flex: 1 1 100%;
  margin: 0;
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.sena-pie {
  margin: 0;
  padding: 0 var(--space-4) var(--space-4);
  background: var(--surface-2);
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

/* Etiqueta solo para lectores de pantalla */
.sena .oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .sena-cabecera { flex-wrap: wrap; }
  .sena-limpiar { margin-left: 0; }
  .sena-chat { max-height: none; }
  .sena-ejemplos { padding: 0 var(--space-3) var(--space-3); }
  .sena-sugerencias { gap: var(--space-2); }
  /* Cada ejemplo ocupa su propia línea: se lee y se pulsa sin confusión */
  .sena-sugerencia { flex: 1 1 100%; }
  .sena-form { flex-direction: column; align-items: stretch; }
  .sena-form textarea { min-height: 9rem; }
  .sena-form .btn { width: 100%; }
  .sena-ayuda { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------------------
   16. ACCESIBILIDAD — teclado, lector de pantalla y preferencias del usuario
   ---------------------------------------------------------------------------
   Todo lo de este bloque funciona SIN JavaScript salvo las clases `a11y-*`,
   que las pone el panel de accesibilidad (frontend/accesibilidad.js) en <html>.
   La accesibilidad de base (saltos, etiquetas, foco visible, semántica) está en
   el propio HTML: el panel es una mejora para quien la necesita, no el único
   camino hacia ella.

   La escala del texto se guarda en la variable --escala-texto y se aplica al
   tamaño base del documento. Como el resto de la hoja está en `rem`, crece o
   mengua todo de forma proporcional (texto y espaciados), sin recortes.
   ------------------------------------------------------------------------ */

html {
  font-size: calc(100% * var(--escala-texto, 1));
  /* Al saltar a un ancla o al enfocar con el tabulador, la cabecera pegajosa no
     debe tapar el destino: se reserva su altura al desplazar la página. */
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

/* Ningún elemento fijo puede ocultar por completo lo que recibe el foco. */
a, button, input, select, textarea, summary, [tabindex], h1, h2, h3, section {
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}

/* --- Enlace «Saltar al contenido principal» ------------------------------- */
/* Oculto a la vista, visible en cuanto recibe el foco con el teclado. */
.saltar-contenido:focus,
.saltar-contenido:focus-visible {
  top: var(--space-4);
  box-shadow: var(--shadow-md);
  text-decoration: underline;
}
/* El destino del salto no es un control: no necesita anillo de foco. */
main:focus,
main:focus-visible { outline: none; }

/* --- Botón del panel de accesibilidad (en la cabecera) -------------------- */
/* Cuarto elemento del grupo de la cabecera. Es un .btn-sm como los demás
   controles de la cabecera, con su misma altura, radio y tamaño de letra, para
   que [Ver ofertas] [Candidatos] [Empresas] [Accesibilidad] queden alineados. */
.btn-accesibilidad {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.btn-accesibilidad:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.btn-accesibilidad .icono { color: var(--accent); }
.btn-accesibilidad[aria-expanded="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* --- Selector de idioma (en la cabecera) ---------------------------------- */
/* Quinto elemento del grupo. El botón usa la misma estructura común de
   controles (altura, padding, letra y radio idénticos a «Accesibilidad»).
   El menú se abre DEBAJO, en posición absoluta: al desplegarse no ocupa sitio
   en el flujo, así que la cabecera no cambia de alto ni se desplaza nada. */
.idioma {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.btn-idioma {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.btn-idioma:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.btn-idioma .icono { color: var(--accent); }
.btn-idioma[aria-expanded="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.idioma-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 620;
  width: max-content;
  min-width: 13rem;
  max-width: min(92vw, 20rem);
  max-height: min(70vh, 26rem);
  overflow-y: auto;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: left;
}
.idioma-menu[hidden] { display: none; }
.idioma-menu__titulo {
  margin: 0 0 var(--space-2);
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.idioma-lista { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.idioma-opcion {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0.45rem 0.5rem;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.idioma-opcion:hover { color: var(--text); background: var(--surface-2); border-color: var(--border); }
/* El idioma elegido se marca con una señal visible (una marca de verificación)
   además del color: nunca se depende solo del color para dar la información. */
.idioma-opcion__marca {
  display: inline-flex;
  flex-shrink: 0;
  width: 1rem;
  color: var(--accent);
  visibility: hidden;
}
.idioma-opcion[aria-current="true"] {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border-strong);
  font-weight: 700;
}
.idioma-opcion[aria-current="true"] .idioma-opcion__marca { visibility: visible; }
.idioma-nota {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: var(--fs-xs);
  line-height: 1.55;
}

/* --- Panel de opciones ---------------------------------------------------- */
.a11y-panel {
  position: fixed;
  top: calc(var(--header-h) + var(--space-2));
  right: clamp(var(--space-3), 3vw, var(--space-6));
  z-index: 600;
  width: min(94vw, 360px);
  max-height: min(86vh, 680px);
  overflow-y: auto;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: left;
}
.a11y-panel__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.a11y-panel__titulo { margin: 0; font-size: var(--fs-lg); }
.a11y-panel__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  margin: -0.35rem -0.35rem 0 0;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.a11y-panel__cerrar:hover { color: var(--accent); border-color: var(--border-strong); }
.a11y-panel__intro {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.55;
}
.a11y-grupo {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border: none;
  border-top: 1px solid var(--border);
}
.a11y-etiqueta {
  display: block;
  margin: 0 0 var(--space-2);
  padding: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.a11y-escala { display: flex; align-items: center; gap: var(--space-3); }
.a11y-escala .btn { flex: 0 0 auto; min-width: 3.4rem; font-weight: 700; }
.a11y-valor {
  min-width: 3.6rem;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.a11y-opcion { display: flex; align-items: flex-start; gap: var(--space-3); padding: 0.3rem 0; }
.a11y-opcion input[type="checkbox"] { margin: 0.2rem 0 0; flex-shrink: 0; }
.a11y-opcion label {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.a11y-panel .btn-block { margin-top: var(--space-4); }
.a11y-panel__sistema,
.a11y-panel__ayuda {
  margin-top: var(--space-3);
  color: var(--text-faint);
  font-size: var(--fs-xs);
  line-height: 1.55;
}
.a11y-panel a { text-decoration: underline; }

/* --- Secciones y avisos del panel ----------------------------------------- */
.a11y-seccion {
  margin-top: var(--space-5);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border-strong);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.a11y-nota {
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.a11y-ayuda-corta { color: var(--text-faint); font-size: var(--fs-xs); }
.a11y-opcion label { display: flex; flex-direction: column; gap: 0.1rem; }
.a11y-opcion input[type="radio"] { margin: 0.25rem 0 0; flex-shrink: 0; }

/* --- Lectura por voz ------------------------------------------------------ */
.a11y-voz-botones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.a11y-voz-botones .btn { display: inline-flex; align-items: center; gap: var(--space-2); }
.a11y-voz-estado {
  margin: var(--space-3) 0 0;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.a11y-voz-ajustes { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-3); }
.a11y-voz-campo + .a11y-voz-campo { margin-top: 0; }
.a11y-voz-campo label { font-size: var(--fs-sm); }
.a11y-voz-campo select { width: 100%; }

@media (max-width: 620px) {
  .btn-accesibilidad__texto { display: none; }
  .btn-idioma__texto { display: none; }
  /* El menú de idioma cabe siempre: se coloca pegado al borde derecho del
     botón y nunca es más ancho que la pantalla. */
  .idioma-menu { right: 0; left: auto; }
  .a11y-panel { top: auto; bottom: 0; right: 0; left: 0; width: 100%; max-height: 88vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* --- Espaciado entre letras, palabras y líneas (WCAG 1.4.12) -------------- */
html.a11y-espaciado-letras body { letter-spacing: 0.06em; }
html.a11y-espaciado-letras .insignia-inclusion,
html.a11y-espaciado-letras .etiqueta-tipo,
html.a11y-espaciado-letras .chip { letter-spacing: 0.06em; }

html.a11y-espaciado-palabras body { word-spacing: 0.16em; }

html.a11y-espaciado-lineas body { line-height: 1.95; }
html.a11y-espaciado-lineas p,
html.a11y-espaciado-lineas li,
html.a11y-espaciado-lineas dd,
html.a11y-espaciado-lineas label,
html.a11y-espaciado-lineas .texto-ayuda,
html.a11y-espaciado-lineas .oferta-resumen,
html.a11y-espaciado-lineas .descripcion-oferta { line-height: 1.95; }
html.a11y-espaciado-lineas h1,
html.a11y-espaciado-lineas h2,
html.a11y-espaciado-lineas h3 { line-height: 1.5; }

/* --- Texto en negrita ----------------------------------------------------- */
/* Todo el texto gana peso para leerse mejor. Los encabezados mantienen su
   jerarquía porque ya son más grandes y siguen siendo los más gruesos. */
html.a11y-texto-negrita body { font-weight: 600; }
html.a11y-texto-negrita h1,
html.a11y-texto-negrita h2,
html.a11y-texto-negrita h3 { font-weight: 800; }
html.a11y-texto-negrita strong,
html.a11y-texto-negrita .btn { font-weight: 700; }

/* --- Resaltar los enlaces ------------------------------------------------- */
/* Los enlaces se subrayan siempre; los controles con aspecto de botón no,
   porque ya se distinguen por su forma y su color, así que se les pone un
   contorno propio: se resaltan enlaces Y botones, sin confundirlos. */
html.a11y-enlaces a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 2px;
}
html.a11y-enlaces a.btn,
html.a11y-enlaces a.btn-outline,
html.a11y-enlaces a.btn-lg,
html.a11y-enlaces a.btn-sm,
html.a11y-enlaces a.btn-block { text-decoration: none; }
html.a11y-enlaces .btn,
html.a11y-enlaces button.btn,
html.a11y-enlaces .btn-idioma,
html.a11y-enlaces .idioma-opcion {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* --- Reducir movimiento y parpadeos (además de la preferencia del sistema) - */
html.a11y-sin-animacion { scroll-behavior: auto !important; }
html.a11y-sin-animacion *,
html.a11y-sin-animacion *::before,
html.a11y-sin-animacion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
/* Nada que parpadee ni que se mueva solo. */
html.a11y-sin-animacion .esqueleto-tarjeta,
html.a11y-sin-animacion .esqueleto-linea,
html.a11y-sin-animacion .esqueleto-bloque {
  animation: none !important;
  background-image: none !important;
  background: var(--surface-2) !important;
}
/* El indicador de carga gira en bucle: con esta opción se queda quieto en su
   sitio, así no hay ningún elemento en movimiento permanente. */
html.a11y-sin-animacion .estado-cargando::before { animation: none !important; }

/* --- Alto contraste ------------------------------------------------------- */
html.a11y-contraste {
  --bg: #000000;
  --bg-soft: #000000;
  --surface: #000000;
  --surface-2: #0B0B0B;
  --surface-3: #171717;
  --input-bg: #000000;
  --border: #909090;
  --border-strong: #FFFFFF;
  --text: #FFFFFF;
  --text-muted: #F0F0F0;
  --text-faint: #DCDCDC;
  --accent: #FFD24D;
  --accent-hover: #FFE28C;
  --accent-soft: rgba(255, 210, 77, 0.22);
  --accent-contrast: #000000;
  --danger: #FFB4B4;
  --danger-strong: #FF8A8A;
  --danger-soft: rgba(255, 138, 138, 0.18);
  --success: #A9FFC6;
  --success-soft: rgba(169, 255, 198, 0.16);
  --info: #C8DEFF;
  --info-soft: rgba(200, 222, 255, 0.16);
}
html.a11y-contraste *,
html.a11y-contraste *::before,
html.a11y-contraste *::after {
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.a11y-contraste .site-header { background: #000000; }
html.a11y-contraste .oferta:hover,
html.a11y-contraste .oferta:focus-within { transform: none; }
html.a11y-contraste a { text-decoration: underline; }
html.a11y-contraste a.btn,
html.a11y-contraste a.btn-outline,
html.a11y-contraste a.btn-lg,
html.a11y-contraste a.btn-sm,
html.a11y-contraste a.btn-block { text-decoration: none; }
html.a11y-contraste :focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
html.a11y-contraste input,
html.a11y-contraste select,
html.a11y-contraste textarea { border-width: 2px; }
html.a11y-contraste .btn { border-width: 2px; }
html.a11y-contraste .btn-idioma,
html.a11y-contraste .idioma-opcion { border-width: 2px; }

/* --- Filtros para daltonismo ---------------------------------------------- */
/* Son matrices de color aplicadas con CSS `filter` sobre <body>.
   Se aplican al cuerpo y NO a <html> a propósito: un `filter` en la raíz crea
   un bloque contenedor y rompería la posición `fixed` de la cabecera, del
   panel y de los modales. Así el panel de opciones (que se añade a <body> por
   fuera del cuerpo de la página) queda siempre legible y sin filtrar.
   Matrices según los modelos clásicos de simulación de dicromacia. */
html[data-a11y-daltonismo="protanopia"] body {
  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="f"><feColorMatrix type="matrix" values="0.567 0.433 0 0 0 0.558 0.442 0 0 0 0 0.242 0.758 0 0 0 0 0 1 0"/></filter></svg>#f');
}
html[data-a11y-daltonismo="deuteranopia"] body {
  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="f"><feColorMatrix type="matrix" values="0.625 0.375 0 0 0 0.7 0.3 0 0 0 0 0.3 0.7 0 0 0 0 0 1 0"/></filter></svg>#f');
}
html[data-a11y-daltonismo="tritanopia"] body {
  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="f"><feColorMatrix type="matrix" values="0.95 0.05 0 0 0 0 0.433 0.567 0 0 0 0.475 0.525 0 0 0 0 0 1 0"/></filter></svg>#f');
}
html[data-a11y-daltonismo="monocromo"] body { filter: grayscale(1); }

/* --- Modo de lectura ----------------------------------------------------- */
/* Quita ruido visual (sombras, degradados y adornos) y deja el texto ancho y
   aireado. No esconde nada con función: la navegación sigue completa. */
html.a11y-lectura .site-header {
  position: static;
  background: var(--bg-soft);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.a11y-lectura body {
  line-height: 1.95;
  letter-spacing: 0.025em;
  word-spacing: 0.12em;
  font-weight: 500;
}
html.a11y-lectura .icono,
html.a11y-lectura .esqueleto-tarjeta,
html.a11y-lectura .esqueleto-linea,
html.a11y-lectura .esqueleto-bloque { display: none; }
/* El icono del panel de accesibilidad y el de su botón de cerrar NO son
   adornos: en pantallas estrechas son lo único visible del botón, así que se
   mantienen aunque el modo de lectura quite el resto de iconos. */
html.a11y-lectura .btn-accesibilidad .icono,
html.a11y-lectura .a11y-panel__cerrar .icono,
html.a11y-lectura .a11y-voz-botones .icono { display: block; }
/* Lo mismo con el selector de idioma: en pantallas estrechas su globo es lo
   único visible del botón, y la marca del idioma elegido es información de
   estado, no un adorno. */
html.a11y-lectura .btn-idioma .icono,
html.a11y-lectura .idioma-opcion__marca .icono { display: block; }
html.a11y-lectura .oferta,
html.a11y-lectura .admin-container,
html.a11y-lectura .panel,
html.a11y-lectura .dashboard-card,
html.a11y-lectura .candidato-card {
  background: transparent;
  box-shadow: none;
}
html.a11y-lectura .oferta:hover,
html.a11y-lectura .oferta:focus-within { transform: none; box-shadow: none; }
/* Ancho de línea cómodo: los párrafos no se estiran de lado a lado. */
html.a11y-lectura p,
html.a11y-lectura li { max-width: 68ch; }
html.a11y-lectura .oferta p { max-width: none; }
/* Menos densidad visual: los adornos de color se quedan en un trazo discreto y
   las tarjetas se separan del fondo con una línea, no con sombras ni degradados. */
html.a11y-lectura .etiqueta-tipo,
html.a11y-lectura .badge-practica,
html.a11y-lectura .chip,
html.a11y-lectura .insignia-inclusion {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
}
html.a11y-lectura .tarjeta,
html.a11y-lectura .oferta,
html.a11y-lectura .dashboard-card,
html.a11y-lectura .candidato-card,
html.a11y-lectura .admin-container,
html.a11y-lectura .panel,
html.a11y-lectura .modal-caja {
  background: transparent;
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
html.a11y-lectura .seccion,
html.a11y-lectura .hero { border-color: var(--border); }

/* --- Mensajes de error de formulario (los añade ui-comun.js) -------------- */
/* Nunca se depende solo del color: el aviso va escrito y unido al campo con
   aria-describedby, y lleva un icono con texto alternativo para lectores. */
.error-campo {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--danger);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.5;
}
.error-campo::before {
  content: '⚠';
  flex-shrink: 0;
  font-size: var(--fs-sm);
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--danger-strong);
  border-width: 2px;
}

/* Evolución de NúcleoFP: mismas superficies, dorado y fuente autoalojada. */
.hero--conexion {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-top: clamp(3rem, 7vw, 6rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  text-align: left;
}
.hero--conexion .hero-interno { min-width: 0; margin: 0; }
.hero-etiqueta { color: var(--accent); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .1em; margin-bottom: 1.25rem; }
.hero--conexion h1 { font-size: clamp(2.3rem, 4vw, 3.6rem); line-height: 1.12; margin: 0 0 1.5rem; letter-spacing: -.045em; }
.hero--conexion .lead { margin: 0 0 2rem; max-width: 47ch; }
.hero--conexion .hero-ctas { justify-content: flex-start; }
.hero-nota { color: var(--text-muted); font-size: var(--fs-xs); margin-top: 1.25rem; }
.conexion-fp {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: radial-gradient(ellipse at top right, var(--accent-soft), transparent 70%), var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-lg);
}
.conexion-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.conexion-marca { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; }
.conexion-marca span { color: var(--accent); }
.conexion-descriptor { font-size: var(--fs-2xs); color: var(--text-muted); }
.conexion-pasos { list-style: none; margin: 1.5rem 0; padding: 0; }
.conexion-pasos li { position: relative; display: flex; align-items: center; gap: 1rem; padding: .85rem .75rem; min-width: 0; }
.conexion-pasos li + li { margin-top: .85rem; }
.conexion-pasos li + li::before { content: ''; position: absolute; height: .85rem; border-left: 1px solid var(--border-strong); top: -.85rem; left: 1.8rem; }
.conexion-numero { flex: 0 0 2.15rem; height: 2.15rem; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; font-size: var(--fs-2xs); color: var(--text-muted); }
.conexion-pasos strong { font-size: var(--fs-sm); }
.conexion-pasos p { color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.5; margin: .15rem 0 0; }
.conexion-oportunidad { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); }
.conexion-oportunidad .conexion-numero { color: var(--accent-contrast); background: var(--accent); border-color: var(--accent); }
.conexion-oportunidad > .icono { flex-shrink: 0; margin-left: auto; color: var(--accent); }
.conexion-pie { border-top: 1px solid var(--border); padding-top: 1rem; color: var(--text-muted); font-size: var(--fs-xs); }
.hero--conexion + .seccion { padding-top: 0; padding-bottom: 2rem; }
.hero--conexion + .seccion .presentacion { max-width: none; }
.hero--conexion + .seccion .presentacion p { max-width: 78ch; }
.caminos-fp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; padding-top: 1rem; }
.camino-fp { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; border: 1px solid var(--border); background: var(--surface); border-radius: 1rem; padding: clamp(1.5rem, 3vw, 2.5rem); min-width: 0; }
.camino-fp > p, .camino-fp > h2 { margin: 0; }
.camino-fp h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.3; letter-spacing: -.025em; }
.camino-fp > p:not(.hero-etiqueta) { color: var(--text-muted); }
.camino-fp > .btn { margin-top: auto; }
.camino-fp > a:not(.btn) { font-size: var(--fs-sm); }
.camino-fp--empresa { background: linear-gradient(135deg, var(--accent-soft), transparent 60%), var(--surface); }
.estado-vacio--home { grid-column: 1 / -1; width: 100%; border-style: solid; background: var(--surface); }
.estado-vacio--home > .icono { width: 2rem; height: 2rem; color: var(--accent); margin-bottom: .75rem; }
.oferta { transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.oferta:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.oferta-formacion { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .75rem; color: var(--text-muted); font-size: var(--fs-xs); }
.oferta-formacion span:first-child { color: var(--text); }
.guia-pasos { counter-reset: paso; list-style: none; padding: 0; }
.guia-pasos > li { padding: 1.5rem 0; border-top: 1px solid var(--border); }
.guia-pasos h2 { margin-top: 0; }
.guia-pasos h2::before { counter-increment: paso; content: '0' counter(paso) ' / '; color: var(--accent); }
.resumen-formulario { margin-bottom: 1.25rem; padding: 1rem; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); color: var(--text-muted); font-size: var(--fs-sm); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .oferta:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
  .hero-ctas .btn:hover .icono { transform: translateX(3px); }
  .hero-ctas .icono { transition: transform 150ms ease; }
}
@media (max-width: 850px) {
  .hero--conexion { grid-template-columns: 1fr; gap: 2rem; }
  .hero--conexion h1 { max-width: 20ch; }
  .hero--conexion .lead { max-width: 62ch; }
  .conexion-fp { max-width: 38rem; width: 100%; }
}
@media (max-width: 600px) {
  .hero--conexion { padding-top: 2.5rem; }
  .hero--conexion h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .caminos-fp { grid-template-columns: 1fr; }
  .camino-fp > .btn { width: 100%; white-space: normal; text-align: center; }
  .hero-etiqueta { font-size: .7rem; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  .oferta, .hero-ctas .icono { transition: none; transform: none; }
}
html.a11y-sin-animacion .oferta:hover,
html.a11y-lectura .oferta:hover { transform: none; }
html.a11y-lectura .conexion-fp { box-shadow: none; background: var(--surface); }
html.a11y-contraste .conexion-fp,
html.a11y-contraste .camino-fp { background: var(--surface); border-color: var(--border-strong); }

/* En móvil, logo y ajustes en la primera fila; navegación en la segunda. */
@media (max-width: 620px) {
  :root { --control-alto: 2.75rem; }
  .site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; }
  .site-header .logo { grid-column: 1; grid-row: 1; justify-content: flex-start; }
  .site-header .logo img { margin: 0; }
  .site-header > .btn-accesibilidad { grid-column: 2; grid-row: 1; }
  .site-header > .idioma { grid-column: 3; grid-row: 1; }
  .site-header nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
}

/* Recorrido FP: ilustración SVG y detalles de producto, sin efectos continuos. */
.hero--conexion { position: relative; isolation: isolate; }
.hero--conexion::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: 0; background: radial-gradient(ellipse at 85% 40%, rgba(255,189,0,.065), transparent 55%);
}
.hero--conexion h1 .destacar {
  background: linear-gradient(120deg, var(--accent), #FFE08A);
  background-clip: text; -webkit-background-clip: text; color: transparent;
}
.conexion-fp { border-color: rgba(255,189,0,.26); }
.conexion-mapa { display: block; width: 100%; height: auto; margin: 1.25rem 0 .25rem; overflow: visible; }
.conexion-base { stroke: var(--border-strong); stroke-width: 1; fill: none; }
.conexion-trazo { stroke: url(#conexionDorado); stroke-width: 2; fill: none; }
.conexion-nodo circle { fill: var(--surface); stroke: var(--accent); stroke-width: 1.3; }
.conexion-nodo text { fill: var(--accent); text-anchor: middle; font: 700 15px var(--font-body); }
.conexion-nodo .conexion-leyenda { fill: var(--text-muted); font-size: 8px; font-weight: 500; letter-spacing: .08em; }
.conexion-nodo path { stroke: var(--accent); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.conexion-pasos { margin-top: .5rem; }
.conexion-pie { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.hero-ctas .btn:not(.btn-outline) { position: relative; overflow: hidden; }
.hero-ctas .btn:not(.btn-outline)::after {
  content: ''; position: absolute; pointer-events: none; inset: -50% -60%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.3) 50%, transparent 60%);
  transform: translateX(-65%);
}
.camino-fp { transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
.camino-fp:focus-within { border-color: var(--accent); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .camino-fp:hover { border-color: rgba(255,189,0,.5); transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .hero-ctas .btn:not(.btn-outline):hover::after,
  .hero-ctas .btn:not(.btn-outline):focus-visible::after { transform: translateX(65%); transition: transform 450ms ease; }
  .hero-ctas .btn:active { transform: translateY(1px); }
}
@media (prefers-reduced-motion: reduce) {
  .camino-fp { transition: none; }
  .hero-ctas .btn::after { display: none; }
}
html.a11y-sin-animacion .camino-fp,
html.a11y-lectura .camino-fp { transition: none; transform: none; }
html.a11y-sin-animacion .hero-ctas .btn::after,
html.a11y-lectura .hero-ctas .btn::after,
html.a11y-lectura .hero--conexion::before { display: none; }
html.a11y-contraste .hero--conexion h1 .destacar,
html.a11y-lectura .hero--conexion h1 .destacar { background: none; color: var(--accent); }
@media (forced-colors: active) {
  .hero--conexion h1 .destacar { background: none; color: Highlight; }
  .conexion-trazo, .conexion-nodo circle, .conexion-nodo path { stroke: CanvasText; }
  .conexion-nodo circle { fill: Canvas; }
  .conexion-nodo text { fill: CanvasText; }
}

/* Dos propuestas públicas y una vista de funciones, sin actividad simulada. */
.hero-selector { display: inline-flex; padding: .3rem; margin: 0 0 1.6rem; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); }
.hero-selector[hidden], .producto-contenido[hidden] { display: none; }
.hero-selector button { min-height: 44px; padding: .6rem 1.1rem; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); font: 600 var(--fs-sm) var(--font-body); cursor: pointer; }
.hero-selector button[aria-pressed="true"] { color: var(--accent-contrast); background: var(--accent); }
.hero--conexion h1 { font-size: clamp(2.1rem, 3.8vw, 3.4rem); }
/* Una pieza de marca abierta: formación y oportunidad alrededor de FP. */
.nucleo-visual { position: relative; padding: 0 0 2.5rem; background: none; border: 0; border-radius: 0; box-shadow: none; transform: none; isolation: isolate; }
.nucleo-visual::before { content: ''; position: absolute; inset: 12%; background: radial-gradient(ellipse, rgba(255,189,0,.1), transparent 68%); z-index: -1; pointer-events: none; }
.nucleo-lamina { display: block; width: 100%; height: auto; overflow: visible; }
.nucleo-orbita { fill: none; stroke: var(--text-muted); stroke-width: .8; opacity: .3; }
.nucleo-orbita--exterior { stroke-dasharray: 2 9; opacity: .45; }
.nucleo-orbita--vertical { opacity: .15; }
.nucleo-trazo { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.nucleo-satelite circle { fill: var(--bg); stroke: var(--border-strong); stroke-width: 1.5; }
.nucleo-satelite path, .nucleo-satelite rect { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.nucleo-satelite--destino circle { fill: var(--accent); stroke: var(--accent); }
.nucleo-satelite--destino path, .nucleo-satelite--destino rect { stroke: var(--accent-contrast); }
/* El átomo del héroe gira desde el JavaScript escribiendo el atributo transform
   (órbitas y satélites alrededor del centro; el logo se queda quieto). Estas dos
   reglas reservan la capa del giro: no cambian nada del dibujo, solo evitan
   repintar el resto de la ilustración en cada fotograma. */
.nucleo-atomo { will-change: transform; }
.nucleo-satelite__icono { will-change: transform; }
.nucleo-firma { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0 1rem; color: var(--text-muted); font-size: .63rem; font-weight: 600; letter-spacing: .14em; }
.nucleo-firma-linea { width: 3rem; height: 1px; background: var(--accent); }
/* La empresa ve el recorrido desde el punto de llegada. */
[data-publico="empresa"] .nucleo-lamina { transform: scaleX(-1); }
[data-publico="empresa"] .nucleo-isotipo { transform: translateX(520px) scaleX(-1); }
@media (max-width: 600px) {
  .hero--conexion h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .nucleo-visual { width: min(100%, 390px); justify-self: center; padding-bottom: 0; }
}
html.a11y-contraste .nucleo-orbita { opacity: 1; stroke: var(--text); }
html.a11y-lectura .nucleo-visual { display: none; }
@media (forced-colors: active) {
  .nucleo-orbita, .nucleo-trazo, .nucleo-satelite circle, .nucleo-satelite path, .nucleo-satelite rect { stroke: CanvasText; }
  .nucleo-satelite circle { fill: Canvas; }
}

/* Sella el antialias del contorno contra la tinta oscura de la insignia. */
.nucleo-isotipo-borde { fill: none; stroke: #000; stroke-width: 2; }