/* Usa solo los tokens de brand/tokens.css: contraste ya verificado (ADR-0012). */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body { margin: 0; background: var(--mt-fondo); color: var(--mt-texto); font-family: var(--mt-fuente);
       line-height: var(--mt-interlineado-cuerpo); font-size: var(--mt-txt-base); }
.barra { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; padding: 0.75rem 1rem;
         background: var(--mt-superficie); border-bottom: 1px solid var(--mt-borde); }
.marca { font-size: var(--mt-txt-lg); color: var(--mt-texto); }
.sello { font-size: var(--mt-txt-sm); color: var(--mt-texto-suave); }
nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.5rem; }
main { max-width: 64rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
h1 { font-size: var(--mt-txt-2xl); line-height: var(--mt-interlineado-titulo); margin: 0 0 1rem; }
h2 { font-size: var(--mt-txt-lg); margin: 1.5rem 0 0.5rem; }
p.suave, .suave { color: var(--mt-texto-suave); font-size: var(--mt-txt-sm); }
button { font: inherit; cursor: pointer; border-radius: var(--mt-radio-md); padding: 0.5rem 0.9rem;
         border: 1px solid var(--mt-accion); background: var(--mt-accion); color: var(--mt-texto-inverso); }
button:hover:not(:disabled) { background: var(--mt-accion-hover); }
button.secundario { background: transparent; color: var(--mt-accion); }
button.peligro { background: var(--mt-error); border-color: var(--mt-error); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--mt-foco); outline-offset: 2px; }
input, select, textarea { font: inherit; padding: 0.5rem; border-radius: var(--mt-radio-sm);
  border: 1px solid var(--mt-borde-fuerte); background: var(--mt-superficie); color: var(--mt-texto); width: 100%; }
label { display: block; margin: 0.75rem 0 0.25rem; font-weight: var(--mt-peso-enfasis); }
.tarjeta { background: var(--mt-superficie); border: 1px solid var(--mt-borde); border-radius: var(--mt-radio-lg);
           padding: 1rem; margin: 0.75rem 0; box-shadow: var(--mt-sombra-sm); }
.fila { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--mt-txt-sm); }
.tabla th, .tabla td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--mt-borde); vertical-align: top; }
.tabla-scroll { overflow-x: auto; }
.excluido { opacity: 0.55; text-decoration: line-through; }
.aviso { padding: 0.75rem 1rem; border-radius: var(--mt-radio-md); background: var(--mt-accion-sutil); margin: 0.75rem 0; }
.error { padding: 0.75rem 1rem; border-radius: var(--mt-radio-md); border: 1px solid var(--mt-error);
         color: var(--mt-texto); margin: 0.75rem 0; }
.qr { background: #fff; padding: 0.5rem; width: 12rem; height: 12rem; }
code { font-size: var(--mt-txt-sm); word-break: break-all; }
details summary { cursor: pointer; color: var(--mt-accion); }

/* ---------------------------------------------------------------------------
   Formularios, listas y estados compartidos por candidatos y empresas.
   Regla de forma: controles y botones radio-md; tarjetas radio-lg; nada mas.
   --------------------------------------------------------------------------- */
a.marca { text-decoration: none; font-weight: var(--mt-peso-titulo); color: var(--mt-texto); }
.saltar { position: absolute; left: -999px; top: 0; padding: 0.5rem 1rem; background: var(--mt-superficie); }
.saltar:focus { left: 1rem; z-index: 10; }

fieldset { border: 0; padding: 0; margin: 1rem 0; }
legend { font-weight: var(--mt-peso-enfasis); margin-bottom: 0.5rem; }
.opcion { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem; margin: 0.5rem 0;
          border: 1px solid var(--mt-borde); border-radius: var(--mt-radio-md); background: var(--mt-superficie);
          font-weight: var(--mt-peso-cuerpo); cursor: pointer; }
.opcion input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; flex: none; }
.opcion:has(input:checked) { border-color: var(--mt-accion); background: var(--mt-accion-sutil); }
.ayuda { display: block; font-size: var(--mt-txt-sm); color: var(--mt-texto-suave); margin-top: 0.25rem; }
.requerido { font-size: var(--mt-txt-xs); color: var(--mt-texto-suave); }
.campos { display: grid; gap: 0 1rem; }
@media (min-width: 640px) { .campos.dos { grid-template-columns: 1fr 1fr; } }
.error-campo { color: var(--mt-error); font-size: var(--mt-txt-sm); margin-top: 0.25rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
button:active:not(:disabled) { transform: translateY(1px); }

.secciones, .habilidades { list-style: none; padding: 0; margin: 0; }
.secciones li { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
                padding: 0.875rem 0; border-bottom: 1px solid var(--mt-borde); }
.secciones li:last-child { border-bottom: 0; }
.habilidades li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
                  padding: 0.5rem 0; border-bottom: 1px solid var(--mt-borde); }
.estado-seccion { font-size: var(--mt-txt-sm); color: var(--mt-texto-suave); }

/* Esqueleto de carga con la forma del contenido, sin girar. */
.esqueleto { height: 1rem; border-radius: var(--mt-radio-sm); background: var(--mt-superficie-sutil); margin: 0.75rem 0; }
.esqueleto.alto { height: 6rem; border-radius: var(--mt-radio-lg); }
@media (prefers-reduced-motion: no-preference) {
  .esqueleto { animation: latido 1.4s ease-in-out infinite; }
  @keyframes latido { 50% { opacity: 0.5; } }
}