/* ═══════════════════════════════════════════════════════════════════════
   CONTROLES SEM VISUAL NATIVO — T1 (04/11)
   Regra do projeto: nada de interface nativa do navegador. Este arquivo
   veste, so com CSS, o que o navegador desenhava sozinho: caixa de marcar,
   opcao unica (radio), setinhas do numero, "x" da busca, seta do <details>
   e barra de rolagem. Visual do Aurora (docs/aurora-design, .aur-check).

   Carregado por TODAS as paginas com formulario (painel, Indicadores, login,
   definir senha, instalar, extensao). Usa os tokens de cada pagina com
   fallback em cadeia: o painel chama de --panel/--line-strong/--green, os
   Indicadores de --surface/--border2/--btn-brand.

   ESPECIFICIDADE: as regras de caixa/radio levam um :not() com seletor de
   id, o que as poe ACIMA das regras genericas de campo (.modal input
   {width:100%;padding...}), que com appearance:none passariam a desenhar uma
   caixa de texto no lugar do checkbox. Os controles que ja tem visual
   proprio (interruptores e cartoes de escolha, com o input escondido) ficam
   FORA pela lista do :not -- quem criar outro do tipo, acrescenta aqui.
   Tamanho por variavel (--chk-size) para quem precisa maior (toque).
   ═══════════════════════════════════════════════════════════════════════ */

input[type=checkbox]:not(.switch input, .mon-switch input, .qf-seg input, .mon-tipos input, .mon-como input, .tvc-sw input, #modalMonVal .mon-check input, .chk-nativo),
input[type=radio]:not(.switch input, .mon-switch input, .qf-seg input, .mon-tipos input, .mon-como input, .tvc-sw input, #modalMonVal .mon-check input, .chk-nativo){
  -webkit-appearance:none;appearance:none;box-sizing:border-box;flex:none;
  /* !important: varias regras (e style="" no HTML) forcam width:auto, que
     num checkbox sem aparencia nativa achata a caixa para zero. */
  width:var(--chk-size,18px)!important;height:var(--chk-size,18px)!important;
  min-width:var(--chk-size,18px)!important;max-width:none!important;
  padding:0;border:1.5px solid var(--line-strong,var(--border2,#D8D2C4));border-radius:5px;
  background:var(--panel,var(--surface,#fff)) center/12px 12px no-repeat;box-shadow:none;
  vertical-align:-4px;cursor:pointer;transition:background-color .15s,border-color .15s,border-width .15s;
}
input[type=radio]:not(.switch input, .mon-switch input, .qf-seg input, .mon-tipos input, .mon-como input, .tvc-sw input, #modalMonVal .mon-check input, .chk-nativo){
  border-radius:50%;
}
/* Marcado: verde da marca com o visto branco (Aurora). */
input[type=checkbox]:not(.switch input, .mon-switch input, .qf-seg input, .mon-tipos input, .mon-como input, .tvc-sw input, #modalMonVal .mon-check input, .chk-nativo):checked{
  background-color:var(--btn-brand,var(--green,#04754f));border-color:var(--btn-brand,var(--green,#04754f));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
input[type=checkbox]:not(.switch input, .mon-switch input, .qf-seg input, .mon-tipos input, .mon-como input, .tvc-sw input, #modalMonVal .mon-check input, .chk-nativo):indeterminate{
  background-color:var(--btn-brand,var(--green,#04754f));border-color:var(--btn-brand,var(--green,#04754f));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}
/* Radio marcado: anel grosso verde com o miolo branco (Aurora). */
input[type=radio]:not(.switch input, .mon-switch input, .qf-seg input, .mon-tipos input, .mon-como input, .tvc-sw input, #modalMonVal .mon-check input, .chk-nativo):checked{
  background:#fff;border-color:var(--btn-brand,var(--green,#04754f));border-width:5px;
}
input[type=checkbox]:not(.switch input, .mon-switch input, .qf-seg input, .mon-tipos input, .mon-como input, .tvc-sw input, #modalMonVal .mon-check input, .chk-nativo):hover:not(:checked):not(:disabled),
input[type=radio]:not(.switch input, .mon-switch input, .qf-seg input, .mon-tipos input, .mon-como input, .tvc-sw input, #modalMonVal .mon-check input, .chk-nativo):hover:not(:checked):not(:disabled){
  border-color:var(--ink-3,var(--text3,#8A8472));
}
input[type=checkbox]:not(.switch input, .mon-switch input, .qf-seg input, .mon-tipos input, .mon-como input, .tvc-sw input, #modalMonVal .mon-check input, .chk-nativo):focus-visible,
input[type=radio]:not(.switch input, .mon-switch input, .qf-seg input, .mon-tipos input, .mon-como input, .tvc-sw input, #modalMonVal .mon-check input, .chk-nativo):focus-visible{
  outline:2px solid var(--btn-brand,var(--green,#04754f));outline-offset:2px;
}
input[type=checkbox]:not(.switch input, .mon-switch input, .qf-seg input, .mon-tipos input, .mon-como input, .tvc-sw input, #modalMonVal .mon-check input, .chk-nativo):disabled,
input[type=radio]:not(.switch input, .mon-switch input, .qf-seg input, .mon-tipos input, .mon-como input, .tvc-sw input, #modalMonVal .mon-check input, .chk-nativo):disabled{
  opacity:.5;cursor:default;
}

/* Numero: sem as setinhas do navegador (setas do teclado continuam). */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}

/* Busca: sem o "x" e a lupa do navegador (Esc continua limpando). */
input[type=search]{-webkit-appearance:none;appearance:none}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none;display:none}

/* <details>: sem o triangulo do navegador; seta "›" do padrao, que gira ao
   abrir. Quem ja desenha a propria seta (::before/::after) continua vencendo:
   estas regras tem especificidade zero (:where). */
:where(summary){list-style:none}
:where(summary)::-webkit-details-marker{display:none}
:where(summary)::before{content:"›";display:inline-block;width:10px;margin-right:6px;font-weight:700;
  color:var(--ink-3,var(--text3,#8A8472));transition:transform .15s}
:where(details[open]) > :where(summary)::before{transform:rotate(90deg)}

/* Barra de rolagem fina e discreta em todas as telas (simp-ui 2.48.2). Quem
   ja define a propria (menu, abas que rolam de lado) vence: especificidade 0. */
:where(*){scrollbar-width:thin;scrollbar-color:var(--line-strong,var(--border2,#D8D2C4)) transparent}

@media (prefers-reduced-motion:reduce){
  :where(summary)::before{transition:none}
}

/* ═══ Lista de escolha (T2, 04/11, /seletor.js) ═══════════════════════════
   O <select> vira so o GATILHO: sem a aparencia nativa, com a seta do Aurora.
   Tamanho, largura e cores continuam vindo das regras de cada tela (por
   isso nada de mexer em width/height aqui). O :not(#_) sobe a especificidade
   acima das regras de tela que usam o atalho background: e padding com
   !important. Escape: classe .sel-nativo. */
:where(select){font:inherit;color:var(--ink,var(--text,#1A1814));background-color:var(--panel,var(--surface,#fff));
  border:1px solid var(--line,var(--border,#E7E3DA));border-radius:var(--r-sm,8px);padding:6px 10px}
select:not(.sel-nativo):not([multiple]):not([size]):not(#_){
  -webkit-appearance:none;appearance:none;cursor:pointer;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 9px center!important;background-size:14px 14px!important;
  padding-right:30px!important;
}
select:not(.sel-nativo):not([multiple]):not([size]):not(#_):disabled{cursor:default;opacity:.6}
select.sel-aberto:not(#_){border-color:var(--btn-brand,var(--green,#04754f))!important;
  box-shadow:0 0 0 3px var(--green-soft,color-mix(in srgb,var(--btn-brand,#04754f) 15%,transparent))!important;outline:none}

/* Menu: .aur-picker-menu do Aurora. Fixo no <body> (escapa de qualquer
   overflow/modal), acima de modais e dialogos; abaixo da dica (7000). */
.sel-menu{position:fixed;z-index:6800;max-width:420px;background:var(--panel,var(--surface,#fff));
  border:1px solid var(--line,var(--border,#E7E3DA));border-radius:12px;overflow:hidden;
  box-shadow:0 16px 40px -12px rgba(20,18,12,.18),0 4px 12px -4px rgba(20,18,12,.08);
  font-family:var(--sans,var(--font,"Plus Jakarta Sans",system-ui,sans-serif));color:var(--ink,var(--text,#1A1814));
  animation:sel-in .14s ease-out}
@keyframes sel-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sel-lista{max-height:340px;overflow-y:auto;padding:6px;outline:none}
.sel-item{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:8px;cursor:pointer;
  font-size:13.5px;font-weight:600;line-height:1.25;transition:background .12s}
.sel-item + .sel-item{margin-top:1px}
.sel-item[hidden],.sel-grupo[hidden],.sel-vazio[hidden]{display:none}
.sel-item .sel-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-item.foco{background:var(--panel-2,var(--surface2,#F1EFEA))}
.sel-item.ativo-sel{background:var(--green-soft,#ECFDF5);color:var(--green-deep,#045c3e)}
.sel-item .sel-check{color:var(--btn-brand,var(--green,#04754f));flex-shrink:0}
.sel-item.ativo-sel.foco{box-shadow:inset 0 0 0 999px color-mix(in srgb,var(--ink,#1A1814) 5%,transparent)}
.sel-item.desab{opacity:.45;cursor:default}
:root[data-theme="dark"] .sel-item.ativo-sel{background:color-mix(in oklab,var(--green,#007A3D) 24%,var(--panel,#1A1814));color:var(--ink,#F2EEE2)}
:root[data-theme="dark"] .sel-item .sel-check{color:var(--on,#34d399)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sel-item.ativo-sel{background:color-mix(in oklab,var(--green,#007A3D) 24%,var(--panel,#1A1814));color:var(--ink,#F2EEE2)}
  :root:not([data-theme="light"]) .sel-item .sel-check{color:var(--on,#34d399)}
}
body.light .sel-item.ativo-sel{background:var(--green-soft,#ECFDF5);color:var(--green-deep,#045c3e)}
.sel-grupo{padding:10px 11px 4px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3,var(--text3,#8A8472))}
.sel-busca{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line-2,var(--border-soft,#EFEBE2));
  color:var(--ink-3,var(--text3,#8A8472))}
.sel-busca input{flex:1;min-width:0;border:0!important;outline:0;background:transparent!important;box-shadow:none!important;
  font:inherit;font-size:13px;color:var(--ink,var(--text,#1A1814));padding:4px 0!important;width:auto}
.sel-busca input::placeholder{color:var(--ink-4,#B5AF9F)}
.sel-vazio{padding:16px 14px;font-size:12px;color:var(--ink-3,var(--text3,#8A8472));text-align:center}

/* Celular: folha que sobe de baixo, linhas de 44px (alvo de toque). */
.sel-scrim{position:fixed;inset:0;z-index:6790;background:rgba(26,24,20,.45);animation:sel-fade .2s ease}
@keyframes sel-fade{from{opacity:0}}
.sel-menu.sel-folha{left:0!important;right:0;bottom:0;top:auto!important;max-width:none;min-width:0!important;
  border-radius:18px 18px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px);
  max-height:75vh;display:flex;flex-direction:column;animation:sel-sobe .22s cubic-bezier(.16,1,.3,1)}
@keyframes sel-sobe{from{transform:translateY(100%)}to{transform:none}}
.sel-folha .sel-lista{max-height:none;flex:1;min-height:0}
.sel-folha .sel-item{min-height:44px;font-size:14px}
.sel-folha-tit{padding:16px 18px 6px;font-size:13px;font-weight:700;color:var(--ink-2,var(--text2,#4A4538))}
.sel-folha .sel-busca input{font-size:16px} /* abaixo de 16px o iPhone da zoom na tela */
@media (prefers-reduced-motion:reduce){.sel-menu,.sel-scrim{animation:none}}