/* La paleta conserva la identidad oscura del proyecto y un contraste AA. */
:root {
  color-scheme: dark;
  --bg: #07111f;
  --surface: #0f2035;
  --surface-2: #162a43;
  --text: #f7fbff;
  --muted: #afc1d6;
  --accent: #f6c85f;
  --accent-2: #6de4b7;
  --line: #2d4662;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(circle at top right, #17365a 0, var(--bg) 42rem);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

.hero { padding: 4rem 1.25rem 2.8rem; }
.hero__inner, main, footer { width: min(1180px, 100%); margin: 0 auto; }
.eyebrow { color: var(--accent-2); font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
h1 { max-width: 820px; margin: .4rem 0 1rem; font-size: clamp(2.35rem, 6vw, 4.7rem); line-height: .98; }
.hero p:last-child { max-width: 780px; color: var(--muted); font-size: 1.1rem; }

main { padding: 0 1.25rem 3rem; }
.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2.2rem; }
.summary article, .notice { border: 1px solid var(--line); border-radius: 1rem; background: color-mix(in srgb, var(--surface) 92%, transparent); }
.summary article { padding: 1.35rem; }
.summary strong, .summary span { display: block; }
.summary strong { color: var(--accent); font-size: 1.65rem; }
.summary span { color: var(--muted); }

.toolbar { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; }
.toolbar h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.35rem); }
.toolbar p { margin: .3rem 0 0; color: var(--muted); }
label { width: min(430px, 100%); color: var(--muted); font-weight: 650; }
input {
  width: 100%; margin-top: .4rem; padding: .85rem 1rem; border: 1px solid var(--line);
  border-radius: .75rem; background: var(--surface); color: var(--text); font: inherit;
}
input:focus { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); border-color: var(--accent); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 860px; }
th, td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { position: sticky; top: 0; background: var(--surface-2); color: var(--accent-2); }
tbody tr:hover { background: #142943; }
a { color: #8fc9ff; font-weight: 760; text-underline-offset: .2em; }
a:hover { color: var(--accent); }
.notice { margin-top: 1.5rem; padding: 1.2rem 1.35rem; color: var(--muted); }
.notice strong { color: var(--text); }
footer { padding: 1.5rem 1.25rem 3rem; color: var(--muted); }

@media (max-width: 760px) {
  .hero { padding-top: 2.8rem; }
  .summary { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; flex-direction: column; }
  label { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}