/* ═══════════════════════════════════════════════════════════════
   RevendasDB — controles de formulário e botões
   Visual único para caixas de texto, seletores, áreas de texto,
   caixas de marcar, opções, interruptores, datas e botões.
   Tudo em :where() (especificidade zero): estilos próprios de cada
   página continuam valendo; o que não tiver estilo fica bonito.
   Incluir depois de base.css:  <link rel="stylesheet" href="/css/controles.css">
   ═══════════════════════════════════════════════════════════════ */

:root {
  --campo-bg: #ffffff;
  --campo-bg-hover: #f8fafc;
  --campo-borda: #d5dde7;
  --campo-borda-hover: #a9b8c9;
  --campo-texto: #0f172a;
  --campo-placeholder: #94a3b8;
  --campo-foco: var(--marca-primaria, #0284c7);
  --campo-anel: rgba(2,132,199,.18);
  --campo-erro: #dc2626;
  --campo-anel-erro: rgba(220,38,38,.16);
  --campo-raio: 12px;
  --campo-altura: 44px;
  --seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme="dark"] {
  --campo-bg: #0f2236;
  --campo-bg-hover: #13283f;
  --campo-borda: #27415c;
  --campo-borda-hover: #3b5a7a;
  --campo-texto: #e2e8f0;
  --campo-placeholder: #64748b;
  --campo-foco: #38bdf8;
  --campo-anel: rgba(56,189,248,.22);
  --seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* ── Caixas de texto, seletores e áreas de texto ── */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"]), select, textarea) {
  font: 500 15px/1.3 var(--fonte);
  color: var(--campo-texto);
  background-color: var(--campo-bg);
  border: 1.5px solid var(--campo-borda);
  border-radius: var(--campo-raio);
  min-height: var(--campo-altura);
  padding: 10px 14px;
  box-sizing: border-box;
  max-width: 100%;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
  -webkit-appearance: none; appearance: none;
}
:where(textarea) { min-height: 96px; line-height: 1.5; resize: vertical; }
:where(input, select, textarea):hover:not(:disabled):not(:focus) {
  border-color: var(--campo-borda-hover); background-color: var(--campo-bg-hover);
}
:where(input, select, textarea):focus { outline: none; }
:where(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea):focus-visible,
:where(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea):focus {
  border-color: var(--campo-foco);
  box-shadow: 0 0 0 4px var(--campo-anel);
  background-color: var(--campo-bg);
}
:where(input, textarea)::placeholder { color: var(--campo-placeholder); opacity: 1; }
:where(input, select, textarea):disabled { opacity: .55; cursor: not-allowed; }
/* Erro só depois que a pessoa mexeu no campo */
:where(input, select, textarea):user-invalid,
:where(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--campo-erro); box-shadow: 0 0 0 4px var(--campo-anel-erro);
}
/* Seletor com seta própria */
:where(select:not([multiple])) {
  background-image: var(--seta-select);
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
  padding-right: 38px; cursor: pointer; text-overflow: ellipsis;
}
/* Busca: sem o "x" e a lupa nativos desalinhados */
:where(input[type="search"])::-webkit-search-decoration { -webkit-appearance: none; }
/* Datas e números */
:where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"]) { min-width: 0; }
:where(input[type="date"], input[type="time"], input[type="datetime-local"])::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .65; border-radius: 6px; padding: 2px;
}
:where(input[type="date"], input[type="time"])::-webkit-calendar-picker-indicator:hover { opacity: 1; background: var(--campo-anel); }
:where(input[type="number"]) { font-variant-numeric: tabular-nums; }

/* Celular: 16 px evita o zoom automático do iPhone */
@media (max-width: 900px) {
  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea) { font-size: 16px; min-height: 46px; }
}

/* ── Caixas de marcar e opções ── */
:where(input[type="checkbox"], input[type="radio"]) {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin: 0; flex-shrink: 0; cursor: pointer;
  border: 1.8px solid var(--campo-borda-hover); background: var(--campo-bg);
  display: inline-grid; place-content: center; vertical-align: middle;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .1s;
}
:where(input[type="checkbox"]) { border-radius: 6px; }
:where(input[type="radio"]) { border-radius: 50%; }
:where(input[type="checkbox"])::before {
  content: ''; width: 11px; height: 11px; transform: scale(0); transition: transform .12s;
  background: #fff;
  clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%);
}
:where(input[type="radio"])::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .12s;
}
:where(input[type="checkbox"], input[type="radio"]):checked { background: var(--campo-foco); border-color: var(--campo-foco); }
:where(input[type="checkbox"], input[type="radio"]):checked::before { transform: scale(1); }
:where(input[type="checkbox"], input[type="radio"]):hover:not(:disabled) { border-color: var(--campo-foco); }
:where(input[type="checkbox"], input[type="radio"]):focus-visible { box-shadow: 0 0 0 4px var(--campo-anel); }
:where(input[type="checkbox"], input[type="radio"]):active:not(:disabled) { transform: scale(.92); }
:where(input[type="checkbox"], input[type="radio"]):disabled { opacity: .5; cursor: not-allowed; }
:where(label:has(> input[type="checkbox"], > input[type="radio"])) { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }

/* Interruptor (liga/desliga): <input type="checkbox" class="interruptor"> */
:where(input[type="checkbox"].interruptor) {
  width: 44px; height: 26px; border-radius: 999px; border: 0; background: #cbd5e1; position: relative;
}
:where(input[type="checkbox"].interruptor)::before {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; clip-path: none; transform: none; box-shadow: 0 1px 3px rgba(15,23,42,.3);
  transition: left .18s cubic-bezier(.2,.8,.2,1);
}
:where(input[type="checkbox"].interruptor):checked { background: var(--marca-sucesso, #059669); }
:where(input[type="checkbox"].interruptor):checked::before { left: 21px; }
[data-theme="dark"] :where(input[type="checkbox"].interruptor:not(:checked)) { background: #334155; }

/* Controle deslizante */
:where(input[type="range"]) { accent-color: var(--campo-foco); cursor: pointer; }

/* Enviar arquivo */
:where(input[type="file"]) { font: 500 14px var(--fonte); color: var(--texto-suave); max-width: 100%; }
:where(input[type="file"])::file-selector-button {
  font: 700 13px var(--fonte); color: #fff; background: var(--grad-marca, #0284c7);
  border: 0; border-radius: 10px; padding: 9px 14px; margin-right: 10px; cursor: pointer;
}

/* ── Botões: comportamento comum (cores e formatos ficam em cada página) ── */
:where(button, [role="button"], .btn, .bt, a.btn) {
  cursor: pointer; font-family: var(--fonte); -webkit-tap-highlight-color: transparent;
  transition: transform .1s ease, box-shadow .15s ease, filter .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s;
}
:where(button, [role="button"], .btn, .bt, a.btn):active:not(:disabled) { transform: translateY(1px) scale(.985); }
:where(button, [role="button"], .btn, .bt, a.btn):focus-visible {
  outline: 2px solid var(--campo-foco); outline-offset: 2px; box-shadow: 0 0 0 5px var(--campo-anel);
}
:where(button, .btn, .bt):disabled, :where(button, .btn, .bt)[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; filter: grayscale(.25); transform: none;
}
@media (hover: hover) {
  :where(button, .btn, .bt, a.btn):hover:not(:disabled) { filter: brightness(1.05); }
}

/* ── Componentes opcionais (classes novas, para quem quiser usar) ── */
/* Botões padrão */
.rdb-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1.5px solid transparent;
  font: 700 14px/1 var(--fonte); text-decoration: none; white-space: nowrap;
  color: #fff; background: var(--grad-marca); box-shadow: 0 2px 8px rgba(2,132,199,.25);
}
.rdb-botao--secundario { color: var(--campo-texto); background: var(--campo-bg); border-color: var(--campo-borda); box-shadow: none; }
.rdb-botao--perigo { background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 2px 8px rgba(220,38,38,.25); }
.rdb-botao--sucesso { background: var(--grad-verde); box-shadow: 0 2px 8px rgba(5,150,105,.25); }
.rdb-botao--whatsapp { background: var(--grad-whatsapp); box-shadow: 0 2px 8px rgba(37,211,102,.3); }
.rdb-botao--fantasma { color: var(--campo-foco); background: transparent; box-shadow: none; }
.rdb-botao--pequeno { min-height: 34px; padding: 0 12px; font-size: 12.5px; border-radius: 10px; }
.rdb-botao svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Campo com ícone: <label class="rdb-campo-icone"><svg…/><input …></label> */
.rdb-campo-icone { position: relative; display: block; }
.rdb-campo-icone > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--campo-placeholder); pointer-events: none; }
.rdb-campo-icone > input { padding-left: 40px; width: 100%; }

/* Rótulo + ajuda de campo */
.rdb-rotulo { display: block; font: 700 11.5px/1.2 var(--fonte); letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); margin: 0 0 6px; }
.rdb-ajuda { display: block; font: 500 12px/1.4 var(--fonte); color: var(--texto-suave); margin-top: 5px; }

/* Grupo segmentado (opções lado a lado) */
.rdb-segmentos { display: inline-flex; padding: 4px; gap: 4px; border-radius: 14px; background: var(--campo-bg-hover); border: 1px solid var(--campo-borda); flex-wrap: wrap; }
.rdb-segmentos > button { min-height: 36px; padding: 0 14px; border-radius: 10px; border: 0; background: transparent; font: 600 13px var(--fonte); color: var(--texto-suave); }
.rdb-segmentos > button[aria-pressed="true"], .rdb-segmentos > button.ativo { background: var(--campo-bg); color: var(--campo-foco); box-shadow: 0 1px 4px rgba(15,23,42,.12); }
[data-theme="dark"] .rdb-segmentos { background: #0a1628; }
[data-theme="dark"] .rdb-segmentos > button[aria-pressed="true"], [data-theme="dark"] .rdb-segmentos > button.ativo { background: #1e3a5f; color: #e0f2fe; }

@media (prefers-reduced-motion: reduce) {
  :where(input, button, .btn, .bt)::before, :where(input, button, .btn, .bt) { transition: none !important; }
}

/* ═══════════════════════ Animações ═══════════════════════
   Tudo leve (só opacity/transform/sombra) e desligado para quem
   pede menos movimento no aparelho. */
@media (prefers-reduced-motion: no-preference) {
  /* Campos: sobem um pouquinho e o anel de foco "pulsa" ao entrar */
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
    transition: border-color .2s, box-shadow .25s, background-color .2s, transform .2s cubic-bezier(.2,.8,.2,1);
  }
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea):focus {
    transform: translateY(-1px);
    animation: rdbAnelFoco .55s ease-out;
  }
  /* Rótulo acompanha o campo focado */
  :where(div, label, .fc, .fcampo):focus-within > :where(.lbl, .fc-lbl, .rdb-rotulo, .fl) { color: var(--campo-foco); transition: color .2s; }

  /* Caixa de marcar: "pulo" ao marcar */
  :where(input[type="checkbox"]:not(.interruptor), input[type="radio"]):checked { animation: rdbPop .28s cubic-bezier(.3,1.6,.5,1); }
  :where(input[type="checkbox"].interruptor)::before { transition: left .25s cubic-bezier(.3,1.4,.5,1), width .2s; }
  :where(input[type="checkbox"].interruptor):active::before { width: 24px; }

  /* Botões: sobem no hover, afundam no toque, brilho que atravessa */
  :where(button, .btn, .bt, .rdb-botao, a.btn) { transition: transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .2s, filter .2s, background-color .2s, border-color .2s, color .2s; }
  @media (hover: hover) {
    :where(.btn, .bt, .rdb-botao):not(:disabled):hover { transform: translateY(-1px); }
  }
  :where(.btn, .bt, .rdb-botao, .chip, .opc):not(:disabled):active { transform: translateY(0) scale(.97); }
  :where(.btn-go, .btn-primary, .btn-green, .btn-wa, .bt-pri, .bt-primario, .rdb-botao:not([class*="--"])) { position: relative; overflow: hidden; isolation: isolate; }
  :where(.btn-go, .btn-primary, .btn-green, .btn-wa, .bt-pri, .bt-primario, .rdb-botao:not([class*="--"]))::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
    transform: translateX(-120%);
  }
  @media (hover: hover) {
    :where(.btn-go, .btn-primary, .btn-green, .btn-wa, .bt-pri, .bt-primario, .rdb-botao:not([class*="--"])):hover::after { transform: translateX(120%); transition: transform .7s ease; }
  }

  /* Onda do toque (criada por /js/animacoes.js) */
  .rdb-onda { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .22;
    transform: scale(0); animation: rdbOnda .55s ease-out forwards; }

  /* Entrada dos cartões e linhas ao abrir a tela */
  .rdb-entra { animation: rdbSobe .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--atraso, 0ms); }

  /* Chip/opção selecionada dá um leve pulo */
  :where(.chip, .opc, .pt-f, .seg button, .rdb-segmentos > button):is(.on, .ativo, .sel, [aria-pressed="true"]) { animation: rdbPop .3s cubic-bezier(.3,1.6,.5,1); }

}
@keyframes rdbAnelFoco { 0% { box-shadow: 0 0 0 0 var(--campo-anel); } 60% { box-shadow: 0 0 0 7px var(--campo-anel); } 100% { box-shadow: 0 0 0 4px var(--campo-anel); } }
@keyframes rdbPop { 0% { transform: scale(.85); } 100% { transform: scale(1); } }
@keyframes rdbOnda { to { transform: scale(2.6); opacity: 0; } }
@keyframes rdbSobe { from { opacity: 0; transform: translateY(12px); } }
@keyframes rdbFlutua { from { transform: translate(0,0) scale(1); } to { transform: translate(-40px,30px) scale(1.15); } }