/* ==========================================================================
   O2 — CONTROLES DE INTERFACE (folha global)

   Motivo (pedido do Lucas, 19/08/2026): "botões feios e quadrados, ajuste isso
   em todos eles, inspecione toda a página". A inspeção em navegador real
   encontrou 116 controles fora do padrão, em 5 causas distintas:

     1. <select> nativo — a lista aberta é desenhada pelo sistema operacional e
        NÃO aceita CSS nenhum. Fonte do sistema, cantos retos, azul do Windows.
        Só um componente próprio resolve: quem faz isso é o o2-controles.js;
        aqui ficam os estilos dele.
     2. Botões sem `font-family` própria caíam em Arial (o padrão do navegador
        para controles de formulário NÃO herda a fonte do body).
     3. Botões sem `border-radius` ficavam com o canto reto do navegador.
     4. Caixas de marcar e opções nativas — quadradas, cinzas, do sistema.
     5. Altura irregular entre controles da mesma linha.

   REGRA DE CONVIVÊNCIA: esta folha usa seletores de ELEMENTO (baixa
   especificidade) de propósito. Qualquer classe já existente nas telas vence
   e continua valendo — isto é piso, não teto. É o que permite carregar em
   todas as telas, inclusive no gerador, sem refazer layout nenhum.

   No gerador a fonte é Montserrat (identidade dos contratos) e continua sendo:
   `font: inherit` herda do body de cada tela, em vez de impor uma família.
   ========================================================================== */

/* --- 1. fonte e forma base de todo controle ------------------------------- */
/*
  TUDO AQUI USA `:where()`, QUE TEM ESPECIFICIDADE ZERO — e a razão é uma
  regressão real (20/08/2026):

  A primeira versão desta folha escrevia `button { border-radius: 999px;
  min-height: 34px; padding: 8px 16px }` sem `:where()`. No gerador de order a
  folha é injetada no `<head>` e o `<style>` do próprio gerador já definia
  `button { border-radius: 7px; padding: 10px }`. Mesma especificidade, e a
  minha vinha depois na cascata: os botões do gerador viraram cápsulas
  enormes — exatamente o que não se quer de uma folha "de base".

  Com `:where()`, estas regras são PISO absoluto: qualquer regra de qualquer
  tela vence, não importa a ordem. A folha volta a fazer só o que deve —
  consertar o que o navegador deixa feio por padrão — e nunca redesenha o que
  a tela já decidiu.

  E `font-family: inherit`, não o atalho `font: inherit`: o atalho zeraria
  tamanho e peso que a tela definiu de propósito.
*/
:where(button, input, select, textarea){
  font-family: inherit;       /* resolve o Arial dos controles de formulário */
  font-size: inherit;
  color: inherit;
  border-radius: 10px;        /* piso: some com o canto reto do navegador */
}
:where(button){
  cursor: pointer;
  border-radius: 10px;
  transition: background .2s cubic-bezier(.22,1,.36,1),
              border-color .2s cubic-bezier(.22,1,.36,1),
              color .2s cubic-bezier(.22,1,.36,1);
}
button:disabled{ cursor: not-allowed; }

/* Botão que é só um ícone: redondo. Continua como piso — a tela manda. */
:where(button.btn-icone, button.fechar-msg, button.fechar){
  border-radius: 999px;
  padding: 6px;
  min-width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Aba não é pílula: canto de cima arredondado, para encostar no painel. */
:where(button.aba-botao){
  border-radius: 12px 12px 0 0;
}

/* --- 2. caixas de marcar e opções ---------------------------------------- */
/* Quadradas e cinzas por padrão do sistema. Aqui viram a caixa verde da O2,
   sem mudar comportamento nenhum (appearance:none preserva o clique, o
   :checked, o form e o teclado). */
input[type="checkbox"],
input[type="radio"]{
  /* Aqui a sobreposição é intencional: a caixa nativa é feia em toda tela, e
     nenhuma tela desenhava a própria. O tamanho fica em `:where` para a tela
     poder pedir outro. */
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  flex-shrink: 0;
  border: 1.5px solid #C4CBC6;
  background: #fff;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
  vertical-align: middle;
}
input[type="radio"]{ border-radius: 50%; }
:where(input[type="checkbox"], input[type="radio"]){
  width: 18px;
  height: 18px;
  min-height: 18px;
}

input[type="checkbox"]:hover:not(:disabled),
input[type="radio"]:hover:not(:disabled){ border-color: #6BF169; }

input[type="checkbox"]:checked{
  background: #0A0E0B;
  border-color: #0A0E0B;
}
/* O "visto" é desenhado, não é caractere de fonte — assim não depende de
   nenhuma família estar carregada. */
input[type="checkbox"]:checked::after{
  content: "";
  position: absolute;
  left: 5px; top: 2px;
  width: 5px; height: 9px;
  border: solid #6BF169;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="radio"]:checked{
  border-color: #0A0E0B;
  border-width: 5px;
}
input[type="checkbox"]:indeterminate{
  background: #0A0E0B;
  border-color: #0A0E0B;
}
input[type="checkbox"]:indeterminate::after{
  content: "";
  position: absolute;
  left: 3px; top: 7px;
  width: 9px; height: 2px;
  background: #6BF169;
  border: none;
  transform: none;
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled{ opacity: .45; cursor: not-allowed; }

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible{
  outline: 2px solid #6BF169;
  outline-offset: 2px;
}

/* --- 3. campos de texto (piso, ver o comentário do bloco 1) --------------- */
:where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
       input[type="number"], input[type="search"], input[type="password"],
       input[type="date"], input[type="month"], textarea){
  min-height: 36px;
}
:where(textarea){ border-radius: 12px; }

/* --- 4. SELETOR PRÓPRIO (substitui o <select> nativo) -------------------- */
/* O <select> real continua no documento, apenas invisível: `.value`, os
   eventos e o envio de formulário seguem funcionando como antes. Esconder com
   `display:none` tiraria o campo do formulário — por isso a técnica é
   tirá-lo da vista sem tirá-lo do documento. */
select.o2sel-original{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

.o2sel{
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 0;
  font: inherit;
  text-align: left;
}

.o2sel-campo{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 9px 12px;
  background: #fff;
  color: #0A0E0B;
  border: 1px solid #D9DEDB;
  border-radius: 10px;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.o2sel-campo:hover:not(:disabled){ border-color: #A9B2AC; }
.o2sel-campo:focus-visible{ outline: 2px solid #6BF169; outline-offset: 2px; }
.o2sel-campo:disabled{ background: #F3F5F4; color: #7C857F; cursor: not-allowed; }
.o2sel[data-aberto="1"] .o2sel-campo{
  border-color: #6BF169;
  box-shadow: 0 0 0 3px rgba(107,241,105,.22);
}
.o2sel-texto{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.o2sel-texto[data-vazio="1"]{ color: #8A938C; }
.o2sel-seta{
  flex-shrink: 0;
  color: #4A524C;
  transition: transform .2s cubic-bezier(.22,1,.36,1);
}
.o2sel[data-aberto="1"] .o2sel-seta{ transform: rotate(180deg); }

/* A lista mora no <body> e é posicionada em coordenadas de tela pelo
   o2-controles.js. Motivo: os cartões das telas usam `overflow:hidden`, que
   recortaria uma lista posicionada dentro deles — o primeiro teste mostrou a
   lista aparecendo como uma fatia cortada na borda do cartão. `left`, `top`,
   `min-width` e `max-height` são definidos pelo script. */
.o2sel-lista{
  position: fixed;
  z-index: 9000;              /* acima da barra global (150) e dos modais (400) */
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid #E8EBEA;
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(15,20,17,.04), 0 14px 34px rgba(15,20,17,.14);
  padding: 6px;
  animation: o2sel-entra .16s cubic-bezier(.22,1,.36,1);
}
@keyframes o2sel-entra{
  from{ opacity: 0; transform: translateY(-4px); }
  to{ opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .o2sel-lista{ animation: none; }
  .o2sel-seta{ transition: none; }
  button{ transition: none; }
}

.o2sel-op{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #0A0E0B;
  cursor: pointer;
  white-space: normal;
}
.o2sel-op + .o2sel-op{ margin-top: 2px; }
.o2sel-op[data-foco="1"]{ background: #F1F4F2; }
.o2sel-op[aria-selected="true"]{
  background: #E8FBE8;
  font-weight: 600;
}
.o2sel-op[aria-selected="true"][data-foco="1"]{ background: #D8F7D7; }
.o2sel-op[aria-disabled="true"]{ opacity: .45; cursor: not-allowed; }
/* marca de escolhido: desenhada, para não depender de fonte de ícone */
.o2sel-op .o2sel-visto{
  width: 14px; height: 14px; flex-shrink: 0;
  opacity: 0;
}
.o2sel-op[aria-selected="true"] .o2sel-visto{ opacity: 1; }
.o2sel-grupo{
  padding: 9px 11px 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #7C857F;
}
.o2sel-vazio{ padding: 12px; font-size: 13px; color: #7C857F; }

/* O campo do seletor não pode esticar o container que o abriga.

   `min-width: auto` (o padrão de item de flex/grid) faz o campo se recusar a
   encolher abaixo do conteúdo — e como o `<select>` original de algumas telas
   pede `min-width: 230px`, o conjunto empurrava a linha inteira e a página
   rolava de lado por 9px na tela de 390px. */
:where(.o2sel, .o2sel-campo){
  min-width: 0;
  max-width: 100%;
}
.campo-inline{ min-width: 0; }

/* Em telas estreitas a lista ocupa a largura toda do campo, nunca estoura. */
@media (max-width: 560px){
  .o2sel-lista{ max-width: calc(100vw - 32px); }
}