/* =========================================================================
   Painel de Lançamento Avaner — styles.css
   Tema único, escuro, no mesmo tom do login — fundo e cartões em azul-
   marinho, textos claros. Cromo geral usa a paleta oficial da marca (navy,
   prata, areia, grafite, verde-maçã).
   Identidade de dados (quem fez o quê nos gráficos) usa uma paleta
   categórica à parte, validada por acessibilidade/daltonismo (azul,
   laranja, água, amarelo) — a paleta oficial de apoio falha nesse uso
   específico sobre fundo navy (ver README).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  color-scheme: dark;

  /* ---- marca (cromo) ---- */
  --navy:        #041E42;
  --navy-deep:   #02122A;
  --prata:       #8C8985;
  --prata-2:     #D0D3D4;
  --areia:       #C3AC8D;
  --grafite:     #65676B;
  --cinza:       #A7A8AA;
  --verde-maca:  #A4D65E;
  --azul-ardosia:#476589;

  /* ---- superfícies (tema único, escuro) ---- */
  --bg:        #060B14;
  --surface:   #0E1826;
  --surface-2: #142235;
  --border:    #253953;
  --ink:       #EAF0F6;
  --ink-muted: #8FA1B4;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 16px 32px -16px rgba(0,0,0,.7);

  /* ---- identidade de dados (validada) ---- */
  --p-michael:   #3987e5;
  --p-guilherme: #d95926;
  --p-jamille:   #199e70;
  --p-team:      #c98500;

  /* ---- status (fixo, nunca reaproveitado) ---- */
  --st-good:     #0ca30c;
  --st-warn:     #fab219;
  --st-serious:  #ec835a;
  --st-crit:     #d03b3b;
  --st-progress: #3987e5;

  --radius: 16px;
  --radius-sm: 10px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, var(--azul-ardosia) 20%, transparent), transparent),
    var(--bg);
  color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;text-wrap:balance;margin:0;}
a{color:inherit;}
button{font-family:inherit;}
[hidden]{display:none!important;}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px 100px;}
section{margin-bottom:30px;}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;gap:10px;flex-wrap:wrap;}
.section-head h2{font-size:16.5px;font-weight:600;}
.section-head .hint{font-size:12px;color:var(--ink-muted);}

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.app-header{
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#EDEFF2;
  margin-bottom:18px;
  box-shadow:var(--shadow);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.app-header .inner{
  max-width:1080px;margin:0 auto;padding:18px 20px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.app-header .logo-icon{width:38px;height:38px;border-radius:10px;flex:none;display:block;}
.app-header .brandline{display:flex;flex-direction:column;gap:2px;}
.app-header .eyebrow{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--prata-2);font-weight:700;opacity:.85;}
.app-header h1{font-size:19px;font-weight:600;color:#fff;}
.app-header .spacer{flex:1;}
.countdown{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:9px 18px;text-align:center;min-width:128px;
}
.countdown .n{font-family:'Fraunces',serif;font-size:26px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:#fff;}
.countdown .l{font-size:10px;text-transform:uppercase;letter-spacing:.1em;opacity:.8;margin-top:2px;}
.countdown .d{font-size:11px;opacity:.7;margin-top:4px;}

.user-badge{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 8px 6px 14px;position:relative;}
.user-badge .dot{width:9px;height:9px;border-radius:50%;flex:none;}
.user-badge .name{font-size:13px;font-weight:700;color:#fff;}
.user-badge .role{font-size:10.5px;color:var(--prata-2);}
.user-badge button{
  border:none;background:rgba(255,255,255,.12);color:#fff;border-radius:999px;
  padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;
}
.user-badge button:hover{background:rgba(255,255,255,.22);}
.req-badge{
  background:var(--st-crit);color:#fff;font-size:10.5px;font-weight:800;min-width:18px;height:18px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
}
.req-badge-inline{
  background:var(--st-crit);color:#fff;font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 4px;margin-left:5px;vertical-align:middle;
}

/* ---------------------------------------------------------------------
   Navegação por páginas (Visão Geral / Tarefas / Criativos / Pedidos)
   --------------------------------------------------------------------- */
.page-tabs{
  display:flex;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:5px;margin:0 auto 26px;max-width:fit-content;box-shadow:var(--shadow);flex-wrap:wrap;
}
.page-tab{
  border:none;background:transparent;color:var(--ink-muted);padding:9px 18px;border-radius:999px;
  font-weight:700;font-size:13px;cursor:pointer;transition:background .15s ease, color .15s ease;
}
.page-tab:hover{color:var(--ink);}
.page-tab.active{background:var(--verde-maca);color:#1E3005;}
.page{animation:fadein .25s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

/* ---------------------------------------------------------------------
   Cards / tiles genéricos
   --------------------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);}

.goals{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden;}
.tile::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--tile-accent, var(--areia));}
.tile .k{font-size:11px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700;}
.tile .v{font-family:'Fraunces',serif;font-size:25px;font-weight:600;margin-top:5px;font-variant-numeric:tabular-nums;}
.tile .sub{font-size:11.5px;color:var(--ink-muted);margin-top:2px;}
.tile input{font-family:'Fraunces',serif;font-size:25px;font-weight:600;border:none;background:transparent;color:var(--ink);border-bottom:1px dashed var(--border);width:100%;padding:0 0 2px;}
.tile input:focus{outline:none;border-bottom-color:var(--tile-accent, var(--areia));}
.bar-track{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:11px;position:relative;}
.bar-fill{height:100%;border-radius:99px;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative;}
.bar-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);background-size:200% 100%;animation:shimmer 2.6s ease-in-out infinite;}
@keyframes shimmer{0%{background-position:-150% 0;}100%{background-position:150% 0;}}

/* ---------------------------------------------------------------------
   Anel de progresso (SVG donut)
   --------------------------------------------------------------------- */
.ring-row{display:flex;align-items:center;gap:14px;}
.ring-wrap{position:relative;width:74px;height:74px;flex:none;}
.ring-wrap svg{transform:rotate(-90deg);}
.ring-track{fill:none;stroke:var(--surface-2);}
.ring-fill{fill:none;stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1);}
.ring-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------------------------
   Desempenho por pessoa
   --------------------------------------------------------------------- */
.perf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.perf-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:17px;box-shadow:var(--shadow);}
.perf-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;}
.perf-name{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px;}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block;box-shadow:0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);}
.perf-pct{font-family:'Fraunces',serif;font-weight:700;font-size:21px;font-variant-numeric:tabular-nums;}
.perf-bar-track{height:10px;border-radius:99px;background:var(--surface-2);overflow:hidden;}
.perf-bar-fill{height:100%;border-radius:99px;transition:width .5s cubic-bezier(.4,0,.2,1);}
.perf-meta{display:flex;justify-content:space-between;margin-top:10px;font-size:11.5px;color:var(--ink-muted);}
.perf-meta .od{color:var(--st-crit);font-weight:700;}

/* ---------------------------------------------------------------------
   Evolução (gráficos de linha/área — faturamento e grupo)
   --------------------------------------------------------------------- */
.trend-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.trend-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);}
.trend-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.trend-head .t{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted);}
.trend-head .v{font-family:'Fraunces',serif;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;}
.trend-svg{width:100%;height:64px;display:block;}
.trend-empty{font-size:12px;color:var(--ink-muted);padding:18px 0;text-align:center;}

/* ---------------------------------------------------------------------
   Preocupações
   --------------------------------------------------------------------- */
.risk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.risk-card{border-radius:var(--radius);padding:15px 17px;box-shadow:var(--shadow);border:1px solid var(--border);background:var(--surface);}
.risk-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;}
.risk-icon{width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex:none;}
.risk-icon.good{background:var(--st-good);}
.risk-icon.warn{background:var(--st-warn);color:#3a2c00;}
.risk-icon.serious{background:var(--st-serious);}
.risk-icon.crit{background:var(--st-crit);}
.risk-body{font-size:13px;line-height:1.55;margin-top:9px;color:var(--ink);}
.risk-body b{font-variant-numeric:tabular-nums;}
.note-card{background:var(--surface-2);border:1px dashed var(--border);border-radius:var(--radius);padding:15px 17px;font-size:12.5px;line-height:1.6;color:var(--ink-muted);margin-top:12px;}
.note-card b{color:var(--ink);}

/* ---------------------------------------------------------------------
   Minhas pendências (widget pessoal)
   --------------------------------------------------------------------- */
.mp-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;
  box-shadow:var(--shadow);display:flex;gap:22px;align-items:center;flex-wrap:wrap;
}
.mp-stats{display:flex;gap:22px;flex:none;}
.mp-stat{text-align:center;}
.mp-stat .n{display:block;font-family:'Fraunces',serif;font-size:22px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;}
.mp-stat .l{display:block;font-size:10px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.05em;margin-top:3px;}
.mp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;flex:1;min-width:220px;}
.mp-list li{font-size:12.5px;display:flex;align-items:center;gap:8px;}
.mp-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:999px;color:#fff;flex:none;}
.mp-tag.crit{background:var(--st-crit);}
.mp-tag.warn{background:var(--st-serious);}
.mp-tag.soon{background:var(--st-warn);color:#3a2c00;}

/* ---------------------------------------------------------------------
   Atividade recente
   --------------------------------------------------------------------- */
.activity-feed{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:4px 18px;max-height:280px;overflow-y:auto;
}
.activity-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.activity-item:last-child{border-bottom:none;}
.activity-icon{width:26px;height:26px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:12.5px;flex:none;}
.activity-text{flex:1;font-size:12.5px;line-height:1.4;}
.activity-text b{color:var(--ink);}
.activity-time{font-size:11px;color:var(--ink-muted);white-space:nowrap;flex:none;}

/* ---------------------------------------------------------------------
   Linha do tempo — tema azul, dinâmico: fase concluída em azul sólido,
   fase atual "escaneando" (pulso + brilho), fases futuras apagadas.
   --------------------------------------------------------------------- */
.timeline{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 18px 14px;box-shadow:var(--shadow), inset 0 0 40px rgba(57,135,229,.06);
  position:relative;overflow:hidden;
}
.tl-track{position:relative;height:38px;border-radius:9px;overflow:hidden;display:flex;gap:2px;background:var(--surface-2);}
.tl-seg{
  height:100%;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;
  color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 5px;
  text-shadow:0 1px 2px rgba(0,0,0,.4);position:relative;transition:opacity .3s ease;
}
.tl-seg.tl-done{background:linear-gradient(180deg, color-mix(in srgb, var(--st-progress) 75%, white 15%), var(--st-progress));}
.tl-seg.tl-current{
  background:linear-gradient(180deg, color-mix(in srgb, var(--st-progress) 80%, white 18%), var(--st-progress));
  box-shadow:0 0 16px color-mix(in srgb, var(--st-progress) 65%, transparent);
}
.tl-seg.tl-current::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
  background-size:250% 100%;animation:tlscan 2.4s linear infinite;
}
@keyframes tlscan{0%{background-position:200% 0;}100%{background-position:-100% 0;}}
.tl-seg.tl-upcoming{background:color-mix(in srgb, var(--st-progress) 16%, var(--surface-2));color:var(--ink-muted);text-shadow:none;}
.tl-today{position:absolute;top:-9px;bottom:-9px;width:2px;background:var(--verde-maca);box-shadow:0 0 8px var(--verde-maca);}
.tl-today-dot{
  position:absolute;top:-4px;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;
  background:var(--verde-maca);animation:tlping 1.8s ease-out infinite;
}
@keyframes tlping{
  0%{box-shadow:0 0 0 0 rgba(164,214,94,.55);}
  70%{box-shadow:0 0 0 12px rgba(164,214,94,0);}
  100%{box-shadow:0 0 0 0 rgba(164,214,94,0);}
}
.tl-today-label{position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;color:var(--ink);white-space:nowrap;}
.tl-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-muted);margin-top:9px;}

/* ---------------------------------------------------------------------
   Filtros / chips
   --------------------------------------------------------------------- */
.filters{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
.flabel{font-size:12px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.08em;margin-right:4px;}
.chip-filter{border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 13px;font-size:12.5px;cursor:pointer;font-weight:600;}
.chip-filter[aria-pressed="true"]{background:var(--verde-maca);color:#1E3005;border-color:var(--verde-maca);}

/* ---------------------------------------------------------------------
   Fases em abas + painel da fase ativa
   --------------------------------------------------------------------- */
.phase-tabs{display:flex;gap:8px;overflow-x:auto;margin-bottom:14px;padding-bottom:4px;}
.phase-tab{
  flex:1;min-width:140px;display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px;
  color:var(--ink);transition:border-color .15s ease, background .15s ease;
}
.phase-tab:hover{border-color:var(--areia);}
.phase-tab.active{background:var(--surface-2);border-color:var(--verde-maca);box-shadow:0 0 0 1px var(--verde-maca);}
.phase-tab-num{
  font-family:'Fraunces',serif;font-size:12px;font-weight:700;color:var(--ink-muted);background:var(--surface-2);
  border-radius:7px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex:none;
}
.phase-tab.active .phase-tab-num{background:var(--verde-maca);color:#1E3005;}
.phase-tab-body{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;}
.phase-tab-name{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.phase-tab-frac{font-size:10.5px;color:var(--ink-muted);font-variant-numeric:tabular-nums;}
.phase-tab-bar{display:block;height:4px;border-radius:99px;background:var(--border);overflow:hidden;}
.phase-tab-bar span{display:block;height:100%;background:var(--areia);border-radius:99px;}

.phase-panel{padding:0;overflow:hidden;}
.phase-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;}
.phase-panel-head h2{font-size:17px;font-weight:600;}
.phase-panel-head .phase-range{font-size:12px;color:var(--ink-muted);margin-top:2px;}

.readiness-banner{
  display:flex;align-items:flex-start;gap:12px;margin:0 20px 16px;padding:13px 15px;border-radius:12px;
  font-size:12.5px;line-height:1.5;
}
.readiness-banner.ready{background:color-mix(in srgb, var(--st-good) 16%, var(--surface));border:1px solid color-mix(in srgb, var(--st-good) 40%, transparent);}
.readiness-banner.not-ready{background:color-mix(in srgb, var(--st-warn) 12%, var(--surface));border:1px solid color-mix(in srgb, var(--st-warn) 35%, transparent);}
.readiness-banner b{display:block;font-size:13px;margin-bottom:2px;}
.readiness-banner span{color:var(--ink-muted);}

.task-list{border-top:1px solid var(--border);}
.task{display:flex;gap:12px;padding:13px 20px;border-bottom:1px solid var(--border);align-items:flex-start;transition:background .3s ease;}
.task:last-child{border-bottom:none;}
.task.done{background:var(--surface-2);}
.task.doing{background:color-mix(in srgb, var(--st-progress) 6%, var(--surface));}
.task.blocked{background:color-mix(in srgb, var(--st-crit) 7%, var(--surface));}
.task.urgente{box-shadow:inset 3px 0 0 var(--st-crit);}
.task.pulse{animation:taskpulse .5s ease;}
@keyframes taskpulse{0%{background:color-mix(in srgb, var(--verde-maca) 30%, var(--surface));}100%{background:inherit;}}

.status-group{display:flex;gap:4px;flex:none;margin-top:1px;}
.status-btn{
  width:26px;height:26px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);
  color:var(--ink-muted);font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.status-btn:hover{border-color:var(--ink-muted);}
.status-btn:active{transform:scale(.88);}
.status-btn[aria-pressed="true"].s-todo{background:var(--surface-2);border-color:var(--ink-muted);color:var(--ink);}
.status-btn[aria-pressed="true"].s-doing{background:var(--st-progress);border-color:var(--st-progress);color:#fff;}
.status-btn[aria-pressed="true"].s-blocked{background:var(--st-crit);border-color:var(--st-crit);color:#fff;}
.status-btn[aria-pressed="true"].s-done{background:var(--st-good);border-color:var(--st-good);color:#fff;}

.status-pill{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;}
.status-pill.todo{background:var(--surface-2);color:var(--ink-muted);}
.status-pill.doing{background:color-mix(in srgb, var(--st-progress) 22%, var(--surface));color:#8fc0f7;}
.status-pill.blocked{background:color-mix(in srgb, var(--st-crit) 22%, var(--surface));color:#ff9d8f;}
.status-pill.done{background:color-mix(in srgb, var(--st-good) 22%, var(--surface));color:#7be07b;}

.task-body{flex:1;min-width:0;}
.task-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.task-title{font-size:14.5px;font-weight:600;line-height:1.35;}
.task.done .task-title{text-decoration:line-through;color:var(--ink-muted);}
.priority-btn{
  border:none;background:none;font-size:14px;cursor:pointer;opacity:.32;filter:grayscale(1);flex:none;padding:2px;
  transition:opacity .15s ease, filter .15s ease, transform .15s ease;
}
.priority-btn:hover{opacity:.6;}
.priority-btn.active{opacity:1;filter:none;}
.priority-btn:active{transform:scale(.85);}
.task-detail{font-size:12.5px;color:var(--ink-muted);margin-top:3px;line-height:1.5;max-width:64ch;}
.task-meta{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;align-items:center;}
.owner-chip{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;color:#fff;background:var(--grafite);}
.due-pill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-muted);border:1px solid var(--border);font-variant-numeric:tabular-nums;}
.due-pill.overdue{background:color-mix(in srgb, var(--st-crit) 22%, var(--surface));color:#ff9d8f;border-color:transparent;}
.due-pill.soon{background:color-mix(in srgb, var(--st-warn) 22%, var(--surface));color:var(--st-warn);border-color:transparent;}
.doneby{font-size:11px;color:var(--verde-maca);font-weight:700;}

.block-form{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;
  background:var(--surface-2);border:1px dashed var(--border);border-radius:10px;padding:10px;
}
.block-form select, .block-form input{
  font-family:inherit;font-size:12.5px;padding:7px 9px;border-radius:7px;border:1px solid var(--border);
  background:var(--surface);color:var(--ink);
}
.block-form input{flex:1;min-width:160px;}
.block-submit{background:var(--st-crit);color:#fff;border:none;border-radius:7px;padding:7px 12px;font-size:12px;font-weight:700;cursor:pointer;}
.block-cancel{background:none;border:none;color:var(--ink-muted);font-size:12px;font-weight:700;cursor:pointer;}

/* ---------------------------------------------------------------------
   Criativos
   --------------------------------------------------------------------- */
.creative-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:16px;}
.creative-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;}
.creative-thumb{aspect-ratio:4/3;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--ink-muted);font-size:28px;overflow:hidden;}
.creative-thumb img,.creative-thumb video{width:100%;height:100%;object-fit:cover;}
.creative-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1;}
.creative-title{font-size:13px;font-weight:700;line-height:1.3;}
.creative-meta{font-size:11px;color:var(--ink-muted);display:flex;justify-content:space-between;gap:6px;}
.creative-actions{display:flex;gap:6px;margin-top:auto;}
.creative-actions a, .creative-actions button{
  font-size:11.5px;font-weight:700;border-radius:999px;padding:5px 10px;text-decoration:none;
  border:1px solid var(--border);background:var(--surface-2);color:var(--ink);cursor:pointer;
}
.creative-actions .danger{color:#ff9d8f;}
.btn-resolve{border:1px solid var(--border);background:var(--surface-2);color:var(--ink);border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:700;cursor:pointer;}
.btn-resolve:hover{background:color-mix(in srgb, var(--st-good) 20%, var(--surface-2));}
.creative-empty{grid-column:1/-1;text-align:center;color:var(--ink-muted);font-size:13px;padding:22px 0;}

.creative-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;}
.field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-muted);flex:1;min-width:150px;}
.field input, .field select{
  font-family:inherit;font-size:13.5px;padding:8px 10px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);color:var(--ink);
}
.kind-toggle{display:flex;gap:6px;}
.kind-toggle button{border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:8px;padding:8px 12px;font-size:12.5px;font-weight:700;cursor:pointer;}
.kind-toggle button[aria-pressed="true"]{background:var(--verde-maca);color:#1E3005;border-color:var(--verde-maca);}
.btn-primary{
  background:var(--verde-maca);color:#1E3005;border:none;border-radius:8px;padding:9px 16px;
  font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap;
}
.btn-primary:disabled{opacity:.55;cursor:default;}
.upload-progress{font-size:11.5px;color:var(--ink-muted);}

/* ---------------------------------------------------------------------
   Observações & Pedidos
   --------------------------------------------------------------------- */
.notes-feed{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;max-height:420px;overflow-y:auto;padding-right:2px;}
.note-item, .request-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;box-shadow:var(--shadow);}
.request-item.resolved{opacity:.6;}
.note-top, .request-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;gap:10px;}
.note-author{font-size:12.5px;font-weight:800;display:flex;align-items:center;gap:7px;}
.request-route{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.request-task-tag{font-size:11px;color:var(--st-progress);font-weight:700;margin:2px 0 6px;}
.note-time{font-size:11px;color:var(--ink-muted);white-space:nowrap;}
.note-body{font-size:13.5px;line-height:1.5;white-space:pre-wrap;}
.note-empty{text-align:center;color:var(--ink-muted);font-size:13px;padding:18px 0;}
.request-resolved-tag{font-size:11px;color:var(--verde-maca);font-weight:700;margin-top:8px;}
.note-form{display:flex;gap:10px;align-items:flex-end;}
.note-form textarea{
  flex:1;font-family:inherit;font-size:13.5px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--ink);resize:vertical;min-height:44px;max-height:140px;
}

/* ---------------------------------------------------------------------
   Rodapé
   --------------------------------------------------------------------- */
.foot-note{margin-top:26px;font-size:12.5px;color:var(--ink-muted);line-height:1.6;max-width:76ch;}
.foot-note b{color:var(--ink);}
.loading{padding:40px 0;text-align:center;color:var(--ink-muted);font-size:14px;}

/* ---------------------------------------------------------------------
   Login
   --------------------------------------------------------------------- */
.login-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:
    radial-gradient(900px 500px at 15% 0%, color-mix(in srgb, var(--azul-ardosia) 30%, transparent), transparent),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
}
/* O cartão de login fica sempre branco, mesmo com o resto do painel em
   tema escuro — é o "cartão claro sobre fundo navy" que deu origem ao
   visual do painel inteiro, então não usa os tokens de --surface. */
.login-card{
  width:100%;max-width:380px;background:#FFFFFF;border-radius:20px;padding:34px 30px 28px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);text-align:center;
}
.login-card img{width:74px;height:74px;border-radius:16px;margin-bottom:14px;}
.login-card h1{font-size:20px;font-weight:600;color:var(--navy);margin-bottom:4px;}
.login-card .tagline{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#6B7280;margin-bottom:22px;}

.login-picker{display:flex;flex-direction:column;gap:8px;text-align:left;}
.login-person{
  display:flex;align-items:center;gap:11px;border:1px solid #E3E6EA;background:#F7F8FA;border-radius:12px;
  padding:11px 13px;cursor:pointer;text-align:left;transition:border-color .15s ease, background .15s ease;
}
.login-person:hover{border-color:var(--navy);background:#EFF2F6;}
.login-person-dot{width:11px;height:11px;border-radius:50%;flex:none;}
.login-person-name{display:block;font-size:14px;font-weight:700;color:#0E1A2B;}
.login-person-role{display:block;font-size:11px;color:#6B7280;}

.login-back{align-self:flex-start;border:none;background:none;color:#6B7280;font-size:12px;font-weight:700;cursor:pointer;padding:0 0 6px;}
.login-selected{font-size:15px;font-weight:700;color:#0E1A2B;margin-bottom:10px;}
.login-card form{display:flex;flex-direction:column;gap:4px;text-align:left;}
.login-card label{font-size:12px;font-weight:700;color:#6B7280;}
.login-card input:not([type="hidden"]){
  font-family:inherit;font-size:14px;padding:11px 13px;border-radius:10px;border:1px solid #E3E6EA;
  background:#F7F8FA;color:#0E1A2B;width:100%;margin-top:4px;
}
.login-card input:focus{outline:2px solid var(--azul-ardosia);outline-offset:1px;}
.login-card button[type="submit"]{
  margin-top:14px;background:var(--navy);color:#fff;border:none;border-radius:10px;padding:12px;
  font-size:14px;font-weight:800;cursor:pointer;
}
.login-card button[type="submit"]:hover{background:var(--navy-deep);}
.login-error{
  background:#FDEEEC;color:#B3261E;
  border-radius:8px;padding:9px 12px;font-size:12.5px;font-weight:600;text-align:left;margin-top:12px;
}

@media (max-width:820px){
  .goals{grid-template-columns:repeat(2,1fr);}
  .perf-grid, .trend-grid{grid-template-columns:1fr;}
  .risk-grid{grid-template-columns:repeat(2,1fr);}
  .phase-tabs{flex-wrap:nowrap;}
}