/* SORC IA — estilo base do painel (login e escolha do cliente). Cores como variáveis, paleta "Cobalt sky" da plataforma:
   cobalto #0047AB, azul-marinho #000080, azul-céu #82C8E5, cinza-azulado #6D8196. O tema escuro vem do sistema (prefers-color-scheme). */
:root {
  --bg: #F3F6FB; --campo: #FFFFFF; --sup: #FFFFFF; --sup-hover: #F0F4FA; --borda: #DAE3EE; --borda-forte: #C3D1E1;
  --texto: #0B1530; --texto-medio: #27364F; --suave: #44566E; --fraco: #5A6E84;
  --acento: #0047AB; --acento-forte: #000080; --sobre-acento: #FFFFFF; --acento-suave: #E3ECF8;
  --dourado: #0047AB; --perigo: #B3261E; --perigo-suave: #FBEAE8; --foco: #0047AB;
  --sombra: 0 1px 2px rgba(11, 21, 48, .06), 0 12px 32px -16px rgba(0, 0, 128, .22);
  --fonte: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A1030; --campo: #0D1538; --sup: #111A47; --sup-hover: #172256; --borda: #25336E; --borda-forte: #34458A;
    --texto: #F2F7FC; --texto-medio: #D5E2EF; --suave: #AFC2D6; --fraco: #8FA4BA;
    --acento: #82C8E5; --acento-forte: #A9DCF0; --sobre-acento: #04103A; --acento-suave: #1E2C68;
    --dourado: #82C8E5; --perigo: #FF8A80; --perigo-suave: #3A1F27; --foco: #82C8E5;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -16px rgba(0, 0, 0, .6);
  }
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--texto); font: 14px/1.5 var(--fonte); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* botões e campos */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--borda); background: var(--sup); color: var(--texto); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s; }
.btn:hover { background: var(--sup-hover); border-color: var(--borda-forte); }
.btn.primario { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.btn.primario:hover { background: var(--acento-forte); border-color: var(--acento-forte); }
.btn.grande { height: 46px; width: 100%; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 12.5px; font-weight: 600; }
.campo input { height: 46px; width: 100%; border-radius: 12px; border: 1px solid var(--borda-forte); background: var(--campo); color: var(--texto); padding: 0 14px; font: inherit; font-size: 16px; outline: none; }
.campo input:focus { border-color: var(--dourado); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dourado) 25%, transparent); }
.campo input[aria-invalid="true"] { border-color: var(--perigo); }
.senha { position: relative; }
.senha input { padding-right: 48px; }
.senha button { position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--suave); cursor: pointer; display: grid; place-items: center; }
.senha button:hover { background: var(--sup-hover); color: var(--texto); }
.senha svg { width: 18px; height: 18px; }
.erro { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--perigo-suave); color: var(--perigo); font-size: 13px; line-height: 1.4; }
.erro-campo { color: var(--perigo); font-size: 12.5px; }

/* login */
.login { min-height: 100%; display: grid; place-items: center; padding: 20px; background: radial-gradient(900px 480px at 8% -8%, var(--acento-suave), transparent 70%), var(--bg); }
.login-cartao { width: 100%; max-width: 420px; background: var(--sup); border: 1px solid var(--borda); border-radius: 20px; box-shadow: var(--sombra); padding: 32px 28px; display: flex; flex-direction: column; gap: 22px; }
.marca { display: flex; align-items: center; gap: 12px; }
.marca-logo { width: 44px; height: 44px; border-radius: 12px; background: var(--acento); color: var(--sobre-acento); display: grid; place-items: center; font-weight: 800; letter-spacing: -.02em; box-shadow: 0 3px 0 -1px var(--dourado); }
.marca b { display: block; font-size: 17px; letter-spacing: -.02em; line-height: 1.2; }
.marca small { color: var(--suave); font-size: 12px; }
.login h1 { font-size: 22px; letter-spacing: -.025em; line-height: 1.2; }
.login .sub { color: var(--suave); margin-top: 4px; }
.login form { display: flex; flex-direction: column; gap: 16px; }
.lembrar { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-medio); }
.lembrar input { width: 16px; height: 16px; accent-color: var(--acento); }
.rodape-login { border-top: 1px solid var(--borda); padding-top: 16px; font-size: 12px; color: var(--fraco); }

/* portal e painel do cliente */
.casca { min-height: 100%; display: flex; flex-direction: column; }
.topo { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px; border-bottom: 1px solid var(--borda); background: var(--bg); }
.topo .marca-logo { width: 32px; height: 32px; border-radius: 9px; font-size: 12px; }
.topo .caminho { display: flex; align-items: center; gap: 8px; color: var(--suave); }
.topo .caminho b { color: var(--texto); }
.topo .dir { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--suave); font-size: 13px; }
.topo form { margin: 0; }
.conteudo { flex: 1; width: 100%; padding: 28px 20px 48px; display: flex; flex-direction: column; gap: 20px; }
.conteudo h1 { font-size: 24px; letter-spacing: -.025em; }
.conteudo .sub { color: var(--suave); margin-top: 4px; }
.grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cartao { background: var(--sup); border: 1px solid var(--borda); border-radius: 16px; box-shadow: var(--sombra); padding: 18px; }
a.cartao { text-decoration: none; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, transform .15s; }
a.cartao:hover { border-color: var(--dourado); transform: translateY(-1px); }
.cartao h2 { font-size: 15px; }
.cartao p { color: var(--suave); font-size: 13px; }
.selo { display: inline-flex; align-items: center; gap: 6px; width: fit-content; border-radius: 999px; padding: 2px 10px; font-size: 11.5px; font-weight: 600; background: var(--acento-suave); color: var(--acento); }
.selo.inativo { background: var(--perigo-suave); color: var(--perigo); }
.vazio { text-align: center; padding: 40px 16px; color: var(--suave); }
.vazio b { display: block; color: var(--texto); font-size: 15px; margin-bottom: 4px; }
.topo .caminho a { text-decoration: none; } .topo .caminho a:hover { color: var(--texto); }