/* ============================================================
   TODOS PROTEGIDOS — App do Associado · shell + componentes
   Dialeto consumer da marca (mockup 2026-07-16-app-associado):
   teal protagonista, chrome claro, hero no teal de assinatura —
   nada do visual do backoffice (split índigo, tabs sublinhados).
   Depende de ./tokens.css. Primitivos (.btn, .input, .field,
   .link, .micro) idênticos ao andaime canônico do DS.
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:var(--font-family-body);font-size:var(--font-size-base);
  color:var(--color-text-body);background:var(--color-bg-canvas);
  line-height:var(--line-height-normal);-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}

/* ---------- PRIMITIVOS (andaime canônico do DS) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--control-height-md);padding:0 var(--space-5);border-radius:var(--border-radius-md);border:1px solid transparent;font-family:var(--font-family-body);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--duration-fast) var(--easing-default);white-space:nowrap;}
.btn:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.btn-teal{background:var(--color-accent-teal);color:var(--color-text-on-teal);font-weight:var(--font-weight-bold);box-shadow:var(--shadow-glow-teal);}
.btn-teal:hover{background:var(--color-accent-teal-hover);transform:translateY(-1px);}
.btn-secondary{background:var(--color-bg-primary);color:var(--color-text-primary);border-color:var(--color-border-strong);}
.btn-secondary:hover{background:var(--color-bg-hover);border-color:var(--color-text-tertiary);}
.btn:disabled{background:var(--color-bg-tertiary);color:var(--color-text-tertiary);border-color:transparent;box-shadow:none;cursor:not-allowed;transform:none;}
.btn-block{width:100%;}

.input{height:var(--control-height-md);width:100%;padding:0 var(--space-4);background:var(--color-bg-primary);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-md);color:var(--color-text-primary);font-family:var(--font-family-body);font-size:var(--font-size-base);transition:all var(--duration-fast) var(--easing-default);}
.input::placeholder{color:var(--color-text-tertiary);}
.input:focus{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus);}
.input.invalid{border-color:var(--color-status-error);}
.input.invalid:focus{border-color:var(--color-status-error);box-shadow:var(--shadow-focus-error);}

.field label{display:block;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:var(--space-2);}
.field .dica{font-size:var(--font-size-xs);color:var(--color-text-tertiary);margin-top:var(--space-2);}
.field-msg{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);font-size:var(--font-size-xs);color:var(--color-status-error);}
.field-msg:empty{display:none;}

/* Links — EXCEÇÃO do dialeto (aprovada 08/08/2026, mockup 2026-08-08-links-teal-
   app-associado): no app do associado o link é o teal de assinatura legível
   (--color-accent-teal-strong: escurece no claro, clareia no escuro), semibold,
   hover por sublinhado — o azul royal de link é idioma do backoffice. */
.link{color:var(--color-accent-teal-strong);font-weight:var(--font-weight-semibold);cursor:pointer;border-radius:var(--border-radius-xs);transition:color var(--duration-fast) var(--easing-default);}
.link:hover{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px;}
.link:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.link-inline{color:var(--color-accent-teal-strong);font-weight:var(--font-weight-semibold);cursor:pointer;border-radius:var(--border-radius-xs);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb, var(--color-accent-teal-strong) 45%, transparent);transition:text-decoration-color var(--duration-fast) var(--easing-default);}
.link-inline:hover{text-decoration-color:currentColor;}
.link-inline:focus-visible{outline:none;box-shadow:var(--shadow-focus);}

.micro{font-family:var(--font-family-mono);font-size:var(--font-size-2xs);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--color-text-tertiary);}
.mono{font-family:var(--font-family-mono);}

/* ============================================================
   LOGIN — tela 01 do mockup do app (identidade do associado:
   hero no teal de assinatura, texto índigo-sobre-teal, igual
   nos dois temas). Mobile-first; ≥1024px vira o split próprio
   do app (dk-login do mockup — não é o split do backoffice).
   ============================================================ */
.login{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;}

.login-hero{background:linear-gradient(165deg,var(--color-accent-teal),var(--color-accent-teal-hover));color:var(--color-text-on-teal);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-10) var(--space-6) var(--space-8);flex:none;position:relative;overflow:hidden;}
.login-hero>*{position:relative;}
.login-hero .wm{position:absolute;right:-110px;top:-40px;width:320px;height:320px;opacity:.12;color:var(--color-text-on-teal);pointer-events:none;}
.login-hero .brand{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);}
.login-hero .mk{width:64px;height:64px;flex:none;}
.login-hero .brand-txt{text-align:center;}
.login-hero .bn{font-family:var(--font-family-display);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-tight);color:var(--color-text-on-teal);}
.login-hero .tag{font-family:var(--font-family-mono);font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;color:var(--color-text-on-teal);opacity:.78;}
.login-hero .mid{display:none;}
.login-hero>.micro{display:none;}

.login .fx{flex:1;display:flex;justify-content:center;padding:var(--space-6) var(--space-5) var(--space-5);background:var(--color-bg-canvas);}
.login .fbox{width:min(360px,100%);display:flex;flex-direction:column;gap:var(--space-5);}
.login .tt{font-family:var(--font-family-display);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-tight);}
.login .hint{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-top:var(--space-1);}
.login .field-acao{text-align:right;margin-top:var(--space-2);}
.login .field-acao .link{font-size:var(--font-size-sm);}
.login .alt{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center;}
/* desfecho local do envio (aria-live) — texto neutro, sem bloco tingido */
.login .aviso{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center;line-height:var(--line-height-snug);}
.login .aviso.erro{color:var(--color-status-error);}
.login .aviso:empty{display:none;}
.login .m-foot{margin-top:auto;padding-top:var(--space-4);text-align:center;}
[hidden]{display:none !important;}

/* DESFECHO — estado de resultado das telas de acesso (mockup 2026-08-10):
   superfície neutra, status só no ícone — nunca callout tingido. */
.desfecho{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3);padding-top:var(--space-6);}
.desfecho .ico{width:56px;height:56px;border-radius:var(--border-radius-full);background:var(--color-bg-primary);border:1px solid var(--color-border-primary);display:flex;align-items:center;justify-content:center;color:var(--color-accent-teal-strong);box-shadow:var(--shadow-sm);flex:none;}
.desfecho .ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.desfecho .ico.off{color:var(--color-text-tertiary);}
.desfecho .tt{font-family:var(--font-family-display);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-tight);}
.desfecho .tx{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);max-width:30ch;}
.desfecho .tx strong{color:var(--color-text-primary);font-weight:var(--font-weight-semibold);}

@media (min-width:1024px){
  /* footprint do mockup (dk-login): o split NÃO é full-bleed — vira um cartão
     de até 1120px centrado no canvas, com a moldura do DS (borda + sombra + raio) */
  body{display:grid;place-items:center;min-height:100vh;padding:var(--space-8);}
  .login{display:grid;grid-template-columns:1fr 1.2fr;min-height:540px;width:min(1120px,100%);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;}
  .login-hero{align-items:stretch;justify-content:flex-start;padding:var(--space-8);}
  .login-hero .wm{top:auto;bottom:-100px;right:-120px;width:380px;height:380px;}
  .login-hero .brand{flex-direction:row;align-items:center;}
  .login-hero .mk{width:40px;height:40px;}
  .login-hero .brand-txt{text-align:left;}
  .login-hero .bn{font-size:var(--font-size-md);}
  .login-hero .tag{margin-top:2px;}
  .login-hero .mid{display:block;margin-block:auto;}
  .login-hero .mid h1{font-family:var(--font-family-display);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-tight);line-height:var(--line-height-snug);max-width:18ch;color:var(--color-text-on-teal);}
  .login-hero .mid .sub{font-size:var(--font-size-sm);color:var(--color-text-on-teal);opacity:.75;margin-top:var(--space-3);max-width:36ch;line-height:var(--line-height-relaxed);}
  .login-hero>.micro{display:block;color:var(--color-text-on-teal);opacity:.65;}
  .login .fx{align-items:center;padding:var(--space-8);}
  .login .fbox{gap:var(--space-4);}
  .login .m-foot{display:none;}
}