/* Valores por defecto de ambos temas (contrato de 3 bloques); /brand.css se carga después y los sobreescribe. */
:root {
  --primary: #5E49F4; --primary-text: #FFFFFF; --accent: #0B6B4A; --danger: #B3261E; --bg: #F5F4FB;
  --surface: #FFFFFF; --text: #2A2845; --text-strong: #17162A; --muted: #5B5878; --line: #CFCBE6;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --primary: #8B7CF8; --primary-text: #17162A; --accent: #9FE8C7; --danger: #FF8A8A; --bg: #17162A;
  --surface: #201F37; --text: #F5F4FB; --text-strong: #FFFFFF; --muted: #B9B6D3; --line: #2E2C4D;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #8B7CF8; --primary-text: #17162A; --accent: #9FE8C7; --danger: #FF8A8A; --bg: #17162A;
    --surface: #201F37; --text: #F5F4FB; --text-strong: #FFFFFF; --muted: #B9B6D3; --line: #2E2C4D;
    color-scheme: dark;
  }
}
[hidden] { display: none !important; }
.brand-logo { height: 40px; width: auto; display: block; margin-bottom: 1rem; }
#brand-error { max-width: 40rem; margin: 4rem auto; padding: 2rem 1rem; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1rem/1.5 system-ui, sans-serif; }
main { max-width: 40rem; margin: 0 auto; padding: 2rem 1rem; }
h1 { font-size: 1.75rem; line-height: 1.2; color: var(--text-strong); }
a { color: var(--primary); }
label { display: block; font-weight: 600; margin-top: 1.5rem; }
.hint, .note { color: var(--text); opacity: 1; }
input { width: 100%; min-height: 44px; padding: .5rem .75rem; font: inherit; color: var(--text); background: var(--surface);
  border: 2px solid var(--muted); border-radius: .375rem; overflow-wrap: anywhere; }
button { margin-top: 1rem; min-height: 44px; padding: .5rem 1.25rem; font: inherit; font-weight: 600; color: var(--primary-text);
  background: var(--primary); border: 2px solid transparent; border-radius: .375rem; cursor: pointer; }
button[disabled] { cursor: progress; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.error { color: var(--danger); font-weight: 600; }
#result { margin-top: 1.5rem; overflow-wrap: anywhere; }
h2 { font-size: 1.25rem; margin-top: 2.5rem; color: var(--text-strong); }
#network-status { margin-top: 1rem; overflow-wrap: anywhere; }
.net div { margin-top: 1rem; }
.net dt { font-weight: 600; }
.net dd { margin: .25rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.net code { overflow-wrap: anywhere; }
button.copy { margin-top: 0; min-width: 44px; color: var(--text); background: transparent; border-color: var(--primary); }
li { margin-top: .5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--surface); color: var(--text-strong); padding: .5rem; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
button.theme-toggle { position: absolute; top: .75rem; right: .75rem; margin: 0; display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; padding: .5rem; color: var(--text); background: transparent; border-color: var(--line); }
button.theme-toggle:hover { border-color: var(--primary); }