/* Telas próprias (login, senha, importação). Mesmas cores do sistema. */
:root {
  --bg: #080808;
  --painel: #0E0E0E;
  --campo: #161616;
  --borda: #2A2A2A;
  --borda-forte: #3A3A3A;
  --texto: #F3EDE6;
  --suave: #A39C94;
  --fraco: #7A746E;
  --acento: #D4601E;
  --acento-2: #B84E15;
  --erro: #EF6B6B;
  --ok: #4CAF7D;
  --aviso: #E0A341;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
a { color: #F08A4B; }
a:hover { color: #FFB07F; }

/* ── Layout de duas colunas: marca | formulário ── */
.tela { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(440px, 1fr); }

.marca {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 56px 64px;
  border-right: 1px solid #1A1A1A;
  background:
    radial-gradient(110% 70% at 10% 115%, rgba(212, 96, 30, 0.30), transparent 62%),
    radial-gradient(55% 45% at 90% -5%, rgba(212, 96, 30, 0.12), transparent 70%),
    linear-gradient(165deg, #0F0C0A 0%, #050505 70%);
}
.marca::before {
  /* textura fina, quase invisível */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 9px);
  pointer-events: none;
}
.marca > * { position: relative; }
.marca-topo { margin-top: auto; }
.marca img { display: block; width: min(380px, 78%); height: auto; }
.linha {
  margin-top: 22px;
  padding-left: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--acento);
}
.modulos { list-style: none; display: grid; gap: 10px; margin-top: auto; padding-left: 4px; }
.modulos li { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--suave); }
.modulos li::before { content: ""; width: 18px; height: 1px; background: var(--acento); flex: none; }

.lado-form { display: grid; place-items: center; padding: 56px 28px; background: var(--painel); }
.cartao { width: 100%; max-width: 384px; }
.cartao.largo { max-width: 640px; }

h1 { font-size: 27px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.sub { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--suave); }

form { display: grid; gap: 20px; margin-top: 30px; }
label, .rotulo-campo { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: #DCD5CD; }

input[type="email"], input[type="password"], input[type="text"] {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--campo);
  color: var(--texto);
  font: 500 15px Inter, "Segoe UI", system-ui, sans-serif;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder { color: #5E5852; }
input:hover { border-color: var(--borda-forte); }
input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(212, 96, 30, 0.25); }
input[aria-invalid="true"] { border-color: var(--erro); }
input:-webkit-autofill { -webkit-text-fill-color: var(--texto); -webkit-box-shadow: 0 0 0 40px var(--campo) inset; caret-color: var(--texto); }

.campo { position: relative; }
.campo input { padding-right: 84px; }
.olho {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  height: 36px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--suave);
  font: 600 12.5px Inter, "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
}
.olho:hover { background: #222; color: var(--texto); }
.olho:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

.dica { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--fraco); }
.dica.caps { color: var(--aviso); }

.lembrar { display: flex; gap: 11px; align-items: flex-start; margin: 0; font-weight: 500; font-size: 13.5px; color: #DCD5CD; cursor: pointer; }
.lembrar input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--acento); cursor: pointer; }
.lembrar small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--fraco); }

.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(160deg, #D4601E, #B84E15);
  color: #fff;
  font: 700 15px Inter, "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(212, 96, 30, 0.22);
  transition: filter 0.15s, transform 0.05s;
}
.botao:hover { filter: brightness(1.08); }
.botao:active { transform: translateY(1px); }
.botao:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.botao[disabled] { opacity: 0.7; cursor: progress; filter: none; }
.botao.secundario { background: var(--campo); border: 1px solid var(--borda); box-shadow: none; color: var(--texto); }
.giro { width: 17px; height: 17px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: giro 0.7s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

.alerta { display: flex; gap: 10px; margin-top: 24px; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.5; }
.alerta.erro { background: rgba(224, 85, 85, 0.10); border: 1px solid rgba(224, 85, 85, 0.35); color: #F5CACA; }
.alerta.info { background: rgba(76, 175, 125, 0.08); border: 1px solid rgba(76, 175, 125, 0.32); color: #CDEBDB; }
.alerta.aviso { background: rgba(224, 163, 65, 0.08); border: 1px solid rgba(224, 163, 65, 0.35); color: #F1DDB8; }

.regras { list-style: none; display: grid; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--fraco); }
.regras li { display: flex; gap: 8px; align-items: center; }
.regras li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--fraco); flex: none; }
.regras li.ok { color: #9ED7B8; }
.regras li.ok::before { background: var(--ok); border-color: var(--ok); }

.ajuda { margin-top: 30px; padding-top: 20px; border-top: 1px solid #1E1E1E; font-size: 13px; line-height: 1.55; color: var(--suave); }
.selo { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 12px; color: var(--fraco); }
.selo svg { width: 13px; height: 13px; flex: none; }

/* ── Importação ── */
.cabecalho-simples { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 28px; border-bottom: 1px solid #1A1A1A; background: #050505; }
.cabecalho-simples img { width: 128px; height: auto; display: block; }
.pagina-simples { min-height: 100vh; display: flex; flex-direction: column; }
.pagina-simples main { flex: 1; padding: 44px 24px 64px; display: flex; justify-content: center; }
.passo { margin-top: 28px; padding: 22px; border: 1px solid var(--borda); border-radius: 14px; background: var(--painel); }
.passo h2 { display: flex; align-items: center; gap: 12px; font-size: 15.5px; font-weight: 700; }
.passo h2 span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(212, 96, 30, 0.15); color: var(--acento); font-size: 13px; }
.passo p, .passo li { font-size: 13.5px; line-height: 1.6; color: var(--suave); }
.passo ol { margin: 10px 0 16px 20px; }
.passo .botao { display: inline-flex; margin-top: 14px; text-decoration: none; }
.arquivo { margin-top: 14px; display: block; width: 100%; padding: 18px; border: 1px dashed var(--borda-forte); border-radius: 10px; background: var(--campo); color: var(--suave); font-size: 13.5px; cursor: pointer; }
table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 10px; border-bottom: 1px solid #1E1E1E; text-align: left; }
th { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fraco); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
code { font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: #DCD5CD; }
details { margin-top: 14px; font-size: 13px; color: var(--suave); }
details pre { margin-top: 10px; padding: 12px; overflow-x: auto; border-radius: 8px; background: #050505; border: 1px solid #1E1E1E; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: #DCD5CD; white-space: pre-wrap; }

@media (max-width: 900px) {
  .tela { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .marca { gap: 0; padding: 30px 24px 28px; border-right: 0; border-bottom: 1px solid #1A1A1A; align-items: center; text-align: center; }
  .marca-topo { margin: 0; }
  .marca img { width: 210px; margin: 0 auto; }
  .linha { margin-top: 14px; font-size: 10.5px; padding-left: 0; }
  .modulos { display: none; }
  .lado-form { place-items: start center; padding: 34px 20px 56px; }
  h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── Alertas ── */
.cartao-alerta .topo-alerta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cartao-alerta .descricao { margin-top: 8px; }
.cartao-alerta.desligado .campos, .cartao-alerta.desligado .campo-dest { opacity: 0.5; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-top: 18px; }
.campos label, .campo-dest label { font-size: 12.5px; }
.campos input, .campos select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 9px; background: var(--campo); color: var(--texto); font: 500 14px Inter, "Segoe UI", system-ui, sans-serif; color-scheme: dark; }
.campos input:focus, .campos select:focus, textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(212, 96, 30, 0.25); }
.campo-dest { margin-top: 16px; }
textarea { width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 9px; background: var(--campo); color: var(--texto); font: 500 14px/1.5 Inter, "Segoe UI", system-ui, sans-serif; resize: vertical; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.acoes .botao { height: 42px; padding: 0 16px; font-size: 14px; box-shadow: none; text-decoration: none; margin: 0; display: inline-flex; }
.acoes .estado { font-size: 13px; color: var(--suave); }
.acoes .estado.ok { color: #9ED7B8; }
.acoes .estado.erro { color: #F5CACA; }
.interruptor { display: inline-flex; align-items: center; gap: 9px; margin: 0; cursor: pointer; font-size: 13px; color: var(--suave); flex: none; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor span { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #333; transition: background 0.15s; }
.interruptor span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #bbb; transition: transform 0.15s, background 0.15s; }
.interruptor input:checked + span { background: var(--acento); }
.interruptor input:checked + span::after { transform: translateX(16px); background: #fff; }
.interruptor input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.interruptor b { font-weight: 600; }
.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.etiqueta.enviado { background: rgba(76, 175, 125, 0.14); color: #9ED7B8; }
.etiqueta.sem_conteudo { background: #1f1f1f; color: var(--suave); }
.etiqueta.erro { background: rgba(224, 85, 85, 0.14); color: #F5CACA; }
.etiqueta.enviando { background: rgba(224, 163, 65, 0.14); color: #F1DDB8; }
.etiqueta.teste { background: #1f1f1f; color: var(--fraco); margin-left: 4px; }
#envios td { vertical-align: top; color: var(--suave); }
#envios td.assunto { color: var(--texto); }
#envios .erro-txt { display: block; margin-top: 3px; font-size: 12px; color: #F5CACA; }

/* ── Configurações ── */
.provedores { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 14px; }
.provedor { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 16px; border: 1px solid var(--borda); border-radius: 12px; background: var(--campo); color: var(--texto); text-align: left; cursor: pointer; font: inherit; transition: border-color 0.15s, background 0.15s; }
.provedor:hover { border-color: var(--acento); background: #1b1714; }
.provedor:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.provedor strong { font-size: 14.5px; margin-top: 6px; }
.provedor span:not(.marca-provedor) { font-size: 12.5px; line-height: 1.45; color: var(--suave); }
.provedor em { position: absolute; top: 12px; right: 12px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--acento); }
.marca-provedor { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; font: 700 16px Inter, "Segoe UI", system-ui, sans-serif; color: #fff; background: #333; flex: none; }
.marca-provedor.google { background: linear-gradient(135deg, #4285F4, #34A853); }
.marca-provedor.outlook { background: linear-gradient(135deg, #0A64C8, #1C8CE6); }
.marca-provedor.smtp { background: linear-gradient(135deg, #555, #333); }
.topo-form { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.voltar { border: 0; background: none; color: var(--suave); font: 500 13px Inter, "Segoe UI", system-ui, sans-serif; cursor: pointer; padding: 4px 0; }
.voltar:hover { color: var(--texto); }
.passo ol.passos-guia { margin: 16px 0 4px; padding: 14px 16px 14px 34px; border-radius: 10px; background: #0A0A0A; border: 1px solid #1E1E1E; }
.passos-guia li { margin: 6px 0; font-size: 13.5px; line-height: 1.55; color: var(--suave); }
.passos-guia li strong { color: var(--texto); }
#form-conta .campos { margin-top: 14px; }
#form-conta .campo input { padding-right: 84px; height: 42px; }
.conta-conectada { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 12px; background: var(--campo); }
.conta-conectada div { flex: 1; min-width: 0; }
.conta-conectada strong { display: block; font-size: 14.5px; overflow-wrap: anywhere; }
.conta-conectada div span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--suave); }
.botao.perigo { color: #F5CACA; }
.botao.perigo:hover { border-color: #7a2e2e; }