/* ============================================================
   ICDS · Autenticação (login / registro), mockup visual
   Depende de styles.css e pages.css (variáveis --ic-*, .ic-btn).
   Layout do cartão centralizado para telas de acesso.
   ============================================================ */

/* ---- Palco centralizado verticalmente ---- */
.auth-stage{background:var(--ic-gray-50);display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 220px);padding:clamp(48px,7vw,88px) 0}
.auth-stage::before{content:'';position:absolute;inset:0;background-image:radial-gradient(var(--ic-gray-200) 2px,transparent 2px);background-size:26px 26px;opacity:.5;pointer-events:none}

/* ---- Cartão ---- */
.auth-card{position:relative;z-index:1;width:100%;max-width:440px;background:#fff;border:1px solid var(--ic-gray-200);border-top:3px solid var(--ic-primary);border-radius:var(--ic-radius-card);box-shadow:var(--ic-shadow-hover);padding:clamp(30px,4vw,44px)}
.auth-card.wide{max-width:600px}

/* ---- Topo do cartão (logo + título) ---- */
.auth-head{text-align:center;margin-bottom:30px}
.auth-head .brand{height:46px;width:auto;display:inline-block;margin-bottom:22px}
.auth-head h1{font-size:1.55rem;margin-bottom:8px}
.auth-head p{font-size:var(--ic-fs-small);color:var(--ic-gray-500)}

/* ---- Campos (label acima do input) ---- */
.auth-form{display:grid;gap:18px}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.auth-field{display:grid;gap:7px}
.auth-field label{font-family:var(--ic-font-display);font-weight:600;font-size:.85rem;color:var(--ic-navy-900)}
.auth-field input,.auth-field select{width:100%;padding:13px 15px;border:1px solid var(--ic-gray-200);border-radius:var(--ic-radius-btn);background:#fff;font-family:var(--ic-font-body);font-size:.95rem;color:var(--ic-navy-900);transition:border-color var(--ic-t-fast) var(--ic-ease),box-shadow var(--ic-t-fast) var(--ic-ease)}
.auth-field input::placeholder{color:var(--ic-gray-400)}
.auth-field input:focus,.auth-field select:focus{outline:none;border-color:var(--ic-primary);box-shadow:0 0 0 3px var(--ic-primary-soft)}

/* ---- Linha auxiliar (esqueci senha / lembrar) ---- */
.auth-aux{display:flex;justify-content:flex-end;align-items:center;font-size:.85rem;margin-top:-4px}
.auth-aux a{color:var(--ic-primary);font-weight:600}
.auth-aux a:hover{color:var(--ic-primary-hover);text-decoration:underline}

/* ---- Botão full-width ---- */
.auth-form .ic-btn{width:100%;justify-content:center;margin-top:6px}

/* ---- Rodapé do cartão (troca de fluxo) ---- */
.auth-alt{text-align:center;font-size:.9rem;color:var(--ic-gray-500);margin-top:24px;padding-top:22px;border-top:1px solid var(--ic-gray-200)}
.auth-alt a{color:var(--ic-primary);font-weight:700}
.auth-alt a:hover{text-decoration:underline}

/* ---- Nota (mockup / segurança) ---- */
.auth-note{display:flex;gap:10px;align-items:flex-start;background:var(--ic-primary-soft);border-radius:var(--ic-radius-btn);padding:12px 14px;font-size:.8rem;color:var(--ic-gray-500);margin-top:20px}
.auth-note svg{width:16px;height:16px;fill:var(--ic-primary);flex:none;margin-top:2px}

@media(max-width:520px){.auth-grid{grid-template-columns:1fr}}