/* Padrão visual Lunarco: aparência de software de desktop, compacta, em claro e escuro. Os outros sistemas usam os mesmos valores. */
:root {
  color-scheme: light;
  --bg: #f3f4f8; --sup: #ffffff; --sup2: #f7f8fb; --t: #1b2233; --m: #5b6478; --l: #d9dee9;
  --a: #2563c9; --a-forte: #1d4fa3; --a-sel: #e3ecfb; --a-t: #ffffff; --esc: #b4690e;
  --ruim: #b3261e; --ruim-bg: #fdecea; --ok: #1a7f37; --barra: #121a36; --barra-t: #ffffff; --barra-l: rgba(255, 255, 255, .16);
  --sombra: 0 1px 2px rgba(18, 26, 54, .08);
  --campo: 28px; --fonte: 13px;
}
:root[data-tema="dark"] { color-scheme: dark; --bg: #0d142b; --sup: #172040; --sup2: #1c2750; --t: #e8ecf7; --m: #a3adc6; --l: #2d3a63; --a: #7ea6ff; --a-forte: #a3c0ff; --a-sel: #24345f; --a-t: #0d142b; --esc: #f0b35c; --ruim: #ffb4ab; --ruim-bg: #47181c; --ok: #6fdc8c; --barra: #0a1024; --sombra: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) { color-scheme: dark; --bg: #0d142b; --sup: #172040; --sup2: #1c2750; --t: #e8ecf7; --m: #a3adc6; --l: #2d3a63; --a: #7ea6ff; --a-forte: #a3c0ff; --a-sel: #24345f; --a-t: #0d142b; --esc: #f0b35c; --ruim: #ffb4ab; --ruim-bg: #47181c; --ok: #6fdc8c; --barra: #0a1024; --sombra: none; }
}
/* No celular e no toque, os controles crescem para caber o dedo. */
@media (max-width: 760px), (pointer: coarse) { :root { --campo: 40px; --fonte: 15px; } }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--t); font: var(--fonte)/1.4 "Segoe UI Variable", "Segoe UI", Manrope, system-ui, sans-serif; min-height: 100vh; }
a { color: var(--a); text-decoration: none; }
a:hover { text-decoration: underline; }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--l); background: var(--sup); padding: 0 10px; border-radius: 3px; min-height: var(--campo); }
button:hover { background: var(--a-sel); }
button.pri, button.on { background: var(--a); border-color: var(--a); color: var(--a-t); font-weight: 600; }
button.pri:hover { background: var(--a-forte); }
button.perigo { color: var(--ruim); border-color: var(--ruim); }
button.leve { background: transparent; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--a); outline-offset: 1px; }
input, select, textarea { background: var(--sup); border: 1px solid var(--l); border-radius: 3px; padding: 0 8px; min-height: var(--campo); }
textarea { padding: 6px 8px; resize: vertical; }
@media (max-width: 760px), (pointer: coarse) { input, select, textarea { font-size: 16px; } }
table { width: 100%; border-collapse: collapse; }
td, th { text-align: left; padding: 4px 6px; border-top: 1px solid var(--l); vertical-align: top; }
th { color: var(--m); font-weight: 600; font-size: .85em; border-top: 0; }
.barra-app { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 2px 12px; background: var(--barra); color: var(--barra-t); flex-wrap: wrap; }
.barra-app a { color: var(--barra-t); }
.barra-app img { display: block; height: 30px; width: auto; }
.barra-app .esp { flex: 1; min-width: 8px; }
.barra-app button, .barra-app select { background: transparent; color: var(--barra-t); border-color: var(--barra-l); }
.barra-app select option { color: var(--t); background: var(--sup); }
.barra-app button:hover { background: var(--barra-l); }
.sub { color: var(--m); font-size: .92em; }
.bloco { background: var(--sup); border: 1px solid var(--l); box-shadow: var(--sombra); padding: 10px 12px; margin-bottom: 8px; border-radius: 3px; overflow-x: auto; }
h1 { font-size: 16px; font-weight: 600; margin: 0; }
h2 { font-size: 13px; font-weight: 600; margin: 0 0 6px; }
h3 { font-size: 13px; font-weight: 600; margin: 0; }
#erro { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); background: var(--ruim-bg); color: var(--ruim); border: 1px solid var(--ruim); padding: 6px 12px; border-radius: 3px; display: none; max-width: 90vw; z-index: 9; }