/* =====================================================
   TOKENS / VARIÁVEIS (ajusta à tua paleta)
===================================================== */
:root{
  /* Aliases ligados ao tema (tokens em main.css) */
  --bg: var(--surface);
  --bg-soft: var(--surface-soft);

  --ink: var(--ink-900);
  --ink-2: var(--ink-600);
  --ink-3: var(--ink-500);

  --brand: var(--primary-500);
  --brand-ink: #fff;

  --ok: #17c964;
  --warn: #f5a524;
  --danger: #f31260;

  --line: var(--border-soft);

  /* compat */
  --shadow: var(--shadow-md);

  --ring: 0 0 0 4px color-mix(in srgb, #006FEE 35%, transparent);

  /* helper usado noutros componentes */
  --ink-100: var(--surface-soft);
}


/* Base: evita overflow e garante sizing consistente */
*, *::before, *::after { box-sizing: border-box; }


/* =====================================================
   LAYOUT DE FORMULÁRIOS
===================================================== */
/*
Exemplo:
<div class="form">
  <div class="field">
    <label class="field__label">Nome</label>
    <input class="input" placeholder="..." />
    <small class="field__help">Ajuda...</small>
  </div>
</div>
*/
.form{ display: grid; gap: 14px; }
.field{ display:grid; gap:8px; }
.field__label{
  font-size: .95rem;
  color: var(--ink-900);
  font-weight: 600;
}
.field__help{ font-size: .85rem; color: var(--ink-3); }
.field--error .field__help{ color: var(--danger); }



/* =====================================================
   INPUTS / TEXTAREAS / SELECTS
===================================================== */
.input, .textarea, .select{
  width: 100%;
    max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius, 16px);
  padding: 14px 14px;
  color: var(--ink-900);
  font-size: 1rem;
  box-shadow: var(--shadow-sm, var(--shadow));
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s;
}

.input::placeholder, .textarea::placeholder{ color: var(--ink-400, #94a3b8); }

/* Foco */
.input:focus, .textarea:focus, .select:focus{
  border-color: var(--brand);
  box-shadow: var(--shadow), var(--ring);
}


/* Desativado */
.input:disabled, .textarea:disabled, .select:disabled{
  background: color-mix(in srgb, var(--bg-soft, var(--bg)) 75%, transparent);
  color: var(--ink-500, #94a3b8);
  pointer-events: none;
}

/* Textarea */
.textarea{ min-height: 110px; resize: vertical; }

/* Select */
.select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-400, #64748b) 50%),
    linear-gradient(135deg, var(--ink-400, #64748b) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%,
    100% 0;
  background-size: 6px 6px, 6px 6px, 2.5em 2.5em;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* Tamanhos */
.input--sm, .select--sm, .textarea--sm{ padding: 10px 12px; font-size: .95rem; }
.input--lg, .select--lg, .textarea--lg{ padding: 16px 16px; font-size: 1.05rem; }

/* =====================================================
   RADIO
===================================================== */
.radio {
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ink-400, #94a3b8) 55%, transparent);
  background: var(--bg);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink-900, #0f172a) 12%, transparent);
  position: relative;
  transition: all .25s ease;
}

.radio:checked {
  border-color: var(--primary-600, #006FEE);
  background: radial-gradient(circle at center,
    var(--primary-600, #006FEE) 45%, var(--bg) 46%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-600,#006FEE) 25%, transparent);
}

.radio:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-600,#006FEE) 30%, transparent);
}

.radio:disabled { opacity: .5; }

/* =====================================================
   CHECKBOX
===================================================== */
.checkbox {
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 2px solid color-mix(in srgb, var(--ink-400, #94a3b8) 55%, transparent);
  background: var(--bg);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink-900, #0f172a) 12%, transparent);
  position: relative;
  transition: all .25s ease;
}

.checkbox:checked {
  background: var(--primary-600, #006FEE);
  border-color: var(--primary-600, #006FEE);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-600,#006FEE) 25%, transparent);
}

.checkbox:checked::after {
  content: "";
  position: absolute;
  top: 5px; left: 8px;
  width: 6px; height: 12px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(45deg);
}

.checkbox:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-600,#006FEE) 30%, transparent);
}

.checkbox:disabled { opacity: .5; }

/* =====================================================
   BOTÕES
===================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration:none;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.btn:active{ transform: translateY(1px); }

.btn--sm{ padding: 8px 12px; font-size:.95rem; border-radius:10px; }
.btn--lg{ padding: 14px 18px; font-size:1.05rem; border-radius:14px; }

.btn--primary{ background: var(--brand); color: var(--brand-ink); }
.btn--secondary{ background: var(--bg); color: var(--ink-900); border-color: var(--line); }
.btn--danger{ background: var(--danger); color:#fff; }

.btn:focus{ outline:none; box-shadow: var(--ring); }
.btn:disabled{ opacity:.6; pointer-events:none; }

.btn--ghost{ background: transparent; box-shadow:none; color: var(--brand); }
.btn--outline{ background:transparent; border-color: var(--brand); color: var(--brand); }
.btn svg{ width: 18px; height: 18px; }

/* =====================================================
   ESTADOS
===================================================== */
.is-valid.input,
.is-valid.textarea,
.is-valid.select,
.field--valid .input,
.field--valid .textarea,
.field--valid .select{
  border-color: var(--ok);
  box-shadow: var(--shadow), 0 0 0 4px rgba(23,201,100,.15);
}
.field--valid .field__help{ color: var(--ok); }

.is-invalid.input,
.is-invalid.textarea,
.is-invalid.select,
.field--error .input,
.field--error .textarea,
.field--error .select{
  border-color: var(--danger);
  box-shadow: var(--shadow), 0 0 0 4px rgba(243,18,96,.15);
}
.field--error .field__help{ color: var(--danger); }

/* pendente */
.is-pending.input,
.is-pending.textarea,
.is-pending.select{
  border-color: var(--brand);
  box-shadow: var(--shadow), 0 0 0 4px rgba(0,111,238,.12);
  background-image: linear-gradient(90deg, rgba(0,111,238,.06), transparent 40%);
  background-size: 200% 100%;
  animation: pendingSheen 1.2s linear infinite;
}
@keyframes pendingSheen {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}


/* =====================================================
   SPINNER
===================================================== */
.spinner{
  width: 22px; height: 22px;
  border: 3px solid rgba(15,23,42,.12);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.spinner--inline{
  width: 16px; height: 16px;
  vertical-align: -3px; display: inline-block; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* =====================================================
   BOTÕES — loading
===================================================== */
.btn.is-loading{
  position: relative;
  pointer-events: none;
  opacity: .9;
}
.btn.is-loading::before{
  content: "";
  width: 18px; height: 18px;
  border: 3px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  position: absolute; left: 12px;
  top: 50%; transform: translateY(-50%);
}
.btn--secondary.is-loading::before{
  border-color: rgba(0,111,238,.3);
  border-top-color: var(--brand);
}
.btn--outline.is-loading::before{
  border-color: rgba(0,111,238,.35);
  border-top-color: var(--brand);
}
.btn.is-loading{ padding-left: 36px; }
.btn.is-loading:disabled{ cursor: default; }

.btn--block{ width: 100%; display: inline-flex; }


/* =====================================================
   GRUPOS DE AÇÕES
===================================================== */
.actions{
  display: grid;
  grid-auto-flow: column;
  gap: 10px;
}


/* ===== Toggle Switch ===== */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.switch .track {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-400,#94a3b8) 35%, transparent);
  border: 1px solid var(--border-soft,#e5e7eb);
  transition: background .2s ease, border-color .2s ease;
  flex: 0 0 auto;
}

.switch .thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface,#fff);
  box-shadow: var(--shadow-sm,0 1px 2px rgba(0,0,0,.08));
  transition: transform .25s ease;
  will-change: transform;
}

.switch input:checked + .track {
  background: var(--primary-600,#006FEE);
  border-color: var(--primary-600,#006FEE);
}
.switch input:checked + .track .thumb {
  transform: translateX(18px);
}

.switch input:focus-visible + .track {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--primary-500,#006FEE) 35%, transparent);
}

.switch input:disabled + .track { opacity: .6; cursor: not-allowed; }
.switch input:disabled ~ span    { cursor: not-allowed; }

.switch--sm .track { width: 36px; height: 22px; }
.switch--sm .thumb { width: 16px; height: 16px; top: 3px; left: 3px; }
.switch--sm input:checked + .track .thumb { transform: translateX(14px); }

.switch--lg .track { width: 56px; height: 32px; }
.switch--lg .thumb { width: 26px; height: 26px; top: 3px; left: 3px; }
.switch--lg input:checked + .track .thumb { transform: translateX(24px); }

[data-theme="dark"] .switch .track {
  background: color-mix(in srgb, var(--ink-400,#94a3b8) 25%, transparent);
  border-color: color-mix(in srgb, var(--ink-400,#94a3b8) 30%, transparent);
}
[data-theme="dark"] .switch .thumb { background: var(--surface,#0b1220); }



/* =====================================================
   COMPAT BRIDGE — markup sem classes
===================================================== */
.field > label:not(.field__label){
  font-size: .95rem; color: var(--ink-900); font-weight: 600;
}

.field > input[type="text"]:not(.input),
.field > input[type="password"]:not(.input),
.field > input[type="email"]:not(.input),
.field > input[type="tel"]:not(.input),
.field > input[type="number"]:not(.input),
.field > select:not(.select),
.field > textarea:not(.textarea){
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius, 16px);
  padding: 14px 14px;
  color: var(--ink-900);
  font-size: 1rem;
  box-shadow: var(--shadow);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s;
}

.field > input[type="text"]:not(.input)::placeholder,
.field > input[type="password"]:not(.input)::placeholder,
.field > input[type="email"]:not(.input)::placeholder,
.field > input[type="tel"]:not(.input)::placeholder,
.field > input[type="number"]:not(.input)::placeholder,
.field > textarea:not(.textarea)::placeholder{
  color: #94a3b8;
}

.field > input[type="text"]:not(.input):focus,
.field > input[type="password"]:not(.input):focus,
.field > input[type="email"]:not(.input):focus,
.field > input[type="tel"]:not(.input):focus,
.field > input[type="number"]:not(.input):focus,
.field > select:not(.select):focus,
.field > textarea:not(.textarea):focus{
  border-color: var(--brand);
  box-shadow: var(--shadow), var(--ring);
}

/* utilitários */
.form-grid{ display:grid; gap:10px; }
.controls-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.radio-row,.check-row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.hr{ height:1px; background: var(--line); margin:12px 0; }

.input-with-icon{ position: relative; }
.input-with-icon svg{
  position: absolute;
  left: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--ink-400);
  pointer-events: none;
}
.input-with-icon input{ padding-left: 40px; }