/* pages/auth.css — Telas de acesso (body.auth): tela dividida — painel escuro com carrossel de funcionalidades à esquerda (.authhero)
   e formulário à direita (.authcard) —, campos, avisos e rodapé. Tokens de cor e --err/--err-soft em base.css;
   no celular as colunas empilham (responsive.css). A lógica do carrossel está em js/views/carousel.js. */

/* ===== Estrutura: duas colunas ===== */
body.auth{background:var(--surface-blue)}
body.auth main>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;max-width:none;min-height:100vh;padding:0}
body.auth .view.active{display:flex;align-items:center;justify-content:center;padding:2.5rem 2rem}

/* ===== Painel escuro + carrossel ===== */
.authhero{display:none;position:relative;overflow:hidden;background:var(--navy-deep);color:#fff;text-align:center;align-items:center;justify-content:center;padding:2rem}
body.auth .authhero{display:flex}
.authlines{position:absolute;inset:0;width:100%;height:100%;color:var(--brand-light)}
.authlines path{stroke:currentColor;stroke-width:2;opacity:.5;vector-effect:non-scaling-stroke}
.authhero-in{position:relative;width:100%;max-width:540px;display:flex;flex-direction:column;align-items:center}
.authsymbol{display:block;width:104px;height:auto;margin-bottom:3rem}
.slides{display:grid;width:100%;align-items:start}
.slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.slide.active{opacity:1;visibility:visible}
.slide-title{font-size:clamp(1.4rem,2.9vw,2.2rem);font-weight:400;line-height:1.2;letter-spacing:-.01em;white-space:nowrap}   /* cada linha do título nunca quebra */
.slide-title b{font-weight:800}
.slide-title .hl{color:var(--brand-light)}
.slide-sub{margin:1rem auto 0;max-width:410px;font-size:1rem;line-height:1.6;color:var(--on-dark-soft)}
.dots{display:flex;gap:.5rem;justify-content:center;margin-top:2.2rem}
.dot{width:10px;height:10px;border-radius:99px;background:var(--on-dark-soft);opacity:.35;transition:width .3s,opacity .3s,background .3s;padding:0}
.dot:hover{opacity:.7}
.dot.active{width:28px;background:var(--brand-light);opacity:1}
.dot:focus-visible{outline:3px solid var(--on-dark-soft);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.slide,.dot{transition:none}}

/* ===== Formulário (sem cartão) ===== */
.authcard{width:100%;max-width:420px}
.authbrand{display:flex;align-items:center;justify-content:center;gap:.65rem;margin-bottom:1.8rem}
.authbrand img{display:block;height:34px;width:auto}
.authbrand .authbrand-name{height:27px}
.authcard h1{font-size:2rem;line-height:1.2;color:var(--text);text-align:center;margin-bottom:1.6rem}
.authcard h1:focus{outline:none}
.authcard .sub{text-align:center;margin-bottom:1.2rem}
.notice{display:flex;gap:.6rem;align-items:flex-start;background:var(--primary-soft);border:1px solid var(--primary-edge);border-radius:10px;padding:.65rem .8rem;font-size:.8rem;line-height:1.4;margin-bottom:1.3rem}
.notice .i{width:18px;height:18px;color:var(--primary);margin-top:.05rem}

/* ===== Campos ===== */
.field{margin-bottom:1.1rem}
.field.tight{margin-bottom:.9rem}
.field label{display:block;font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:.4rem}
.input{display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid var(--border);border-radius:10px;padding:0 .9rem;color:var(--text);transition:.15s}
.input:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.input input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--text);padding:.85rem 0}
.input input::placeholder{color:var(--muted)}
.input.invalid{border-color:var(--err)}
.input.invalid:focus-within{box-shadow:0 0 0 3px var(--err-soft)}
.eye{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;color:var(--primary);flex:none;margin-right:-.5rem}
.eye:hover{background:var(--bg)}
.ferr,.fhint{display:flex;align-items:flex-start;gap:.45rem;font-size:.88rem;margin-top:.45rem}
.ferr{color:var(--err);font-weight:600}
.fhint{color:var(--muted)}
.ferr:empty,.fhint:empty{display:none}
.ferr .i,.fhint .i{width:18px;height:18px;margin-top:.1rem}

/* ===== Opções, botão e rodapé ===== */
.authrow{display:flex;justify-content:space-between;align-items:center;gap:.5rem 1rem;flex-wrap:wrap;margin-bottom:1.3rem}
.check{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--text);cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--primary);cursor:pointer}
.textlink{color:var(--text);font-size:.9rem;font-weight:700;padding:.35rem 0;border-radius:6px}
.textlink:hover{text-decoration:underline;text-underline-offset:3px}
.authcard .btn{gap:.6rem;padding:.9rem 1rem;border-radius:10px;font-size:1rem}
.authcard .btn+.btn{margin-top:.8rem}
.authfoot{margin-top:2rem;text-align:center;font-size:.8rem;color:var(--muted)}
.authcard :focus-visible{outline:3px solid var(--brand-light);outline-offset:2px}
.authcard .input input:focus-visible{outline:0}