/* ===== Flow Forms — design system (espelha o Portal Gestores) ===== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

:root {
  --blue:        #2B3A8F;
  --blue-mid:    #3B4FAD;
  --blue-lt:     #E8ECFA;
  --white:       #FFFFFF;
  --gray-1:      #F8F9FC;
  --gray-3:      #D8DCF0;
  --text:        #1A1F3C;
  --muted:       #6B7494;
  --border:      rgba(43,58,143,0.10);
  --shadow-h:    0 8px 32px rgba(43,58,143,0.15);
  --red:         #DC2626;
  --red-lt:      #FEF2F2;
  --green:       #15803D;
  --green-lt:    #F0FDF4;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'DM Sans',sans-serif; background:var(--gray-1); color:var(--text);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}

/* Header */
header {
  background:var(--white); border-bottom:1px solid var(--border);
  padding:0 32px; display:flex; align-items:center; justify-content:space-between;
  height:68px; position:sticky; top:0; z-index:100;
}
.logo { display:flex; align-items:center; gap:12px; }
.logo img { height:36px; width:auto; display:block; }
.logo-fallback { font-size:20px; font-weight:600; color:var(--blue); letter-spacing:-.5px; }
.logo-divider { width:1px; height:22px; background:var(--gray-3); }
.logo-sub { font-size:13px; font-weight:500; color:var(--blue); }
.header-badge { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:var(--blue); }

/* Layout */
main { max-width:680px; margin:0 auto; padding:40px 24px 80px; }
.form-head { margin-bottom:28px; }
.form-head .label { font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--blue-mid); opacity:.7; margin-bottom:8px; }
.form-head h1 { font-size:24px; font-weight:500; letter-spacing:-.5px; }
.form-head p { font-size:14px; color:var(--muted); font-weight:300; margin-top:6px; }

/* Card */
.card {
  background:var(--white); border:1px solid var(--border); border-radius:14px;
  padding:28px; box-shadow:0 2px 12px rgba(43,58,143,.05);
}

/* Fields */
.field { margin-bottom:18px; }
.field:last-child { margin-bottom:0; }
.field label { display:block; font-size:13px; font-weight:500; margin-bottom:7px; }
.field label .req { color:var(--red); margin-left:2px; }
.field .hint { font-size:11px; color:var(--muted); font-weight:300; margin-top:5px; }

.control {
  width:100%; font-family:'DM Sans',sans-serif; font-size:14px; color:var(--text);
  background:var(--gray-1); border:1px solid var(--border); border-radius:9px;
  padding:11px 13px; transition:border-color .15s, box-shadow .15s, background .15s;
}
.control:focus {
  outline:none; border-color:var(--blue-mid); background:var(--white);
  box-shadow:0 0 0 3px rgba(43,58,143,.10);
}
.control::placeholder { color:#A6ADC8; }
textarea.control { resize:vertical; min-height:88px; }
select.control { appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%236B7494' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:34px;
}

/* file */
.file-wrap { position:relative; }
.file-wrap input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.file-box {
  display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted);
  background:var(--gray-1); border:1px dashed var(--gray-3); border-radius:9px; padding:11px 13px;
  transition:border-color .15s, color .15s;
}
.file-wrap:hover .file-box { border-color:var(--blue-mid); color:var(--blue); }
.file-box.has-file { color:var(--green); border-style:solid; border-color:rgba(21,128,61,.3); background:var(--green-lt); }
.file-box .ico { font-size:16px; }

/* grid for short fields */
.row { display:grid; gap:14px; grid-template-columns:1fr 1fr; }
@media (max-width:560px){ .row { grid-template-columns:1fr; } header{padding:0 16px} .logo-sub{display:none} main{padding:24px 14px 60px} .card{padding:20px} }

/* validation */
.control.invalid, .file-box.invalid { border-color:var(--red); box-shadow:0 0 0 3px rgba(220,38,38,.08); }
.field .err { display:none; font-size:11px; color:var(--red); margin-top:5px; font-weight:500; }
.field.show-err .err { display:block; }

/* conditional blocks */
.conditional { display:none; }
.conditional.open { display:block; }
.subblock {
  margin-top:16px; padding:18px; border:1px solid var(--border);
  border-radius:11px; background:var(--gray-1);
}
.subblock-title { font-size:12px; font-weight:600; letter-spacing:.3px; color:var(--blue-mid); margin-bottom:14px; text-transform:uppercase; }

/* submit */
.actions { margin-top:24px; }
.btn-submit {
  width:100%; font-family:'DM Sans',sans-serif; font-size:15px; font-weight:500;
  color:#fff; background:var(--blue); border:none; border-radius:10px;
  padding:14px; cursor:pointer; transition:background .15s, transform .1s;
}
.btn-submit:hover { background:var(--blue-mid); }
.btn-submit:active { transform:translateY(1px); }
.btn-submit:disabled { opacity:.6; cursor:default; }
.spin { display:inline-block; animation:spin 1s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* success / error */
.form-msg { display:none; text-align:center; padding:48px 24px; }
.form-msg.show { display:block; }
.form-msg .ico { font-size:46px; }
.form-msg h2 { font-size:20px; font-weight:500; margin:14px 0 6px; }
.form-msg p { font-size:14px; color:var(--muted); font-weight:300; }
.form-msg.error h2 { color:var(--red); }
.btn-ghost {
  margin-top:20px; display:inline-flex; align-items:center; gap:6px;
  background:var(--blue-lt); border:1px solid rgba(43,58,143,.2); border-radius:9px;
  padding:9px 16px; font-size:13px; font-weight:500; color:var(--blue);
  cursor:pointer; font-family:'DM Sans',sans-serif;
}
.btn-ghost:hover { background:var(--blue); color:#fff; }

footer { text-align:center; color:var(--muted); font-size:11px; margin-top:40px; font-weight:300; }