/* VoltZap — design system 2026: componentes. Carregado depois do app.css: refina o que já existe e acrescenta o que faltava. */
body { font: 14.5px/1.5 var(--fonte); letter-spacing: -.003em; background: var(--bg); }
h1, h2, h3, h4 { font-family: var(--titulo); letter-spacing: -.02em; font-weight: 700; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--r-sm); }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: padding-box; border: 2px solid transparent; } ::-webkit-scrollbar-track { background: transparent; }
a { color: var(--accent-ink); }
code { background: var(--card-2); border-color: var(--line); color: var(--ink); border-radius: 6px; }

/* botões */
.btn { border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--card); color: var(--ink); padding: 8px 14px; font-weight: 600; font-size: var(--t-sm); transition: background var(--rapido) var(--ease), border-color var(--rapido) var(--ease), transform var(--rapido) var(--ease), box-shadow var(--rapido) var(--ease); }
.btn:hover { background: var(--card-2); border-color: var(--faint); } .btn:active { transform: translateY(1px); }
.btn.primario { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); } .btn.primario:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.destaque { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 18px -8px var(--accent); } .btn.destaque:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.perigo { color: var(--red); border-color: var(--line-2); } .btn.perigo:hover { background: var(--red-soft); border-color: var(--red); }
.btn.mini { padding: 4px 10px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn.fantasma { background: transparent; border-color: transparent; color: var(--muted); } .btn.fantasma:hover { background: var(--card-2); color: var(--ink); border-color: transparent; }
.btn.icone { padding: 8px; width: 36px; height: 36px; justify-content: center; }

/* campos */
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea {
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); padding: 9px 12px; transition: border-color var(--rapido), box-shadow var(--rapido); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover, textarea:hover { border-color: var(--line-2); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--foco); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 32px; }
label.campo { font-size: var(--t-xs); font-weight: 600; letter-spacing: .01em; color: var(--muted); }

/* superfícies */
.caixa { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sombra); }
.chip { border-radius: var(--r-pill); font-weight: 600; font-size: 11.5px; padding: 2px 10px; background: var(--card-2); border: 1px solid var(--line); color: var(--muted); }
.chip.conectado { background: var(--green-soft); color: var(--green); } .chip.qr { background: var(--amber-soft); color: var(--amber); } .chip.erro, .chip.desligado { background: var(--red-soft); color: var(--red); } .chip.conectando { background: var(--accent-soft); color: var(--accent-ink); }
.etq { border-radius: var(--r-pill); font-weight: 600; font-size: 11px; padding: 1px 9px; background: var(--accent-soft); color: var(--accent-ink) !important; border: 1px solid var(--accent-line); }
.msg { border-radius: var(--r-md); border: 1px solid transparent; } .msg.erro { background: var(--red-soft); color: var(--red); border-color: rgba(239, 68, 68, .25); } .msg.ok { background: var(--green-soft); color: var(--green); border-color: rgba(34, 197, 94, .25); }

/* status (badges) */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill); background: var(--card-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.laranja { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); } .badge.verde { background: var(--green-soft); color: var(--green); border-color: transparent; }
.badge.azul { background: var(--blue-soft); color: var(--blue); border-color: transparent; } .badge.roxo { background: var(--purple-soft); color: var(--purple); border-color: transparent; }
.badge.amarelo { background: var(--amber-soft); color: var(--amber); border-color: transparent; } .badge.vermelho { background: var(--red-soft); color: var(--red); border-color: transparent; }

/* tabelas */
table { font-size: var(--t-sm); } th { font-size: 11px; letter-spacing: .08em; color: var(--faint); background: transparent; border-bottom-color: var(--line); } td { border-bottom-color: var(--line); }
tbody tr { transition: background var(--rapido); } tbody tr:hover td { background: var(--card-2); }

/* janelas e menus */
.fundo { background: rgba(4, 7, 12, .66); backdrop-filter: blur(4px); animation: aparecer .16s var(--ease); }
.modal { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-xl); box-shadow: var(--sombra-2); animation: subir .2s var(--ease); }
#menuSolta, .sugestoes { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--sombra-2); }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } } @keyframes subir { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

/* interruptor */
.switch span { background: var(--line-2); } .switch input:checked + span { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* dica (tooltip) — qualquer elemento com data-dica */
[data-dica] { position: relative; }
[data-dica]:hover::after, [data-dica]:focus-visible::after { content: attr(data-dica); position: absolute; z-index: 120; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; background: #05080d; color: #f5f7fa; border: 1px solid var(--line-2); font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: var(--r-sm); pointer-events: none; box-shadow: var(--sombra); }
[data-dica].dica-dir:hover::after { left: calc(100% + 10px); bottom: 50%; transform: translateY(50%); }

/* estados vazios e carregamento */
.vazio { color: var(--muted); }
.vazio-card { display: grid; place-items: center; gap: 10px; text-align: center; padding: 44px 18px; color: var(--muted); }
.vazio-card .ico-vazio { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--card-2); border: 1px solid var(--line); color: var(--faint); }
.vazio-card b { color: var(--ink); font-size: var(--t-md); } .vazio-card p { margin: 0; max-width: 34ch; font-size: var(--t-sm); }
.sk { display: block; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--card-2) 25%, var(--card-3) 37%, var(--card-2) 63%); background-size: 400% 100%; animation: brilho 1.3s ease infinite; }
@keyframes brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* avisos flutuantes (toasts) */
#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: grid; gap: 8px; }
.toast { display: flex; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: 10px 14px; box-shadow: var(--sombra-2); font-size: var(--t-sm); animation: subir .2s var(--ease); max-width: 360px; }
.toast.erro { border-left-color: var(--red); } .toast.ok { border-left-color: var(--green); }

/* login */
#entrada { background: var(--bg); }
.lg-marca { background: var(--side); border-right: 1px solid var(--side-line); }
.lg-marca h1 { font-weight: 800; letter-spacing: -.04em; } .lg-marca h1 em { color: var(--accent); }
.lg-form { background: radial-gradient(900px 500px at 70% -10%, rgba(255, 90, 31, .07), transparent 60%), var(--bg); }
.lg-form form { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 30px; box-shadow: var(--sombra); }
.lg-form h2 { font-weight: 800; }
.lg-form .btn { border-radius: var(--r-md); }