/* ============================================================
   FABIANA RODRIGUES — Engenheira Civil · Vistorias e Inspeções
   Identidade extraída do relatório técnico oficial:
   marinho #1B2042 · marrom #703D1F · preto · branco · Inter
   ============================================================ */
:root {
  --marinho: #1B2042;
  --marinho-claro: #2C3568;
  --marrom: #703D1F;
  --marrom-suave: #F3EBE4;
  --preto: #000000;
  --branco: #FFFFFF;
  --fundo: #F7F6F3;
  --texto: #1C1B19;
  --texto-suave: #75716A;
  --erro: #D62828;
  --erro-fundo: #FDEDED;
  --borda: #E1DED8;
  --sombra: 0 14px 40px rgba(27, 32, 66, 0.10);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", "Segoe UI", sans-serif;
  background: var(--fundo);
  color: var(--texto);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Barra superior (preto + segmento marrom, como no relatório) ---------- */
.barra-topo {
  height: 8px;
  background: var(--preto);
  display: flex;
  justify-content: flex-end;
}
.barra-topo span { display: block; width: 26%; background: var(--marrom); }

/* ---------- Cabeçalho ---------- */
.topo {
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
}
.topo-conteudo {
  max-width: 880px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.logo-mono { width: 44px; height: 44px; object-fit: contain; }
.topo-textos { display: flex; flex-direction: column; gap: 2px; }
.marca {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--marinho);
}
.sub-marca {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* ---------- Conteúdo ---------- */
.conteudo {
  flex: 1;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 16px 56px;
}

/* ---------- Hero no estilo da capa do relatório ---------- */
.hero {
  position: relative;
  padding: 46px 4px 30px;
  overflow: visible;
}
.hero-decor {
  position: absolute;
  top: 0;
  right: -16px;
  width: 150px;
  height: 150px;
  background: url("/static/img/decor_canto.svg") no-repeat top right / contain;
  pointer-events: none;
}
.hero-pontos {
  display: none;              /* só aparece em telas maiores, fora do texto */
  position: absolute;
  right: 40px;
  bottom: 10px;
  width: 54px;
  height: 78px;
  background: url("/static/img/pontos.svg") no-repeat center / contain;
  opacity: 0.9;
  pointer-events: none;
}
.hero h1 {
  margin: 0;
  font-weight: 300;
  font-size: clamp(1.9rem, 7vw, 3.1rem);
  letter-spacing: 3px;
  line-height: 1.08;
  color: var(--preto);
  text-transform: uppercase;
}
.hero h1 strong {
  display: block;
  font-weight: 800;
  letter-spacing: 2px;
}
.hero .hero-sub {
  margin: 14px 0 0;
  max-width: 540px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--texto-suave);
}
.hero .traco {
  display: block;
  width: 64px;
  height: 7px;
  margin-top: 18px;
  border-radius: 99px;
  background: var(--preto);
}

/* ---------- Cartão / formulário ---------- */
.cartao {
  position: relative;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 22px;
  box-shadow: var(--sombra);
  padding: 26px 20px 30px;
}

fieldset {
  border: none;
  margin: 0 0 8px;
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--borda);
}
fieldset:last-of-type { border-bottom: none; }

legend {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  margin-bottom: 14px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--marinho);
}
.passo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--marinho);
  color: var(--branco);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
}
fieldset:nth-of-type(even) .passo { background: var(--marrom); }

.dica {
  margin: -6px 0 14px 42px;
  font-size: 0.82rem;
  color: var(--texto-suave);
}

.campo { margin-bottom: 16px; }
.campo label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 7px;
  color: var(--texto);
}
.campo label small { color: var(--texto-suave); font-weight: 400; }

input[type="text"],
input[type="tel"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 13px 14px;
  font-size: 1rem;            /* >=16px evita zoom automático no iOS */
  font-family: inherit;
  color: var(--texto);
  background: #FBFAF8;
  border: 1.5px solid var(--borda);
  border-radius: 13px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  appearance: none;
  -webkit-appearance: none;
  min-height: 50px;           /* alvo de toque confortável */
}
select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231B2042' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
textarea { resize: vertical; }

input:focus, select:focus, textarea:focus {
  border-color: var(--marinho);
  box-shadow: 0 0 0 3px rgba(27, 32, 66, 0.14);
  background: var(--branco);
}

.linha-2 { display: grid; grid-template-columns: 1fr; gap: 0; }

/* ---------- Opções em pílula ---------- */
.opcoes-pilula { display: flex; flex-wrap: wrap; gap: 10px; }

.pilula { position: relative; }
.pilula input { position: absolute; opacity: 0; }
.pilula span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 48px;
  padding: 8px 22px;
  border: 1.5px solid var(--borda);
  border-radius: 999px;
  background: #FBFAF8;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.pilula input:checked + span {
  background: var(--marinho);
  border-color: var(--marinho);
  color: var(--branco);
}
.pilula input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(27, 32, 66, 0.3);
}

/* ---------- Opções em cartão (pagamento) ---------- */
.opcoes-cartao { display: grid; grid-template-columns: 1fr; gap: 10px; }
.opcao-cartao { position: relative; }
.opcao-cartao input { position: absolute; opacity: 0; }
.opcao-cartao span {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 12px 16px;
  border: 1.5px solid var(--borda);
  border-radius: 16px;
  background: #FBFAF8;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.15s;
}
.opcao-cartao span::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-right: 12px;
  border: 2px solid #C9C4BB;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.15s;
}
.opcao-cartao input:checked + span {
  border-color: var(--marrom);
  background: var(--marrom-suave);
}
.opcao-cartao input:checked + span::before {
  border-color: var(--marrom);
  background: radial-gradient(circle, var(--marrom) 0 45%, transparent 50%);
}
.opcao-cartao input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(112, 61, 31, 0.3);
}

/* ---------- Erros ---------- */
.msg-erro {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--erro);
}
.tem-erro input, .tem-erro select, .tem-erro textarea { border-color: var(--erro); }
.alerta-erro {
  background: var(--erro-fundo);
  border-left: 4px solid var(--erro);
  color: #8C1C1C;
  border-radius: 12px;
  padding: 13px 16px;
  margin-bottom: 18px;
  font-size: 0.9rem;
}

/* ---------- Botões ---------- */
.botao-principal {
  width: 100%;
  margin-top: 12px;
  padding: 17px;
  min-height: 58px;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--branco);
  background: var(--marinho);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(27, 32, 66, 0.30);
  transition: background 0.2s, transform 0.1s, box-shadow 0.15s;
}
.botao-principal:hover { background: var(--marrom); }
.botao-principal:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(27, 32, 66, 0.25); }
.botao-principal:disabled { opacity: 0.7; cursor: default; }

.botao-secundario {
  display: inline-block;
  margin-top: 10px;
  padding: 13px 30px;
  border: 1.5px solid var(--marinho);
  border-radius: 999px;
  color: var(--marinho);
  background: transparent;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.15s;
}
.botao-secundario:hover { background: var(--marinho); color: var(--branco); }

.nota-privacidade {
  margin: 16px 0 0;
  text-align: center;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--texto-suave);
}

/* ---------- Página de sucesso ---------- */
.cartao-sucesso { text-align: center; padding: 52px 24px; }
.selo-sucesso { margin-bottom: 16px; }
.logo-sucesso { width: 190px; max-width: 70%; margin: 0 auto 26px; display: block; }
.cartao-sucesso h1 {
  margin: 0 0 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 1.5rem;
  color: var(--marinho);
}
.cartao-sucesso p {
  color: var(--texto-suave);
  line-height: 1.7;
  max-width: 480px;
  margin: 0 auto 10px;
}

/* ---------- Admin ---------- */
.hero-admin { padding-bottom: 20px; }
.tabela-scroll {
  overflow-x: auto;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 18px;
  box-shadow: var(--sombra);
}
.tabela-clientes { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.tabela-clientes th, .tabela-clientes td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--borda);
  text-align: left;
  vertical-align: top;
}
.tabela-clientes th {
  background: var(--marinho);
  color: var(--branco);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.tabela-clientes tbody tr:nth-child(even) { background: #F6F4F0; }
.nada-quebra { white-space: nowrap; }

/* ---------- Rodapé (igual ao do relatório: preto + bloco marrom) ---------- */
.rodape {
  display: flex;
  flex-direction: column;       /* mobile: empilhado */
  align-items: stretch;
  background: var(--preto);
  color: var(--branco);
}
.rodape-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 16px 20px;
  text-align: center;
}
.rodape-nome { font-size: 0.85rem; font-weight: 500; }
.rodape-contato { font-size: 0.78rem; color: #C9C5BD; }
.rodape-insta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  background: var(--marrom);
  color: var(--branco);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: background 0.15s;
}
.rodape-insta:hover { background: #8A4E29; }

/* ---------- Telas maiores ---------- */
@media (min-width: 640px) {
  .conteudo { padding: 0 24px 64px; }
  .hero { padding: 64px 8px 40px; }
  .hero-decor { width: 230px; height: 230px; right: -24px; }
  .hero-pontos { display: block; }
  .rodape { flex-direction: row; }
  .rodape-insta { justify-content: flex-start; }
  .cartao { padding: 38px 44px 42px; }
  .linha-2 { grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .opcoes-cartao { grid-template-columns: 1fr 1fr; }
  .logo-mono { width: 50px; height: 50px; }
  .marca { font-size: 1.05rem; }
  .botao-principal { width: auto; min-width: 320px; display: block; margin-left: auto; margin-right: auto; padding: 17px 48px; }
}

/* ============================ Login / 2FA / Ficha ============================ */
.cartao-estreito { max-width: 460px; margin-left: auto; margin-right: auto; }

.campo-codigo {
  text-align: center;
  font-size: 1.7rem !important;
  letter-spacing: 10px;
  font-weight: 600;
}

.passos-2fa { margin: 0 0 20px; padding-left: 20px; color: var(--texto-suave); line-height: 1.7; }
.passos-2fa strong { color: var(--marinho); }

.qr-box {
  display: flex;
  justify-content: center;
  padding: 14px;
  margin: 0 auto 16px;
  width: fit-content;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 16px;
}
.qr-box svg { width: 200px; height: 200px; display: block; }

.chave-manual { text-align: center; font-size: 0.82rem; color: var(--texto-suave); margin: 0 0 18px; }
.chave-manual code {
  display: inline-block;
  margin-top: 4px;
  padding: 6px 12px;
  background: var(--marrom-suave);
  border-radius: 8px;
  font-size: 0.95rem;
  letter-spacing: 2px;
  color: var(--marrom);
  word-break: break-all;
}

.barra-usuario {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: var(--texto-suave);
}
.barra-usuario a {
  color: var(--marinho);
  font-weight: 600;
  text-decoration: none;
}
.barra-usuario a:hover { text-decoration: underline; }

.link-cliente { color: var(--marinho); text-decoration: none; }
.link-cliente:hover { text-decoration: underline; }

.titulo-secao {
  margin: 0 0 16px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--marinho);
}
.titulo-mini { margin: 22px 0 12px; font-size: 1rem; font-weight: 700; color: var(--texto); }

.grade-dados { display: grid; grid-template-columns: 1fr; gap: 14px; }
.grade-dados > div { display: flex; flex-direction: column; gap: 2px; font-size: 0.98rem; }
.grade-dados span {
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texto-suave);
  font-weight: 600;
}
.grade-dados .col-cheia { grid-column: 1 / -1; }

.form-servico { margin-top: 8px; border-top: 1px solid var(--borda); padding-top: 4px; }

@media (min-width: 640px) {
  .grade-dados { grid-template-columns: 1fr 1fr 1fr; gap: 16px 24px; }
}