/* base.css — reset mínimo, tipografía, enlaces, formularios nativos y utilidades de accesibilidad. */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg, video, canvas { display: block; max-inline-size: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
  textarea { resize: vertical; }
  table { border-collapse: collapse; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  [hidden] { display: none !important; }
}

@layer base {
  html {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    scrollbar-color: var(--border-strong) transparent;
    scroll-padding-block: var(--space-4) var(--space-8);   /* el foco por teclado no queda tapado por el borde ni por barras fijas */
  }

  body {
    min-block-size: 100dvh;
    font-size: var(--text-base);
    line-height: var(--leading-body);
    overflow-wrap: break-word;
    accent-color: var(--accent);
    caret-color: var(--accent-strong);
  }

  ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: inherit; }

  h1, h2, h3, h4 { line-height: var(--leading-heading); font-weight: 650; text-wrap: balance; }
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); margin-block-start: var(--space-6); }
  h3 { font-size: var(--text-lg); margin-block-start: var(--space-5); }
  h4 { font-size: var(--text-base); margin-block-start: var(--space-4); }
  h1 + *, h2 + *, h3 + *, h4 + * { margin-block-start: var(--space-3); }
  h1:focus { outline: none; }                     /* el foco programático al h1 no necesita anillo */
  h1:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }

  p, ul, ol, dl { max-inline-size: var(--measure); }
  p + p, p + ul, ul + p { margin-block-start: var(--space-3); }
  ul, ol { padding-inline-start: 1.5em; }
  li + li { margin-block-start: var(--space-1); }
  small { font-size: var(--text-base); color: var(--muted); }
  strong, b { font-weight: 650; }
  hr { border: 0; border-block-start: 1px solid var(--border); margin-block: var(--space-5); }
  code, kbd, samp {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1em;
  }
  kbd {
    padding: 0.05em 0.4em;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-1);
    background: var(--surface);
  }

  /* Cifras tabulares en pesos, horas y tablas */
  .num, time, table, output { font-variant-numeric: tabular-nums; }

  /* Enlaces: subrayados, con zona de toque suficiente cuando están solos */
  a {
    color: var(--accent-strong);
    text-decoration-line: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
  }
  a:hover { text-decoration-thickness: 0.14em; }

  /* Foco visible de 3 px en toda la interfaz (RNF-9); nunca se quita sin sustituto */
  :focus-visible {
    outline: var(--focus-width) solid var(--focus);
    outline-offset: var(--focus-offset);
  }

  /* Formularios nativos: base común; el aspecto de los componentes vive en components.css */
  fieldset { border: 0; padding: 0; min-inline-size: 0; }
  legend { padding: 0; font-weight: 650; }
  ::placeholder { color: var(--muted); opacity: 1; }
}

@layer utilities {
  /* Solo para lectores de pantalla */
  .sr-only {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* "Saltar al contenido": primer elemento tabulable; visible solo con foco */
  .skip-link {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: 100;
    min-block-size: var(--target);
    display: inline-flex;
    align-items: center;
    padding-inline: var(--space-4);
    background: var(--surface);
    color: var(--accent-strong);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-1);
    font-weight: 650;
    transform: translateY(-200%);
  }
  .skip-link:focus { transform: none; }

  .text-muted { color: var(--muted); }
  .nowrap { white-space: nowrap; }
}