/* MERITUS — elementos desnudos. Ninguna clase vive aquí; eso es componentes.css. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font-ui);
  font-size: var(--fs-200);
  line-height: var(--lh-ui);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* R2 — enlace en texto corrido: subrayado. Sin él es invisible con protanopía. */
a { color: var(--primary); text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--primary) 45%, transparent);
    text-underline-offset: 2.5px; }
a:hover { color: var(--primary-hover); text-decoration-color: currentColor; }

/* R5 — foco visible en todo lo interactivo. */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px;
                 border-radius: var(--r-sm); }

h1, h2, h3, h4, h5, h6 { line-height: var(--lh-tight); font-weight: 600; }
h1 { font-family: var(--font-editorial); font-size: var(--fs-500); color: var(--primary); }
h2 { font-size: var(--fs-400); }
h3 { font-size: var(--fs-300); }
h4, h5, h6 { font-size: var(--fs-200); }

p, li { max-width: var(--w-prose); }
strong, b { font-weight: 600; }
small { font-size: var(--fs-100); color: var(--text-muted); }
hr { border: 0; border-top: 1px solid var(--bd); margin: var(--sp-5) 0; }

table { border-collapse: collapse; width: 100%;
        font-variant-numeric: tabular-nums; }
th, td { text-align: left; vertical-align: top; }

input, select, textarea, button { font: inherit; color: inherit; }
button { cursor: pointer; }
label { display: block; }

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

code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
       font-size: .92em; background: var(--neutral-bg); padding: 1px 5px;
       border-radius: var(--r-sm); }

/* Evita que un bloque preformateado (p. ej. el certificado emitido) desborde
   la página horizontalmente; no hay componente para esto, es el elemento. */
pre { white-space: pre-wrap; margin-top: var(--sp-2); font-size: var(--fs-100); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important;
                           transition-duration: .01ms !important; }
}