/* Design System (Atividade 2) — aplicado sem alterar a estrutura de conteúdo */
:root{
  --prim:#0A66FF; --prim-700:#084FCC;
  --sec:#0DCB8B;  --sec-700:#0AA571;
  --n-900:#111; --n-700:#444; --n-500:#777; --n-300:#CFCFCF; --n-200:#EAEAEA; --n-100:#F8F8F8;
  --sucesso:#2AAF74; --alerta:#FFB020; --erro:#E63946;
  --fs-h1: clamp(28px, 4vw, 40px);
  --fs-h2: clamp(22px, 3vw, 32px);
  --fs-h3: clamp(18px, 2.5vw, 24px);
  --fs-body: 16px; --fs-small: 14px;
  --ff: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, sans-serif;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--n-100);color:var(--n-900);font:var(--fs-body)/1.6 var(--ff)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1200px,92%);margin:auto}

/* Header/Nav (não intrusivo) */
.header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--n-200)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:var(--s2) 0}
.hamburger{display:none;background:none;border:0;font-size:28px}
.menu{display:flex;gap:var(--s2);align-items:center;list-style:none;margin:0;padding:0}
.menu a{padding:10px 12px;border-radius:12px;display:block}
.menu a:hover{background:var(--n-100)}
.dropdown > a:after{content:"▾";margin-left:6px;font-size:12px}
.submenu{position:absolute;left:0;top:110%;background:#fff;border:1px solid var(--n-200);border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.08);padding:6px;display:none;min-width:220px}
.menu li:hover .submenu{display:block}
@media (max-width:768px){
  .hamburger{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:60px;background:#fff;border-bottom:1px solid var(--n-200);padding:10px}
  .menu.open{display:flex;flex-direction:column}
  .menu li{width:100%}
  .menu li .submenu{position:static;display:none;border:0;box-shadow:none;background:transparent;padding:0}
  .menu li.open .submenu{display:flex;flex-direction:column;gap:6px}
}

/* Títulos/Seções */
h1{font-size:var(--fs-h1);margin:0 0 var(--s2)}
h2{font-size:var(--fs-h2);margin:0 0 var(--s3)}
.section{padding:var(--s5) 0}
.muted{color:var(--n-700)}

/* Grid utilitário (pode ser aplicado via classe manual onde precisar) */
.grid{display:grid;gap:var(--s3)}
@media (min-width:360px){ .grid-12{grid-template-columns:repeat(2,1fr)} }
@media (min-width:480px){ .grid-12{grid-template-columns:repeat(3,1fr)} }
@media (min-width:768px){ .grid-12{grid-template-columns:repeat(6,1fr)} }
@media (min-width:1024px){ .grid-12{grid-template-columns:repeat(12,1fr)} }
@media (min-width:1280px){ .grid-12{grid-template-columns:repeat(12,1fr)} }
.col-span-12{grid-column:span 12}
.col-span-6{grid-column:span 6}
.col-span-4{grid-column:span 4}

/* Cards genéricos (aplicável a .card existente) */
.card{background:#fff;border:1px solid var(--n-200);border-radius:20px;box-shadow:0 6px 24px rgba(0,0,0,.08)}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.12)}
.card .card-body{padding:var(--s3)}

/* Badges */
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.badge{font-size:12px;padding:4px 8px;border-radius:999px;background:var(--n-200);color:#222}
.badge.sucesso{background:rgba(13,203,139,.18);color:#0AA571}
.badge.andamento{background:rgba(10,85,255,.12);color:#084FCC}
.badge.atencao{background:rgba(255,176,32,.2);color:#8a5a00}

/* Botões */
.btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;border:0;border-radius:12px;padding:12px 16px;font-weight:600;cursor:pointer}
.btn-prim{background:var(--prim);color:#fff}
.btn-prim:hover{filter:brightness(.95)}
.btn-prim:focus{outline:3px solid rgba(10,85,255,.25);outline-offset:2px}
.btn-prim:active{transform:translateY(1px)}
.btn-prim:disabled{background:var(--n-300);cursor:not-allowed}

/* Formulários + feedback visual */
.form{display:grid;gap:12px;max-width:720px}
.input{padding:12px;border-radius:12px;border:1px solid var(--n-300);background:#fff}
.input:focus{outline:3px solid rgba(13,203,139,.25);border-color:#0DCB8B}
.input.is-invalid{border-color:#E63946;background:rgba(230,57,70,.05)}
.input.is-valid{border-color:#2AAF74;background:rgba(42,175,116,.05)}
.feedback{font-size:12px;margin-top:-6px}
.feedback.erro{color:#E63946}
.feedback.ok{color:#2AAF74}

/* Toast */
.toast{position:fixed;right:16px;bottom:16px;background:#111;color:#fff;padding:12px 16px;border-radius:12px;opacity:0;transform:translateY(8px);transition:all .25s ease;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}



/* === Fix submenu 'Projetos' alignment (override) === */
.menu > li,
.dropdown { position: relative; }

.submenu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
}

@media (max-width: 768px){
  .menu li .submenu{
    position: static;
    right: auto;
    left: auto;
  }
}