/* ══ formularios.css — padrão único de campos de formulário (11/11/2026) ═══════════════════════════════════════════
 * Carregado POR ÚLTIMO no index.html e em todas as telas próprias (iframes), depois do tema-claro.css.
 * Causas corrigidas:
 *   1. .form-input (≈500 campos), .form-select, .input, .input-bordered, .select-bordered… não tinham CSS nenhum:
 *      apareciam com a caixa branca do navegador, inclusive no tema escuro.
 *   2. O campo usava o mesmo fundo do modal (--bg-elevated) e "sumia" dentro dele.
 *   3. Cada tela em iframe redefinia input/select/textarea do seu jeito (raio 6/7/10, padding 5/6/7/11…).
 * Camadas (da mais fraca para a mais forte):
 *   A. base  — qualquer campo, sem classe ou com classe sem CSS. Especificidade (0,0,3) com "html body": vence as
 *              regras genéricas das telas (input, select {…}) e PERDE para qualquer componente com classe própria
 *              (terminal, topologia, barras de filtro transparentes, mapa) — eles continuam como foram desenhados.
 *   B. classes de formulário — .form-input, .form-control, .form-select… (0,1,0) e .form-group <campo> (0,1,1).
 *   C. campos com estilo inline que imitava o campo padrão (style="…border:1px solid var(--border)…").
 * Para um campo ficar fora do padrão: data-campo="livre".
 * Tamanhos: .campo-sm / .input-sm / .form-control-sm / .select-sm (32 px) e .campo-xs / .form-select-xs (28 px).
 * Peças novas para formulários: .campo, .campo-rotulo, .campo-ajuda, .campo-erro, .campo-grade (ver fim do arquivo).
 * ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── tokens ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
:root {
    --campo-bg:            rgba(15, 23, 42, 0.65);
    --campo-bg-hover:      rgba(15, 23, 42, 0.78);
    --campo-bg-foco:       rgba(15, 23, 42, 0.95);
    --campo-bg-desab:      rgba(148, 163, 184, 0.08);
    --campo-borda:         rgba(148, 163, 184, 0.28);
    --campo-borda-hover:   rgba(148, 163, 184, 0.52);
    --campo-borda-foco:    var(--accent, #38bdf8);
    --campo-anel:          color-mix(in srgb, var(--accent, #38bdf8) 28%, transparent);
    --campo-erro:          var(--red, #f43f5e);
    --campo-anel-erro:     color-mix(in srgb, var(--red, #f43f5e) 26%, transparent);
    --campo-texto:         var(--text-primary, #f8fafc);
    --campo-placeholder:   rgba(148, 163, 184, 0.55);
    --campo-rotulo:        var(--text-secondary, #cbd5e1);
    --campo-raio:          9px;
    --campo-sombra:        0 1px 3px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.04);
    --campo-sombra-foco:   0 0 0 3.5px var(--campo-anel), 0 2px 8px rgba(0, 0, 0, 0.4);
    --campo-fonte:         13.5px;
    --campo-pad-y:         9.5px;
    --campo-pad-x:         13px;
    --campo-esquema:       dark;
    --campo-seta: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    --campo-marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
    --campo-traco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='4' y1='8' x2='12' y2='8'/%3E%3C/svg%3E");
}
[data-theme="light"] {
    --campo-bg:            #ffffff;
    --campo-bg-hover:      #f8fafc;
    --campo-bg-foco:       #ffffff;
    --campo-bg-desab:      #f1f5f9;
    --campo-borda:         #cbd5e1;
    --campo-borda-hover:   #94a3b8;
    --campo-borda-foco:    var(--accent, #0284c7);
    --campo-anel:          color-mix(in srgb, var(--accent, #0284c7) 22%, transparent);
    --campo-sombra:        0 1px 2px rgba(15, 23, 42, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.8);
    --campo-sombra-foco:   0 0 0 3.5px var(--campo-anel), 0 2px 6px rgba(15, 23, 42, 0.08);
    --campo-placeholder:   #94a3b8;
    --campo-rotulo:        #334155;
    --campo-esquema:       light;
    --campo-seta: 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='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
[data-theme="contrast"] { --campo-bg: #000; --campo-bg-hover: #000; --campo-bg-foco: #000; --campo-borda: #fff; --campo-borda-hover: #fff; --campo-sombra: none; --campo-sombra-foco: 0 0 0 3px #fff; }
[data-theme="nord"]     { --campo-bg: rgba(46, 52, 64, 0.75); --campo-bg-hover: rgba(46, 52, 64, 0.85); --campo-bg-foco: rgba(46, 52, 64, 0.95); }

/* ══ A. BASE — qualquer campo de texto, seleção e área de texto ═══════════════════════════════════════════════════ */
html body input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="hidden"], [data-campo="livre"], [style*="border:none"], [style*="border: none"], [style*="border:0"], [style*="border: 0"], .nav-search-input, .spotlight-input, .cli-ws-search-input, .ftth-dd-search, .tag-input, .prop-input, .topo-dev-search-input, .noc-search-box *, .sidebar-search *, .pane-search-bar *, .dash-ctl *, .dash-var *, .ql-container *, .flatpickr-calendar *, .leaflet-control *, .xterm *)),
html body select:where(:not([data-campo="livre"], [style*="border:none"], [style*="border: none"], [style*="border:0"], [style*="border: 0"], .nav-search-input, .spotlight-input, .cli-ws-search-input, .ftth-dd-search, .tag-input, .prop-input, .topo-dev-search-input, .noc-search-box *, .sidebar-search *, .pane-search-bar *, .dash-ctl *, .dash-var *, .ql-container *, .flatpickr-calendar *, .leaflet-control *, .xterm *)),
html body textarea:where(:not([data-campo="livre"], .xterm-helper-textarea, [style*="border:none"], [style*="border: none"], [style*="border:0"], [style*="border: 0"], .nav-search-input, .spotlight-input, .cli-ws-search-input, .ftth-dd-search, .tag-input, .prop-input, .topo-dev-search-input, .noc-search-box *, .sidebar-search *, .pane-search-bar *, .dash-ctl *, .dash-var *, .ql-container *, .flatpickr-calendar *, .leaflet-control *, .xterm *)) {
    background-color: var(--campo-bg);
    border: 1px solid var(--campo-borda);
    border-radius: var(--campo-raio);
    color: var(--campo-texto);
    font-family: var(--font, inherit);
    font-size: var(--campo-fonte);
    line-height: 1.4;
    padding: var(--campo-pad-y) var(--campo-pad-x);
    box-shadow: var(--campo-sombra);
    color-scheme: var(--campo-esquema);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    box-sizing: border-box;
    max-width: 100%;
}
html body textarea:where(:not([data-campo="livre"], .xterm-helper-textarea, [style*="border:none"], [style*="border: none"], [style*="border:0"], [style*="border: 0"], .nav-search-input, .spotlight-input, .cli-ws-search-input, .ftth-dd-search, .tag-input, .prop-input, .topo-dev-search-input, .noc-search-box *, .sidebar-search *, .pane-search-bar *, .dash-ctl *, .dash-var *, .ql-container *, .flatpickr-calendar *, .leaflet-control *, .xterm *)) { line-height: 1.5; resize: vertical; }

/* select sem classe: seta própria (os que têm classe de componente mantêm a seta nativa — o "background:" deles
   apagaria a seta desenhada) */
html body select:where(:not([class], [multiple], [size], [data-campo="livre"], [style*="border:none"], [style*="border: none"], [style*="border:0"], [style*="border: 0"], .nav-search-input, .spotlight-input, .cli-ws-search-input, .ftth-dd-search, .tag-input, .prop-input, .topo-dev-search-input, .noc-search-box *, .sidebar-search *, .pane-search-bar *, .dash-ctl *, .dash-var *, .ql-container *, .flatpickr-calendar *, .leaflet-control *, .xterm *)) {
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--campo-seta);
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 12px;
    padding-right: 34px;
    cursor: pointer;
}

/* ══ B. CLASSES DE FORMULÁRIO ════════════════════════════════════════════════════════════════════════════════════ */
.form-input, .form-control, .form-select, .input-bordered, .select-bordered,
input.input, select.select, .dk-in, .mnt-in, .tt-device-select, .mt-num, .snmp-fallback-community, .snmp-fallback-version,
.mk-fallback-user, .mk-fallback-pass, .mk-fallback-port-number, .mk-fallback-port-type, .ldap-group-dn, .ldap-group-role, .ec-recipients, .ec-prefix,
.form-group :is(input, select, textarea):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="hidden"], [class], [data-campo="livre"])) {
    background-color: var(--campo-bg);
    border: 1px solid var(--campo-borda);
    border-radius: var(--campo-raio);
    color: var(--campo-texto);
    font-family: var(--font, inherit);
    font-size: var(--campo-fonte);
    line-height: 1.4;
    padding: var(--campo-pad-y) var(--campo-pad-x);
    box-shadow: var(--campo-sombra);
    color-scheme: var(--campo-esquema);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    box-sizing: border-box;
    max-width: 100%;
}
/* largura: os campos de formulário ocupam a coluna (o inline "width:auto"/"width:140px" continua valendo) */
.form-control, .form-group :is(input, select, textarea):where(:not([type="checkbox"], [type="radio"], [class])) { width: 100%; }
textarea:is(.form-input, .form-control, .input-bordered, .dk-in, .mnt-in),
.form-group textarea:where(:not([class])) { line-height: 1.5; resize: vertical; min-height: 84px; }

select:is(.form-input, .form-control, .form-select, .select-bordered, .select, .dk-in, .mnt-in):where(:not([multiple], [size])),
.form-group select:where(:not([class], [multiple], [size])) {
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--campo-seta);
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 12px;
    padding-right: 34px;
    cursor: pointer;
}
select[multiple]:is(.form-input, .form-control, .form-select), html body select:where([multiple]) { padding: 6px; }
select[multiple] option, select[size] option { padding: 5px 8px; border-radius: 5px; margin: 1px 0; background: transparent; }
select[multiple] option:hover, select[size] option:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); }
select[multiple] option:checked, select[size] option:checked {
    background: linear-gradient(0deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent) 26%, transparent));
    color: var(--text-primary);
    font-weight: 600;
}

/* tamanhos */
.campo-sm, .input-sm, .form-control-sm, .select-sm, .form-control.form-control-sm {
    font-size: 12.5px !important; padding: 6px 10px !important; border-radius: calc(var(--campo-raio) - 1px);
}
select:is(.campo-sm, .input-sm, .form-control-sm, .select-sm) { padding-right: 30px !important; background-position: right 9px center; }
.campo-xs, .form-select-xs {
    font-size: 12px !important; padding: 4px 8px !important; border-radius: calc(var(--campo-raio) - 2px);
}
select:is(.campo-xs, .form-select-xs) { padding-right: 26px !important; background-position: right 7px center; background-size: 10px; }
.campo-lg { font-size: 15px !important; padding: 11px 14px !important; }
.campo-mono, .acs-mono, .sfw-mono, .snw-mono { font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace !important; font-size: 12.5px; }

/* ══ C. ESTILO INLINE QUE IMITAVA O CAMPO PADRÃO ═════════════════════════════════════════════════════════════════
 * ~40 campos no index.html e nos módulos JS repetem "background:var(--bg-…);border:1px solid var(--border)…" no
 * style="". Só a aparência é alinhada; largura, padding e fonte do inline continuam valendo. */
:is(input, select, textarea)[style*="solid var(--border"]:where(:not([type="checkbox"], [type="radio"], [type="color"], [type="range"], [type="file"], [data-campo="livre"])) {
    background-color: var(--campo-bg) !important;
    border-color: var(--campo-borda) !important;
    border-radius: var(--campo-raio) !important;
    color: var(--campo-texto) !important;
    box-shadow: var(--campo-sombra);
    color-scheme: var(--campo-esquema);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* ══ ESTADOS (valem para todas as camadas) ════════════════════════════════════════════════════════════════════════ */
:is(html body input, html body select, html body textarea):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [data-campo="livre"], [style*="border:none"], [style*="border: none"], [style*="border:0"], [style*="border: 0"], .nav-search-input, .spotlight-input, .cli-ws-search-input, .ftth-dd-search, .tag-input, .prop-input, .topo-dev-search-input, .noc-search-box *, .sidebar-search *, .pane-search-bar *, .dash-ctl *, .dash-var *, .ql-container *, .flatpickr-calendar *, .leaflet-control *, .xterm *)):where(:hover:not(:focus, :disabled, [readonly])) {
    border-color: var(--campo-borda-hover);
}
:is(.form-input, .form-control, .form-select, .input-bordered, .select-bordered, input.input, select.select, .dk-in, .mnt-in):hover:not(:focus, :disabled, [readonly]) {
    border-color: var(--campo-borda-hover);
    background-color: var(--campo-bg-hover);
}
:is(html body input, html body select, html body textarea):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [data-campo="livre"], [style*="border:none"], [style*="border: none"], [style*="border:0"], [style*="border: 0"], .nav-search-input, .spotlight-input, .cli-ws-search-input, .ftth-dd-search, .tag-input, .prop-input, .topo-dev-search-input, .noc-search-box *, .sidebar-search *, .pane-search-bar *, .dash-ctl *, .dash-var *, .ql-container *, .flatpickr-calendar *, .leaflet-control *, .xterm *)):focus,
:is(.form-input, .form-control, .form-select, .input-bordered, .select-bordered, input.input, select.select, .dk-in, .mnt-in):focus,
.form-group :is(input, select, textarea):focus {
    border-color: var(--campo-borda-foco);
    background-color: var(--campo-bg-foco);
    box-shadow: var(--campo-sombra-foco);
    outline: none;
}
:is(input, select, textarea)[style*="solid var(--border"]:focus {
    border-color: var(--campo-borda-foco) !important;
    box-shadow: var(--campo-sombra-foco) !important;
}
/* placeholder */
:is(input, textarea)::placeholder { color: var(--campo-placeholder); opacity: 1; }
/* desabilitado / somente leitura */
:is(input, select, textarea):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"])):disabled {
    background-color: var(--campo-bg-desab);
    border-style: dashed;
    color: var(--text-muted);
    cursor: not-allowed;
    box-shadow: none;
    opacity: .8;
}
:is(input, textarea):where(:not([type="checkbox"], [type="radio"]))[readonly]:not(:disabled) {
    background-color: var(--campo-bg-desab);
    box-shadow: none;
}
:is(input, textarea)[readonly]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-muted) 16%, transparent); border-color: var(--campo-borda-hover); }
/* inválido: só depois que a pessoa mexeu (:user-invalid) ou quando a tela marcar (aria-invalid / .campo-invalido) */
:is(input, select, textarea):is(:user-invalid, [aria-invalid="true"], .campo-invalido, .is-invalid) {
    border-color: var(--campo-erro) !important;
}
:is(input, select, textarea):is(:user-invalid, [aria-invalid="true"], .campo-invalido, .is-invalid):focus {
    box-shadow: 0 0 0 3px var(--campo-anel-erro) !important;
}
/* ══ D2. SELECT COM ALTURA FIXA (12/11/2026) ══════════════════════════════════════════════════════════════════════
 * O padrão dá 9,5 px de espaço interno em cima e embaixo (altura natural ≈ 40 px). Select com altura fixa menor
 * (style="height:30px" ou regra da tela com 28–34 px) ficava com ~9 px para um texto de 19 px: o item escolhido
 * aparecia cortado ou sumia. Com altura fixa, o espaço vertical vira 0 e o texto fica centralizado na altura dada.
 * Select sem altura fixa não muda. */
html body select:where(:not([multiple], [size]))[style^="height"],
html body select:where(:not([multiple], [size]))[style*=";height"],
html body select:where(:not([multiple], [size]))[style*="; height"],
.mpc-previa-barra select, #mon-dev-unificado #dev-chips .dev-chip-select, #dla-pager select,
.ftthn-bar select.form-control, #ftth-view-relatorios .ftr-filtros select.form-control, .nt-op select.form-control,
.mr-campo select.form-input, .mr-pz-nova select.form-input {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* lista de opções do select: cores do tema (no tema escuro a lista nativa vinha branca) */
select:not([multiple], [size]) option { background-color: var(--bg-elevated); color: var(--text-primary); }
select option:disabled { color: var(--text-muted); }
select optgroup { background-color: var(--bg-surface); color: var(--text-secondary); font-weight: 700; }

/* ── tipos especiais ─────────────────────────────────────────────────────────────────────────────────────────────── */
/* data/hora: ícone do calendário segue o tema (o filtro invert do style.css deixava o ícone branco no tema claro) */
input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"], [type="week"])::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: .65;
    cursor: pointer;
    border-radius: 4px;
    padding: 2px;
    transition: opacity .15s, background-color .15s;
}
input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"], [type="week"])::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    background-color: color-mix(in srgb, var(--accent) 14%, transparent);
}
input[type="date"], input[type="datetime-local"], input[type="time"] { font-variant-numeric: tabular-nums; }
/* número: setas discretas */
input[type="number"] { font-variant-numeric: tabular-nums; }
input[type="number"]::-webkit-inner-spin-button { opacity: .35; cursor: pointer; }
input[type="number"]:hover::-webkit-inner-spin-button, input[type="number"]:focus::-webkit-inner-spin-button { opacity: .8; }
/* busca: botão de limpar no tom do tema */
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; opacity: .6; filter: grayscale(1); }

/* arquivo: o botão do seletor vira um botão do sistema */
html body input:where([type="file"]:not([data-campo="livre"])) {
    font-family: var(--font, inherit);
    font-size: 12.5px;
    color: var(--text-secondary);
    max-width: 100%;
    border-radius: var(--campo-raio);
}
html body input:where([type="file"]:not([data-campo="livre"]))::file-selector-button {
    margin-right: 10px;
    padding: 7px 14px;
    border: 1px solid var(--campo-borda);
    border-radius: var(--campo-raio);
    background-color: var(--bg-hover, var(--bg-elevated));
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
html body input:where([type="file"]:not([data-campo="livre"]))::file-selector-button:hover {
    border-color: var(--accent);
    background-color: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
}

/* cor: amostra arredondada no lugar do quadrado cru do navegador */
html body input:where([type="color"]:not([data-campo="livre"])) {
    -webkit-appearance: none;
    appearance: none;
    min-width: 44px;
    min-height: 36px;
    padding: 3px;
    border: 1px solid var(--campo-borda);
    border-radius: var(--campo-raio);
    background-color: var(--campo-bg);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
html body input:where([type="color"]:not([data-campo="livre"]))::-webkit-color-swatch-wrapper { padding: 0; }
html body input:where([type="color"]:not([data-campo="livre"]))::-webkit-color-swatch { border: none; border-radius: calc(var(--campo-raio) - 3px); }
html body input:where([type="color"]:not([data-campo="livre"]))::-moz-color-swatch { border: none; border-radius: calc(var(--campo-raio) - 3px); }
html body input:where([type="color"]:not([data-campo="livre"])):hover { border-color: var(--campo-borda-hover); }
html body input:where([type="color"]:not([data-campo="livre"])):focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--campo-anel); }

/* faixa (range) */
html body input:where([type="range"]:not([data-campo="livre"])) { accent-color: var(--accent); cursor: pointer; }

/* ── MARCAÇÃO: caixa de seleção e opção (checkbox/radio) ─────────────────────────────────────────────────────────
 * Todas desenhadas pelo sistema. A cor de marcado é --campo-marcado (acento do tema); as que tinham accent-color com
 * significado no style="" (verde, vermelho, âmbar, azul) mantêm essa cor. Interruptores (.switch, .dev-view-toggle…)
 * escondem a caixa com regra de classe, que vence esta (especificidade 0,0,3). */
input[style*="accent-color:#ef4444"], input[style*="accent-color: #ef4444"] { --campo-marcado: #ef4444; }
input[style*="accent-color:#10b981"], input[style*="accent-color: #10b981"] { --campo-marcado: #10b981; }
input[style*="accent-color:#f59e0b"], input[style*="accent-color: #f59e0b"] { --campo-marcado: #f59e0b; }
input[style*="accent-color:#3b82f6"], input[style*="accent-color: #3b82f6"] { --campo-marcado: #3b82f6; }
input[style*="accent-color:var(--topo-accent"] { --campo-marcado: var(--topo-accent, #60a5fa); }
html body input:where([type="checkbox"], [type="radio"]):where(:not([data-campo="livre"])) {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    min-width: 16px;                /* ~12 caixas têm style="width:auto" inline: sem isso viram uma barra */
    min-height: 16px;
    margin: 0;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: -3px;
    border: 1.5px solid color-mix(in srgb, var(--text-muted) 80%, transparent);
    border-radius: 4.5px;
    background-color: var(--campo-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 78%;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
html body input:where([type="radio"]):where(:not([data-campo="livre"])) { border-radius: 50%; }
html body input:where([type="checkbox"], [type="radio"]):where(:not([data-campo="livre"])):hover:not(:disabled) {
    border-color: var(--campo-marcado, var(--accent));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--campo-marcado, var(--accent)) 14%, transparent);
}
html body input:where([type="checkbox"]):where(:not([data-campo="livre"])):checked {
    background-color: var(--campo-marcado, var(--accent));
    border-color: var(--campo-marcado, var(--accent));
    background-image: var(--campo-marca);
}
html body input:where([type="checkbox"]):where(:not([data-campo="livre"])):indeterminate {
    background-color: var(--campo-marcado, var(--accent));
    border-color: var(--campo-marcado, var(--accent));
    background-image: var(--campo-traco);
}
html body input:where([type="radio"]):where(:not([data-campo="livre"])):checked {
    border-color: var(--campo-marcado, var(--accent));
    background-color: var(--campo-marcado, var(--accent));
    box-shadow: inset 0 0 0 3px var(--bg-elevated, #1e293b);
}
html body input:where([type="radio"]):where(:not([data-campo="livre"])):checked:hover:not(:disabled) {
    box-shadow: inset 0 0 0 3px var(--bg-elevated, #1e293b), 0 0 0 3px color-mix(in srgb, var(--campo-marcado, var(--accent)) 14%, transparent);
}
html body input:where([type="checkbox"], [type="radio"]):where(:not([data-campo="livre"])):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--campo-anel);
}
html body input:where([type="radio"]):where(:not([data-campo="livre"])):checked:focus-visible {
    box-shadow: inset 0 0 0 3px var(--bg-elevated, #1e293b), 0 0 0 3px var(--campo-anel);
}
html body input:where([type="checkbox"], [type="radio"]):where(:not([data-campo="livre"])):disabled {
    opacity: .45;
    cursor: not-allowed;
}
[data-theme="light"] input[type="radio"]:checked { --bg-elevated: #fff; }
/* rótulo clicável ao lado da caixa */
label:has(> input:is([type="checkbox"], [type="radio"])) { cursor: pointer; }

/* ── INTERRUPTOR (liga/desliga): <label class="switch"><input type="checkbox"><span class="slider"></span></label> ──
 * Não tinha CSS no sistema (aparecia como caixa crua). Especificidade baixa: telas com .switch próprio (mcp-hub)
 * continuam com o delas. */
:where(.switch) {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex: 0 0 auto;
    vertical-align: middle;
    cursor: pointer;
}
html body :where(.switch) > input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
    box-shadow: none;
}
:where(.switch) > span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 32%, var(--campo-bg));
    border: 1px solid var(--campo-borda);
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
:where(.switch) > span::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: transform .18s cubic-bezier(.4, 0, .2, 1);
}
:where(.switch):hover > input:not(:disabled) + span { border-color: var(--campo-borda-hover); }
:where(.switch) > input:checked + span { background: var(--accent); border-color: var(--accent); }
:where(.switch) > input:checked + span::before { transform: translate(16px, -50%); }
:where(.switch) > input:focus-visible + span { box-shadow: 0 0 0 3px var(--campo-anel); }
:where(.switch) > input:disabled + span { opacity: .5; cursor: not-allowed; }

/* ══ BUSCAS E FILTROS ══════════════════════════════════════════════════════════════════════════════════════════════
 * 1. Buscas/filtros com classe própria: mesmo acabamento (fundo, borda, foco, seta) — o tamanho e o espaço do ícone
 *    (padding-left) de cada componente continuam os dele. */
:is(.dev-search-input, .dev-chip-select, .dev-filters input, .dev-filters select, .ftth-filter, .sm-input,
    .bkp-search-row input, .bkp-search-row select, .ch-left-search input, .ch-prop-row input, .ch-prop-row select,
    .ch-prop-row-2col input):where(:not([type="checkbox"], [type="radio"], [type="color"], [type="file"])) {
    background-color: var(--campo-bg);
    border-color: var(--campo-borda);
    box-shadow: var(--campo-sombra);
    color: var(--campo-texto);
    color-scheme: var(--campo-esquema);
    font-family: var(--font, inherit);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
:is(.dev-search-input, .dev-chip-select, .dev-filters input, .dev-filters select, .ftth-filter, .sm-input,
    .bkp-search-row input, .bkp-search-row select, .ch-left-search input, .ch-prop-row input, .ch-prop-row select,
    .ch-prop-row-2col input):where(:not([type="checkbox"], [type="radio"], [type="color"], [type="file"])):hover:not(:focus) {
    border-color: var(--campo-borda-hover);
}
:is(.dev-search-input, .dev-chip-select, .dev-filters input, .dev-filters select, .ftth-filter, .sm-input,
    .bkp-search-row input, .bkp-search-row select, .ch-left-search input, .ch-prop-row input, .ch-prop-row select,
    .ch-prop-row-2col input):where(:not([type="checkbox"], [type="radio"], [type="color"], [type="file"])):focus {
    border-color: var(--campo-borda-foco);
    background-color: var(--campo-bg-foco);
    box-shadow: 0 0 0 3px var(--campo-anel);
    outline: none;
}
select:is(.dev-chip-select, .ftth-filter, .sm-input):where(:not([multiple], [size])),
:is(.dev-filters, .bkp-search-row, .ch-prop-row) select:where(:not([multiple], [size])) {
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--campo-seta);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 11px;
    padding-right: 30px;
    cursor: pointer;
}
/* 2. Buscas "caixa + campo sem borda" (menu lateral, NOC, CLI, Ctrl+K): a caixa recebe o visual e o anel de foco */
:is(.nav-search-wrap, .noc-search-box, .cli-ws-search-wrap, .cliws-scope .sidebar-search) {
    background-color: var(--campo-bg);
    border-color: var(--campo-borda);
    box-shadow: var(--campo-sombra);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
:is(.nav-search-wrap, .noc-search-box, .cli-ws-search-wrap, .cliws-scope .sidebar-search):hover:not(:focus-within) { border-color: var(--campo-borda-hover); }
:is(.nav-search-wrap, .noc-search-box, .cli-ws-search-wrap, .cliws-scope .sidebar-search):focus-within {
    border-color: var(--campo-borda-foco);
    background-color: var(--campo-bg-foco);
    box-shadow: 0 0 0 3px var(--campo-anel);
}
:is(.nav-search-wrap, .noc-search-box, .cli-ws-search-wrap, .cliws-scope .sidebar-search):focus-within i { color: var(--accent); }
/* 3. Campo de busca (type="search" ou class="campo-busca"): lupa desenhada, salvo quando já tem ícone ao lado */
html body input:where([type="search"]):where(:not(i + input, .campo-icone *, .input-with-icon *, .dev-search-input, [style*="border:none"], [style*="border: none"], [data-campo="livre"], .nav-search-input, .spotlight-input, .cli-ws-search-input, .noc-search-box *, .sidebar-search *, .pane-search-bar *)),
input.campo-busca {
    padding-left: 34px !important;
    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.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    background-size: 14px !important;
}

/* ══ RÓTULOS e peças para formulários novos ═════════════════════════════════════════════════════════════════════════
 *   <div class="campo-grade">                         grade responsiva (2 colunas; 1 no celular)
 *     <label class="campo">                           ou <div class="campo">
 *       <span class="campo-rotulo">Nome <b class="campo-obrig">*</b></span>
 *       <input class="form-input">
 *       <small class="campo-ajuda">Como aparece no mapa</small>
 *     </label>
 *     <label class="campo campo-largo">…</label>      ocupa a linha inteira
 *   </div>
 *   <fieldset class="campo-secao"><legend>Acesso</legend>…</fieldset>   bloco com título */
/* ══ RÓTULOS e peças para formulários ═════════════════════════════════════════════════════════════════════════
 *   Respiro adequado entre títulos e campos, tipografia nítida e hierarquia visual de alto nível.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px !important;
    margin-bottom: 16px;
    flex: 1;
}

.form-group label,
.campo-rotulo,
.form-label,
label:not(.remember-me, [class*="chip"], [class*="btn"], :has(> input[type="checkbox"]), :has(> input[type="radio"])) {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .025em;
    text-transform: uppercase;
    color: var(--campo-rotulo);
    margin-bottom: 6px;
    line-height: 1.3;
}

/* Espaçamento perfeito dentro de grids e linhas de formulário */
.form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
}
@media (max-width: 640px) {
    .form-row {
        flex-direction: column;
        gap: 12px;
    }
}

.campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin-bottom: 14px; }
.campo > .form-input, .campo > .form-control, .campo > input, .campo > select, .campo > textarea { width: 100%; }
.campo-obrig, .campo-rotulo b, .form-label b { color: var(--campo-erro); font-weight: 700; margin-left: 2px; }
.campo-ajuda { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; margin-top: 4px; }
.campo-erro { font-size: 11.5px; color: var(--campo-erro); line-height: 1.4; display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.campo-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.campo-grade.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campo-grade > .campo-largo, .campo-grade > .full, .campo-grade > .largo { grid-column: 1 / -1; }

/* ══ BOTÕES DE AÇÃO E RODAPÉS DE MODAIS ══════════════════════════════════════════════════════════════════════════
 * Elevação táctil, microinterações, gradientes suaves e distinção clara entre cancelar e salvar.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.btn, button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8.5px 18px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn:active:not(:disabled) {
    transform: scale(0.975);
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* Primário (Ação Principal) */
.btn-primary, button.btn-primary {
    background: linear-gradient(180deg, var(--accent, #38bdf8), color-mix(in srgb, var(--accent, #38bdf8) 88%, #000)) !important;
    border: 1px solid color-mix(in srgb, var(--accent, #38bdf8) 80%, #fff 20%) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--accent, #38bdf8) 32%, transparent), inset 0 1px 1px rgba(255, 255, 255, 0.35);
}
.btn-primary:hover:not(:disabled), button.btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #38bdf8) 90%, #fff 10%), var(--accent, #38bdf8)) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent, #38bdf8) 45%, transparent), inset 0 1px 1px rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

/* Secundário / Cancelar / Neutro */
.btn-ghost, .btn-secondary, .btn.sec {
    background: rgba(148, 163, 184, 0.08) !important;
    border: 1px solid var(--campo-borda) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.btn-ghost:hover:not(:disabled), .btn-secondary:hover:not(:disabled), .btn.sec:hover:not(:disabled) {
    background: rgba(148, 163, 184, 0.16) !important;
    border-color: var(--campo-borda-hover) !important;
    transform: translateY(-1px);
}

/* Tamanhos: o .btn acima (mesma especificidade, carregado depois do style.css) apagava o padding/fonte do .btn-sm e
   do .btn-xs — botão pequeno com recheio de botão grande (11/11/2026). */
.btn.btn-sm, button.btn.btn-sm { padding: 6px 12px; font-size: 12px; gap: 6px; }
.btn.btn-xs, button.btn.btn-xs { padding: 4px 9px; font-size: 11.5px; gap: 5px; }

/* Perigo / Exclusão */
.btn-danger, .btn.perigo {
    background: linear-gradient(180deg, rgba(244, 63, 94, 0.85), #e11d48) !important;
    border: 1px solid rgba(253, 164, 175, 0.3) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}
.btn-danger:hover:not(:disabled), .btn.perigo:hover:not(:disabled) {
    background: linear-gradient(180deg, #f43f5e, #be123c) !important;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.5);
    transform: translateY(-1px);
}

/* Rodapés de Modais com respiro e alinhamento de alta classe */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 24px 20px;
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    border-top: 1px solid var(--campo-borda);
}
.campo-secao {
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    padding: 14px 16px 16px;
    margin: 0 0 16px;
    background: color-mix(in srgb, var(--bg-surface) 40%, transparent);
}
.campo-secao > legend {
    padding: 0 8px;
    margin-left: -4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
}
/* campo com ícone à esquerda: <div class="campo-icone"><i class="fa-solid fa-magnifying-glass"></i><input class="form-input"></div> */
.campo-icone { position: relative; display: flex; align-items: center; min-width: 0; }
.campo-icone > i { position: absolute; left: 12px; font-size: 13px; color: var(--text-muted); pointer-events: none; transition: color .15s; }
.campo-icone > :is(input, select) { width: 100%; padding-left: 36px !important; }
.campo-icone:focus-within > i { color: var(--accent); }
@media (max-width: 640px) {
    .campo-grade, .campo-grade.g3 { grid-template-columns: 1fr; }
    /* iOS dá zoom em campo com fonte < 16 px */
    html body :is(input, select, textarea):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"])) { font-size: 16px; }
}