/* Central Fogão Mineiro · telas do hub (login e início) */

/* Estados da página */
.tela-carregando,.tela-login,.tela-inicio{display:none}
body[data-estado="carregando"] .tela-carregando{display:grid}
body[data-estado="login"] .tela-login{display:grid}
body[data-estado="inicio"] .tela-inicio{display:block}

/* Padrão decorativo: arabescos inspirados na moldura do logo */
.banner__padrao,.login-arte__padrao{
  position:absolute;inset:0;pointer-events:none;opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cpath d='M0 30c20 0 25-18 45-18 12 0 15 9 15 9s3-9 15-9c20 0 25 18 45 18M0 54c20 0 25-12 45-12 12 0 15 6 15 6s3-6 15-6c20 0 25 12 45 12' fill='none' stroke='%23FFE5C2' stroke-width='2'/%3E%3C/svg%3E");
  background-size:120px 60px;
}

/* ---------- Carregando ---------- */
.tela-carregando{min-height:100vh;place-items:center;align-content:center;gap:14px;text-align:center;color:var(--fm-suave)}
.tela-carregando img{animation:respira 1.6s ease-in-out infinite}
@keyframes respira{50%{transform:scale(.96);opacity:.75}}

/* ---------- Login ---------- */
.tela-login{min-height:100vh;grid-template-columns:1.1fr 1fr}
.login-arte{
  position:relative;overflow:hidden;display:grid;place-items:center;align-content:center;gap:18px;
  background:radial-gradient(120% 90% at 30% 20%,var(--fm-vinho-2),var(--fm-vinho) 45%,var(--fm-vinho-escuro));
}
.login-arte__logo{position:relative;width:min(380px,70%);filter:drop-shadow(0 18px 40px rgba(0,0,0,.35))}
.login-arte__frase{position:relative;margin:0;color:var(--fm-creme-logo);font:500 15px var(--fm-fonte);letter-spacing:.32em;text-transform:uppercase;opacity:.9}
.login-form{display:grid;place-items:center;padding:40px 24px}
.login-form form{width:min(380px,100%)}
.login-form h1{font-size:34px;color:var(--fm-vinho);margin-bottom:8px}
.login-form__sub{color:var(--fm-suave);margin:0 0 26px;line-height:1.5}
.login-form .fm-btn{width:100%;margin-top:6px;padding:15px}
.login-form__rodape{font-size:13px;color:var(--fm-suave);text-align:center;margin-top:18px}
.login-form__logo-mobile{display:none}

@media (max-width:820px){
  .tela-login{grid-template-columns:1fr}
  .login-arte{display:none}
  .login-form{align-content:start;padding-top:48px}
  .login-form__logo-mobile{display:block;width:150px;margin:0 auto 26px}
  .login-form h1{font-size:28px;text-align:center}
  .login-form__sub{text-align:center}
}

/* ---------- Topo ---------- */
.topo{background:#fff;border-bottom:1px solid var(--fm-linha);position:sticky;top:0;z-index:10}
.topo__linha{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.topo__marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.topo__marca span{font:600 20px var(--fm-fonte-titulo);color:var(--fm-vinho);padding-left:12px;border-left:1.5px solid var(--fm-linha)}
.topo__usuario{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--fm-suave);min-width:0}
.topo__usuario > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topo__sair{padding:9px 14px;font-size:14px}
.topo__sair svg{width:18px;height:18px}
@media (max-width:600px){#usuario-email{display:none}}

/* ---------- Banner ---------- */
.banner{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(90% 140% at 85% 30%,var(--fm-vinho-2) 0%,var(--fm-vinho) 45%,var(--fm-vinho-escuro) 100%)}
.banner__conteudo{position:relative;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:44px 0 48px}
.banner__data{margin:0 0 10px;color:var(--fm-dourado-claro);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.banner h1{font-size:clamp(30px,4.6vw,46px);color:var(--fm-creme-logo);line-height:1.08}
.banner__sub{margin:12px 0 0;max-width:46ch;color:rgba(255,255,255,.82);font-size:17px;line-height:1.5}
.banner__logo{width:min(300px,32vw);flex:none;filter:drop-shadow(0 16px 30px rgba(0,0,0,.35));transform:rotate(-3deg)}
@media (max-width:640px){
  .banner__conteudo{padding:30px 0 34px}
  .banner__logo{position:absolute;right:-46px;bottom:-34px;width:170px;opacity:.12;transform:rotate(-8deg)}
  .banner__sub{font-size:15px}
}

/* ---------- Módulos ---------- */
.modulos{padding:36px 0 20px}
.modulos__cab{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.modulos__cab h2{font-size:26px;color:var(--fm-tinta)}
.modulos__cab p{margin:0;color:var(--fm-suave);font-size:14px}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}

.card{
  position:relative;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:var(--fm-raio);
  background:#fff;box-shadow:var(--fm-sombra);text-decoration:none;color:inherit;border:1px solid transparent;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.card__topo{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card__icone{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#F7EDEE;color:var(--fm-vinho)}
.card h3{font-size:21px}
.card p{margin:0;color:var(--fm-suave);line-height:1.5;font-size:15px}
.card__abrir{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:var(--fm-vinho)}
.card__abrir svg{width:18px;height:18px;transition:transform .18s}
a.card:hover{transform:translateY(-3px);box-shadow:var(--fm-sombra-forte);border-color:rgba(184,145,87,.45)}
a.card:hover .card__abrir svg{transform:translateX(4px)}
a.card:focus-visible{outline:3px solid var(--fm-dourado);outline-offset:3px}
.card--ativo{border-top:4px solid var(--fm-vinho)}
.card--futuro{background:rgba(255,255,255,.55);box-shadow:none;border:1.5px dashed var(--fm-linha)}
.card--futuro .card__icone{background:#F1ECE6;color:var(--fm-suave)}
.card--futuro h3{color:var(--fm-suave)}

.rodape{display:flex;justify-content:space-between;gap:12px;padding:30px 0 40px;color:var(--fm-suave);font-size:13px;border-top:1px solid var(--fm-linha);margin-top:26px}