/* Usa solo los tokens de brand/tokens.css: contraste ya verificado (ADR-0012).
   Base compartida por candidatos, empresas y consola. Solo presentación: los
   nombres de clase son los que ya usan las apps. */

/* ---------------------------------------------------------------------------
   Tipografía de marca: Poppins, servida desde el propio dominio (sin terceros).
   Subconjunto latino: incluye tildes, ñ, ¿ y ¡. Licencia en fuentes/LICENSE-OFL.txt.
   --------------------------------------------------------------------------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
             src: url("fuentes/poppins-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
             src: url("fuentes/poppins-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
             src: url("fuentes/poppins-latin-700.woff2") format("woff2"); }

* { 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; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
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);
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---------------------------------------------------------------------------
   Jerarquía: tres pesos (700 títulos, 600 énfasis, 400 cuerpo) y una escala
   que separa claramente cada nivel. El texto corrido no pasa de ~68 caracteres.
   --------------------------------------------------------------------------- */
h1, h2, h3 { font-weight: var(--mt-peso-titulo); line-height: var(--mt-interlineado-titulo);
             letter-spacing: var(--mt-tracking-titulo); text-wrap: balance; }
h1 { font-size: var(--mt-txt-2xl); margin: 0 0 1rem; }
h2 { font-size: var(--mt-txt-xl); font-weight: var(--mt-peso-enfasis); margin: 2.25rem 0 0.75rem; }
h3 { font-size: var(--mt-txt-lg); font-weight: var(--mt-peso-enfasis); margin: 0; }
@media (min-width: 768px) { h1 { font-size: var(--mt-txt-3xl); } }
p { margin: 0.5rem 0; text-wrap: pretty; }
main p { max-width: 68ch; }
strong { font-weight: var(--mt-peso-enfasis); }
p.suave, .suave { color: var(--mt-texto-suave); font-size: var(--mt-txt-sm); }
a { color: var(--mt-accion); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
code { font-size: var(--mt-txt-sm); word-break: break-all; }
/* Cifras que se comparan (puntajes, confianza, conteos) alineadas en columna. */
.tabla td, .cifra strong { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   Barra superior: el isotipo de la marca y el nombre en minúscula, como en el
   manual. Fija arriba, porque la consola y las fichas son páginas largas.
   --------------------------------------------------------------------------- */
.barra { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem;
         align-items: center; padding: 0.625rem max(1rem, env(safe-area-inset-left));
         background: var(--mt-superficie); border-bottom: 1px solid var(--mt-borde); }
.marca { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--mt-txt-lg);
         font-weight: var(--mt-peso-titulo); letter-spacing: var(--mt-tracking-titulo); color: var(--mt-texto); }
.marca img { width: 1.75rem; height: 1.75rem; display: block; }
a.marca { text-decoration: none; }
.sello { font-size: var(--mt-txt-sm); color: var(--mt-texto-suave); padding-left: 0.75rem;
         border-left: 1px solid var(--mt-borde); }
nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.25rem; }
main { max-width: 64rem; margin: 0 auto; padding: 2rem 1rem 4rem; }
main:focus { outline: none; }

/* ---------------------------------------------------------------------------
   Botones. Un solo modelo de estados para las tres apps:
     reposo → hover (solo con mouse) → presionado (escala) → foco (anillo) → deshabilitado.
   El hover se limita a punteros finos: en un teléfono un toque no debe dejar
   el botón "pegado" en su color de hover.
   --------------------------------------------------------------------------- */
button { font: inherit; font-weight: var(--mt-peso-enfasis); cursor: pointer; min-height: 2.5rem;
         padding: 0.5rem 1rem; border-radius: var(--mt-radio-md); line-height: 1.3;
         border: 1px solid var(--mt-accion); background: var(--mt-accion); color: var(--mt-texto-inverso);
         transition: background-color var(--mt-dur-estado) ease, border-color var(--mt-dur-estado) ease,
                     color var(--mt-dur-estado) ease, transform var(--mt-dur-presion) var(--mt-curva-salida);
         -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button.secundario { background: transparent; color: var(--mt-accion); }
button.peligro { background: var(--mt-error); border-color: var(--mt-error); color: var(--mt-texto-inverso); }
@media (hover: hover) and (pointer: fine) {
  button:hover:not(:disabled) { background: var(--mt-accion-hover); border-color: var(--mt-accion-hover); }
  /* Antes el hover de un secundario llenaba el fondo con el mismo color de su
     texto y el rótulo desaparecía. El secundario se tiñe, no se rellena. */
  button.secundario:hover:not(:disabled) { background: var(--mt-accion-sutil); color: var(--mt-accion-hover);
                                            border-color: var(--mt-accion-hover); }
  button.peligro:hover:not(:disabled) { background: color-mix(in srgb, var(--mt-error) 82%, black);
                                        border-color: color-mix(in srgb, var(--mt-error) 82%, black); }
}
/* Respuesta inmediata al presionar: confirma que la interfaz escuchó. */
button:active:not(:disabled) { transform: scale(0.97); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
@media (pointer: coarse) { button, input, select { min-height: 2.75rem; } }

/* Navegación entre secciones: pestañas livianas, no una fila de botones llenos. */
nav button[data-vista] { background: transparent; border-color: transparent; color: var(--mt-texto-suave); }
nav button[data-vista][aria-current="page"] { color: var(--mt-accion); background: var(--mt-accion-sutil); }
@media (hover: hover) and (pointer: fine) {
  nav button[data-vista]:hover:not(:disabled) { background: var(--mt-superficie-sutil); color: var(--mt-texto);
                                                border-color: transparent; }
  nav button[data-vista][aria-current="page"]:hover { background: var(--mt-accion-sutil); color: var(--mt-accion); }
}

/* Un único anillo de foco, visible sobre claro y oscuro. Requisito, no adorno. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--mt-foco); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Campos. Controles y botones comparten radio-md; tarjetas radio-lg; nada más.
   --------------------------------------------------------------------------- */
input, select, textarea { font: inherit; padding: 0.55rem 0.75rem; border-radius: var(--mt-radio-md);
  border: 1px solid var(--mt-borde-fuerte); background: var(--mt-superficie); color: var(--mt-texto); width: 100%;
  min-height: 2.5rem; transition: border-color var(--mt-dur-estado) ease, box-shadow var(--mt-dur-estado) ease; }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; min-height: 0; padding: 0;
  accent-color: var(--mt-accion); }
input::placeholder, textarea::placeholder { color: var(--mt-texto-suave); opacity: 0.8; }
@media (hover: hover) and (pointer: fine) {
  input:hover:not(:disabled):not(:focus), select:hover:not(:disabled):not(:focus),
  textarea:hover:not(:disabled):not(:focus) { border-color: var(--mt-texto-suave); }
}
input:focus, select:focus, textarea:focus { border-color: var(--mt-accion); }
/* El error de un campo se ve en el campo mismo, no solo en el texto de abajo. */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"],
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--mt-error); }
input:disabled, select:disabled, textarea:disabled { background: var(--mt-superficie-sutil); cursor: not-allowed; }
label { display: block; margin: 1rem 0 0.375rem; font-weight: var(--mt-peso-enfasis); }

/* ---------------------------------------------------------------------------
   Superficies y avisos
   --------------------------------------------------------------------------- */
.tarjeta { background: var(--mt-superficie); border: 1px solid var(--mt-borde); border-radius: var(--mt-radio-lg);
           padding: 1.25rem; margin: 1rem 0; box-shadow: var(--mt-sombra-sm); }
@media (min-width: 640px) { .tarjeta { padding: 1.5rem; } }
.tarjeta > h2:first-child, .tarjeta > h3:first-child { margin-top: 0; }
.fila { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* Avisos con una franja a la izquierda: el color dice el tipo, el texto dice qué hacer.
   El texto siempre va en el color de texto principal: contraste completo. */
.aviso, .error { padding: 0.875rem 1rem; border-radius: var(--mt-radio-md); margin: 0.75rem 0;
                 border-left: 3px solid var(--mt-accion); background: var(--mt-accion-sutil); color: var(--mt-texto); }
.error { border-left-color: var(--mt-error); background: color-mix(in srgb, var(--mt-error) 8%, var(--mt-superficie)); }
/* Un error que aparece junto al botón entra con un desplazamiento mínimo: así se
   nota que es la respuesta a lo que se acaba de hacer. Una vez, sin rebote. */
.error { transition: opacity var(--mt-dur-estado) var(--mt-curva-salida), transform var(--mt-dur-estado) var(--mt-curva-salida); }
@starting-style { .error { opacity: 0; transform: translateY(-4px); } }

.qr { background: #fff; padding: 0.5rem; width: 12rem; height: 12rem; border-radius: var(--mt-radio-md); }

/* ---------------------------------------------------------------------------
   "Ver más" (details): el chevron gira para decir abierto o cerrado. Es el único
   movimiento de la página que no responde a un clic en un botón, y explica algo.
   --------------------------------------------------------------------------- */
details summary { cursor: pointer; color: var(--mt-accion); font-weight: var(--mt-peso-enfasis);
                  list-style: none; display: inline-flex; align-items: center; gap: 0.5rem;
                  border-radius: var(--mt-radio-sm); }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: ""; width: 0.45rem; height: 0.45rem; flex: none;
                          border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
                          transform: rotate(-45deg); transition: transform var(--mt-dur-estado) var(--mt-curva-salida); }
details[open] > summary::before { transform: rotate(45deg); }
details[open] > :not(summary) { transition: opacity var(--mt-dur-estado) ease; }
@starting-style { details[open] > :not(summary) { opacity: 0; } }
@media (hover: hover) and (pointer: fine) { details summary:hover { color: var(--mt-accion-hover); } }

/* ---------------------------------------------------------------------------
   Tablas (consola): encabezado discreto y la fila bajo el mouse resaltada, para
   no perder la línea al leer de izquierda a derecha.
   --------------------------------------------------------------------------- */
.tabla { width: 100%; border-collapse: collapse; font-size: var(--mt-txt-sm); }
.tabla th, .tabla td { text-align: left; padding: 0.625rem 0.625rem; border-bottom: 1px solid var(--mt-borde); vertical-align: top; }
.tabla th { font-weight: var(--mt-peso-enfasis); color: var(--mt-texto-suave); border-bottom-color: var(--mt-borde-fuerte);
            white-space: nowrap; }
.tabla tbody tr { transition: background-color var(--mt-dur-estado) ease; }
@media (hover: hover) and (pointer: fine) { .tabla tbody tr:hover { background: var(--mt-superficie-sutil); } }
.tabla-scroll { overflow-x: auto; border-radius: var(--mt-radio-md); }
/* La explicación es lo que más se lee en la revisión: su columna no se comprime
   hasta partir cada factor en tres líneas. La tabla se desplaza antes que eso. */
.tabla td:has(> details) { min-width: 18rem; }
.tabla details ul { margin: 0.5rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.25rem; }
/* Excluido: se distingue sin volverse ilegible. Tachado solo el código; el resto
   en texto suave, que mantiene contraste AA para poder reconsiderar. */
.excluido { background: var(--mt-superficie-sutil); }
.excluido td { color: var(--mt-texto-suave); }
.excluido td:nth-child(2) > code { text-decoration: line-through; }

/* ---------------------------------------------------------------------------
   Formularios, listas y estados compartidos por candidatos y empresas.
   --------------------------------------------------------------------------- */
.saltar { position: absolute; left: -999px; top: 0; padding: 0.5rem 1rem; background: var(--mt-superficie); z-index: 10; }
.saltar:focus { left: 1rem; }

fieldset { border: 0; padding: 0; margin: 1.25rem 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 0.875rem; 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); font-size: var(--mt-txt-base); cursor: pointer;
          transition: border-color var(--mt-dur-estado) ease, background-color var(--mt-dur-estado) ease; }
.opcion input { margin-top: 0.15rem; flex: none; }
@media (hover: hover) and (pointer: fine) { .opcion:hover { border-color: var(--mt-borde-fuerte); } }
.opcion:has(input:checked) { border-color: var(--mt-accion); background: var(--mt-accion-sutil); }
.opcion:has(input:focus-visible) { outline: 3px solid var(--mt-foco); outline-offset: 2px; }
.opcion:has(input:disabled) { opacity: 0.6; cursor: not-allowed; }
.ayuda { display: block; font-size: var(--mt-txt-sm); color: var(--mt-texto-suave); margin-top: 0.25rem; font-weight: var(--mt-peso-cuerpo); }
.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.375rem; font-weight: var(--mt-peso-enfasis); }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

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

/* Cifras y explicación de un puntaje: las mismas piezas para la empresa y para
   el candidato, así los dos leen la misma explicación de la misma forma. */
.cifras { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }
.cifra strong { display: block; font-size: var(--mt-txt-2xl); font-weight: var(--mt-peso-titulo); line-height: 1;
                letter-spacing: var(--mt-tracking-titulo); }
.cifra span { display: block; font-size: var(--mt-txt-sm); line-height: 1.3; color: var(--mt-texto-suave); margin-top: 0.25rem; }
.factores { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.375rem; font-size: var(--mt-txt-sm); }
.factores li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; max-width: none;
               padding-bottom: 0.375rem; border-bottom: 1px dashed var(--mt-borde); }
.factores li:last-child { border-bottom: 0; }
.factores .tipo { color: var(--mt-texto-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Selector de archivo con la forma de un botón secundario, no el gris del sistema. */
input[type="file"] { padding: 0.5rem; cursor: pointer; }
input[type="file"]::file-selector-button { font: inherit; font-weight: var(--mt-peso-enfasis); margin-right: 0.75rem;
  padding: 0.4rem 0.9rem; border-radius: var(--mt-radio-md); border: 1px solid var(--mt-accion);
  background: transparent; color: var(--mt-accion); cursor: pointer; transition: background-color var(--mt-dur-estado) ease; }
@media (hover: hover) and (pointer: fine) {
  input[type="file"]::file-selector-button:hover { background: var(--mt-accion-sutil); }
}

/* 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; } }
}

/* Con movimiento reducido, tokens.css ya acorta toda transicion a casi cero.
   Aqui ademas se anulan la escala y el desplazamiento, por si alguna se escapa. */
@media (prefers-reduced-motion: reduce) {
  button:active:not(:disabled) { transform: none; }
  @starting-style { .error { transform: none; } }
}