/* Visual da Lumi Gestão. Cores e fontes só nestas variáveis: o futuro design system troca aqui. */
:root {
  --rosa: #EC268F;
  --rosa-escuro: #C81E78;
  --rosa-texto: #A8186A; /* rosa para texto e avatar: AA sobre --rosa-claro e --fundo */
  --rosa-claro: #FCE4F0;
  --grafite: #373435;
  --cinza: #6E6A6B;
  --linha: #E7E2E4;
  --borda-campo: #8F8A8C; /* contorno de campo precisa de 3:1 contra o branco */
  --fundo: #FAF7F8;
  --branco: #FFFFFF;
  --apagado: #F0EEEF;
  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte);
  color: var(--grafite);
  background: var(--fundo);
  line-height: 1.4;
}

a { color: var(--rosa-texto); }
h1 { margin: 0; font-size: 22px; }
.sub { margin: 4px 0 22px; color: var(--cinza); font-size: 14px; }

/* Páginas sem conta (erros fora da sessão) não têm a .lg-corpo, mas precisam de respiro. */
main:not(.lg-corpo):not(:has(.lg-login)) { padding: 28px 16px; max-width: 640px; margin: 0 auto; }

/* Formulários */
label { display: block; font-size: 12px; font-weight: 600; margin: 12px 0 4px; }
input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borda-campo);
  border-radius: 8px;
  font: inherit;
  font-size: 16px; /* 16px evita o zoom automático do iPhone ao focar */
  color: var(--grafite);
  background: var(--branco);
}
input:focus { outline: 2px solid var(--rosa); outline-offset: 1px; border-color: var(--rosa); }
.btn {
  width: 100%;
  margin-top: 18px;
  padding: 11px;
  border: 0;
  border-radius: 8px;
  background: var(--rosa-escuro);
  color: var(--branco);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.btn:hover { background: var(--rosa-texto); }
.btn:focus-visible { outline: 2px solid var(--grafite); outline-offset: 2px; }
.ajuda { margin: 12px 0 0; font-size: 12px; color: var(--cinza); text-align: center; }
.lg-erro {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--rosa-claro);
  color: var(--rosa-texto);
  font-size: 13px;
  font-weight: 600;
}

/* Login: painel grafite com arcos rosa à esquerda, formulário com o logo à direita */
.lg-login { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.lg-arte {
  background: var(--grafite);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 48px;
}
.lg-arte::before, .lg-arte::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 28px solid var(--rosa);
  opacity: .9;
}
.lg-arte::before { width: 300px; height: 300px; right: -90px; top: -90px; }
.lg-arte::after { width: 180px; height: 180px; left: -60px; bottom: -60px; opacity: .35; }
.lg-arte p { color: var(--branco); font-size: 24px; line-height: 1.4; margin: 0; position: relative; max-width: 320px; }
.lg-form { display: flex; align-items: center; justify-content: center; padding: 32px 16px; background: var(--branco); }
.lg-form form { width: 100%; max-width: 320px; }
.lg-form img { width: 190px; max-width: 100%; height: auto; display: block; margin: 0 0 26px; }
.lg-form h1 { margin: 0 0 4px; font-size: 20px; }
.lg-form .sub { margin: 0 0 20px; font-size: 13px; }

@media (max-width: 759px) {
  .lg-login { grid-template-columns: 1fr; }
  .lg-arte { display: none; }
}

/* Barra superior das páginas logadas */
.lg-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 28px;
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
}
.lg-topo img { height: 34px; width: auto; display: block; }
.lg-user { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; }
.lg-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--rosa-claro);
  color: var(--rosa-texto);
  display: grid;
  place-items: center;
  font-weight: 700;
}
.lg-user a, .lg-user button { color: var(--cinza); font: inherit; font-size: 13px; }
.lg-user form { margin: 0; }
.lg-user button { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.lg-user a:hover, .lg-user button:hover { color: var(--rosa-texto); }

/* Corpo das páginas logadas */
.lg-corpo { padding: 28px; max-width: 1100px; }
.lg-corpo > form { max-width: 360px; margin-top: 8px; }
.lg-corpo > form h1 { margin-bottom: 4px; }

/* Grade de módulos da tela inicial */
.lg-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 14px; }
.lg-card {
  display: block;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-top: 4px solid var(--rosa);
  border-radius: 12px;
  padding: 18px;
  color: inherit;
  text-decoration: none;
}
a.lg-card:hover { border-color: var(--rosa); }
a.lg-card:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; }
.lg-card h2 { margin: 10px 0 4px; font-size: 16px; }
.lg-card p { margin: 0; color: var(--cinza); font-size: 13px; line-height: 1.4; }
.lg-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--rosa-claro);
  color: var(--rosa-texto);
  display: grid;
  place-items: center;
  font-size: 18px;
}
.lg-tag {
  display: inline-block;
  margin-top: 12px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--rosa-claro);
  color: var(--rosa-texto);
  font-weight: 600;
}
/* "Em breve" apagado sem opacidade, para o texto manter o contraste AA. */
.lg-card.breve { background: var(--fundo); border-style: dashed; border-top-style: solid; border-top-color: var(--linha); }
.lg-card.breve h2 { color: var(--cinza); }
.lg-card.breve .lg-ico, .lg-card.breve .lg-tag { background: var(--apagado); color: var(--cinza); }
.lg-card.breve .lg-ico { filter: grayscale(1); opacity: .5; } /* ícone decorativo (aria-hidden): pode apagar sem regra de contraste */

@media (max-width: 759px) {
  .lg-topo { padding: 12px 16px; }
  .lg-corpo { padding: 22px 16px; }
}