/* login.css: a tela de entrada do M.ia Claw (celular primeiro).
   Visual do tema moderno da conversa (personalizacao do dono, 25/10/2026): faixa azul-marinho no topo,
   detalhes em laranja, fundo claro e liso, cartão branco com borda fina. Vale também para o primeiro acesso. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --tm-marinho:#131921;
  --tm-marinho2:#232f3e;
  --tm-laranja:#ff9900;
  --tm-fundo:#eaeded;
  --tm-borda:#d5d9d9;
  --accent:#ff9900;
  --txt:#0f1111;
  --muted:#565959;
  --line:#d5d9d9;
}
html,body{height:100%}
html{background:var(--tm-fundo)}
body{margin:0;color:var(--txt);display:flex;align-items:center;justify-content:center;position:relative;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right))
          max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  font:15.5px/1.46 "Segoe UI Variable","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
  letter-spacing:.005em;background:var(--tm-fundo)}
/* faixa escura no topo, a mesma cor da barra da conversa, com o fio laranja embaixo */
body::before{content:"";position:fixed;left:0;right:0;top:0;height:min(38vh,260px);z-index:0;
  background:linear-gradient(180deg,var(--tm-marinho) 0%,var(--tm-marinho2) 100%);
  border-bottom:3px solid var(--tm-laranja);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.cartao{position:relative;z-index:1;width:100%;max-width:380px;background:#fff;border:1px solid var(--tm-borda);
  border-radius:18px;padding:26px 22px 24px;
  box-shadow:0 1px 2px rgba(15,17,17,.08),0 12px 32px rgba(15,17,17,.14)}
.marca{display:flex;align-items:center;gap:12px}
.marca .logo{width:46px;height:46px;flex:0 0 46px;display:block;
  filter:drop-shadow(0 2px 6px rgba(15,17,17,.18))}
.marca h1{margin:0;font-size:23px;font-weight:700;letter-spacing:-.01em;color:var(--tm-marinho)}
.lema{margin:12px 0 0;font-size:15px;font-weight:500;color:var(--tm-marinho)}
.lema strong{font-weight:700}
.sub{margin:8px 0 16px;color:var(--muted);font-size:14.5px}
.erro{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:#fff4f4;color:#a10000;
  border:1px solid #f0bcbc;border-left:3px solid #c40000;font-size:14px;line-height:1.4}
/* aviso neutro do login.js (instalação sem senha ainda): ele pinta em verde direto no elemento;
   aqui vira o aviso laranja do tema, sem mexer no script */
.erro[style*="background"]{background:#fff8ec!important;color:#7a4a00!important;
  border-color:#f3d39b!important;border-left-color:var(--tm-laranja)!important}
.erro[hidden]{display:none}
label{display:block;margin:14px 0 6px;font-size:13px;font-weight:600;color:var(--tm-marinho2)}
input[type=text],input[type=password]{width:100%;min-height:46px;padding:11px 14px;border:1px solid #888c8c;
  border-radius:12px;font:inherit;font-size:16px;background:#fff;color:var(--txt);outline:none;
  box-shadow:inset 0 1px 2px rgba(15,17,17,.12);transition:border-color .15s,box-shadow .15s}
input:focus{border-color:#e77600;background:#fff;box-shadow:0 0 0 3px rgba(228,121,17,.35)}
.contato{margin-top:20px;padding-top:16px;border-top:1px solid var(--tm-borda);text-align:center;font-size:13.5px;color:var(--muted)}
.contato p{margin:0 0 8px}
.contato a{display:block;margin:4px 0;color:var(--tm-marinho2);font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.contato a:hover{text-decoration:underline}
.contato a:focus-visible{outline:2px solid var(--tm-laranja);outline-offset:2px;border-radius:4px}
button{width:100%;margin-top:22px;min-height:48px;border:0;border-radius:24px;background:var(--tm-marinho2);
  color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:background .15s,box-shadow .15s}
button:hover{background:var(--tm-marinho)}
button:focus-visible{outline:2px solid var(--tm-laranja);outline-offset:2px}
button:active{opacity:.85}
button:disabled{background:#c9cccc;cursor:default}

/* No iPhone, campo com fonte abaixo de 16px dá zoom quando recebe o foco. Regra: nada dá zoom no app instalado. */
@media (pointer:coarse){input,textarea,select{font-size:16px!important}}