/* Portal MXATR O&P (12/11/2026): login, "Meus produtos" e a entrada do Colete online.
   Mesmo sistema visual do Colete Studio PRO (pro/pro.css): barra escura com a marca, superfícies claras ou escuras,
   e o mesmo interruptor de tema (localStorage "colete-pro-tema"), para o portal e o editor andarem juntos. */
:root{
 --barra:#101820;--barra2:#18232e;--barratxt:#e7eef5;--barratxt2:#93a4b5;
 --bg:#eef2f6;--sup:#ffffff;--painel:#f8fafc;--linha:#dbe2ea;--linha2:#c6d0da;
 --txt:#15202b;--txt2:#566676;--txt3:#7b8b9a;
 --acento:#2368c4;--acento2:#1a56a6;--acentoBg:#e8f0fb;--foco:#2368c433;
 --ok:#1e8a4c;--erro:#c2362b;--cobre:#e0782f;
 --raio:7px;--raioG:12px;--sombra:0 1px 2px #0f172a14,0 4px 14px #0f172a12;
 color-scheme:light;
 font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--txt);background:var(--bg);
}
html.pro-escuro{
 --barra:#0b1016;--barra2:#141b23;--barratxt:#e6edf3;--barratxt2:#8b9aab;
 --bg:#0f141a;--sup:#1b222b;--painel:#151b22;--linha:#2a333e;--linha2:#384451;
 --txt:#e3e9ef;--txt2:#9aa8b6;--txt3:#7a8896;
 --acento:#4b8ff0;--acento2:#6aa3f5;--acentoBg:#1b2a3f;--foco:#4b8ff044;--erro:#f07167;
 --sombra:0 1px 2px #0008,0 4px 14px #0006;color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--txt)}
a{color:var(--acento)}
header.barra{height:62px;padding:0 20px;display:flex;align-items:center;gap:16px;background:var(--barra);color:var(--barratxt);border-bottom:2px solid var(--cobre)}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.marca img{height:30px;width:auto;display:block}
.marca b{font-weight:700;letter-spacing:.14em;font-size:15px;color:var(--barratxt);border-left:1px solid #ffffff33;padding-left:10px}
header.barra .espaco{flex:1}
header.barra .quem{color:var(--barratxt2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.barra button,header.barra a.botao{background:var(--barra2);color:var(--barratxt);border:1px solid #ffffff22}
main{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:34px 20px 40px}
h1{font-size:24px;margin:0 0 4px;font-weight:650;letter-spacing:.01em}
h2{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--acento);margin:0 0 12px}
.sub{color:var(--txt2);margin:0 0 26px}
.trilha{font-size:13px;color:var(--txt2);margin:0 0 10px}.trilha a{text-decoration:none}
.cartao{background:var(--sup);border:1px solid var(--linha);border-radius:var(--raioG);padding:22px 24px;box-shadow:var(--sombra);margin-bottom:18px}
label{display:block;margin:14px 0 6px;color:var(--txt2);font-size:13px}
input{width:100%;padding:11px 12px;border:1px solid var(--linha2);border-radius:var(--raio);font:inherit;background:var(--painel);color:var(--txt)}
input:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px var(--foco)}
button,a.botao{display:inline-flex;align-items:center;gap:8px;background:var(--acento);color:#fff;border:0;border-radius:var(--raio);padding:10px 16px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
button:hover,a.botao:hover{background:var(--acento2)}
button.leve{background:var(--painel);color:var(--txt);border:1px solid var(--linha2);font-weight:500}
button.leve:hover{border-color:var(--acento)}
button:disabled{opacity:.5;cursor:default}
.erro{color:var(--erro);min-height:1.4em;margin-top:12px;font-size:13px}
.aviso{background:var(--acentoBg);color:var(--txt);border-radius:var(--raio);padding:10px 12px;font-size:13px;margin-bottom:6px}
.muted{color:var(--txt2);font-size:13px}
/* entrar */
.entrar{display:grid;grid-template-columns:1.05fr .95fr;gap:0;max-width:880px;margin:7vh auto 30px;background:var(--sup);border:1px solid var(--linha);border-radius:16px;overflow:hidden;box-shadow:var(--sombra)}
.entrar .lado{background:linear-gradient(160deg,var(--barra) 0%,var(--barra2) 100%);color:var(--barratxt);padding:38px 34px;display:flex;flex-direction:column;gap:14px}
.entrar .lado img{height:40px;width:auto;align-self:flex-start}
.entrar .lado h1{color:#fff;font-size:26px;margin-top:18px}
.entrar .lado p{color:var(--barratxt2);margin:0}
.entrar .lado ul{margin:6px 0 0;padding:0;list-style:none;color:var(--barratxt);display:grid;gap:8px}
.entrar .lado li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--cobre);margin-right:10px;vertical-align:1px}
.entrar form{padding:34px 34px 30px}
.entrar form h2{margin-top:2px}
.entrar form button[type=submit]{width:100%;justify-content:center;margin-top:20px;padding:12px}
.dica{font-size:12px;color:var(--txt3);margin-top:6px}
/* segunda etapa do entrar (código por e-mail ou do aplicativo) */
.msgcod{margin:0 0 4px;color:var(--txt);background:var(--acentoBg);border-radius:var(--raio);padding:10px 12px;font-size:13.5px}
input.codigo{font:600 24px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.45em;text-align:center;padding:12px 8px 12px calc(8px + .45em)}
.marcar{display:flex;align-items:center;gap:10px;margin:16px 0 0;color:var(--txt);font-size:13.5px;cursor:pointer}
.marcar input{width:18px;height:18px;margin:0;padding:0;flex:none;accent-color:var(--acento)}
.marcar+.dica{margin-left:28px}
.acoes2{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.acoes2 button{flex:1 1 auto;justify-content:center;padding:9px 10px;white-space:nowrap}
.nw{white-space:nowrap}
.acoes2 button[hidden]{display:none}
/* produtos */
.produtos{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.produto{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--sup);border:1px solid var(--linha);border-radius:var(--raioG);padding:22px;box-shadow:var(--sombra);text-decoration:none;color:inherit;min-height:200px}
a.produto:hover{border-color:var(--acento);box-shadow:0 0 0 3px var(--foco),var(--sombra)}
.produto .ic{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;background:var(--acentoBg);color:var(--acento)}
.produto .ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.produto h3{margin:4px 0 0;font-size:18px}
.produto p{margin:0;color:var(--txt2);font-size:13.5px;flex:1}
.produto .acao{color:var(--acento);font-weight:600;font-size:14px}
.produto.breve{opacity:.62;cursor:default;box-shadow:none}
.produto.breve .ic{background:var(--painel);color:var(--txt3)}
.selo{position:absolute;top:16px;right:16px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:20px;padding:3px 10px}
.selo.ativo{background:#1e8a4c22;color:var(--ok)}
.selo.embreve{background:var(--painel);color:var(--txt3);border:1px solid var(--linha)}
/* tabela de histórico */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--linha)}
th{color:var(--txt2);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
td.arq{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;word-break:break-all}
.linha2{display:grid;grid-template-columns:1fr 1.3fr;gap:18px;align-items:start}
footer{padding:14px 20px;color:var(--txt3);font-size:12px;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
footer button{padding:5px 10px;font-size:12px}
@media(max-width:760px){.entrar{grid-template-columns:1fr;margin:0}.entrar .lado{padding:26px 22px}.entrar form{padding:24px 22px}.linha2{grid-template-columns:1fr}header.barra{padding:0 12px}.marca img{height:24px}header.barra .quem{display:none}main{padding:22px 16px}}