/* ==========================================================================
   BASE — reset, tipografia e elementos de formulario nus.
   Aqui so entram seletores de ELEMENTO (body, h1, input...).
   Qualquer coisa com classe vai para layout.css ou components.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Titulos ------------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.011em; color: var(--text); }
h1 { font-size: var(--fs-18); }
h2 { font-size: var(--fs-16); }
h3 { font-size: var(--fs-14); }
h4 { font-size: var(--fs-13); }

p { margin: 0; color: var(--text-2); }

/* --- Links: neutros por padrao. Cor de status nunca vira cor de link. ----- */
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--text); }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-5) 0; }

code, kbd { font-family: var(--font-mono); font-size: 0.9em; }

/* --- Formularios --------------------------------------------------------- */
input, select, textarea, button {
  font-family: inherit;
  font-size: var(--fs-13);
  color: inherit;
}

/* A ALTURA DO CAMPO E DECLARADA, E NAO DEDUZIDA DO PADDING.
   Era 8px em cima, 8px embaixo, e o resto vinha da caixa de linha da fonte —
   ou seja, a altura de todo campo do sistema dependia de qual fonte carregou
   e de como o navegador arredonda a entrelinha. Botao e chip, esses, sempre
   declararam altura em pixel. O resultado e que campo e botao lado a lado
   caiam quase iguais, com uma sobra de fracao que muda por navegador — e
   "quase igual" e exatamente o que se ve como torto sem saber explicar.

   Agora os dois saem do mesmo degrau (--ctl, em tokens.css) e o padding
   vertical sai de cena: com altura fixa ele so espremeria o texto. */
input, select, textarea {
  width: 100%;
  height: var(--ctl);
  padding: 0 11px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text);
  transition: border-color var(--t-fast), background var(--t-fast);
}

input::placeholder, textarea::placeholder { color: var(--text-4); }

/* CAMPO DE DATA VAZIO.
   O "mm/dd/yyyy" nao e valor: e o mesmo papel que o placeholder faz num campo
   de texto — dizer o formato esperado. Mas o navegador desenha ele com a cor
   normal do texto, e no tema escuro isso e branco: o campo em branco gritava
   mais alto que os campos preenchidos ao lado.

   :invalid e o que separa vazio de preenchido sem uma linha de JavaScript —
   um campo de data obrigatorio e invalido exatamente enquanto esta vazio. Por
   isso vale para o move-in (required) e nao mexe na data ja escolhida.

   As barras do separador ficam apagadas SEMPRE: elas sao pontuacao, e nao
   numero, mesmo com a data preenchida. */
input[type="date"]:invalid::-webkit-datetime-edit { color: var(--text-4); }
input[type="date"]:invalid { color: var(--text-4); }
input[type="date"]::-webkit-datetime-edit-text { color: var(--text-4); }
/* O botao do calendario tambem nasce escuro no Chrome: sem isto ele fica
   quase invisivel sobre o campo escuro. */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.55);
  cursor: pointer;
}
:root[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator { filter: none; opacity: 0.55; }

input:hover, select:hover, textarea:hover { border-color: var(--text-4); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--border-strong);
  background: var(--surface-3);
}

input:disabled, select:disabled, textarea:disabled {
  color: var(--text-4);
  cursor: not-allowed;
}

select {
  /* o prefixo -webkit e obrigatorio: sem ele o Safari mantem o controle
     nativo, que tem recuo interno proprio, e a primeira letra some atras
     da borda. text-indent zerado pelo mesmo motivo. */
  appearance: none;
  -webkit-appearance: none;
  text-indent: 0;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23767676' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;

  /* Em coluna estreita (o multiplicador dentro da linha de taxa) o texto
     encostava na seta. Reticencias em vez de passar por baixo dela. */
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A LISTA aberta do select e desenhada pelo sistema, nao pelo CSS da pagina:
   sem estas duas linhas ela herda o branco do sistema no Windows e no Linux,
   e no tema escuro sai texto claro sobre fundo claro. */
select option {
  background: var(--surface-2);
  color: var(--text);
}

/* A caixa de texto e a excecao: ela nao e um controle de uma linha, ela
   cresce. Volta a ter altura automatica e o respiro vertical de sempre. */
textarea { height: auto; min-height: 84px; padding: 8px 11px; resize: vertical; }

/* --- Campo numerico: sem as setinhas do navegador ------------------------
   Elas so aparecem no hover, mudam de largura entre navegadores e brigam
   com o alinhamento a direita dos valores. */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Caixa de marcar e radio, desenhados por nos -------------------------
   O controle nativo nao aceita cor de borda nem raio; com appearance:none
   viram uma caixinha do sistema. O check e um SVG de fundo, verde, porque
   marcado e um ESTADO — a mesma regra dos badges. */
input[type="checkbox"], input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  padding: 0;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
input[type="radio"] { border-radius: var(--r-full); }

input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--text-4); }

/* Marcado NAO muda a caixa: ela continua igual a qualquer outro campo.
   O unico verde e o do check — o estado se le pelo icone, nao por um
   retangulo colorido no meio do formulario. */
input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='m2.4 6.3 2.4 2.4 4.8-5.4' stroke='%234ade80' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}

input[type="radio"]:checked {
  border-color: var(--text-3);
  background-image: radial-gradient(circle, var(--text) 0 3px, transparent 3px);
}

input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: 0.4; cursor: not-allowed; }

button { cursor: pointer; background: none; border: none; padding: 0; }

/* --- Foco visivel por teclado (nunca remover) ---------------------------- */
:focus-visible {
  outline: 2px solid var(--text-3);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* --- Tabela nua ---------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; }

/* --- Scrollbar ----------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); background-clip: content-box; }

/* ==========================================================================
   CAMPO COM GABARITO — o molde do telefone, sempre visivel.

   Mora no base.css porque e o unico arquivo que a landing (tokens + base +
   site) e o sistema por dentro (tokens + base + layout + components) carregam
   os dois. Duplicar em dois arquivos era garantir que um dia eles divergissem.

   Duas camadas: o <input> de verdade embaixo, com o texto claro; o gabarito
   por cima, com a parte ja digitada em transparente (ela ocupa o espaco e
   deixa o texto real aparecer) e o resto em cinza. O JS (assets/js/fone.js)
   monta a estrutura e copia a metrica do proprio campo.
   ========================================================================== */
.campo-fone { position: relative; display: block; }

.fone-molde {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  border: 0 solid transparent;   /* a largura vem do campo, via JS */
  white-space: pre;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
  pointer-events: none;          /* o clique tem que chegar no input de baixo */
  user-select: none;
}
/* O que ja foi digitado: invisivel, mas ocupando exatamente o mesmo espaco —
   e por baixo dele que o texto real do campo aparece. */
.fone-molde i { color: transparent; font-style: normal; }