/* ==========================================================================
   CALCULADORA ATLAS — Modo claro (opcional)
   Mismo interruptor y misma paleta que el Taller ATLAS y el tablero: blanco y azul marino,
   con el dorado de la marca oscurecido para que se lea. El modo oscuro no depende de este archivo.
   ========================================================================== */
:root[data-mode="light"] {
  --bg: #f2f5f9;
  --surface: #ffffff;
  --card: #ffffff;
  --card-2: #f4f7fb;
  --border: #d9e1ea;
  --border-2: #c8d3df;
  --border-subtle: #e6ecf2;
  --text: #1f2d3d;
  --muted: #4a5a6b;
  --dim: #5f6f80;
  --cyan: #1b5e9e;
  --cyan-soft: rgba(27, 94, 158, .1);
  --cyan-line: rgba(27, 94, 158, .35);
  --gold: #8a6424;
  --gold-soft: rgba(138, 100, 36, .1);
  --danger: #b42d2d;
  --danger-soft: rgba(180, 45, 45, .07);
  --ok: #0f7a4a;
  --shadow-lift: 0 12px 32px rgba(15, 58, 104, .12);
  --knob: #0f3a68;
  --on-knob: #ffffff;
  color-scheme: light;
}
:root[data-mode="light"] body::before { background: radial-gradient(60% 40% at 50% -6%, rgba(27, 94, 158, .07), transparent 70%); }
:root[data-mode="light"] ::selection { background: rgba(27, 94, 158, .18); color: var(--text); }
:root[data-mode="light"] .topbar { background: rgba(255, 255, 255, .88); border-bottom-color: var(--border); }
:root[data-mode="light"] .brand__atlas { color: #0f3a68; }
:root[data-mode="light"] .crumbs i { color: #9fb0c2; }

:root[data-mode="light"] .hero__title-a { background-image: linear-gradient(180deg, #1d5592 0%, #0f3a68 60%, #0b2c52 100%); }
:root[data-mode="light"] .hero__title-b { background-image: linear-gradient(180deg, #c49a48 0%, #9c7430 55%, #7a5a22 100%); }
:root[data-mode="light"] .reg-card, :root[data-mode="light"] .strip, :root[data-mode="light"] .panel { box-shadow: 0 1px 2px rgba(15, 58, 104, .05), 0 8px 24px rgba(15, 58, 104, .06); }
:root[data-mode="light"] .reg-card:hover, :root[data-mode="light"] .strip:hover { border-color: rgba(27, 94, 158, .42); }
:root[data-mode="light"] .reg-card__art { opacity: .16; }

:root[data-mode="light"] .input { background: #fff; }
:root[data-mode="light"] .input::placeholder { color: #9fb0c2; }
:root[data-mode="light"] .input:focus { border-color: rgba(27, 94, 158, .5); box-shadow: 0 0 0 3px rgba(27, 94, 158, .1); }
:root[data-mode="light"] select.input option { background: #fff; }
:root[data-mode="light"] .seg button { background: #fff; }
:root[data-mode="light"] .seg button[aria-pressed="true"] { background: rgba(27, 94, 158, .08); border-color: var(--cyan); }
:root[data-mode="light"] .seg--sm { background: var(--card-2); }
:root[data-mode="light"] .seg--sm button { background: none; }
:root[data-mode="light"] .switch[aria-checked="true"]::after { background: #fff; }
:root[data-mode="light"] .switch::after { background: #b5c3d1; }
:root[data-mode="light"] .btn--primary { color: #fff; }
:root[data-mode="light"] .btn--primary:hover:not(:disabled) { color: #fff; background: #174f86; box-shadow: 0 0 0 4px rgba(27, 94, 158, .12); }
:root[data-mode="light"] .btn--primary.is-done { color: #fff; }

:root[data-mode="light"] .mcard, :root[data-mode="light"] .grp, :root[data-mode="light"] .doc-bar, :root[data-mode="light"] .tbl-wrap { background: #fff; }
:root[data-mode="light"] .mcard[aria-pressed="true"] { background: #f7fbff; }
:root[data-mode="light"] .mcard--new { background: transparent; }
:root[data-mode="light"] .dock, :root[data-mode="light"] .mobile-dock { background: rgba(255, 255, 255, .96); }
:root[data-mode="light"] .toast { background: #fff; }
:root[data-mode="light"] .paper { box-shadow: 0 1px 2px rgba(15, 58, 104, .06), 0 12px 36px rgba(15, 58, 104, .1); border: 1px solid var(--border); background: #fffdf8; }
:root[data-mode="light"] .hr--gold { opacity: .45; }