:root {
  color-scheme: light;
  --bg1: #f6f8fc; --bg2: #e9eef8; --surface: #ffffff; --text: #1f2430; --muted: #5f6877; --line: #dadce0; --accent: #1550b8; --focus: #0b3d91;
  --btn-bg: #ffffff; --btn-text: #3c4043; --btn-line: #dadce0; --btn-hover: #f5f7fa;
  --ok-bg: #e2f5e8; --ok-text: #0b5a27; --err-bg: #fdeaea; --err-text: #9b1c1c; --warn-bg: #fff3c4; --warn-text: #4a3500; --warn-line: #b78103;
  --shadow: 0 1px 3px rgb(16 24 40 / .08), 0 8px 24px rgb(16 24 40 / .08);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg1: #11151c; --bg2: #0b0e13; --surface: #1a2029; --text: #eaeef5; --muted: #a8b2c1; --line: #394354; --accent: #7db0ff; --focus: #b3d0ff;
    --btn-bg: #131314; --btn-text: #e3e3e3; --btn-line: #8e918f; --btn-hover: #1f2124;
    --ok-bg: #12301d; --ok-text: #8fe0aa; --err-bg: #3b1618; --err-text: #ffb3b3; --warn-bg: #3a2d08; --warn-text: #ffe08a; --warn-line: #d9a21b;
    --shadow: 0 1px 3px rgb(0 0 0 / .5), 0 8px 24px rgb(0 0 0 / .4);
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; color: var(--text); font: 1.0625rem/1.5 var(--font);
  background: linear-gradient(160deg, var(--bg1), var(--bg2)) fixed;
}
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }

.page { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 24px 16px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--accent); font-weight: 800; letter-spacing: .12em; font-size: 1.25rem; }
.logo { width: 44px; height: 44px; flex: none; }

.card {
  width: min(100%, 26rem); background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow); padding: clamp(20px, 5vw, 32px); text-align: center; display: grid; gap: 20px;
}
.aviso h1 { margin: 0 0 8px; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.65rem); line-height: 1.25; font-weight: 800; }
.aviso h1:focus { outline: none; }
.aviso p { margin: 0; color: var(--muted); font-size: 1.05rem; }
.aviso-text { min-width: 0; overflow-wrap: anywhere; }
.aviso[data-tone="ok"], .aviso[data-tone="warn"], .aviso[data-tone="err"] {
  display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px; border-radius: 12px; border: 2px solid currentColor;
}
.aviso[data-tone="ok"] { background: var(--ok-bg); color: var(--ok-text); }
.aviso[data-tone="warn"] { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-line); }
.aviso[data-tone="err"] { background: var(--err-bg); color: var(--err-text); }
.aviso[data-tone] p { color: inherit; }
.aviso .ico { width: 32px; height: 32px; flex: none; }

.gbtn {
  display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 10px 16px; width: 100%;
  background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--btn-line); border-radius: 10px;
  font: inherit; font-weight: 600; text-decoration: none;
}
.gbtn:hover { background: var(--btn-hover); }
.gbtn .g { width: 22px; height: 22px; flex: none; }
.pie { margin: 0; color: var(--muted); font-size: 1rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (forced-colors: active) { .gbtn, .card { border: 2px solid CanvasText; } }