/* VERSAO v3 · painel: telas de acesso e moldura */
:root {
  --tinta: #16181D; --apagado: #5B6070; --linha: #E3E3DE; --fundo: #F7F7F5;
  --azul: #1D4F9C; --azul-hover: #163E7B; --erro: #9A3412; --erro-fundo: #FDE4D8;
  --aviso-fundo: #E8EEF8; --quadra: #15263D; --painel: #EEF1F6;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif; color: var(--tinta); background: var(--fundo); font-size: 16px; line-height: 1.5; }
a { color: var(--azul); }
a:hover { color: var(--azul-hover); }

/* fundo das telas de acesso: quadra de futsal desenhada */
.fundo-quadra { min-height: 100vh; background: var(--quadra); display: flex; align-items: center; justify-content: center; padding: 24px 16px; position: relative; overflow: hidden; }
.quadra { position: absolute; inset: 0; width: 100%; height: 100%; }
.quadra rect, .quadra line, .quadra circle, .quadra path { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 0.8; }
.quadra .ponto { fill: rgba(255, 255, 255, 0.16); }

.cartao { position: relative; width: 100%; max-width: 920px; min-height: 480px; display: grid; grid-template-columns: 1fr 1fr; background: #FFFFFF; border-radius: 8px; overflow: hidden; }
.cartao.simples { max-width: 480px; min-height: 0; grid-template-columns: 1fr; }
.marca { background: var(--painel); padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; }
.marca p { margin: 0; }
.bemvindo { font-size: 20px; font-weight: 600; color: var(--azul); }
.logo { width: 132px; height: auto; margin: 0 0 20px; }
.logo ~ .nome { font-size: 32px; }
.nome { font-size: 44px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.sub { margin-top: 8px !important; color: var(--apagado); }
.rodape-marca { position: absolute; bottom: 24px; left: 0; right: 0; font-size: 13px; color: var(--apagado); }

.formulario { padding: 48px 56px; display: flex; flex-direction: column; justify-content: center; }
.formulario h1 { margin: 0 0 24px; font-size: 28px; font-weight: 700; color: var(--azul); text-align: center; }
.formulario p { margin: 0 0 16px; color: #3A3F4B; }
form { display: flex; flex-direction: column; }
label { font-size: 14px; font-weight: 500; margin: 0 0 6px; }
input { height: 46px; padding: 0 14px; margin: 0 0 16px; border: 1px solid #C9CCD3; border-radius: 6px; font: inherit; background: #FFFFFF; color: var(--tinta); }
input:focus { outline: 3px solid rgba(29, 79, 156, 0.35); outline-offset: 1px; border-color: var(--azul); }
button { height: 48px; border: 0; border-radius: 6px; background: var(--azul); color: #FFFFFF; font: 600 16px Inter, "Segoe UI", Arial, sans-serif; cursor: pointer; margin-top: 4px; }
button:hover { background: var(--azul-hover); }
button:focus-visible { outline: 3px solid rgba(29, 79, 156, 0.45); outline-offset: 2px; }
.esqueci { display: block; text-align: center; margin-top: 16px; font-size: 14px; }
.msg { margin: 0 0 16px !important; padding: 10px 12px; border-radius: 6px; font-size: 14px; }
.msg.erro { background: var(--erro-fundo); color: var(--erro) !important; }
.msg.aviso { background: var(--aviso-fundo); color: var(--azul) !important; }

/* moldura das telas internas */
.topo { height: 60px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; background: #FFFFFF; border-bottom: 1px solid var(--linha); gap: 16px; flex-wrap: wrap; }
.topo-dir { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--apagado); }
.topo-dir form { display: inline; }
button.link { height: auto; padding: 0; margin: 0; background: none; color: var(--azul); font: inherit; text-decoration: underline; }
.conteudo { max-width: 1200px; margin: 0 auto; padding: 32px 24px; }
.modulos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--linha); }
.modulos li { border-bottom: 1px solid var(--linha); }
.modulos a { display: block; padding: 16px 0; font-size: 18px; font-weight: 500; text-decoration: none; }

@media (max-width: 760px) {
  .cartao { grid-template-columns: 1fr; min-height: 0; }
  .marca { padding: 28px 24px 24px; }
  .nome { font-size: 34px; }
  .logo { width: 96px; margin: 0 0 12px; }
  .logo ~ .nome { font-size: 26px; }
  .rodape-marca { position: static; margin-top: 8px !important; }
  .formulario { padding: 28px 24px 32px; }
}