/* =====================================================================
   HybridUs Gestão de Despesas — estilos base partilhados
   Paleta: cinzento, laranja e branco (com modo claro/escuro)
   ===================================================================== */

:root{
  --branco:#ffffff;
  --cinza-50:#f4f4f3;
  --cinza-100:#e7e6e3;
  --cinza-300:#c7c5c0;
  --cinza-500:#8b8983;
  --cinza-800:#2b2a27;
  --laranja:#e2711d;
  --laranja-escuro:#b85a12;

  --fundo:var(--cinza-50);
  --cartao:var(--branco);
  --linha:var(--cinza-100);
  --texto:var(--cinza-800);
  --texto-suave:var(--cinza-500);
  --accent:var(--laranja);
  --accent-escuro:var(--laranja-escuro);
  --atencao:var(--laranja-escuro);
  --radius:10px;
}
html[data-tema="escuro"]{
  --fundo:#201f1d;
  --cartao:#2a2926;
  --linha:#3c3a36;
  --texto:var(--branco);
  --texto-suave:#b3b0aa;
  --accent:var(--laranja);
  --accent-escuro:#f08a3c;
  --atencao:#f08a3c;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:"Segoe UI", system-ui, -apple-system, sans-serif;
  background:var(--fundo);
  color:var(--texto);
  font-size:16px;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  transition:background .2s ease, color .2s ease;
}

/* --- Cabeçalho comum --- */
header.cabecalho-site{
  padding:16px 16px;
  border-bottom:1px solid var(--linha);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  background:var(--fundo);
  z-index:10;
}
header.cabecalho-site h1{
  font-size:1.1rem;
  font-weight:600;
  margin:0;
}
@media (min-width:700px){
  header.cabecalho-site{padding:20px 28px;}
}

/* --- Interruptor claro/escuro --- */
.interruptor-tema{
  display:flex;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
  min-height:44px;
  -webkit-tap-highlight-color:transparent;
}
.interruptor-tema .trilho{
  width:46px;
  height:26px;
  border-radius:999px;
  background:var(--cinza-300);
  position:relative;
  transition:background .2s ease;
}
html[data-tema="escuro"] .interruptor-tema .trilho{background:var(--accent);}
.interruptor-tema .bola{
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--branco);
  transition:transform .2s ease;
}
html[data-tema="escuro"] .interruptor-tema .bola{transform:translateX(20px);}
.interruptor-tema .rotulo{
  font-size:.82rem;
  color:var(--texto-suave);
}

/* --- Cartões --- */
.card{
  background:var(--cartao);
  border:1px solid var(--linha);
  border-radius:var(--radius);
  padding:18px;
}
@media (min-width:700px){
  .card{padding:22px;}
}
.card h2{
  font-size:0.9rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--texto-suave);
  margin:0 0 14px;
}

/* --- Botões --- */
button, .botao{
  font:inherit;
  cursor:pointer;
  border-radius:8px;
  border:1px solid transparent;
  padding:12px 18px;
  font-weight:600;
  min-height:44px;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-primary{background:var(--accent); color:var(--branco);}
.btn-primary:hover{background:var(--accent-escuro);}
.btn-secondary{background:transparent; border-color:var(--linha); color:var(--texto);}
.btn-secondary:disabled, .btn-primary:disabled{opacity:.5; cursor:not-allowed;}

/* --- Campos de formulário --- */
form label{
  display:block;
  font-size:.82rem;
  color:var(--texto-suave);
  margin:16px 0 5px;
}
form label:first-of-type{margin-top:0;}
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=tel], input[type=file], select{
  width:100%;
  padding:12px 12px;
  border:1px solid var(--linha);
  border-radius:7px;
  font:inherit;
  font-size:16px; /* evita zoom automático no iOS ao focar */
  color:var(--texto);
  background:var(--cartao);
  min-height:44px;
}
select{
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238b8983'><path d='M5.5 7.5l4.5 4.5 4.5-4.5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:34px;
}
input[type=file]{padding:9px 10px;}

.linha-dupla{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:480px){
  .linha-dupla{grid-template-columns:1fr 1fr;}
}

.origem-badge{
  display:inline-block;
  font-size:.75rem;
  padding:2px 9px;
  border-radius:999px;
  background:var(--fundo);
  border:1px solid var(--linha);
  color:var(--accent-escuro);
  margin-left:8px;
  vertical-align:middle;
}

.aviso{
  font-size:.82rem;
  color:var(--texto-suave);
  margin-top:6px;
}
.erro-texto{
  font-size:.85rem;
  color:var(--atencao);
  font-weight:600;
  margin-top:10px;
}