/* ============================================================
   MARGRAMAR DASHBOARD — ESTILOS
   ============================================================ */

:root {
  --cor-fundo-principal:   #1A1814;
  --cor-fundo-secundario:  #242018;
  --cor-fundo-card:        #2E2A24;
  --cor-dourado:           #C9A84C;
  --cor-dourado-claro:     #E8C97A;
  --cor-pedra:             #8C7B6B;
  --cor-pedra-clara:       #B5A898;
  --cor-off-white:         #F5F0E8;
  --cor-off-white-muted:   #D4CFC6;
  --cor-borda:             #3D3830;
  --cor-alta:              #C9A84C;
  --cor-media:             #8C7B6B;
  --cor-baixa:             #3D3830;
  --cor-erro:              #c0392b;
  --cor-sucesso:           #27ae60;
  --radius:                8px;
  --transition:            all 0.3s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Inter', sans-serif;
  background:
    radial-gradient(ellipse at 15% 0%,   rgba(201,168,76,0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 90%,  rgba(140,90,30,0.14)  0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%,  rgba(201,168,76,0.04) 0%, transparent 70%),
    #08070A;
  color: var(--cor-off-white);
  overflow: hidden;
  font-size: 15px;
}

/* ─── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cor-borda); border-radius: 3px; }

/* ─── HEADER ─────────────────────────────────────────────── */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 56px;
  background: linear-gradient(135deg, rgba(35,28,16,0.72) 0%, rgba(18,15,10,0.80) 100%);
  backdrop-filter: blur(32px) saturate(200%) brightness(1.05);
  -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(1.05);
  border-bottom: 1px solid rgba(201,168,76,0.25);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 4px 32px rgba(0,0,0,0.55),
    0 0 80px rgba(201,168,76,0.04);
}

.header-brand { display: flex; align-items: center; gap: 10px; }
.header-label { font-family: 'Playfair Display', serif; font-size: 16px; color: var(--cor-dourado); letter-spacing: 2px; }
.header-divider { color: var(--cor-borda); }
.header-sub { font-size: 12px; color: var(--cor-pedra); text-transform: uppercase; letter-spacing: 2px; }

.header-center { text-align: center; }
.header-time { font-size: 22px; font-weight: 600; color: var(--cor-off-white); letter-spacing: 2px; line-height: 1; }
.header-date { font-size: 11px; color: var(--cor-pedra); margin-top: 2px; text-transform: capitalize; }

.sync-status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--cor-pedra); }
.sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cor-pedra); transition: var(--transition); }
.sync-dot.ok { background: var(--cor-sucesso); }
.sync-dot.error { background: var(--cor-erro); }

/* ─── TELAS ──────────────────────────────────────────────── */
.screens-container {
  position: fixed; top: 56px; left: 0; right: 0; bottom: 56px;
  overflow: hidden;
}

.screen {
  position: absolute; inset: 0;
  padding: 24px 28px;
  overflow-y: auto;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.screen.active {
  opacity: 1; transform: translateX(0);
  pointer-events: all;
}

.screen.exit {
  opacity: 0; transform: translateX(-40px);
}

/* ─── TÍTULOS DE TELA ────────────────────────────────────── */
.screen-title {
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 400;
  color: var(--cor-off-white);
  margin-bottom: 20px;
}

.screen-title span { color: var(--cor-dourado); }

/* ─── CARDS ──────────────────────────────────────────────── */
.card {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: var(--transition);
}

.card:hover { border-color: var(--cor-pedra); }

.card.priority-alta  { border-left: 3px solid var(--cor-alta); }
.card.priority-media { border-left: 3px solid var(--cor-media); }
.card.priority-baixa { border-left: 3px solid var(--cor-baixa); }

.card-title { font-size: 14px; font-weight: 600; color: var(--cor-off-white); margin-bottom: 6px; }
.card-meta  { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ─── CHIPS / BADGES ─────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 0.5px;
}

.chip-alta   { background: rgba(201,168,76,0.15); color: var(--cor-dourado); }
.chip-media  { background: rgba(140,123,107,0.2); color: var(--cor-pedra-clara); }
.chip-baixa  { background: rgba(61,56,48,0.5);   color: var(--cor-pedra); }
.chip-trello { background: rgba(0,121,191,0.2);  color: #4faadf; }
.chip-local  { background: rgba(201,168,76,0.1); color: var(--cor-dourado-claro); }

.chip-status-fazer     { background: rgba(140,123,107,0.2); color: var(--cor-pedra-clara); }
.chip-status-andamento { background: rgba(201,168,76,0.15); color: var(--cor-dourado); }
.chip-status-aguardando{ background: rgba(180,130,40,0.15); color: #e8a030; }
.chip-status-concluido { background: rgba(39,174,96,0.15);  color: #5dca8a; }

/* ─── TELA 1 — HOJE ──────────────────────────────────────── */
.hoje-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 12px;
}

.hoje-counter { font-size: 13px; color: var(--cor-pedra); }
.hoje-counter strong { color: var(--cor-dourado); }

.filter-bar { display: flex; gap: 6px; }
.filter-btn {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(201,168,76,0.15);
  color: var(--cor-pedra); padding: 5px 14px; border-radius: 20px;
  font-size: 12px; cursor: pointer; transition: var(--transition);
  font-family: 'Inter', sans-serif;
}
.filter-btn:hover { border-color: var(--cor-pedra); color: var(--cor-off-white); background: rgba(255,255,255,0.07); }
.filter-btn.active { border-color: var(--cor-dourado); color: var(--cor-dourado); background: rgba(201,168,76,0.14); box-shadow: 0 0 12px rgba(201,168,76,0.15); }

.tasks-list { display: flex; flex-direction: column; gap: 8px; }

.task-card-row {
  background: linear-gradient(135deg, rgba(40,32,16,0.52) 0%, rgba(20,16,10,0.60) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(201,168,76,0.16);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  transition: var(--transition);
  box-shadow:
    0 2px 16px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.2);
}
.task-card-row:hover {
  border-color: rgba(201,168,76,0.45);
  box-shadow:
    0 6px 28px rgba(0,0,0,0.45),
    0 0 0 1px rgba(201,168,76,0.08),
    inset 0 1px 0 rgba(255,255,255,0.09);
  transform: translateY(-1px);
}
.task-card-row.priority-alta  { border-left: 3px solid var(--cor-alta); }
.task-card-row.priority-media { border-left: 3px solid var(--cor-media); }
.task-card-row.priority-baixa { border-left: 3px solid var(--cor-baixa); }

.task-main-col { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.task-title-col { font-size: 14px; color: var(--cor-off-white); font-weight: 500; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tag-area {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.8px;
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
  flex-shrink: 0;
  /* cor padrão (sem área mapeada) */
  color: var(--cor-dourado);
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.3);
}
/* ── cores por área ── */
/* Novas áreas */
.tag-area-branding                        { color:#a8e6cf; background:rgba(168,230,207,0.15); border-color:rgba(168,230,207,0.4); }
.tag-area-rh-dp                           { color:#82e0aa; background:rgba(46,204,113,0.15);  border-color:rgba(46,204,113,0.4); }
.tag-area-site-lp                         { color:#f7dc6f; background:rgba(241,196,15,0.13);  border-color:rgba(241,196,15,0.35); }
.tag-area-brindes                         { color:#f8c471; background:rgba(230,168,23,0.13);  border-color:rgba(230,168,23,0.35); }
.tag-area-lancamento-produto              { color:#fad7a0; background:rgba(243,156,18,0.13);  border-color:rgba(243,156,18,0.35); }
.tag-area-eventos                         { color:#f5b7b1; background:rgba(231,76,60,0.10);   border-color:rgba(231,76,60,0.28); }
.tag-area-feira                           { color:#f1948a; background:rgba(192,57,43,0.15);   border-color:rgba(192,57,43,0.4); }
.tag-area-redes-sociais                   { color:#c39bd3; background:rgba(155,89,182,0.15);  border-color:rgba(155,89,182,0.4); }
.tag-area-endomarketing                   { color:#aed6f1; background:rgba(93,173,226,0.12);  border-color:rgba(93,173,226,0.3); }
.tag-area-comercial                       { color:#7fb3d3; background:rgba(41,128,185,0.15);  border-color:rgba(41,128,185,0.35); }
.tag-area-comunicacao-visual              { color:#76d7c4; background:rgba(26,188,156,0.15);  border-color:rgba(26,188,156,0.35); }
.tag-area-patrocinios-doacoes             { color:#a9dfbf; background:rgba(39,174,96,0.12);   border-color:rgba(39,174,96,0.3); }
.tag-area-video-foto                      { color:#a9cce3; background:rgba(30,132,73,0.15);   border-color:rgba(30,132,73,0.4); }
.tag-area-grafica                         { color:#aab7b8; background:rgba(86,101,115,0.18);  border-color:rgba(86,101,115,0.4); }
/* Nomes antigos (retrocompatibilidade) */
.tag-area-tse                             { color:#c39bd3; background:rgba(155,89,182,0.15);  border-color:rgba(155,89,182,0.4); }
.tag-area-evento                          { color:#f5b7b1; background:rgba(231,76,60,0.10);   border-color:rgba(231,76,60,0.28); }
.tag-area-gestao-de-mkt                   { color:#82e0aa; background:rgba(46,204,113,0.12);  border-color:rgba(46,204,113,0.3); }
.tag-area-brinde                          { color:#f8c471; background:rgba(230,168,23,0.13);  border-color:rgba(230,168,23,0.35); }
.tag-area-site                            { color:#f7dc6f; background:rgba(241,196,15,0.13);  border-color:rgba(241,196,15,0.35); }
.tag-area-fotos                           { color:#a9cce3; background:rgba(30,132,73,0.15);   border-color:rgba(30,132,73,0.4); }
.tag-area-ia                              { color:#aed6f1; background:rgba(93,173,226,0.12);  border-color:rgba(93,173,226,0.3); }
.tag-area-aprovacao                       { color:#f1948a; background:rgba(192,57,43,0.13);   border-color:rgba(192,57,43,0.32); }
.tag-area-orcamento                       { color:#fad7a0; background:rgba(230,126,34,0.12);  border-color:rgba(230,126,34,0.3); }
.task-desc-preview { font-size: 12px; color: var(--cor-pedra-clara); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-solicitante { font-size: 11px; color: var(--cor-pedra); }
.task-meta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.task-resp { font-size: 11px; color: var(--cor-pedra-clara); }
.task-resp strong { color: var(--cor-off-white); font-weight: 600; }
.task-sol  { font-size: 11px; color: var(--cor-pedra); }
.task-card-row:hover { border-color: var(--cor-dourado) !important; }
.task-origin { font-size: 10px; }

.empty-state {
  text-align: center; padding: 60px 20px;
  color: var(--cor-pedra); font-size: 14px;
}
.empty-state .empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.5; }

/* ─── TELA 2 — SEMANA ────────────────────────────────────── */
.week-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px; height: calc(100% - 60px);
}

.week-col {
  background: var(--cor-fundo-secundario);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.week-col.today { border-color: var(--cor-dourado); }

.week-col-header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-fundo-card);
}

.week-col.today .week-col-header { background: rgba(201,168,76,0.08); }

.week-day-name { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--cor-pedra); }
.week-day-num  { font-size: 20px; font-weight: 600; color: var(--cor-off-white); line-height: 1.2; }
.week-col.today .week-day-num { color: var(--cor-dourado); }
.week-count { font-size: 11px; color: var(--cor-pedra); margin-top: 2px; }

.week-col-body { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }

.week-card {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
}
.week-card.priority-alta  { border-left: 3px solid var(--cor-alta); }
.week-card.priority-media { border-left: 3px solid var(--cor-media); }
.week-card.priority-baixa { border-left: 3px solid var(--cor-baixa); }
.week-card-title { color: var(--cor-off-white); font-weight: 500; line-height: 1.3; margin-bottom: 4px; }
.week-card-sub { color: var(--cor-pedra); font-size: 11px; }

/* ─── TELA 3 — CALENDÁRIO ────────────────────────────────── */

/* A tela calendário não rola — o grid ocupa 100% da altura */
#screen-calendario {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
}
#screen-calendario .screen-title {
  font-size: 22px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.cal-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.cal-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cal-nav {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.cal-nav-btn {
  background: var(--cor-fundo-card); border: 1px solid var(--cor-borda);
  color: var(--cor-off-white); width: 28px; height: 28px;
  border-radius: 6px; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.cal-nav-btn:hover { border-color: var(--cor-dourado); color: var(--cor-dourado); }
.cal-month-label { font-family: 'Playfair Display', serif; font-size: 16px; color: var(--cor-off-white); }

.cal-grid {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px; margin-bottom: 3px;
  flex-shrink: 0;
}
.cal-weekday {
  text-align: center; font-size: 10px; color: var(--cor-pedra);
  text-transform: uppercase; letter-spacing: 1px; padding: 4px 0;
}

.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: 2px;
  flex: 1;
  min-height: 0;
}

.cal-day {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: 5px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start;
  padding: 4px 2px 2px;
  cursor: pointer; transition: var(--transition);
  font-size: 12px; color: var(--cor-off-white-muted);
  overflow: hidden;
  min-height: 0;
}
.cal-day:hover { border-color: var(--cor-pedra); }
.cal-day.today { border-color: var(--cor-dourado); color: var(--cor-dourado); font-weight: 600; }
.cal-day.other-month { opacity: 0.3; }
.cal-day.selected { background: rgba(201,168,76,0.1); border-color: var(--cor-dourado); }
.cal-day-dots { display: flex; gap: 3px; justify-content: center; margin-top: 2px; }
.cal-day-dot { width: 4px; height: 4px; border-radius: 50%; }
.dot-pending { background: var(--cor-dourado); }
.dot-done    { background: #27ae60; }
.cal-check   { color: #27ae60; font-size: 11px; margin-right: 4px; font-weight: 600; }

/* Sidebar calendário */
.cal-sidebar {
  display: flex; flex-direction: column; gap: 12px;
  min-height: 0;
  overflow: hidden;
}
.cal-sidebar-title {
  font-size: 11px; color: var(--cor-pedra);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
  flex-shrink: 0;
}

.cal-sidebar > div {
  display: flex; flex-direction: column;
  min-height: 0;
  flex: 1;
}

.cal-event-list { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; flex: 1; min-height: 0; }
.cal-event-item {
  background: var(--cor-fundo-card); border: 1px solid var(--cor-borda);
  border-radius: 6px; padding: 8px 10px; font-size: 12px;
  flex-shrink: 0;
}
.cal-event-item.priority-alta  { border-left: 3px solid var(--cor-alta); }
.cal-event-item.priority-media { border-left: 3px solid var(--cor-media); }
.cal-event-title { color: var(--cor-off-white); font-weight: 500; font-size: 12px; }
.cal-event-meta  { color: var(--cor-pedra); font-size: 10px; margin-top: 2px; }

/* ─── TELA 4 — EQUIPE ────────────────────────────────────── */
.equipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.equipe-section {
  background: var(--cor-fundo-secundario);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius);
  padding: 16px;
}
.equipe-section-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--cor-pedra); margin-bottom: 12px;
  border-bottom: 1px solid var(--cor-borda); padding-bottom: 8px;
}

.member-block { margin-bottom: 14px; }
.member-name {
  font-size: 13px; font-weight: 600; color: var(--cor-off-white);
  margin-bottom: 6px; display: flex; align-items: center; gap: 8px;
}
.member-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.member-task {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  padding: 8px 10px; margin-bottom: 5px;
  font-size: 12px;
}
.member-task-title { color: var(--cor-off-white-muted); }
.member-task-meta  { display: flex; gap: 6px; margin-top: 4px; align-items: center; }

.chip-atrasado { background: rgba(192,57,43,0.15); color: #e74c3c; }
.chip-andamento{ background: rgba(201,168,76,0.15); color: var(--cor-dourado); }
.chip-concluido{ background: rgba(39,174,96,0.15);  color: #5dca8a; }

/* Cores por colaborador */
.color-danielle   { background: #7B68EE; }
.color-diana      { background: #20B2AA; }
.color-thallyta   { background: #DA70D6; }
.color-isaac      { background: #FF8C00; }
.color-isacramos  { background: #4169E1; }
.color-mluiza     { background: #3CB371; }
.color-michell    { background: var(--cor-dourado); }

/* ─── BARRA DE NAVEGAÇÃO INFERIOR ────────────────────────── */
.nav-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  background: linear-gradient(180deg, rgba(25,20,12,0.70) 0%, rgba(12,10,6,0.82) 100%);
  backdrop-filter: blur(32px) saturate(200%) brightness(1.05);
  -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(1.05);
  border-top: 1px solid rgba(201,168,76,0.25);
  box-shadow:
    0 -1px 0 rgba(255,255,255,0.05) inset,
    0 -4px 32px rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  z-index: 200;
  padding: 0 12px;
}

.btn-nav {
  display: flex; align-items: center; gap: 7px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--cor-pedra-clara);
  padding: 8px 20px; border-radius: 24px;
  font-size: 13px; font-weight: 500;
  cursor: pointer; transition: var(--transition);
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
}
.btn-nav:hover {
  border-color: var(--cor-borda);
  color: var(--cor-off-white);
  background: var(--cor-fundo-card);
}
.btn-nav.active {
  background: rgba(201,168,76,0.12);
  border-color: var(--cor-dourado);
  color: var(--cor-dourado);
}

/* ─── BOTÃO NOVA DEMANDA (flutuante canto inferior direito) ── */
.btn-nova {
  position: fixed;
  bottom: 72px;
  right: 24px;
  background: var(--cor-dourado);
  border: none; color: #1A1814;
  padding: 11px 20px; border-radius: 24px;
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: 13px; font-weight: 600;
  font-family: 'Inter', sans-serif;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(201,168,76,0.35);
  z-index: 201;
}
.btn-nova:hover { background: var(--cor-dourado-claro); box-shadow: 0 6px 20px rgba(201,168,76,0.45); }

/* ─── MODAL ──────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(4,3,2,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.modal-overlay.hidden { display: none; }

.modal {
  background: linear-gradient(145deg, rgba(42,34,18,0.82) 0%, rgba(18,14,8,0.88) 100%);
  backdrop-filter: blur(40px) saturate(200%) brightness(1.08);
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.08);
  border: 1px solid rgba(201,168,76,0.28);
  border-radius: 20px;
  width: 100%; max-width: 580px;
  max-height: 90vh; overflow-y: auto;
  position: relative;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.3);
}

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--cor-borda);
}
.modal-title { font-family: 'Playfair Display', serif; font-size: 20px; color: var(--cor-off-white); }
.modal-close {
  background: transparent; border: none; color: var(--cor-pedra);
  cursor: pointer; padding: 4px; border-radius: 4px; transition: var(--transition);
}
.modal-close:hover { color: var(--cor-off-white); }

.modal-body { padding: 20px 24px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-group.full { grid-column: 1 / -1; }
.form-group { display: flex; flex-direction: column; gap: 6px; }

label { font-size: 12px; color: var(--cor-pedra-clara); text-transform: uppercase; letter-spacing: 0.5px; }

input[type="text"],
input[type="date"],
textarea,
select {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(201,168,76,0.18);
  border-radius: 8px;
  color: var(--cor-off-white);
  padding: 9px 12px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  transition: var(--transition);
  width: 100%;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--cor-dourado);
}

textarea { resize: vertical; min-height: 72px; }

select option { background: var(--cor-fundo-card); }

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.6);
  cursor: pointer;
}

.form-check-group {
  justify-content: center;
}

.checkbox-label {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; font-size: 13px; color: var(--cor-off-white-muted);
  text-transform: none; letter-spacing: normal;
}
.checkbox-label input { display: none; }
.checkbox-custom {
  width: 18px; height: 18px; border: 1.5px solid var(--cor-borda);
  border-radius: 4px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.checkbox-label input:checked ~ .checkbox-custom {
  background: var(--cor-dourado); border-color: var(--cor-dourado);
}
.checkbox-label input:checked ~ .checkbox-custom::after {
  content: '✓'; font-size: 11px; color: #1A1814; font-weight: 700;
}

.modal-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding-top: 16px; margin-top: 8px;
  border-top: 1px solid var(--cor-borda);
}

.btn-primary {
  background: var(--cor-dourado); color: #1A1814;
  border: none; padding: 10px 24px; border-radius: 6px;
  font-weight: 600; font-size: 14px; cursor: pointer;
  font-family: 'Inter', sans-serif; transition: var(--transition);
}
.btn-primary:hover { background: var(--cor-dourado-claro); }

.btn-secondary {
  background: transparent; color: var(--cor-pedra-clara);
  border: 1px solid var(--cor-borda); padding: 10px 20px;
  border-radius: 6px; font-size: 14px; cursor: pointer;
  font-family: 'Inter', sans-serif; transition: var(--transition);
}
.btn-secondary:hover { border-color: var(--cor-pedra); color: var(--cor-off-white); }

.btn-danger {
  background: transparent; color: #c0392b;
  border: 1px solid #c0392b; padding: 10px 20px;
  border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500;
  font-family: 'Inter', sans-serif; transition: var(--transition);
}
.btn-danger:hover { background: rgba(192,57,43,0.12); }

/* ─── BADGE DE PRAZO (esquerda do card) ─────────────────── */
.due-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 64px; width: 64px;
  padding: 6px 4px;
  border-radius: 6px;
  font-size: 13px; font-weight: 700;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.2px;
}
.due-badge .due-day   { font-size: 20px; font-weight: 800; line-height: 1; }
.due-badge .due-month { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; margin-top: 1px; }
.due-red    { background: rgba(192,57,43,0.20);  color: #f1948a; border: 1px solid rgba(192,57,43,0.45); }
.due-yellow { background: rgba(243,156,18,0.18); color: #f8c471; border: 1px solid rgba(243,156,18,0.45); }
.due-green  { background: rgba(39,174,96,0.15);  color: #82e0aa; border: 1px solid rgba(39,174,96,0.40); }
.due-empty  { background: transparent; border: 1px solid transparent; }

.modal-feedback {
  margin: 0 24px 20px;
  padding: 10px 14px; border-radius: 6px;
  font-size: 13px;
}
.modal-feedback.success { background: rgba(39,174,96,0.15); color: #5dca8a; border: 1px solid rgba(39,174,96,0.3); }
.modal-feedback.error   { background: rgba(192,57,43,0.15);  color: #e74c3c; border: 1px solid rgba(192,57,43,0.3); }
.modal-feedback.hidden  { display: none; }

/* ─── BOTÃO CONCLUIR ─────────────────────────────────────── */
.btn-concluir {
  background: transparent;
  border: 1px solid var(--cor-borda);
  color: var(--cor-pedra);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
  transition: var(--transition);
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.btn-concluir:hover {
  border-color: var(--cor-sucesso);
  color: var(--cor-sucesso);
  background: rgba(39,174,96,0.08);
}
.btn-concluir.loading {
  opacity: 0.5; cursor: wait;
}
.btn-concluir.done {
  border-color: var(--cor-sucesso);
  color: var(--cor-sucesso);
  background: rgba(39,174,96,0.08);
  cursor: default;
  opacity: 0.85;
}

/* Tarefa concluída — visual riscado/opaco */
.task-concluida {
  opacity: 0.55;
}
.task-concluida .task-title-col,
.task-concluida .week-card-title {
  text-decoration: line-through;
  color: var(--cor-pedra-clara);
}

/* Evento concluído no calendário */
.cal-event-concluida {
  opacity: 0.65;
  border-left-color: var(--cor-sucesso) !important;
}
.cal-event-concluida .cal-event-title {
  text-decoration: line-through;
  color: var(--cor-pedra-clara);
}

/* .fab-stack removido — botões agora estão no .nav-footer */
.btn-metricas {
  display: flex; align-items: center; gap: 7px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--cor-pedra-clara);
  padding: 8px 20px;
  border-radius: 24px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-metricas:hover {
  border-color: var(--cor-borda);
  color: var(--cor-dourado);
  background: rgba(201,168,76,0.08);
}

/* ─── OVERLAY MÉTRICAS ───────────────────────────────────── */
.metricas-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(14,12,10,0.92);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}
.metricas-overlay.hidden { display: none; }

.metricas-panel {
  background: var(--cor-fundo-secundario);
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  width: 96vw; max-width: 1300px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}

.metricas-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--cor-borda);
  flex-shrink: 0;
}
.metricas-header-left { display: flex; align-items: center; gap: 24px; }
.metricas-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 600;
  color: var(--cor-off-white);
}
.metricas-month-nav { display: flex; align-items: center; gap: 10px; }
.met-nav-btn {
  background: transparent; border: 1px solid var(--cor-borda);
  color: var(--cor-pedra-clara); width: 30px; height: 30px;
  border-radius: 6px; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.met-nav-btn:hover:not(:disabled) { border-color: var(--cor-dourado); color: var(--cor-dourado); }
.met-nav-btn:disabled { opacity: 0.3; cursor: default; }
.met-month-label {
  font-size: 14px; font-weight: 600; color: var(--cor-dourado);
  min-width: 160px; text-align: center;
}
.metricas-close {
  background: transparent; border: 1px solid var(--cor-borda);
  color: var(--cor-pedra); width: 36px; height: 36px;
  border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.metricas-close:hover { border-color: var(--cor-erro); color: var(--cor-erro); }

.metricas-body {
  padding: 20px 28px;
  overflow-y: auto;
  flex: 1;
  display: flex; flex-direction: column; gap: 16px;
}

/* ─── KPIs ───────────────────────────────────────────────── */
.met-kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.met-kpi {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
}
.met-kpi-value {
  font-family: 'Playfair Display', serif;
  font-size: 30px; font-weight: 600; line-height: 1;
  margin-bottom: 6px;
}
.met-kpi-label {
  font-size: 10px; color: var(--cor-pedra-clara);
  text-transform: uppercase; letter-spacing: 0.07em;
}

/* ─── LINHA SUPERIOR (donut + comparativo) ───────────────── */
.met-row-top {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
}
.met-card {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.met-card-title {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--cor-dourado);
  font-weight: 600; padding-bottom: 8px;
  border-bottom: 1px solid var(--cor-borda);
}

/* Donut */
.met-donut-card { align-items: center; }
.met-donut-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.met-donut-svg { width: 130px; height: 130px; }
.met-donut-label {
  position: absolute; display: flex; flex-direction: column; align-items: center;
}
.met-donut-pct {
  font-family: 'Playfair Display', serif;
  font-size: 26px; font-weight: 600; color: var(--cor-off-white);
}
.met-donut-sub { font-size: 11px; color: var(--cor-pedra-clara); margin-top: 2px; }

/* Comparativo */
.met-comp-grid { display: flex; flex-direction: column; gap: 10px; }
.met-comp-item { display: flex; flex-direction: column; gap: 3px; }
.met-comp-label { font-size: 11px; color: var(--cor-pedra-clara); }
.met-comp-row { display: flex; align-items: baseline; gap: 8px; }
.met-comp-cur { font-size: 20px; font-weight: 600; color: var(--cor-off-white); font-family: 'Playfair Display', serif; }
.met-comp-prev { font-size: 11px; color: var(--cor-pedra); }
.met-comp-diff { font-size: 13px; font-weight: 600; }
.met-comp-diff.up   { color: #6B8C7B; }
.met-comp-diff.down { color: #E8C97A; }

.met-comp-bars { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.comp-bar-row { display: grid; grid-template-columns: 90px 1fr 50px; align-items: center; gap: 8px; }
.comp-bar-label { font-size: 11px; color: var(--cor-pedra-clara); }
.comp-bar-track { height: 10px; border-radius: 5px; overflow: hidden; background: var(--cor-borda); }
.comp-bar-fill  { height: 100%; border-radius: 5px; position: relative; }
.comp-bar-done  { position: absolute; left:0; top:0; height:100%; border-radius: 5px; }
.comp-bar-num   { font-size: 11px; color: var(--cor-pedra-clara); text-align: right; }

/* ─── LINHA INFERIOR (gráficos de barra) ─────────────────── */
.met-row-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
}
.hbar-row {
  display: grid; grid-template-columns: 90px 1fr 38px;
  align-items: center; gap: 8px;
}
.hbar-label {
  font-size: 12px; color: var(--cor-off-white-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hbar-track {
  height: 8px; background: var(--cor-borda);
  border-radius: 4px; overflow: hidden;
}
.hbar-fill {
  height: 100%; border-radius: 4px; position: relative;
  width: 0%; transition: width 0.7s ease;
}
.hbar-done {
  position: absolute; left:0; top:0; height: 100%;
  border-radius: 4px; width: 0%; transition: width 0.7s ease 0.2s;
  background: #27ae60;
}
.hbar-counts { font-size: 11px; color: var(--cor-pedra-clara); text-align: right; }

/* Tarefas em aberto */
.met-aberta {
  padding: 7px 0; border-bottom: 1px solid var(--cor-borda);
}
.met-aberta:last-child { border-bottom: none; }
.met-aberta-title { font-size: 12px; color: var(--cor-off-white-muted); }
.met-aberta-meta { font-size: 11px; color: var(--cor-pedra); display: flex; gap: 8px; margin-top: 2px; }
.met-late-badge {
  background: rgba(192,57,43,0.15); color: #e74c3c;
  border-radius: 4px; padding: 1px 6px; font-size: 10px;
}
.met-aberta.late .met-aberta-title { color: #e07070; }

.met-empty { font-size: 12px; color: var(--cor-pedra); padding: 6px 0; }

.btn-editar {
  background: transparent;
  border: 1px solid var(--cor-borda);
  color: var(--cor-pedra);
  width: 28px; height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
  padding: 0;
}
.btn-editar:hover {
  border-color: var(--cor-dourado);
  color: var(--cor-dourado);
  background: rgba(201,168,76,0.08);
}

/* Modal edição — badge origem */
.modal-origin-badge {
  font-size: 11px; color: var(--cor-pedra);
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: 20px; padding: 2px 10px;
  display: inline-flex; align-items: center; gap: 4px;
}

/* ─── UTILITÁRIOS ────────────────────────────────────────── */
.section-header { margin-bottom: 16px; }
.text-gold   { color: var(--cor-dourado); }
.text-muted  { color: var(--cor-pedra); }
.text-small  { font-size: 12px; }

.alert-banner {
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px; color: var(--cor-dourado-claro);
  margin-bottom: 16px;
}


/* ─── PAUTA REUNIÃO ──────────────────────────────────────── */
.pauta-list { gap: 8px; }

.pauta-card-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(40,32,16,0.52) 0%, rgba(20,16,10,0.60) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(201,168,76,0.16);
  border-radius: 12px;
  transition: var(--transition);
  box-shadow:
    0 2px 16px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.2);
}
.pauta-card-row:hover {
  border-color: rgba(201,168,76,0.45);
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.09);
}

/* Badge de data igual ao due-badge */
.pauta-date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  width: 64px;
  border-radius: 8px;
  padding: 6px 4px;
  background: rgba(140,123,107,0.18);
  border: 1px solid rgba(140,123,107,0.3);
  flex-shrink: 0;
}
.pauta-date-badge .due-day   { font-size: 20px; font-weight: 800; line-height: 1; color: var(--cor-off-white); }
.pauta-date-badge .due-month { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--cor-pedra-clara); letter-spacing: 0.5px; }
.pauta-date-empty {
  background: transparent;
  border-color: var(--cor-borda);
  color: var(--cor-pedra);
  min-width: 64px;
  width: 64px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--cor-borda);
  flex-shrink: 0;
}

.pauta-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--cor-off-white);
}

/* Tags de participantes */
.pauta-tag-part {
  display: inline-block;
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  margin-right: 7px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.pauta-tag-diretoria { background: rgba(201,168,76,0.18);  color: #E8C97A; border: 1px solid rgba(201,168,76,0.4); }
.pauta-tag-comercial  { background: rgba(52,152,219,0.18);  color: #7EC8E3; border: 1px solid rgba(52,152,219,0.4); }
.pauta-tag-marketing  { background: rgba(39,174,96,0.18);   color: #6FCF97; border: 1px solid rgba(39,174,96,0.4);  }
.pauta-tag-outro      { background: rgba(155,89,182,0.18);  color: #C39BD3; border: 1px solid rgba(155,89,182,0.4); }

/* ─── RICH TEXT EDITOR ───────────────────────────────────── */
.rte-toolbar {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}
.rte-btn {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  color: var(--cor-pedra-clara);
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
  line-height: 1.4;
}
.rte-btn:hover,
.rte-btn.active {
  border-color: var(--cor-dourado);
  color: var(--cor-dourado);
  background: rgba(201,168,76,0.08);
}
.rte-body {
  min-height: 120px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--cor-fundo-principal);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 14px;
  color: var(--cor-off-white);
  line-height: 1.6;
  outline: none;
  transition: border-color 0.2s;
}
.rte-body:focus { border-color: var(--cor-dourado); }
.rte-body:empty::before {
  content: attr(data-placeholder);
  color: var(--cor-pedra);
  pointer-events: none;
}
.rte-body ul, .rte-body ol { padding-left: 20px; }
.rte-body li { margin: 2px 0; }

/* ─── BOTÃO IMPRIMIR ─────────────────────────────────────── */
.btn-print {
  display: flex; align-items: center; gap: 5px;
  background: transparent;
  border: 1px solid var(--cor-borda);
  color: var(--cor-pedra-clara);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}
.btn-print:hover {
  border-color: var(--cor-dourado);
  color: var(--cor-dourado);
  background: rgba(201,168,76,0.08);
}

/* ─── BOTÃO ⇢ GESTÃO (checkpoint) ───────────────────────── */
.btn-cp-to-gestao {
  background: transparent;
  border: 1px solid rgba(201,168,76,0.35);
  color: var(--cor-dourado);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}
.btn-cp-to-gestao:hover {
  background: rgba(201,168,76,0.12);
  border-color: var(--cor-dourado);
}
.btn-cp-to-gestao.done {
  color: var(--cor-sucesso);
  border-color: rgba(39,174,96,0.4);
  cursor: default;
}

/* ─── BOTÃO ⇢ PAUTA (gestão mkт) ────────────────────────── */
.btn-to-pauta {
  background: transparent;
  border: 1px solid rgba(140,123,107,0.4);
  color: var(--cor-pedra-clara);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}
.btn-to-pauta:hover {
  background: rgba(140,123,107,0.12);
  border-color: var(--cor-pedra-clara);
}
.btn-to-pauta.done {
  color: var(--cor-sucesso);
  border-color: rgba(39,174,96,0.4);
  cursor: default;
}

/* ─── FILTROS PAUTA (dupla linha) ────────────────────────── */
.pauta-filters-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.pauta-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pauta-filter-label {
  font-size: 11px;
  color: var(--cor-pedra);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  min-width: 84px;
}
.btn-cp-to-pauta { background: transparent; border: 1px solid rgba(140,123,107,0.4); color: var(--cor-pedra-clara); border-radius: 6px; padding: 4px 9px; font-size: 11px; cursor: pointer; transition: var(--transition); white-space: nowrap; font-family: 'Inter', sans-serif; } .btn-cp-to-pauta:hover { background: rgba(140,123,107,0.12); border-color: var(--cor-pedra-clara); } .btn-cp-to-pauta.done { color: var(--cor-sucesso); border-color: rgba(39,174,96,0.4); cursor: default; }
.btn-pauta-to-gestao { background: transparent; border: 1px solid rgba(201,168,76,0.35); color: var(--cor-dourado); border-radius: 6px; padding: 4px 9px; font-size: 11px; cursor: pointer; transition: var(--transition); white-space: nowrap; font-family: 'Inter', sans-serif; } .btn-pauta-to-gestao:hover { background: rgba(201,168,76,0.12); border-color: var(--cor-dourado); } .btn-pauta-to-gestao.done { color: var(--cor-sucesso); border-color: rgba(39,174,96,0.4); cursor: default; }

#screen-meetnotes { padding: 0; overflow: hidden; }