/* EchoVet Web — mesmas cores do programa de Windows (tema escuro).
   Referência: EchoVet beta.pyw (SIDEBAR_BG, CARD_BG, ACENTO, VERDE_GERAR...) */
:root{
  --fundo:#1A1A1A;
  --cartao:#222222;
  --cartao-topo:#282828;
  --borda:#3A3A3A;
  --texto:#EAEAEA;
  --texto-2:#a0a0b0;
  --texto-3:#7a7a85;
  --apagado:#606070;
  --marca:#B85E2A;
  --acento:#E8966B;
  --acao:#DA7756;
  --acao-hover:#E8896A;
  --erro:#e8766b;
  --ok:#5cb85f;
  --nav-ativo:#272727;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  margin:0;background:var(--fundo);color:var(--texto);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;
  /* coluna: faixa de testes em cima, tela ocupando o resto */
  display:flex;flex-direction:column;
}
h1{font-size:20px;margin:0 0 8px;letter-spacing:-0.01em;}
h2{font-size:17px;margin:0 0 10px;}
p{margin:0 0 12px;}
a{color:var(--acento);}
.dica{font-size:13px;color:var(--texto-3);}
.msg{min-height:1.4em;font-size:13px;color:var(--erro);margin:10px 0 0;}
.msg.ok{color:var(--ok);}
.msg.neutro{color:var(--texto-3);}

/* ── marca ── */
.marca{display:flex;align-items:center;gap:10px;}
.marca span{font-size:19px;font-weight:700;}
.marca b{color:var(--marca);font-weight:700;}

/* ── faixa de fase de testes (topo de todas as telas) ── */
.faixa-teste{
  flex:none;padding:5px 14px;text-align:center;
  background:#2A211D;color:#c99374;border-bottom:1px solid #47342a;
  font-size:11.5px;letter-spacing:.01em;
}
.faixa-teste b{color:var(--acento);font-weight:600;}

/* ── telas centralizadas (entrar / assinatura) ── */
.centro{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:24px 16px;}
.cartao-login{
  width:100%;max-width:400px;background:var(--cartao);
  border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:28px 26px;
}
.cartao-login .sub{color:var(--texto-3);font-size:13px;margin:6px 0 20px;}
label{display:block;font-size:12px;font-weight:600;color:var(--texto-2);margin:14px 0 6px;}
input{
  width:100%;padding:11px 13px;font-size:15px;color:var(--texto);
  background:#2A2A2A;border:1px solid var(--borda);border-radius:9px;outline:none;
}
input:focus{border-color:var(--acento);box-shadow:0 0 0 3px rgba(232,150,107,.2);}
.principal,.secundario{
  display:block;width:100%;margin-top:18px;padding:12px 16px;border:0;border-radius:9px;
  font-size:15px;font-weight:600;text-align:center;text-decoration:none;cursor:pointer;
}
.principal{background:var(--acao);color:#fff;}
.principal:hover{background:var(--acao-hover);}
.secundario{background:transparent;color:var(--texto-2);border:1px solid var(--borda);}
.secundario:hover{background:#2A2A2A;}
button:disabled{opacity:.6;cursor:default;}
.links{display:flex;gap:16px;justify-content:center;margin-top:16px;font-size:13px;}
.rodape-login{margin:18px 0 0;text-align:center;font-size:12px;color:var(--apagado);}

/* ── layout do programa ── */
.layout{display:grid;grid-template-columns:230px 1fr;flex:1;min-height:0;}
.lateral{
  background:var(--fundo);border-right:1px solid rgba(255,255,255,.06);
  padding:22px 12px 16px;display:flex;flex-direction:column;
}
.lateral-topo{padding:0 8px;}
.lateral-sub{margin:2px 0 18px 48px;font-size:11px;color:var(--apagado);}
.passos{display:flex;flex-direction:column;gap:2px;}
.passo{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;
  background:transparent;border:0;border-radius:8px;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--texto-2);text-align:left;
}
.passo:hover{background:#1C1D1F;}
.passo.ativo{background:var(--nav-ativo);color:var(--acento);}
.passo i{font-style:normal;opacity:.8;}
.passo.discreto{font-size:12px;font-weight:400;color:var(--apagado);}
.lateral-fim{margin-top:auto;display:flex;flex-direction:column;gap:6px;}
/* ── destaque do programa de Windows (o laranja) ── */
.destaque-desktop{
  display:block;width:calc(100% - 8px);margin:0 4px 8px;padding:9px 11px;
  background:#2A211D;color:var(--acento);border:1px solid #47342a;border-radius:8px;
  text-align:left;cursor:pointer;line-height:1.35;
}
.destaque-desktop:hover{background:#332721;border-color:#5a4132;}
.destaque-desktop b{display:block;font-size:12px;font-weight:600;}
.destaque-desktop span{display:block;margin-top:2px;font-size:10.5px;color:#a8846f;}

/* ── conta ── */
.conta{display:flex;align-items:center;gap:8px;padding:8px 6px 0;border-top:1px solid rgba(255,255,255,.06);}
.conta-inicial{
  width:22px;height:22px;border-radius:50%;background:#33343a;color:#c0c0c8;
  font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none;
}
.conta-email{flex:1;font-size:11px;color:var(--texto-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sair{background:none;border:0;color:var(--apagado);font-size:11px;cursor:pointer;}
.sair:hover{color:var(--texto-2);}

/* ── conteúdo ── */
.conteudo{padding:22px 24px;overflow:auto;}
.cartao{background:var(--cartao);border-radius:12px;padding:22px 24px;max-width:760px;}

/* ── caixinha do aviso ── */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:20px;}
.modal-caixa{background:var(--cartao);border:1px solid var(--borda);border-radius:14px;padding:24px;max-width:430px;width:100%;}
.modal-caixa ul{margin:0 0 14px;padding-left:20px;color:var(--texto-2);font-size:14px;}
.modal-caixa li{margin-bottom:6px;}
.modal-botoes{display:flex;gap:10px;}
.modal-botoes .principal,.modal-botoes .secundario{margin-top:8px;}

@media (max-width:720px){
  .layout{grid-template-columns:1fr;}
  .lateral{border-right:0;border-bottom:1px solid rgba(255,255,255,.06);}
  .lateral-fim{margin-top:18px;}
}