/* Peças comuns ao app do corretor (app.html) e ao backoffice (backoffice.html):
   tokens de cor (claro/escuro), reset e o interruptor de tema. Cada página tem o seu css por cima. */

  :root {
    color-scheme: light dark;
    --bg: #f4f5f7; --surface: #ffffff; --surface-2: #eef0f3; --surface-3: #e3e6eb;
    --text-1: #1a1d23; --text-2: #5c6470; --border: #d9dde3;
    --accent: #1f5eff; --accent-text: #ffffff; --accent-soft: #e8efff;
    --danger: #c62828; --danger-bg: #fdecea;
    --warn: #7a5200; --warn-bg: #fff4d6;
    --ok: #1b7f3b; --ok-bg: #e6f4ea;
    --shadow: 0 8px 24px rgba(0,0,0,.12); --radius: 10px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #101216; --surface: #1a1d23; --surface-2: #232730; --surface-3: #2c313b;
      --text-1: #eef0f3; --text-2: #9aa3b0; --border: #333945;
      --accent: #5b8cff; --accent-text: #0b1020; --accent-soft: #1f2a4a;
      --danger: #ff6b6b; --danger-bg: #3a1d1d;
      --warn: #ffd66b; --warn-bg: #3a3012;
      --ok: #4cc471; --ok-bg: #163a22;
      --shadow: 0 8px 24px rgba(0,0,0,.5);
    }
  }
  :root[data-theme="dark"] {
    --bg: #101216; --surface: #1a1d23; --surface-2: #232730; --surface-3: #2c313b;
    --text-1: #eef0f3; --text-2: #9aa3b0; --border: #333945;
    --accent: #5b8cff; --accent-text: #0b1020; --accent-soft: #1f2a4a;
    --danger: #ff6b6b; --danger-bg: #3a1d1d;
    --warn: #ffd66b; --warn-bg: #3a3012;
    --ok: #4cc471; --ok-bg: #163a22;
    --shadow: 0 8px 24px rgba(0,0,0,.5);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; }
  body { background: var(--bg); color: var(--text-1); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
  [hidden] { display: none !important; }
  button { font: inherit; color: inherit; }
  a { color: var(--accent); }

  /* ===== Interruptor de tema (a mesma peça nas duas telas) ===== */
  .interruptor-linha { cursor: pointer; }
  .interruptor-linha .rotulo-item { flex: 1; }
  .interruptor { position: relative; display: inline-flex; flex: none; }
  .interruptor input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .interruptor .trilho { width: 38px; height: 22px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border); display: block; transition: background .15s; }
  .interruptor .botao { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .15s; }
  .interruptor input:checked + .trilho { background: var(--accent); border-color: var(--accent); }
  .interruptor input:checked + .trilho .botao { transform: translateX(16px); }
  .interruptor input:focus-visible + .trilho { outline: 2px solid var(--accent); outline-offset: 2px; }