/* ============================================================
   ALM Consultoria — Intranet
   styles.css — shell da aplicação (Camada 1: experiência visual)
   ============================================================ */

/* ---- Fontes ------------------------------------------------
   Montserrat é a fonte oficial da ALM para textos de interface
   (ver Manual de Marca). Caso a licença das fontes "Code" e
   "Leonardo" (script) esteja disponível, adicione os arquivos
   em /assets/fonts/ e troque os @font-face abaixo.
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root {
  /* CONFIGURAR IDENTIDADE ALM AQUI — cores oficiais do Manual de Marca */
  --alm-primary: #1B3B40;     /* verde-petróleo escuro — elegância, poder */
  --alm-secondary: #5F806F;   /* verde sálvia — harmonia, confiança */
  --alm-accent: #F4B080;      /* salmão — toque de originalidade */
  --alm-tertiary: #CDE4BA;    /* verde claro — renovação */
  --alm-vivid: #80C41C;       /* verde vivo — usar com moderação, só destaques pontuais */

  --alm-background: #F6F7F5;
  --alm-surface: #FFFFFF;
  --alm-surface-alt: #EFF3EE;
  --alm-text: #1B2A28;
  --alm-muted: #62726D;
  --alm-border: #E1E7E2;

  --alm-font: "Montserrat", Arial, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 1px 2px rgba(27, 59, 64, 0.06), 0 8px 24px rgba(27, 59, 64, 0.05);
  --sidebar-width: 248px;
  --sidebar-width-collapsed: 76px;
  --topbar-height: 68px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--alm-font);
  background: var(--alm-background);
  color: var(--alm-text);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

a { color: inherit; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--alm-secondary); outline-offset: 2px; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }

/* ============================================================
   SHELL: sidebar + topbar + conteúdo
   ============================================================ */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
  transition: grid-template-columns 0.2s ease;
}
.app-shell.sidebar-collapsed {
  grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}

/* ---- Sidebar ---- */
.sidebar {
  background: var(--alm-primary);
  color: #EAF0EC;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 22px;
}
.sidebar-brand img { height: 30px; width: auto; }
.sidebar-collapsed .sidebar-brand span { display: none; }
.sidebar-brand span { font-weight: 700; font-size: 15px; letter-spacing: 0.01em; }

.sidebar-toggle {
  background: rgba(255,255,255,0.08);
  border: none;
  color: #EAF0EC;
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-left: auto;
}
.sidebar-toggle:hover { background: rgba(255,255,255,0.16); }

.nav-group { margin-top: 10px; }
.nav-label {
  font-size: 11px;
  color: rgba(234,240,236,0.5);
  padding: 8px 12px 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sidebar-collapsed .nav-label { display: none; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: rgba(234,240,236,0.82);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.nav-item .nav-icon { flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.sidebar-collapsed .nav-item span.nav-text { display: none; }
.nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-item.active { background: var(--alm-secondary); color: #fff; }

/* ---- Topbar ---- */
.topbar {
  height: var(--topbar-height);
  background: var(--alm-surface);
  border-bottom: 1px solid var(--alm-border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.global-search {
  flex: 1;
  max-width: 460px;
  position: relative;
}
.global-search input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border-radius: 999px;
  border: 1px solid var(--alm-border);
  background: var(--alm-surface-alt);
  font-size: 14px;
  font-family: inherit;
}
.global-search input:focus { background: #fff; border-color: var(--alm-secondary); }
.global-search .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); opacity: 0.55; }

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--alm-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  max-height: 360px;
  overflow-y: auto;
  z-index: 30;
  display: none;
}
.search-results.open { display: block; }
.search-result-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--alm-border);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--alm-surface-alt); }
.search-result-item .tag { font-size: 11px; color: var(--alm-secondary); font-weight: 600; }
.search-result-item .title { font-size: 14px; font-weight: 600; }
.search-result-item .sub { font-size: 12.5px; color: var(--alm-muted); }

.topbar-right { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.topbar-icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--alm-surface-alt);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.topbar-icon-btn:hover { background: var(--alm-tertiary); }

.profile-menu { position: relative; }
.profile-trigger { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); }
.profile-trigger:hover { background: var(--alm-surface-alt); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--alm-secondary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.profile-name { font-size: 13.5px; }
.profile-name strong { display: block; font-size: 13.5px; }
.profile-name small { color: var(--alm-muted); font-size: 12px; }

.dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid var(--alm-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  min-width: 190px; display: none; overflow: hidden; z-index: 30;
}
.dropdown.open { display: block; }
.dropdown button {
  width: 100%; text-align: left; padding: 11px 16px;
  border: none; background: none; cursor: pointer; font-size: 14px;
}
.dropdown button:hover { background: var(--alm-surface-alt); }

/* ---- Conteúdo principal ---- */
.content {
  padding: 28px 32px 60px;
  max-width: 1180px;
}
.view-header {
  margin-bottom: 24px;
}
.view-header h1 { font-size: 24px; }
.view-header p.lead { color: var(--alm-muted); margin-top: 6px; font-size: 14.5px; }

.view { display: none; animation: fadeIn 0.25s ease; }
.view.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }

/* ============================================================
   COMPONENTES
   ============================================================ */

.card {
  background: var(--alm-surface);
  border: 1px solid var(--alm-border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Portal: atalhos grandes */
.shortcut-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 28px; }
@media (max-width: 900px) { .shortcut-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .shortcut-grid { grid-template-columns: 1fr; } }

.shortcut-card {
  background: var(--alm-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 20px;
  cursor: pointer;
  border: none;
  text-align: left;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.15s ease, background 0.15s ease;
}
.shortcut-card:hover { transform: translateY(-2px); background: #163135; }
.shortcut-card .shortcut-icon { font-size: 20px; }
.shortcut-card .shortcut-title { font-weight: 600; font-size: 15px; }
.shortcut-card:nth-child(6) { background: var(--alm-secondary); }
.shortcut-card:nth-child(6):hover { background: #4d6c5d; }

.panel-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; }

.list-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--alm-border);
  gap: 12px;
}
.list-row:last-child { border-bottom: none; }
.list-row .badge-cat {
  font-size: 11px; font-weight: 700; color: var(--alm-secondary);
  background: var(--alm-tertiary); padding: 3px 8px; border-radius: 999px;
  white-space: nowrap;
}
.list-row .row-title { font-weight: 600; font-size: 14px; }
.list-row .row-sub { font-size: 13px; color: var(--alm-muted); margin-top: 2px; }
.list-row .row-date { font-size: 12.5px; color: var(--alm-muted); white-space: nowrap; }

/* Valores (cultura) */
.value-card {
  cursor: pointer;
  border-left: 4px solid var(--alm-secondary);
}
.value-card:hover { border-left-color: var(--alm-accent); }
.value-card h3 { font-size: 16px; margin-bottom: 6px; }
.value-card p { color: var(--alm-muted); font-size: 13.5px; }

.tag-pill {
  display: inline-block; font-size: 12px; font-weight: 600;
  background: var(--alm-surface-alt); color: var(--alm-primary);
  padding: 5px 11px; border-radius: 999px; margin: 3px 6px 3px 0;
}

/* Organograma / Pessoas */
.person-card { cursor: pointer; display: flex; align-items: center; gap: 12px; }
.person-card .avatar { width: 42px; height: 42px; font-size: 14px; }
.person-card .p-name { font-weight: 600; font-size: 14px; }
.person-card .p-role { font-size: 12.5px; color: var(--alm-muted); }

.area-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 18px; }
.chip {
  border: 1px solid var(--alm-border); background: #fff;
  padding: 7px 14px; border-radius: 999px; font-size: 13px; cursor: pointer;
}
.chip.active { background: var(--alm-primary); color: #fff; border-color: var(--alm-primary); }

/* Tabs (Manuais e Processos) */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--alm-border); }
.tab-btn {
  border: none; background: none; padding: 10px 4px; margin-right: 18px;
  font-size: 14px; font-weight: 600; color: var(--alm-muted); cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tab-btn.active { color: var(--alm-primary); border-bottom-color: var(--alm-secondary); }

.process-card { cursor: pointer; }
.process-card h4 { font-size: 15px; margin-bottom: 4px; }
.process-card p { font-size: 13px; color: var(--alm-muted); }
.process-meta { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--alm-secondary); font-weight: 600; }

.flow-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.flow-step {
  background: var(--alm-surface-alt); border: 1px solid var(--alm-border);
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; cursor: pointer;
}
.flow-step:hover { background: var(--alm-tertiary); }
.flow-step .num { font-weight: 700; color: var(--alm-secondary); margin-right: 5px; }

/* Jornada do cliente — timeline */
.journey-track {
  display: flex; overflow-x: auto; gap: 6px; padding: 6px 2px 18px;
  scrollbar-width: thin;
}
.journey-node {
  flex: 0 0 150px; cursor: pointer; text-align: left;
  border: none; background: var(--alm-surface);
  border: 1px solid var(--alm-border); border-radius: var(--radius-md);
  padding: 14px; position: relative;
}
.journey-node::after {
  content: "→"; position: absolute; right: -18px; top: 50%; transform: translateY(-50%);
  color: var(--alm-border); font-size: 16px;
}
.journey-node:last-child::after { content: ""; }
.journey-node.active { border-color: var(--alm-secondary); background: var(--alm-tertiary); }
.journey-node .j-index { font-size: 11px; color: var(--alm-secondary); font-weight: 700; }
.journey-node .j-title { font-weight: 700; font-size: 13.5px; margin-top: 4px; }

/* Produtos */
.product-card { cursor: pointer; }
.product-card h3 { font-size: 16px; margin-bottom: 6px; }
.product-card p { font-size: 13.5px; color: var(--alm-muted); margin-bottom: 8px; }

/* Ferramentas / modelos */
.tool-card { display: flex; flex-direction: column; gap: 8px; }
.tool-card .tool-name { font-weight: 700; font-size: 15px; }
.tool-card .tool-purpose { font-size: 13px; color: var(--alm-muted); }
.tool-card a.tool-link { font-size: 13px; font-weight: 600; color: var(--alm-secondary); text-decoration: none; }

.template-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--alm-border); }
.template-row:last-child { border-bottom: none; }
.template-info .t-name { font-weight: 600; font-size: 14px; }
.template-info .t-meta { font-size: 12.5px; color: var(--alm-muted); margin-top: 2px; }
.template-info .t-desc { font-size: 13px; color: var(--alm-text); margin-top: 6px; max-width: 46ch; }
.badge-official {
  font-size: 10.5px; font-weight: 700; color: var(--alm-primary);
  background: var(--alm-tertiary); padding: 3px 8px; border-radius: 5px; margin-left: 8px;
}
.template-actions { display: flex; gap: 8px; }

.btn {
  border: none; border-radius: var(--radius-sm); padding: 9px 16px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.btn-primary { background: var(--alm-primary); color: #fff; }
.btn-primary:hover { background: #163135; }
.btn-secondary { background: var(--alm-surface-alt); color: var(--alm-primary); }
.btn-secondary:hover { background: var(--alm-tertiary); }
.btn-ghost { background: transparent; color: var(--alm-secondary); }
.btn-ghost:hover { text-decoration: underline; }
.btn:active { transform: scale(0.98); }

/* Documentos */
.doc-card { display: flex; flex-direction: column; gap: 10px; }
.doc-card .doc-title { font-weight: 700; font-size: 15px; }
.doc-card .doc-meta { font-size: 12.5px; color: var(--alm-muted); }
.doc-actions { display: flex; gap: 8px; margin-top: 4px; }

/* Central de ajuda */
.help-hero {
  background: var(--alm-primary); color: #fff; border-radius: var(--radius-lg);
  padding: 34px 30px; margin-bottom: 24px;
}
.help-hero h2 { font-size: 22px; }
.help-hero .help-search { margin-top: 16px; max-width: 480px; }
.help-hero .help-search input {
  width: 100%; padding: 12px 16px; border-radius: 999px; border: none; font-size: 14px;
}
.assistant-callout {
  background: var(--alm-tertiary); border-radius: var(--radius-md);
  padding: 18px 20px; display: flex; align-items: center; justify-content: space-between;
  margin-top: 20px; gap: 16px; flex-wrap: wrap;
}
.faq-item { border-bottom: 1px solid var(--alm-border); padding: 14px 0; }
.faq-item:last-child { border-bottom: none; }
.faq-q { font-weight: 600; font-size: 14.5px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-a { font-size: 13.5px; color: var(--alm-muted); margin-top: 8px; display: none; }
.faq-item.open .faq-a { display: block; }

/* Admin */
.admin-badge { background: var(--alm-accent); color: var(--alm-primary); }
.stat-card { text-align: center; }
.stat-card .stat-number { font-size: 26px; font-weight: 800; color: var(--alm-primary); }
.stat-card .stat-label { font-size: 12.5px; color: var(--alm-muted); margin-top: 4px; }

table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data-table th {
  text-align: left; font-size: 11.5px; text-transform: none; color: var(--alm-muted);
  padding: 10px 12px; border-bottom: 2px solid var(--alm-border);
}
table.data-table td { padding: 11px 12px; border-bottom: 1px solid var(--alm-border); }
table.data-table tr:hover td { background: var(--alm-surface-alt); }
.status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.status-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9AA79F; }
.status-dot.ativo::before { background: var(--alm-vivid); }
.status-dot.bloqueado::before { background: #D2603F; }
.status-dot.inativo::before { background: #B3BDB6; }

.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.filter-bar select, .filter-bar input {
  padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--alm-border);
  font-family: inherit; font-size: 13px; background: #fff;
}

/* ============================================================
   MODAL / SIDE PANEL
   ============================================================ */
.overlay {
  position: fixed; inset: 0; background: rgba(15, 27, 25, 0.45);
  display: none; align-items: center; justify-content: center; z-index: 100;
  padding: 20px;
}
.overlay.open { display: flex; }

.modal {
  background: #fff; border-radius: var(--radius-lg);
  max-width: 620px; width: 100%; max-height: 86vh; overflow-y: auto;
  padding: 28px 30px;
}
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; gap: 16px; }
.modal-close { background: var(--alm-surface-alt); border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; flex: none; }
.modal-section { margin-top: 16px; }
.modal-section h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--alm-secondary); margin-bottom: 8px; }
.modal-section ul { margin: 0; padding-left: 18px; font-size: 13.5px; }
.modal-section li { margin-bottom: 4px; }

.side-panel-overlay { justify-content: flex-end; }
.side-panel {
  background: #fff; height: 100%; width: 380px; max-width: 92vw;
  padding: 30px 26px; overflow-y: auto; border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--alm-primary); color: #fff; padding: 12px 18px; border-radius: var(--radius-sm);
  font-size: 13.5px; box-shadow: var(--shadow-card); animation: fadeIn 0.2s ease;
}

.permission-denied { text-align: center; padding: 60px 20px; color: var(--alm-muted); }

/* Empty state */
.empty-state { text-align: center; padding: 40px 20px; color: var(--alm-muted); font-size: 14px; }

/* Skeleton loading */
.skeleton { background: linear-gradient(90deg, var(--alm-surface-alt) 25%, #e4e9e5 37%, var(--alm-surface-alt) 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius: var(--radius-sm); height: 16px; }
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---- Responsividade geral ---- */
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; z-index: 90; transform: translateX(-100%); transition: transform 0.2s ease; width: 260px; }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-toggle { display: none; }
  .content { padding: 20px 16px 48px; }
  .mobile-menu-btn { display: inline-flex !important; }
}
.mobile-menu-btn { display: none; border: none; background: var(--alm-surface-alt); width: 36px; height: 36px; border-radius: var(--radius-sm); cursor: pointer; }

/* ============================================================
   MÓDULO: Cultura e Estratégia ALM
   ------------------------------------------------------------
   Componentes adicionais para o módulo. Reaproveita as
   variáveis, .card, .btn, .tag-pill e .grid já definidos acima.
   ============================================================ */

.culture-hero p.lead { max-width: 560px; }

.culture-nav-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  cursor: pointer; text-align: left; transition: transform 0.15s ease, border-color 0.15s ease;
}
.culture-nav-card:hover { transform: translateY(-2px); border-color: var(--alm-secondary); }
.culture-nav-icon { font-size: 22px; }
.culture-nav-title { font-weight: 700; font-size: 14.5px; }
.culture-nav-sub { font-size: 12.5px; color: var(--alm-muted); }

.culture-subview { max-width: 860px; }
.culture-back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; padding-left: 0;
}

.culture-subnav {
  position: sticky; top: 0; z-index: 10; background: var(--alm-background);
  display: flex; gap: 6px; padding: 4px 0 14px; overflow-x: auto;
}
.culture-subnav-item {
  border: 1px solid var(--alm-border); background: #fff; border-radius: 999px;
  width: 38px; height: 38px; flex: none; cursor: pointer; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.culture-subnav-item.active { background: var(--alm-primary); border-color: var(--alm-primary); }
.culture-subnav-item:hover { border-color: var(--alm-secondary); }

.culture-fade-in { animation: fadeIn 0.3s ease; }

.culture-section-header { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.culture-section-icon { font-size: 26px; line-height: 1; }
.culture-section-header h1 { font-size: 22px; }

.culture-prevnext { display: flex; justify-content: space-between; margin-top: 34px; gap: 12px; }

.culture-statement-block { margin-bottom: 18px; }
.culture-statement {
  font-size: 19px; font-weight: 600; line-height: 1.5; color: var(--alm-primary);
  max-width: 640px;
}
.culture-body-text { font-size: 14.5px; color: var(--alm-muted); max-width: 640px; margin-bottom: 16px; }
.culture-closing { font-size: 13.5px; color: var(--alm-secondary); font-weight: 600; margin-top: 10px; }

.culture-highlight-card {
  background: var(--alm-primary); color: #fff; border-radius: var(--radius-lg);
  padding: 18px 22px; font-size: 15px; font-weight: 600; line-height: 1.5;
}
.culture-quote {
  font-size: 15.5px; font-weight: 600; color: var(--alm-primary);
  border-left: 3px solid var(--alm-accent); padding-left: 12px; margin: 10px 0;
}
.culture-quote-sm { font-size: 13px; font-weight: 600; color: var(--alm-secondary); margin-top: 8px; }
.culture-citation { font-style: italic; color: var(--alm-secondary); font-size: 14px; margin: 6px 0; }
.culture-list { padding-left: 18px; font-size: 13.5px; color: var(--alm-text); margin: 8px 0; }
.culture-list li { margin-bottom: 4px; }
.culture-tags { margin-top: 8px; }

.pillar-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 20px; }
.pillar-chip {
  background: var(--alm-tertiary); color: var(--alm-primary); font-weight: 700;
  font-size: 13px; padding: 8px 16px; border-radius: 999px;
}

/* Diagrama simples da missão */
.mission-diagram { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.mission-node {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--alm-border); border-radius: 999px;
  padding: 9px 16px 9px 10px; font-size: 13.5px; font-weight: 600;
  animation: fadeIn 0.35s ease both; animation-delay: var(--delay, 0ms);
}
.mission-node-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--alm-secondary); }
.mission-node:nth-child(1) .mission-node-dot { background: var(--alm-primary); }

/* Timeline da história */
.history-timeline { position: relative; padding-left: 26px; margin-top: 22px; }
.history-timeline::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px;
  background: var(--alm-border);
}
.history-node { position: relative; margin-bottom: 22px; }
.history-dot {
  position: absolute; left: -26px; top: 6px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--alm-secondary); border: 2px solid var(--alm-background);
}
.history-period { font-size: 11.5px; font-weight: 700; color: var(--alm-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.history-card h3 { font-size: 16.5px; margin-bottom: 8px; }
.history-card p { font-size: 13.5px; color: var(--alm-text); margin-bottom: 8px; line-height: 1.55; }

/* Valores — cards grandes */
.value-card-lg {
  border: none; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 8px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.value-card-lg:hover { transform: translateY(-2px); border-color: var(--alm-secondary); }
.value-card-icon { font-size: 26px; }
.value-card-lg h3 { font-size: 17px; }
.value-card-lg p { font-size: 13.5px; color: var(--alm-muted); }
.value-card-cta { font-size: 12.5px; font-weight: 700; color: var(--alm-secondary); margin-top: 4px; }

.value-card-expanded {
  cursor: default; align-items: stretch;
}
.value-card-expanded:hover { transform: none; border-color: var(--alm-border); }
.value-card-grid { align-items: start; }
@media (max-width: 760px) { .value-card-grid { grid-template-columns: 1fr; } }

/* Como trabalhamos */
.principle-card { display: flex; flex-direction: column; gap: 6px; }
.principle-icon { font-size: 20px; }
.principle-card h3 { font-size: 15px; }
.principle-card p { font-size: 13.5px; color: var(--alm-muted); }

.posture-block { margin-top: 20px; }
.accordion-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.accordion-header h3 { font-size: 15.5px; }
.accordion-caret { font-size: 18px; color: var(--alm-secondary); transition: transform 0.2s ease; }
.posture-block.open .accordion-caret { transform: rotate(45deg); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.posture-block.open .accordion-body { max-height: 600px; margin-top: 12px; }

/* Experiência do cliente */
.concept-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
@media (max-width: 760px) { .concept-row { grid-template-columns: repeat(2, 1fr); } }
.concept-node {
  background: #fff; border: 1px solid var(--alm-border); border-radius: var(--radius-md);
  padding: 18px; text-align: center; animation: fadeIn 0.35s ease both; animation-delay: var(--delay, 0ms);
}
.concept-icon { font-size: 24px; }
.concept-node h3 { font-size: 14.5px; margin: 8px 0 6px; }
.concept-node p { font-size: 12.5px; color: var(--alm-muted); }

/* Estratégia 2026 */
.sales-track { display: flex; gap: 12px; overflow-x: auto; margin-top: 14px; padding-bottom: 6px; }
.sales-year-card { flex: 0 0 190px; text-align: left; }
.sales-year-planned { border-color: var(--alm-secondary); background: var(--alm-tertiary); }
.sales-year { font-size: 12px; font-weight: 700; color: var(--alm-secondary); }
.sales-value { font-size: 19px; font-weight: 800; color: var(--alm-primary); margin-top: 4px; }
.sales-label { font-size: 12px; color: var(--alm-muted); }
.sales-growth { font-size: 12.5px; font-weight: 700; color: var(--alm-vivid); margin-top: 6px; }
.sales-meta { font-size: 11.5px; color: var(--alm-muted); margin-top: 4px; }

.pillar-2026-card { display: flex; flex-direction: column; gap: 10px; }
.pillar-2026-head { display: flex; align-items: center; gap: 8px; }
.pillar-2026-head span { font-size: 20px; }
.pillar-2026-head h3 { font-size: 15px; }
.pillar-2026-item { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--alm-border); padding-top: 8px; }
.pillar-2026-label { font-size: 12.5px; color: var(--alm-muted); }
.pillar-2026-value { font-size: 15px; font-weight: 800; color: var(--alm-primary); }

/* Código de ética */
.ethics-card { max-width: 620px; }
.ethics-card h3 { font-size: 17px; margin-bottom: 8px; }
.ethics-card > p { font-size: 13.5px; color: var(--alm-muted); margin-bottom: 16px; }
.ethics-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
.ethics-meta > div { display: flex; flex-direction: column; gap: 2px; }
.ethics-meta-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--alm-secondary); font-weight: 700; }
.ethics-actions { display: flex; gap: 10px; margin-bottom: 18px; }
.ethics-ack { border-top: 1px solid var(--alm-border); padding-top: 16px; }
.ethics-ack-label { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; }
.ethics-ack-label input { width: 17px; height: 17px; accent-color: var(--alm-secondary); }
.ethics-ack-confirmed { font-size: 12.5px; color: var(--alm-vivid); font-weight: 600; margin-top: 8px; }
.ethics-source-note { font-size: 12px; color: var(--alm-muted); margin: 12px 0 18px; }
.ethics-iframe {
  width: 100%; height: 60vh; border: 1px solid var(--alm-border); border-radius: var(--radius-sm);
  margin-top: 6px;
}
@media (max-width: 640px) { .ethics-iframe { height: 46vh; } }

@media (max-width: 640px) {
  .ethics-meta { grid-template-columns: 1fr 1fr; }
  .sales-year-card { flex: 0 0 160px; }
}

/* ============================================================
   MÓDULO: Pessoas e Estrutura Organizacional — Organograma
   ============================================================ */

.orgchart { margin-top: 6px; }

.orgchart-ceo-wrap { display: flex; justify-content: center; }
.orgchart-person-card {
  border: 1px solid var(--alm-border); background: var(--alm-primary); color: #fff;
  border-radius: var(--radius-lg); padding: 20px 26px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease; min-width: 220px;
}
.orgchart-person-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.orgchart-avatar {
  width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.16);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.orgchart-avatar-lg { width: 54px; height: 54px; font-size: 17px; }
.orgchart-ceo .orgchart-avatar-lg { background: rgba(255,255,255,0.2); }
.orgchart-name { font-weight: 700; font-size: 15px; margin-top: 4px; }
.orgchart-role { font-size: 12.5px; opacity: 0.85; }
.orgchart-tag {
  margin-top: 6px; font-size: 11px; font-weight: 700; background: var(--alm-accent);
  color: var(--alm-primary); padding: 3px 10px; border-radius: 999px;
}

.orgchart-connector-vertical { width: 2px; height: 26px; background: var(--alm-border); margin: 0 auto; }
.orgchart-connector-vertical.small { height: 16px; }

.orgchart-branches {
  display: flex; justify-content: center; gap: 20px; flex-wrap: nowrap;
  border-top: 2px solid var(--alm-border); padding-top: 0; margin-top: 0;
  overflow-x: auto;
}
.orgchart-branch {
  display: flex; flex-direction: column; align-items: center; flex: 1 1 200px; min-width: 190px;
  padding-top: 0; transition: opacity 0.2s ease;
}
.orgchart-branch.orgchart-dimmed { opacity: 0.35; }

.orgchart-area-card {
  border: 1px solid var(--alm-border); background: var(--alm-tertiary);
  border-radius: var(--radius-md); padding: 12px 18px; cursor: pointer;
  display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px;
  color: var(--alm-primary); transition: transform 0.15s ease, background 0.15s ease; width: 100%;
  justify-content: center;
}
.orgchart-area-card:hover { transform: translateY(-2px); background: #c2ddad; }
.orgchart-area-icon { font-size: 17px; }

.orgchart-person-card-sm {
  border: 1px solid var(--alm-border); background: #fff; border-radius: var(--radius-md);
  padding: 14px 16px; cursor: pointer; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.orgchart-person-card-sm:hover { transform: translateY(-2px); border-color: var(--alm-secondary); }
.orgchart-person-card-sm .orgchart-avatar { background: var(--alm-secondary); color: #fff; width: 36px; height: 36px; font-size: 12.5px; }
.orgchart-name-sm { font-weight: 700; font-size: 13px; }
.orgchart-role-sm { font-size: 11.5px; color: var(--alm-muted); }

@media (max-width: 780px) {
  .orgchart-branches { flex-direction: column; align-items: center; border-top: none; gap: 26px; overflow: visible; }
  .orgchart-branch { width: 100%; max-width: 320px; }
  .orgchart-branch::before { content: "↓"; color: var(--alm-border); font-size: 18px; margin-bottom: 4px; }
  .orgchart-connector-vertical { display: none; }
}

/* Fluxo de lead */
.leadflow-track { margin-top: 12px; }
.leadflow-steps { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.leadflow-step {
  flex: 0 0 190px; background: #fff; border: 1px solid var(--alm-border);
  border-radius: var(--radius-md); padding: 14px 16px; position: relative;
}
.leadflow-step:not(:last-child)::after {
  content: "→"; position: absolute; right: -17px; top: 50%; transform: translateY(-50%);
  color: var(--alm-border); font-size: 15px;
}
.leadflow-step-num { font-size: 11px; font-weight: 700; color: var(--alm-secondary); }
.leadflow-step-title { font-weight: 700; font-size: 13.5px; margin: 4px 0 4px; }
.leadflow-step-text { font-size: 12px; color: var(--alm-muted); }
.leadflow-phone {
  margin-top: 12px; font-size: 13.5px; background: var(--alm-tertiary); color: var(--alm-primary);
  padding: 10px 16px; border-radius: var(--radius-sm); display: inline-block;
}

/* Como estamos organizados */
.org-area-card { cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: transform 0.15s ease, border-color 0.15s ease; }
.org-area-card:hover { transform: translateY(-2px); border-color: var(--alm-secondary); }
.org-area-card h3 { font-size: 15.5px; }
.org-area-card p { font-size: 13px; color: var(--alm-muted); }
.org-area-responsible { font-size: 12.5px; color: var(--alm-secondary); margin-top: 4px; }

/* Quem procurar */
.quem-procurar-hero {
  background: var(--alm-primary); color: #fff; border-radius: var(--radius-lg);
  padding: 30px 28px;
}
.quem-procurar-hero h2 { font-size: 20px; }
.quem-procurar-hero .lead { color: rgba(255,255,255,0.8); margin-top: 4px; }
.quem-procurar-search { position: relative; margin-top: 16px; max-width: 480px; }
.quem-procurar-search input {
  width: 100%; padding: 12px 16px 12px 40px; border-radius: 999px; border: none; font-size: 14px; font-family: inherit;
}
.quem-procurar-search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: 0.6; }

.quem-procurar-results { margin-top: 12px; display: none; flex-direction: column; gap: 8px; }
.quem-procurar-results.open { display: flex; }
.qp-result-item {
  background: #fff; border-radius: var(--radius-sm); padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.qp-result-subject { font-size: 13.5px; font-weight: 600; color: var(--alm-text); }
.qp-result-person { font-size: 12px; color: var(--alm-muted); margin-top: 2px; }

.qp-category-card { display: flex; flex-direction: column; gap: 4px; }
.qp-category-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.qp-category-head span { font-size: 18px; }
.qp-category-head h3 { font-size: 14.5px; }
.qp-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid var(--alm-border); gap: 10px; }
.qp-category-card .qp-row:first-of-type { border-top: none; }
.qp-subject { font-size: 13px; color: var(--alm-text); }
.qp-target {
  border: none; background: none; cursor: pointer; font-size: 12.5px; font-weight: 700;
  color: var(--alm-secondary); white-space: nowrap;
}
.qp-target:hover { text-decoration: underline; }
.qp-target-channel { color: var(--alm-muted); font-weight: 600; cursor: default; }

@media (max-width: 640px) {
  .qp-row { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ============================================================
   PORTAL: Próximos eventos (Google Calendar)
   ============================================================ */

.event-card {
  display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--alm-border);
}
.event-card:last-child { border-bottom: none; }

.event-date-badge {
  flex: none; width: 52px; height: 52px; border-radius: var(--radius-sm);
  background: var(--alm-tertiary); color: var(--alm-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.event-date-day { font-size: 17px; font-weight: 800; line-height: 1.1; }
.event-date-month { font-size: 10.5px; font-weight: 700; text-transform: uppercase; }

.event-body { flex: 1; min-width: 0; }
.event-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.event-meta-row { font-size: 12.5px; color: var(--alm-muted); margin-top: 2px; overflow-wrap: anywhere; }
.event-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.event-actions .btn { padding: 7px 12px; font-size: 12.5px; text-decoration: none; display: inline-flex; align-items: center; }

/* ============================================================
   MÓDULO: Painel de Fechamentos
   ============================================================ */

.closing-card { cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: transform 0.15s ease, border-color 0.15s ease; }
.closing-card:hover { transform: translateY(-2px); border-color: var(--alm-secondary); }
.closing-card-top { display: flex; align-items: center; gap: 10px; }
.closing-card-title { flex: 1; min-width: 0; }
.closing-client-name { font-weight: 700; font-size: 14px; }
.closing-date { font-size: 12px; color: var(--alm-muted); }

.closing-status-badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.closing-tone-pending  { background: #F1E7D6; color: #7A5A1E; }
.closing-tone-progress { background: #DCE7F5; color: #29517D; }
.closing-tone-waiting  { background: #F4E1DA; color: #8A4326; }
.closing-tone-ready    { background: var(--alm-tertiary); color: var(--alm-primary); }
.closing-tone-done     { background: #DDEBD8; color: #2F5C34; }

.closing-notes-preview {
  font-size: 12.5px; color: var(--alm-text); background: var(--alm-surface-alt);
  border-radius: var(--radius-sm); padding: 8px 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.closing-urgency { font-size: 11.5px; font-weight: 700; }
.closing-urgency-urgent { color: #B4472B; }
.closing-urgency-normal { color: var(--alm-muted); }
.closing-urgency-past { color: var(--alm-muted); }
.closing-urgency-done { color: var(--alm-vivid); }

.closing-select, .closing-textarea {
  width: 100%; border: 1px solid var(--alm-border); border-radius: var(--radius-sm);
  padding: 9px 12px; font-family: inherit; font-size: 13.5px; background: #fff;
}
.closing-textarea { resize: vertical; }

.closing-history-list { display: flex; flex-direction: column; gap: 12px; }
.closing-history-item { border-top: 1px solid var(--alm-border); padding-top: 10px; }
.closing-history-item:first-child { border-top: none; padding-top: 0; }
.closing-history-line { font-size: 13px; }
.closing-history-value { font-size: 12.5px; color: var(--alm-secondary); margin-top: 2px; }
.closing-history-date { font-size: 11.5px; color: var(--alm-muted); margin-top: 2px; }

/* ============================================================
   MÓDULO: Painel de Fechamentos — layout em linha (autosave)
   ------------------------------------------------------------
   Substitui visualmente os cards do painel de fechamentos por
   uma lista de linhas editáveis diretamente, no mesmo espírito
   do painel original da equipe.
   ============================================================ */

.closing-counter { font-size: 12.5px; color: var(--alm-muted); margin-left: auto; align-self: center; white-space: nowrap; }

.closing-rows.card { padding: 4px 24px; }

.closing-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.2fr) minmax(190px, 1fr) minmax(260px, 1.7fr) minmax(120px, auto);
  gap: 22px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--alm-border);
}
.closing-row:last-child { border-bottom: none; }

.closing-row-who { display: flex; gap: 12px; align-items: flex-start; }
.avatar.closing-row-avatar { border-radius: 12px; width: 44px; height: 44px; font-size: 14px; flex: none; }
.closing-row-name { font-weight: 700; font-size: 15.5px; }
.closing-row-title { font-size: 12.5px; color: var(--alm-muted); margin-top: 1px; }
.closing-row-date { font-size: 12px; color: var(--alm-muted); margin-top: 6px; }

.closing-field-label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--alm-muted); margin-bottom: 8px;
}

.closing-select-wrap {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--alm-border); border-radius: 10px; padding: 3px 12px;
  background: #fff;
}
.closing-select-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.closing-tone-pending  .closing-select-dot { background: #B8862C; }
.closing-tone-progress .closing-select-dot { background: #3E6FA3; }
.closing-tone-waiting  .closing-select-dot { background: #A85A34; }
.closing-tone-ready    .closing-select-dot { background: var(--alm-secondary); }
.closing-tone-done     .closing-select-dot { background: var(--alm-vivid); }
.closing-select {
  flex: 1; border: none; background: transparent; font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--alm-text); padding: 9px 0; cursor: pointer;
}
.closing-select:focus { outline: none; }

.closing-row-notes .closing-textarea {
  width: 100%; border: 1px solid var(--alm-border); border-radius: 10px;
  padding: 10px 13px; font-family: inherit; font-size: 13.5px; resize: vertical; background: #fff;
}
.closing-row-notes .closing-textarea:focus { outline: none; border-color: var(--alm-secondary); }
.closing-save-hint { font-size: 11px; color: var(--alm-muted); margin-top: 6px; }

.closing-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.closing-urgency-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.closing-urgency-badge.closing-urgency-urgent { background: #F1E7D6; color: #7A5A1E; }
.closing-urgency-badge.closing-urgency-normal { background: var(--alm-surface-alt); color: var(--alm-muted); }
.closing-urgency-badge.closing-urgency-past   { background: var(--alm-surface-alt); color: var(--alm-muted); }
.closing-urgency-badge.closing-urgency-done   { background: #DDEBD8; color: #2F5C34; }

.closing-row-link {
  font-size: 12.5px; font-weight: 600; color: var(--alm-secondary); text-decoration: none;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
}
.closing-row-link:hover { text-decoration: underline; }

@media (max-width: 980px) {
  .closing-row { grid-template-columns: 1fr; gap: 14px; }
  .closing-row-side { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; }
}

/* ============================================================
   MÓDULO: Cultura e Estratégia — acompanhamento trimestral 2026
   ============================================================ */

.quarter-progress-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.quarter-progress-card { padding: 18px 20px; }
.quarter-progress-pending { opacity: 0.75; }

.quarter-progress-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.quarter-progress-title { font-weight: 700; font-size: 15px; }
.quarter-progress-period { font-size: 12px; color: var(--alm-muted); margin-top: 2px; }

.quarter-progress-badge { font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.quarter-progress-badge-pending { background: var(--alm-surface-alt); color: var(--alm-muted); }
.quarter-progress-badge-done { background: #DDEBD8; color: #2F5C34; }
.quarter-progress-badge-below { background: #F1E7D6; color: #7A5A1E; }

.quarter-progress-bar-track { height: 10px; border-radius: 999px; background: var(--alm-surface-alt); overflow: hidden; }
.quarter-progress-bar-fill { height: 100%; border-radius: 999px; background: var(--alm-secondary); transition: width 0.6s ease; }
.quarter-progress-bar-fill.quarter-progress-bar-done { background: var(--alm-vivid); }

.quarter-progress-numbers { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--alm-muted); }
.quarter-progress-numbers strong { color: var(--alm-primary); }

.quarter-progress-pending-text { font-size: 13px; color: var(--alm-muted); font-style: italic; }

.quarter-progress-margin {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--alm-border);
  font-size: 12.5px; color: var(--alm-muted);
}
.quarter-progress-margin-value { font-weight: 800; font-size: 13.5px; padding: 2px 8px; border-radius: 6px; }
.quarter-progress-margin-good { color: #2F5C34; background: #DDEBD8; }
.quarter-progress-margin-below { color: #7A5A1E; background: #F1E7D6; }
.quarter-progress-margin-target { color: var(--alm-muted); }

.quarter-progress-metric-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; font-weight: 700; color: var(--alm-muted); text-transform: uppercase; letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.quarter-progress-metric-pct { font-weight: 700; color: var(--alm-primary); text-transform: none; letter-spacing: normal; }

/* ============================================================
   PORTAL: Metas trimestrais (Minhas metas / Metas da equipe)
   ============================================================ */

.goals-card { padding: 20px 22px; }
.goals-card-compact { padding: 16px 18px; }

.goals-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.goals-avatar { width: 42px; height: 42px; font-size: 14px; flex: none; }
.goals-name { font-weight: 700; font-size: 14.5px; }
.goals-role { font-size: 12px; color: var(--alm-muted); }

.goals-quarter-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--alm-border); }
.goals-quarter-block:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }

.goals-quarter-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.goals-quarter-title { font-weight: 700; font-size: 13.5px; }
.goals-quarter-period { font-size: 11.5px; color: var(--alm-muted); margin-top: 1px; }

.goals-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.goals-list-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.goals-list-desc { color: var(--alm-text); }
.goals-list-pct { font-weight: 800; font-size: 12.5px; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }

.goals-team-grid { margin-top: 14px; }
@media (max-width: 760px) { .goals-team-grid { grid-template-columns: 1fr; } }
/* ============================================================
   MÓDULO: Método Comercial ALM (Manuais e Processos)
   ------------------------------------------------------------
   Bloco acrescentado ao final — não altera regras anteriores.
   Todas as classes usam o prefixo .mc- para não colidir com o
   restante do portal. Reaproveita as variáveis --alm-*.
   ============================================================ */

:root {
  --mc-borda: var(--alm-border);
  --mc-borda-forte: #B9C7C1;
  --mc-texto-suave: var(--alm-muted);
  --mc-texto-fraco: #7D8C8B;
  --mc-gap-fluxo: 18px;
  --mc-no: 34px;
  --mc-raio: 12px;
  --mc-transicao: 260ms cubic-bezier(.2, .7, .2, 1);
  --mc-largura-gaveta: 600px;

  --mc-st-construcao-fundo: #FBE7D5;  --mc-st-construcao-texto: #7A4518;  --mc-st-construcao-ponto: var(--alm-accent);
  --mc-st-validado-fundo: #DDEDD0;    --mc-st-validado-texto: #24452B;    --mc-st-validado-ponto: var(--alm-secondary);
  --mc-st-teste-fundo: #E4ECF0;       --mc-st-teste-texto: #2D4A57;       --mc-st-teste-ponto: #6F93A3;
  --mc-st-atualizar-fundo: #F6DCD6;   --mc-st-atualizar-texto: #7E3325;   --mc-st-atualizar-ponto: #C7715F;
}

/* ---- Card de entrada na aba Comercial ---- */
.mc-entrada {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
  border-left: 4px solid var(--alm-primary);
  padding: 22px 24px;
  transition: border-color var(--mc-transicao), box-shadow var(--mc-transicao);
}
.mc-entrada:hover { box-shadow: var(--shadow-card); border-left-color: var(--alm-accent); }
.mc-entrada-texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mc-entrada-titulo { font-size: 17px; font-weight: 700; color: var(--alm-primary); }
.mc-entrada-sub { font-size: 13px; color: var(--alm-muted); }
.mc-entrada-etapas { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--alm-secondary); }
.mc-entrada-etapas span:not(:last-child)::after { content: "›"; margin-left: 14px; color: var(--mc-borda-forte); }
.mc-entrada-acao { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--alm-secondary); }
.mc-entrada-acao svg { width: 14px; height: 14px; transition: transform var(--mc-transicao); }
.mc-entrada:hover .mc-entrada-acao svg { transform: translateX(3px); }

.mc-versao {
  display: inline-flex; align-items: center; vertical-align: middle;
  padding: 1px 9px; margin-left: 4px;
  border: 1px solid var(--mc-borda-forte); border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--alm-secondary);
}

/* ---- Página do método ---- */
.mc-modulo { container-type: inline-size; container-name: mc; }

.mc-voltar { margin-bottom: 18px; padding-left: 0; }

.mc-cabeca {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 36px; align-items: end; padding-bottom: 28px;
}
.mc-titulo { font-size: 30px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.15; color: var(--alm-primary); }
.mc-titulo .mc-versao { font-size: 13px; }
.mc-subtitulo { margin-top: 12px; font-size: 15px; color: var(--mc-texto-suave); max-width: 34em; line-height: 1.55; }

.mc-principio { margin: 0; padding: 6px 0 6px 20px; border-left: 3px solid var(--alm-accent); }
.mc-principio p { font-size: 15px; line-height: 1.6; color: var(--alm-primary); }
.mc-principio cite { display: block; margin-top: 10px; font-style: normal; font-size: 12.5px; color: var(--mc-texto-fraco); }

.mc-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 14px; border-top: 1px solid var(--mc-borda); }
.mc-nav button {
  background: none; border: none; padding: 4px 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--mc-texto-suave);
  border-bottom: 1px solid transparent;
}
.mc-nav button:hover { color: var(--alm-primary); border-bottom-color: var(--alm-accent); }

.mc-secao { padding: 44px 0; border-top: 1px solid var(--mc-borda); scroll-margin-top: calc(var(--topbar-height) + 12px); }
.mc-nav + .mc-secao { border-top: none; margin-top: 12px; }
.mc-secao-cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.mc-secao-titulo { font-size: 23px; font-weight: 300; letter-spacing: -0.01em; color: var(--alm-primary); }
.mc-secao-desc { margin-top: 8px; max-width: 42em; font-size: 14px; line-height: 1.6; color: var(--mc-texto-suave); }

/* Venda consultiva */
.mc-filosofia {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; align-items: start;
  background: var(--alm-surface); border: 1px solid var(--mc-borda); border-radius: var(--radius-md);
  padding: 32px;
}
.mc-texto { margin-top: 12px; font-size: 14px; line-height: 1.65; color: var(--mc-texto-suave); max-width: 32em; }
.mc-conclusao { margin-top: 14px; font-size: 19px; font-weight: 300; line-height: 1.4; color: var(--alm-primary); }
.mc-capacidades { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--mc-borda); }
.mc-capacidades li { display: flex; gap: 12px; align-items: baseline; padding: 14px 14px 14px 0; border-bottom: 1px solid var(--mc-borda); font-size: 14px; font-weight: 500; }
.mc-capacidades li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--alm-secondary); transform: translateY(-2px); }

/* Status */
.mc-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.mc-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.mc-st-construcao { background: var(--mc-st-construcao-fundo); color: var(--mc-st-construcao-texto); }
.mc-st-construcao::before { background: var(--mc-st-construcao-ponto); }
.mc-st-validado { background: var(--mc-st-validado-fundo); color: var(--mc-st-validado-texto); }
.mc-st-validado::before { background: var(--mc-st-validado-ponto); }
.mc-st-teste { background: var(--mc-st-teste-fundo); color: var(--mc-st-teste-texto); }
.mc-st-teste::before { background: var(--mc-st-teste-ponto); }
.mc-st-atualizar { background: var(--mc-st-atualizar-fundo); color: var(--mc-st-atualizar-texto); }
.mc-st-atualizar::before { background: var(--mc-st-atualizar-ponto); }

.mc-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mc-legenda-rotulo { font-size: 12.5px; color: var(--mc-texto-fraco); margin-right: 4px; }

/* Fluxo das seis etapas */
.mc-fluxo {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--mc-gap-fluxo);
}
.mc-fluxo::before {
  content: ""; position: absolute; top: calc(var(--mc-no) / 2); height: 1.5px;
  left: calc((100% - 5 * var(--mc-gap-fluxo)) / 12);
  right: calc((100% - 5 * var(--mc-gap-fluxo)) / 12);
  background: var(--mc-borda-forte);
}
.mc-etapa-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mc-etapa-item:not(:last-child)::after {
  content: ""; position: absolute;
  top: calc(var(--mc-no) / 2 - 4px); right: calc(var(--mc-gap-fluxo) / -2 - 4px);
  width: 8px; height: 8px;
  border-top: 1.5px solid var(--alm-secondary); border-right: 1.5px solid var(--alm-secondary);
  transform: rotate(45deg);
}
.mc-no {
  position: relative; z-index: 1; flex: none;
  width: var(--mc-no); height: var(--mc-no); display: grid; place-items: center;
  border-radius: 50%; background: var(--alm-background); border: 1.5px solid var(--alm-secondary);
  font-size: 13px; font-weight: 600; color: var(--alm-primary);
  transition: background var(--mc-transicao), color var(--mc-transicao);
}
.mc-etapa {
  width: 100%; flex: 1; display: flex; flex-direction: column; gap: 10px;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: 18px 14px 14px;
  background: var(--alm-surface); border: 1px solid var(--mc-borda);
  border-top: 3px solid var(--alm-primary); border-radius: var(--mc-raio);
  transition: border-color var(--mc-transicao), box-shadow var(--mc-transicao);
}
.mc-etapa:hover { border-color: var(--mc-borda-forte); border-top-color: var(--alm-primary); box-shadow: 0 10px 28px -18px rgba(27, 59, 64, 0.45); }
.mc-etapa-item.mc-ativa .mc-etapa { border-color: var(--alm-secondary); border-top-color: var(--alm-primary); }
.mc-etapa-item.mc-ativa .mc-no, .mc-etapa-item:hover .mc-no { background: var(--alm-primary); border-color: var(--alm-primary); color: #fff; }
.mc-etapa-nome { display: block; font-size: 16.5px; font-weight: 700; color: var(--alm-primary); }
.mc-etapa-status { display: block; }
.mc-etapa-obj { display: block; font-size: 12.5px; line-height: 1.55; color: var(--mc-texto-suave); }
.mc-etapa-saidas { display: block; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--mc-borda); }
.mc-etapa-saidas-rot { display: block; font-size: 11.5px; color: var(--mc-texto-fraco); margin-bottom: 3px; }
.mc-etapa-saidas-lista { display: block; font-size: 11.5px; font-weight: 700; line-height: 1.5; color: var(--alm-primary); }
.mc-etapa-saidas-lista span { display: block; }
.mc-etapa-abrir { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--alm-secondary); }
.mc-etapa-abrir svg { width: 14px; height: 14px; transition: transform var(--mc-transicao); }
.mc-etapa:hover .mc-etapa-abrir svg { transform: translateX(3px); }

/* Faixa transversal: Gestão Comercial */
.mc-gestao-faixa { margin-top: 10px; }
.mc-gestao-marcas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--mc-gap-fluxo); height: 16px; }
.mc-gestao-marcas span { justify-self: center; width: 1.5px; height: 100%; background: var(--alm-secondary); opacity: 0.6; }
.mc-gestao-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 16px 22px; background: var(--alm-primary); color: #fff; border-radius: var(--mc-raio);
}
.mc-gestao-barra strong { font-size: 15.5px; font-weight: 600; }
.mc-gestao-barra p { margin-top: 2px; font-size: 13px; color: rgba(255, 255, 255, 0.78); }
.mc-gestao-barra button {
  flex: none; cursor: pointer; background: transparent; color: #fff;
  font-size: 13px; font-weight: 600; padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px;
  transition: background var(--mc-transicao), border-color var(--mc-transicao);
}
.mc-gestao-barra button:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--alm-tertiary); }

/* Gestão Comercial: indicadores e perguntas */
.mc-gestao-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; }
.mc-subtitulo-bloco { font-size: 15.5px; font-weight: 700; color: var(--alm-primary); margin-bottom: 6px; }
.mc-nota-suave { font-size: 12.5px; color: var(--mc-texto-fraco); margin-bottom: 18px; }
.mc-indicadores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--mc-borda); }
.mc-indicadores li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--mc-borda); font-size: 14px; font-weight: 500; }
.mc-indicadores li span:last-child { align-self: center; white-space: nowrap; font-size: 11.5px; font-weight: 400; color: var(--mc-texto-fraco); }
.mc-perguntas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mc-perguntas li { padding: 14px 18px; background: var(--alm-surface-alt); border-radius: var(--mc-raio); font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--alm-primary); }

/* Ciclo comercial → entrega → comercial */
.mc-ciclo-wrap { position: relative; padding-bottom: 60px; }
.mc-ciclo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--mc-gap-fluxo); }
.mc-ciclo li {
  position: relative; display: grid; place-items: center; min-height: 86px;
  padding: 18px 12px; text-align: center; font-size: 13px; font-weight: 700; color: var(--alm-primary);
  background: var(--alm-surface); border: 1px solid var(--mc-borda); border-radius: var(--mc-raio);
}
.mc-ciclo li.mc-forte { background: var(--alm-primary); border-color: var(--alm-primary); color: #fff; }
.mc-ciclo li:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; margin-top: -4px;
  right: calc(var(--mc-gap-fluxo) / -2 - 4px); width: 8px; height: 8px;
  border-top: 1.5px solid var(--alm-secondary); border-right: 1.5px solid var(--alm-secondary);
  transform: rotate(45deg);
}
.mc-ciclo-retorno {
  position: absolute; bottom: 16px; height: 44px;
  left: calc((100% - 4 * var(--mc-gap-fluxo)) / 10);
  right: calc((100% - 4 * var(--mc-gap-fluxo)) / 10);
  border: 1.5px solid var(--alm-secondary); border-top: none; border-radius: 0 0 22px 22px;
}
.mc-ciclo-retorno::before {
  content: ""; position: absolute; left: -5.5px; top: -2px; width: 8px; height: 8px;
  border-top: 1.5px solid var(--alm-secondary); border-left: 1.5px solid var(--alm-secondary);
  transform: rotate(45deg);
}
.mc-ciclo-retorno span {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  padding: 0 12px; background: var(--alm-background);
  font-size: 11.5px; font-weight: 500; color: var(--alm-secondary); white-space: nowrap;
}
.mc-ciclo-rodape { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; margin-top: 24px; align-items: start; }
.mc-metodologia { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mc-metodologia li { padding: 11px 14px; background: var(--alm-surface); border: 1px solid var(--mc-borda); border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; }

/* ---- Gaveta de detalhes (fixa, fora do conteúdo) ---- */
body.mc-travado { overflow: hidden; }
.mc-sobreposicao { position: fixed; inset: 0; z-index: 110; background: rgba(15, 27, 25, 0.45); opacity: 0; transition: opacity var(--mc-transicao); }
.mc-sobreposicao.mc-visivel { opacity: 1; }
.mc-gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 111;
  width: min(var(--mc-largura-gaveta), 100%);
  display: flex; flex-direction: column; background: var(--alm-surface);
  box-shadow: -24px 0 60px -30px rgba(20, 38, 41, 0.5);
  transform: translateX(100%); transition: transform var(--mc-transicao);
}
.mc-gaveta.mc-aberta { transform: translateX(0); }
.mc-gaveta[hidden], .mc-sobreposicao[hidden] { display: none; }

.mc-gaveta-cabeca { flex: none; padding: 22px 30px; border-bottom: 1px solid var(--mc-borda); }
.mc-gaveta-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mc-gaveta-contador { font-size: 13px; color: var(--mc-texto-fraco); }
.mc-gaveta-titulo { margin: 10px 0 10px; font-size: 28px; font-weight: 300; color: var(--alm-primary); }
.mc-fechar {
  width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
  background: var(--alm-surface); border: 1px solid var(--mc-borda); border-radius: 50%; color: var(--alm-primary);
}
.mc-fechar:hover { background: var(--alm-surface-alt); }
.mc-fechar svg { width: 18px; height: 18px; }
.mc-gaveta-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 28px 30px; }
.mc-gaveta-rodape { flex: none; display: flex; justify-content: space-between; gap: 12px; padding: 14px 30px; border-top: 1px solid var(--mc-borda); }
.mc-botao-nav {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 16px; background: var(--alm-surface); border: 1px solid var(--mc-borda); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--alm-primary);
}
.mc-botao-nav:hover { background: var(--alm-surface-alt); }
.mc-botao-nav[disabled] { opacity: 0.35; cursor: default; background: var(--alm-surface); }
.mc-botao-nav svg { width: 14px; height: 14px; }

.mc-det-objetivo { padding: 20px 22px; background: var(--alm-surface-alt); border-radius: var(--mc-raio); }
.mc-det-rotulo { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; color: var(--alm-secondary); }
.mc-det-objetivo p { font-size: 16px; line-height: 1.55; color: var(--alm-primary); }
.mc-det-grupo { margin-top: 40px; }
.mc-det-grupo-titulo { font-size: 16px; font-weight: 700; color: var(--alm-primary); padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1.5px solid var(--alm-primary); }
.mc-det-grupo-desc { margin: -8px 0 18px; font-size: 12.5px; color: var(--mc-texto-fraco); }

.mc-bloco + .mc-bloco { margin-top: 28px; }
.mc-bloco h4 { margin-bottom: 10px; font-size: 14.5px; font-weight: 700; color: var(--alm-primary); }
.mc-bloco p { font-size: 13.5px; color: var(--mc-texto-suave); }
.mc-bloco-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.mc-bloco-lista li { padding: 8px 0; border-bottom: 1px solid var(--mc-borda); font-size: 13.5px; }
.mc-bloco-lista.mc-coluna-unica { grid-template-columns: 1fr; }

.mc-bloco-sequencia { list-style: none; margin: 0; padding: 0; counter-reset: mcpasso; }
.mc-bloco-sequencia li {
  counter-increment: mcpasso; position: relative; min-height: 28px;
  padding: 3px 0 16px 40px; font-size: 13.5px; font-weight: 500; color: var(--alm-primary);
}
.mc-bloco-sequencia li::before {
  content: counter(mcpasso); position: absolute; left: 0; top: 0; z-index: 1;
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 1.5px solid var(--alm-secondary); border-radius: 50%; background: var(--alm-surface);
  font-size: 11.5px; font-weight: 700;
}
.mc-bloco-sequencia li:not(:last-child)::after {
  content: ""; position: absolute; left: 12.5px; top: 26px; bottom: 0; width: 1.5px; background: var(--mc-borda-forte);
}
.mc-bloco-citacao { margin: 0; padding: 6px 0 6px 16px; border-left: 3px solid var(--alm-accent); font-size: 16px; line-height: 1.5; color: var(--alm-primary); }
.mc-bloco-nota { padding: 16px 20px; border: 1px solid var(--mc-borda-forte); border-left: 3px solid var(--alm-primary); border-radius: var(--radius-sm); }
.mc-bloco-nota strong { display: block; margin-bottom: 4px; font-size: 13.5px; color: var(--alm-primary); }
.mc-bloco-nota p { font-size: 13.5px; color: var(--alm-text); }
.mc-bloco-nota p + p { margin-top: 6px; }
.mc-bloco-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mc-termo { padding: 8px 16px; background: var(--alm-primary); color: #fff; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; }
.mc-mais { font-weight: 700; color: var(--alm-secondary); }

.mc-saidas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mc-saidas li { padding: 7px 15px; border: 1.5px solid var(--alm-primary); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--alm-primary); }

.mc-campos { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mc-campo { padding: 14px 16px; background: var(--alm-surface); border: 1px solid var(--mc-borda); border-radius: var(--radius-sm); }
.mc-campo dt { margin-bottom: 4px; font-size: 13px; font-weight: 700; color: var(--alm-primary); }
.mc-campo dd { margin: 0; font-size: 13px; color: var(--alm-text); }
.mc-campo dd ul { margin: 0; padding-left: 1.1em; }
.mc-campo.mc-a-definir { background: transparent; border-style: dashed; }
.mc-campo.mc-a-definir dd { color: var(--mc-texto-fraco); font-style: italic; }

/* ---- Responsividade (baseada na largura do conteúdo) ---- */

/* Conteúdo médio: etapas em 3 colunas, sem trilho horizontal */
@container mc (max-width: 1000px) {
  .mc-fluxo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .mc-fluxo::before, .mc-etapa-item:not(:last-child)::after, .mc-gestao-marcas { display: none; }
  .mc-etapa-item { align-items: flex-start; gap: 10px; }
  .mc-gestao-faixa { margin-top: 18px; }
  .mc-ciclo li { font-size: 12.5px; }
}

@container mc (max-width: 820px) {
  .mc-cabeca, .mc-filosofia, .mc-gestao-grade, .mc-ciclo-rodape { grid-template-columns: 1fr; gap: 28px; }

  .mc-ciclo { grid-template-columns: 1fr; gap: 16px; }
  .mc-ciclo li { min-height: 0; padding: 14px; }
  .mc-ciclo li:not(:last-child)::after {
    top: auto; bottom: -13px; right: 50%; margin: 0 -4px 0 0; transform: rotate(135deg);
  }
  .mc-ciclo-wrap { padding: 0 0 0 36px; }
  .mc-ciclo-retorno {
    left: 0; right: auto; top: 44px; bottom: 44px; width: 22px; height: auto;
    border: 1.5px solid var(--alm-secondary); border-right: none; border-radius: 22px 0 0 22px;
  }
  .mc-ciclo-retorno::before { left: auto; right: -4px; top: -5px; transform: rotate(135deg); }
  .mc-ciclo-retorno span { left: -10px; bottom: 50%; transform: translate(-50%, 50%) rotate(-90deg); }
}

/* Conteúdo estreito (celular): fluxo vertical com trilho à esquerda */
@container mc (max-width: 620px) {
  .mc-fluxo { grid-template-columns: 1fr; gap: 14px; }
  .mc-fluxo::before {
    display: block; top: calc(var(--mc-no) / 2); bottom: calc(var(--mc-no) / 2);
    left: calc(var(--mc-no) / 2 - 0.75px); right: auto; width: 1.5px; height: auto;
  }
  .mc-etapa-item { flex-direction: row; gap: 14px; }
  .mc-etapa-saidas-lista span { display: inline; }
  .mc-etapa-saidas-lista span:not(:last-child)::after { content: ", "; font-weight: 400; }
  .mc-filosofia { padding: 22px; }
  .mc-capacidades, .mc-indicadores { grid-template-columns: 1fr; }
  .mc-titulo { font-size: 26px; }
  .mc-metodologia { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .mc-entrada { flex-direction: column; align-items: flex-start; }
  .mc-gaveta-cabeca, .mc-gaveta-corpo, .mc-gaveta-rodape { padding-left: 18px; padding-right: 18px; }
  .mc-gaveta-titulo { font-size: 24px; }
  .mc-bloco-lista, .mc-campos { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   Ajuste pedido por Liliane: o card de entrada usa o tom
   verde-escuro da marca (visual "oficial"), diferenciando-o
   dos processos ainda pendentes de finalizar. Só sobrescreve
   cor/fundo — o restante do bloco acima cuida do layout.
   ------------------------------------------------------------ */
.mc-entrada {
  background: var(--alm-primary);
  border-left-color: var(--alm-primary);
}
.mc-entrada:hover { border-left-color: var(--alm-accent); }
.mc-entrada-titulo { color: #fff; }
.mc-entrada-sub { color: rgba(255,255,255,0.75); }
.mc-entrada-etapas { color: var(--alm-tertiary); }
.mc-entrada-etapas span:not(:last-child)::after { color: rgba(255,255,255,0.4); }
.mc-entrada-acao { color: var(--alm-accent); }
.mc-entrada .mc-versao { border-color: rgba(255,255,255,0.5); color: #fff; }

/* =====================================================================
   PRODUTOS E SERVIÇOS  (anexar ao FINAL de styles.css)
   ---------------------------------------------------------------------
   Mesmas classes que products.js já gera — só o visual foi redesenhado
   (cantos mais arredondados, sombras suaves em vez de bordas grossas,
   hover com leve elevação), no mesmo estilo do restante da intranet.
   ===================================================================== */
.ps-page {
  --ps-ink: var(--alm-primary, #1B3B40);
  --ps-sage: var(--alm-secondary, #5F806F);
  --ps-peach: var(--alm-accent, #F4B080);
  --ps-mint: var(--alm-tertiary, #CDE4BA);
  --ps-mist: #F3F6F0;
  --ps-blush: #FBEADF;
  --ps-rust: #B8633A;
  --ps-line: #E3E9DF;
  --ps-shadow: 0 1px 2px rgba(27,59,64,.06), 0 12px 28px rgba(27,59,64,.08);
  --ps-shadow-lift: 0 18px 40px rgba(27,59,64,.14);
  font-family: 'Montserrat', system-ui, sans-serif;
  color: var(--ps-ink);
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 4px 56px;
  line-height: 1.55;
}
.ps-page *, .ps-page *::before, .ps-page *::after { box-sizing: border-box; }
.ps-page p { margin: 0; }
.ps-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ps-icon { width: 18px; height: 18px; flex: none; }
.ps-icon-lg { width: 24px; height: 24px; }
.ps-page :focus-visible { outline: 3px solid var(--ps-peach); outline-offset: 2px; border-radius: 4px; }

/* ---------- Cabeçalho ---------- */
.ps-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; }
.ps-title { font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 8px; }
.ps-intro { font-size: 1.01rem; color: var(--ps-sage); max-width: 52ch; }
.ps-searchbox {
  display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid var(--ps-line); border-radius: 999px; padding: 0 18px;
  min-width: min(360px, 100%); color: var(--ps-sage);
  box-shadow: var(--ps-shadow); transition: border-color .18s ease, box-shadow .18s ease;
}
.ps-searchbox:focus-within { border-color: var(--ps-ink); box-shadow: 0 0 0 3px rgba(244,176,128,.45); }
.ps-page .ps-searchbox input:focus-visible { outline: none; }
.ps-searchbox input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 0.95rem; padding: 13px 0; width: 100%; color: var(--ps-ink); }
.ps-empty { background: var(--ps-blush); border-radius: 16px; padding: 16px 22px; margin-bottom: 24px; }

.ps-h2 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 6px; }
.ps-lead { color: var(--ps-sage); margin-bottom: 22px !important; }

/* ---------- Mapa das soluções ---------- */
.ps-map { margin-bottom: 60px; }
.ps-map-head { margin-bottom: 22px; }
.ps-map-head p { color: var(--ps-sage); }
.ps-map-body { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; align-items: start; gap: 20px; }

.ps-says { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 16px; }
.ps-say {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; color: var(--ps-ink);
  border: 1px solid var(--ps-line); border-radius: 18px; padding: 16px 20px;
  box-shadow: var(--ps-shadow);
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}
.ps-say:hover { transform: translateY(-2px); box-shadow: var(--ps-shadow-lift); border-color: var(--ps-sage); }
.ps-say-quote { font-style: italic; font-size: 0.96rem; color: var(--ps-sage); line-height: 1.4; }
.ps-say-product { font-weight: 700; font-size: 0.88rem; }
.ps-say-product small { font-weight: 500; color: var(--ps-sage); margin-left: 6px; font-size: 0.8rem; }
.ps-say.is-active { background: var(--ps-ink); border-color: var(--ps-ink); color: #fff; transform: translateY(-2px); box-shadow: var(--ps-shadow-lift); }
.ps-say.is-active .ps-say-quote { color: var(--ps-mint); }
.ps-say.is-active .ps-say-product small { color: var(--ps-peach); }

.ps-detail {
  background: #fff; border: 1px solid var(--ps-line); border-radius: 24px;
  padding: 0 0 28px; min-height: 100%; overflow: hidden; outline: none;
  box-shadow: var(--ps-shadow);
}
.ps-detail.ps-swap { animation: psSwap .22s ease-out; }
@keyframes psSwap { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.ps-d-head {
  display: flex; gap: 18px; align-items: flex-start;
  background: linear-gradient(155deg, var(--ps-ink) 0%, #12292d 100%);
  color: #fff; padding: 28px 30px 26px; position: relative; overflow: hidden;
}
.ps-d-head::before {
  content: ""; position: absolute; right: -70px; top: -80px; width: 260px; height: 260px;
  border-radius: 50%; background: radial-gradient(circle, rgba(244,176,128,.22), transparent 70%);
}
.ps-d-icon {
  position: relative; z-index: 1; flex: none; width: 52px; height: 52px; border-radius: 16px;
  background: rgba(255,255,255,.14); color: var(--ps-peach); display: grid; place-items: center;
}
.ps-d-cat { position: relative; z-index: 1; font-size: 0.8rem; color: var(--ps-mint); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ps-d-name { position: relative; z-index: 1; font-size: 1.55rem; font-weight: 800; letter-spacing: -0.015em; margin: 3px 0 4px; line-height: 1.15; }
.ps-d-headline { position: relative; z-index: 1; color: rgba(255,255,255,.82); }

.ps-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 22px 30px 0; padding: 0; }
.ps-facts > div { padding: 14px 16px; background: var(--ps-mist); border-radius: 14px; }
.ps-facts dt { font-size: 0.75rem; color: var(--ps-sage); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.ps-facts dd { margin: 4px 0 0; font-weight: 700; font-size: 0.95rem; line-height: 1.35; }

.ps-detail h4 { font-size: 0.82rem; font-weight: 700; color: var(--ps-sage); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 8px; }
.ps-d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 26px 30px 0; }
.ps-d-block, .ps-gets { padding: 24px 30px 0; }
.ps-d-block > p, .ps-d-grid p { max-width: 62ch; }

.ps-steps { list-style: none; counter-reset: ps; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.ps-steps li { counter-increment: ps; display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; align-items: baseline; }
.ps-steps li::before {
  content: counter(ps); grid-row: span 2; width: 30px; height: 30px; border-radius: 10px;
  background: var(--ps-mint); display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; align-self: start;
}
.ps-steps li:first-child::before { background: var(--ps-peach); }
.ps-steps span { color: var(--ps-sage); font-size: 0.93rem; }

.ps-topics { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ps-topics li { background: var(--ps-sage); color: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 0.85rem; }

.ps-gets { margin: 26px 30px 0; padding: 20px 22px; background: var(--ps-blush); border-radius: 18px; }
.ps-gets h4 { color: var(--ps-rust); }
.ps-gets p { font-size: 1.05rem; font-weight: 500; }

.ps-attention, .ps-next { margin: 18px 30px 0 !important; padding: 12px 16px; border-radius: 12px; background: var(--ps-mist); font-size: 0.93rem; }
.ps-next { background: #EAF1E6; }

.ps-list { margin: 0; padding-left: 18px; }
.ps-list li { margin-bottom: 4px; }

.ps-d-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 26px 30px 0; margin-top: 26px; border-top: 1px solid var(--ps-line); }
.ps-btn {
  display: inline-flex; align-items: center; gap: 8px; background: var(--ps-peach); color: var(--ps-ink);
  font-weight: 700; text-decoration: none; padding: 11px 22px; border-radius: 999px;
  transition: transform .15s ease, background-color .15s ease;
}
.ps-btn:hover { background: #F0A06A; transform: translateY(-1px); }
.ps-btn .ps-icon { width: 16px; height: 16px; }
.ps-related { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--ps-sage); }
.ps-chip { font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; background: #fff; color: var(--ps-ink); border: 1px solid var(--ps-line); border-radius: 999px; padding: 6px 14px; transition: border-color .15s ease, transform .15s ease; }
.ps-chip:hover { border-color: var(--ps-ink); transform: translateY(-1px); }

.ps-pending { margin: 24px 30px 0 !important; font-size: 0.8rem; color: #8A9A8E; }
.ps-pending code { font-size: 0.78rem; background: var(--ps-mist); padding: 2px 6px; border-radius: 6px; }

.ps-map-note { margin-top: 20px !important; background: var(--ps-blush); border-radius: 16px; padding: 14px 20px; font-size: 0.95rem; }

/* ---------- Método O · G · P ---------- */
.ps-method {
  display: grid; grid-template-columns: 1fr 2fr; gap: 16px 40px;
  padding: 34px 32px; border: none; border-radius: 24px; margin-bottom: 52px;
  background: var(--ps-mist);
}
.ps-method-intro p { color: var(--ps-sage); }
.ps-ogp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ps-ogp-item {
  display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: 18px;
  padding: 18px; box-shadow: var(--ps-shadow); transition: transform .15s ease, box-shadow .15s ease;
}
.ps-ogp-item:hover { transform: translateY(-3px); box-shadow: var(--ps-shadow-lift); }
.ps-ogp-letter { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; color: #fff; background: var(--ps-ink); }
.ps-ogp-1 .ps-ogp-letter { background: var(--ps-sage); }
.ps-ogp-2 .ps-ogp-letter { background: var(--ps-peach); color: var(--ps-ink); }
.ps-ogp-item em { color: var(--ps-sage); font-style: italic; }
.ps-ogp-item p { font-size: 0.9rem; margin-top: 4px; }
.ps-method-goal { grid-column: 2; font-weight: 600; font-size: 0.95rem; }

/* ---------- Complementares ---------- */
.ps-comp { margin-bottom: 52px; }
.ps-comp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ps-comp-list li {
  display: flex; gap: 14px; background: #fff; border: 1px dashed var(--ps-line); border-radius: 20px;
  padding: 22px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ps-comp-list li:hover { transform: translateY(-3px); box-shadow: var(--ps-shadow); border-color: var(--ps-sage); }
.ps-comp-icon { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--ps-mint); color: var(--ps-ink); display: grid; place-items: center; }
.ps-comp-list h3 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; line-height: 1.3; }
.ps-comp-list p { font-size: 0.9rem; color: #3E5A57; }

/* ---------- Desafio do cliente ---------- */
.ps-challenge {
  background: linear-gradient(155deg, var(--ps-ink) 0%, #12292d 100%);
  color: #fff; border-radius: 26px; padding: 32px 34px; margin-bottom: 52px;
  position: relative; overflow: hidden;
}
.ps-challenge::before {
  content: ""; position: absolute; left: -90px; bottom: -110px; width: 300px; height: 300px;
  border-radius: 50%; background: radial-gradient(circle, rgba(205,228,186,.14), transparent 70%);
}
.ps-challenge > * { position: relative; z-index: 1; }
.ps-challenge ul { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.ps-challenge li { font-weight: 600; padding-left: 28px; position: relative; }
.ps-challenge li::before { content: "?"; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 6px; background: var(--ps-peach); color: var(--ps-ink); font-size: 0.72rem; font-weight: 800; display: grid; place-items: center; }
.ps-insight { color: var(--ps-peach); font-weight: 700; }

/* ---------- FAQ ---------- */
.ps-faq { margin-bottom: 44px; }
.ps-faq .ps-h2 { margin-bottom: 14px; }
.ps-faq details { border-bottom: 1px solid var(--ps-line); }
.ps-faq summary { cursor: pointer; font-weight: 600; padding: 17px 32px 17px 0; list-style: none; position: relative; transition: color .15s ease; }
.ps-faq summary::-webkit-details-marker { display: none; }
.ps-faq summary:hover { color: var(--ps-sage); }
.ps-faq summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font-size: 1.3rem; font-weight: 400; color: var(--ps-sage); transition: transform .18s ease; }
.ps-faq details[open] summary::after { content: "\2013"; }
.ps-faq details p { padding: 0 0 20px; color: #3E5A57; max-width: 70ch; }

.ps-tagline { text-align: center; font-weight: 700; color: var(--ps-sage); font-style: italic; }

/* ---------- Responsivo ---------- */
@media (max-width: 860px) {
  .ps-map-body { grid-template-columns: 1fr; gap: 16px; }
  .ps-says { position: static; }
  .ps-method { grid-template-columns: 1fr; padding: 26px 22px; }
  .ps-method-goal { grid-column: 1; }
  .ps-ogp, .ps-comp-list { grid-template-columns: 1fr; }
  .ps-d-grid { grid-template-columns: 1fr; }
  .ps-challenge ul { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ps-d-head, .ps-facts, .ps-d-grid, .ps-d-block, .ps-d-foot { padding-left: 20px; padding-right: 20px; }
  .ps-gets, .ps-attention, .ps-next, .ps-pending { margin-left: 20px !important; margin-right: 20px !important; }
  .ps-challenge { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-detail.ps-swap { animation: none; }
  .ps-say, .ps-ogp-item, .ps-comp-list li, .ps-btn, .ps-chip { transition: none; }
}

/* ============================================================
   MÓDULO: Método Comercial — Resumo executivo e acordeões
   ------------------------------------------------------------
   Suporte à leitura em camadas: resumo sempre visível no topo,
   destaques em citação logo abaixo, e o restante do conteúdo
   agrupado em blocos que abrem/fecham (<details>/<summary>).
   Reaproveita as variáveis --mc-* já existentes.
   ============================================================ */

.mc-resumo { background: var(--alm-surface); border: 1px solid var(--mc-borda); border-radius: var(--mc-raio); padding: 22px 24px; margin-top: 28px !important; }
.mc-resumo .mc-det-grupo-titulo { border-bottom-color: var(--mc-borda-forte); }
.mc-resumo-grade { display: grid; gap: 16px; }
.mc-resumo-item dt { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--alm-secondary); margin-bottom: 4px; }
.mc-resumo-item dd { margin: 0; font-size: 13.5px; color: var(--alm-text); }
.mc-resumo-item dd ul { margin: 4px 0 0; padding-left: 1.1em; }
.mc-resumo-item dd ul li { margin-bottom: 3px; }
.mc-resumo-destaque { padding-top: 10px; border-top: 1px dashed var(--mc-borda); }
.mc-resumo-destaque dd { font-weight: 700; color: var(--alm-primary); }

.mc-destaques { margin-top: 28px !important; }
.mc-destaques .mc-bloco:first-child h4 { display: none; }

.mc-acordeon { display: flex; flex-direction: column; gap: 10px; }
.mc-grupo-item {
  border: 1px solid var(--mc-borda); border-radius: var(--mc-raio); overflow: hidden;
  background: var(--alm-surface);
}
.mc-grupo-item[open] { border-color: var(--mc-borda-forte); }
.mc-grupo-cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 20px; cursor: pointer; list-style: none; font-weight: 700; font-size: 14px; color: var(--alm-primary);
  transition: background var(--mc-transicao);
}
.mc-grupo-cabeca::-webkit-details-marker { display: none; }
.mc-grupo-cabeca:hover { background: var(--alm-surface-alt); }
.mc-grupo-seta { width: 14px; height: 14px; flex: none; transition: transform var(--mc-transicao); color: var(--alm-secondary); }
.mc-grupo-item[open] .mc-grupo-seta { transform: rotate(180deg); }
.mc-grupo-corpo { padding: 4px 20px 22px; border-top: 1px solid var(--mc-borda); }
.mc-grupo-corpo .mc-bloco:first-child { margin-top: 20px; }

@media (max-width: 640px) {
  .mc-grupo-cabeca { padding: 13px 16px; font-size: 13.5px; }
  .mc-grupo-corpo { padding: 4px 16px 18px; }
}

/* ============================================================
   MÓDULO: Método Comercial — comparação lado a lado e
   destaque especial de grupo no acordeão
   ============================================================ */

.mc-bloco-comparacao { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mc-comparacao-col { background: var(--alm-surface-alt); border: 1px solid var(--mc-borda); border-radius: var(--radius-sm); padding: 16px; }
.mc-comparacao-col h5 { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--alm-primary); }
.mc-comparacao-pergunta { font-size: 12px; font-style: italic; color: var(--mc-texto-suave); margin: 0 0 10px; }
.mc-comparacao-col ul { margin: 0; padding-left: 1.1em; font-size: 12.5px; color: var(--alm-text); }
.mc-comparacao-col ul li { margin-bottom: 4px; }

.mc-grupo-enfase { border-color: var(--alm-accent); border-width: 1.5px; }
.mc-grupo-enfase > .mc-grupo-cabeca { color: var(--alm-primary); background: linear-gradient(90deg, rgba(244,176,128,0.14), transparent); }
.mc-grupo-enfase > .mc-grupo-cabeca span:first-child::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--alm-accent); margin-right: 8px;
}

@media (max-width: 780px) {
  .mc-bloco-comparacao { grid-template-columns: 1fr; }
}

/* ============================================================
   Mensagem de erro dos formulários de administração
   (antes só existia no CSS da tela de login)
   ============================================================ */
.form-error {
  background: #F8E1DA; color: #8A3320; border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 13px; font-weight: 600;
}

/* ============================================================
   MÓDULO: Painel de Fechamentos (baseado em clientes cadastrados)
   ------------------------------------------------------------
   Reaproveita .card, .chip, .btn, .filter-bar, .tag-pill e as cores
   de status (.closing-tone-*) que já existiam.
   ============================================================ */

.cl-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---- barra de competência ---- */
.cl-competence { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 18px; }
.cl-nav-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--alm-border); background: #fff;
  font-size: 20px; line-height: 1; cursor: pointer; color: var(--alm-primary); transition: background 0.15s ease, border-color 0.15s ease;
}
.cl-nav-btn:hover { background: var(--alm-surface-alt); border-color: var(--alm-secondary); }
.cl-competence-label { display: flex; flex-direction: column; min-width: 150px; text-align: center; }
.cl-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--alm-muted); }
.cl-competence-label strong { font-size: 19px; color: var(--alm-primary); letter-spacing: -0.01em; }
.cl-sync { margin-left: auto; font-size: 12px; color: var(--alm-muted); }
.cl-sync-warn { color: #8A3320; font-weight: 600; }

/* ---- cartões do topo (também funcionam como filtro) ---- */
.cl-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 18px; }
.cl-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer; font-family: inherit;
  padding: 14px 16px; border-radius: 16px; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.cl-card:hover { transform: translateY(-2px); border-color: var(--alm-secondary); }
.cl-card.active { background: var(--alm-primary); border-color: var(--alm-primary); }
.cl-card.active .cl-card-number, .cl-card.active .cl-card-label { color: #fff; }
.cl-card-number { font-size: 26px; font-weight: 800; color: var(--alm-primary); line-height: 1.1; }
.cl-card-label { font-size: 12px; color: var(--alm-muted); font-weight: 600; }
.cl-card-warn { border-color: #E7C9A7; background: #FBF4EA; }
.cl-card-info { border-color: #BFD4EA; background: #F1F6FB; }

/* ---- tabela ---- */
.cl-table-card { padding: 0; overflow: hidden; }
.cl-table-scroll { overflow-x: auto; }
.cl-table { width: 100%; min-width: 1120px; border-collapse: collapse; font-size: 13px; }
.cl-table th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--alm-muted); padding: 12px 14px; background: var(--alm-surface-alt); white-space: nowrap;
}
.cl-table td { padding: 14px; border-top: 1px solid var(--alm-border); vertical-align: top; }
.cl-row { cursor: pointer; transition: background 0.12s ease; }
.cl-row:hover { background: #F7FAF6; }
.cl-row-late { box-shadow: inset 3px 0 0 #C4553A; }
.cl-table-compact { min-width: 0; }
.cl-table-compact td, .cl-table-compact th { padding: 10px 10px; }

.cl-client { display: flex; gap: 12px; align-items: flex-start; min-width: 230px; }
.cl-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--alm-tertiary); color: var(--alm-primary); font-weight: 800; font-size: 12px;
}
.cl-client-name { font-weight: 700; font-size: 14px; color: var(--alm-primary); }
.cl-td-status { min-width: 200px; }
.cl-td-actions { white-space: nowrap; }
.cl-open-btn { padding: 7px 14px; font-size: 12.5px; }
.cl-link { display: block; margin-top: 6px; font-size: 12px; color: var(--alm-secondary); text-decoration: none; font-weight: 600; }
.cl-link:hover { text-decoration: underline; }

.cl-muted { color: var(--alm-muted); font-size: 12.5px; }
.cl-date-main { font-weight: 600; }
.cl-date-sub { font-size: 11.5px; color: var(--alm-muted); margin-top: 2px; }
.cl-late-text { color: #B4472B; font-weight: 700; }

.cl-mtg { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; line-height: 1.3; }
.cl-mtg-ok { background: #DDEBD8; color: #2F5C34; }
.cl-mtg-none { background: #F1E7D6; color: #7A5A1E; }
.cl-mtg-past { background: var(--alm-surface-alt); color: var(--alm-muted); }
.cl-mtg-unknown { background: #E8E8E8; color: #555; }

.cl-pend { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #DCE7F5; color: #29517D; }
.cl-pend-late { background: #F8E1DA; color: #8A3320; }

/* ---- alertas ---- */
.cl-alerts { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cl-alerts-drawer { margin: 0 0 6px; }
.cl-alert { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; line-height: 1.4; padding: 7px 10px; border-radius: 10px; border-left: 3px solid; }
.cl-alert span { font-weight: 500; opacity: 0.9; }
.cl-alert-danger { background: #F8E1DA; color: #8A3320; border-color: #C4553A; }
.cl-alert-warn   { background: #F7EBD3; color: #7A5A1E; border-color: #D19A32; }
.cl-alert-info   { background: #E3EEF8; color: #29517D; border-color: #5A8DBF; }

/* ---- painel lateral do cliente ---- */
.side-panel:has(.cl-drawer) { width: 540px; }
.cl-section { margin-top: 22px; }
.cl-section-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--alm-secondary);
  margin: 0 0 10px; display: flex; align-items: center; gap: 8px;
}
.cl-count { font-size: 11px; font-weight: 700; background: var(--alm-surface-alt); color: var(--alm-muted); padding: 2px 9px; border-radius: 999px; text-transform: none; letter-spacing: 0; }
.cl-hint { font-size: 11.5px; color: var(--alm-muted); margin-top: 6px; }

.cl-meeting-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; font-size: 13px; border: 1px solid var(--alm-border); }
.cl-meeting-ok { background: #EEF6EA; border-color: #CFE3C8; }
.cl-meeting-none { background: #FBF4EA; border-color: #E7C9A7; color: #7A5A1E; }
.cl-meeting-past { background: var(--alm-surface-alt); }
.cl-meeting-unknown { background: #F1F1F1; color: #555; }
.cl-meeting-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cl-meeting-links .btn { text-decoration: none; padding: 8px 14px; font-size: 12.5px; }

.cl-tasks { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cl-task { display: flex; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid var(--alm-border); border-radius: 12px; background: #fff; }
.cl-task-done { background: var(--alm-surface-alt); }
.cl-task-done .cl-task-desc { text-decoration: line-through; color: var(--alm-muted); }
.cl-task-main { min-width: 0; }
.cl-task-desc { font-weight: 600; font-size: 13.5px; }
.cl-task-meta { font-size: 11.5px; color: var(--alm-muted); margin-top: 3px; line-height: 1.5; }
.cl-task-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.cl-task-empty { list-style: none; padding: 6px 0; }
.cl-icon-btn { border: none; background: none; cursor: pointer; color: var(--alm-muted); font-size: 13px; padding: 2px 6px; border-radius: 6px; }
.cl-icon-btn:hover { background: #F8E1DA; color: #8A3320; }
.cl-task-form { display: flex; flex-direction: column; gap: 8px; }
.cl-task-form-row { display: grid; grid-template-columns: 1fr 140px auto; gap: 8px; }

.cl-months { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cl-months li { display: flex; justify-content: space-between; align-items: center; padding: 9px 4px; border-top: 1px solid var(--alm-border); font-size: 13px; font-weight: 600; }
.cl-months li:first-child { border-top: none; }
.cl-month-current { background: var(--alm-surface-alt); border-radius: 8px; padding-left: 10px !important; padding-right: 10px !important; }

.cl-kv { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.cl-kv dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--alm-muted); }
.cl-kv dd { margin: 2px 0 0; font-size: 13px; word-break: break-word; }

/* ---- campos de formulário do módulo ---- */
.cl-input {
  width: 100%; border: 1px solid var(--alm-border); border-radius: 10px; padding: 9px 12px;
  font-family: inherit; font-size: 13.5px; background: #fff; color: var(--alm-text);
}
.cl-input:focus { outline: none; border-color: var(--alm-secondary); }
.cl-input-sm { padding: 5px 8px; font-size: 12px; width: auto; }
.cl-textarea { resize: vertical; }
.cl-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.cl-span2 { grid-column: span 2; }
.cl-field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--alm-secondary); margin-bottom: 6px; }
.cl-field small { display: block; font-size: 11.5px; color: var(--alm-muted); margin-top: 5px; line-height: 1.4; }
.cl-form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.cl-danger-link { margin-left: auto; background: none; border: none; color: #B4472B; font-weight: 600; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.cl-danger-link:hover { text-decoration: underline; }

@media (max-width: 1100px) { .cl-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .cl-cards { grid-template-columns: repeat(2, 1fr); }
  .cl-form-grid, .cl-kv { grid-template-columns: 1fr; }
  .cl-span2 { grid-column: auto; }
  .cl-task-form-row { grid-template-columns: 1fr; }
  .cl-sync { margin-left: 0; width: 100%; }
}

/* ============================================================
   PAINEL DE FECHAMENTOS — Checklist de informações por cliente
   Bloco acrescentado ao final; não altera regras anteriores.
   ============================================================ */

/* Alerta positivo (checklist completo) */
.cl-alert-success { background: #E4F0DC; color: #2F5A2A; border-color: var(--alm-secondary); }

/* Coluna "Checklist" na tabela */
.cl-td-ck { min-width: 112px; }
.cl-ck-cell {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  width: 100%; padding: 6px 8px; border: 1px solid transparent; border-radius: 10px;
  background: none; font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.cl-ck-cell:hover { border-color: var(--alm-border); background: var(--alm-surface-alt); }
.cl-ck-cell-empty { color: var(--alm-muted); font-size: 12.5px; }
.cl-ck-pct { font-size: 15px; font-weight: 700; color: var(--alm-primary); line-height: 1; }
.cl-ck-sub { font-size: 11.5px; color: var(--alm-muted); }
.cl-ck-mini { display: block; width: 72px; height: 4px; border-radius: 999px; background: var(--alm-border); overflow: hidden; }
.cl-ck-mini span { display: block; height: 100%; border-radius: 999px; background: var(--alm-accent); }
.cl-ck-mid .cl-ck-mini span { background: var(--alm-secondary); }
.cl-ck-done .cl-ck-mini span { background: var(--alm-primary); }
.cl-ck-done .cl-ck-sub { color: var(--alm-secondary); font-weight: 600; }
.cl-ck-low .cl-ck-sub { color: #8A3320; font-weight: 600; }

/* Abas do painel lateral */
.cl-drawer-tabs { margin: 4px 0 0; }
.cl-drawer-tabs .tab-btn { display: inline-flex; align-items: center; gap: 6px; }

/* Aba "Checklist de informações" */
.cl-ck-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cl-ck-head .cl-section-title { margin: 0; }
.cl-ck-edit { padding: 6px 12px; font-size: 12.5px; }

.cl-ck-progress { padding: 14px 16px; border-radius: 12px; background: var(--alm-surface-alt); margin-bottom: 10px; }
.cl-ck-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cl-ck-progress-head strong { font-size: 18px; color: var(--alm-primary); }
.cl-ck-progress-head span { font-size: 12.5px; color: var(--alm-muted); }
.cl-ck-bar { height: 8px; border-radius: 999px; background: #fff; overflow: hidden; }
.cl-ck-bar span { display: block; height: 100%; border-radius: 999px; background: var(--alm-secondary); transition: width .25s ease; }
.cl-ck-progress-done .cl-ck-bar span { background: var(--alm-primary); }

.cl-ck-section .cl-alert { margin-bottom: 10px; font-size: 12.5px; }

.cl-ck-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cl-ck-item { border: 1px solid var(--alm-border); border-radius: 12px; background: #fff; transition: background .15s ease, border-color .15s ease; }
.cl-ck-item:hover { border-color: var(--alm-secondary); }
.cl-ck-item-done { background: var(--alm-surface-alt); }
.cl-ck-label { display: flex; gap: 14px; align-items: flex-start; padding: 13px 14px; cursor: pointer; }
.cl-ck-box {
  flex: none; width: 24px; height: 24px; margin: 0; cursor: pointer;
  accent-color: var(--alm-primary);
}
.cl-ck-box:disabled { cursor: wait; opacity: .6; }
.cl-ck-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cl-ck-title { font-size: 14.5px; font-weight: 600; color: var(--alm-text); line-height: 1.35; }
.cl-ck-item-done .cl-ck-title { color: var(--alm-primary); }
.cl-ck-desc { font-size: 12.5px; color: var(--alm-muted); line-height: 1.4; }
.cl-ck-meta { font-size: 12px; color: var(--alm-muted); }
.cl-ck-when { color: var(--alm-secondary); font-weight: 600; }
.cl-ck-opt { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--alm-surface-alt); color: var(--alm-muted); font-size: 10.5px; font-weight: 600; vertical-align: middle; }
.cl-ck-empty { padding: 18px 12px; font-size: 13px; line-height: 1.6; }

/* Histórico do checklist por competência */
.cl-ck-month-btn {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;
  border: none; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; text-align: left;
}
.cl-ck-month-btn:disabled { cursor: default; }
.cl-ck-month-btn:not(:disabled):hover span:first-child { text-decoration: underline; }
.cl-ck-month-pct { font-size: 12px; font-weight: 700; color: var(--alm-muted); }
.cl-ck-month-done { color: var(--alm-secondary); }

/* Editor do checklist padrão */
.cl-tpl-list { list-style: none; margin: 4px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cl-tpl-item { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--alm-border); border-radius: 12px; background: #fff; }
.cl-tpl-order { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.cl-tpl-num { font-size: 12px; font-weight: 700; color: var(--alm-muted); }
.cl-tpl-move:hover { background: var(--alm-surface-alt); color: var(--alm-primary); }
.cl-tpl-move:disabled { opacity: .3; cursor: default; background: none; }
.cl-tpl-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cl-tpl-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.cl-tpl-req { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--alm-text); white-space: nowrap; cursor: pointer; }
.cl-tpl-req input { width: 16px; height: 16px; accent-color: var(--alm-primary); }

@media (max-width: 640px) {
  .cl-tpl-row { grid-template-columns: 1fr; }
  .cl-ck-label { padding: 12px; gap: 12px; }
}