/* ═══════════════════════════════════════════════════════════
   FECAP — Projetos de IC · styles.css v2
   Paleta: #123228 · #67E08F · #EFF4F1 · #fff · #000
   Tipografia: Inter + DM Sans (sem serifa, moderna)
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── TOKENS ──────────────────────────────────────────── */
:root {
  /* Paleta FECAP */
  --verde:       #123228;
  --verde-m:     #1a4a38;
  --verde-l:     #1f5c45;
  --vivo:        #67E08F;
  --vivo-d:      #4ecb78;
  --vivo-xl:     #c8f5da;
  --fundo:       #EFF4F1;
  --branco:      #ffffff;
  --preto:       #0a1a10;

  /* Texto */
  --txt:         #0e2018;
  --txt-m:       #2c4a3a;
  --txt-l:       #587868;
  --txt-s:       #8aaa96;

  /* Bordas */
  --brd:         #c0d8cc;
  --brd-l:       #d8eadf;

  /* Status */
  --ok:    #1a7a4a; --ok-bg:   #e6f7ee;
  --warn:  #a06010; --warn-bg: #fdf3e3;
  --err:   #b01a1a; --err-bg:  #fde8e8;
  --info:  #0d5c8a; --info-bg: #e3f2fd;

  /* Fundos */
  --bg-pg:   #eef4f0;
  --bg-side: #ffffff;
  --bg-main: #ffffff;
  --bg-pnl:  #EFF4F1;
  --bg-hdr:  #123228;

  /* Tipografia */
  --f-ui:   'Inter', system-ui, sans-serif;
  --f-body: 'DM Sans', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', monospace;

  /* Escala */
  --t-xs: .70rem; --t-sm: .875rem; --t-base: 1rem;
  --t-md: 1.0625rem; --t-lg: 1.25rem; --t-xl: 1.5rem;
  --t-2xl: 1.875rem; --t-3xl: 2.25rem;

  /* Espaço */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.25rem; --s6:1.5rem; --s8:2rem; --s10:2.5rem;

  /* Raios */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px;

  /* Sombras */
  --sh-sm: 0 1px 4px rgba(18,50,40,.08);
  --sh-md: 0 4px 14px rgba(18,50,40,.10);
  --sh-lg: 0 10px 32px rgba(18,50,40,.13);
  --sh-xl: 0 20px 56px rgba(18,50,40,.18);

  /* Layout */
  --nav-w:  264px;
  --feed-w: 280px;
  --hdr-h:  58px;
  --tr: .17s ease;
}

/* ─── RESET ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;height:100%}
body{
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:1.65;
  color:var(--txt);
  background:var(--bg-pg);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{font-family:var(--f-ui);line-height:1.25;color:var(--verde);font-weight:700}
a{color:var(--verde);text-underline-offset:3px;transition:color var(--tr)}
a:hover{color:var(--ok)}
img{max-width:100%;display:block}

/* Scrollbars finas */
*{scrollbar-width:thin;scrollbar-color:var(--brd) transparent}
*::-webkit-scrollbar{width:5px;height:5px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--brd);border-radius:3px}
*::-webkit-scrollbar-thumb:hover{background:var(--vivo-d)}

/* ─── HEADER ──────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--bg-hdr);
  border-bottom:3px solid var(--vivo);
  box-shadow:0 2px 18px rgba(18,50,40,.32);
  height:var(--hdr-h);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--s6);height:100%;gap:var(--s4);
}
.header-brand{display:flex;align-items:center;gap:var(--s4)}

/* Logo — branco sobre fundo escuro */
.brand-logo{
  height:30px;width:auto;display:block;
  /* logo-branco.png já é branco, mas aplicamos filtro por segurança */
  filter:brightness(0) invert(1);
  object-fit:contain;
}

.brand-sep{width:1px;height:24px;background:rgba(255,255,255,.18)}
.brand-text{display:flex;flex-direction:column;gap:1px}
.brand-text strong{
  font-family:var(--f-ui);font-size:.78rem;font-weight:600;
  color:rgba(255,255,255,.95);line-height:1.2;
}
.brand-text span{
  font-size:.60rem;color:var(--vivo);
  letter-spacing:.09em;text-transform:uppercase;font-weight:500;
}
.header-actions{display:flex;align-items:center;gap:var(--s2)}

/* ─── LAYOUT 3 COLUNAS ────────────────────────────────── */
/* Cada coluna rola de forma independente */
.app-layout{
  display:grid;
  grid-template-columns:var(--nav-w) 1fr var(--feed-w);
  height:calc(100vh - var(--hdr-h));
  overflow:hidden;
}

/* ─── SIDEBAR ESQUERDA ────────────────────────────────── */
.sidebar-nav{
  background:var(--bg-side);
  border-right:1px solid var(--brd-l);
  height:100%;overflow-y:auto;
  display:flex;flex-direction:column;
}
.sidebar-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4) var(--s4) var(--s3);
  border-bottom:1px solid var(--brd-l);
  position:sticky;top:0;background:var(--bg-side);z-index:2;
}
.sidebar-title{
  font-family:var(--f-ui);font-size:.65rem;font-weight:700;
  color:var(--txt-l);text-transform:uppercase;letter-spacing:.12em;
}
.btn-hamburger{
  background:none;border:none;cursor:pointer;
  color:var(--txt-l);padding:var(--s1);
  border-radius:var(--r-sm);display:none;
  transition:color var(--tr);
}
.btn-hamburger:hover{color:var(--verde)}

/* Progresso */
.progress-wrap{
  padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--brd-l);
}
.progress-row{
  display:flex;justify-content:space-between;
  font-family:var(--f-ui);font-size:var(--t-xs);
  color:var(--txt-l);margin-bottom:var(--s2);font-weight:500;
}
.progress-track{height:4px;background:var(--brd-l);border-radius:2px;overflow:hidden}
.progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--verde) 0%,var(--vivo) 100%);
  border-radius:2px;transition:width .5s cubic-bezier(.4,0,.2,1);
}

/* Itens de nav */
#step-nav{flex:1;padding:var(--s2) var(--s2) var(--s8)}
.step-nav-item{
  display:flex;align-items:center;gap:var(--s3);
  padding:9px var(--s3);border-radius:var(--r-md);
  cursor:pointer;border:none;background:none;width:100%;
  text-align:left;color:var(--txt-m);
  font-family:var(--f-body);font-size:var(--t-sm);
  line-height:1.3;margin-bottom:1px;font-weight:400;
  transition:background var(--tr),color var(--tr);
}
.step-nav-item:hover{background:var(--fundo);color:var(--verde)}
.step-nav-item.active{background:var(--verde);color:#fff;font-weight:600}
.step-nav-item.active .step-num{color:var(--vivo)}
.step-nav-item.completed{color:var(--txt)}
.step-nav-item.completed .step-num{color:var(--ok)}
.step-num{
  font-family:var(--f-mono);font-size:.68rem;font-weight:500;
  min-width:20px;color:var(--brd);transition:color var(--tr);flex-shrink:0;
}
.step-label{flex:1}
.step-check{width:13px;height:13px;opacity:0;flex-shrink:0;color:var(--ok);transition:opacity var(--tr)}
.step-nav-item.completed .step-check{opacity:1}

/* ─── CONTEÚDO PRINCIPAL ─────────────────────────────── */
.content-main{
  background:var(--bg-main);
  padding:var(--s10) var(--s10);
  overflow-y:auto;      /* rola independentemente */
  overflow-x:hidden;
  height:100%;
}

/* Cabeçalho da etapa */
.step-header{
  margin-bottom:var(--s8);
  padding-bottom:var(--s5);
  border-bottom:2px solid var(--brd-l);
  position:relative;
}
.step-header::after{
  content:'';position:absolute;bottom:-2px;left:0;
  width:44px;height:2px;background:var(--vivo);
}
.step-badge{
  display:inline-flex;align-items:center;
  font-family:var(--f-ui);font-size:.62rem;font-weight:700;
  color:var(--verde);background:var(--fundo);
  padding:3px 10px;border-radius:20px;
  border:1px solid var(--brd);margin-bottom:var(--s3);
  letter-spacing:.07em;text-transform:uppercase;
}
.step-title{
  font-family:var(--f-ui);font-size:var(--t-2xl);
  font-weight:800;color:var(--verde);
  margin-bottom:var(--s2);line-height:1.15;letter-spacing:-.02em;
}
.step-subtitle{font-size:var(--t-md);color:var(--txt-l);font-weight:400}

/* Corpo da etapa */
.step-body{max-width:700px}

/* ── Blocos de conteúdo ─────────────────────────────── */

/* Pedagógico — sem altura fixa, sem overflow hidden */
.block-pedagogic{
  background:var(--fundo);
  border:1px solid var(--brd);
  border-left:4px solid var(--verde);
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  padding:var(--s5);margin-bottom:var(--s5);
}
.block-pedagogic h4{
  font-family:var(--f-ui);font-size:var(--t-sm);font-weight:700;
  color:var(--verde);margin-bottom:var(--s3);
}
.block-pedagogic p,.block-pedagogic li{
  font-size:var(--t-sm);color:var(--txt-m);line-height:1.78;
}
.block-pedagogic ul,.block-pedagogic ol{padding-left:var(--s5);margin-top:var(--s2)}
.block-pedagogic li{margin-bottom:var(--s1)}

/* Exemplo */
.block-example{
  background:#f0faf4;
  border:1px solid #b0e8c4;
  border-left:4px solid var(--vivo-d);
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  padding:var(--s5);margin-bottom:var(--s5);
}
.block-example h4{
  font-family:var(--f-ui);font-size:.65rem;font-weight:700;
  color:var(--ok);text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:var(--s3);display:flex;align-items:center;gap:var(--s2);
}
.block-example ul{list-style:none;padding:0;margin-top:var(--s2)}
.block-example li,.block-example p{
  font-size:var(--t-sm);color:var(--txt-m);line-height:1.78;
}
.example-quote{
  font-style:italic;
  border-left:2px solid var(--vivo);
  padding-left:var(--s4);
  margin:var(--s2) 0;
  color:var(--txt-m);
  font-size:var(--t-sm);
  line-height:1.72;
}

/* Dica */
.block-tip{
  background:var(--ok-bg);
  border:1px solid #b0e0c0;
  border-left:4px solid var(--ok);
  border-radius:0 var(--r-md) var(--r-md) 0;
  padding:var(--s4) var(--s5);margin-bottom:var(--s5);
  font-size:var(--t-sm);color:var(--txt-m);line-height:1.75;
}
.block-tip strong{color:var(--ok);font-weight:600}
.block-tip a{color:var(--verde)}

/* ── Campos ──────────────────────────────────────────── */
.field-group{margin-bottom:var(--s6)}
.field-label{
  display:block;font-family:var(--f-ui);font-size:var(--t-sm);
  font-weight:700;color:var(--verde);margin-bottom:var(--s1);
}
.field-hint{
  font-size:var(--t-xs);color:var(--txt-l);
  margin-bottom:var(--s2);line-height:1.6;
}
.field-input,.field-textarea{
  width:100%;
  padding:10px var(--s4);
  font-family:var(--f-body);font-size:var(--t-base);
  color:var(--txt);background:var(--bg-main);
  border:1.5px solid var(--brd);border-radius:var(--r-md);
  transition:border-color var(--tr),box-shadow var(--tr);
  outline:none;line-height:1.6;
}
.field-input:focus,.field-textarea:focus{
  border-color:var(--vivo-d);
  box-shadow:0 0 0 3px rgba(103,224,143,.18);
}
.field-input::placeholder,.field-textarea::placeholder{color:var(--txt-s)}
.field-textarea{resize:vertical;min-height:130px;overflow-y:auto}
.field-counter{
  text-align:right;font-size:.66rem;color:var(--txt-s);
  margin-top:4px;font-family:var(--f-mono);
}

/* ── Ações / Navegação ───────────────────────────────── */
.step-actions{
  display:flex;gap:var(--s3);margin-top:var(--s8);
  padding-top:var(--s5);border-top:1px solid var(--brd-l);flex-wrap:wrap;
}
.step-nav-btns{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--brd-l);
}

/* ── Welcome ─────────────────────────────────────────── */
.welcome-screen{
  max-width:680px;margin:0 auto;
  padding:var(--s10) var(--s4) 60px;
}
.welcome-logo{
  height:56px;width:auto;margin-bottom:var(--s8);
  /* logo verde escuro */
}
.welcome-chip{
  display:inline-flex;align-items:center;gap:var(--s2);
  background:var(--fundo);border:1px solid var(--brd);
  border-radius:20px;padding:4px 14px;
  font-family:var(--f-ui);font-size:.62rem;font-weight:700;
  color:var(--verde);letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:var(--s5);
}
.welcome-chip::before{
  content:'';width:8px;height:8px;
  background:var(--vivo);border-radius:50%;flex-shrink:0;
}
.welcome-screen h1{
  font-family:var(--f-ui);font-size:2rem;font-weight:800;
  color:var(--verde);margin-bottom:var(--s4);
  line-height:1.15;letter-spacing:-.03em;
}
.welcome-screen .lead{
  font-size:var(--t-md);color:var(--txt-m);
  line-height:1.8;margin-bottom:var(--s8);
}
.welcome-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--s3);margin-bottom:var(--s8);
}
.w-card{
  background:var(--fundo);border:1px solid var(--brd-l);
  border-radius:var(--r-lg);padding:var(--s5);
  transition:border-color var(--tr),box-shadow var(--tr);
}
.w-card:hover{border-color:var(--vivo);box-shadow:0 4px 16px rgba(103,224,143,.14)}
.w-card-icon{font-size:1.4rem;margin-bottom:var(--s2);display:block}
.w-card h4{font-size:var(--t-sm);color:var(--verde);margin-bottom:var(--s2);font-weight:700}
.w-card p{font-size:var(--t-sm);color:var(--txt-l);line-height:1.6}
.welcome-sig{
  font-size:var(--t-xs);color:var(--txt-s);font-style:italic;
  margin-top:var(--s8);padding-top:var(--s5);
  border-top:1px solid var(--brd-l);line-height:1.6;
}

/* ── Final ───────────────────────────────────────────── */
.final-screen{
  max-width:620px;margin:0 auto;text-align:center;
  padding:var(--s10) var(--s4);
}
.final-screen .final-icon{font-size:3rem;display:block;margin-bottom:var(--s5)}
.final-screen h2{
  font-size:var(--t-2xl);font-weight:800;
  color:var(--verde);margin-bottom:var(--s4);letter-spacing:-.02em;
}
.final-screen .lead{color:var(--txt-m);margin-bottom:var(--s8);line-height:1.78}
.final-actions{display:flex;flex-direction:column;gap:var(--s3);align-items:center}

/* ─── BOTÕES ──────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s2);padding:9px var(--s5);
  border:none;border-radius:var(--r-md);
  font-family:var(--f-ui);font-size:var(--t-sm);font-weight:600;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  line-height:1.4;letter-spacing:.01em;
  transition:background var(--tr),box-shadow var(--tr),
             transform var(--tr),color var(--tr);
}
.btn:active{transform:translateY(1px)}

.btn-sm{padding:7px var(--s4);font-size:var(--t-xs)}

/* Verde escuro */
.btn-primary{background:var(--verde);color:#fff;box-shadow:var(--sh-sm)}
.btn-primary:hover{background:var(--verde-m);box-shadow:var(--sh-md);color:#fff;text-decoration:none}

/* Verde vivo */
.btn-accent{
  background:var(--vivo);color:var(--verde);
  box-shadow:0 4px 14px rgba(103,224,143,.28);
  font-size:var(--t-md);padding:13px 32px;border-radius:var(--r-lg);font-weight:700;
}
.btn-accent:hover{
  background:var(--vivo-d);color:var(--verde);
  box-shadow:0 6px 20px rgba(103,224,143,.4);text-decoration:none;
}

/* Outline */
.btn-outline{
  background:transparent;color:var(--verde);
  border:1.5px solid var(--verde);
}
.btn-outline:hover{background:var(--verde);color:#fff;text-decoration:none}

/* Ghost — para header escuro */
.btn-ghost{
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.15);
}
.btn-ghost:hover{background:rgba(255,255,255,.16);color:#fff;text-decoration:none}

/* Neutro */
.btn-neutral{
  background:transparent;color:var(--txt-l);
  border:1.5px solid var(--brd);
}
.btn-neutral:hover{background:var(--fundo);color:var(--txt);text-decoration:none}

/* ─── SIDEBAR DIREITA ─────────────────────────────────── */
.sidebar-feedback{
  background:var(--fundo);
  border-left:1px solid var(--brd-l);
  height:100%;
  overflow-y:auto;     /* rola a coluna inteira */
  display:flex;flex-direction:column;
  gap:var(--s3);padding:var(--s4);
}

/* Painéis */
.panel{
  background:var(--bg-main);
  border:1px solid var(--brd-l);
  border-radius:var(--r-lg);
  overflow:visible;    /* CORRIGIDO: sem overflow hidden que truncava conteúdo */
  flex-shrink:0;       /* não comprime — a coluna rola */
}
.panel-head{
  display:flex;align-items:center;gap:var(--s2);
  padding:10px var(--s4);
  background:var(--fundo);
  border-bottom:1px solid var(--brd-l);
  font-family:var(--f-ui);font-size:.66rem;font-weight:700;
  color:var(--verde);text-transform:uppercase;letter-spacing:.09em;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.panel-head svg{color:var(--vivo-d);flex-shrink:0}

/* CORRIGIDO: panel-body sem max-height nem overflow oculto */
.panel-body{
  padding:var(--s4);
  font-size:var(--t-sm);line-height:1.72;
}
.muted-msg{color:var(--txt-s);font-style:italic;font-size:var(--t-sm)}

/* Feedback items */
.fb-item{
  padding:var(--s3);border-radius:var(--r-md);
  margin-bottom:var(--s2);font-size:var(--t-sm);line-height:1.68;
}
.fb-item:last-child{margin-bottom:0}
.fb-item.ok   {background:var(--ok-bg);  border-left:3px solid var(--ok);  color:#0e3a1e}
.fb-item.warn {background:var(--warn-bg);border-left:3px solid var(--warn);color:#4a2e08}
.fb-item.error{background:var(--err-bg); border-left:3px solid var(--err); color:#4a0808}
.fb-item.info {background:var(--info-bg);border-left:3px solid var(--info);color:#08304a}

/* Checklist */
.checklist{list-style:none;padding:var(--s3) var(--s4)}
.chk-item{
  display:flex;align-items:flex-start;gap:var(--s2);
  padding:7px 0;font-size:var(--t-sm);
  border-bottom:1px solid var(--brd-l);
  line-height:1.5;color:var(--txt-m);
}
.chk-item:last-child{border-bottom:none}
.chk-icon{
  font-family:var(--f-mono);font-size:13px;
  min-width:16px;margin-top:1px;flex-shrink:0;
}
.chk-item.ok    .chk-icon{color:var(--ok)}
.chk-item.pending.chk-icon{color:var(--brd)}
.chk-item.warn  .chk-icon{color:var(--warn)}
.chk-item.error .chk-icon{color:var(--err)}

/* Referências */
.ref-link{
  display:block;text-decoration:none;
  padding:var(--s2) var(--s3);
  background:var(--fundo);border:1px solid var(--brd-l);
  border-radius:var(--r-sm);margin-bottom:var(--s2);
  transition:background var(--tr),border-color var(--tr);
  /* CORRIGIDO: texto quebra linha normalmente */
  word-break:break-word;
  overflow-wrap:anywhere;
}
.ref-link:hover{background:var(--vivo-xl);border-color:var(--vivo);color:var(--verde)}
.ref-link strong{
  display:block;color:var(--txt);font-size:var(--t-xs);
  font-weight:600;margin-bottom:2px;white-space:normal;
}
.ref-link span{color:var(--txt-l);font-style:italic;font-size:var(--t-xs)}

/* ─── MODAL ───────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(18,50,40,.52);
  backdrop-filter:blur(5px);
  z-index:200;
  display:flex;align-items:flex-start;justify-content:center;
  padding:var(--s8) var(--s4);overflow-y:auto;
}
.modal-overlay[hidden]{display:none}
.modal-box{
  background:var(--bg-main);border-radius:var(--r-xl);
  width:100%;max-width:820px;box-shadow:var(--sh-xl);
  overflow:hidden;margin:auto;
  animation:modal-in .22s cubic-bezier(.4,0,.2,1);
}
@keyframes modal-in{
  from{opacity:0;transform:translateY(-14px) scale(.98)}
  to  {opacity:1;transform:translateY(0)     scale(1)}
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4) var(--s6);background:var(--verde);
}
.modal-head h2{
  font-family:var(--f-ui);font-size:var(--t-lg);
  color:var(--vivo);font-weight:700;
}
.btn-close{
  background:rgba(255,255,255,.1);border:none;color:#fff;
  cursor:pointer;padding:var(--s2);border-radius:var(--r-sm);
  display:flex;transition:background var(--tr);
}
.btn-close:hover{background:rgba(255,255,255,.2)}
.modal-bar{
  display:flex;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) var(--s6);
  background:var(--fundo);border-bottom:1px solid var(--brd-l);
}
.modal-body{
  padding:var(--s8) var(--s10);font-family:var(--f-body);
  line-height:1.8;max-height:68vh;overflow-y:auto;
}

/* Documento acadêmico */
.doc-capa{text-align:center;margin-bottom:var(--s10);padding-bottom:var(--s10);border-bottom:2px solid var(--brd-l)}
.doc-capa .inst{font-size:var(--t-sm);color:var(--txt-l);margin-bottom:var(--s2);font-weight:500}
.doc-capa img{height:44px;width:auto;margin:0 auto var(--s6)}
.doc-capa h1{font-size:var(--t-xl);color:var(--verde);margin:var(--s8) 0 var(--s4);font-weight:800}
.doc-capa .autor{font-size:var(--t-base);font-weight:600;margin-top:var(--s6);color:var(--txt)}
.doc-capa .data{font-size:var(--t-sm);color:var(--txt-l);margin-top:var(--s4)}
.doc-section{margin-bottom:var(--s8)}
.doc-section h2{
  font-family:var(--f-ui);font-size:var(--t-lg);color:var(--verde);
  text-transform:uppercase;letter-spacing:.05em;
  margin-bottom:var(--s4);padding-bottom:var(--s2);
  border-bottom:2px solid var(--vivo);
}
.doc-section h3{
  font-family:var(--f-ui);font-size:var(--t-base);color:var(--verde);
  margin-bottom:var(--s3);margin-top:var(--s5);font-weight:700;
}
.doc-section p{text-align:justify;margin-bottom:var(--s3);text-indent:2em}
.doc-section ul{padding-left:2em;margin:var(--s3) 0}
.doc-section li{margin-bottom:var(--s2)}
.doc-empty{
  color:var(--txt-s);font-style:italic;font-size:var(--t-sm);
  background:var(--fundo);padding:var(--s3);
  border-radius:var(--r-sm);border:1px dashed var(--brd);text-indent:0;
}

/* ─── TOAST ───────────────────────────────────────────── */
.toast-wrap{
  position:fixed;bottom:var(--s6);right:var(--s6);
  z-index:300;display:flex;flex-direction:column;
  gap:var(--s2);max-width:320px;
}
.toast{
  background:var(--verde);color:#fff;
  padding:10px var(--s5);border-radius:var(--r-md);
  font-family:var(--f-ui);font-size:var(--t-sm);font-weight:500;
  box-shadow:var(--sh-lg);line-height:1.5;
  border-left:4px solid var(--vivo);
  animation:t-in .2s ease, t-out .2s ease 2.8s forwards;
}
.toast.success{border-left-color:var(--vivo)}
.toast.error  {border-left-color:#ff7070;background:#4a0808}
.toast.warn   {border-left-color:#ffb347;background:#4a2e08}
@keyframes t-in {from{opacity:0;transform:translateX(14px)}}
@keyframes t-out{to  {opacity:0;transform:translateX(14px)}}

/* ─── UTILITÁRIOS ─────────────────────────────────────── */
.separator{border:none;border-top:1px solid var(--brd-l);margin:var(--s6) 0}

/* ─── RESPONSIVO ──────────────────────────────────────── */
@media(max-width:1100px){
  :root{--feed-w:260px}
}

@media(max-width:960px){
  .app-layout{
    grid-template-columns:var(--nav-w) 1fr;
    grid-template-rows:1fr auto;
    height:auto;overflow:visible;
  }
  .content-main{height:auto;overflow:visible}
  .sidebar-nav{height:calc(100vh - var(--hdr-h));position:sticky;top:var(--hdr-h)}
  .sidebar-feedback{
    grid-column:1/-1;height:auto;overflow:visible;
    flex-direction:row;flex-wrap:wrap;align-items:flex-start;
  }
  .panel{flex:1 1 220px;min-width:200px}
}

@media(max-width:768px){
  :root{--nav-w:0px;--hdr-h:54px}
  .app-layout{grid-template-columns:1fr;height:auto;overflow:visible}
  .content-main{padding:var(--s6) var(--s4);height:auto;overflow:visible}
  .sidebar-nav{
    position:fixed;top:0;left:-290px;
    width:290px;height:100vh;z-index:150;
    transition:left var(--tr);box-shadow:var(--sh-xl);
    padding-top:var(--s4);
  }
  .sidebar-nav.open{left:0}
  .btn-hamburger{
    display:flex;position:fixed;bottom:var(--s5);left:var(--s5);
    z-index:140;background:var(--verde);color:#fff;
    padding:var(--s3);border-radius:50%;box-shadow:var(--sh-md);
  }
  .sidebar-feedback{
    grid-column:1;height:auto;overflow:visible;
    flex-direction:column;padding:var(--s3);
  }
  .welcome-grid{grid-template-columns:1fr}
  .modal-body{padding:var(--s5);max-height:76vh}
  .modal-overlay{padding:var(--s3) var(--s2)}
  .step-actions{flex-direction:column}
  .step-nav-btns{flex-direction:column;gap:var(--s3)}
  .brand-text span,.brand-sep{display:none}
}

@media(max-width:480px){
  .content-main{padding:var(--s4) var(--s3)}
  .step-title{font-size:var(--t-xl)}
  .welcome-screen h1{font-size:1.6rem}
  .modal-bar{padding:var(--s3)}
}

/* ─── PRINT / ABNT ────────────────────────────────────── */
@media print{
  .site-header,.sidebar-nav,.sidebar-feedback,
  .modal-head,.modal-bar,.toast-wrap{display:none!important}
  .modal-overlay{position:static;background:none;padding:0;overflow:visible}
  .modal-box{box-shadow:none;border-radius:0;max-width:100%}
  .modal-body{max-height:none;padding:0;overflow:visible}
  body{font-size:12pt;background:#fff;color:#000;line-height:1.5}
  @page{size:A4;margin:3cm 2cm 2cm 3cm}
  .doc-section h2{page-break-after:avoid}
  .doc-section{page-break-inside:avoid}
}