/* Tu Examen de Conducir — sistema de diseño central. */
:root {
  color-scheme: light;
  --lx-blue-950: #071c38;
  --lx-blue-900: #0b1f3a;
  --lx-blue-800: #0c3a8c;
  --lx-blue-700: #075aa9;
  --lx-blue-600: #1677cc;
  --lx-blue-100: #e8f4ff;
  --lx-blue-50: #f3f8fd;
  --lx-orange-700: #d94305;
  --lx-orange-600: #f8530e;
  --lx-orange-500: #ff6a27;
  --lx-orange-100: #fff1e9;
  --lx-green-700: #14623c;
  --lx-green-100: #eaf8f0;
  --lx-red-700: #8a2929;
  --lx-red-100: #fff0f0;
  --lx-yellow-700: #6a4c00;
  --lx-yellow-100: #fff8d8;
  --lx-ink: #10233f;
  --lx-body: #40536c;
  --lx-muted: #687a90;
  --lx-line: #d7e4ef;
  --lx-line-strong: #bfd2e3;
  --lx-surface: #fff;
  --lx-surface-soft: #f5f9fd;
  --lx-focus: #1677cc;
  --lx-font: "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lx-space-1: .25rem;
  --lx-space-2: .5rem;
  --lx-space-3: .75rem;
  --lx-space-4: 1rem;
  --lx-space-5: 1.5rem;
  --lx-space-6: 2rem;
  --lx-space-7: 3rem;
  --lx-radius-sm: 10px;
  --lx-radius-md: 16px;
  --lx-radius-lg: 22px;
  --lx-radius-xl: 30px;
  --lx-radius-pill: 999px;
  --lx-shadow-sm: 0 8px 24px rgba(12, 58, 140, .07);
  --lx-shadow-md: 0 16px 42px rgba(12, 58, 140, .1);
  --lx-shadow-lg: 0 24px 70px rgba(12, 58, 140, .14);
  --lx-control-h: 48px;
  --lx-content: 1180px;
  --lx-transition: 180ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { color: var(--lx-body); font-family: var(--lx-font); }
button, input, select, textarea { font: inherit; }
a, button, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid rgba(22, 119, 204, .34); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.lx-ui-button,
.lx-ui-button:visited { display: inline-flex; align-items: center; justify-content: center; gap: var(--lx-space-2); min-height: var(--lx-control-h); padding: 0 22px; color: #fff; background: var(--lx-orange-600); border: 1px solid transparent; border-radius: var(--lx-radius-pill); box-shadow: 0 10px 22px rgba(185, 56, 0, .18); font-weight: 850; line-height: 1; text-decoration: none; cursor: pointer; transition: background var(--lx-transition), border-color var(--lx-transition), box-shadow var(--lx-transition), transform var(--lx-transition); }
.lx-ui-button:hover { color: #fff; background: var(--lx-orange-700); transform: translateY(-1px); }
.lx-ui-button.is-secondary { color: var(--lx-blue-800); background: #fff; border-color: var(--lx-blue-800); box-shadow: none; }
.lx-ui-button.is-secondary:hover { color: #fff; background: var(--lx-blue-800); }
.lx-ui-button.is-quiet { color: var(--lx-blue-800); background: var(--lx-blue-100); box-shadow: none; }
.lx-ui-button.is-quiet:hover { color: #fff; background: var(--lx-blue-800); }
.lx-ui-button[disabled], .lx-ui-button[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.lx-ui-field { display: grid; gap: 7px; color: var(--lx-ink); font-weight: 800; }
.lx-ui-field > span { font-size: .82rem; }
.lx-ui-field input, .lx-ui-field select, .lx-ui-field textarea { width: 100%; min-height: var(--lx-control-h); padding: 10px 13px; color: var(--lx-ink); background: #fff; border: 1.5px solid var(--lx-line-strong); border-radius: var(--lx-radius-sm); transition: border-color var(--lx-transition), box-shadow var(--lx-transition); }
.lx-ui-field textarea { min-height: 112px; resize: vertical; }
.lx-ui-field input:focus, .lx-ui-field select:focus, .lx-ui-field textarea:focus { border-color: var(--lx-focus); box-shadow: 0 0 0 4px rgba(22, 119, 204, .1); outline: 0; }
.lx-ui-field small { color: var(--lx-muted); font-size: .76rem; font-weight: 500; }

.lx-ui-card { padding: clamp(22px, 3vw, 30px); background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: var(--lx-radius-lg); box-shadow: var(--lx-shadow-sm); }
.lx-ui-card h3 { margin: 0 0 8px; color: var(--lx-ink); }
.lx-ui-card p { margin: 0; color: var(--lx-muted); line-height: 1.65; }
.lx-ui-badge { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; color: var(--lx-blue-800); background: var(--lx-blue-100); border-radius: var(--lx-radius-pill); font-size: .72rem; font-weight: 900; letter-spacing: .04em; }
.lx-ui-badge.is-success { color: var(--lx-green-700); background: var(--lx-green-100); }
.lx-ui-badge.is-warning { color: var(--lx-yellow-700); background: var(--lx-yellow-100); }
.lx-ui-badge.is-error { color: var(--lx-red-700); background: var(--lx-red-100); }

.lx-ui-alert { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 15px 17px; color: var(--lx-blue-900); background: var(--lx-blue-100); border: 1px solid #c4ddf2; border-radius: var(--lx-radius-md); line-height: 1.55; }
.lx-ui-alert::before { content: "i"; display: grid; place-items: center; width: 25px; height: 25px; color: #fff; background: var(--lx-blue-800); border-radius: 50%; font-size: .78rem; font-weight: 900; }
.lx-ui-alert.is-success { color: var(--lx-green-700); background: var(--lx-green-100); border-color: #a8d9be; }
.lx-ui-alert.is-success::before { content: "✓"; background: var(--lx-green-700); }
.lx-ui-alert.is-warning { color: var(--lx-yellow-700); background: var(--lx-yellow-100); border-color: #ead58c; }
.lx-ui-alert.is-warning::before { content: "!"; background: #b77900; }
.lx-ui-alert.is-error { color: var(--lx-red-700); background: var(--lx-red-100); border-color: #e6b2b2; }
.lx-ui-alert.is-error::before { content: "!"; background: var(--lx-red-700); }

.lx-ui-progress, progress.lx-ui-progress { display: block; width: 100%; height: 8px; overflow: hidden; appearance: none; background: #e2ecf5; border: 0; border-radius: var(--lx-radius-pill); }
.lx-ui-progress::-webkit-progress-bar { background: #e2ecf5; border-radius: inherit; }
.lx-ui-progress::-webkit-progress-value { background: linear-gradient(90deg, var(--lx-blue-800), #2996ec 68%, var(--lx-orange-600)); border-radius: inherit; }
.lx-ui-progress::-moz-progress-bar { background: linear-gradient(90deg, var(--lx-blue-800), #2996ec 68%, var(--lx-orange-600)); border-radius: inherit; }
.lx-ui-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

body.lx-consent-open { padding-bottom: 132px; }
@media (max-width: 760px) { body.lx-consent-open { padding-bottom: 238px; } }