/* ==========================================================
   IPSIS — Sistema de Gestão
   Identidade Visual
   ========================================================== */

/* ---------- Variáveis ---------- */
:root {
  --offwhite:   #faf8f5;
  --orange:     #f04a1d;
  --orange-h:   #d63d17;
  --navy:       #08234d;
  --navy-light: #0d3370;
  --white:      #ffffff;
  --bluegray:   #d0daea;
  --rose:       #e8426e;
  --rose-h:     #d0325e;

  --text-dark:  #08234d;
  --text-muted: #6b7a99;
  --border:     #e4e9f0;
  --danger:     #dc3545;

  --sidebar-w:  240px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:   60px;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(8,35,77,.07);
  --shadow:    0 4px 16px rgba(8,35,77,.10);
  --shadow-lg: 0 8px 32px rgba(8,35,77,.14);

  --transition: 200ms ease;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
  font-family: 'Telegraf', 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;
  font-weight: 300;
  background: var(--offwhite);
  color: var(--text-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font: inherit; border: none; background: none; }

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  line-height: 1.25;
}

/* ==========================================================
   LAYOUT: SIDEBAR + MAIN WRAPPER
   ========================================================== */

.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--navy);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: width var(--transition);
  overflow: hidden;
}

.main-wrapper {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transition);
}

/* Collapsed sidebar */
.sidebar.collapsed { width: var(--sidebar-w-collapsed); }
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .user-details,
.sidebar.collapsed .sidebar-logo img { opacity: 0; pointer-events: none; }
.main-wrapper.expanded { margin-left: var(--sidebar-w-collapsed); }

/* ---------- Sidebar logo ---------- */
.sidebar-logo {
  padding: 24px 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-logo a { display: block; }
.logo-img {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1); /* logo branca sobre fundo navy */
  transition: opacity var(--transition);
}

/* ---------- Sidebar nav ---------- */
.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.nav-section-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  padding: 12px 8px 6px;
  white-space: nowrap;
  overflow: hidden;
}

.nav-divider {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 10px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,.72);
  font-size: .9rem;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
  overflow: hidden;
}
.nav-item i { font-size: 1.1rem; flex-shrink: 0; width: 20px; text-align: center; }
.nav-item:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.nav-item.active {
  background: var(--orange);
  color: #fff;
}

/* ---------- Sidebar footer ---------- */
.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: .95rem;
  flex-shrink: 0;
}

.user-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }

.user-details {
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: opacity var(--transition);
}
.user-name {
  color: #fff;
  font-size: .85rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-role {
  color: rgba(255,255,255,.5);
  font-size: .72rem;
}

.btn-logout {
  color: rgba(255,255,255,.5);
  font-size: 1.1rem;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
  flex-shrink: 0;
}
.btn-logout:hover { color: var(--rose); }

/* ==========================================================
   TOPBAR
   ========================================================== */

.topbar {
  height: var(--topbar-h);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.sidebar-toggle {
  font-size: 1.3rem;
  color: var(--text-muted);
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
  flex-shrink: 0;
}
.sidebar-toggle:hover { color: var(--navy); }

.topbar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  font-size: .85rem;
}
.breadcrumb-item {
  color: var(--text-muted);
}
.breadcrumb-item:last-child { color: var(--text-dark); font-weight: 500; }
.breadcrumb-item:hover { color: var(--orange); }
.breadcrumb-sep { color: var(--border); font-size: .8rem; }

.topbar-greeting {
  font-size: .85rem;
  color: var(--text-muted);
}
.topbar-right { display: flex; align-items: center; gap: 12px; }

/* ==========================================================
   PAGE CONTENT
   ========================================================== */

.page-content {
  flex: 1;
  padding: 32px 32px 48px;
  max-width: 1280px;
  width: 100%;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.page-title {
  font-size: 1.75rem;
  color: var(--navy);
}
.page-subtitle {
  color: var(--text-muted);
  font-size: .9rem;
  margin-top: 4px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 32px 0 16px;
}
.section-title {
  font-size: 1.1rem;
  color: var(--navy);
}

/* ==========================================================
   FLASH MESSAGES
   ========================================================== */

.flash-container {
  padding: 0 32px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flash-container-auth {
  position: fixed;
  top: 16px; right: 16px;
  width: 340px;
  z-index: 999;
  padding: 0;
}

.flash {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: .88rem;
  border: 1px solid transparent;
}
.flash i:first-child { font-size: 1rem; flex-shrink: 0; }
.flash-close {
  margin-left: auto;
  color: inherit;
  opacity: .6;
  padding: 2px;
}
.flash-close:hover { opacity: 1; }

.flash-success { background: #edfbf3; color: #1a6b3a; border-color: #b8f0d0; }
.flash-danger  { background: #fff0f0; color: #b91c1c; border-color: #fecaca; }
.flash-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.flash-info    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }

/* ==========================================================
   CARDS
   ========================================================== */

.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.form-card { padding: 32px; }

/* ==========================================================
   STAT CARDS
   ========================================================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 8px;
}

.stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.stat-card:hover { box-shadow: var(--shadow); }

.stat-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.stat-icon-orange { background: rgba(240,74,29,.12); color: var(--orange); }
.stat-icon-navy   { background: rgba(8,35,77,.10);   color: var(--navy); }
.stat-icon-blue   { background: rgba(208,218,234,.5); color: #4a6fa5; }
.stat-icon-rose   { background: rgba(232,66,110,.12); color: var(--rose); }

.stat-body { display: flex; flex-direction: column; }
.stat-value {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.stat-label {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ==========================================================
   PILLAR CARDS
   ========================================================== */

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}

.pillar-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.pillar-card:hover,
.pillar-card-active:hover {
  box-shadow: var(--shadow);
  border-color: var(--bluegray);
}

.pillar-card-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  background: rgba(208,218,234,.4);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.pillar-card-title {
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: 6px;
}

/* ==========================================================
   BADGES
   ========================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.badge-green  { background: #edfbf3; color: #1a6b3a; }
.badge-gray   { background: #f1f3f5; color: #6b7a99; }
.badge-orange { background: rgba(240,74,29,.12); color: var(--orange); }
.badge-blue   { background: rgba(208,218,234,.6); color: #2d4e7a; }
.badge-rose   { background: rgba(232,66,110,.1); color: var(--rose); }

.badge-role-super_admin { background: rgba(240,74,29,.12); color: var(--orange); }
.badge-role-colaborador { background: rgba(8,35,77,.08);   color: var(--navy); }
.badge-role-cliente     { background: rgba(232,66,110,.1); color: var(--rose); }

/* ==========================================================
   DATA TABLE
   ========================================================== */

.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th {
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--offwhite);
}
.data-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: .88rem;
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #fafbfd; }

.user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.avatar-sm {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: .8rem;
  flex-shrink: 0;
}

.text-muted { color: var(--text-muted); }
.table-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 20px !important;
  font-size: .9rem;
}

/* Action buttons */
.action-btns { display: flex; gap: 6px; align-items: center; }

.btn-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  transition: all var(--transition);
}
.btn-icon:hover { background: var(--offwhite); color: var(--navy); border-color: var(--bluegray); }
.btn-icon-danger:hover  { background: #fff0f0; color: #b91c1c; border-color: #fecaca; }
.btn-icon-success:hover { background: #edfbf3; color: #1a6b3a; border-color: #b8f0d0; }

/* ==========================================================
   BUTTONS
   ========================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: .88rem;
  font-weight: 500;
  transition: all var(--transition);
  border: 1px solid transparent;
}
.btn-sm { padding: 6px 14px; font-size: .8rem; }
.btn-block { width: 100%; justify-content: center; padding: 12px; font-size: .95rem; }

.btn-primary {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.btn-primary:hover { background: var(--orange-h); border-color: var(--orange-h); }

.btn-outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--border);
}
.btn-outline:hover { background: var(--offwhite); border-color: var(--bluegray); }

/* ==========================================================
   FORMS
   ========================================================== */

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.form-group:last-child { margin-bottom: 0; }

.form-label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.form-hint {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: -2px;
}

.form-input,
.form-select {
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text-dark);
  font-size: .9rem;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  width: 100%;
}
.form-input::placeholder { color: #b0bcc8; }
.form-input:focus,
.form-select:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(240,74,29,.1);
}
.form-input-error { border-color: #f87171 !important; }

.form-error {
  font-size: .78rem;
  color: #b91c1c;
  margin-top: 2px;
}

.form-section-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 0 12px;
  border-top: 1px solid var(--border);
  margin: 4px 0 16px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

/* Password input */
.input-password-wrapper { position: relative; }
.input-password-wrapper .form-input { padding-right: 44px; }
.btn-eye {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1rem;
  padding: 4px;
  transition: color var(--transition);
}
.btn-eye:hover { color: var(--navy); }

/* Checkbox row */
.form-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.form-check-input {
  width: 16px; height: 16px;
  accent-color: var(--orange);
  cursor: pointer;
}
.form-check-label { font-size: .88rem; cursor: pointer; }

/* Toggle */
.toggle-wrapper { display: flex; align-items: center; gap: 10px; }
.toggle-input { display: none; }
.toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle-track {
  width: 42px; height: 24px;
  background: var(--border);
  border-radius: 12px;
  position: relative;
  transition: background var(--transition);
}
.toggle-track::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  top: 3px; left: 3px;
  transition: transform var(--transition);
  box-shadow: var(--shadow-sm);
}
.toggle-input:checked + .toggle-label .toggle-track { background: var(--orange); }
.toggle-input:checked + .toggle-label .toggle-track::after { transform: translateX(18px); }
.toggle-text { font-size: .88rem; }

/* Pillar checkbox cards */
.pillars-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.pillar-check-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  transition: all var(--transition);
  font-size: .85rem;
  color: var(--text-muted);
  text-align: center;
}
.pillar-check-card input[type="checkbox"] { display: none; }
.pillar-check-card i { font-size: 1.4rem; }
.pillar-check-card:hover { border-color: var(--orange); color: var(--navy); }
.pillar-check-card.checked {
  border-color: var(--orange);
  background: rgba(240,74,29,.06);
  color: var(--orange);
}

/* ==========================================================
   LOGIN PAGE
   ========================================================== */

.login-body {
  background: var(--offwhite);
  min-height: 100vh;
  display: flex;
}

.login-layout {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

/* Painel esquerdo */
.login-brand {
  width: 420px;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  flex-shrink: 0;
}
@media (max-width: 768px) { .login-brand { display: none; } }

.login-brand-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.login-logo {
  height: 44px;
  filter: brightness(0) invert(1);
}

.login-tagline {
  color: rgba(255,255,255,.55);
  font-size: .95rem;
  line-height: 1.5;
  max-width: 280px;
}

.login-pillars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pillar-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.7);
  font-size: .85rem;
  padding: 10px 16px;
  background: rgba(255,255,255,.07);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.08);
}
.pillar-badge i { color: var(--orange); font-size: 1rem; }

/* Painel direito */
.login-form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}

.login-card {
  width: 100%;
  max-width: 400px;
}

.login-title {
  font-size: 2rem;
  color: var(--navy);
  margin-bottom: 8px;
}
.login-subtitle {
  color: var(--text-muted);
  font-size: .9rem;
  margin-bottom: 32px;
}

/* ==========================================================
   ERROR PAGES
   ========================================================== */

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 40px;
}

.error-code {
  font-family: 'Playfair Display', serif;
  font-size: 7rem;
  font-weight: 700;
  color: var(--orange);
  line-height: 1;
  margin-bottom: 16px;
}
.error-title {
  font-size: 1.5rem;
  color: var(--navy);
  margin-bottom: 12px;
}
.error-msg {
  color: var(--text-muted);
  margin-bottom: 28px;
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px;
  color: var(--text-muted);
  font-size: .9rem;
  text-align: center;
}
.empty-state i { font-size: 2.5rem; color: var(--bluegray); }

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition), width var(--transition);
  }
  .sidebar.open { transform: translateX(0); }
  .main-wrapper { margin-left: 0 !important; }
  .page-content { padding: 20px 16px 40px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .pillars-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================
   PILAR PRODUTO
   ========================================================== */

/* Filtros */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  align-items: center;
}
.filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-label { font-size: .75rem; font-weight: 700; text-transform: uppercase;
                letter-spacing: .06em; color: var(--text-muted); }
.filter-chip {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: .8rem;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  background: var(--white);
  transition: all var(--transition);
}
.filter-chip:hover { border-color: var(--orange); color: var(--orange); }
.filter-chip.active { background: var(--orange); color: #fff; border-color: var(--orange); }

/* Grid de produtos */
.produto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.produto-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
  cursor: pointer;
}
.produto-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--orange);
  transform: translateY(-2px);
}

.produto-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.produto-tipo-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: rgba(240,74,29,.1);
  color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.produto-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

.produto-card-body { flex: 1; }
.produto-card-nome {
  font-size: 1.1rem;
  color: var(--navy);
  margin-bottom: 6px;
}
.produto-card-tagline {
  font-size: .83rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.produto-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.produto-preco {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
}
.produto-prazo {
  font-size: .78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Status badges */
.badge-status-ativo    { background: #edfbf3; color: #1a6b3a; }
.badge-status-rascunho { background: #fffbeb; color: #92400e; }
.badge-status-inativo  { background: #f1f3f5; color: #6b7a99; }

/* Detalhe do produto */
.detalhe-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 860px) { .detalhe-grid { grid-template-columns: 1fr; } }

.detalhe-section {
  padding: 28px;
  margin-bottom: 20px;
}
.detalhe-section:last-child { margin-bottom: 0; }

.detalhe-section-title {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detalhe-text { font-size: .92rem; line-height: 1.75; color: var(--text-dark); }

.entregaveis-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.entregaveis-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9rem;
  line-height: 1.5;
}
.entregaveis-list li i { color: var(--orange); margin-top: 2px; flex-shrink: 0; }

.detalhe-info-card { padding: 24px; }
.info-list { display: flex; flex-direction: column; gap: 0; }
.info-list dt {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-top: 16px;
}
.info-list dt:first-child { margin-top: 0; }
.info-list dd { font-size: .9rem; color: var(--text-dark); margin-top: 3px; }
.info-preco {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--navy);
}

/* Botões de documento */
.doc-buttons { display: flex; flex-direction: column; gap: 10px; }
.doc-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text-dark);
  font-size: .9rem;
  transition: all var(--transition);
}
.doc-btn:hover { border-color: var(--orange); color: var(--orange); background: rgba(240,74,29,.04); }
.doc-btn i:first-child { font-size: 1.1rem; flex-shrink: 0; }
.doc-btn-arrow { margin-left: auto; }
.doc-btn-hint { margin-left: auto; font-size: .75rem; color: var(--text-muted); }
.doc-btn-empty { opacity: .6; }
.doc-btn-empty:hover { border-color: var(--border); color: var(--text-muted); background: transparent; }

/* Tabs de documento no form */
.doc-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 16px;
}
.doc-tab {
  padding: 10px 18px;
  font-size: .85rem;
  color: var(--text-muted);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.doc-tab:hover { color: var(--navy); }
.doc-tab.active { color: var(--orange); border-bottom-color: var(--orange); font-weight: 500; }

.doc-tab-content { display: none; }
.doc-tab-content.active { display: block; }

.form-textarea { resize: vertical; min-height: 100px; }
.form-textarea-doc { min-height: 280px; font-family: 'Courier New', monospace; font-size: .85rem; }

/* Documento gerado */
.documento-card {
  padding: 48px;
  max-width: 800px;
}
.documento-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 36px;
}
.documento-logo { height: 32px; }
.documento-meta { text-align: right; }
.documento-tipo {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--navy);
}
.documento-data { font-size: .8rem; color: var(--text-muted); }
.documento-body {
  font-size: .95rem;
  line-height: 1.85;
  color: var(--text-dark);
  white-space: pre-wrap;
}

code {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: .82rem;
  color: var(--orange);
}

/* ==========================================================
   RESPONSIVE (continuação)
   ========================================================== */

@media (max-width: 520px) {
  .stats-grid { grid-template-columns: 1fr; }
  .pillars-grid { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; gap: 12px; }
}

/* ==========================================================
   CRM
   ========================================================== */

.avatar-lg {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* Alertas */
.crm-alertas {
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 24px;
}
.crm-alertas-title {
  font-size: .85rem;
  font-weight: 700;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.crm-alertas-list { display: flex; flex-direction: column; gap: 8px; }
.crm-alerta-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid #fde68a;
  transition: border-color var(--transition);
}
.crm-alerta-item:hover { border-color: #f59e0b; }
.crm-alerta-item.vencido { border-color: #fecaca; background: #fff5f5; }
.crm-alerta-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  font-weight: 600;
  flex-shrink: 0;
}
.crm-alerta-info { flex: 1; display: flex; flex-direction: column; }
.crm-alerta-nome { font-size: .88rem; font-weight: 500; color: var(--navy); }
.crm-alerta-nota { font-size: .78rem; color: var(--text-muted); }
.crm-alerta-data { font-size: .8rem; font-weight: 600; color: var(--text-muted); flex-shrink: 0; }
.text-danger { color: #b91c1c !important; }

/* Toolbar */
.crm-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.crm-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  color: var(--text-muted);
}
.crm-search-input {
  border: none;
  outline: none;
  flex: 1;
  font: inherit;
  font-size: .9rem;
  color: var(--text-dark);
  background: transparent;
}
.crm-search-input::placeholder { color: #b0bcc8; }

/* Links de contato */
.crm-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .83rem;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: all var(--transition);
}
.crm-contact-link:hover { color: #e1306c; border-color: #e1306c; background: #fff0f5; }
.crm-contact-link-wa:hover { color: #25d366; border-color: #25d366; background: #f0fff5; }

/* Badges de origem e funil */
.badge-origem-manual    { background: #f1f3f5; color: #4a5568; }
.badge-origem-quiz      { background: rgba(240,74,29,.1); color: var(--orange); }
.badge-origem-manychat  { background: rgba(8,35,77,.08); color: var(--navy); }
.badge-origem-greenn    { background: #e6f7ee; color: #1a6b3a; }
.badge-origem-whatsapp  { background: #f0fff5; color: #1a7a41; }

.badge-funil-lead_frio        { background: #f1f3f5; color: #4a5568; }
.badge-funil-contato_feito    { background: #eff6ff; color: #1d4ed8; }
.badge-funil-proposta_enviada { background: #fef9c3; color: #854d0e; }
.badge-funil-negociacao       { background: rgba(240,74,29,.1); color: var(--orange); }
.badge-funil-fechado          { background: #edfbf3; color: #1a6b3a; }
.badge-funil-perdido          { background: #fff0f0; color: #b91c1c; }

/* Funil steps */
.funil-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.funil-step {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 500;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  background: var(--white);
  cursor: pointer;
  transition: all var(--transition);
}
.funil-step:hover { border-color: var(--orange); color: var(--orange); }
.funil-step.active { color: #fff; border-color: transparent; }
.funil-step.active.funil-lead_frio        { background: #6b7280; }
.funil-step.active.funil-contato_feito    { background: #1d4ed8; }
.funil-step.active.funil-proposta_enviada { background: #92400e; }
.funil-step.active.funil-negociacao       { background: var(--orange); }
.funil-step.active.funil-fechado          { background: #1a6b3a; }
.funil-step.active.funil-perdido          { background: #b91c1c; }

/* Próximo contato */
.proximo-contato-info { display: flex; flex-direction: column; gap: 4px; }
.proximo-data { font-size: 1rem; font-weight: 600; color: var(--navy); }
.proximo-nota { font-size: .88rem; color: var(--text-muted); }
.section-alert { border: 1.5px solid #fde68a !important; background: #fffbeb; }

/* ==========================================================
   AGENDA
   ========================================================== */

.agenda-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}
.agenda-nav-titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.agenda-periodo {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--navy);
  font-weight: 600;
}

/* Atrasados */
.agenda-atrasados {
  background: #fff0f0;
  border: 1.5px solid #fecaca;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 24px;
}
.agenda-atrasados-title {
  font-size: .85rem;
  font-weight: 700;
  color: #b91c1c;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.agenda-cards-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Grade */
.agenda-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .agenda-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .agenda-grid { grid-template-columns: 1fr; }
}

.agenda-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
}
.agenda-col-hoje .agenda-col-header {
  background: var(--navy);
  border-radius: var(--radius);
  padding: 2px 8px;
}
.agenda-col-hoje .agenda-dia-nome,
.agenda-col-hoje .agenda-dia-num { color: #fff; }

.agenda-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 4px;
}
.agenda-dia-nome {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}
.agenda-dia-num {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
}
.agenda-dia-hoje { color: var(--orange); }

.agenda-col-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.agenda-vazio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--border);
  padding: 12px 8px;
}
.agenda-vazio i { font-size: 1rem; }

/* Card da agenda */
.agenda-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition);
  border-left: 3px solid var(--orange);
}
.agenda-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--orange);
}
.agenda-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.agenda-card-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.agenda-card-nome {
  font-size: .88rem;
  font-weight: 600;
  color: var(--navy);
}
.agenda-card-nota {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.agenda-card-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.agenda-card-link {
  font-size: .72rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================
   ETAPAS E CHECKLIST
   ========================================================== */

.etapas-lista { display: flex; flex-direction: column; gap: 16px; }

.etapa-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.etapa-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  background: var(--offwhite);
  border-bottom: 1px solid var(--border);
}

.etapa-numero {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: .9rem;
  flex-shrink: 0;
}

.etapa-nome {
  font-size: 1rem;
  color: var(--navy);
}
.etapa-desc {
  font-size: .82rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.etapa-checklist {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--offwhite);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.checklist-responsavel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.checklist-resp-roberta { background: rgba(8,35,77,.08); color: var(--navy); }
.checklist-resp-cliente { background: rgba(240,74,29,.1); color: var(--orange); }

.checklist-desc { font-size: .88rem; color: var(--text-dark); flex: 1; }

.add-item-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.add-item-form .form-input { margin-bottom: 0; }

/* Checklist de progresso */
.etapa-card-ativa { border-color: var(--orange); }
.etapa-numero-ativa { background: var(--orange); }

.checklist-item-done { opacity: .65; }
.checklist-desc-done { text-decoration: line-through; color: var(--text-muted); }
.checklist-quando { font-size: .72rem; color: var(--text-muted); margin-left: auto; flex-shrink: 0; }

.checklist-toggle {
  background: none;
  border: none;
  font-size: 1.15rem;
  color: var(--border);
  cursor: pointer;
  padding: 2px;
  flex-shrink: 0;
  transition: color var(--transition);
}
.checklist-toggle:hover { color: var(--orange); }
.checklist-toggle-done { color: var(--orange) !important; }

/* Barra de progresso */
.progresso-geral {
  display: flex;
  align-items: center;
  gap: 12px;
}
.progresso-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  flex-shrink: 0;
}
.progresso-bar-wrap {
  width: 120px;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.progresso-bar {
  height: 100%;
  background: var(--orange);
  border-radius: 4px;
  transition: width .4s ease;
}
.progresso-label { font-size: .78rem; color: var(--text-muted); }

/* ── TABS ─────────────────────────────────────────────────────── */
.tab-nav {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
}

.tab-btn {
  padding: 9px 20px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .18s, border-color .18s;
  border-radius: 6px 6px 0 0;
}

.tab-btn:hover { color: var(--text); background: var(--bg-secondary); }

.tab-btn.active {
  color: var(--orange);
  border-bottom-color: var(--orange);
  font-weight: 600;
}

/* ── KANBAN ───────────────────────────────────────────────────── */
.kb-board {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 24px;
  min-width: max-content;
}

.kb-col {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 2px solid transparent;
  transition: border-color .18s, background .18s;
}

.kb-col-over {
  border-color: var(--orange);
  background: #fff8f5;
}

.kb-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-radius: 10px 10px 0 0;
}

.kb-col-header-lead_frio     { background: #e8eaf0; }
.kb-col-header-contato_feito { background: #e3f0fb; }
.kb-col-header-proposta_enviada { background: #fff3e0; }
.kb-col-header-negociacao    { background: #fde8ef; }
.kb-col-header-fechado       { background: #e8f5e9; }
.kb-col-header-perdido       { background: #f5f5f5; }
.kb-col-header-manual        { background: #e8eaf0; }
.kb-col-header-quiz          { background: #fde8ef; }
.kb-col-header-manychat      { background: #e3f0fb; }
.kb-col-header-greenn        { background: #e8f5e9; }
.kb-col-header-whatsapp      { background: #e8f5e9; }

.kb-col-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text);
}

.kb-col-count {
  background: rgba(0,0,0,.1);
  color: var(--text);
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  padding: 1px 8px;
  min-width: 22px;
  text-align: center;
}

.kb-col-body {
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
}

.kb-col-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 0;
  color: var(--text-muted);
  font-size: .78rem;
}

.kb-col-empty i { font-size: 1.2rem; opacity: .4; }

.kb-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 13px;
  cursor: grab;
  transition: box-shadow .18s, transform .15s;
  user-select: none;
}

.kb-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.1);
  transform: translateY(-1px);
}

.kb-card:active { cursor: grabbing; }

.kb-card-dragging { opacity: .5; }

.kb-card-top {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 8px;
}

.kb-card-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.kb-notif-dot {
  position: absolute;
  top: -4px; right: -4px;
  background: #e74c3c;
  color: #fff;
  border-radius: 50%;
  width: 15px; height: 15px;
  font-size: .6rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #fff;
}

.kb-card-nome {
  font-size: .87rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.kb-card-nome:hover { color: var(--orange); }

.kb-card-sub { margin-top: 3px; }

.kb-card-contacts {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.kb-card-produto {
  font-size: .73rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.kb-card-data {
  font-size: .73rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-card-data-vencida {
  color: #e74c3c;
  font-weight: 600;
}

/* ==========================================================
   PILAR MARKETING
   ========================================================== */

/* Quick cards dashboard */
.mk-cards-row {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.mk-quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-dark);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 500;
  transition: border-color .15s, box-shadow .15s;
  min-width: 80px;
}
.mk-quick-card i { font-size: 1.3rem; color: var(--orange); }
.mk-quick-card:hover { border-color: var(--orange); box-shadow: 0 2px 8px rgba(240,74,29,.1); }

/* Post row no dashboard */
.mk-post-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--offwhite);
  border-radius: 8px;
  font-size: .85rem;
}
.mk-rede-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mk-post-data { font-weight: 600; min-width: 36px; }
.mk-rede-tag {
  font-size: .75rem;
  background: var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}
.mk-post-titulo {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pilar balance bar */
.mk-pilar-bar-bg {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.mk-pilar-bar {
  height: 100%;
  border-radius: 4px;
  transition: width .4s ease;
}

/* Status badges marketing */
.badge-mk-rascunho  { background: #f0f0f0; color: #888; }
.badge-mk-agendado  { background: #fff3e0; color: #e65100; }
.badge-mk-publicado { background: #e8f5e9; color: #2e7d32; }
.badge-mk-cancelado { background: #fce4ec; color: #c62828; }
.badge-mk-ideia     { background: #e3f2fd; color: #1565c0; }
.badge-mk-aprovada  { background: #e8f5e9; color: #2e7d32; }
.badge-mk-arquivada { background: #f5f5f5; color: #9e9e9e; }

.badge-mk-camp-planejamento { background: #e3f2fd; color: #1565c0; }
.badge-mk-camp-ativa        { background: #e8f5e9; color: #2e7d32; }
.badge-mk-camp-pausada      { background: #fff3e0; color: #e65100; }
.badge-mk-camp-encerrada    { background: #f5f5f5; color: #9e9e9e; }

/* Calendário editorial */
.mk-cal-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.mk-cal-table thead th {
  padding: 10px 8px;
  text-align: center;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--offwhite);
}
.mk-cal-cell {
  vertical-align: top;
  padding: 6px;
  border: 1px solid var(--border);
  min-height: 100px;
  width: calc(100% / 7);
}
.mk-cal-vazio { background: #fafafa; }
.mk-cal-hoje  { background: #fff8f0; }
.mk-cal-num {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.mk-cal-num span {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-dark);
}
.mk-cal-add {
  font-size: 1rem;
  color: var(--text-muted);
  text-decoration: none;
  line-height: 1;
  padding: 0 2px;
  opacity: 0;
  transition: opacity .15s;
}
.mk-cal-cell:hover .mk-cal-add { opacity: 1; }
.mk-cal-post {
  display: block;
  font-size: .72rem;
  padding: 3px 5px;
  border-radius: 4px;
  margin-bottom: 3px;
  text-decoration: none;
  color: var(--text-dark);
  overflow: hidden;
  white-space: nowrap;
}
.mk-cal-post-publicado { background: #e8f5e9; }
.mk-cal-post-agendado  { background: #fff3e0; }
.mk-cal-post-rascunho  { background: #f5f5f5; }
.mk-cal-post-cancelado { background: #fce4ec; opacity: .6; }
.mk-cal-post:hover { filter: brightness(.95); }
.mk-cal-post-txt { display: block; overflow: hidden; text-overflow: ellipsis; }

/* Banco de ideias */
.mk-ideias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.mk-ideia-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mk-ideia-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mk-pilar-tag {
  font-size: .72rem;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
}
.mk-formato-tag {
  font-size: .72rem;
  background: var(--offwhite);
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: 20px;
}
.mk-ideia-titulo {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.3;
}
.mk-ideia-desc {
  font-size: .82rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mk-ideia-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

/* Hashtags */
.mk-hashtag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.mk-hashtag-card { padding: 16px; }
.mk-hashtag-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  gap: 8px;
}
.mk-hashtag-nome {
  font-size: .95rem;
  font-weight: 600;
  margin: 4px 0 0;
}
.mk-rede-badge {
  font-size: .72rem;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
}
.mk-rede-instagram { background: #fce4ec; color: #c2185b; }
.mk-rede-linkedin  { background: #e3f2fd; color: #1565c0; }
.mk-rede-pinterest { background: #fce4ec; color: #b71c1c; }
.mk-rede-facebook  { background: #e8eaf6; color: #283593; }
.mk-rede-todos     { background: var(--border); color: var(--text-muted); }

.mk-hashtag-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.mk-hashtag-tag {
  font-size: .75rem;
  background: var(--offwhite);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: 12px;
  color: var(--text-muted);
}
.mk-hashtag-preview {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .82rem;
  color: var(--text-dark);
  min-height: 44px;
  line-height: 1.6;
  word-break: break-word;
}

/* Pilares */
.mk-pilares-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.mk-pilar-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
}
.mk-pilar-inativo { opacity: .5; }
.mk-pilar-icon-wrap {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.mk-pilar-info { flex: 1; }
.mk-pilar-nome {
  font-size: .95rem;
  font-weight: 600;
  margin: 0 0 4px;
}
.mk-pilar-desc {
  font-size: .8rem;
  color: var(--text-muted);
  margin: 0 0 4px;
}
.mk-pilar-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mk-icone-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.mk-icone-opt input { display: none; }
.mk-icone-opt span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--text-muted);
  transition: border-color .15s, color .15s;
}
.mk-icone-opt input:checked + span {
  border-color: var(--orange);
  color: var(--orange);
  background: #fff3ee;
}

/* Campanhas */
.mk-campanhas-lista { display: flex; flex-direction: column; gap: 12px; }
.mk-campanha-card {
  display: flex;
  padding: 0;
  overflow: hidden;
}
.mk-campanha-cor {
  width: 6px;
  flex-shrink: 0;
}
.mk-campanha-body { padding: 16px; flex: 1; }
.mk-campanha-nome {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 4px;
}
.mk-campanha-desc {
  font-size: .85rem;
  color: var(--text-muted);
  margin: 0;
}

/* Métricas — gráfico de barras CSS */
.mk-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 100px;
  padding: 8px 0 0;
}
.mk-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.mk-bar {
  width: 100%;
  background: var(--orange);
  border-radius: 3px 3px 0 0;
  min-height: 4px;
  transition: height .3s ease;
}
.mk-bar-label {
  font-size: .65rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.mk-metrics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.mk-metrics-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: .78rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.mk-metrics-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.mk-metrics-table tr:last-child td { border-bottom: none; }

/* Modais Marketing */
.mk-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8,35,77,.35);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.mk-modal {
  background: var(--white);
  border-radius: 14px;
  padding: 24px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(8,35,77,.18);
}
.mk-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.mk-modal-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}
.mk-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--text-muted);
  padding: 4px;
}
.mk-modal-close:hover { color: var(--text-dark); }

/* ==========================================================
   PILAR GESTÃO
   ========================================================== */

/* KPI cards */
.gs-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.gs-kpi-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
}
.gs-kpi-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}
.gs-kpi-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.gs-kpi-label {
  font-size: .75rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.gs-kpi-valor {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.1;
}
.gs-kpi-link {
  position: absolute;
  top: 12px; right: 12px;
  color: var(--text-muted);
  font-size: .85rem;
  text-decoration: none;
}
.gs-kpi-link:hover { color: var(--orange); }

.gs-kpi-receita   { border-left: 4px solid #28a745; }
.gs-kpi-receita .gs-kpi-icon { color: #28a745; }
.gs-kpi-despesa   { border-left: 4px solid #dc3545; }
.gs-kpi-despesa .gs-kpi-icon { color: #dc3545; }
.gs-kpi-saldo-pos { border-left: 4px solid #28a745; }
.gs-kpi-saldo-pos .gs-kpi-valor { color: #28a745; }
.gs-kpi-saldo-pos .gs-kpi-icon { color: #28a745; }
.gs-kpi-saldo-neg { border-left: 4px solid #dc3545; }
.gs-kpi-saldo-neg .gs-kpi-valor { color: #dc3545; }
.gs-kpi-saldo-neg .gs-kpi-icon { color: #dc3545; }
.gs-kpi-meta      { border-left: 4px solid var(--orange); }
.gs-kpi-meta .gs-kpi-icon { color: var(--orange); }
.gs-kpi-neutral   { border-left: 4px solid var(--border); }

/* Gráfico receita vs despesa */
.gs-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
  padding-top: 8px;
}
.gs-chart-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.gs-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 100px;
  width: 100%;
}
.gs-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-height: 4px;
  transition: height .3s ease;
}
.gs-bar-receita { background: #28a745; }
.gs-bar-despesa { background: #dc3545; }
.gs-chart-label {
  font-size: .68rem;
  color: var(--text-muted);
}

/* OKR row no dashboard */
.gs-okr-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.gs-okr-row:last-child { border-bottom: none; }

/* OKR cards */
.gs-okr-card {
  padding: 20px;
}
.gs-okr-concluido { opacity: .7; }
.gs-okr-cancelado { opacity: .5; }
.gs-okr-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.gs-okr-objetivo {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}
.gs-trim-badge {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: .05em;
}

/* Key Results */
.gs-kr-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}
.gs-kr-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--offwhite);
  border-radius: 8px;
}
.gs-kr-novo {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* Revisão histórico */
.gs-revisao-item {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.gs-revisao-item:last-child { border-bottom: none; }