/* =====================================================================
 *  brand.css — Identidade visual Fleming (Manual da Marca — KWB)
 *  Fonte única de verdade do design. Toda tela do app deve linká-lo:
 *      <link rel="stylesheet" href="/brand.css">
 *
 *  Padrão oficial do manual:
 *    - Cor principal : #645FAA  (Pantone 7669 C)
 *    - Cor de apoio  : #BCBEC0  (Pantone Cool Gray 4 C)
 *    - Tipografia    : Montserrat
 *    - Slogan        : "Dedicação à Vida"
 *  (substitui os valores antigos do app: #6B4FA0 + DM Sans)
 * ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root{
  /* ---- Cores da marca ---- */
  --fl-roxo:#645FAA;            /* principal */
  --fl-roxo-esc:#4E4A87;        /* hover / gradiente */
  --fl-roxo-claro:#8F8BC4;      /* realces */
  --fl-roxo-bg:#F4F3F9;         /* fundo tingido */
  --fl-roxo-suave:#EDEBF6;      /* bordas/preenchimentos leves */
  --fl-cinza:#BCBEC0;           /* apoio (Cool Gray 4 C) */
  --fl-cinza-txt:#6B6D75;       /* texto secundário */
  --fl-texto:#3A3A44;           /* texto principal */
  --fl-branco:#fff;

  /* ---- Semânticas ---- */
  --fl-erro:#C62828;   --fl-erro-bg:#FDECEC;   --fl-erro-bd:#F5C6C6;
  --fl-ok:#2E7D32;     --fl-ok-bg:#E9F6EA;     --fl-ok-bd:#BBE0BD;
  --fl-aviso:#B26A00;  --fl-aviso-bg:#FFF4E5;  --fl-aviso-bd:#F5D9A8;

  /* ---- Forma / elevação ---- */
  --fl-radius:16px;
  --fl-radius-sm:10px;
  --fl-borda:#E3E1EE;
  --fl-sombra:0 18px 50px rgba(80,74,135,.18);
  --fl-sombra-sm:0 4px 14px rgba(80,74,135,.10);
  --fl-fonte:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--fl-fonte);color:var(--fl-texto)}

/* ===== Fundo padrão das telas ===== */
.fl-bg{
  min-height:100%;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(100,95,170,.20), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(100,95,170,.14), transparent 55%),
    var(--fl-roxo-bg);
}

/* ===== Marca ===== */
.fl-wordmark{font-weight:700;letter-spacing:.14em;color:var(--fl-cinza-txt);line-height:1}
.fl-subttl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fl-cinza)}
.fl-slogan{font-size:12px;font-style:italic;color:var(--fl-roxo);font-weight:500}
.fl-logo{filter:drop-shadow(0 6px 14px rgba(100,95,170,.35))}

/* ===== Cartão ===== */
.fl-card{
  background:var(--fl-branco);border-radius:var(--fl-radius);
  box-shadow:var(--fl-sombra);position:relative;overflow:hidden;
}
.fl-card--topo::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;
  background:linear-gradient(90deg,var(--fl-roxo),var(--fl-roxo-claro));}

/* ===== Formulário ===== */
.fl-field{margin-bottom:16px}
.fl-label{display:block;font-size:12px;font-weight:600;color:var(--fl-cinza-txt);margin:0 0 6px}
.fl-input{
  width:100%;padding:12px 14px;border:1.5px solid var(--fl-borda);border-radius:var(--fl-radius-sm);
  font-family:inherit;font-size:14px;color:var(--fl-texto);background:#FBFBFE;
  transition:border-color .15s,box-shadow .15s;
}
.fl-input:focus{outline:none;border-color:var(--fl-roxo);box-shadow:0 0 0 3px rgba(100,95,170,.15)}

/* ===== Botões ===== */
.fl-btn{
  width:100%;padding:13px;border:none;border-radius:var(--fl-radius-sm);cursor:pointer;
  background:var(--fl-roxo);color:#fff;font-family:inherit;font-size:14px;font-weight:600;letter-spacing:.02em;
  transition:background .15s,transform .05s;
}
.fl-btn:hover{background:var(--fl-roxo-esc)}
.fl-btn:active{transform:translateY(1px)}
.fl-btn:disabled{opacity:.6;cursor:not-allowed}
.fl-btn--sec{background:#fff;color:var(--fl-roxo);border:1.5px solid var(--fl-roxo)}
.fl-btn--sec:hover{background:var(--fl-roxo-bg)}

/* ===== Mensagens ===== */
.fl-msg{font-size:12.5px;padding:10px 12px;border-radius:9px;margin-bottom:16px;display:none}
.fl-msg--erro{display:block;background:var(--fl-erro-bg);color:var(--fl-erro);border:1px solid var(--fl-erro-bd)}
.fl-msg--ok{display:block;background:var(--fl-ok-bg);color:var(--fl-ok);border:1px solid var(--fl-ok-bd)}
.fl-msg--aviso{display:block;background:var(--fl-aviso-bg);color:var(--fl-aviso);border:1px solid var(--fl-aviso-bd)}

/* ===== Elementos ===== */
.fl-tag{display:inline-block;background:var(--fl-roxo);color:#fff;font-size:10px;font-weight:700;
  padding:2px 9px;border-radius:20px;letter-spacing:.04em;text-transform:uppercase}
.fl-avatar{width:60px;height:60px;border-radius:50%;background:var(--fl-roxo);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700}