/* Profundidad de superficies y paleta de ambos modos. */
:root {
  --surface: #ffffff;
  --surface-raised: #f5f7fa;
  --shadow-card: 0 3px 7px rgba(25, 40, 60, .045), 0 12px 30px rgba(25, 40, 60, .075);
  --shadow-control: 0 2px 3px rgba(25, 40, 60, .06), 0 4px 9px rgba(25, 40, 60, .075);
}
.card-box,.profile-tile,.table-wrap { box-shadow: var(--shadow-card); }
.card-box,.table-wrap { border-color: #dce2e9; }
.profile-tile { transition: border-color .18s, box-shadow .18s, background-color .18s; }
.profile-tile:hover,.profile-tile.selected { box-shadow: 0 4px 8px #c8293610, 0 12px 26px #26344912; }
.btn-light,.btn-primary,.btn-danger-soft,.mobile-toggle,.support { box-shadow: var(--shadow-control); }
.btn-primary { box-shadow: 0 3px 5px #8e182422, 0 7px 14px #c8293624; }
.btn-light:hover,.btn-primary:hover { box-shadow: 0 4px 7px #20252c16, 0 9px 17px #20252c16; }
.btn:disabled { box-shadow: none; }
.data-table th { background: #edf1f6; color: #525e6e; border-bottom: 1px solid #d7dfe9; }
.data-table tbody tr:nth-child(even) { background: #fafbfd; }
.data-table tbody tr:hover { background: #f0f4f9; }
.data-table td { border-bottom-color: #e0e6ed; }
.data-table small { color: #717d8c; }
.data-table .actions { gap: 7px; }
.option { box-shadow: 0 2px 5px #26344908; }
.option.selected { box-shadow: 0 3px 10px #c8293614; }
.topbar,.public-nav { box-shadow: 0 3px 12px #24324606; z-index: 2; }
.demo-bar { min-height:44px; padding:5px 20px; gap:14px; }
.demo-bar .theme-toggle { display:inline-flex; align-items:center; gap:7px; padding:5px 11px; min-height:34px; border:1px solid #65707f; border-radius:7px; text-decoration:none; background:#ffffff0d; font-size:12px; font-weight:600; white-space:nowrap; }
.demo-bar .theme-toggle:hover { background:#ffffff20; border-color:#9ba6b5; }
.theme-toggle .icon { width:17px; height:17px; }
.app-shell { height:calc(100dvh - var(--demo-height,44px)); }

[data-bs-theme="dark"] {
  --ink:#edf1f7; --muted:#a8b3c4; --line:#344155; --bg:#111720;
  --soft:#38232d; --red:#f18391; --red-dark:#f6a1ac; --green:#74d7ab;
  --surface:#1c2532; --surface-raised:#263244;
  --bs-body-color:var(--ink); --bs-body-bg:var(--bg); --bs-border-color:var(--line);
  --shadow-card:0 3px 8px #00000024,0 14px 32px #0000002b;
  --shadow-control:0 3px 8px #00000035;
}
[data-bs-theme="dark"] body { color:var(--ink); }
[data-bs-theme="dark"] :is(.public-nav,.hero,.preview-card,.trust-strip,.card-box,.profile-tile,.footer,.sidebar,.topbar,.table-wrap,.option,.mobile-toggle,.modal-head,.support-footer,.support,dialog,.skip) { background:var(--surface); color:var(--ink); border-color:var(--line); }
[data-bs-theme="dark"] .section[style*="background:white"] { background:var(--surface)!important; }
[data-bs-theme="dark"] :is(.hero-surface,.chip,.avatar,.explanation,.upload-box) { background:var(--surface-raised); color:var(--muted); border-color:var(--line); }
[data-bs-theme="dark"] .brand-mark { background:#c82936; color:white; }
[data-bs-theme="dark"] :is(.field label,.data-table strong,.profile-tile strong,.bar-chart b) { color:var(--ink); }
[data-bs-theme="dark"] :is(.form-control,.form-select) { background:#141c28; color:var(--ink); border-color:#45536a; }
[data-bs-theme="dark"] .form-control::placeholder { color:#8997ab; opacity:1; }
[data-bs-theme="dark"] :is(.form-control,.form-select):focus { border-color:var(--red); box-shadow:0 0 0 3px #f1839120; }
[data-bs-theme="dark"] .btn-light { background:#2a374a; color:#f0f3f9; border-color:#4b5a70; }
[data-bs-theme="dark"] .btn-light:hover { background:#36465c; border-color:#738299; }
[data-bs-theme="dark"] .btn-primary { --bs-btn-bg:#c82936; --bs-btn-border-color:#dc4b58; --bs-btn-hover-bg:#ad202d; --bs-btn-hover-border-color:#e26570; --bs-btn-active-bg:#ad202d; --bs-btn-active-border-color:#e26570; color:white; }
[data-bs-theme="dark"] .btn-ghost:hover { background:var(--surface-raised); color:var(--ink); }
[data-bs-theme="dark"] .btn-danger-soft { border-color:#70404b; }
[data-bs-theme="dark"] .data-table th { background:#283449; color:#c2ccdb; border-color:#46536a; }
[data-bs-theme="dark"] .data-table td { border-color:#334055; }
[data-bs-theme="dark"] .data-table tbody tr:nth-child(even) { background:#202b3b; }
[data-bs-theme="dark"] .data-table tbody tr:hover { background:#2a394e; }
[data-bs-theme="dark"] .data-table small { color:#a1b0c5; }
[data-bs-theme="dark"] .side-link { color:#b4bfd0; }
[data-bs-theme="dark"] .side-link:hover { background:var(--surface-raised); color:var(--ink); }
[data-bs-theme="dark"] .side-link.current { background:var(--soft); color:var(--red); }
[data-bs-theme="dark"] :is(.profile-tile:hover,.profile-tile.selected,.option.selected) { background:var(--soft); border-color:var(--red); }
[data-bs-theme="dark"] .option-letter { border-color:#536178; }
[data-bs-theme="dark"] .option.selected .option-letter { background:#c82936; border-color:#c82936; color:white; }
[data-bs-theme="dark"] .option.correct { background:#17392e; border-color:#43896c; }
[data-bs-theme="dark"] .option.wrong { background:#422631; border-color:#ac5b70; }
[data-bs-theme="dark"] .badge-state { background:#413621; color:#f1cb82; }
[data-bs-theme="dark"] .badge-state.active { background:#1b3c31; color:#8ce0b6; }
[data-bs-theme="dark"] .badge-state.expired { background:#452833; color:#ffacb9; }
[data-bs-theme="dark"] .notice { background:#202f43; border-color:#3a506c; color:#bfd1e8; }
[data-bs-theme="dark"] .notice.warning { background:#3b3222; border-color:#695537; color:#eed4a0; }
[data-bs-theme="dark"] .notice.success { background:#1c382d; border-color:#385f4f; color:#a9dec4; }
[data-bs-theme="dark"] .form-error { background:#422630; color:#ffb3bf; }
[data-bs-theme="dark"] .progress { background:#344155; }
[data-bs-theme="dark"] .number-grid button { background:var(--surface-raised); border-color:#46546b; color:var(--ink); }
[data-bs-theme="dark"] .number-grid .answered { background:var(--soft); color:var(--red); }
[data-bs-theme="dark"] :is(.number-grid .current,.pagination-row .btn.current) { background:#c82936; color:white; border-color:#dc4b58; }
[data-bs-theme="dark"] .score-ring { background:conic-gradient(var(--red) calc(var(--score)*1%),#344155 0); }
[data-bs-theme="dark"] .score-ring>div { background:var(--surface); }
[data-bs-theme="dark"] :is(.practice-banner,.cta-panel) { background:#263246; border:1px solid #42516a; }
[data-bs-theme="dark"] .sidebar-label { color:#9eacc0; }
[data-bs-theme="dark"] .app-note { color:#94a3b9; }
[data-bs-theme="dark"] dialog::backdrop { background:#030811aa; }
@media(max-width:1024px) {
  .table-wrap:has(.responsive) { box-shadow:none; }
  .data-table.responsive tbody { gap:18px; padding:5px 8px 18px; }
  .data-table.responsive tr { box-shadow:var(--shadow-card); border-color:var(--line); }
  [data-bs-theme="dark"] .data-table.responsive tr { background:var(--surface); }
  [data-bs-theme="dark"] .nav-links { background:var(--surface); border-bottom:1px solid var(--line); }
  .demo-description { display:none; }
}
@media(max-width:480px) {
  .demo-bar { gap:10px; padding:5px 10px; flex-wrap:nowrap; justify-content:space-between; }
  .demo-bar .demo-tag { display:none; }
  .demo-bar>a { font-size:11px; }
  .demo-bar .theme-toggle { padding:5px 8px; font-size:11px; }
}