/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/* ============================================
   DASH MEDULA — Design System
   ============================================ */

html {
  height: 100%;
}

body {
  height: 100%;
}

:root,
[data-theme="dark"],
[data-theme="auto"] {
  --brand-primary: #cd2b39;
  --brand-primary-muted: rgba(205, 43, 57, 0.15);
  --brand-primary-border: rgba(205, 43, 57, 0.3);

  --status-success: #3e7e55;
  --status-success-bg: rgba(62, 126, 85, 0.1);
  --status-success-border: rgba(62, 126, 85, 0.25);
  --status-warning: #d97706;
  --status-warning-bg: rgba(217, 119, 6, 0.1);
  --status-warning-border: rgba(217, 119, 6, 0.25);
  --status-warning-strong: #e65100;
  --status-info: #4f46e5;
  --status-info-bg: rgba(79, 70, 229, 0.1);
  --status-info-border: rgba(79, 70, 229, 0.25);
  --status-info-strong: #7b74ff;
  --status-error: #c62828;
  --status-error-bg: rgba(198, 40, 40, 0.1);
  --status-error-border: rgba(198, 40, 40, 0.3);

  /* Diff/destaque verde (ex: bloco "alterado") — versão dark */
  --diff-add: #16a34a;
  --diff-add-hover: #15803d;
  --diff-add-bg: rgba(22, 163, 74, 0.12);
  --diff-add-border: rgba(22, 163, 74, 0.35);
  --diff-add-strong: #86efac;
  --diff-add-text: #dcfce7;

  --bg-canvas: #0b0b0b;
  --bg-surface: #141414;
  --bg-surface-box: #0f0f0f;
  --bg-surface-raised: #1c1c1c;
  --bg-surface-hover: #222222;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-muted: rgba(255, 255, 255, 0.12);

  --text-primary: #e2e2e2;
  --text-secondary: #a3a3a3;
  --text-muted: #666666;

  /* Overlays e scrim — sempre rgba para compor com o fundo do tema */
  --overlay-soft: rgba(255, 255, 255, 0.04);
  --overlay-strong: rgba(255, 255, 255, 0.18);
  --scrim: rgba(0, 0, 0, 0.5);
  --scrim-cat: rgba(0, 0, 0, 0.5);
  /* Backdrop translúcido sobre o canvas (header sticky etc.) */
  --bg-canvas-overlay: rgba(11, 11, 11, 0.75);
  /* "Escurecer fundo" — preto translúcido nos DOIS temas (não inverte no light) */
  --inset-shade: rgba(0, 0, 0, 0.18);
  --inset-shade-strong: rgba(0, 0, 0, 0.28);
  /* Texto sobre fundo de acento (botões coloridos, badges) — branco nos dois temas */
  --surface-on-accent: #ffffff;

  --font-main: "Epilogue", system-ui, -apple-system, sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --nav-height: 64px;
  --transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Icon size tokens — usados via font-size inline ou CSS class */
  --icon-micro: 5px;
  /* StatusBadge xs chevron */
  --icon-nano: 6px;
  /* StatusBadge sm chevron */
  --icon-xs: 7px;
  /* StatusBadge md / DateBadge chevron */
  --icon-sm: 10px;
  /* KPIs, external-link, checks, meta actions */
  --icon-md: 13px;
  --icon-ml: 14px;
  /* Default btn icons, card task link, building */
  --icon-lg: 16px;
  /* Trash, warning, destaques */
  --icon-xl: 18px;
  /* TeableLink, card-show, card-curso */
  --icon-xxl: 26px;
  /* Err icon, section construção */

  --icon-btn-size: 28px;
  /* Lado do botão ícone quadrado */



  /* Tokens semânticos do .coop-btn-icon (label vs ícone — separados pra evitar
     vazamento por herança). Override por seletor / inline quando precisar. */
  --coop-btn-text-fs: var(--fs-sm);
  /* 11px — label do botão (alinha com .btn-sm/.btn-date) */
  --coop-btn-icon-fs: var(--icon-ml);
  /* 15px — ícone default do botão */

  /* Tipografia — escala derivada do uso real (system.md §Tipografia) */
  --fs-3xs: 8px;
  /* glyph decorativo (content: "▶" etc) */
  --fs-2xs: 9px;
  /* badges micro */
  --fs-xs: 10px;
  /* badges, contagens */
  --fs-sm: 11px;
  /* meta/badge/uppercase label */
  --fs-md: 12px;
  /* body padrão / label */
  --fs-lg: 13px;
  /* texto principal / input / button */
  --fs-xl: 14px;
  /* header de popup / header de card */
  --fs-2xl: 15px;
  /* valor monetário de destaque */
  --fs-3xl: 18px;
  /* glyph decorativo grande */
  --fs-4xl: 16px;
  /* headers de seção, dropdown items mobile */
  --fs-5xl: 20px;
  /* títulos hero */
  --fs-6xl: 22px;
  /* valores monetários grandes (KPI, repasse) */
  --fs-7xl: 24px;
  /* destaque de valor em modal */
  --fs-8xl: 28px;
  /* estatística hero */

  /* Spacing — escala derivada do uso real (4/6/8/10/12/14/16 dominam 90%) */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;

  /* Compensação do zoom global. Quando precisar de
     altura ancorada no viewport REAL (sem efeito do zoom), use:
     height: calc(100vh / var(--html-zoom)). */
  --html-zoom: 1.10;
}

[data-theme="light"] {
  --brand-primary: #cd2b39;
  --brand-primary-muted: rgba(205, 43, 57, 0.10);
  --brand-primary-border: rgba(205, 43, 57, 0.25);

  --status-success: #2e7d4f;
  --status-success-bg: rgba(46, 125, 79, 0.10);
  --status-success-border: rgba(46, 125, 79, 0.25);
  --status-warning: #b45309;
  --status-warning-bg: rgba(180, 83, 9, 0.10);
  --status-warning-border: rgba(180, 83, 9, 0.25);
  --status-warning-strong: #c2410c;
  --status-info: #4338ca;
  --status-info-bg: rgba(67, 56, 202, 0.10);
  --status-info-border: rgba(67, 56, 202, 0.25);
  --status-info-strong: #4338ca;
  --status-error: #c62828;
  --status-error-bg: rgba(198, 40, 40, 0.08);
  --status-error-border: rgba(198, 40, 40, 0.25);

  /* Diff/destaque verde — versão light */
  --diff-add: #15803d;
  --diff-add-hover: #166534;
  --diff-add-bg: #dcfce7;
  --diff-add-border: #86efac;
  --diff-add-strong: #16a34a;
  --diff-add-text: #166534;

  --bg-canvas: hsl(60, 10%, 95%);
  --bg-surface: hsl(60, 10%, 93%);
  --bg-surface-box: hsl(60, 10%, 85%);
  --bg-surface-raised: hsl(60, 10%, 95%);
  --bg-surface-hover: hsl(60, 10%, 97%);

  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-muted: rgba(0, 0, 0, 0.12);

  --text-primary: #1a1a1a;
  --text-secondary: #525252;
  --text-muted: #888888;

  --overlay-soft: rgba(0, 0, 0, 0.03);
  --overlay-strong: rgba(0, 0, 0, 0.10);
  --scrim: rgba(0, 0, 0, 0.2);
  --scrim-cat: rgba(0, 0, 0, 0.05);
  --bg-canvas-overlay: rgba(255, 255, 255, 0.80);
  --inset-shade: rgba(0, 0, 0, 0.06);
  --inset-shade-strong: rgba(0, 0, 0, 0.10);
  --surface-on-accent: #ffffff;
}

/* Wrapper transparente que só carrega CSS vars (cliente: cor da marca) */
.painel-accent-scope {
  display: contents;
}

/* ---- Auto: segue prefers-color-scheme do SO ---- */
@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    --brand-primary: #cd2b39;
    --brand-primary-muted: rgba(205, 43, 57, 0.10);
    --brand-primary-border: rgba(205, 43, 57, 0.25);

    --status-success: #2e7d4f;
    --status-success-bg: rgba(46, 125, 79, 0.10);
    --status-success-border: rgba(46, 125, 79, 0.25);
    --status-warning: #b45309;
    --status-warning-bg: rgba(180, 83, 9, 0.10);
    --status-warning-border: rgba(180, 83, 9, 0.25);
    --status-warning-strong: #c2410c;
    --status-info: #4338ca;
    --status-info-bg: rgba(67, 56, 202, 0.10);
    --status-info-border: rgba(67, 56, 202, 0.25);
    --status-info-strong: #4338ca;
    --status-error: #c62828;
    --status-error-bg: rgba(198, 40, 40, 0.08);
    --status-error-border: rgba(198, 40, 40, 0.25);

    --diff-add: #15803d;
    --diff-add-hover: #166534;
    --diff-add-bg: #dcfce7;
    --diff-add-border: #86efac;
    --diff-add-strong: #16a34a;
    --diff-add-text: #166534;

    --bg-canvas: hsl(60, 10%, 95%);
    --bg-surface: hsl(60, 10%, 93%);
    --bg-surface-box: hsl(60, 10%, 85%);
    --bg-surface-raised: hsl(60, 10%, 95%);
    --bg-surface-hover: hsl(60, 10%, 97%);

    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-muted: rgba(0, 0, 0, 0.12);

    --text-primary: #1a1a1a;
    --text-secondary: #525252;
    --text-muted: #888888;

    --overlay-soft: rgba(0, 0, 0, 0.03);
    --overlay-strong: rgba(0, 0, 0, 0.10);
    --scrim: rgba(0, 0, 0, 0.2);
    --scrim-cat: rgba(0, 0, 0, 0.05);
    --bg-canvas-overlay: rgba(255, 255, 255, 0.80);
    --inset-shade: rgba(0, 0, 0, 0.06);
    --inset-shade-strong: rgba(0, 0, 0, 0.10);
    --surface-on-accent: #ffffff;
  }
}

/* ---- Brand color override (independente do tema dark/light) ---- */
[data-brand="medula"] {
  --brand-primary: #cd2b39;
  --brand-primary-muted: rgba(205, 43, 57, 0.15);
  --brand-primary-border: rgba(205, 43, 57, 0.3);
}

[data-brand="rosa"] {
  --brand-primary: #d35098;
  --brand-primary-muted: rgba(211, 80, 152, 0.15);
  --brand-primary-border: rgba(211, 80, 152, 0.3);
}

[data-brand="menta"] {
  --brand-primary: #8d5df4;
  --brand-primary-muted: rgba(141, 93, 244, 0.15);
  --brand-primary-border: rgba(141, 93, 244, 0.3);
}

[data-brand="roxo"] {
  --brand-primary: #3c82f6;
  --brand-primary-muted: rgba(60, 130, 246, 0.15);
  --brand-primary-border: rgba(60, 130, 246, 0.3);
}

[data-brand="azul"] {
  --brand-primary: #28b583;
  --brand-primary-muted: rgba(40, 181, 131, 0.15);
  --brand-primary-border: rgba(40, 181, 131, 0.3);
}

[data-brand="violeta"] {
  --brand-primary: #89ba2b;
  --brand-primary-muted: rgba(137, 186, 43, 0.15);
  --brand-primary-border: rgba(137, 186, 43, 0.3);
}

[data-brand="azul-petroleo"] {
  --brand-primary: #ddae2c;
  --brand-primary-muted: rgba(221, 174, 44, 0.15);
  --brand-primary-border: rgba(221, 174, 44, 0.3);
}

[data-brand="laranja"] {
  --brand-primary: #e8580c;
  --brand-primary-muted: rgba(232, 88, 12, 0.15);
  --brand-primary-border: rgba(232, 88, 12, 0.3);
}

[data-brand="bronze"] {
  --brand-primary: #a88d6f;
  --brand-primary-muted: rgba(168, 141, 111, 0.15);
  --brand-primary-border: rgba(168, 141, 111, 0.3);
}

[data-brand="preto"] {
  --brand-primary: #737373;
  --brand-primary-muted: rgba(115, 115, 115, 0.18);
  --brand-primary-border: rgba(115, 115, 115, 0.35);
}

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

body {
  font-family: var(--font-main);
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  transition: background-color 600ms ease, color 600ms ease;
  font-size: var(--fs-xl);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
}

/* a:hover { text-decoration: underline; } */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-canvas);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-surface-hover);
  border-radius: 3px;
}

/* ---- Navbar ---- */
.navbar {
  height: var(--nav-height);
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg-canvas-overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
}

.navbar .nav-brand {
  display: flex;
  align-items: center;
}

.navbar .nav-logo {
  height: 24px;
  display: block;
}

.navbar .nav-right {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--text-secondary);
}

.badge-tag {
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

.badge-tag-cliente {
  background: var(--brand-primary-muted);
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary-border);
}

.badge-tag-cooperado {
  background: var(--status-info-bg);
  color: var(--status-info-strong);
  border: 1px solid var(--status-info-border);
}

/* ---- Main Content ---- */
.main-content {
  max-width: 1140px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

/* ---- Cards ---- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
  transition: var(--transition-smooth);
}

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

.card-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--text-secondary);
  letter-spacing: 0.08em;
}

.card-body {
  padding: 0;
}

.card-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--border-subtle);
  background: var(--overlay-soft);
  text-align: center;
}

/* ---- KPI Grid ---- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.kpi-card {
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: var(--transition-smooth);
}

.kpi-card:hover {
  border-color: var(--border-muted);
}

.kpi-card .kpi-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kpi-card .kpi-value {
  font-size: var(--fs-6xl);
  font-weight: 700;
  color: var(--text-primary);
}

.kpi-card .kpi-sub {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

/* ---- Status Badge ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.05em;
}

.badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---- Alert Banner ---- */
/* ---- Pending Box (Cliente) ---- */
.pending-box {
  background: var(--bg-surface);
  border: 1px solid var(--brand-primary-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.pending-box-header {
  padding: 14px 24px;
  background: var(--brand-primary-muted);
  border-bottom: 1px solid var(--brand-primary-border);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: 0.08em;
  color: var(--brand-primary);
}

.pending-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-subtle);
  transition: var(--transition-smooth);
}

.pending-item:last-child {
  border-bottom: none;
}

.pending-item:hover {
  background: var(--bg-surface-hover);
}

.pending-item .pending-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pending-item .pending-title {
  font-weight: 500;
  font-size: var(--fs-lg);
  color: var(--text-primary);
}

.pending-item .pending-meta {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 16px;
}

.pending-item .pending-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ---- Task Row ---- */
.task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-subtle);
  transition: var(--transition-smooth);
  gap: 16px;
}

.task-row:last-child {
  border-bottom: none;
}

.task-row:hover {
  background: var(--bg-surface-hover);
}

.task-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1;
  min-width: 0;
}

.task-title {
  font-weight: 500;
  color: var(--text-primary);
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
}

.task-meta {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.task-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
}

.task-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ---- Group Header ---- */
.group-header {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 24px 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.group-header:first-child {
  padding-top: 8px;
}

/* ---- Accordion ---- */
.accordion-item {
  border-bottom: 1px solid var(--border-subtle);
  transition: var(--transition-smooth);
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-trigger {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 24px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-main);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 15px;
  transition: var(--transition-smooth);
}

.accordion-trigger:hover {
  background: var(--bg-surface-hover);
}

.accordion-item.open .accordion-trigger {
  background: var(--overlay-soft);
}

.accordion-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-title {
  font-weight: 600;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
}

.accordion-status {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-surface-raised);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.03em;
}

.accordion-content {
  background: var(--inset-shade);
  border-top: 1px solid var(--border-subtle);
  animation: slideDown 0.25s ease-out;
}

/* ---- Progress Bar ---- */
.progress-container {
  display: flex;
  align-items: center;
  gap: 15px;
}

.progress-bar {
  flex: 1 1;
  height: 2px;
  background: var(--bg-surface-raised);
  border-radius: 1px;
  overflow: hidden;
  display: flex;
}

.progress-segment {
  height: 100%;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-text {
  font-size: var(--fs-md);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  min-width: 60px;
  text-align: right;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-raised);
  color: var(--text-secondary);
  transition: var(--transition-smooth);
  font-family: var(--font-main);
  white-space: nowrap;
}

.btn:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-muted);
  color: var(--text-primary);
}

.btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.btn-sm {
  height: 28px;
  padding: 0 8px;
  font-size: var(--fs-sm);
}

.btn-icon {
  width: var(--icon-btn-size);
  padding: 0;
}

.btn-lineup {
  width: var(--icon-btn-size);
  min-width: var(--icon-btn-size);
  max-width: var(--icon-btn-size);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-label {
  display: inline;
}

@media (max-width: 768px) {
  .btn-label {
    display: inline;
  }

  .task-actions .btn {
    flex: 1 1 auto;
    min-width: 60px;
  }
}

.btn-ghost {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-main);
  font-size: var(--fs-lg);
  font-weight: 500;
  cursor: pointer;
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  transition: var(--transition-smooth);
}

.btn-ghost:hover {
  color: var(--text-primary);
  background: var(--bg-surface-raised);
}

.btn-active {
  background: var(--status-success-bg);
  border-color: var(--status-success-border);
  color: var(--status-success);
}

.btn-active:hover {
  background: var(--status-success-border);
  border-color: var(--status-success-border);
  color: var(--status-success);
}

.btn-selected {
  background: var(--brand-primary-muted);
  border-color: var(--brand-primary-border);
  color: var(--brand-primary);
}

.btn-selected:hover {
  background: var(--brand-primary-border);
  border-color: var(--brand-primary-border);
  color: var(--brand-primary);
}

/* ---- Variantes de cor fixa (aplicáveis em .btn, .btn-sm ou .btn-status).
   Não definem hover/filter — herdam do parent (.btn-status já tem filter de
   brightness no hover; .btn herda o behavior padrão). ---- */
.btn-primary {
  background: var(--brand-primary);
  color: var(--surface-on-accent);
  border-color: var(--brand-primary);
}

.btn-primary:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--surface-on-accent);
}

.btn-danger {
  background: var(--status-danger, #d33);
  color: var(--surface-on-accent);
  border-color: var(--status-danger, #d33);
}

.btn-danger:hover {
  background: var(--status-danger, #d33);
  border-color: var(--status-danger, #d33);
  color: var(--surface-on-accent);
}

.btn-whatsapp {
  background: #25D366;
  border-color: #25D366;
  color: var(--surface-on-accent);
}

.btn-whatsapp:hover {
  background: #25D366;
  border-color: #25D366;
  color: var(--surface-on-accent);
}

/* ---- Dropdown ---- */
.dropdown-wrap {
  position: relative;
}

/* Dropdown flutuante (StatusBadge.floating) — PORTADO pro body: o wrapper é fixed
   e o JS calcula top/left; o menu interno deixa de ser absolute pra dimensionar o
   wrapper. Fica acima de qualquer overflow/scroll (ex: Grid View). !important
   reseta as regras base de .dropdown-menu (right:0, top:100%, position:absolute),
   mesmo padrão de .nota-shuffle-menu-floating. */
.dropdown-floating {
  position: fixed;
  z-index: 1000;
}

.dropdown-floating > .dropdown-menu {
  position: static !important;
  right: auto !important;
  top: auto !important;
  margin-top: 0 !important;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 50;
  min-width: 175px;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 12px 32px var(--scrim);
  margin-top: 6px;
  padding: 10px;
  max-height: 60vh;
  overflow-y: auto;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: var(--fs-md);
  color: var(--text-primary);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-main);
  transition: var(--transition-smooth);
  border-radius: var(--radius-sm);
}

.dropdown-item:hover {
  background: var(--bg-surface-hover);
}

.dropdown-item--ativo {
  background: var(--bg-surface-hover);
  font-weight: 600;
}

/* Opção destacada na navegação por teclado (grid tipo planilha). Anel sutil pra
   distinguir do --ativo (item selecionado) e do hover do mouse. */
.dropdown-item--hi {
  background: var(--bg-surface-hover);
  box-shadow: inset 2px 0 0 0 var(--brand-primary);
}

/* ---- Subtask (within accordion) ---- */
.subtask-item {
  padding: 14px 24px 14px 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-lg);
  transition: var(--transition-smooth);
}

.subtask-item:last-child {
  border-bottom: none;
}

.subtask-item:hover {
  background: var(--bg-surface-hover);
}

.subtask-title {
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.subtask-bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.subtask-meta {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 15px;
}

/* ---- Task card (within group box) ---- */
.task-card {
  position: relative;
  padding: 14px 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  margin: 10px 0;
  background: var(--bg-surface-raised);
  transition: var(--transition-smooth);
}

.task-card:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-muted);
}

/* Task card sem fundo — usado para tarefas não-cooperado no modal de projeto */
.task-card-plain {
  background: transparent !important;
}

.task-card-plain:hover {
  background: var(--bg-surface-raised) !important;
}

.task-card-plain .coop-pill-metric,
.task-card-plain .coop-pill-pontos,
.task-card-plain .coop-pill-repasse {
  background: transparent !important;
}

.task-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 50%;
  max-width: 180px;
  height: clamp(24px, 30%, 70px);
  border-top: 1px solid var(--card-color, var(--border-muted));
  border-left: 1px solid var(--card-color, var(--border-muted));
  border-top-left-radius: inherit;
  pointer-events: none;
  z-index: 3;
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out, max-width 0.4s ease-in-out;
}

.task-card:hover::before {
  width: 80%;
  max-width: 400px;
  height: clamp(36px, 45%, 85px);
}

.cantoneira-canto-bl {
  position: relative;
}

.cantoneira-canto-bl::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: 50%;
  max-width: 180px;
  height: 40%;
  border-bottom: 1px solid var(--card-color, var(--border-muted));
  border-left: 1px solid var(--card-color, var(--border-muted));
  border-bottom-left-radius: inherit;
  pointer-events: none;
  z-index: 3;
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out, max-width 0.4s ease-in-out;
}

.cantoneira-canto-bl:hover::before {
  width: 80%;
  max-width: 400px;
  height: 65%;
}

/* Variante: canto inferior direito (espelhada da -bl) */
.cantoneira-canto-br {
  position: relative;
}

.cantoneira-canto-br::before {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 50%;
  max-width: 180px;
  height: 40%;
  border-bottom: 1px solid var(--card-color, var(--border-muted));
  border-right: 1px solid var(--card-color, var(--border-muted));
  border-bottom-right-radius: inherit;
  pointer-events: none;
  z-index: 3;
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out, max-width 0.4s ease-in-out;
}

.cantoneira-canto-br:hover::before {
  width: 80%;
  max-width: 400px;
  height: 65%;
}

/* Variante: canto superior esquerdo (espelhada da -bl no eixo vertical) */
.cantoneira-canto-tl {
  position: relative;
}

.cantoneira-canto-tl::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 50%;
  max-width: 180px;
  height: 40%;
  border-top: 1px solid var(--card-color, var(--border-muted));
  border-left: 1px solid var(--card-color, var(--border-muted));
  border-top-left-radius: inherit;
  pointer-events: none;
  z-index: 3;
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out, max-width 0.4s ease-in-out;
}

.cantoneira-canto-tl:hover::before {
  width: 80%;
  max-width: 400px;
  height: 65%;
}

/* Variante: canto superior direito (espelhada da -br no eixo vertical) */
.cantoneira-canto-tr {
  position: relative;
}

.cantoneira-canto-tr::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 50%;
  max-width: 180px;
  height: 40%;
  border-top: 1px solid var(--card-color, var(--border-muted));
  border-right: 1px solid var(--card-color, var(--border-muted));
  border-top-right-radius: inherit;
  pointer-events: none;
  z-index: 3;
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out, max-width 0.4s ease-in-out;
}

.cantoneira-canto-tr:hover::before {
  width: 80%;
  max-width: 400px;
  height: 65%;
}

/* Quando aplicada num .card-base, o overflow:hidden default clipa a cantoneira
   (que vive em top/bottom/left/right: -1px). Aqui a tornamos visível. */
.card-base.cantoneira-canto-bl,
.card-base.cantoneira-canto-br,
.card-base.cantoneira-canto-tl,
.card-base.cantoneira-canto-tr {
  overflow: visible;
}

.task-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 8px;
}

.task-card-title {
  font-weight: 500;
  font-size: var(--fs-lg);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1 1;
  min-width: 0;
}

.task-card-title-input {
  flex: 1 1;
  min-width: 60px;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text-primary);
  font-weight: 500;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  padding: 0 2px;
  outline: none;
  transition: border-color 0.15s;
}

.task-card-title-input:focus {
  border-bottom-color: var(--border-subtle);
}

.task-card-title-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

.task-card-middle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 8px;
}

.task-card-cost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface-raised);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: var(--fs-md);
  font-weight: 500;
  white-space: nowrap;
}

.task-card-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  flex-wrap: wrap;
}

.task-card-bottom span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.task-card-bottom .btn,
.task-card-bottom .badge-tag {
  height: 26px;
  line-height: 26px;
}

/* ---- Status button large ---- */
/* Status badge — padrao canonico do painel (referencia: CardTask cooperado).
   Caracteristicas: bg translucido, texto/borda com a cor do status, altura
   unificada com .btn.btn-sm e botoes de data. NAO sobrescrever em namespaces
   especificos (cooperado-painel, modal, etc) — sempre usar StatusBadge. */


.btn-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0px 8px 0px 10px;
  border-radius: 7px;
  font-size: var(--fs-sm);
  font-weight: 500;
  border-width: 0px;
  border-style: solid;
  box-sizing: border-box;
  cursor: pointer;
  font-family: var(--font-main);
  transition: var(--transition-smooth);
  line-height: 0;
}


.btn-status.label {
  padding: 0px 10px 0px 10px;
}

/* ── Field Kit (componentes canônicos de campo: SelectField etc.) ── */
/* Cadeia flex com min-width:0 do wrap até os badges: quando há muitos badges,
   eles clipam dentro da pílula em vez de transbordar a coluna e empurrar o
   chevron pra fora. Poucos badges → largura natural, chevron adjacente (igual
   ao single). */
.field-select-wrap { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; }
.field-select-wrap > .dropdown-wrap { display: flex; min-width: 0; max-width: 100%; }
.field-badges { display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.field-badge { flex: 0 0 auto; white-space: nowrap; }
.field-empty { color: var(--text-muted); }
/* No modo editável os chips ficam dentro de .field-select-wrap; aí o overflow
   precisa escapar pra o dropdown da última pílula (StatusBadge canEdit) aparecer. */
/* Por padrão clipa (não deixa pílula escapar). Só libera quando o dropdown
   abre, pra ele transbordar a célula. */
.field-select-wrap:has(.dropdown-menu) > .field-badges { overflow: visible; }

/* LinkField — dropdown com busca (busca no topo no desktop, embaixo no mobile) */
.field-link-panel { display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
/* Foto do candidato em campo user (igual ao picker de responsável). */
.field-link-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dropdown-item[data-on="true"] .field-link-avatar { outline: 1px solid var(--brand-primary); outline-offset: 2px; }
.team-avatar-initials.field-link-avatar { display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: #fff; }
.field-link-search {
  width: 100%;
  font: inherit;
  font-size: 12px;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  outline: none;
}
.field-link-search:focus { border-color: var(--brand-primary); }
.field-link-results { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; }
.field-link-empty { font-size: 11px; color: var(--text-muted); padding: 8px; }
@media (max-width: 768px) {
  /* No modal centralizado do mobile, busca vai pro rodapé (mais perto do polegar). */
  .cooperado-painel .field-link-panel { flex-direction: column-reverse; }
  .cooperado-painel .field-link-results { max-height: 50vh; }
}

/* AttachmentField — thumbnails de imagem (quadrado, object-fit cover) ou chip
   ícone+nome (arquivo não-imagem). Profundidade só por borda (sem box-shadow). */
.field-attach-item { position: relative; }
.field-attach-link { display: flex; color: inherit; text-decoration: none; }
.field-attach-thumb {
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  flex-shrink: 0;
}
.field-attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.field-attach-thumb--xs { width: 20px; height: 20px; }
.field-attach-thumb--sm { width: 26px; height: 26px; }
.field-attach-thumb--md { width: 34px; height: 34px; }
.field-attach-file {
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 140px;
  padding: 2px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 11px;
}
.field-attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field-attach-add {
  cursor: pointer;
  color: var(--text-muted);
  appearance: none;
}
.field-attach-add:hover:not(:disabled) { background: var(--bg-surface-hover); border-color: var(--border-muted); color: var(--text-primary); }
.field-attach-add:disabled { opacity: 0.4; cursor: default; }
.field-attach-remove {
  position: absolute; top: -5px; right: -5px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: var(--bg-surface-raised);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 8px;
  appearance: none;
}
.field-attach-remove:hover:not(:disabled) { color: var(--status-danger, #d33); border-color: var(--status-danger, #d33); }
.field-attach-remove:disabled { opacity: 0.5; cursor: default; }
.field-attach-edit { overflow: visible; }
.field-attach-note { white-space: normal; }

/* Feedback de interacao — so na variacao interativa (button). Press sutil via
   transform (sem adicionar borda) + brightness pra reforcar o tactile. */
button.btn-status {
  transition: transform 120ms ease-out, filter 120ms ease-out;
  transform-origin: center;
  outline: none;
}

button.btn-status:hover {
  filter: brightness(0.95);
}

button.btn-status:active {
  transform: scale(0.96);
  filter: brightness(0.88);
}

button.btn-status:focus-visible {
  box-shadow: 0 0 0 2px var(--overlay-strong);
}

/* Variante read-only — unica diferenca em relacao ao interativo: sem chevron
   (o <i> simplesmente nao e renderizado) e cursor default. Bg e borda sao
   iguais nas duas variacoes (definidos inline via hex + "1A"). */
.btn-status.btn-status-static {
  cursor: default;
}

/* Versão compacta — só dentro de modais (info-meta-grid do painel esquerdo). */
.btn-status.btn-status-sm {
  height: 20px;
  padding: 2px 7px 2.4px 7px;
  border-radius: 5px;
  font-size: var(--fs-xs);
  gap: 4px;
}

.btn-status.btn-status-sm [data-icon="chevron-down"] {
  font-size: var(--icon-nano);
  padding: 0 0 2px 0;
}

/* Tag decorativa inline em cards (ex: Assunto no CardCurso) — formato pílula. */
.btn-status.btn-status-xs {
  height: 18px;
  padding: 1px 5px 0.3px 6px;
  border-radius: 5px;
  font-size: var(--fs-2xs);
  gap: 3px;
  letter-spacing: 0.01em;
}

.btn-status.btn-status-xs [data-icon="chevron-down"] {
  font-size: var(--icon-micro);
  padding: 0 0 2px 0;
}

.btn-status [data-icon="chevron-down"] {
  font-size: var(--icon-ml);
  margin-bottom: 1px;
}

.btn-status-label {
  line-height: 0;
  margin-top: 0.5px;
}

/* Date badge — par do .btn-status pra renderizar data como badge/chip/botao.
   Visual identico ao btn-status (mesma altura, mesma forma); icone calendar
   (ou bell) no inicio e chevron so na variacao interativa. Cor inline. */
.btn-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0px 8px 0px 10px;
  border-radius: 7px;
  font-size: var(--fs-sm);
  font-weight: 500;
  border-width: 0px;
  border-style: solid;
  box-sizing: border-box;
  cursor: pointer;
  font-family: var(--font-main);
  transition: var(--transition-smooth);
  white-space: nowrap;
  line-height: 0;
}

.btn-date.btn-date-static {
  cursor: default;
}

/* Feedback de interacao — mesma logica do .btn-status. */
button.btn-date {
  transition: transform 120ms ease-out, filter 120ms ease-out;
  transform-origin: center;
  outline: none;
}

button.btn-date:hover {
  filter: brightness(0.95);
}

button.btn-date:active {
  transform: scale(0.96);
  filter: brightness(0.88);
}

button.btn-date:focus-visible {
  box-shadow: 0 0 0 2px var(--overlay-strong);
}

.btn-date [data-icon="chevron-down"] {
  font-size: var(--icon-ml);
  margin-bottom: 1px;
}

.btn-date [data-icon="calendar"],
.btn-date [data-icon="bell"] {
  font-size: var(--icon-ml);
  margin-bottom: 0.2em;
}

.btn-date-label {
  line-height: 0;
  margin-top: 0.5px;
}

/* ---- Group card (date grouping box) ---- */
.group-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 15px;
  padding: 16px;
}

.group-card-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 15px;
}

.group-card-header .group-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.group-card-header .group-count {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 400;
}

.group-card-header .group-bar {
  flex: 1 1;
  display: flex;
  gap: 2px;
  height: 2px;
  min-width: 60px;
}

.group-bar-segment {
  height: 100%;
  border-radius: 1px;
  transition: width 0.5s ease;
}

/* Wrapper do tooltip de legenda.
   Envolve o .group-bar e mantém flex:1 pra não quebrar o layout do header-bar.
   Popup é portado pro body (position:fixed via JS) — sem interferência de overflow. */
.bar-legend-wrap {
  flex: 1 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  padding: 2px 0;
  margin: -2px 0;
  cursor: pointer;
}

.bar-legend-wrap>.group-bar {
  flex: 1 1;
}

/* ---- 12-col grid ---- */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  align-items: start;
}

.col-4 {
  grid-column: span 4;
}

.col-5 {
  grid-column: span 5;
}

.col-7 {
  grid-column: span 7;
}

.col-8 {
  grid-column: span 8;
}

@media (max-width: 992px) {
  .grid-12 {
    grid-template-columns: 1fr;
  }

  .col-4,
  .col-5,
  .col-7,
  .col-8 {
    grid-column: span 1;
  }

  .col-4 .kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Collapse toggle ---- */
.collapse-toggle {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-main);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: var(--transition-smooth);
  margin-left: auto;
  flex-shrink: 0;
}

.collapse-toggle:hover {
  color: var(--text-primary);
  background: var(--bg-surface-hover);
}

/* ---- Suporte / extra info ---- */
.task-card-bottom .badge-tag {
  font-size: var(--fs-2xs);
  padding: 1px 6px;
}

/* ---- Detail panel ---- */
.detail-panel {
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 8px 24px 12px;
  font-size: var(--fs-md);
  color: var(--text-secondary);
}

.detail-panel strong {
  color: var(--text-primary);
  margin-right: 4px;
}

/* ---- Login ---- */
/* Fundo full-screen (gif por tema) + círculo central com glass effect. */
.login-page {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background-image: url("/bg/bg-mdl-dark.gif");
  background-repeat: repeat;
  background-position: center;
  background-size: cover;
  background-color: #000;
  position: relative;
  isolation: isolate;
}

/* Gif claro sobreposto — faz crossfade via opacity */
.login-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("/bg/bg-mdl-light.gif");
  background-repeat: repeat;
  background-position: center;
  background-size: cover;
  background-color: #fff;
  opacity: 0;
  transition: opacity 500ms ease;
}

[data-theme="light"] .login-page::after {
  opacity: 1;
}

@media (prefers-color-scheme: light) {
  [data-theme="auto"] .login-page::after {
    opacity: 1;
  }
}

.login-circle {
  width: min(72vw, 240px);
  height: min(110vw, 340px);
  border-radius: 9999px;
  background: transparent;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  position: relative;
  display: block;
  flex-shrink: 0;
  transition: height 520ms ease-in-out,
              width  520ms ease-in-out;
}

/* pílula → círculo ao entrar no loading */
.login-circle--circle {
  height: min(72vw, 240px);
}





[data-theme="dark"] .login-circle,
[data-theme="auto"] .login-circle {
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

@media (prefers-color-scheme: light) {
  [data-theme="auto"] .login-circle {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  }
}

.login-box {
  position: absolute;
  inset: 10px;
  text-align: center;
  /* --fh: metade da altura dos campos (2×38px + gap 15px = 91px → 46px) */
  --fh: 46px;
}

@media (max-width: 540px) {
  .login-box { inset: 10px; }
}

/* Logo: âncora pelo bottom, 20px acima do topo dos campos */
.login-top {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(50% + var(--fh) + 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Campos: centro absoluto */
.login-fields {
  position: absolute;
  top: 50%;
  left: 24px;
  right: 24px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Botões: âncora pelo top, 20px abaixo do fundo dos campos */
.login-bottom {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + var(--fh) + 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.login-logo {
  display: flex;
  justify-content: center;
  color: var(--text-primary);
}

.login-logo svg {
  height: 25px;
  width: auto;
}

.login-fade-in {
  animation: loginFadeIn 220ms ease-out both;
}

@keyframes loginFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.login-content-exit {
  animation: loginContentExit 350ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
  pointer-events: none;
}

@keyframes loginContentExit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(24px); }
}

.login-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-loading-enter {
  animation: loginLoadingEnter 400ms ease-out both;
}

@keyframes loginLoadingEnter {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.login-loading-exit {
  animation: loginLoadingExit 350ms ease-in both;
  pointer-events: none;
}

@keyframes loginLoadingExit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

.login-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.login-info-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.login-info-btn:hover {
  color: var(--text-secondary);
}

.login-info-btn-error {
  color: var(--status-error, #e53e3e);
  animation: loginHelpShake 0.35s ease both;
}

@keyframes loginHelpShake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-4px); }
  50%  { transform: translateX(4px); }
  75%  { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

.login-sub {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.login-input {
  width: 100%;
  padding: 8px 10px;
  font-size: var(--fs-lg);
  background: var(--bg-input, var(--overlay-soft));
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  outline: none;
  font-family: var(--font-main);
  text-align: center;
  transition: border-color 0.15s;
}

.login-input:focus {
  border-color: var(--brand-primary);
}

.login-input::placeholder {
  color: var(--text-muted);
}

.login-btn {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 24px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--brand-primary);
  background: var(--brand-primary);
  color: var(--surface-on-accent);
  font-family: var(--font-main);
  transition: var(--transition-smooth);
}

.login-btn:hover:not(:disabled) {
  filter: brightness(1.08);
}

.login-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.login-error {
  background: var(--brand-primary-muted);
  color: var(--brand-primary);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--brand-primary-border);
}

/* ---- Animations ---- */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }

  to {
    opacity: 1;
    max-height: 800px;
  }
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
  .main-content {
    padding: 1.5rem 0.5rem 2rem;
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: 0 1rem;
  }

  .kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .task-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .task-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 4px;
  }

  .task-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }

  .task-actions .btn-sm {
    flex: 0 0 auto;
  }

  .pending-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .subtask-item {
    padding-left: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .navbar .nav-right {
    font-size: var(--fs-md);
    gap: 8px;
  }

  .navbar .nav-logo {
    height: 20px;
  }
}

/* ============================================
   COOPERADO DASHBOARD — Layout Refinado
   ============================================ */

.cooperado-painel .nav-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.btn-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-lg);
  transition: var(--transition-smooth);
}

.btn-logout:hover {
  color: var(--brand-primary);
  background: var(--brand-primary-muted);
}

.cooperado-painel .coop-kpis {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cooperado-painel .kpi-card {
  position: relative;
  padding: 14px 18px;
  border-radius: var(--radius-md);
}

.cooperado-painel .kpi-card .kpi-value {
  font-size: var(--fs-3xl);
  font-weight: 500;
  line-height: 18px;
  margin-top: 6px;
}

.cooperado-painel .kpi-card .kpi-label {
  font-size: var(--fs-xs);
  margin-bottom: 0px;
  line-height: 10px;
}

/* KPI card small (for 2x2 grid) */
.kpi-card-sm {
  padding: 12px 14px;
  border-radius: var(--radius-md);
}

.kpi-card-sm .kpi-value {
  font-size: var(--fs-2xl);
}

.kpi-card-sm .kpi-label {
  font-size: var(--fs-2xs);
  margin-bottom: 2px;
}

/* Resumo 2x2 grid */
.resumo-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (max-width: 768px) {

  .coop-repasses-module .kpi-label,
  .coop-repasses-module .kpi-sub {
    width: 100%;
  }
}

/* Section title tarefas */
.coop-section-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 0;
}

.coop-section-count {
  font-weight: 400;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Empty state */
.coop-empty {
  color: var(--text-muted);
  font-size: var(--fs-lg);
  padding: 24px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  text-align: center;
}

/* Groups container */
.coop-grupos {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Group card header — duas linhas, clicável */
.cooperado-painel .group-card-header {
  padding: 0 0 12px;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.cooperado-painel .group-card-header-top {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.cooperado-painel .group-card-header-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  width: 100%;
}

.cooperado-painel .group-card-header-bar .group-bar {
  flex: 1 1;
  height: 2px;
}

.cooperado-painel .group-card-header .group-title {
  font-size: var(--fs-lg);
}

.cooperado-painel .group-card-header .group-count {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 400;
}

.group-card-toggle {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.group-pct {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.group-card.collapsed .group-card-header {
  padding-bottom: 0;
}

.group-card.collapsed .group-card-header-bar {
  opacity: 1.0;
}

/* Group card body */
.cooperado-painel .group-card-body {
  display: flex;
  flex-direction: column;
}

.cooperado-painel .lp-cards-body > * + * {
  margin-top: 15px;
}

.cooperado-painel .group-card {
  padding: 15px;
  overflow: visible;
}

.cooperado-painel .group-card:last-child {
  margin-bottom: 0;
}

/* Task card layout profissional */
.cooperado-painel .task-card {
  padding: 15px;
  margin: 7.5px 0;
  background: var(--bg-surface-raised);
  transition: background .15s ease;
}

.cooperado-painel .task-card:hover {
  background: var(--bg-surface-hover);
}

.cooperado-painel .task-card.expanded {
  background: var(--bg-surface);
}

.cooperado-painel .task-card-main {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 10px;
  margin-bottom: 10px;
}

.cooperado-painel .task-card-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1;
  min-width: 0;
}

.cooperado-painel .task-card-right {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.cooperado-painel .task-card-title {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  line-height: 1.3;
}

.cooperado-painel .task-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Tags */
.coop-tag-cliente {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.03em;
  /* border: 1px solid; */
  white-space: nowrap;
  flex-shrink: 0;
}

/* Marca na actions row — mesma altura dos botoes */
.cooperado-painel .task-card-actions .coop-tag-cliente {
  height: 28px;
  box-sizing: border-box;
}

.coop-tag-projeto {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  background: var(--scrim-cat);
  padding: 4px 3.8px 2.5px 5px;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1;
  margin-bottom: 3px;
}




/* Icon buttons [i] [c] [l] */
.coop-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-raised);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--coop-btn-icon-fs);
  transition: var(--transition-smooth);
}

.coop-btn-icon:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  border-color: var(--border-muted);
}

.coop-btn-icon-active {
  color: var(--brand-primary);
  border-color: var(--brand-primary-border);
  background: var(--brand-primary-muted);
}

/* Variante com ícone + texto (ex: Info) — largura automática.
   font-size do botão controla SÓ o ícone (default); label tem token próprio
   no span filho pra não herdar o tamanho do ícone. */
.coop-btn-icon.coop-btn-icon-text {
  width: auto;
  padding: 0 8px 0 8px;
  gap: 6px;
  font-size: var(--coop-btn-icon-fs);
  font-weight: 500;
}

.coop-btn-icon.coop-btn-icon-text span {
  margin-bottom: 2px;
  font-size: var(--coop-btn-text-fs);
}

/* Pills (Repasse, Pontos) */
.coop-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.coop-pill-repasse {
  color: var(--status-success);
  background: var(--status-success-bg);
  border: 1px solid var(--status-success-border);
  padding: 3px 8px;
  border-radius: 4px;
}

.coop-pill-repasse:hover {
  background: var(--status-success-border);
}

.coop-pill-pontos {
  color: var(--status-warning);
  background: var(--status-warning-bg);
  border: 1px solid var(--status-warning-border);
  padding: 3px 8px;
  border-radius: 4px;
  cursor: default;
}


/* Badge de status (chip com cor dinâmica) — usado em header de modal de transcrição */
.coop-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  border: none;
  white-space: nowrap;
  flex-shrink: 0;
}


/* Info panel inside card (expandable) */
.coop-card-wrap {
  position: relative;
}

.coop-info-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-in-out;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-subtle);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  margin: -1px 0 6px;
}

.coop-info-panel.open {
  max-height: 600px;
}

.coop-info-inner {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.coop-info-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.coop-info-section-error {
  border-left: 2px solid var(--brand-primary);
  padding-left: 10px;
}

.coop-info-text {
  font-size: 12px;
  color: var(--text-primary);
  white-space: pre-wrap;
  font-family: inherit;
}

.coop-info-text-error {
  color: var(--brand-primary);
  font-family: monospace;
}

/* Variantes de feedback usadas em ações destrutivas (ex: desinstalar LP). */
.coop-info-section-danger {
  border-left: 2px solid var(--brand-primary-border);
  padding-left: 10px;
}
.coop-info-label-danger {
  color: var(--brand-primary);
}
.coop-info-text-success {
  color: var(--text-primary);
}
.coop-info-text-hint {
  font-size: 0.8rem;
  opacity: 0.7;
  align-self: center;
}
.coop-btn-icon.coop-btn-icon-text.coop-btn-icon-text-danger {
  color: var(--brand-primary);
  border-color: var(--brand-primary-border);
  background: var(--brand-primary-muted);
}

.coop-info-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
}

.coop-info-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 40px 0;
  text-align: center;
}

.coop-info-meta-row-sub {
  opacity: 0.7;
  font-size: var(--fs-sm);
}

.coop-info-label {
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 10px;
  display: flex;
  align-items: start;
}

/* Agrupamentos do painel info (Detalhes, Datas, Relacionados) — visualmente distintos */
.cooperado-painel .task-card .coop-info-panel>.coop-info-section>.coop-info-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--card-color);
  padding-bottom: 4px;
  margin-bottom: 2px;
}

/* Modal side: labels com cor da marca (--card-color definido no dialogStyle) */
.card-modal-side-override .coop-info-label {
  color: var(--card-color);
}

/* Pill compacta pra single/multi select (Tipo, Prioridade, Advertiser, Etiquetas, Entregas) */
.coop-meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 1.3px 4px 0px 4px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  border: 1px solid;
  white-space: nowrap;
  line-height: 1.5;
}

.coop-meta-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Fallback de avatar com iniciais */
.team-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--surface-on-accent);
  font-weight: 600;
  font-size: var(--fs-2xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.nav-avatar.team-avatar-initials {
  font-size: var(--fs-lg);
}

.coop-info-text {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Checklist checkboxes */
.coop-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0px 0;
  cursor: pointer;
}

.coop-check-input {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-muted);
  border-radius: 3px;
  background: var(--bg-surface);
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition-smooth);
}

.coop-check-input:checked {
  background: var(--status-success);
  border-color: var(--status-success);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E");
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}

.coop-check-label {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  line-height: 0;
}

.coop-check-label.checked {
  text-decoration: line-through;
  color: var(--text-muted);
}

.coop-check-add-input {
  flex: 1 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--fs-md);
  color: var(--text-primary);
  padding: 0;
  font-family: inherit;
}

.coop-check-add-input::placeholder {
  color: var(--text-muted);
}

/* Lembretes in info panel */
.coop-lembrete-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-md);
  color: var(--text-secondary);
  padding: 4px 0;
}

/* Recolher button */
.coop-recolher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-main);
  padding: 6px 0;
  transition: var(--transition-smooth);
  align-self: flex-start;
}

.coop-recolher:hover {
  color: var(--text-primary);
}

/* Date menu specific */
.date-menu {
  min-width: 160px;
}

.date-item {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-primary);
}

.date-item-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-left: auto;
}

.dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Calc menu */
.calc-menu {
  min-width: 300px;
  padding: 15px 15px;
}

.calc-header {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
}

.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-sm);
  padding: 3px 0;
  color: var(--text-secondary);
}

.calc-row span:last-child {
  font-weight: 600;
  color: var(--text-primary);
}

.calc-divider {
  border-top: 1px solid var(--border-subtle);
  padding-top: 6px;
  margin-top: 3px;
}

.calc-total {
  font-size: var(--fs-md);
  padding-top: 6px;
  border-top: 1px solid var(--border-muted);
  margin-top: 3px;
}

.calc-total span {
  color: var(--status-success) !important;
}

/* === Recado card v2 (estilo task-card com tarja lateral) === */
.cooperado-painel .nota-card-wrap {
  display: block;
  margin-bottom: 8px;
}

.cooperado-painel .nota-card-wrap:last-child {
  margin-bottom: 0;
}

.cooperado-painel .nota-card-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.cooperado-painel .nota-card-v2:hover {
  background: var(--bg-surface-hover);
}

.cooperado-painel .nota-card-v2.nota-card-nostripe {
  /* --card-color já é transparent no componente, sem override extra */
}
/* Variante Link do card-base (pedidos de Módulo Pro na caixa de entrada): mesmo
   nota-card-v2, mas é um <a> → tira sublinhado e herda a cor do texto. */
.cooperado-painel .nota-card-v2.nota-card-link {
  text-decoration: none;
  color: var(--text-primary);
}

.cooperado-painel .nota-card-v2.nota-card-overdue {
  border-color: var(--status-error-border);
  background: var(--status-error-bg);
}

.cooperado-painel .nota-card-v2.nota-card-resolvido {
  background: var(--bg-surface-box);
}

.cooperado-painel .nota-card-v2.nota-card-resolvido:hover {
  background: var(--bg-surface-box);
}

@keyframes nota-fadeout {
  0% {
    opacity: 1;
  }

  93% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.cooperado-painel .nota-card-v2.nota-card-fadingout {
  animation: nota-fadeout 30s forwards;
  background: var(--bg-surface-box);
}

.cooperado-painel .nota-card-v2.nota-card-fadingout:hover {
  background: var(--bg-surface-box);
}

.cooperado-painel .nota-card-v2.nota-card-resolvido .nota-card-body {
  text-decoration: line-through;
}

.cooperado-painel .nota-card-v2::before {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 50%;
  max-width: 180px;
  height: 30%;
  border-bottom: 1px solid var(--card-color, var(--border-muted));
  border-right: 1px solid var(--card-color, var(--border-muted));
  border-bottom-right-radius: inherit;
  pointer-events: none;
  z-index: 3;
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out, max-width 0.4s ease-in-out;
}

.cooperado-painel .nota-card-v2:hover::before {
  width: 80%;
  max-width: 400px;
  height: 45%;
}

.cooperado-painel .nota-card-body {
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cooperado-painel .nota-card-origem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cooperado-painel .nota-card-origem:hover {
  color: var(--brand-primary);
}

.cooperado-painel .nota-card-origem [data-icon="link"] {
  color: var(--text-muted);
  font-size: var(--icon-sm);
}

.cooperado-painel .nota-card-origens {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
}

.cooperado-painel .nota-card-footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.cooperado-painel .nota-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1;
}

.cooperado-painel .nota-meta-data {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cooperado-painel .nota-meta-data [data-icon="bell"] {
  color: var(--status-warning);
}

.cooperado-painel .nota-meta-overdue,
.cooperado-painel .nota-meta-overdue [data-icon="bell"] {
  color: var(--status-error);
}

.cooperado-painel .nota-data-mobile {
  display: none;
}

@media (max-width: 768px) {
  .cooperado-painel .nota-data-desktop {
    display: none;
  }

  .cooperado-painel .nota-data-mobile {
    display: inline;
  }
}

.cooperado-painel .nota-users {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.cooperado-painel .nota-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-muted);
  flex-shrink: 0;
}

.nota-avatar-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border-radius: 50%;
  transition: transform 120ms ease-out, filter 120ms ease-out;
  outline: none;
}

.nota-avatar-btn:hover {
  filter: brightness(1.08);
}

.nota-avatar-btn:active {
  transform: scale(0.92);
  filter: brightness(0.9);
}

.nota-avatar-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--overlay-strong);
}

.cooperado-painel .nota-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.cooperado-painel .nota-card-actions .btn [data-icon="circle"],
.cooperado-painel .nota-card-actions .btn [data-icon="circle-check"] {
  font-size: var(--icon-md);
}

.cooperado-painel .nota-shuffle-menu {
  min-width: 200px;
  max-height: 60vh;
  overflow-y: auto;
}

.cooperado-painel .nota-shuffle-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cooperado-painel .nota-shuffle-item .nota-avatar {
  width: 20px;
  height: 20px;
}

.cooperado-painel .nota-shuffle-clear {
  color: var(--text-muted);
  background: var(--inset-shade);
}

.cooperado-painel .nota-shuffle-clear:hover {
  background: var(--inset-shade-strong);
}

.cooperado-painel .nota-shuffle-clear [data-icon="user-slash"] {
  font-size: var(--icon-md);
}

/* === Popup do recado (flutuante, portal pro body, ancorado à esquerda do card) === */
.nota-popup {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.nota-popup-floating {
  position: fixed;
  width: 360px;
  max-width: calc(100vw - 16px);
  z-index: 200;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 12px 32px var(--scrim);
  padding: 14px;
  overflow: visible;
}

.nota-popup-floating .nota-popup-body {
  max-height: calc(100vh - 240px);
  overflow-y: auto;
}

/* Shuffle dropdown portado pro body (position calculada via JS).
   !important reseta as regras base de .dropdown-menu (right:0, top:100%, position:absolute). */
.nota-shuffle-menu-floating {
  position: fixed !important;
  right: auto !important;
  top: auto;
  bottom: auto;
  margin: 0 !important;
  z-index: 250;
  min-width: 220px;
}

/* Mobile: popup + shuffle viram dialog centralizado (padrão dropdown-menu mobile) */
@media (max-width: 768px) {
  .nota-popup-floating {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: auto;
    min-width: 220px;
    max-width: 80vw;
    max-height: 70vh;
    z-index: 1000;
    overflow-y: auto;
  }

  .nota-popup-floating .nota-popup-body {
    max-height: none;
    overflow: visible;
  }

  .nota-shuffle-menu-floating {
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%);
    z-index: 1100;
  }
}

.nota-popup-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.nota-popup-marca {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.nota-popup-users {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.nota-popup-user-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

.cooperado-painel .nota-popup-users .nota-avatar {
  width: 22px;
  height: 22px;
}

.nota-popup-task {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: var(--fs-md);
  font-weight: 500;
  text-decoration: none;
}

.nota-popup-task:hover {
  color: var(--brand-primary);
}

.nota-popup-task [data-icon="link"] {
  color: var(--text-muted);
  font-size: var(--icon-sm);
}

.nota-popup-body {
  font-size: var(--fs-lg);
  color: var(--text-primary);
  white-space: pre-wrap;
  line-height: 1.5;
}

.nota-popup-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.nota-popup-footer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* === Badge (contador no botão da task) === */
.cooperado-painel .coop-btn-icon-recado {
  position: relative;
  overflow: visible;
}

.cooperado-painel .coop-btn-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--surface-on-accent);
  line-height: 1;
  border: 2px solid var(--bg-base);
  box-sizing: border-box;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Overlay transparente: captura cliques fora do popup pra fechar
   sem disparar os links/botões que estão atrás. */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 49;
}

@media (max-width: 768px) {
  .popup-overlay {
    z-index: 999;
  }
}

/* === Mobile: dropdown-menus centralizados (sem backdrop) === */
@media (max-width: 768px) {

  /* Trava scroll da página quando há popup aberto (mobile) */
  body.popup-open {
    overflow: hidden;
    touch-action: none;
  }

  .cooperado-painel .dropdown-menu {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    min-width: 220px;
    max-width: 80vw;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 0;
    box-shadow: 0 24px 64px var(--scrim);
    padding: 10px;
  }

  /* Itens de lista (status, data) maiores pra facilitar toque */
  .cooperado-painel .dropdown-menu .dropdown-item {
    padding: 14px 20px;
    font-size: var(--fs-4xl);
    min-height: 48px;
  }

  .cooperado-painel .dropdown-menu .dropdown-item .date-item {
    font-size: var(--fs-4xl);
  }

  .cooperado-painel .dropdown-menu .dropdown-item .date-item-sub {
    font-size: var(--fs-lg);
  }

  /* Seções fora do cooperado-painel (ex: bibliotecas) */
  .painel-body .dropdown-menu {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    min-width: 220px;
    max-width: 80vw;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 0;
    box-shadow: 0 24px 64px var(--scrim);
    padding: 10px;
  }

  .painel-body .dropdown-menu .dropdown-item {
    padding: 14px 20px;
    font-size: var(--fs-4xl);
    min-height: 48px;
  }

  /* select-busca-dropdown: comportamento centralizado igual ao dropdown-menu */
  .cooperado-painel .select-busca-dropdown,
  .painel-body .select-busca-dropdown {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    min-width: 240px;
    max-width: 85vw;
    max-height: 70vh;
    z-index: 1000;
    margin-top: 0;
    box-shadow: 0 24px 64px var(--scrim);
  }

  .cooperado-painel .select-busca-option,
  .painel-body .select-busca-option {
    padding: 12px 10px;
    font-size: var(--fs-4xl);
    min-height: 44px;
  }
}

/* Closed tasks card */
.coop-fechadas-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.coop-fechadas-header {
  padding: 12px 14px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface-raised);
}

.coop-fechada-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  gap: 15px;
}

.coop-fechada-item:last-child {
  border-bottom: none;
}

.coop-fechada-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1;
  min-width: 0;
}

.coop-fechada-nome {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coop-fechada-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.coop-fechada-repasse {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

.coop-fechada-data {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.coop-fechadas-more {
  width: 100%;
  padding: 10px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-top: 1px solid var(--border-subtle);
  cursor: pointer;
  font-family: var(--font-main);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: var(--transition-smooth);
}

.coop-fechadas-more:hover {
  color: var(--text-primary);
  background: var(--bg-surface-hover);
}

/* Mobile */
@media (max-width: 992px) {
  .cooperado-painel .grid-12[style] {
    grid-template-columns: 1fr !important;
  }

  .resumo-2x2 {
    grid-template-columns: 1fr 1fr;
  }

  .coop-fechada-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .coop-fechada-right {
    width: 100%;
    justify-content: space-between;
  }
}

/* ============================================================
   v2 cooperado — refactor: avatar, dropdowns, metrics, inbox,
   modal, group header, fechadas, mobile responsivo.
   ============================================================ */

.cooperado-painel .nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
}

.nav-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);
  font-size: var(--fs-xl);
}

.nav-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.nav-user-name {
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--text-primary);
}

.nav-user-info .badge-tag {
  font-size: var(--fs-2xs);
  padding: 1px 6px;
  align-self: flex-start;
  margin-top: 2px;
}

.btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: 500;
  transition: all .15s ease;
}

.btn-logout:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  border-color: var(--brand-primary);
}

.btn-logout-label {
  display: inline;
}

@media (max-width: 540px) {
  .btn-logout-label {
    display: none;
  }

  .nav-user-name {
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Coluna esquerda e direita alinhadas */
.coop-grid {
  display: grid;
  gap: 18px;
  align-items: start;
}

.coop-col {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}

.coop-col .coop-section-title {
  margin: 0 0 2px;
}

/* ============================================================================
   Cooperado overview — full-height layout
   ============================================================================
   Cadeia de altura (desktop ≥993px): .cooperado-painel (100%) → main (flex:1) →
   .coop-overview (flex:1) → grid 2 colunas com altura total. Coluna esquerda
   (tarefas) e bloco de recados na direita são scroll interno; repasses ficam
   ancorados na base com flex-shrink:0.
   Mobile (<992px): tudo volta a fluxo natural (overflow visible, alturas auto)
   com max-height defensivo nos blocos com scroll interno. */

/* Quando o content-frame-body contém um cooperado-painel em modo overview,
   trocamos pra flex-column pra que o filho herde altura via flex. O padding
   interno padrão do content-frame-body (24px) é preservado — só a estrutura
   de layout muda. (height:% não propaga de forma consistente no Safari
   quando o pai usa flex:1 sem height explícito declarado.) */
.content-frame-body:has(> .cooperado-painel) {
  display: flex;
  flex-direction: column;
}

.cooperado-painel {
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cooperado-painel>main {
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cooperado-painel .main-content--full {
  padding: 0;
}

.cooperado-painel .coop-overview {
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0px 16px 16px;
}

/* Compensa padding-right de scroll interno (ex: coop-tasks-scroll tem padding-right: 8px).
 * Aplica em containers que envolvem elementos com scroll thin pra manter simetria visual
 * de 16px em ambos os lados. */
.cooperado-painel .coop-scroll-safe {
  padding-right: 8px;
}

.cooperado-painel .coop-overview .coop-grid--overview {
  flex: 1 1;
  min-height: 0;
  align-items: stretch;
  grid-template-rows: 1fr;
}

/* Arquivos e Suporte (--invertido): mesmo tratamento de altura do --overview,
   pra limitar a altura das colunas e ativar o scroll interno (ScrollArea /
   coop-tasks-scroll dos módulos). Sem isto o grid cresce com o conteúdo e
   estoura o overflow:hidden do overview → conteúdo cortado no desktop. */
.cooperado-painel .coop-overview .coop-grid--arquivos,
.cooperado-painel .coop-overview .coop-grid--invertido {
  flex: 1 1;
  min-height: 0;
  align-items: stretch;
  grid-template-rows: 1fr;
}

.cooperado-painel .coop-tasks-col,
.cooperado-painel .coop-side-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* 1-coluna (PainelOverviewShell sem grid): coop-col direto filho do coop-overview
   precisa de flex:1 + min-height:0 para propagar altura e ativar scroll interno. */
.cooperado-painel .coop-overview>.coop-col {
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.cooperado-painel .coop-tasks-scroll {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
}

.cooperado-painel .coop-inbox-module {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  margin-bottom: 0;
  /* Compensa a scrollbar interna do .coop-inbox-recados: padding-right do
     card reduzido de 16px (default .group-card) → 8px. O conteúdo mantém
     respiro visual porque o .coop-inbox-recados aplica +8px próprio antes
     da scrollbar (8px card + 8px recados = ~16px total à direita). */
  padding-right: 8px;
}

.cooperado-painel .coop-inbox-module .coop-inbox-filtros {
  flex-shrink: 0;
  margin-bottom: 15px;
  margin-right: 7.5px;
}

/* ============================================================
   Transcricoes — Upload module
   ============================================================ */
.coop-transcricoes-upload {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1 1;
  min-height: 0;
}

.coop-transcricoes-upload-module {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  padding-right: 8px;
}

.coop-transcricoes-dropzone {
  border: 2px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
}

.coop-transcricoes-dropzone--sm {
  padding: 18px 12px;
}

.coop-transcricoes-dropzone--sm .icon-xl {
  font-size: 18px;
}

.coop-transcricoes-dropzone:hover,
.coop-transcricoes-dropzone[data-dragging] {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 4%, transparent);
  color: var(--text-primary);
}

.coop-transcricoes-dropzone .icon-xl {
  font-size: 22px;
  margin-bottom: 4px;
  color: var(--text-muted);
}

.coop-transcricoes-dropzone-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.coop-transcricoes-dropzone-hint {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

.coop-transcricoes-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1;
  min-height: 0;
}

.coop-transcricoes-lista-scroll {
  max-height: 200px;
  margin-right: 0;
}

.coop-transcricoes-audio-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.coop-transcricoes-audio-item:last-child {
  border-bottom: none;
}

.coop-transcricoes-audio-idx {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}

.coop-transcricoes-audio-icon {
  color: var(--text-muted);
  flex-srink: 0;
}

.coop-transcricoes-audio-meta {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.coop-transcricoes-audio-name {
  font-size: var(--fs-md);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coop-transcricoes-audio-sub {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.coop-transcricoes-add-more {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  margin-top: 4px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--brand-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.coop-transcricoes-add-more:hover {
  color: var(--text-primary);
}

.coop-transcricoes-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
  margin-top: auto;
}

.coop-transcricoes-footer .btn {
  flex: 1 1;
}

.coop-transcricoes-envio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  font-size: var(--fs-sm);
}

.coop-transcricoes-envio-titulo {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--text-primary);
}

.coop-transcricoes-envio-status {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Invitation card (substitui o form inline — abre modal) */
.coop-transcricoes-invitation {
  border: 1.5px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  transition: border-color 0.15s, background 0.15s;
}

.coop-transcricoes-invitation:hover,
.coop-transcricoes-invitation:focus {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 4%, transparent);
  color: var(--text-primary);
  outline: none;
}

.coop-transcricoes-invitation .icon-xl {
  font-size: 22px;
  margin-bottom: 4px;
}

.coop-transcricoes-invitation-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.coop-transcricoes-invitation-hint {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* Fila de processamento */
.coop-transcricoes-fila {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1 1;
  min-height: 0;
}

.coop-transcricoes-fila-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 8px;
}

.coop-transcricoes-fila-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 4px;
}

.coop-transcricoes-fila-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1;
  min-width: 0;
}

.coop-status-badge--running {
  color: var(--status-success);
  background: color-mix(in srgb, var(--status-success) 10%, transparent);
}

.coop-status-badge--paused {
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 10%, transparent);
}

.coop-transcricoes-fila-count {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* Botão que unifica status + ação (iniciar/pausar) da fila.
   Visual copiado de .btn-status (componente de status canônico). A cor
   (bg color-mix 10% + texto) vem de coop-status-badge--running/--paused. */
.coop-fila-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 8px 0 10px;
  border-radius: 7px;
  font-size: var(--fs-sm);
  font-weight: 500;
  border-width: 0;
  border-style: solid;
  box-sizing: border-box;
  cursor: pointer;
  font-family: var(--font-main);
  line-height: 0;
  transition: transform 120ms ease-out, filter 120ms ease-out;
  transform-origin: center;
  outline: none;
}

.coop-fila-toggle:hover:not(:disabled) {
  filter: brightness(0.95);
}

.coop-fila-toggle:active:not(:disabled) {
  transform: scale(0.96);
  filter: brightness(0.88);
}

.coop-fila-toggle:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Pulse no ícone enquanto a fila está rodando — indica processamento ativo. */
@keyframes coop-fila-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.78); }
}

.coop-fila-toggle--ativo .coop-fila-toggle-icon {
  animation: coop-fila-pulse 1.1s ease-in-out infinite;
}

.coop-transcricoes-fila-empty {
  padding: 14px 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.coop-transcricoes-fila-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
  transition: background 0.15s;
}

.coop-transcricoes-fila-item:last-child {
  border-bottom: none;
}

.coop-transcricoes-fila-item[data-clickable] {
  cursor: pointer;
}

.coop-transcricoes-fila-item[data-clickable]:hover {
  background: var(--bg-surface-raised);
}

.coop-transcricoes-fila-titulo {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--text-primary);
}

.coop-transcricoes-fila-meta {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  flex-shrink: 0;
}

.inbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
  /* padding-right: 7.5px; */
}

.cooperado-painel .coop-inbox-filtros {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-right: 7.5px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .inbox-toolbar {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 15px;
  }
}

.cooperado-painel .coop-inbox-filtro {
  appearance: none;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* mesma proporção da .coop-tag-cliente */
  padding: 2px 8px 2px 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
  /* pílula em vez do radius-sm da tag */
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--bg-surface-raised, var(--overlay-soft));
  color: var(--text-muted);
  transition: border-color .12s, background-color .12s, color .12s;
}

.cooperado-painel .coop-inbox-filtro:hover {
  border-color: var(--filtro-cor);
}

.cooperado-painel .coop-inbox-filtro--ativo {
  background: var(--filtro-cor-bg);
  color: var(--filtro-cor);
  border-color: transparent;
}

.cooperado-painel .coop-inbox-filtro-count {
  font-size: var(--fs-xs);
  font-weight: 600;
  opacity: .85;
}

/* ── FiltroSelect — botão dropdown de filtro (Biblioteca, etc.) ── */
.filtro-select-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.filtro-select-dot--all {
  background: var(--text-muted);
  opacity: 0.4;
}

/* Item selecionado nos dropdowns de campo (Field Kit): o bullet ganha um anel
   de 1px na própria cor, afastado 2px do círculo — enfatiza a seleção e dispensa
   o ícone de check. A cor do anel vem inline (`outline` na cor do bullet). */
.dropdown-item[data-on="true"] .filtro-select-dot {
  outline-offset: 2px;
}

.cooperado-painel .coop-inbox-empty {
  padding: 24px 8px;
  text-align: center;
  font-size: var(--fs-md);
  color: var(--text-muted, #6b7280);
}

.cooperado-painel .coop-inbox-recados {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
}

.cooperado-painel .coop-inbox-recados>*+* {
  margin-top: 15px;
}

.cooperado-painel .coop-inbox-reunioes {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 15px;
  margin-top: 15px;
  margin-right: 7.5px;
  border-top: 1px solid var(--border-subtle);
}

/* (removido: .coop-inbox-pedido* — os pedidos de Módulo Pro agora usam o
   card-base das Notas, .nota-card-v2 + .nota-card-link, com a borda cantoneira.) */
.cooperado-painel .inbox-item-link {
  text-decoration: none;
  color: inherit;
}

.cooperado-painel .coop-repasses-module {
  flex-shrink: 0;
}

/* Scroll shadows — pseudoelementos sticky + data-scrolled-* (setados por useHasScroll):
   - ::before fade-in quando o usuário rola pra baixo (data-scrolled-top)
   - ::after fade-out quando chega no fim (data-scrolled-end)
   - z-index sobrepõe os cards; margin negativa tira do fluxo
   - Funciona tanto dentro de .cooperado-painel (visão geral) quanto standalone (modais) */
.cooperado-painel .coop-tasks-scroll,
.cooperado-painel .coop-inbox-recados,
.coop-tasks-scroll {
  background-color: var(--scroll-shadow-bg, var(--bg-surface));
}

/* Propriedades de layout pra scroll container — dentro de flex pai, precisa de flex:1 + min-height:0 */
.cooperado-painel .coop-tasks-scroll {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
}

.cooperado-painel .coop-tasks-scroll::before,
.cooperado-painel .coop-inbox-recados::before,
.coop-tasks-scroll::before {
  content: '';
  display: block;
  position: sticky;
  top: 0;
  height: 48px;
  margin-bottom: -48px;
  background: linear-gradient(to bottom, var(--scroll-shadow-bg, var(--bg-surface)), transparent);
  /* z-index > 3 pra sobrepor as tarjas dos cards (task-card::before, nota-card-v2::before z-index 3) */
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cooperado-painel .coop-tasks-scroll[data-scrolled-top]::before,
.cooperado-painel .coop-inbox-recados[data-scrolled-top]::before,
.coop-tasks-scroll[data-scrolled-top]::before {
  opacity: 1;
}

.cooperado-painel .coop-tasks-scroll::after,
.cooperado-painel .coop-inbox-recados::after,
.coop-tasks-scroll::after {
  content: '';
  display: block;
  position: sticky;
  bottom: 0;
  height: 48px;
  margin-top: -48px;
  background: linear-gradient(to top, var(--scroll-shadow-bg, var(--bg-surface)), transparent);
  z-index: 10;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.cooperado-painel .coop-tasks-scroll[data-scrolled-end]::after,
.cooperado-painel .coop-inbox-recados[data-scrolled-end]::after,
.coop-tasks-scroll[data-scrolled-end]::after {
  opacity: 0;
}

/* Esconde shadows quando não há scroll real */
.cooperado-painel .coop-tasks-scroll:not([data-has-scroll])::before,
.cooperado-painel .coop-tasks-scroll:not([data-has-scroll])::after,
.cooperado-painel .coop-inbox-recados:not([data-has-scroll])::before,
.cooperado-painel .coop-inbox-recados:not([data-has-scroll])::after,
.coop-tasks-scroll:not([data-has-scroll])::before,
.coop-tasks-scroll:not([data-has-scroll])::after {
  display: none;
}

/* Inbox: estende sombra até a borda direita (cobre padding-right de 8px).
   Cantoneira bottom-right do recado invade 1px no padding — sem isso a borda
   lateral fica visível por cima da sombra. */
.cooperado-painel .coop-inbox-recados::before,
.cooperado-painel .coop-inbox-recados::after {
  margin-right: -8px;
  width: calc(100% + 8px);
}

/* Dentro de qualquer modal, scroll-shadow casa com o fundo do dialog (--bg-surface-raised),
   não com --bg-surface da página. Mantém as sombras de topo/fim funcionando sem afetar
   o scroll da Visão Geral. */
.card-modal-overlay .coop-tasks-scroll,
.card-modal-overlay .coop-inbox-recados {
  --scroll-shadow-bg: var(--bg-surface-raised);
  background-color: var(--bg-surface-raised);
}

/* Modal side task — usa CardModal, cantoneira na borda externa do dialog via ::before */
.card-modal-side-override>.card-modal-overlay>.card-modal-dialog {
  position: relative !important;
  overflow: visible;
  height: 600px;
}

.card-modal-side-override>.card-modal-overlay>.card-modal-dialog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 120px;
  height: 60px;
  max-width: 120px;
  border: 0;
  border-top: 1px solid var(--card-color);
  border-left: 1px solid var(--card-color);
  border-top-left-radius: inherit;
  pointer-events: none;
  z-index: 3;
}

.card-modal-side-override>.card-modal-overlay>.card-modal-dialog>.card-modal-body {
  padding: 30px;
  position: relative;
  height: 100%;
  box-sizing: border-box;
}

.card-modal-side-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 0;
}

.card-modal-side-separator {
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
  margin: 30px 0 0;
}

.card-modal-side-cols {
  display: flex;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.card-modal-side-left {
  width: 41.666%;
  padding: 20px 30px 30px 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  border-right: 1px solid var(--border-subtle);
}

.card-modal-side-right {
  width: 58.333%;
  overflow-y: auto;
  min-height: 0;
}

.card-modal-side-right-inner {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px 0 30px 30px;
}

.card-modal-side-separator {
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
  margin: 30px 0 0;
}

/* Responsivo — modal side task: header fixo, conteúdo empilhado em scroll único */
@media (max-width: 768px) {
  .card-modal-side-cols {
    flex-direction: column !important;
    overflow-y: auto !important;
  }

  .card-modal-side-left {
    width: 100% !important;
    padding: 15px 0;
    border-right: none !important;
    border-bottom: 1px solid var(--border-subtle);
  }

  .card-modal-side-right {
    width: 100% !important;
  }

  .card-modal-side-right-inner {
    padding: 15px 0;
  }

  .card-modal-side-cols .coop-tasks-scroll::before,
  .card-modal-side-cols .coop-tasks-scroll::after {
    display: none !important;
  }

  .card-modal-side-override>.card-modal-overlay>.card-modal-dialog>.card-modal-body {
    padding: 15px;
  }

  .card-modal-side-separator {
    margin: 20px 0 0;
  }

  .card-modal-side-override>.card-modal-overlay>.card-modal-dialog {
    height: 70vh;
  }

}

/* Modal projeto — layout 2 colunas igual card-modal-side, cantoneira top-right */
.card-modal-projeto-override>.card-modal-overlay>.card-modal-dialog {
  position: relative;
  overflow: visible;
  height: 600px;
}

.card-modal-projeto-override>.card-modal-overlay>.card-modal-dialog::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
  width: 50%;
  max-width: 180px;
  height: clamp(24px, 30%, 70px);
  border: 0;
  border-top: 1px solid var(--card-color);
  border-right: 1px solid var(--card-color);
  border-top-right-radius: inherit;
  pointer-events: none;
  z-index: 3;
}

.card-modal-projeto-override>.card-modal-overlay>.card-modal-dialog>.card-modal-body {
  padding: 30px;
  position: relative;
  height: 100%;
  box-sizing: border-box;
}

.card-modal-projeto-override .coop-info-label {
  color: var(--card-color);
}

/* No modal de projeto, detalhes ficam 1 coluna mais estreitos (4/12) e a coluna direita (notas/tarefas) ganha o espaço (8/12). */
@media (min-width: 769px) {
  .card-modal-projeto-override .card-modal-side-left {
    width: 33.333%;
  }

  .card-modal-projeto-override .card-modal-side-right {
    width: 66.667%;
  }
}

@media (max-width: 768px) {
  .card-modal-projeto-override>.card-modal-overlay>.card-modal-dialog>.card-modal-body {
    padding: 15px;
  }

  .card-modal-projeto-override>.card-modal-overlay>.card-modal-dialog {
    height: 70vh;
  }
}

/* Scrollbars internas — tokenizadas, com fallback WebKit pra Safari/Orion */
.cooperado-painel .coop-tasks-scroll,
.cooperado-painel .coop-inbox-recados,
.coop-tasks-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--brand-primary) transparent;
}

.cooperado-painel .coop-tasks-scroll::-webkit-scrollbar,
.cooperado-painel .coop-inbox-recados::-webkit-scrollbar,
.coop-tasks-scroll::-webkit-scrollbar {
  width: 6px;
  -webkit-appearance: none;
}

.cooperado-painel .coop-tasks-scroll::-webkit-scrollbar-track,
.cooperado-painel .coop-inbox-recados::-webkit-scrollbar-track,
.coop-tasks-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.cooperado-painel .coop-tasks-scroll::-webkit-scrollbar-thumb,
.cooperado-painel .coop-inbox-recados::-webkit-scrollbar-thumb,
.coop-tasks-scroll::-webkit-scrollbar-thumb {
  background: var(--brand-primary);
  border-radius: 3px;
  min-height: 24px;
}

/* Overview grid: notebook/iPad 7fr/5fr, telas grandes 8fr/4fr */
.cooperado-painel .coop-grid--overview {
  grid-template-columns: 7fr 5fr;
}

@media (min-width: 1600px) {
  .cooperado-painel .coop-grid--overview {
    grid-template-columns: 8fr 4fr;
  }
}

/* Modifier — inverte ordem das colunas mantendo proporcoes (fina | larga). */
.cooperado-painel .coop-grid--invertido {
  grid-template-columns: 5fr 7fr;
}

@media (min-width: 1600px) {
  .cooperado-painel .coop-grid--invertido {
    grid-template-columns: 4fr 8fr;
  }
}

/* === Mobile (<992px) — fluxo natural, sem altura cheia === */
@media (max-width: 992px) {
  .cooperado-painel {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .cooperado-painel>main,
  .cooperado-painel .coop-overview {
    flex: none;
    overflow: visible;
  }

  .cooperado-painel .coop-overview {
    padding: 12px 8px 16px;
  }

  .cooperado-painel .coop-overview .coop-grid--overview,
  .cooperado-painel .coop-overview .coop-grid--arquivos,
  .cooperado-painel .coop-overview .coop-grid--invertido {
    flex: none;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .cooperado-painel .coop-tasks-col,
  .cooperado-painel .coop-side-col {
    overflow: visible;
    min-height: 0;
  }

  .cooperado-painel .coop-tasks-scroll {
    flex: none;
    overflow: visible;
    padding-right: 0;
  }

  .cooperado-painel .coop-tasks-scroll::before,
  .cooperado-painel .coop-tasks-scroll::after {
    display: none;
  }

  .cooperado-painel .coop-inbox-module {
    flex: none;
    overflow: visible;
  }

  .cooperado-painel .coop-inbox-recados {
    flex: none;
    overflow: visible;
    max-height: none;
    padding-right: 0;
  }

  .cooperado-painel .coop-inbox-recados::before,
  .cooperado-painel .coop-inbox-recados::after {
    display: none;
  }
}

/* === Group header — duas linhas: top + barra full width === */
.cooperado-painel .group-card-header-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

.cooperado-painel .group-card-header-top .group-title {
  font-weight: 500;
}

.cooperado-painel .group-card-header-top .group-count {
  color: var(--text-muted);
  font-size: var(--fs-md);
}

.cooperado-painel .group-card-header-top .group-spacer {
  flex: 1 1;
}

.cooperado-painel .group-card-header-top .group-pct {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.cooperado-painel .group-card-header-top .group-card-toggle {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.cooperado-painel .group-card-header-bar {
  padding: 0 14px 10px;
}

.cooperado-painel .group-card-header-bar .group-bar {
  width: 100%;
  height: 2px;
  border-radius: 1px;
  overflow: hidden;
  display: flex;
  background: var(--bg-surface);
}

.cooperado-painel .group-card-header-bar .group-bar-segment {
  height: 100%;
}

/* === Task card — painel info dentro, borda full width === */
.cooperado-painel .task-card.expanded {
  background: var(--bg-surface);
}

.cooperado-painel .task-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cooperado-painel .task-card-actions-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cooperado-painel .task-card-actions-metrics {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cooperado-painel .task-card-actions-date {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* Pills unificadas — estilo padrao btn-sm */
.cooperado-painel .coop-pill-metric {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 2px 8px 4px 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface-raised);
  color: var(--text-secondary);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  cursor: default;
  transition: all .15s ease;
}

.cooperado-painel button.coop-pill-metric {
  cursor: pointer;
}

.cooperado-painel button.coop-pill-metric:hover {
  border-color: var(--brand-primary);
  color: var(--text-primary);
}

.cooperado-painel .coop-pill-pontos {
  color: var(--text-secondary);
}

.cooperado-painel .coop-pill-pontos [data-icon="star"] {
  position: relative;
  top: 1px;
}

.cooperado-painel .coop-pill-pontos .coop-pontos-num {
  position: relative;
  top: 2px;
}

/* Botoes auxiliares — altura unificada com .btn-status (28px).
   Estilo do .btn-status mora no escopo global (acima). */
.cooperado-painel .btn.btn-sm {
  height: 28px;
}

/* Painel info dentro do task-card */
.cooperado-painel .task-card .coop-info-panel {
  /* sem caixa — largura total do card */
  padding: 0;
  background: transparent;
  border: none;
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-height: none;
  overflow: visible;
  /* linha separadora no topo */
  border-top: 1px solid var(--border-subtle);
}

.cooperado-painel .task-card .coop-info-panel .coop-info-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cooperado-painel .task-card .coop-info-panel .coop-info-section:first-child {
  padding-top: 14px;
}

/* linha separadora antes do botão recolher */
.cooperado-painel .task-card .coop-info-panel .coop-recolher {
  align-self: stretch;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 10px 0 2px;
  font-size: var(--fs-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cooperado-painel .task-card .coop-info-panel .coop-recolher:hover {
  color: var(--text-primary);
}

/* Info panel: meta grid e links */
.cooperado-painel .coop-info-meta-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cooperado-painel .coop-info-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-md);
}

/* Variante pra linhas com avatar (Suporte) — padding vertical extra pra dar respiro */
.cooperado-painel .coop-info-meta-row-user {
  padding: 4px 0;
}

.cooperado-painel .coop-info-meta-key {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-width: 85px;
  flex-shrink: 0;
}

.cooperado-painel .coop-info-meta-val {
  color: var(--text-primary);
  font-size: var(--fs-md);
  line-height: 1.3;
}

.cooperado-painel .coop-info-user {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cooperado-painel .coop-info-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cooperado-painel .coop-info-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-smooth);
  font-family: var(--font-main);
}

.cooperado-painel .coop-info-link-btn:hover {
  color: var(--text-primary);
  border-color: var(--brand-primary);
}

/* === Lembrete detail (reusado dentro do card e do modal) === */
.lembrete-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
}

.lembrete-detail-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--status-warning);
}

.lembrete-detail-meta {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.lembrete-detail-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.lembrete-detail-atrib {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.lembrete-detail-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.lembrete-resolvido {
  /* opacity removido — cria stacking context */
}

.lembrete-resolvido .lembrete-detail-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* === Inbox (caixa de entrada) — cor neutra === */
.cooperado-painel .inbox-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cooperado-painel .inbox-box-header {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cooperado-painel .inbox-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0px;
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  padding: 4px 10px;
  text-align: left;
  cursor: pointer;
  transition: all .15s ease;
}

.cooperado-painel .inbox-item:hover {
  border-color: var(--brand-primary);
  background: var(--bg-surface-hover);
}

.cooperado-painel .inbox-item-static {
  cursor: default;
}

.cooperado-painel .inbox-item-static:hover {
  border-color: var(--border-color);
  background: var(--bg-surface);
}

.cooperado-painel .inbox-item-done {
  /* opacity removido — cria stacking context */
}

.cooperado-painel .inbox-item-done .inbox-item-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.cooperado-painel .inbox-item-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 0;
  color: var(--status-warning);
}

.cooperado-painel .inbox-item-title-meet {
  color: var(--brand-primary);
}

.cooperado-painel .inbox-item-meta {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* === Modal de lembrete === */
.lembrete-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}

.lembrete-modal {
  background: var(--bg-base);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px;
  max-width: 480px;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: 0 20px 60px var(--scrim);
}

.lembrete-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lembrete-modal-close:hover {
  color: var(--text-primary);
  background: var(--bg-surface-hover);
}

.lembrete-modal-extra {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
}

.lembrete-modal-extra-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
}

/* === Fechadas — task-card disabled, dentro do sidebar === */
.cooperado-painel .coop-fechadas-list {
  display: flex;
  flex-direction: column;
  padding: 6px 10px 4px;
}

.cooperado-painel .coop-fechadas-list .task-card {
  margin: 6px 0;
  padding: 10px 12px;
}

.cooperado-painel .task-card-closed,
.cooperado-painel .task-card-disabled {
  background: var(--bg-surface-box);
}

.cooperado-painel .task-card-closed:hover,
.cooperado-painel .task-card-disabled:hover {
  background: var(--bg-surface-box);
}

.cooperado-painel .task-card-closed .task-title-link,
.cooperado-painel .task-card-disabled .task-title-link {
  text-decoration: line-through;
  color: var(--text-muted);
}

.cooperado-painel .task-card-closed .task-card-title,
.cooperado-painel .task-card-disabled .task-card-title {
  color: var(--text-muted);
}

/* Destaque nas tarefas do cooperado dentro do modal de projeto */
.task-card-cooperado {
  /* usa o background padrão var(--bg-surface-raised) do .task-card */
}

/* Botões internos seguem o fundo (exceto status e marca) */
.cooperado-painel .task-card-closed .coop-btn-icon,
.cooperado-painel .task-card-disabled .coop-btn-icon,
.cooperado-painel .task-card-closed .coop-pill-metric,
.cooperado-painel .task-card-disabled .coop-pill-metric,
.cooperado-painel .task-card-closed .btn.btn-sm,
.cooperado-painel .task-card-disabled .btn.btn-sm,
.cooperado-painel .task-card-closed .coop-fechada-data-pill,
.cooperado-painel .task-card-disabled .coop-fechada-data-pill {
  background: var(--bg-surface-box);
}

.cooperado-painel .task-card-closed .task-card-main {
  margin-bottom: 8px;
}

/* LP card excluída — mesmo padrão de task-card-disabled */
.cooperado-painel .lp-card-deleted,
.cooperado-painel .lp-card-deleted:hover {
  background: var(--bg-surface-box);
}

.cooperado-painel .lp-card-deleted .card-projeto-nome,
.cooperado-painel .lp-card-deleted .coop-tag-projeto,
.cooperado-painel .lp-card-deleted .coop-tag-cliente {
  color: var(--text-muted);
  opacity: 0.7;
}

.cooperado-painel .lp-card-deleted .coop-meta-pill {
  opacity: 0.5;
}

.cooperado-painel .coop-fechada-data-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-sizing: border-box;
}

.cooperado-painel .coop-fechada-data-pill [data-icon="calendar-check"] {
  position: relative;
  top: -1px;
}

.task-title-link {
  color: inherit;
  text-decoration: none;
}

.task-title-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Marca: mobile (acima do titulo) vs actions row (desktop) */
.cooperado-painel .coop-marca-mobile {
  display: none;
}

.cooperado-painel .coop-marca-actions {
  display: inline-flex;
}

/* Right column offset to match left column group-card padding */
.coop-grid>.coop-col:last-child {
  padding-left: 16px;
}

/* Full-width mode para visões embutidas no content-frame (sem sidebar quebra) */
.cooperado-painel .main-content--full {
  max-width: none;
  margin: 0;
  width: 100%;
}

/* === Mobile responsivo === */
@media (max-width: 768px) {
  .cooperado-painel .coop-grid {
    grid-template-columns: 1fr !important;
  }

  .cooperado-painel .coop-grid>.coop-col:last-child {
    padding-left: 0;
  }

  /* group-card como "seção": encosta nas bordas da tela (estoura o padding
     horizontal do main-content via margem negativa). Conteúdo interno fica
     com respiro pelo padding do próprio task-card. */
  .main-content {
    overflow-x: clip;
  }

  .cooperado-painel .group-card {
    padding-left: 0;
    padding-right: 0;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }

  .cooperado-painel .group-card .group-card-header-top,
  .cooperado-painel .group-card .group-card-header-bar,
  .cooperado-painel .group-card .group-card-body {
    padding-left: 0;
    padding-right: 0;
  }

  .cooperado-painel .resumo-2x2 {
    grid-template-columns: 1fr 1fr;
  }

  /* Lineup: no mobile, tudo flush — igual ao padrão Minhas Tarefas / Caixa de Entrada */
  .cooperado-painel .lineup-status-bar {
    margin-left: 0;
    margin-right: 0;
  }

  .cooperado-painel .lineup-scroll-body {
    padding-left: 0;
    padding-right: 0;
  }

  .cooperado-painel .lineup-empty {
    margin-left: 0;
    margin-right: 0;
  }

  /* Card: 4 linhas
     1: marca (mobile)
     2: título + tag
     3: [i][c][l]     [Repasse][Pontos] + [Hoje] [Status]
     4: detalhe
   */
  .cooperado-painel .coop-marca-mobile {
    display: flex;
  }

  .cooperado-painel .coop-marca-actions {
    display: none;
  }

  .cooperado-painel .coop-marca-mobile {
    padding: 2px 8px 1px 8px;
    margin-top: 0;
    font-size: var(--fs-2xs);
    opacity: .8;
    height: 22px;
    box-sizing: border-box;
    align-self: flex-start;
  }

  .cooperado-painel .task-card-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 15px;
  }

  .cooperado-painel .task-card-right {
    display: none;
  }

  .cooperado-painel .task-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 8px;
    align-items: center;
  }

  .cooperado-painel .task-card-actions-info {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }

  .cooperado-painel .task-card-actions-metrics {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
  }

  /* espaçador invisivel: força quebra de linha — info|metrics em cima, date|status embaixo */
  .cooperado-painel .task-card-actions-break {
    flex-basis: 100%;
    height: 0;
    margin: 0;
    padding: 0;
  }

  .cooperado-painel .task-card-actions-date {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 0;
  }

  .cooperado-painel .task-card-actions-status-mobile {
    display: flex;
    flex-shrink: 0;
    margin-left: auto;
  }

  .cooperado-painel .btn-status,
  .cooperado-painel .btn.btn-sm,
  .cooperado-painel .coop-pill-metric,
  .cooperado-painel .coop-btn-icon,
  .cooperado-painel .coop-fechada-data-pill {
    height: 26px;
  }

  /* Zerando compensações de scrollbar — mobile não exibe scrollbar visível */
  .cooperado-painel .coop-tasks-scroll,
  .cooperado-painel .coop-inbox-module,
  .cooperado-painel .coop-scroll-safe,
  .projetos-client-scroll {
    padding-right: 0;
  }

  .cooperado-painel .coop-inbox-module .coop-inbox-filtros {
    margin-right: 0;
  }

  /* xs pílula: padding proporcional */
  .btn-status.btn-status-xs {
    padding-left: 5px;
    padding-right: 5px;
    height: 18px;
  }
}

@media (max-width: 540px) {
  .cooperado-painel .resumo-2x2 {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .cooperado-painel .btn-status-label {
    white-space: nowrap;
  }
}

/* Status: posição desktop vs mobile */
.cooperado-painel .status-pos-mobile {
  display: none;
}

@media (max-width: 768px) {
  .cooperado-painel .status-pos-desktop {
    display: none !important;
  }

  .cooperado-painel .status-pos-mobile {
    display: flex;
  }
}

/* Status: single-line em telas grandes — escondido por padrão */
.cooperado-painel .status-pos-large {
  display: none;
}

/* Single-line antecipado para notebooks na view Tarefas (full-width, /{marca}/projetos) */
@media (min-width: 1200px) {
  .tarefas-full-view .task-card {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .tarefas-full-view .task-card-main {
    flex: 1 1;
    min-width: 200px;
    margin-bottom: 0;
  }

  .tarefas-full-view .task-card-actions {
    flex-shrink: 0;
    flex-wrap: nowrap;
    margin-left: auto;
  }

  .tarefas-full-view .task-card-actions-break {
    display: none;
  }

  .tarefas-full-view .task-card-main .status-pos-desktop {
    display: none;
  }

  .tarefas-full-view .status-pos-large {
    display: flex;
  }

  /* Reverte single-line dentro de modais */
  .card-modal-overlay .task-card {
    display: block;
    align-items: initial;
    gap: initial;
  }

  .card-modal-overlay .task-card-main {
    flex: initial;
    min-width: initial;
    margin-bottom: 10px;
  }

  .card-modal-overlay .task-card-actions {
    flex-shrink: 1;
    flex-wrap: wrap;
    margin-left: initial;
  }

  .card-modal-overlay .task-card-actions-break {
    display: initial;
  }

  .card-modal-overlay .task-card-main .status-pos-desktop {
    display: flex;
  }

  .card-modal-overlay .status-pos-large {
    display: none;
  }
}

@media (min-width: 1800px) {
  .cooperado-painel .task-card {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .cooperado-painel .task-card-main {
    flex: 1 1;
    min-width: 200px;
    margin-bottom: 0;
    align-items: center;
  }

  .cooperado-painel .task-card-actions {
    flex-shrink: 0;
    flex-wrap: nowrap;
    margin-left: auto;
  }

  .cooperado-painel .task-card-actions-break {
    display: none;
  }

  /* Esconde status do task-card-main, mostra o da actions */
  .cooperado-painel .task-card-main .status-pos-desktop {
    display: none;
  }

  .cooperado-painel .status-pos-large {
    display: flex;
  }

  /* Reverte single-line dentro de modais */
  .card-modal-overlay .task-card {
    display: block;
    align-items: initial;
    gap: initial;
  }

  .card-modal-overlay .task-card-main {
    flex: initial;
    min-width: initial;
    margin-bottom: 10px;
  }

  .card-modal-overlay .task-card-actions {
    flex-shrink: 1;
    flex-wrap: wrap;
    margin-left: initial;
  }

  .card-modal-overlay .task-card-actions-break {
    display: initial;
  }

  .card-modal-overlay .task-card-main .status-pos-desktop {
    display: flex;
  }

  .card-modal-overlay .status-pos-large {
    display: none;
  }
}

/* Toast de erro */
.cooperado-painel .coop-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: var(--fs-lg);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 4px 24px var(--scrim);
  pointer-events: none;
  animation: toast-slide-in .2s ease;
}

.cooperado-painel .depcheck-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px 24px;
  min-width: 360px;
  max-width: 420px;
  box-shadow: 0 8px 40px var(--scrim);
  animation: toast-slide-in .2s ease;
}

.cooperado-painel .depcheck-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.cooperado-painel .depcheck-body {
  margin-bottom: 16px;
}

.cooperado-painel .depcheck-task-name {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  margin: 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cooperado-painel .depcheck-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-lg);
  color: var(--text-primary);
  padding: 4px 0;
}

.cooperado-painel .depcheck-item [data-icon="note-sticky"] {
  color: var(--status-warning);
}

.cooperado-painel .depcheck-item [data-icon="list-check"] {
  color: var(--status-info);
}

.cooperado-painel .depcheck-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.cooperado-painel .depcheck-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: var(--fs-lg);
  font-weight: 600;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: filter .15s ease;
}

.cooperado-painel .depcheck-btn:hover {
  filter: brightness(1.1);
}

.cooperado-painel .depcheck-btn-secondary {
  background: var(--bg-surface-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-muted);
}

.cooperado-painel .depcheck-btn-primary {
  background: var(--brand-primary);
  color: var(--surface-on-accent);
}

.cooperado-painel .coop-toast-error {
  background: var(--brand-primary);
  color: var(--surface-on-accent);
  border: 1px solid var(--overlay-strong);
}

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* === Error page === */
.err-page {
  min-height: 100vh;
  background: var(--bg-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: var(--font-main);
}

.err-card {
  max-width: 480px;
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-align: center;
  box-shadow: 0 24px 64px var(--scrim);
}

.err-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--brand-primary-muted);
  border: 1px solid var(--brand-primary-border);
  color: var(--brand-primary);
  font-size: var(--icon-xxl);
  display: flex;
  align-items: center;
  justify-content: center;
}

.err-title {
  color: var(--text-primary);
  font-size: var(--fs-5xl);
  font-weight: 600;
  margin: 0 0 10px;
}

.err-msg {
  color: var(--text-secondary);
  font-size: var(--fs-lg);
  line-height: 1.5;
  margin: 0 0 22px;
}

.err-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.err-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  font-size: var(--fs-md);
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-main);
  border: 1px solid transparent;
  transition: var(--transition-smooth);
}

.err-btn-primary {
  background: var(--brand-primary);
  color: var(--surface-on-accent);
  border-color: var(--brand-primary);
}

.err-btn-primary:hover {
  filter: brightness(1.1);
}

.err-btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-muted);
}

.err-btn-secondary:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

.err-digest {
  margin: 20px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.err-digest code {
  font-family: ui-monospace, monospace;
  background: var(--bg-surface-raised);
  padding: 2px 6px;
  border-radius: 4px;
}

.err-details {
  margin: 16px 0 0;
  text-align: left;
}

.err-details summary {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
  list-style: none;
}

.err-details summary::-webkit-details-marker {
  display: none;
}

.err-details summary::before {
  content: "▶";
  font-size: var(--fs-3xs);
  transition: transform 0.15s;
  display: inline-block;
}

.err-details[open] summary::before {
  transform: rotate(90deg);
}

.err-details-body {
  margin: 8px 0 0;
  padding: 12px;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, monospace;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 260px;
  overflow-y: auto;
  line-height: 1.5;
}

.err-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 8px 0 0;
  padding: 4px 10px;
  font-size: var(--fs-sm);
  font-family: var(--font-main);
  color: var(--text-muted);
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.err-copy-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-muted);
}

/* ============================================================================
 * Etapa 1 V3 — Shell fullscreen, meia-pill, toggle no frame
 * ========================================================================== */

/* SHELL: fullscreen, sem scroll. Estrutura:
   .painel-shell (column) > [MobileTopbar oculta no desktop] + .painel-body (row)
   .painel-body (row) > .sidebar + .content-frame
   Altura compensa html { zoom: 1.10 } via --html-zoom (ver :root). */
.painel-shell {
  display: flex;
  flex-direction: column;
  /* height:100% propaga via html/body{height:100%}. Independe de vh/dvh,
     que cada browser interpreta diferente quando html tem zoom: 1.10.
     Resolve o "shell em ~90%" no Safari/Orion sem causar estouro. */
  height: 100%;
  overflow: hidden;
  background: var(--bg-canvas);
}

.painel-body {
  flex: 1 1;
  display: flex;
  min-height: 0;
}

/* SIDEBAR — sem overflow no container; só o nav rola */
.sidebar {
  width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 40px 20px 40px 0px;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out, padding 0.3s ease-in-out;
  overflow: hidden;
}

.sidebar-collapsed {
  width: 80px;
  padding: 40px 0px 40px 0;
}

/* Sidebar header (logo only — toggle migrou pro frame).
   margin-right alinha a borda inferior com a borda esquerda da content-frame
   (igual ao .sidebar-footer), evitando que a linha "cole" no card. */
.sidebar-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 25px 0;
  margin: 0 0 20px 20px;
  border-bottom: 1px solid var(--border-subtle);
  min-height: 48px;
}

.sidebar-header-logo {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.sidebar-logo-symbol {
  width: 50px;
  height: 35px;
  display: block;
  color: var(--text-primary);
  cursor: pointer;
}

/* Hover do ícone animado — âncora no <svg> root (abrange área vazia entre paths) */
.sidebar-logo-symbol:hover .mdl-arc-1 {
  transform: translate(7px);
}

.sidebar-logo-symbol:hover .mdl-arc-2 {
  transform: translate(7px);
}

.sidebar-logo-symbol:hover .mdl-arc-3 {
  transform: translate(7px);
}

.sidebar-logo-symbol:hover .mdl-dot {
  transform: translate(-33px);
}

.sidebar-logo-symbol:hover .mdl-arc {
  color: var(--text-muted);
}

.mobile-topbar-logo:active .mdl-arc-1 {
  transform: translate(7px);
}

.mobile-topbar-logo:active .mdl-arc-2 {
  transform: translate(7px);
}

.mobile-topbar-logo:active .mdl-arc-3 {
  transform: translate(7px);
}

.mobile-topbar-logo:active .mdl-dot {
  transform: translate(-33px);
}

.mobile-topbar-logo:active .mdl-arc {
  color: var(--text-muted);
}

.sidebar-logo-full {
  height: 26px;
  width: auto;
  max-width: 100%;
  display: block;
  color: var(--text-primary);
}

.sidebar-collapsed .sidebar-header {
  justify-content: center;
  padding: 0 0 25px 0;
  gap: 15px;
  margin: 0 10px 25px 10px;
}

/* Sidebar nav (items) */
.sidebar-nav {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  padding-right: 0;
}

.sidebar-separator {
  padding: 8px 14px 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 8px;
}

.sidebar-collapsed .sidebar-separator span {
  display: none;
}

/* Item base */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 5px 20px;
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition-smooth);
  white-space: nowrap;
  overflow: hidden;
  margin-left: 0px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

.sidebar-item:hover {
  color: var(--text-primary);
  background: var(--overlay-soft);
  padding-left: 25px;
}

/**
 * Item ATIVO: meia-pill saindo da borda esquerda.
 * margin-left negativo extrapola o padding-left da sidebar (.sidebar:padding-left=12).
 * Lado esquerdo da pill fica retangular (radius 0); direito mantém pill (999).
 */


.sidebar-item-label {
  margin-top: 2px;
}


.sidebar-collapsed .sidebar-item {
  justify-content: center;
  padding: 8px 0;
}

.sidebar-collapsed .sidebar-item:hover {
  padding-left: 10px;
  padding-right: 0;
  margin-right: 10px;
}

.sidebar-collapsed .sidebar-item-active {
  padding-left: 10px;
  padding-right: 0;
  margin-right: 10px;
}

.sidebar-collapsed .sidebar-item-label {
  display: none;
}

.sidebar-item-beta {
  font-size: var(--fs-2xs);
  font-weight: 400;
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: 0;
  opacity: 0.55;
  margin-left: 3px;
}

/* Itens de grupo e voltar: botões sem estilo próprio, herdam tudo do sidebar-item */
.sidebar-item-grupo,
.sidebar-item-voltar {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--fs-lg);
  font-family: inherit;
  line-height: inherit;
  color: var(--text-secondary);
}

.sidebar-item-grupo-chevron {
  margin-left: auto;
}

.sidebar-collapsed .sidebar-footer {
  padding: 0px 10px;
}

/* Sidebar footer (presença/marca + perfil). Sem borda no topo — a divisória
   fica entre o slot e o perfil (border-top do .sidebar-footer-perfil). */
.sidebar-footer {
  padding: 12px 0px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sidebar-footer-slot {
  padding: 0;
  min-height: 36px;
  display: flex;
  align-items: center;
}

.sidebar-footer-perfil {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0 4px;
  border-top: 1px solid var(--border-subtle);
}

.avatar.sidebar-avatar {
  /* Mesmo anel afastado do .presenca-avatar — cor vem de currentColor
     (cooperado: vermelho fixo; cliente: cor da marca selecionada). */
  border: 1px solid currentColor;
  padding: 3px;
  box-sizing: border-box;
  background-clip: content-box;
  background-origin: content-box;
}

.avatar.sidebar-avatar img {
  border-radius: 50%;
}

.sidebar-perfil-info {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.sidebar-perfil-nome {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0px;
}

.sidebar-perfil-cargo {
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 10px;
}

.sidebar-logout-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-smooth);
  font-size: var(--fs-sm);
  flex-shrink: 0;
}

.sidebar-logout-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-muted);
  background: var(--bg-surface-raised);
}

.sidebar-collapsed .sidebar-footer-perfil {
  justify-content: center;
}

/* CONTENT FRAME — card grande, scroll interno */
.content-frame {
  flex: 1 1;
  min-width: 0;
  margin: 16px 16px 16px 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.content-frame-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-shrink: 0;
}

.content-frame-header-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.content-frame-body {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding: 30px 30px;
}

/* Toggle button — vive no sidebar-header, ao lado do logo */
.frame-toggle-btn,
.sidebar-toggle-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-smooth);
  font-size: var(--fs-md);
  flex-shrink: 0;
  margin-left: auto;
}

.sidebar-collapsed .frame-toggle-btn,
.sidebar-collapsed .sidebar-toggle-btn {
  margin-left: 0;
}

.frame-toggle-btn:hover,
.sidebar-toggle-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-muted);
  background: var(--bg-surface-raised);
}

/* ===========================================================================
 * PRESENÇA ONLINE — fila horizontal de avatares no footer
 * ========================================================================== */
.presenca-online {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  width: 100%;
}

.avatar.presenca-avatar {
  border: 1px solid currentColor;
  /* Anel afastado da foto: 2px de respiro de cada lado.
     A foto/iniciais vivem na content-box (28 - 2*2 = 24px). */
  padding: 2.5px;
  box-sizing: border-box;
  background-clip: content-box;
  background-origin: content-box;
  opacity: 0.92;
  transition: opacity 0.15s;
}

.avatar.presenca-avatar img {
  border-radius: 50%;
}

.avatar.presenca-avatar:hover {
  opacity: 1;
}

.presenca-avatar-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  line-height: 0;
}

.presenca-avatar-btn:disabled {
  cursor: default;
}

.presenca-avatar-btn:not(:disabled):hover .avatar.presenca-avatar {
  transform: scale(1.08);
}

.presenca-avatar-btn .avatar.presenca-avatar {
  transition: transform 120ms ease;
}

.sidebar-collapsed .presenca-online,
.presenca-collapsed {
  flex-direction: column;
  gap: 4px;
}

/* ===========================================================================
 * MARCA SELETOR — botões, popup ascendente, modo compacto
 * ========================================================================== */
.marca-seletor {
  position: relative;
  width: 100%;
}

.marca-seletor--compact {
  display: flex;
  justify-content: center;
}

.marca-seletor-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  border: 0px solid var(--border-subtle);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--fs-lg);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.marca-seletor-btn:hover {
  filter: brightness(1.15);
}

.marca-seletor-full {
  width: 100%;
  padding: 8px 14px;
  justify-content: flex-start;
}

.marca-seletor-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marca-seletor-compact {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  border-radius: 8px;
  letter-spacing: 0.02em;
}

.marca-seletor-popup {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 200px;
  background: var(--bg-surface-raised, #1a1a1a);
  border: 1px solid var(--border-subtle, #2a2a2a);
  border-radius: 8px;
  padding: 4px;
  z-index: 50;
  box-shadow: 0 -8px 24px var(--scrim);
}

.marca-seletor-compact+.marca-seletor-popup {
  left: 0;
  right: auto;
  width: 200px;
}

.marca-seletor-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.marca-seletor-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--fs-lg);
  font-weight: 400;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}

.marca-seletor-option:hover {
  background: var(--overlay-soft);
}

.marca-seletor-option.is-ativa {
  font-weight: 600;
}

.marca-seletor-separator {
  height: 1px;
  background: var(--border-subtle);
  margin: 6px 8px;
}

/* ============================================================
 * Ver tudo — strip de marcas no topo da Visão Geral
 * ============================================================ */
.ver-tudo-marcas-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--bg-surface-box);
}
.ver-tudo-marcas-strip-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}
.ver-tudo-marcas-strip-pills {
  display: flex;
  gap: 6px;
  flex: 1 1;
  min-width: 0;
  flex-wrap: wrap;
}
.ver-tudo-marca-pill {
  gap: 6px;
  text-decoration: none;
  transition: filter 0.1s ease;
  cursor: pointer;
  line-height: 1;
}
.ver-tudo-marca-pill:hover {
  filter: brightness(1.15);
}
.ver-tudo-marca-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

/* Mobile: strip vira scroll horizontal, label some, pills compactas */
@media (max-width: 768px) {
  .ver-tudo-marcas-strip {
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 12px;
    border-radius: 10px;
  }
  .ver-tudo-marcas-strip-label {
    display: none;
  }
  .ver-tudo-marcas-strip-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 -4px;
    padding: 0 4px;
  }
  .ver-tudo-marcas-strip-pills::-webkit-scrollbar { display: none; }
  .ver-tudo-marca-pill {
    flex-shrink: 0;
  }
}

/* ===========================================================================
 * MOBILE TOPBAR — faixa fixa no topo no mobile (logo + abrir menu)
 * Desktop: oculta.
 * ========================================================================== */
.mobile-topbar {
  display: none;
}

.mobile-topbar-logo {
  height: 36px;
  width: auto;
  display: block;
  color: var(--text-primary);
}

.mobile-topbar-toggle {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-smooth);
  font-size: var(--fs-xl);
  margin-left: auto;
}

.mobile-topbar-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-muted);
  background: var(--bg-surface-raised);
}

/* ===========================================================================
 * SIDEBAR CLOSE BTN — botão "fechar drawer" dentro da sidebar no mobile.
 * Desktop: oculto.
 * ========================================================================== */
.sidebar-close-btn {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-smooth);
  font-size: var(--fs-lg);
  flex-shrink: 0;
  margin-left: auto;
}

.sidebar-close-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-muted);
  background: var(--bg-surface-raised);
}

/* Fade do conteúdo da caixa quando sidebar expande no mobile. */
.content-frame-body {
  transition: opacity 0.3s ease-in-out;
}

/* ===========================================================================
 * MOBILE (< 768px) — Topbar fixa em cima + sidebar INTEGRADA que empurra
 * a caixa de conteúdo (sem sobreposição). Caixa fica no mesmo lugar/tamanho
 * vertical, só reduz LARGURA conforme o menu cresce.
 * ========================================================================== */
@media (max-width: 768px) {

  /* Topbar visível e fixa no topo */
  .mobile-topbar {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    gap: 15px;
    flex-shrink: 0;
  }

  /* Logo + toggle dentro da sidebar ficam ocultos no mobile —
     MobileTopbar cuida da navegação/logo no topo. */
  .sidebar .sidebar-header {
    display: none;
  }

  /* ---- SIDEBAR mobile: width animada (0 → 65vw). Empurra naturalmente
       a caixa de conteúdo, que é flex:1 e vai ocupando o restante. ---- */
  .sidebar {
    width: 0;
    padding: 16px 0 16px 0;
    transition: width 0.3s ease-in-out, padding 0.3s ease-in-out;
    overflow: hidden;
    flex-direction: column;
  }

  .sidebar:not(.sidebar-collapsed) {
    width: 65vw;
    padding: 16px 0 16px 0px;
  }

  .sidebar .sidebar-item-active {
    margin-left: 0px;
    padding-left: 20px;
  }

  .sidebar .sidebar-footer {
    margin-right: 16px;
  }

  /* Content-frame: flex:1, fica no MESMO lugar/tamanho vertical sempre.
     A largura é o que sobrar depois da sidebar — encolhe quando ela cresce.
     Padding lateral total ≤ 30px (margem 6px + border 1px + padding 8px). */
  .content-frame {
    margin: 0 6px 6px;
    flex: 1 1;
    min-height: 0;
  }

  .content-frame-header {
    padding: 8px 10px;
    min-height: 8px;
  }

  .content-frame-body {
    padding: 12px 8px 12px;
  }

  /* Quando drawer aberto: conteúdo INTERNO da caixa faz fade-out. A caixa
     em si (border + bg) continua visível como referência. */
  .painel-shell:has(.sidebar:not(.sidebar-collapsed)) .content-frame-body {
    opacity: 0;
    pointer-events: none;
  }

  /* Overlay clicável sobre o content-frame: cobre a área do frame quando o drawer
     está aberto e captura o tap pra recolher o menu. */
  .painel-shell:has(.sidebar:not(.sidebar-collapsed)) .content-frame-mobile-overlay {
    display: block;
  }
}

/* Overlay clicável sobre o content-frame: desktop fica display:none; mobile com
   sidebar aberta passa a display:block (regra na media query acima). */
.content-frame-mobile-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 5;
}

/* CARD BASE (componentes filhos das seções — apartados, sobre bg-surface do frame).
   Sistema unificado: ver painel/.interface-design/cards-system.md
   .card-striped pinta a BORDA inteira com --card-color (sem tarja lateral). */
.card-base {
  position: relative;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 15px 15px;
  transition: var(--transition-smooth);
  overflow: hidden;
}

.card-base:hover {
  background: var(--bg-surface-hover);
}

.card-base.card-striped {
  border-left-color: var(--card-color, var(--border-subtle));
}

.card-clickable {
  cursor: pointer;
}

.card-clickable:focus-visible {
  outline: 2px solid var(--status-info);
  outline-offset: 2px;
}

.card-padded {
  padding: 16px 20px;
}

/* Alias mantido por compat — borda esquerda colorida vem do .card-striped agora */
.card-base.card-striped.card-mine {
  border-left-color: var(--card-color, var(--border-muted));
}

/* Grid da seção Minhas Tarefas */
.minhas-tarefas-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 24px;
  align-items: start;
}

.minhas-tarefas-col-main {
  min-width: 0;
}

.minhas-tarefas-col-side {
  min-width: 0;
}

@media (max-width: 900px) {
  .minhas-tarefas-grid {
    grid-template-columns: 1fr;
  }
}

/* === Utilitários compartilhados (cards-system.md §2-5) ===
   Aplique nos cards específicos pra ter mesma estética do CardTask. */
.card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.card-name {
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-top: 8px;
}

.card-meta-spacer {
  flex: 1 1;
}

.card-meta-data {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
}

/* Status pill — bg + border + color injetados inline (cor do status). */
.card-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: default;
}

/* Badge marca do cliente — bg/border/color inline com a cor da marca. */
.card-badge-marca {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px 1px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Tag cinza neutra (projeto, categoria) */
.card-tag-neutra {
  display: inline-flex;
  align-items: center;
  padding: 4px 5px 3px;
  border-radius: 3px;
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* Botão de ícone (28×28) */
.card-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--icon-md);
  transition: var(--transition-smooth);
}

.card-btn-icon:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  border-color: var(--border-muted);
}

/* Lista padrão de cards (gap 10px) */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Empty state */
.card-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-muted);
  gap: 15px;
}

.card-empty p {
  margin: 0;
  font-size: var(--fs-lg);
}

.card-base-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--fs-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.card-base-header-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.card-base-header-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.card-base-body {
  padding: 16px 20px;
}

.card-base-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-subtle);
  background: var(--overlay-soft);
  font-size: var(--fs-md);
  color: var(--text-secondary);
}

/* CardModal */
.card-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--scrim);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  animation: cm-fade 150ms ease-out;
}

/* Modal aninhado (ex: CardTaskModalSide aberto a partir do CardProjetoModal) */
.card-modal-overlay .card-modal-overlay {
  z-index: 200;
  background: var(--scrim);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Dropdowns dentro do modal aninhado precisam ficar acima do dialog interno */
.card-modal-overlay .card-modal-overlay .dropdown-menu {
  z-index: 1200;
}

.card-modal-dialog {
  width: 100%;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-lg);
  max-height: calc(100vh - 80px);
  overflow: auto;
  box-shadow: 0 16px 48px var(--scrim);
  animation: cm-pop 150ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Flex column pra que o body seja a região de scroll. Necessário porque
     modais com accent (.card-modal-cantoneira) usam overflow:visible no dialog
     pra não cortar a cantoneira — então o scroll precisa viver no body. */
  display: flex;
  flex-direction: column;
}

@keyframes cm-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes cm-pop {
  from {
    opacity: 0;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: scale(1.0);
  }
}

.card-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.card-modal-title {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.card-modal-close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.card-modal-close:hover {
  color: var(--text-primary);
  background: var(--bg-surface-hover);
}

.card-modal-body {
  padding: 20px;
  /* Região rolável: encolhe dentro do dialog (max-height) e ganha scroll
     quando o conteúdo passa da viewport — desktop e mobile. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Cantoneira universal no CardModal centralizado quando accent é passado.
   Substitui o borderTop legado. Mesma estética dos drawers (top-left). */
.card-modal-dialog.card-modal-cantoneira {
  position: relative;
  overflow: visible;
}

.card-modal-dialog.card-modal-cantoneira::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  max-width: 180px;
  height: clamp(24px, 30%, 70px);
  border-top: 1px solid var(--card-color);
  border-left: 1px solid var(--card-color);
  border-top-left-radius: inherit;
  pointer-events: none;
  z-index: 3;
}

/* Seção em construção (placeholder Etapa 1) */
.secao-construcao {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 40px 20px;
}

.secao-construcao-card {
  max-width: 460px;
  width: 100%;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px 24px 24px;
  text-align: center;
}

.secao-construcao-icon {
  font-size: var(--icon-xxl);
  margin-bottom: 16px;
  opacity: 0.85;
}

.secao-construcao-title {
  font-size: var(--fs-4xl);
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text-primary);
}

.secao-construcao-subtitle {
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  margin: 0 0 20px;
  line-height: 1.5;
}

.secao-construcao-meta {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.secao-construcao-slug {
  display: inline-block;
  font-family: ui-monospace, monospace;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background: var(--bg-surface);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.secao-construcao-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--fs-md);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.secao-construcao-back:hover {
  color: var(--text-primary);
  border-color: var(--border-muted);
  background: var(--bg-surface);
}

/* Seção de conteúdo genérica (E4.5+) */
.secao-content {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 28px;
}

.secao-header {
  display: flex;
  align-items: baseline;
  gap: 15px;
  margin: 0 0 20px;
}

.secao-header h1 {
  font-size: var(--fs-6xl);
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

.secao-header-count {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* CardTask + CardTaskList (E4.5) */
.card-task-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.card-task-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-muted);
  gap: 15px;
}

.card-task-empty p {
  margin: 0;
  font-size: var(--fs-lg);
}

.card-task {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* padding herda do .card-base (14px 18px 14px 22px com tarja) */
}

.card-task-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.card-task-nome {
  font-size: var(--fs-xl);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1;
}

.card-task-link-icon {
  color: var(--text-muted);
  font-size: var(--icon-md);
  flex-shrink: 0;
}

.card-task-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
}

.card-task-projeto {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-surface-raised);
  padding: 4px 5px 3px;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1;
}

.card-task-marca {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px 1px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* CardTaskModal */
.card-task-modal {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.card-task-modal-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card-task-modal-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-task-modal-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.card-task-modal-text {
  font-size: var(--fs-lg);
  color: var(--text-primary);
  line-height: 1.55;
  white-space: pre-wrap;
}

.card-task-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 16px;
}

.card-task-modal-grid>div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-task-modal-grid .k {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.card-task-modal-grid .v {
  font-size: var(--fs-lg);
  color: var(--text-primary);
}

.card-task-modal-people {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.card-task-modal-person {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-muted);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  background: var(--bg-surface);
}

.card-task-link-publico {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-muted);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--fs-lg);
  font-weight: 500;
  transition: var(--transition-smooth);
  align-self: flex-start;
}

.card-task-link-publico:hover {
  background: var(--bg-surface-hover);
  border-color: var(--text-muted);
}

/* CardProjeto (E4.6) */
.card-base.card-projeto-card {
  overflow: visible;
  background: var(--bg-surface-raised);
  border-left-color: var(--border-subtle) !important;
}

.card-base.card-projeto-card:hover {
  background: var(--bg-surface-hover);
}

.card-base.card-projeto-card.card-projeto-fechado,
.card-base.card-projeto-card.card-projeto-fechado:hover {
  background: var(--bg-surface-box);
}

.card-base.card-projeto-card.card-projeto-fechado .card-projeto-nome {
  color: var(--text-muted);
  text-decoration: line-through;
}

.card-base.card-projeto-card::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 50%;
  max-width: 180px;
  height: clamp(24px, 30%, 70px);
  border-top: 1px solid var(--card-color, var(--border-muted));
  border-right: 1px solid var(--card-color, var(--border-muted));
  border-top-right-radius: inherit;
  pointer-events: none;
  z-index: 3;
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out, max-width 0.4s ease-in-out;
}

.card-base.card-projeto-card:hover::before {
  width: 80%;
  max-width: 400px;
  height: clamp(36px, 45%, 85px);
}

.card-projeto-card .card-projeto {
  /* position: relative removido — cantoneira está no card-base */
}

.card-projeto {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* padding herda do .card-base — alinhado com .card-task */
}

.card-projeto-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.card-projeto-nome {
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1;
}

.card-projeto-servico {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.card-projeto-marca {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px 1px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}

.card-projeto-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
}

.card-projeto-tarefas {
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.card-projeto-bar {
  flex: 1 1;
  display: flex;
  gap: 2px;
  height: 2px;
  background: var(--bg-surface-hover);
  border-radius: 1px;
  overflow: hidden;
}

.card-projeto-bar-fill {
  height: 100%;
  flex-shrink: 0;
  border-radius: 1px;
  transition: width 0.4s ease;
}

.card-projeto-bar-label {
  color: var(--text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 36px;
  text-align: right;
}

/* CardProjetoModal */
.card-projeto-modal {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.card-projeto-modal-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-projeto-modal-bar-track {
  flex: 1 1;
  height: 2px;
  border-radius: 1px;
  overflow: hidden;
  background: var(--bg-surface-hover);
}

.card-projeto-modal-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.card-projeto-modal-bar-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* CardShow + CardShow grid (E5.1/5.2) */
.card-show-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
}

.card-show {
  display: flex;
  align-items: center;
  gap: 16px;
  /* padding herda do .card-base */
}

.card-show-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-xl);
  flex-shrink: 0;
}

.card-show-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1 1;
}

.card-show-nome {
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-show-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid;
  color: var(--surface-on-accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
  align-self: flex-start;
}

.card-show-link:hover {
  opacity: 0.85;
}

/* CardContrato (E5.3) */
.card-contrato {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* padding herda do .card-base */
}

.card-contrato-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.card-contrato-nome {
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.card-contrato-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-contrato-bar {
  flex: 1 1;
  height: 2px;
  border-radius: 1px;
  overflow: hidden;
  background: var(--bg-surface-hover);
}

.card-contrato-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.card-contrato-bar-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.card-contrato-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--fs-md);
}

.card-contrato-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-muted);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: 600;
  transition: background 0.15s;
}

.card-contrato-link:hover {
  background: var(--bg-surface-hover);
}

.card-contrato-responsavel {
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* CardSuporte (E5.4) */
.card-suporte-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text-muted);
  gap: 8px;
  text-align: center;
}

.card-suporte-empty p {
  margin: 0;
  font-size: var(--fs-lg);
}

.card-suporte-sub {
  font-size: var(--fs-sm) !important;
  opacity: 0.7;
}

.card-suporte-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
}

.card-suporte-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
}

.card-suporte-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--surface-on-accent);
  flex-shrink: 0;
}

.card-suporte-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1;
  min-width: 0;
}

.card-suporte-nome {
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.card-suporte-email {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.card-suporte-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid;
  color: var(--surface-on-accent);
  font-size: var(--fs-md);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.card-suporte-whatsapp:hover {
  opacity: 0.85;
}

/* ============================================================
   ClienteEquipeModule + ClienteCardPessoa + ClienteFaqModule
   ============================================================ */

/* Equipe: grade de cards de pessoa (reutiliza card-pessoa-grid existente) */
.card-pessoa-grid--suporte {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 10px;
}

/* Botões de ação no card de pessoa do suporte */
.card-pessoa-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* FAQ — group-card sem padding (linhas vão de borda a borda) */
.faq-card {
  padding: 0;
  overflow: hidden;
}

.faq-item {
  border-bottom: 1px solid var(--border-subtle);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-pergunta {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
  line-height: 0;
}

.faq-pergunta:hover {
  background: var(--bg-hover);
}

.faq-item--aberto .faq-pergunta {
  background: var(--bg-hover);
}

.faq-chevron-icon {
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: 1px;
  transition: transform 0.15s, color 0.12s;
}

.faq-chevron-icon--aberto {
  transform: rotate(90deg);
  color: var(--text-secondary);
}

.faq-pergunta-texto {
  flex: 1 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.faq-resposta {
  padding: 0 16px 14px 36px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ============================================================
   Etapa 7 — Seções restantes (financeiro, repasses, bibliotecas,
   wiki, equipe, perfil, preferências)
   ============================================================ */

/* Banner informativo (em breve / decisão pendente / etc) */
.secao-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--status-warning-bg);
  border: 1px solid var(--status-warning-border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: var(--fs-xl);
  margin-bottom: 8px;
}

.secao-banner code {
  background: var(--bg-surface-raised);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: var(--fs-lg);
}

/* Filtros chip-row */
.secao-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.secao-filtro-label {
  font-size: var(--fs-lg);
  color: var(--text-muted);
}

.secao-filtro-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-muted);
  border-radius: 999px;
  font-size: var(--fs-md);
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.secao-filtro-chip:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-default);
}

.secao-filtro-chip--ativo {
  background: var(--bg-surface-hover);
}

.secao-filtro-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Grupos em seção (Em aberto / Quitados) */
.secao-grupo {
  margin-top: 16px;
}

.secao-grupo-titulo {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* CardPagamentoFull — mobile: 3 linhas */
.card-pagamento.card-base {
  padding: 12px 14px;
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: visible;
  /* cantoneira ::before fica fora do bounding box */
}

.card-pagamento-l1,
.card-pagamento-l2,
.card-pagamento-l3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-pagamento-spacer {
  flex: 1 1;
}

.card-pagamento-nome {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}

.card-pagamento-valor {
  font-size: var(--fs-4xl);
  font-weight: 400;
  color: var(--text-primary);
  flex-shrink: 0;
}

.card-pagamento-valor.is-receita {
  color: var(--diff-add);
}

.card-pagamento-btns-esq {
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-pagamento-btns-esq .coop-btn-icon {
  font-size: var(--icon-md);
  padding: 4px 8px;
  gap: 4px;
}

.card-pagamento-lista {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Notebook (769px–1799px): igual mobile (3 linhas), serviço top-aligned no L1 */
@media (min-width: 769px) and (max-width: 1799px) {
  .card-pagamento-l1 {
    align-items: flex-start;
  }
}

/* ≥1800px: 1 linha */
@media (min-width: 1800px) {
  .card-pagamento.card-base {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .card-pagamento-l1 {
    flex: 1 1 auto;
    min-width: 0;
  }

  .card-pagamento-l2 {
    flex: 0 0 auto;
    align-items: center;
  }

  .card-pagamento-l1 .card-pagamento-spacer,
  .card-pagamento-l2 .card-pagamento-spacer,
  .card-pagamento-l3 .card-pagamento-spacer {
    display: none;
  }

  .card-pagamento-l3 {
    flex: 0 0 auto;
  }
}

/* PagamentosMaster — group-card-header (scoped, não usa .cooperado-painel) */
.tarefas-master .group-card-header {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 12px;
  border-bottom: none;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.tarefas-master .group-card-header-top {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.tarefas-master .group-card-header-top .group-spacer {
  flex: 1 1;
}

.tarefas-master .group-card-header-top .group-title {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--text-primary);
}

.tarefas-master .group-card-header-top .group-pct {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.tarefas-master .group-card-header-bar {
  display: flex;
  align-items: center;
  margin-top: 8px;
  width: 100%;
}

.tarefas-master .group-card-header-bar .group-bar {
  flex: 1 1;
  height: 2px;
}

/* Mobile ≤768px: cabeçalho do grupo em 2 linhas */
@media (max-width: 768px) {
  .tarefas-master .group-card-header-top {
    flex-wrap: wrap;
  }

  /* Tag da marca ocupa toda a linha 1 */
  .tarefas-master .group-card-header-top .coop-tag-cliente {
    width: 100%;
  }
}

.secao-grupo-titulo {
  display: flex;
  align-items: center;
}

/* ── CardContrato (cliente) ──────────────────────────────── */
.cc-lista {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 0 0 8px;
}

.cc-lista--page {
  max-width: 780px;
}

.card-contrato-cliente.card-base {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow: visible;
  /* cantoneira ::before fora do bounding box */
}

/* sem truncação no status badge dentro do card de contrato */
.card-contrato-cliente .btn-status-label {
  max-width: none;
  white-space: nowrap;
}

/* header */
.cc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cc-label {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}

.cc-spacer {
  flex: 1 1;
}

/* seção genérica */
.cc-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cc-section-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* título de seção padronizado */
.cc-section-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

.cc-section-meta {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* barra segmentada — usa group-bar-segment global, wrapper próprio */
.cc-bar-wrap {
  display: flex;
  gap: 2px;
  height: 2px;
  width: 100%;
  background: var(--border-subtle);
  border-radius: 1px;
  overflow: hidden;
}

/* group-bar-segment já tem height: 100% e border-radius: 1px globalmente */

/* projetos */
.cc-projetos {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cc-projeto-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cc-projeto-nome {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}

.cc-projeto-meta {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* sem truncação nos badges de status dos projetos */
.cc-projeto-row .btn-status-label {
  max-width: none;
  white-space: nowrap;
}

/* datas */
.cc-datas {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cc-data-chip {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  white-space: nowrap;
}

.cc-datas-seta {
  font-size: var(--fs-xl);
  flex-shrink: 0;
}

/* serviços */
.cc-servicos-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cc-servico-tag {
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* negociação */
.cc-negociacao {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cc-neg-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.cc-neg-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  flex-shrink: 0;
}

.cc-neg-valor {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* footer */
.cc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 2px;
}

.cc-footer .coop-tag-cliente {
  height: 28px;
  box-sizing: border-box;
}

.cc-responsavel {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
}

.cc-resp-rotulo {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

.cc-resp-avatar {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.cc-resp-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-resp-nome {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  line-height: 1;
  padding-top: 3px;
}

/* PixModal */
.pix-modal-dialog {
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.pix-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.pix-modal-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pix-modal-nome {
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--text-primary);
}

.pix-modal-valor {
  font-size: var(--fs-7xl);
  font-weight: 700;
  color: var(--diff-add);
}

.pix-modal-data {
  font-size: var(--fs-lg);
  color: var(--text-muted);
}

.pix-modal-qr-wrapper {
  background: var(--bg-surface);
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.pix-modal-qr {
  display: block;
  width: 260px;
  height: 260px;
}

.pix-modal-qr-placeholder {
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--fs-8xl);
}

.pix-modal-instrucao {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

.pix-modal-chave {
  width: 100%;
  max-height: 80px;
  overflow: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
}

.pix-modal-copia-cola {
  font-size: var(--fs-sm);
  word-break: break-all;
  color: var(--text-secondary);
  font-family: monospace;
  line-height: 1.5;
}

.pix-modal-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.btn-pix-copiar,
.btn-pix-confirmar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: var(--fs-lg);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  background: var(--surface);
  color: var(--text-primary);
}

.btn-pix-copiar:hover {
  background: var(--surface-hover, #f5f5f5);
}

.btn-pix-copiar.copiado {
  background: var(--diff-add-bg);
  border-color: var(--diff-add-border);
  color: var(--diff-add-text);
}

.btn-pix-confirmar {
  background: var(--diff-add);
  color: var(--surface-on-accent);
  border-color: var(--diff-add);
}

.btn-pix-confirmar:hover {
  background: var(--diff-add-hover);
}

.btn-pix-confirmar:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.pix-confirmado-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-md);
  color: var(--diff-add-text);
  background: var(--diff-add-bg);
  padding: 4px 12px;
  border-radius: 999px;
}

.pix-erro {
  font-size: var(--fs-md);
  color: var(--status-error);
}

/* CardRepasseMes */
.card-repasse-mes {
  /* padding herda do .card-base */
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-repasse-mes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.card-repasse-mes-titulo {
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-transform: capitalize;
}

.card-repasse-mes-count {
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.card-repasse-mes-valor {
  font-size: var(--fs-6xl);
  font-weight: 700;
}

.card-repasse-mes-meta {
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.repasse-totais {
  display: flex;
  gap: 32px;
  padding: 12px 0;
}

.repasse-totais-label {
  display: block;
  font-size: var(--fs-md);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.repasse-totais-valor {
  font-size: var(--fs-6xl);
  font-weight: 700;
  color: var(--text-primary);
}

/* CardCurso */
.card-curso-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1.2fr));
  gap: 15px;
  /* grid-auto-rows: 1fr removido — criava dependência circular com height:100%
     (spec trata height:100% como auto, cards ficavam com alturas diferentes).
     align-items:stretch (padrão do grid) já iguala cards na mesma linha. */
}


/* 4 colunas fixas em notebooks e telas maiores */
@media (min-width: 1024px) {
  .card-curso-grid--4col {
    grid-template-columns: repeat(4, 1fr);
  }
}
.card-curso-grid>.card-base {
  /* height:100% removido — desnecessário com align-items:stretch no grid pai */
  display: flex;
  flex-direction: column;
}

.card-curso {
  /* padding herda do .card-base */
  display: flex;
  gap: 15px;
  align-items: flex-start;
  flex: 1 1;
  min-height: 0;
}

.card-curso-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: var(--icon-xl);
  flex-shrink: 0;
}

.card-curso-body {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-curso-nome {
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.3;
}

.card-curso-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.card-curso-meta--info {
  gap: 14px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.card-curso-tag {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  padding: 2px 8px 0px 8px;
  height: 22px;
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--text-secondary);
}

.card-curso-meta-item {
  font-size: var(--fs-md);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  line-height: 1;
  gap: 6px;
}

.card-curso-meta--assuntos {
  gap: 4px;
}

.card-curso-footer {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Variante "link" do btn-status — para um <a> abrir recurso externo com
   a mesma estética da badge de status (bg cor+1A, sem borda visível). */
a.btn-status.btn-status-link {
  text-decoration: none;
  align-self: flex-start;
  transition: filter 120ms ease-out, transform 120ms ease-out;
}

a.btn-status.btn-status-link:hover {
  filter: brightness(0.95);
}

a.btn-status.btn-status-link:active {
  transform: scale(0.96);
  filter: brightness(0.88);
}

/* Ancoragem do botão Abrir curso no canto inferior direito do card. */
.card-curso-btn--anchor {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 4;
}

/* Fundo de curso concluído — igual a tarefas e notas fechadas. */
/* ── Animação de parabéns: sobrescreve cores Lottie via CSS (presentation attrs têm prec. 0) ──
   Amarelo rgb(252,184,19) → bg-surface-box  (fundo card fechado)
   Azul    rgb(16,41,75)   → text-primary    (cor dos títulos)
   Laranja rgb(239,78,34)  → brand-primary   (cor do tema)
   Ciano   rgb(0,172,220)  → bg-surface-box  (idem card fechado)
   Branco  rgb(255,255,255)→ mantido branco                     */
.anim-parabens [fill="rgb(252,184,19)"],
.anim-parabens [fill="rgb(253,184,19)"],
.anim-parabens [fill="rgb(252,183,17)"],
.anim-parabens [fill="rgb(0,172,220)"],
.anim-parabens [fill="rgb(0,173,219)"] {
  fill: var(--bg-surface-box);
}

.anim-parabens [fill="rgb(16,41,75)"],
.anim-parabens [fill="rgb(15,40,76)"] {
  fill: var(--text-primary);
}

.anim-parabens [stroke="rgb(16,41,75)"],
.anim-parabens [stroke="rgb(15,40,76)"] {
  stroke: var(--text-primary);
}

.anim-parabens [fill="rgb(239,78,34)"],
.anim-parabens [fill="rgb(239,79,35)"],
.anim-parabens [fill="rgb(240,78,35)"] {
  fill: var(--brand-primary);
}

.anim-parabens [fill="rgb(16,41,76)"],
.anim-parabens [stroke="rgb(16,41,76)"] {
  fill: var(--text-primary);
  stroke: var(--text-primary);
}

/* Raios/relâmpagos: cor sentinela → cor do tema */
.anim-parabens [fill="rgb(102,102,102)"],
.anim-parabens [stroke="rgb(102,102,102)"] {
  fill: var(--brand-primary);
  stroke: var(--brand-primary);
}

.card-curso-concluido {
  background: var(--bg-surface-box) !important;
}

.card-curso-concluido:hover {
  background: var(--bg-surface-box) !important;
}

.card-curso-concluido .card-curso-nome {
  color: var(--text-muted);
}

/* Linha de ações no rodapé do card de curso: nota à esquerda, trophy+abrir à direita. */
.card-curso-actions-row {
  display: flex;
  align-items: center;
  margin-top: 8px;
  height: 28px;
}

.card-curso-modal {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card-curso-modal-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 0;
}

.card-curso-modal-grid dt {
  font-size: var(--fs-md);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.card-curso-modal-grid dd {
  margin: 0;
  font-size: var(--fs-xl);
  color: var(--text-primary);
}

.card-curso-modal-spec {
  font-size: var(--fs-xl);
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0;
  padding: 12px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
}

.card-curso-modal-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  color: var(--surface-on-accent);
  font-size: var(--fs-lg);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
}

.card-curso-modal-link:hover {
  opacity: 0.85;
}

/* CardPessoaCooperada (equipe) */
.card-pessoa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 15px;
}

.card-pessoa {
  /* padding herda do .card-base */
  display: flex;
  gap: 15px;
  align-items: center;
}

/* Componente Avatar genérico (preserva proporção via object-fit:cover) */
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-iniciais {
  line-height: 1;
}

.card-pessoa-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.card-pessoa-nome {
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.card-pessoa-papel {
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.card-pessoa-modal {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

/* size/font vêm do componente Avatar via style inline */
.card-pessoa-modal-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 0;
  align-self: stretch;
}

.card-pessoa-modal-grid dt {
  font-size: var(--fs-md);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.card-pessoa-modal-grid dd {
  margin: 0;
  font-size: var(--fs-xl);
  color: var(--text-primary);
}

.card-pessoa-modal-nota {
  font-size: var(--fs-md);
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
  text-align: center;
}

/* Preferências card */
.prefs-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 12px;
}

.prefs-card-titulo {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}

.prefs-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 0;
}

.prefs-grid dt {
  font-size: var(--fs-lg);
  color: var(--text-muted);
}

.prefs-grid dd {
  margin: 0;
  font-size: var(--fs-xl);
  color: var(--text-primary);
}

.prefs-toggles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prefs-toggles li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  font-size: var(--fs-xl);
}

.prefs-toggle {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
}

.prefs-toggle.on {
  background: var(--status-success-bg);
  border-color: var(--status-success-border);
  color: var(--status-success);
}

.prefs-toggle.off {
  background: var(--bg-surface-raised);
  border-color: var(--border-muted);
  color: var(--text-muted);
}

/* Variante clicável do toggle */
.prefs-toggle-btn {
  cursor: pointer;
  transition: var(--transition-smooth);
}

.prefs-toggle-btn:hover {
  filter: brightness(1.1);
}

/* Foto de perfil — botão sobre o avatar */
.prefs-foto-btn {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
}

.prefs-foto-btn:disabled {
  cursor: default;
}

.prefs-foto-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--surface-on-accent, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  border: 2px solid var(--bg-surface);
  box-sizing: content-box;
  transition: background 200ms ease;
}

.prefs-foto-btn--ok .prefs-foto-badge {
  background: var(--status-success, #2ea65f);
}

.prefs-foto-btn--uploading .prefs-foto-badge {
  background: var(--text-muted);
}

/* Campos editáveis de preferências */
.prefs-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}

.prefs-field-label {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  white-space: nowrap;
}

.prefs-field-value {
  font-size: var(--fs-xl);
  color: var(--text-primary);
}

.prefs-field-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.prefs-input-number {
  width: 72px;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-lg);
  padding: 5px 8px;
  outline: none;
  text-align: center;
}

.prefs-input-number:focus {
  border-color: var(--brand-primary-border);
}

/* Linha de ajuste moderna: label+desc esquerda, controle direita.
   Substitui .prefs-toggles li (14px) e .prefs-field-row (13px) — alinhado à escala do sistema. */
.prefs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  flex-wrap: wrap;
}

.prefs-row+.prefs-row {
  border-top: 1px solid var(--border-subtle);
}

.prefs-row-label {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
}

.prefs-row-desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 1px;
  line-height: 1.4;
}

/* ── LineupModule ── */

/* Contentor que preenche a col (coop-tasks-col) verticalmente */
.lineup-group {
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* iguala espaço título→caixa ao gap do .coop-col */
}

/* group-card vira flex-column — idêntico ao coop-inbox-module */
.cooperado-painel .lineup-card-box {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  margin-bottom: 0;
  padding-right: 8px;
  /* compensa scrollbar interna, igual ao inbox */
}

@media (max-width: 768px) {

  /* Zera compensação de scrollbar: mobile não exibe scrollbar visível.
     Regra aqui (após a base) para garantir source-order correto. */
  .cooperado-painel .lineup-card-box {
    padding-right: 0;
  }
}

/* Barra de status — mesmo espaçamento que coop-inbox-filtros */
.lineup-status-bar {
  flex-shrink: 0;
  padding: 0 15px;
  margin-bottom: 30px;
  margin-top: 10px;
  margin-right: 7.5px;
}

.lineup-status-bar .group-bar {
  height: 3px;
  display: flex;
  gap: 2px;
}

/* Gap entre cards: margin-top em items adjacentes (não usar flex para não
   quebrar os ::before/::after sticky de sombra do coop-tasks-scroll) */
.lineup-scroll-body .task-card {
  margin: 0;
}

.lineup-dnd-item+.lineup-dnd-item {
  margin-top: 15px;
}

/* DnD items */
.lineup-dnd-item {
  position: relative;
  cursor: grab;
  transition: opacity 100ms ease, padding-top 80ms ease;
}

.lineup-dnd-item:active {
  cursor: grabbing;
}

.lineup-dnd-item.is-dragging {
  opacity: 0.35;
}

.lineup-dnd-item.is-over {
  padding-top: 50px;
}

.lineup-dnd-item.is-over::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  height: 1px;
  border-radius: 0;
  background: var(--brand-primary);
}

.lineup-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  background: var(--bg-surface);
  border: 1px dashed var(--border-muted);
  border-radius: var(--radius-md);
}

/* Variantes do secao-banner */
.secao-banner-ok {
  background: var(--status-success-bg, #f0fdf4);
  border-color: var(--status-success-border, var(--diff-add-border));
  color: var(--status-success, var(--diff-add));
}

.secao-banner-erro {
  background: var(--status-danger-bg, #fef2f2);
  border-color: var(--status-danger-border, #fca5a5);
  color: var(--status-danger, #dc2626);
}

/* Perfil cooperado */
.perfil-hero {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* size/font vêm do componente Avatar */
.prefs-conta-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.prefs-conta-row .prefs-grid {
  flex: 1 1;
}

.perfil-hero-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.perfil-hero-nome {
  font-size: var(--fs-5xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.perfil-hero-papel {
  font-size: var(--fs-lg);
  color: var(--text-muted);
}

.perfil-hero-email {
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.perfil-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 15px;
}

.perfil-stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.perfil-stat-label {
  font-size: var(--fs-md);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.perfil-stat-valor {
  font-size: var(--fs-8xl);
  font-weight: 700;
  color: var(--text-primary);
}

.perfil-stat-meta {
  font-size: var(--fs-md);
  color: var(--text-muted);
}

/* Wiki */
.wiki-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
}

.wiki-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wiki-card-titulo {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.wiki-card-desc {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.wiki-card-badge {
  align-self: flex-start;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-muted);
  color: var(--text-secondary);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 500;
}

/* ── Módulo TarefasMaster: toolbar de toggle de agrupamento ───────────── */
.tarefas-master {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.tarefas-master-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
  padding-right: 7.5px;
}

.tarefas-master-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* Busca = pílula que se expande no campo de input (desktop e mobile). Colapsada
   tem a largura de um botão-ícone; ao abrir cresce com transição suave. */
.toolbar-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 22px;
  width: 22px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--bg-surface-raised, var(--overlay-soft));
  color: var(--text-muted);
  cursor: pointer;
  overflow: hidden;
  transition: width .24s cubic-bezier(.4, 0, .2, 1), background-color .15s, border-color .12s;
}

.toolbar-search:hover { border-color: var(--brand-primary); }
.toolbar-search:focus-within { border-color: var(--brand-primary); }

.toolbar-search.is-open {
  width: 260px;
  max-width: 100%;
  cursor: text;
  background: var(--bg-input, var(--overlay-soft));
}

.toolbar-search-icon {
  position: absolute;
  top: 50%;
  left: 7px;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  flex-shrink: 0;
}

/* Colapsada (círculo): a lupa fica centralizada nos dois eixos. */
.toolbar-search:not(.is-open) .toolbar-search-icon {
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Input autossuficiente — sem herdar de .criar-nota-input (que inflava altura,
   padding e trazia borda própria no focus). */
.toolbar-search-input {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 22px 0 24px;
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--text-primary);
  border: none;
  border-radius: inherit;
  background: transparent;
  outline: none;
  opacity: 0;
  transition: opacity .16s ease;
}

.toolbar-search-input::placeholder {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.toolbar-search.is-open .toolbar-search-input { opacity: 1; }
.toolbar-search:not(.is-open) .toolbar-search-input { pointer-events: none; }

.toolbar-search-clear {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  flex-shrink: 0;
}

.toolbar-search:not(.is-open) .toolbar-search-clear { display: none; }

.toolbar-search-clear:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

/* ── Grid toolbar: linha 1 (busca/tabela/novo/ajustes) + linha 2 (ajustes da view) ── */
.grid-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
}

/* Linha 2 — abre/fecha com transição suave de altura (grid-template-rows). O
   wrapper fica sempre montado pra animar nos dois sentidos. */
.grid-toolbar-settings-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .24s cubic-bezier(.4, 0, .2, 1);
}

.grid-toolbar-settings-wrap.is-open { grid-template-rows: 1fr; }

.grid-toolbar-settings-inner {
  overflow: hidden;
  min-height: 0;
}

/* Aberto e estável: libera overflow pros dropdowns (Agrupar/Ordenar/Filtrar…)
   não serem cortados pelo clip da animação de altura. */
.grid-toolbar-settings-inner.is-visible {
  overflow: visible;
}

.grid-toolbar-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 9px 0 1px 0;
  margin-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

/* Pílula só-ícone (sliders, inverter ordem, largura): círculo na altura dos pills. */
.tarefas-master-pill.is-icon {
  width: 22px;
  height: 22px;
  padding: 0;
  gap: 0;
  justify-content: center;
}

@media (max-width: 768px) {
  .tarefas-master-toolbar {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0;
  }
  /* Linha única (sem wrap): a busca cresce no espaço que sobra via flex-grow,
     em vez de quebrar pra baixo. */
  .grid-toolbar-primary { width: 100%; flex-wrap: nowrap; }
  .grid-toolbar-primary .toolbar-search {
    flex: 0 1 22px;
    width: auto;
    transition: flex-grow .24s cubic-bezier(.4, 0, .2, 1), background-color .15s, border-color .12s;
  }
  .grid-toolbar-primary .toolbar-search.is-open {
    flex-grow: 1;
    width: auto;
    max-width: none;
  }
  /* Mobile: controles da view quebram em várias linhas — alinhados à esquerda
     (o flex-end só faz sentido no desktop, espelhando os botões do topo). */
  .grid-toolbar-settings { justify-content: flex-start; }
}

.tarefas-master-pill {
  appearance: none;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3.6px 8px 2px 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--bg-surface-raised, var(--overlay-soft));
  color: var(--text-muted);
  transition: border-color .12s, background-color .12s, color .12s;
}

.tarefas-master-pill:hover {
  border-color: var(--filtro-cor);
}

.tarefas-master-pill.active {
  background: var(--filtro-cor-bg);
  color: var(--filtro-cor);
  border-color: transparent;
}

/* ── Criar recado modal (inputs only — overlay/dialog from CardModal) ── */
.criar-nota-input {
  font: inherit;
  font-size: var(--fs-lg);
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--bg-input, var(--overlay-soft));
  color: var(--text-primary);
  outline: none;
  transition: border-color .15s;
}

.criar-nota-input:focus {
  border-color: var(--brand-primary);
}

.criar-nota-textarea {
  resize: vertical;
  min-height: 80px;
}

.criar-nota-erro {
  font-size: var(--fs-md);
  color: var(--status-error);
  padding: 6px 10px;
  background: var(--status-error)10;
  border-radius: var(--radius-sm);
}

/* ── Dropdowns dentro de CardModal no mobile ── */
@media (max-width: 768px) {
  .card-modal-overlay .dropdown-menu {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    min-width: 220px;
    max-width: 80vw;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1100;
    margin-top: 0;
    box-shadow: 0 24px 64px var(--scrim);
    padding: 10px;
  }

  .card-modal-overlay .dropdown-menu .dropdown-item {
    padding: 14px 20px;
    font-size: var(--fs-4xl);
    min-height: 48px;
  }

  .card-modal-overlay .dropdown-menu .dropdown-item .date-item {
    font-size: var(--fs-4xl);
  }

  .card-modal-overlay .dropdown-menu .dropdown-item .date-item-sub {
    font-size: var(--fs-lg);
  }
}

/* ── SelectComBusca / MultiSelectComBusca dentro de CardModal no mobile ── */
@media (max-width: 768px) {
  .card-modal-overlay .select-busca-dropdown {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    min-width: 260px;
    max-width: 88vw;
    max-height: 72vh;
    z-index: 1100;
    margin-top: 0;
    box-shadow: 0 24px 64px var(--scrim);
  }

  .card-modal-overlay .select-busca-option {
    padding: 12px 10px;
    font-size: var(--fs-4xl);
    min-height: 44px;
  }
}

/* ── CriarRecadoModal: avatar sizing no dropdown de atribuição (fora do cooperado-painel) ── */
.card-modal-overlay .nota-shuffle-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-modal-overlay .nota-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-muted);
  flex-shrink: 0;
}

/* ── Tarefa reatribuida (fade-out 10s antes de sumir da lista) ── */
.cooperado-painel .task-card-fading {
  opacity: 0.55;
  transition: opacity 0.4s ease, background 0.4s ease;
}

.cooperado-painel .task-card-fading:hover {
  opacity: 1;
}

/* ── PersonaAvatar: bolinha do Responsavel/Suporte a esquerda do Status ── */
.persona-avatar-stack {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 8px;
  vertical-align: middle;
}

.persona-avatar-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.persona-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  padding: 0;
  border: 1.5px solid var(--bg-surface, #fff);
  background: var(--bg-surface-raised, #f3f4f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--border-subtle);
  cursor: default;
  position: relative;
  z-index: 2;
}

.persona-avatar-clickable {
  cursor: pointer;
  transition: transform 0.08s ease;
}

.persona-avatar-clickable:hover {
  transform: scale(1.08);
}

.persona-avatar:disabled {
  cursor: default;
}

.persona-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: none;
}

.persona-avatar-empty {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #9ca3af);
  font-size: var(--fs-xs);
}

.persona-avatar-overlap {
  margin-left: -7px;
  z-index: 1;
}

.persona-avatar-suporte {
  background: var(--bg-surface-raised, #eef2ff);
}

/* TeamPicker dropdown */
.team-picker-menu {
  min-width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px 0;
  z-index: 1000;
}

.team-picker-header {
  padding: 6px 12px;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280);
  font-weight: 600;
}

.team-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  width: 100%;
  text-align: left;
}

.team-picker-item.is-current {
  background: var(--bg-surface-raised, #f3f4f6);
}

.team-picker-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.team-picker-avatar-placeholder {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-surface-raised, #f3f4f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #6b7280);
  font-size: var(--fs-xs);
  flex-shrink: 0;
}

.team-picker-name {
  flex: 1 1;
  font-size: var(--fs-lg);
}

.team-picker-check {
  color: var(--accent, #10b981);
  font-size: var(--fs-sm);
}

.team-picker-clear {
  border-bottom: 1px solid var(--border-muted, #e5e7eb);
  color: var(--text-muted, #6b7280);
}

/* Acessibilidade — esconde visualmente mas mantém pra leitor de tela e password manager. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Projetos / Fases (cliente) ---------- */
.projetos-client-wrap {
  position: relative;
}

.projetos-client-track {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.projetos-client-seg {
  position: absolute;
  left: 15px;
  width: 1px;
  transform: translateX(-50%);
  border-radius: 1px;
}

.projetos-client {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: relative;
  z-index: 1;
}

.projetos-client-row {
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 15px;
  align-items: center;
  min-width: 0;
  position: relative;
}

.projetos-client-row .tl-bullet {
  justify-self: center;
}

.projetos-client-cell {
  min-width: 0;
}

.projetos-client-row.is-active .tl-bullet {
  width: 26px;
  height: 26px;
}

.projetos-client-row.is-active .tl-bullet-ring {
  border-top-color: transparent;
  animation: tl-spin 1.6s linear infinite;
}

.projetos-client-row.is-selected .tl-bullet-ring {
  box-shadow: 0 0 0 3px var(--brand-primary-muted);
}

.projetos-client-scroll {
  padding-right: 8px;
}

/* Status pill compacto na linha de baixo do CardProjeto — sem chevron,
   alinhado com a estetica do CardTask global (.btn-status). Override do
   .cooperado-painel .btn-status-static (28px), que e maior. */
.cooperado-painel .card-projeto-meta .btn-status-static {
  height: auto;
  padding: 10px 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
  border: none;
  border-radius: var(--radius-sm);
  gap: 0;
}

/* ---------- Timeline projetos ---------- */
.tl-timeline {
  position: relative;
  height: 100%;
  width: 30px;
  padding: 0;
}

.tl-timeline::before {
  content: "";
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 50%;
  width: 1px;
  background: var(--border-subtle);
  transform: translateX(-50%);
}

.tl-timeline-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  min-height: 100%;
}

.tl-timeline-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1;
  min-height: 56px;
}

.tl-bullet {
  position: relative;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.tl-bullet-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--tl-dot-color, var(--border-subtle));
  background: var(--bg-base, var(--bg-surface));
  box-sizing: border-box;
  transition: inset 120ms ease;
}

.tl-bullet-core {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tl-dot-color, var(--border-subtle));
}

/* ativo: anel maior, gira suavemente, top transparente = ilusao de carregamento */
.tl-timeline-item.is-active .tl-bullet {
  width: 26px;
  height: 26px;
}

.tl-timeline-item.is-active .tl-bullet-ring {
  border-top-color: transparent;
  animation: tl-spin 1.6s linear infinite;
}

@keyframes tl-spin {
  to {
    transform: rotate(360deg);
  }
}

.tl-timeline-item.is-selected .tl-bullet-ring {
  box-shadow: 0 0 0 3px var(--brand-primary-muted);
}

@media (max-width: 720px) {
  .projetos-client {
    grid-template-columns: 30px 1fr;
    gap: 15px;
  }
}

/* ---------- Toasts (notificacoes in-app) ---------- */
.toast-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  /* o container nao captura cliques; so os cards capturam */
}

.toast-card {
  pointer-events: auto;
  width: 340px;
  max-width: calc(100vw - 40px);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px var(--scrim), 0 0 0 1px var(--overlay-soft);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-main);
  cursor: pointer;
  transform-origin: bottom right;
  animation: toast-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
  transition: transform 180ms ease-out, opacity 180ms ease-out, filter 120ms ease-out;
}

.toast-card:hover {
  background-color: var(--bg-surface-raised);
}

.toast-card-leaving {
  transform: translateX(20px);
  opacity: 0;
  pointer-events: none;
}

.toast-card-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.toast-card-titulo {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toast-card-body {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.toast-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.toast-btn {
  font-family: var(--font-main);
  font-size: var(--fs-sm);
  font-weight: 500;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 120ms ease-out, filter 120ms ease-out;
  outline: none;
}

.toast-btn:hover {
  filter: brightness(0.92);
}

.toast-btn:active {
  transform: scale(0.96);
  filter: brightness(0.84);
}

.toast-btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-subtle);
}

.toast-btn-primary {
  background: var(--brand-primary);
  color: var(--surface-on-accent);
  border-color: var(--brand-primary);
}

@keyframes toast-in {
  from {
    transform: translateY(12px) scale(0.96);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .toast-stack {
    right: 12px;
    bottom: 12px;
    /* sem left — stack fica ancorada no canto direito */
  }

  .toast-card {
    width: auto;
    max-width: 65vw;
  }
}

/* ── CardContrato extras ──────────────────────────────────── */

/* sem truncação nos status badges dentro de card e modal de contrato */
.card-contrato-cliente .btn-status-label,
.cc-projeto-row .btn-status-label,
.card-modal-projeto-override .btn-status-label {
  max-width: none;
  white-space: nowrap;
}

/* spin pra Icon (usado via prop spin) */
@keyframes icon-spin-kf {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.icon-spin {
  animation: icon-spin-kf 1s linear infinite;
}

/* === Banco de horas — timer unificado + popup === */
.coop-timer-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 3px 8px 3px 3px;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: var(--transition-smooth);
  cursor: default;
  font-family: var(--font-main);
}

.coop-timer-btn:hover {
  border-color: var(--border-muted);
}

.coop-timer-btn.active {
  border-color: var(--brand-primary-border);
  background: var(--brand-primary-muted);
}

.coop-timer-btn.other .coop-timer-play-pill {
  cursor: not-allowed;
}

/* Pill do ícone play/stop dentro do botão */
.coop-timer-play-pill {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-xs);
  transition: var(--transition-smooth);
}

.coop-timer-play-pill:not(:disabled):hover {
  background: var(--bg-canvas);
  border-color: var(--border-muted);
  color: var(--text-primary);
}

.coop-timer-play-pill:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.coop-timer-btn.active .coop-timer-play-pill {
  background: var(--brand-primary-muted);
  border-color: var(--brand-primary-border);
  color: var(--brand-primary);
}

/* Texto do tempo — sem aparência de botão */
.coop-timer-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
  line-height: 0;
  margin-top: 1px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.coop-timer-label:hover {
  color: var(--text-primary);
}

.coop-timer-btn.active .coop-timer-label {
  color: var(--brand-primary);
}


/* ============================================================
   Utility classes — substituem style={{ }} inline no TSX.
   Não usar para valores dinâmicos (usar CSS vars direto).
   ============================================================ */

/* --- Icon font-size (substitui style={{ fontSize: "var(--icon-X)" }}) ---
   Aplicáveis via className em <Icon>. Override inline ainda funciona. */
.icon-micro {
  font-size: var(--icon-micro);
}

.icon-nano {
  font-size: var(--icon-nano);
}

.icon-xs {
  font-size: var(--icon-xs);
}

.icon-sm {
  font-size: var(--icon-sm);
}

.icon-md {
  font-size: var(--icon-md);
}

.icon-ml {
  font-size: var(--icon-ml);
}

.icon-lg {
  font-size: var(--icon-lg);
}

.icon-xl {
  font-size: var(--icon-xl);
}

.icon-xxl {
  font-size: var(--icon-xxl);
}

.fix-icon-tp-1 {
  margin-top: 1px;
}

.fix-icon-tp-2 {
  margin-top: 2px;
}

.fix-icon-bt-1 {
  margin-bottom: 1px;
}

.fix-icon-bt-2 {
  margin-bottom: 2.4px;
}


/* Icon em KPI sub-label (estatísticas) — sm + ajuste óptico de baseline */
.kpi-sub-icon {
  font-size: var(--icon-sm);
  position: relative;
  top: -0.2px;
}

/* --- Display --- */
.d-flex {
  display: flex;
}

.d-block {
  display: block;
}

.d-grid {
  display: grid;
}

.d-inline-flex {
  display: inline-flex;
}

.d-inline-block {
  display: inline-block;
}

.d-none {
  display: none;
}

.d-contents {
  display: contents;
}

/* --- Flex direction / wrap --- */
.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

/* --- Flex sizing --- */
.flex-1 {
  flex: 1 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-shrink-1 {
  flex-shrink: 1;
}

/* --- Align / Justify --- */
.ai-center {
  align-items: center;
}

.ai-start {
  align-items: flex-start;
}

.ai-end {
  align-items: flex-end;
}

.jc-center {
  justify-content: center;
}

.jc-between {
  justify-content: space-between;
}

.jc-end {
  justify-content: flex-end;
}

.jc-start {
  justify-content: flex-start;
}

/* --- Spacing shortcuts --- */
.m-0 {
  margin: 0;
}

.p-0 {
  padding: 0;
}

.ml-auto {
  margin-left: auto;
}

.mt-1 {
  margin-top: var(--space-1);
}

.mt-7 {
  margin-top: var(--space-7);
}

.mb-1 {
  margin-bottom: var(--space-1);
}

.mb-3 {
  margin-bottom: var(--space-3);
}

.mb-7 {
  margin-bottom: var(--space-7);
}

.my-1 {
  margin-block: var(--space-1);
}

.mr-1 {
  margin-right: var(--space-1);
}

.mr-2 {
  margin-right: var(--space-2);
}

.w-full {
  width: 100%;
}

.minw-0 {
  min-width: 0;
}

.minh-0 {
  min-height: 0;
}

.maxh-none {
  max-height: none;
}

/* --- Gap (flex/grid) — usa tokens --space-N --- */
.gap-1 {
  gap: var(--space-1);
}

.gap-2 {
  gap: var(--space-2);
}

.gap-3 {
  gap: var(--space-3);
}

.gap-4 {
  gap: var(--space-4);
}

.gap-5 {
  gap: var(--space-5);
}

.gap-6 {
  gap: var(--space-6);
}

.gap-7 {
  gap: var(--space-7);
}

/* --- Align self --- */
.align-self-start {
  align-self: flex-start;
}

.align-self-center {
  align-self: center;
}

.align-self-end {
  align-self: flex-end;
}

/* --- Position --- */
.pos-relative {
  position: relative;
}

.pos-absolute {
  position: absolute;
}

.pos-fixed {
  position: fixed;
}

.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* --- Font weight --- */
.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

/* --- Line height --- */
.lh-1 {
  line-height: 1;
}

.lh-13 {
  line-height: 1.3;
}

.lh-15 {
  line-height: 1.5;
}

.lh-155 {
  line-height: 1.55;
}

/* --- Text --- */
.ta-center {
  text-align: center;
}

.ta-right {
  text-align: right;
}

.tt-upper {
  text-transform: uppercase;
}

.ws-nowrap {
  white-space: nowrap;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Overflow --- */
.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

/* --- Cursor --- */
.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

/* --- Border --- */
.border-none {
  border: none;
}

/* --- Opacity (estados fixos, não dinâmicos) --- */
.opacity-45 {
  opacity: 0.45;
}

.opacity-55 {
  opacity: 0.55;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-85 {
  opacity: 0.85;
}

/* --- Padrão composto: label de seção uppercase ---
   Uso: <span className="section-label">Título</span>
   Substitui os 8x de fontWeight:500 + textTransform + letterSpacing em CoopModalCriarNota
   ----------------------------------------------------------------- */
.section-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  display: block;
}

/* ============================================================
   Padrões semânticos compostos — Etapa 2 do refactor de cards.
   Cada classe substitui um inline style={{ }} repetido ou
   conceitualmente único (modal de confirmação, lineup, etc).
   ============================================================ */

/* Tipografia meta/legendas (sm muted) — usado em barras de
   progresso, contadores fechadas/total, etc. */
.text-meta-sm {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.text-meta-sm-num {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ChecklistSection — contador "(X/Y)" ao lado do título */
.checklist-count {
  color: var(--text-muted);
  font-weight: 400;
  margin-left: var(--space-1);
  font-size: var(--fs-sm);
}

/* Errors de form em modais */
.form-error-sm {
  color: var(--status-error);
  font-size: var(--fs-sm);
  margin-top: var(--space-1);
}

.form-error-md {
  color: var(--status-error);
  font-size: var(--fs-md);
}

/* Lineup position number — número da posição no btn-lineup */
.lineup-pos-num {
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 0;
}

/* Modal: empty state centralizado (texto "Tem certeza...?") */
.modal-empty-state {
  text-align: center;
  padding: var(--space-7) 0;
}

.modal-empty-msg {
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  margin: 0 0 16px;
}

/* Modais de confirmação tipo "Concluir curso", "Inscrever-se" */
.modal-confirm-text {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0;
}

.modal-confirm-text-secondary {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

.modal-confirm-text-sm {
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

.modal-confirm-title-success {
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 6px;
}

/* "[responsável]" tag inline em dropdown atribuir-a */
.atribuido-resp-tag {
  font-size: var(--fs-2xs);
  font-weight: 400;
  color: var(--text-muted);
  opacity: 0.55;
  margin-left: 3px;
}

/* nota-popup-floating centralizado (confirm delete) — sobrescreve
   o position calculado via JS pra centralizar na viewport. */
.nota-popup-centered {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
}

.confirm-title {
  font-size: var(--fs-xl);
  font-weight: 600;
}

.confirm-body {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--text-secondary);
}

.confirm-body-detail {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-lg);
  color: var(--text-muted);
}

/* date-item modifier (variant clear/muted) */
.date-item--muted {
  color: var(--text-muted);
}

/* dropdown-menu com scroll vertical (pessoas em atribuir-a) */
.dropdown-menu--scroll {
  max-height: 280px;
  overflow-y: auto;
}

/* Lottie/imagem fixa em modal de sucesso (curso concluído) */
.lottie-success {
  width: 180px;
  height: 180px;
}

/* Visual estados estáticos (não-clicáveis mas com aparência de btn) */
.no-pointer {
  pointer-events: none;
}

.btn-static-pending {
  cursor: default;
  opacity: 0.7;
}

/* btn-static: visual de botão mas sem interação (cursor default) */
.btn-static {
  cursor: default;
}

/* btn-toggle: botão "switch" sem fundo, apenas ícone toggle on/off.
   Color dinâmico (brand-primary vs text-muted) vem do caller via style ou
   modifier .btn-toggle--on / .btn-toggle--off. */
.btn-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: var(--transition-smooth);
  color: var(--text-muted);
}

.btn-toggle--on {
  color: var(--brand-primary);
}

/* Checklist placeholder (input fake durante adding) */
.coop-check-input--placeholder {
  border: 1.5px dashed var(--border-muted);
  background: transparent;
}

/* coop-tag-cliente em header de card/modal (altura fixa pra alinhar
   com botões 28px ao lado). Antes era inline `height:28; box-sizing`. */
.coop-tag-cliente--row {
  height: 28px;
  box-sizing: border-box;
}

/* coop-info-panel em CardTask — sem coop-info-inner; padding/gap
   aplicados direto no painel. */
.coop-info-panel-content {
  padding: 18px 0 0;
  gap: var(--space-7);
}
/* Controles frost do CardModalIframe (sem container atrás, cada botão tem seu próprio blur) */
.show-iframe-frost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 38px;
  height: 36px;
  padding: 0 8px;
  background: rgba(130, 130, 130, 0.30);
  border: 1px solid rgba(160, 160, 160, 0.35);
  border-radius: var(--radius-sm);
  color: var(--surface-on-accent);
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}
.show-iframe-frost-btn:hover {
  background: rgba(150, 150, 150, 0.45);
  border-color: rgba(180, 180, 180, 0.55);
  color: #f0f0f0;
}
.show-iframe-frost-btn:active {
  transform: scale(0.96);
}

/* CardModalIframe — controles só aparecem no hover do dialog */
.show-iframe-dialog .show-iframe-frost-btn,
.show-iframe-dialog .show-iframe-controls {
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}
.show-iframe-dialog--hover .show-iframe-frost-btn,
.show-iframe-dialog--hover .show-iframe-controls {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================================
   View Arquivos — 3 módulos lado a lado, cada um com scroll próprio
   ============================================================================ */

/* Grid de 3 colunas iguais para os módulos Show / Brand Pack / Manual */
.coop-grid--arquivos {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 992px) {
  .coop-grid--arquivos {
    grid-template-columns: 1fr;
  }
}

/* Stack vertical de cards dentro de cada módulo (sem grid horizontal) */
.arquivo-card-list {
  display: flex;
  flex-direction: column;
}

.arquivo-card-list > .card-base + .card-base {
  margin-top: 10px;
}

/* Arquivos: 3 colunas iguais — remove o padding-left herdado do last-child (regra de 2 colunas) */
.coop-grid--arquivos > .coop-col:last-child {
  padding-left: 0;
}

/* MedulaLoading — animação está encapsulada inline no componente */

/* ─────────────────────────────────────────────────────────────
   SelectComBusca — dropdown com input de busca focado ao abrir
   ───────────────────────────────────────────────────────────── */

.select-busca {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Trigger imita o visual de .btn-status (mesma altura, padding, radius) */
.select-busca-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  height: 28px;
  padding: 0 8px 0 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: var(--font-main);
  cursor: pointer;
  transition: var(--transition-smooth);
  text-align: left;
  line-height: 0;
}
.select-busca-trigger:hover:not(:disabled) {
  filter: brightness(0.95);
  border-color: var(--border-muted);
}
.select-busca-trigger:active:not(:disabled) {
  transform: scale(0.98);
  filter: brightness(0.88);
}
.select-busca-trigger:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.select-busca-trigger--open {
  border-color: var(--card-color, var(--brand-primary));
}
.select-busca-trigger-label {
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.select-busca-trigger-label--placeholder {
  color: var(--text-muted);
  font-weight: 400;
}
.select-busca-trigger-caret {
  margin-left: 8px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.select-busca-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  min-width: max(100%, 210px);
  z-index: 50;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px var(--scrim);
  overflow: hidden;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  /* Reset herança de .coop-section-title e outros contextos */
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--text-primary);
}
.select-busca-input-wrap {
  padding: 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.select-busca-input {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-family: var(--font-main);
  outline: none;
}
.select-busca-input:focus {
  border-color: var(--card-color, var(--brand-primary));
}
.select-busca-options {
  overflow-y: auto;
  flex: 1 1;
  padding: 10px;
}
.select-busca-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-md);
  font-family: var(--font-main);
  color: var(--text-primary);
  transition: background 100ms ease;
}
.select-busca-option:hover,
.select-busca-option--active {
  background: var(--bg-hover);
}
.select-busca-option--selected {
  color: var(--card-color, var(--brand-primary));
  font-weight: 500;
}
.select-busca-option-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.select-busca-empty {
  padding: 16px 10px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ─────────────────────────────────────────────────────────────
   FiltroCascata — sequência de SelectComBusca lado a lado
   ───────────────────────────────────────────────────────────── */

.filtro-cascata {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}


/* ─────────────────────────────────────────────────────────────
   Módulo Upload Show (view Gestão)
   ───────────────────────────────────────────────────────────── */

/* Toolbar do módulo Upload Show: título + filtros na mesma linha */
.upload-show-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  row-gap: 8px;
  position: relative;
  z-index: 10;
  overflow: visible;
}

.upload-show-filtros {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
}

/* Cada select do filtro tem largura fixa compacta */
.upload-show-select {
  width: 130px !important;
}

@media (max-width: 768px) {
  .upload-show-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .upload-show-filtros {
    width: 100%;
    margin-left: 0;
  }
  .upload-show-select {
    flex: 1 1 !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* Gap entre cards dentro dos grupos de show */
.upload-show-group-body > * + * {
  margin-top: 10px;
}

/* Card compacto em 1 linha */
.card-show-compacto {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.card-show-compacto-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  flex-shrink: 0;
  align-self: center;
}

.card-show-compacto-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1;
}

.card-show-compacto-nome {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-show-compacto-row2-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-show-compacto-lock {
  display: inline-flex;
  align-items: center;
  padding: 2px 4px;
  border-radius: 5px;
}

.card-show-compacto-spacer {
  flex-shrink: 0;
  width: 12px;
}

.card-show-compacto-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.card-show-compacto-data {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.card-show-compacto-chevron {
  color: var(--text-muted);
  flex-shrink: 0;
  align-self: center;
}

/* Variante "tinted" do trigger do SelectComBusca — cor da opção
   selecionada vira fundo+borda. Inline styles já aplicam as cores;
   essa classe serve só pra futuro override fino. */
.select-busca-trigger--tinted {
  font-weight: 500;
}

/* ── Link Page editor ──────────────────────────────────────────────────────── */

.coop-grid--link-page {
  grid-template-columns: 8fr 4fr;
}

@media (min-width: 1600px) {
  .coop-grid--link-page {
    grid-template-columns: 9fr 3fr;
  }
}

.cooperado-painel .coop-overview .coop-grid--link-page {
  flex: 1 1;
  min-height: 0;
  align-items: stretch;
  grid-template-rows: 1fr;
}

/* ── Preview (direita) ───────────────────────────────────────────────── */
.lp-preview-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.lp-preview-phone {
  flex: 1 1;
  min-height: 0;
  width: 100%;
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  background: #fff;
}

.lp-preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ── Form grid responsivo ────────────────────────────────────────────── */
.lp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}

/* ── Mobile: coluna unica, preview abaixo ────────────────────────────── */
@media (max-width: 992px) {
  .coop-grid--link-page {
    grid-template-columns: 1fr;
  }

  .cooperado-painel .coop-overview .coop-grid--link-page {
    flex: none;
    grid-template-rows: auto;
  }

  .coop-grid--link-page .coop-tasks-col {
    overflow: visible;
  }

  .coop-grid--link-page .coop-tasks-scroll {
    flex: none;
    overflow: visible;
    padding-right: 0;
  }

  .coop-grid--link-page .coop-tasks-scroll::before,
  .coop-grid--link-page .coop-tasks-scroll::after {
    display: none;
  }

  .lp-preview-col {
    overflow: visible;
    min-height: auto;
  }

  .lp-preview-phone {
    flex: none;
    min-height: auto;
    max-height: none;
    aspect-ratio: 390 / 700;
  }

  .lp-form-row {
    grid-template-columns: 1fr;
  }
}

.lp-field-input {
  flex: 1 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 12px;
  padding: 2px 4px;
  outline: none;
  border-radius: 0;
  transition: border-color 0.15s;
}

.lp-field-input:focus {
  border-bottom-color: var(--border-muted);
}

.lp-field-input option {
  background: var(--surface-secondary, #1a1a1a);
  color: var(--text-primary);
}

.lp-field-textarea {
  resize: vertical;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 6px;
  width: 100%;
  min-height: 60px;
}

.lp-field-textarea:focus {
  border-color: var(--border-muted);
}

/* ── Seção dentro de group-card com divider ──────────────────────────── */
.lp-section-divider {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}

.lp-info-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

/* ── Link Page · botão "salvo" ────────────────────────────────────── */
.btn.btn-sm.is-saved {
  color: var(--status-success) !important;
  border-color: var(--status-success) !important;
}

/* Tabs de navegação (Personalizar) */
.lp-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.lp-tabs::-webkit-scrollbar {
  display: none;
}

.lp-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.lp-tab:hover {
  color: var(--text-primary);
  background: var(--bg-surface-hover);
}

.lp-tab.is-active {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--card-color, var(--bg-surface-hover)) 12%, var(--bg-surface));
  border-color: var(--card-color, var(--border-muted));
}

/* Templates rápidos (chips) */
.lp-templates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.lp-template-chip {
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr auto;
  padding: 10px;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  transition: var(--transition-smooth);
  cursor: pointer;
  text-align: left;
  min-height: 80px;
  position: relative;
}

.lp-template-chip i.lp-tpl-icon {
  grid-row: 1;
  grid-column: 1;
  font-size: var(--icon-xl);
  color: var(--card-color, var(--text-muted));
  line-height: 1;
  align-self: start;
}

.lp-template-chip .lp-tpl-bottom {
  grid-row: 2;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lp-template-chip .lp-tpl-badge {
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  line-height: 1;
}

.lp-template-chip .lp-tpl-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lp-template-chip .lp-tpl-model {
  grid-row: 1;
  grid-column: 2;
  font-size: 16px;
  color: var(--card-color, var(--text-muted));
  opacity: 0.4;
  align-self: start;
  justify-self: end;
}

.lp-template-chip:hover:not(:disabled) {
  background: var(--bg-surface-hover);
}

.lp-template-chip:hover:not(:disabled) .lp-tpl-model {
  opacity: 0.7;
}

.lp-template-chip.is-active {
  border-style: solid;
  border-width: 1.5px;
  border-color: var(--card-color, var(--border-subtle));
  background: color-mix(in srgb, var(--card-color, var(--bg-surface-hover)) 10%, var(--bg-surface));
}

.lp-template-chip.is-default {
  border-style: solid;
  border-color: color-mix(in srgb, var(--text-muted) 40%, transparent);
  background: color-mix(in srgb, var(--text-muted) 5%, var(--bg-surface));
}

.lp-template-chip.is-default .lp-tpl-badge {
  color: var(--text-secondary);
}

/* ── Card de tema: background total + inner card que replica o estilo da LP ── */
.lp-theme-card {
  display: block;
  padding: 0;
  min-height: 140px;
  overflow: hidden;
  border-style: solid;
  border-width: 1.5px;
  border-color: var(--tpl-c1, var(--border-subtle));
  transition: var(--transition-smooth);
}

.lp-theme-card:hover:not(:disabled) {
  border-color: var(--tpl-c2, var(--tpl-c1));
}

.lp-theme-card.is-active {
  border-width: 2px;
}

/* Tema NO AR (publicado): anel de destaque, independente da seleção de edição. */
.lp-theme-card.is-live {
  outline: 2px solid color-mix(in srgb, var(--status-success, #2ecc71) 70%, transparent);
  outline-offset: -2px;
}

/* Labels do badge: verde = no ar, âmbar = rascunho com alterações pendentes. */
.lp-tpl-gear-label.lp-gear-live { color: var(--status-success, #2ecc71); }
.lp-tpl-gear-label.lp-gear-draft { color: var(--status-warning, #e0a000); }

/* Gear pill no canto superior esquerdo no card de tema.
   Background/borda vêm inline do LpThemeCard (réplica do card da LP). */
.lp-theme-card .lp-tpl-gear {
  top: 8px;
  left: 8px;
  right: auto;
  padding: 6px 11px;
  gap: 5px;
  font-size: var(--icon-lg);
}

.lp-theme-card .lp-tpl-gear .lp-tpl-gear-label {
  font-size: 10px;
}

/* Inner card: réplica do card da LP (glass ou sólido) */
.lp-tpl-inner-card {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  overflow: hidden;
}

.lp-tpl-inner-text {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lp-tpl-inner-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-tpl-inner-until {
  font-size: 9px;
  font-weight: 500;
  opacity: 0.7;
  line-height: 1;
  white-space: nowrap;
}

.lp-tpl-inner-icon {
  font-size: var(--icon-xl);
  flex-shrink: 0;
  color: var(--tpl-c1, var(--text-muted));
  transition: color 0.15s;
}

/* Hover do card inteiro propaga c1→c2 em todos os elementos temáticos */
.lp-theme-card:hover:not(:disabled) .lp-tpl-gear {
  background: color-mix(in srgb, var(--tpl-c2, var(--tpl-c1, var(--brand-primary))) 15%, transparent);
  color: var(--tpl-c2, var(--tpl-c1, var(--brand-primary)));
}

.lp-theme-card:hover:not(:disabled) .lp-tpl-inner-icon {
  color: var(--tpl-c2, var(--tpl-c1, var(--text-muted)));
}

/* Caixa da engrenagem (opções do tema + status ativo) */
.lp-tpl-gear {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: var(--icon-md);
  border-radius: 999px;
  border: none;
  background: color-mix(in srgb, var(--tpl-c1, var(--brand-primary)) 10%, transparent);
  color: var(--tpl-c1, var(--brand-primary));
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.lp-tpl-gear:hover {
  background: color-mix(in srgb, var(--tpl-c2, var(--tpl-c1, var(--brand-primary))) 15%, transparent);
  color: var(--tpl-c2, var(--tpl-c1, var(--brand-primary)));
}

.lp-tpl-gear-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1;
}

.lp-tpl-gear.is-on {
  background: color-mix(in srgb, var(--tpl-c1, var(--brand-primary)) 15%, transparent);
}

/* Popup de tema */
.lp-theme-popup {
  min-width: 280px;
  max-width: 340px;
  padding: 0;
}

.lp-theme-popup .lp-theme-popup-header {
  padding: 12px 14px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-theme-popup .lp-theme-popup-header .criar-nota-input {
  flex: 1 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
}

.lp-theme-popup .lp-theme-popup-section {
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lp-theme-popup .lp-theme-popup-section + .lp-theme-popup-section {
  border-top: 1px solid var(--border-subtle);
}

.lp-theme-popup .lp-theme-popup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lp-theme-popup .lp-theme-popup-protected {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--text-muted) 5%, transparent);
  border-radius: var(--radius-sm);
}

.lp-theme-popup .lp-theme-popup-error {
  font-size: 10px;
  color: var(--status-error);
  padding: 0 2px;
}

.lp-theme-popup .lp-theme-popup-footer {
  padding: 10px 14px;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  border-top: 1px solid var(--border-subtle);
}

/* Lista vertical de cards (botões) */
.card-list .task-card {
  margin: 0;
}

/* Sliders de card (desfoque/opacidade/cantos) — flex, item solo ocupa 100% */
.lp-card-sliders {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.lp-card-sliders > * {
  flex: 1 1 280px;
  min-width: 0;
}

.lp-module-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
}

.lp-disabled {
  pointer-events: none;
  opacity: 0.45;
  filter: grayscale(0.3);
}

.lp-card-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* Grid de slides (cards com thumbnail) */
.lp-slide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
/* Em monitores grandes não deixar cada item crescer demais: cap em 280px,
   o resto vira espaço entre colunas. */
@media (min-width: 1600px) {
  .lp-slide-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 280px));
    justify-content: start;
  }
}

.lp-slide-card {
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  transition: border-color .15s, transform .15s;
  cursor: grab;
  position: relative;
}
.lp-slide-card:hover {
  border-color: var(--card-color, var(--border-muted));
  transform: translateY(-1px);
}
.lp-slide-card.is-dragging {
  opacity: 0.45;
  transform: scale(0.96);
}
.lp-slide-card.is-over {
  border-color: var(--card-color, var(--brand-primary));
  box-shadow: 0 0 0 1px var(--card-color, var(--brand-primary));
}

.lp-slide-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--bg-base);
  overflow: hidden;
}

.lp-slide-thumb img,
.lp-slide-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lp-slide-type {
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.lp-slide-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px;
}

.lp-slide-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.lp-slide-remove:hover {
  background: var(--status-error, #c0392b);
}

.lp-slide-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
}

.lp-slide-name {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: var(--text-secondary);
}

.lp-slide-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.lp-slide-remove:hover {
  background: var(--status-error, #c0392b);
}

.lp-slide-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
}

.lp-slide-name {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: var(--text-secondary);
}

/* ── IconPicker ──────────────────────────────────────────────────── */

.icon-picker-dropdown {
  width: 260px;
  padding: 0;
  position: fixed;
  z-index: 1100;
  margin-top: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(400px, calc(100vh - 48px));
  --scroll-shadow-bg: var(--bg-surface-raised);
}

.icon-picker-search {
  position: relative;
  flex-shrink: 0;
  padding: 10px 10px 0;
}

.icon-picker-input {
  width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  padding: 7px 28px 7px 10px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.icon-picker-input:focus {
  border-color: var(--border-muted);
}

.icon-picker-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.icon-picker-clear:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

.icon-picker-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  flex: 1 1;
}

.icon-picker-item {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
  background: transparent;
  padding: 0;
  min-height: auto;
  box-sizing: border-box;
}

.icon-picker-item:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-muted);
}

.icon-picker-item--active {
  background: var(--brand-primary-faint);
  border-color: var(--brand-primary);
}

.icon-picker-item i {
  font-size: 18px;
  line-height: 1;
  color: var(--text-secondary);
  transition: color 0.15s;
}

.icon-picker-item:hover i {
  color: var(--text-primary);
}

.icon-picker-item--active i {
  color: var(--brand-primary);
}

.icon-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px;
  font-size: 11px;
  color: var(--text-muted);
}

.icon-picker-item--clear {
  color: var(--text-muted);
}
.icon-picker-item--clear:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .cooperado-painel .icon-picker-dropdown {
    flex-direction: column-reverse;
    width: 80vw;
    max-height: min(70vh, calc(100vh - 48px));
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
  }

  .icon-picker-search {
    padding: 0 8px 8px;
  }

  .icon-picker-dropdown .icon-picker-list {
    flex: 1 1;
    min-height: 0;
    overflow-y: auto;
    gap: 3px;
    padding: 8px;
  }

  .icon-picker-dropdown .icon-picker-item i {
    font-size: 16px;
  }
}

/* Progresso transcricao */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* ── Range slider customizado ──────────────────────────────────────── */
.lp-range {
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--border-muted);
  outline: none;
  margin: 0;
  cursor: pointer;
}

.lp-range::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--card-color, var(--text-primary));
  border: 2px solid var(--bg-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  cursor: pointer;
  -webkit-transition: transform 0.1s;
  transition: transform 0.1s;
}

.lp-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--card-color, var(--text-primary));
  border: 2px solid var(--bg-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  cursor: pointer;
}

.lp-range:active::-webkit-slider-thumb {
  transform: scale(1.15);
}

.lp-range:active::-moz-range-thumb {
  transform: scale(1.15);
}


/* ---- Checkout (tela pública, roda sobre .login-page) ---- */
.checkout-card {
  width: min(94vw, 440px);
  background: rgba(14, 14, 14, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

[data-theme="light"] .checkout-card,
[data-theme="auto"] .checkout-card {
  background: rgba(255, 255, 255, 0.93);
}

@media (prefers-color-scheme: light) {
  [data-theme="auto"] .checkout-card { background: rgba(255, 255, 255, 0.93); }
}

.checkout-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-7);
  border-bottom: 1px solid var(--border-subtle);
}

.checkout-brand {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-primary);
}

.checkout-title {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.checkout-body {
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.checkout-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1;
}

.checkout-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.checkout-optional {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

.checkout-input {
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-lg);
  padding: 8px 10px;
  outline: none;
  font-family: var(--font-main);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.checkout-input:focus {
  border-color: var(--brand-primary-border);
}

.checkout-input option {
  background: var(--bg-surface-raised);
  color: var(--text-primary);
}

.checkout-row {
  display: flex;
  gap: var(--space-5);
}

.checkout-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px var(--space-7);
  background: var(--brand-primary);
  color: var(--surface-on-accent);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--fs-lg);
  font-weight: 600;
  font-family: var(--font-main);
  cursor: pointer;
  transition: opacity 0.15s;
}

.checkout-btn-primary:hover { opacity: 0.88; }

.checkout-btn-primary:disabled {
  opacity: 0.4;
  cursor: default;
}

.checkout-btn-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px var(--space-7);
  background: none;
  color: var(--text-secondary);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  font-size: var(--fs-lg);
  font-family: var(--font-main);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.checkout-btn-ghost:hover {
  color: var(--text-primary);
  background: var(--bg-surface-hover);
}

.checkout-actions {
  display: flex;
  gap: var(--space-5);
}

.checkout-resumo {
  background: var(--bg-surface-box);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.checkout-resumo-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  font-size: var(--fs-md);
}

.checkout-resumo-row span {
  color: var(--text-secondary);
  white-space: nowrap;
}

.checkout-resumo-row strong {
  color: var(--text-primary);
  font-weight: 500;
  text-align: right;
}

.checkout-resumo-row--promo strong { color: var(--status-success); }

.checkout-resumo-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-1) 0;
}

.checkout-desc {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.checkout-polling {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-4);
  animation: checkout-pulse 2s ease-in-out infinite;
}

@keyframes checkout-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.checkout-error {
  font-size: var(--fs-md);
  color: var(--status-error);
  background: var(--status-error-bg);
  border: 1px solid var(--status-error-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-5);
  margin: 0;
}

.checkout-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-7);
  text-align: center;
}

.checkout-success-icon {
  font-size: 40px;
  color: var(--status-success);
  line-height: 1;
}

/* Bloco de pagamento Pix (cobrança Asaas no checkout — Fase 4) */
.checkout-pix {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
}
.checkout-pix + .checkout-pix { margin-top: var(--space-4); }
.checkout-pix-valor { font-size: var(--fs-lg); color: var(--text-primary); }
.checkout-pix-qr {
  width: 200px;
  height: 200px;
  border-radius: var(--radius-sm);
  background: #fff;
}
.checkout-pix-code {
  width: 100%;
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-sm);
  word-break: break-all;
}

/* Escolha binária no checkout (sim/não, raiz/sub) — pills tocáveis (mobile) */
.checkout-choice {
  display: flex;
  gap: var(--space-3);
}
.checkout-choice-btn {
  flex: 1 1;
  padding: 9px 10px;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--fs-md);
  font-family: var(--font-main);
  cursor: pointer;
  text-align: center;
  transition: var(--transition-smooth);
}
.checkout-choice-btn:hover { color: var(--text-primary); }
.checkout-choice-btn.is-active {
  border-color: var(--brand-primary-border);
  background: var(--brand-primary-muted);
  color: var(--text-primary);
}

/* Configuração da LP (etapa 2) — card do que está sendo contratado */
.checkout-plano {
  background: var(--bg-surface-box);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.checkout-plano-nome {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.checkout-plano-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.checkout-plano-lista li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--fs-md);
  color: var(--text-secondary);
  line-height: 1.4;
}
.checkout-plano-lista li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--status-success);
  font-weight: 600;
}

/* Materiais (etapa 5) — textarea + input de arquivo */
.checkout-textarea {
  resize: vertical;
  min-height: 64px;
  line-height: 1.5;
  font-size: var(--fs-md);
}
.checkout-file {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  font-family: var(--font-main);
}
.checkout-file::file-selector-button {
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-family: var(--font-main);
  padding: 6px 12px;
  margin-right: var(--space-4);
  cursor: pointer;
  transition: var(--transition-smooth);
}
.checkout-file::file-selector-button:hover {
  border-color: var(--brand-primary-border);
}


/* ════════════════════════════════════════════════════════════════════════
   Grid View (docs/domains/grid) — tabela densa genérica estilo Teable.
   Padrão NOVO justificado: o sistema não tinha tabela linha×coluna. Tudo
   derivado de tokens existentes — dark · denso · borders-only · acento dinâmico.
   ════════════════════════════════════════════════════════════════════════ */

/* group-card como moldura da tabela: sem padding (tabela flush), preenche a
   altura disponível do .tarefas-master (flex:1) — padrão dos demais módulos. */
.grid-card {
  flex: 1 1;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 0;
}

.grid-scroll {
  flex: 1 1;
  min-height: 0;
  overflow: auto;
  padding-right: 0;
}

.grid-inner {
  width: max-content;
}

/* Header sticky — z-index acima das sombras de scroll do container (z-index:10)
   pra nunca ser escurecido por elas. */
.grid-head {
  display: grid;
  position: sticky;
  top: 0;
  z-index: 11;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-muted);
}

/* O container coop-tasks-scroll tem uma sombra-topo (::before) que escureceria o
   header opaco — desligada aqui (o header já fecha o topo). Em vez dela, uma
   sombra projetada SOB o header, só quando há conteúdo rolado pra cima. */
.cooperado-painel .grid-scroll::before,
.grid-scroll::before { display: none; }

/* Sombra de baixo: o `::after` genérico de .coop-tasks-scroll tem largura da VIEWPORT
   (ancorada em x=0 do conteúdo) → ao rolar na horizontal ela escorrega pra fora e
   "some" depois de um certo ponto. Desligamos aqui e usamos `.grid-inner::after`,
   que herda a largura total da tabela (`.grid-inner` é `width: max-content`), igual
   o header faz no topo. */
.cooperado-painel .grid-scroll::after,
.grid-scroll::after { display: none; }

.grid-inner::after {
  content: '';
  display: block;
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 48px;
  margin-top: -48px;
  background: linear-gradient(to top, var(--scroll-shadow-bg, var(--bg-surface)), transparent);
  z-index: 10;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.grid-scroll[data-scrolled-end] .grid-inner::after { opacity: 0; }
.grid-scroll:not([data-has-scroll]) .grid-inner::after { display: none; }

.grid-head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 48px;
  background: linear-gradient(to bottom, var(--scroll-shadow-bg, var(--bg-surface)), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.grid-scroll[data-scrolled-top] .grid-head::after { opacity: 1; }

.grid-head-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  border-right: 1px solid var(--border-subtle);
  overflow: hidden;
  position: relative;
}

.grid-head-icon { color: var(--text-muted); flex-shrink: 0; }
.grid-head-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Resizer de coluna: faixa na borda direita do header. Arraste = redimensiona;
   double-click = auto-fit ao conteúdo. Linha de acento só no hover/drag. */
.grid-col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  z-index: 2;
}
.grid-col-resizer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background: var(--brand-primary);
  opacity: 0;
  transition: opacity 120ms ease;
}
.grid-col-resizer:hover::after { opacity: 1; }

/* ── Altura de linha (row height, estilo Teable) ──
   "short" (default) = 1 linha, trunca. Níveis maiores quebram o conteúdo (wrap):
   texto com line-clamp crescente; pílulas (multi link/select) sempre quebram
   por completo (flex-wrap) pra mostrar todos os valores. min-height dá respiro. */
.grid-inner[data-row-height="medium"] .grid-row { min-height: 56px; }
.grid-inner[data-row-height="tall"] .grid-row { min-height: 88px; }
.grid-inner[data-row-height="extra"] .grid-row { min-height: 128px; }

.grid-inner:not([data-row-height="short"]) .grid-cell {
  align-items: flex-start;
  white-space: normal;
  overflow: visible;
}
.grid-inner:not([data-row-height="short"]) .field-badges {
  flex-wrap: wrap;
  overflow: visible;
}
.grid-inner:not([data-row-height="short"]) .grid-cell-text {
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.grid-inner[data-row-height="medium"] .grid-cell-text { -webkit-line-clamp: 2; }
.grid-inner[data-row-height="tall"] .grid-cell-text { -webkit-line-clamp: 4; }
.grid-inner[data-row-height="extra"] .grid-cell-text { display: block; }

/* Linhas */
.grid-row {
  display: grid;
  border-bottom: 1px solid var(--border-subtle);
  cursor: default;
  transition: background 120ms ease;
}
.grid-row[role="button"] { cursor: pointer; }
.grid-row:hover { background: var(--bg-surface-hover); }

.grid-cell {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-primary);
  border-right: 1px solid var(--border-subtle);
}

.grid-cell-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grid-cell-text--num {
  width: 100%;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.grid-cell-empty { color: var(--text-muted); }
.grid-cell-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: var(--status-success);
}

/* ── F3: edição inline ── */
.grid-cell-editable { cursor: text; }
.grid-cell-editable:hover { background: var(--bg-surface-hover); border-radius: var(--radius-sm); }
.grid-cell-empty.grid-cell-editable { cursor: pointer; }

/* Célula editável (wrapper) — cursor + hover sutil. */
.grid-cell-can { cursor: cell; }
.grid-cell-can:hover { background: var(--bg-surface-hover); }

/* Texto das células de display não é selecionável (evita highlight azul no arraste
   de seleção); só o editor inline permite seleção de texto. */
.grid-cell { -webkit-user-select: none; user-select: none; }
.grid-cell-editor { -webkit-user-select: text; user-select: text; }

/* ── Navegação tipo planilha: célula ativa (focada por teclado) ── */
.grid-cell.is-active {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
  position: relative;
  z-index: 5;
}
/* Seleção múltipla (range): só BORDA colorida no perímetro do trecho (box-shadow
   inset por lado, montado no GridCell) — sem fundo. z-index acima das bordas vizinhas. */
.grid-cell.is-sel-edge { position: relative; z-index: 4; }
/* Em edição a célula precisa liberar o clip (input/dropdown) e subir acima das vizinhas. */
.grid-cell.is-editing { overflow: visible; z-index: 60; }

/* Container da grade é focável (recebe o teclado) mas sem anel de foco próprio —
   o destaque visível é a célula ativa. */
.grid-scroll:focus,
.grid-scroll:focus-visible { outline: none; }

.grid-cell-check-btn {
  appearance: none; background: none; border: none; cursor: pointer;
}
.grid-cell-check-btn:disabled { cursor: default; }

.grid-cell-editor {
  width: 100%;
  font: inherit;
  font-size: 12px;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  outline: none;
}

/* Só a célula com dropdown ABERTO libera o clip (pro dropdown escapar) e sobe
   acima do header (z:11) e das vizinhas. Fechada, a célula clipa — senão as
   pílulas de uma célula com muitos itens encavalam sobre a coluna vizinha. */
.grid-cell:has(.dropdown-menu) { position: relative; z-index: 60; overflow: visible; }

/* Badges (multi link/select) preenchem a largura da célula e clipam o excesso;
   o fade à direita só "morde" quando há conteúdo cortado (sinaliza que há mais
   ao alargar a coluna). Desligado quando o dropdown está aberto. */
.grid-cell > .field-badges,
.grid-cell > .field-select-wrap { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.grid-cell > .field-select-wrap > .field-badges { width: 100%; }
.grid-cell:not(:has(.dropdown-menu)) .field-badges {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
}

/* Calha do botão de expandir registro (F4) */
.grid-head-gutter { padding: 0; border-right: 1px solid var(--border-subtle); }
.grid-row-expand {
  appearance: none; background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  border-right: 1px solid var(--border-subtle);
  opacity: 0;
  transition: opacity 120ms, color 120ms;
}
.grid-row:hover .grid-row-expand { opacity: 1; }
.grid-row-expand:hover { color: var(--brand-primary); }

/* Mobile/tablet: a visão geral legada vira scroll de PÁGINA (cooperado-painel
   height:auto, coop-tasks-scroll flex:none/overflow:visible). A Grid View é
   ferramenta full-screen e a virtualização exige um scroller de altura FIXA —
   então, só quando há `.grid-card`, re-amarramos a cadeia pra rolar internamente
   (igual ao desktop). `:has` já é usado em outros pontos do projeto. */
@media (max-width: 992px) {
  .cooperado-painel:has(.grid-card) { height: 100%; overflow: hidden; }
  .cooperado-painel:has(.grid-card) > main,
  .cooperado-painel:has(.grid-card) .coop-overview {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .cooperado-painel:has(.grid-card) .coop-overview { padding: 10px 8px; }
  .cooperado-painel:has(.grid-card) .grid-scroll {
    flex: 1 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── F4: modal genérico de registro ── */
.grid-record { padding: 4px 2px; }
.grid-record-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
  margin-bottom: 14px;
}
.grid-record-head-main { min-width: 0; }
.grid-record-delete {
  appearance: none; background: none; border: none; cursor: pointer;
  color: var(--text-muted); display: inline-flex; padding: 6px; border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.grid-record-delete:hover { color: var(--status-danger, #e5484d); background: var(--bg-surface-hover); }
.grid-record-table {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.grid-record-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 4px 0 0;
}
.grid-record-fields { display: flex; flex-direction: column; }
.grid-record-field {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.grid-record-label {
  font-size: 12px;
  color: var(--text-secondary);
  padding-top: 4px; /* alinha com a 1ª linha do valor */
  overflow-wrap: anywhere;
}
.grid-record-value {
  min-width: 0;
  font-size: 13px;
  display: flex;
  align-items: center;
  min-height: 26px; /* respiro consistente mesmo em campo vazio */
}
.grid-record-value .grid-cell-editor { max-width: 100%; width: 100%; }
/* No detalhe o valor QUEBRA linha (mostra inteiro) em vez de truncar como no
   grid — o `.grid-cell-text` inline não clipa fora de um flex. */
.grid-record-value .grid-cell-text {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}
/* Multi link/select no detalhe: quebra linha pra mostrar todos os valores. */
.grid-record-value .field-badges { flex-wrap: wrap; overflow: visible; }

/* F1 (grid create — modal de criação): marca visual do campo obrigatório vazio
   ao tentar submeter, no mesmo layout .grid-record-field do modal de detalhe. */
.grid-record-field--invalid .grid-record-label { color: var(--status-error); }
.grid-record-field--invalid .grid-record-value { background: var(--status-error-bg); border-radius: var(--radius-sm); }

/* F1: checkbox do form de criação precisa de moldura própria — na Grid o
   "desmarcado" fica só transparente porque a borda da célula já delimita a
   área; fora desse contexto (.grid-record-value) ficaria invisível. */
.grid-cell-check.criar-registro-checkbox {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
}


/* Header de grupo */
.grid-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  /* Indentação por nível de aninhamento (agrupamento encastelado). */
  padding-left: calc(10px + var(--g-depth, 0) * 22px);
  background: var(--bg-surface-box);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  position: sticky;
  left: 0;
}
/* Subgrupos (nível 2+) ficam subordinados: fundo mais discreto + título mais leve. */
.grid-group-header:not([data-depth="0"]) { background: var(--bg-surface); }
.grid-group-title { font-size: 12px; font-weight: 600; }
.grid-group-header:not([data-depth="0"]) .grid-group-title { font-size: 11px; font-weight: 500; }
.grid-group-count {
  font-size: 10px;
  color: var(--text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.grid-empty { padding: 24px; }

/* ── F1: pill ativa (colunas ocultas) ── */
.tarefas-master-pill.is-active {
  background: var(--filtro-cor-bg, var(--brand-primary-muted));
  color: var(--filtro-cor, var(--brand-primary));
}
.grid-cols-badge {
  font-size: 9px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  background: var(--brand-primary);
  color: #fff;
  border-radius: 999px;
  padding: 0 4px;
  margin-left: 2px;
}

/* ── F1: painel de colunas ── */
.grid-cols-panel-wrap, .grid-view-select-wrap { position: relative; display: inline-flex; }
.grid-cols-panel { min-width: 220px; padding: 8px; }
.grid-cols-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  padding: 2px 4px 8px;
}
.grid-cols-panel-actions { display: flex; gap: 8px; }
.grid-cols-panel-actions button {
  appearance: none; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 10px; color: var(--text-secondary);
  text-transform: none; letter-spacing: 0;
}
.grid-cols-panel-actions button:hover { color: var(--text-primary); }
.grid-cols-list { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; }
.grid-cols-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.grid-cols-item:hover { background: var(--bg-surface-hover); }
.grid-cols-item.is-over { border-color: var(--brand-primary); }
.grid-cols-item.is-dragging { opacity: 0.5; }
.grid-cols-grip { color: var(--text-muted); cursor: grab; flex-shrink: 0; }
.grid-cols-name {
  flex: 1 1; min-width: 0; font-size: 12px; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grid-cols-eye {
  appearance: none; background: none; border: none; cursor: pointer;
  color: var(--text-secondary); display: inline-flex; padding: 2px;
}
.grid-cols-eye:hover:not(:disabled) { color: var(--text-primary); }
.grid-cols-eye:disabled { color: var(--text-muted); opacity: 0.4; cursor: default; }

/* ── F1: seletor de views ── */
.grid-view-select-trigger { gap: 5px; }
.grid-view-select-label {
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grid-view-panel { min-width: 240px; padding: 6px; }
.grid-view-list { display: flex; flex-direction: column; }
.grid-view-empty { font-size: 11px; color: var(--text-muted); padding: 8px; }
.grid-view-item {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 4px; border-radius: var(--radius-sm);
}
.grid-view-item:hover { background: var(--bg-surface-hover); }
.grid-view-item.is-active { background: var(--bg-surface-box); }
.grid-view-name {
  appearance: none; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--text-primary);
  flex: 1 1; min-width: 0; text-align: left; display: flex; align-items: center; gap: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 5px 4px;
}
.grid-view-star.is-default { color: var(--brand-primary); flex-shrink: 0; }
.grid-view-rename {
  flex: 1 1; min-width: 0; font-size: 12px; padding: 4px 6px;
}
.grid-view-item-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 120ms; }
.grid-view-item:hover .grid-view-item-actions { opacity: 1; }
.grid-view-item-actions button {
  appearance: none; background: none; border: none; cursor: pointer;
  color: var(--text-muted); display: inline-flex; padding: 3px; border-radius: var(--radius-sm);
}
.grid-view-item-actions button:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-surface-hover); }
.grid-view-item-actions button:disabled { opacity: 0.3; cursor: default; }
.grid-view-new {
  appearance: none; cursor: pointer; font: inherit; font-size: 12px;
  display: flex; align-items: center; gap: 6px; width: 100%;
  margin-top: 4px; padding: 7px 6px;
  background: none; border: none; border-top: 1px solid var(--border-subtle);
  color: var(--brand-primary);
}
.grid-view-new:hover { background: var(--bg-surface-hover); }

/* Cabeçalho de grupo no FiltroSelect (ex: seletor de tabelas agrupado por base) */
.filtro-select-group {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 8px 10px 3px;
}
.filtro-select-group-block:first-child .filtro-select-group { padding-top: 2px; }

/* ── F2: painel de filtros ── */
.grid-filter-wrap { position: relative; display: inline-flex; }
.grid-filter-panel { min-width: 360px; max-width: 460px; padding: 8px; }

/* Painel de agrupamento (reusa a estrutura do filtro). Mais estreito; cada linha é
   um nível (rótulo + select do campo + remover). */
.grid-group-panel { min-width: 300px; max-width: 360px; }
.grid-group-row { flex-wrap: nowrap; }
.grid-group-level-label {
  flex: 0 0 78px;
  font-size: 11px;
  color: var(--text-muted);
}
.grid-group-row .grid-filter-select { flex: 1 1 auto; min-width: 0; }
/* Toggle recolher/expandir todos — neutro, separado do "adicionar nível" (brand). */
.grid-group-collapse { color: var(--text-secondary); }
.grid-filter-empty { font-size: 11px; color: var(--text-muted); padding: 6px 4px; }
.grid-filter-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 0;
  flex-wrap: wrap;
}
.grid-filter-select {
  appearance: none;
  font: inherit;
  font-size: 12px;
  color: var(--text-primary);
  background: var(--bg-surface-box);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  cursor: pointer;
  max-width: 130px;
}
.grid-filter-op { max-width: 110px; }
.grid-filter-input {
  flex: 1 1;
  min-width: 60px;
  font-size: 12px;
  padding: 5px 8px;
  height: 30px;
}
.grid-filter-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1; min-width: 0; }
.grid-filter-chip {
  appearance: none; cursor: pointer; font: inherit;
  font-size: 11px; padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-muted);
  background: var(--bg-surface-box);
  color: var(--text-secondary);
}
.grid-filter-chip.is-on {
  background: var(--brand-primary-muted);
  color: var(--brand-primary);
  border-color: transparent;
}
.grid-filter-remove {
  appearance: none; background: none; border: none; cursor: pointer;
  color: var(--text-muted); display: inline-flex; padding: 4px; border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.grid-filter-remove:hover { color: var(--text-primary); background: var(--bg-surface-hover); }
.grid-filter-add {
  appearance: none; cursor: pointer; font: inherit; font-size: 12px;
  display: flex; align-items: center; gap: 6px; width: 100%;
  margin-top: 6px; padding: 7px 6px;
  background: none; border: none; border-top: 1px solid var(--border-subtle);
  color: var(--brand-primary);
}
.grid-filter-add:hover { background: var(--bg-surface-hover); }

/* ── Chart-kit do Dashboard SaaS (Link Page) ──────────────────────────────
   Gráficos leves, CSS puro (sem lib): colunas via flex+height%, donut via
   conic-gradient, legenda compartilhada. Cor de série/segmento é dado →
   vem inline por CSS var; dimensões e tipografia ficam nas classes. */
.saas-bars { display: flex; align-items: flex-end; gap: 10px; height: 124px; }
.saas-bar-col { flex: 1 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.saas-bar-pair { flex: 1 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.saas-bar { flex: 1 1; max-width: 16px; min-height: 2px; border-radius: 2px 2px 0 0; transition: height 0.5s ease; }
.saas-bar-x { margin-top: 6px; font-size: var(--fs-xs); color: var(--text-muted); }

.saas-chart-row { display: flex; align-items: center; gap: var(--space-4); }
.saas-donut { width: 104px; height: 104px; border-radius: 50%; flex-shrink: 0;
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%);
          mask: radial-gradient(circle, transparent 54%, #000 55%); }

.saas-legend { flex: 1 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.saas-legend--row { flex: none; flex-direction: row; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.saas-legend-i { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-secondary); }
.saas-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.saas-legend-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saas-legend-v { margin-left: auto; padding-left: var(--space-3); color: var(--text-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.saas-track { display: flex; gap: 2px; height: 8px; width: 100%; background: var(--border-subtle); border-radius: 4px; overflow: hidden; }
.saas-track-seg { height: 100%; transition: width 0.5s ease; }

/* ── Módulo Agendamento — dashboard (calendário mês/semana/dia) ───────────────
   Padrão novo (calendário) composto dos tokens do design system: borders-only,
   acento dinâmico via --card-color, escala 9–13px. Doc: docs/domains/link-page/agendamento.md */
.ag-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 0 0 12px; }
.ag-nav { display: flex; align-items: center; gap: 6px; }
.ag-hoje { padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary); font-size: 11px; cursor: pointer; }
.ag-hoje:hover { border-color: var(--border-muted); }
.ag-periodo { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--text-primary); text-transform: capitalize; }
.ag-periodo-title { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: capitalize; letter-spacing: 0; }
.ag-cal-box { min-height: 320px; }
.ag-cal-scroll { max-height: calc(100vh / var(--html-zoom) - 300px); }
.ag-config-scroll { max-width: 760px; }

.ag-status { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 999px; border: 1px solid; white-space: nowrap; }

/* card da semana: altura ∝ duração (--ag-unit = 30min); cantoneira top-left na cor
   do status via .cantoneira-canto-tl (sem overflow:hidden, senão clipa o ::before). */
.ag-wchip { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; width: 100%; text-align: left; padding: 6px 8px 6px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-surface-raised); color: var(--text-primary); cursor: pointer; font: inherit; box-sizing: border-box; }
.ag-wchip:hover { border-color: var(--card-color); }
.ag-wchip--off { opacity: 0.45; text-decoration: line-through; }
.ag-wchip-time { font-size: 10px; font-weight: 700; color: var(--text-secondary); }
.ag-wchip-serv { font-size: 11px; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* cantoneira de tamanho FIXO (não 40% da altura) — cards da semana variam de altura */
.ag-wchip.cantoneira-canto-tl::before { width: 24px; height: 24px; max-width: 24px; }
.ag-wchip.cantoneira-canto-tl:hover::before { width: 40px; height: 40px; max-width: 40px; }

.ag-card { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--border-subtle); border-left: 3px solid var(--card-color); border-radius: var(--radius-md); background: var(--bg-surface-raised); color: var(--text-primary); cursor: pointer; font: inherit; }
.ag-card + .ag-card { margin-top: 8px; }
.ag-card:hover { border-color: var(--border-muted); border-left-color: var(--card-color); }
.ag-card--off { opacity: 0.5; }
.ag-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ag-card-time { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.ag-card-serv { font-size: 13px; font-weight: 500; }
.ag-card-nome { font-size: 11px; color: var(--text-muted); }

.ag-month { display: flex; flex-direction: column; }
.ag-month-head { display: grid; grid-template-columns: repeat(7, 1fr); padding-bottom: 6px; }
.ag-month-head span { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); text-align: center; }
.ag-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ag-month-cell { min-height: 58px; padding: 4px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.ag-month-cell:hover { border-color: var(--border-muted); }
.ag-month-cell--out { opacity: 0.35; }
.ag-month-cell--hoje { border-color: var(--card-color, var(--brand-primary)); }
.ag-month-num { font-size: 11px; color: var(--text-secondary); }
.ag-month-chips { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.ag-month-dot { width: 7px; height: 7px; border-radius: 999px; }
.ag-month-mais { font-size: 9px; color: var(--text-muted); }

.ag-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; --ag-unit: 26px; }
.ag-week-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ag-week-head { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); text-align: center; padding-bottom: 4px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.ag-week-col--hoje .ag-week-head { color: var(--card-color, var(--brand-primary)); border-bottom-color: var(--card-color, var(--brand-primary)); }
.ag-week-body { display: flex; flex-direction: column; gap: 4px; }
.ag-vazio { font-size: 10px; color: var(--text-muted); text-align: center; padding: 4px 0; }

.ag-day { display: flex; flex-direction: column; gap: 8px; }

.ag-kpis { margin-bottom: 4px; }
.ag-pend-box { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh / var(--html-zoom) - 320px); }
.ag-modal { gap: 14px; padding: 6px 2px; }
.ag-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ag-modal-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.ag-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

@media (max-width: 720px) {
  /* semana empilha (7 col fica intocável no celular); mês continua 7 col, menor */
  .ag-week { grid-template-columns: 1fr; }
  .ag-week-head { text-align: left; }
  .ag-week-body { padding-left: 4px; }
  .ag-month-cell { min-height: 44px; }
}

/* ── Agendamento dashboard: anexos + agendamento manual ─────────────────────── */
.ag-novo { margin-left: 4px; }
.ag-modal-anexos { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-modal-anexo { width: 64px; height: 64px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-subtle); display: block; }
.ag-modal-anexo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-modal-anexo-vid { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 22px; }
.ag-form { display: flex; flex-direction: column; gap: 12px; }
.ag-field { display: flex; flex-direction: column; gap: 4px; }
.ag-field > span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.ag-field .criar-nota-input { width: 100%; box-sizing: border-box; }
.ag-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Agendamento: assinar no calendário (feed iCal, F1) ─────────────────────── */
.ag-assinar-intro { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.ag-assinar-url {
  margin-top: 10px; padding: 8px 10px; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); font-family: ui-monospace, monospace;
  font-size: 11px; color: var(--text-secondary); word-break: break-all; -webkit-user-select: all; user-select: all;
}
.ag-assinar-help { margin-top: 14px; }
.ag-assinar-help .coop-info-meta-key { white-space: nowrap; }
.ag-assinar-warn { margin: 14px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }
.ag-assinar-rotate {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 11.5px; color: var(--text-muted);
}
.ag-assinar-rotate:hover { color: var(--text-secondary); }
.ag-assinar-rotate:disabled { opacity: 0.5; cursor: default; }

/* ── Store (E5): vitrine de aquisição (LP + Módulos Pro). Arquétipo de catálogo
   inexistente no design system; segue os tokens (borders-only, radius-md, escala). */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 6px;
}
.store-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: border-color .15s;
}
.store-card:hover { border-color: var(--border-muted); }
.store-card-head { display: flex; align-items: center; gap: 10px; }
.store-card-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  color: var(--card-color); font-size: 16px;
}
.store-card-titles { min-width: 0; }
.store-card-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.store-card-sub { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.store-card-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; margin: 0; flex: 1 1; }
.store-price { font-size: 12px; color: var(--text-secondary); flex: 1 1; }
.store-badge {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-sm);
}
.store-badge--ativo { color: var(--status-success); border: 1px solid var(--status-success); background: var(--status-success-bg); }
/* trial expirado/congelado (F3.1/D278a): warning — não é sucesso (verde é "ativo"). */
.store-badge--reativar { color: var(--status-warning); border: 1px solid var(--status-warning); background: var(--status-warning-bg); }
.store-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 11px; font-weight: 500; cursor: pointer;
  padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--card-color); background: var(--card-color); color: #fff;
  text-decoration: none; transition: opacity .15s;
}
.store-cta:hover { opacity: .88; }
.store-cta--ghost { background: transparent; color: var(--card-color); }
.store-cta--disabled { border-color: var(--border-subtle); background: transparent; color: var(--text-muted); cursor: default; }
.store-erro { font-size: 11px; color: var(--status-danger); margin-bottom: 8px; }
.store-vazio, .store-rodape { font-size: 11px; color: var(--text-muted); }
.store-rodape { margin-top: 16px; }

/* Store — checkout do Módulo Pro (E6): modal de pagamento Pix/cartão. */
.store-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.store-modal {
  position: relative; width: 100%; max-width: 380px;
  background: var(--bg-surface); border: 1px solid var(--border-muted);
  border-radius: var(--radius-md); padding: 24px;
  display: flex; flex-direction: column; gap: 12px; text-align: center;
}
.store-modal-x {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px;
  border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm);
}
.store-modal-x:hover { background: rgba(127,127,127,0.12); color: var(--text-primary); }
.store-modal-titulo { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.store-modal-resumo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.store-modal-resumo strong { color: var(--text-primary); }
.store-modal-metodos { display: flex; gap: 8px; }
.store-metodo {
  flex: 1 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary);
  font: inherit; font-size: 12px; font-weight: 500; transition: border-color .15s, color .15s;
}
.store-metodo.is-sel { border-color: var(--card-color); color: var(--card-color); }
.store-modal-nota { font-size: 11px; color: var(--text-muted); margin: 0; line-height: 1.4; }
.store-modal-nota a { color: var(--card-color); }
.store-pix-qr { width: 200px; height: 200px; align-self: center; border-radius: var(--radius-sm); background: #fff; padding: 6px; }
.store-modal-aguardando { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.store-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--border-muted); border-top-color: var(--card-color);
  animation: store-spin 0.8s linear infinite; display: inline-block;
}
@keyframes store-spin { to { transform: rotate(360deg); } }
.store-modal-ok { font-size: 40px; color: var(--status-success); line-height: 1; }

/* ── Atendente IA — view do painel (E7.4, D138) ─────────────────────────────
   Cérebro (persona + cards) + Anotações (agrupadas por tipo). Tokens existentes,
   borda como nos demais cards (sem box-shadow). */
.cooperado-painel .atd-hint {
  font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 10px;
}
/* Módulos da lateral (Créditos · Conexões · Persona · Cérebro): cada um =
   coop-section-title + group-card (a caixa). O group-card já dá borda/bg/padding
   e o espaçamento entre módulos (margin-bottom 15px); o conteúdo NÃO repete caixa. */
/* Créditos de IA (F2) — saldo visível, decrescente; cliente só vê. */
.cooperado-painel .atd-creditos--baixo { border-color: var(--card-color, var(--brand-primary)); }
.cooperado-painel .atd-creditos-top { display: flex; align-items: baseline; gap: 6px; }
.cooperado-painel .atd-creditos-saldo { font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); line-height: 1; }
.cooperado-painel .atd-creditos-unidade { font-size: var(--fs-xs); color: var(--text-muted); }
.cooperado-painel .atd-creditos-bar { height: 6px; border-radius: 999px; background: var(--border-subtle); overflow: hidden; margin: 8px 0 6px; }
.cooperado-painel .atd-creditos-fill { height: 100%; background: var(--card-color, var(--brand-primary)); border-radius: 999px; transition: width .3s ease; }
.cooperado-painel .atd-creditos-meta { font-size: var(--fs-xs); color: var(--text-muted); }
.cooperado-painel .atd-reabastecer { margin-top: 11px; }
/* Compra de créditos (F3) — seletor de pacotes no modal (store-modal*). */
.cooperado-painel .atd-pacotes { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
.cooperado-painel .atd-pacote {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--bg-surface); cursor: pointer; color: var(--text-primary); transition: border-color .15s ease;
}
.cooperado-painel .atd-pacote:hover { border-color: var(--border-muted); }
.cooperado-painel .atd-pacote.is-sel { border-color: var(--card-color, var(--brand-primary)); }
.cooperado-painel .atd-pacote-qtd { font-weight: 600; font-size: var(--fs-md); }
.cooperado-painel .atd-pacote-preco { font-weight: 600; color: var(--card-color, var(--brand-primary)); }
/* Conexões (Camada 2, F4a) — linhas dentro da caixa do módulo (sem caixa por linha). */
.cooperado-painel .atd-conexoes { display: flex; flex-direction: column; }
.cooperado-painel .atd-conexao { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cooperado-painel .atd-conexao + .atd-conexao { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.cooperado-painel .atd-conexao-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cooperado-painel .atd-conexao-nome { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: var(--fs-md); color: var(--text-primary); }
.cooperado-painel .atd-conexao-status { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--card-color, var(--brand-primary)); }
.cooperado-painel .atd-conexao-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }
.cooperado-painel .atd-conexao-vazio { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.45; }
.cooperado-painel .atd-switch {
  flex-shrink: 0; width: 42px; height: 24px; padding: 0; border: none; cursor: pointer;
  border-radius: 999px; background: var(--border-muted); position: relative; transition: background .2s ease;
}
.cooperado-painel .atd-switch--on { background: var(--card-color, var(--brand-primary)); }
.cooperado-painel .atd-switch:disabled { opacity: .5; cursor: default; }
.cooperado-painel .atd-switch-knob {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform .2s ease;
}
.cooperado-painel .atd-switch--on .atd-switch-knob { transform: translateX(18px); }
.cooperado-painel .atd-persona {
  display: flex; flex-direction: column; gap: 10px;
}
.cooperado-painel .atd-persona-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.cooperado-painel .atd-persona label { display: block; }
.cooperado-painel .atd-textarea { resize: vertical; min-height: 64px; font-family: inherit; }
.cooperado-painel .atd-textarea--modal { min-height: 180px; }

.cooperado-painel .atd-cards { display: flex; flex-direction: column; gap: 8px; }
.cooperado-painel .atd-card {
  display: flex; flex-direction: column; gap: 7px;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  transition: border-color .15s ease;
}
.cooperado-painel .atd-card:hover { border-color: var(--border-muted); }
/* Card compacto e clicável (abre no modal): título + preview do começo do texto. */
.cooperado-painel .atd-card--compacto { gap: 3px; padding: 9px 11px; cursor: pointer; }
.cooperado-painel .atd-card-titulo { font-weight: 600; font-size: var(--fs-md); color: var(--text-primary); }
.cooperado-painel .atd-card-conteudo { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.45; white-space: pre-wrap; }
.cooperado-painel .atd-card-preview {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Modal de edição do card de memória (CardModal): form rolável + ações. */
.cooperado-painel .atd-card-modal { display: flex; flex-direction: column; gap: 12px; }
.cooperado-painel .atd-card-modal label { display: flex; flex-direction: column; gap: 5px; }
.cooperado-painel .atd-card-modal-acoes { display: flex; gap: 8px; align-items: center; margin-top: 2px; }

.cooperado-painel .atd-vazio {
  font-size: var(--fs-sm); color: var(--text-muted);
  padding: 14px; border: 1px dashed var(--border-subtle); border-radius: var(--radius-sm);
}
/* Conversas (Rodada 6, D150) — lista de conversas; a anotação da IA fica
   FIXADA dentro do card; conversa com anotação pendente é destacada (cantoneira
   como nos nota-cards). Clicar abre o transcript no modal. */
.cooperado-painel .atd-conv-lista { display: flex; flex-direction: column; gap: 9px; }
.cooperado-painel .atd-conv-card {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; text-align: left;
  padding: 11px 13px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  cursor: pointer;
  transition: border-color .15s ease;
}
.cooperado-painel .atd-conv-card:hover { border-color: var(--border-muted); }
.cooperado-painel .atd-conv-card:focus-visible { outline: 2px solid var(--card-color, var(--brand-primary)); outline-offset: 1px; }
.cooperado-painel .atd-conv-card--anotada { border-color: var(--card-color, var(--brand-primary)); }
.cooperado-painel .atd-conv-card--anotada::before {
  content: ''; position: absolute; bottom: -1px; right: -1px;
  width: 45%; max-width: 160px; height: 32%;
  border-bottom: 1px solid var(--card-color, var(--border-muted));
  border-right: 1px solid var(--card-color, var(--border-muted));
  border-bottom-right-radius: inherit; pointer-events: none;
  transition: width .4s ease, height .4s ease;
}
.cooperado-painel .atd-conv-card--anotada:hover::before { width: 60%; height: 45%; }

.cooperado-painel .atd-conv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cooperado-painel .atd-conv-nome {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-md); font-weight: 600; color: var(--text-primary);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cooperado-painel .atd-conv-data { font-size: var(--fs-xs); color: var(--text-muted); flex-shrink: 0; }
.cooperado-painel .atd-conv-snippet {
  font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cooperado-painel .atd-conv-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); color: var(--text-muted); }
.cooperado-painel .atd-conv-foot > span { display: inline-flex; align-items: center; gap: 4px; }
.cooperado-painel .atd-conv-excluir { color: var(--text-muted); opacity: .6; }
.cooperado-painel .atd-conv-excluir:hover { opacity: 1; color: var(--status-danger, #cd2b39); }

/* Anotação fixada — no card da conversa e no topo do transcript (modal). */
.cooperado-painel .atd-conv-anotacao {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--card-color, var(--brand-primary)) 8%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--card-color, var(--brand-primary)) 30%, transparent);
}
.cooperado-painel .atd-conv-anotacao--modal { margin-bottom: 10px; }
.cooperado-painel .atd-conv-anotacao-txt { flex: 1 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; font-size: var(--fs-sm); }
.cooperado-painel .atd-conv-tag {
  flex-shrink: 0; font-size: var(--fs-xs); font-weight: 600; text-transform: capitalize;
  padding: 1px 7px; border-radius: 999px;
  color: var(--card-color, var(--brand-primary));
  background: color-mix(in srgb, var(--card-color, var(--brand-primary)) 15%, transparent);
}
.cooperado-painel .atd-conv-anotacao-assunto { color: var(--text-primary); }
.cooperado-painel .atd-conv-anotacao-resumo { flex-basis: 100%; font-size: var(--fs-xs); color: var(--text-muted); }
.cooperado-painel .atd-conv-anotacao-contato { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-xs); color: var(--text-muted); }

/* Transcript da conversa (dentro do CardModal) — bolhas user vs IA. */
.cooperado-painel .atd-transcript { display: flex; flex-direction: column; }
.cooperado-painel .atd-transcript-meta { display: flex; gap: 14px; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 10px; }
.cooperado-painel .atd-transcript-meta span { display: inline-flex; align-items: center; gap: 4px; }
.cooperado-painel .atd-bolhas { display: flex; flex-direction: column; gap: 8px; }
.cooperado-painel .atd-bolha {
  max-width: 82%; padding: 8px 11px; border-radius: var(--radius-md);
  font-size: var(--fs-sm); line-height: 1.45; white-space: pre-wrap; word-break: break-word;
}
.cooperado-painel .atd-bolha--user {
  align-self: flex-end; border-bottom-right-radius: 3px;
  background: color-mix(in srgb, var(--card-color, var(--brand-primary)) 14%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--card-color, var(--brand-primary)) 25%, transparent);
}
.cooperado-painel .atd-bolha--ia {
  align-self: flex-start; border-bottom-left-radius: 3px;
  background: var(--bg-hover); border: 1px solid var(--border-subtle);
}
/* Markdown leve das respostas da IA no viewer de conversas (RichText → .atd-md):
   negrito, listas com marcadores na cor da marca, espaçamento de parágrafo. NÃO usar
   flex em ul/ol — flex remove o ::marker (some bullet/número). */
.cooperado-painel .atd-bolha .atd-md { white-space: normal; }
.cooperado-painel .atd-bolha .atd-md p { margin: 0; }
.cooperado-painel .atd-bolha .atd-md > * + * { margin-top: 7px; }
.cooperado-painel .atd-bolha .atd-md strong { font-weight: 700; } /* ênfase NEUTRA */
.cooperado-painel .atd-bolha .atd-md em { font-style: italic; }
/* ==destaque== = único recurso na cor da marca (só apartes: duração/horário). */
.cooperado-painel .atd-bolha .atd-md .md-hl { color: var(--card-color, var(--brand-primary)); font-weight: 700; }
.cooperado-painel .atd-bolha .atd-md code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em;
  background: var(--bg-surface); padding: 1px 5px; border-radius: var(--radius-sm);
}
.cooperado-painel .atd-bolha .atd-md ul,
.cooperado-painel .atd-bolha .atd-md ol { margin: 0; padding-left: 1.4em; }
.cooperado-painel .atd-bolha .atd-md li { padding-left: 2px; }
.cooperado-painel .atd-bolha .atd-md li + li { margin-top: 4px; }
.cooperado-painel .atd-bolha .atd-md li::marker { color: var(--card-color, var(--brand-primary)); font-weight: 700; }

/* ── Módulo Agenda de shows/eventos (view do lojista) ──────────────── */
.cooperado-painel .agenda-col { max-width: 720px; margin: 0 auto; width: 100%; }
.cooperado-painel .agenda-secao-label {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted);
  margin: 14px 0 8px; letter-spacing: 0.02em;
}
.cooperado-painel .agenda-lista { display: flex; flex-direction: column; gap: 8px; }
.cooperado-painel .agenda-evento {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--bg-surface); transition: border-color .15s ease;
}
.cooperado-painel .agenda-evento:hover { border-color: var(--border-muted); }
.cooperado-painel .agenda-evento--muted { opacity: 0.6; }
.cooperado-painel .agenda-data {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 46px; padding: 5px 7px; line-height: 1;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
}
.cooperado-painel .agenda-data-dia { font-size: 18px; font-weight: 700; color: var(--card-color); }
.cooperado-painel .agenda-data-mes {
  font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); margin-top: 2px;
}
.cooperado-painel .agenda-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cooperado-painel .agenda-nome {
  font-weight: 600; font-size: var(--fs-md); color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cooperado-painel .agenda-meta {
  font-size: var(--fs-sm); color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cooperado-painel .agenda-tag {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
}
.cooperado-painel .agenda-tag--esgotado {
  background: color-mix(in srgb, var(--text-muted) 15%, transparent); color: var(--text-muted);
}
.cooperado-painel .agenda-tag--link { color: var(--card-color); }

/* ── Newsletter (gestão de inscritos — ClienteNewsletterView) ───────────── */
.cooperado-painel .nl-lista { display: flex; flex-direction: column; gap: 8px; }
.cooperado-painel .nl-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--bg-surface); transition: border-color .15s ease;
}
.cooperado-painel .nl-item:hover { border-color: var(--border-muted); }
.cooperado-painel .nl-item--off { opacity: 0.55; }
.cooperado-painel .nl-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cooperado-painel .nl-email {
  font-weight: 600; font-size: var(--fs-md); color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cooperado-painel .nl-meta {
  font-size: var(--fs-sm); color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cooperado-painel .nl-pill {
  flex: 0 0 auto; font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 2px 7px; border-radius: 999px; border: 1px solid;
  white-space: nowrap;
}
.cooperado-painel .nl-pill--ativo { color: var(--status-success); border-color: color-mix(in srgb, var(--status-success) 45%, transparent); }
.cooperado-painel .nl-pill--off { color: var(--text-muted); border-color: var(--border-muted); }
.cooperado-painel .nl-integra { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.cooperado-painel .nl-conectado { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--text-secondary); }
.cooperado-painel .nl-conectado .icon { color: var(--status-success); }
.cooperado-painel .nl-provs { display: flex; gap: 8px; }
.cooperado-painel .nl-msg { font-size: var(--fs-sm); margin: 0; }
.cooperado-painel .nl-msg--erro { color: var(--status-danger); }
.cooperado-painel .nl-msg--ok { color: var(--status-success); }
.cooperado-painel .nl-origem-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.cooperado-painel .nl-origem-key { font-size: var(--fs-sm); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cooperado-painel .nl-origem-val { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); flex: 0 0 auto; }

/* ── Vitrine (curadoria de produtos — ClienteVitrineView) ───────────────── */
.cooperado-painel .vitrine-lista { display: flex; flex-direction: column; gap: 8px; }
.cooperado-painel .vitrine-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 8px 12px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--bg-surface); transition: border-color .15s ease;
}
.cooperado-painel .vitrine-item:hover { border-color: var(--border-muted); }
.cooperado-painel .vitrine-item--off { opacity: 0.55; }
/* alvo de drop no drag-reorder da lista (cardápio, F5.2) — mesmo sinal do .over
   das células de mídia: só a borda muda, sem sombra. */
.cooperado-painel .vitrine-item.over { border-color: var(--card-color, var(--text-secondary)); }
.cooperado-painel .vitrine-thumb {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border-subtle); background: var(--bg-hover);
  display: flex; align-items: center; justify-content: center; color: var(--text-muted);
}
.cooperado-painel .vitrine-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cooperado-painel .vitrine-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cooperado-painel .vitrine-nome {
  font-weight: 600; font-size: var(--fs-md); color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cooperado-painel .vitrine-oculto { font-weight: 400; font-size: var(--fs-sm); color: var(--text-muted); }
.cooperado-painel .vitrine-sub {
  font-size: var(--fs-sm); color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cooperado-painel .vitrine-metrics { font-size: var(--fs-sm); color: var(--text-muted); }
.cooperado-painel .vitrine-dir { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cooperado-painel .vitrine-preco { font-weight: 700; font-size: var(--fs-md); color: var(--card-color); white-space: nowrap; }
.cooperado-painel .vitrine-badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--text-muted) 15%, transparent); color: var(--text-muted);
}

/* ── Cardápio · editor de grupos de opção (F5.3, D317) — dentro do CardModal do item.
   Padrão novo (editor aninhado), não coberto pelas classes existentes: só um card
   com borda por token (mesmo idioma do .vitrine-item) + layout das linhas de opção.
   Profundidade só por borda — sem box-shadow. Inputs/chips/botões reusam as classes
   existentes (.criar-nota-input / .vitrine-catchip / .btn). */
.cooperado-painel .cardapio-grupos { display: flex; flex-direction: column; gap: 10px; }
.cooperado-painel .cardapio-grupo {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--bg-surface); padding: 10px 12px;
}
.cooperado-painel .cardapio-grupo-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cooperado-painel .cardapio-grupo-nome { flex: 1 1 140px; min-width: 0; }
.cooperado-painel .cardapio-opcoes { display: flex; flex-direction: column; gap: 6px; }
.cooperado-painel .cardapio-opcao { display: flex; align-items: center; gap: 6px; }
.cooperado-painel .cardapio-opcao-nome { flex: 1 1 auto; min-width: 0; }
.cooperado-painel .cardapio-opcao-preco { flex: 0 0 90px; }
.cooperado-painel .cardapio-opcao-rm {
  flex: 0 0 auto; border: none; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 16px; line-height: 1; padding: 2px 6px;
}
.cooperado-painel .cardapio-opcao-rm:hover { color: var(--text-secondary); }

/* QR de conexão do bot Telegram (F5.5d) — só a imagem: já vive dentro do
   .group-card, que dá a caixa/borda. Sem box-shadow. */
.cooperado-painel .cardapio-telegram-qr {
  display: block; width: 160px; height: 160px;
  margin-top: 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
}

/* QR por mesa (F5.6, D318) — grade responsiva, 1 card por mesa. Sem box-shadow;
   profundidade só por borda, mesmo idioma do .cardapio-telegram-qr acima. */
.cooperado-painel .cardapio-mesas-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px; margin-top: 12px;
}
.cooperado-painel .cardapio-mesa-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--bg-surface); padding: 10px;
}
.cooperado-painel .cardapio-mesa-qr { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }

/* uploader de mídia (dentro do CardModal — tokens globais, sem escopo .cooperado-painel) */
.vitrine-media-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.vitrine-media-cell {
  position: relative; width: 72px; height: 72px; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border-muted); background: var(--bg-hover); cursor: grab;
}
.vitrine-media-cell.over { border-color: var(--text-secondary); }
.vitrine-media-cell.dragging { opacity: 0.5; }
.vitrine-media-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vitrine-media-vid { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.vitrine-media-tag {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); color: #fff;
}
.vitrine-media-first {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 2px 0; text-align: center;
  font-size: 9px; font-weight: 600; background: rgba(0, 0, 0, 0.6); color: #fff; letter-spacing: .3px;
}
.vitrine-media-rm {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  background: rgba(0, 0, 0, 0.6); color: #fff; cursor: pointer; font-size: 14px;
}
.vitrine-media-rm:hover { background: rgba(0, 0, 0, 0.82); }
.vitrine-media-add {
  width: 72px; height: 72px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px dashed var(--border-muted); background: transparent; color: var(--text-secondary);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-family: inherit; font-size: 11px; transition: border-color .15s ease, color .15s ease;
}
.vitrine-media-add:hover:not(:disabled) { border-color: var(--text-secondary); color: var(--text-primary); }
.vitrine-media-add:disabled { opacity: 0.6; cursor: default; }
.vitrine-erro { margin: 0; font-size: var(--fs-sm); color: #e0533d; }
.vitrine-upwrap { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.vitrine-uptext { font-size: var(--fs-sm); color: var(--text-secondary); }
.vitrine-upbar { height: 6px; border-radius: 999px; overflow: hidden; background: var(--bg-hover); }
.vitrine-upbar-fill {
  height: 100%; border-radius: 999px; background: var(--card-color, var(--brand-primary));
  transition: width .15s ease; min-width: 2px;
}
/* filtro de categoria (lista de produtos) + seletor de período (estatísticas) */
.cooperado-painel .vitrine-catfilter { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.cooperado-painel .vitrine-catchip {
  padding: 4px 11px; border-radius: 999px; cursor: pointer; font: inherit; font-size: var(--fs-sm);
  border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-secondary);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.cooperado-painel .vitrine-catchip:hover { color: var(--text-primary); border-color: var(--border-muted); }
.cooperado-painel .vitrine-catchip.on {
  background: color-mix(in srgb, var(--card-color) 16%, transparent);
  border-color: var(--card-color); color: var(--text-primary); font-weight: 600;
}
/* módulo de estatísticas */
.cooperado-painel .vitrine-stat-block { margin-top: 14px; }
.cooperado-painel .vitrine-stat-head { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.cooperado-painel .vitrine-stat-empty { font-size: var(--fs-sm); color: var(--text-muted); margin: 4px 0; }
.cooperado-painel .vitrine-stat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cooperado-painel .vitrine-stat-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-surface);
}
.cooperado-painel .vitrine-stat-pos {
  flex: 0 0 auto; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, var(--card-color) 18%, transparent); color: var(--text-primary);
}
.cooperado-painel .vitrine-stat-nome {
  flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cooperado-painel .vitrine-stat-n { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }

/* ── DateTimeField (Field Kit): trigger estilo input + popover calendário/hora ── */
.cooperado-painel .dtf-trigger {
  width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; text-align: left; cursor: pointer; font-family: inherit;
  border: 1px solid var(--border-muted); border-radius: var(--radius-sm);
  background: var(--bg-surface); color: var(--text-primary); font-size: var(--fs-md);
  transition: border-color .15s ease;
}
.cooperado-painel .dtf-trigger:hover { border-color: var(--dtf-accent); }
.cooperado-painel .dtf-trigger-icon { color: var(--dtf-accent); flex-shrink: 0; }
.cooperado-painel .dtf-trigger-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cooperado-painel .dtf-trigger-label--empty { color: var(--text-muted); }
.cooperado-painel .dtf-trigger-caret { color: var(--text-muted); flex-shrink: 0; }

.dtf-pop { width: 264px; max-width: 88vw; padding: 12px; }
.dtf-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dtf-cal-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); text-transform: capitalize; }
.dtf-nav {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-secondary); cursor: pointer;
  border-radius: var(--radius-sm); transition: background .15s ease, color .15s ease;
}
.dtf-nav:hover { background: var(--bg-hover); color: var(--text-primary); }
.dtf-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dtf-cal-dow { margin-bottom: 4px; }
.dtf-dow { text-align: center; font-size: var(--fs-xs, 11px); font-weight: 600; color: var(--text-muted); padding: 2px 0; }
.dtf-day {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent; color: var(--text-primary);
  font-size: var(--fs-sm); font-family: inherit; cursor: pointer; border-radius: var(--radius-sm);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.dtf-day:hover { background: var(--bg-hover); }
.dtf-day--blank { cursor: default; }
.dtf-day--today { border-color: var(--dtf-accent); color: var(--dtf-accent); font-weight: 600; }
.dtf-day--sel { background: var(--dtf-accent); color: #fff; border-color: var(--dtf-accent); font-weight: 600; }
.dtf-day--sel:hover { background: var(--dtf-accent); }

.dtf-time { display: flex; flex-direction: column; gap: 6px; }
.dtf-time--divided { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.dtf-time-label { display: flex; align-items: center; gap: 5px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }
.dtf-time-cols { display: flex; align-items: stretch; gap: 6px; justify-content: center; }
.dtf-time-col {
  display: flex; flex-direction: column; gap: 2px; width: 56px; max-height: 148px; overflow-y: auto;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 3px;
}
.dtf-time-sep { align-self: center; font-weight: 700; color: var(--text-muted); }
.dtf-time-opt {
  padding: 6px 0; text-align: center; border: none; background: transparent; color: var(--text-primary);
  font-size: var(--fs-sm); font-family: inherit; cursor: pointer; border-radius: var(--radius-sm);
  transition: background .12s ease, color .12s ease;
}
.dtf-time-opt:hover { background: var(--bg-hover); }
.dtf-time-opt--sel { background: var(--dtf-accent); color: #fff; font-weight: 600; }
.dtf-time-opt--sel:hover { background: var(--dtf-accent); }

/* ── Assistente (bot/agente-painel, F1) — superfície de CHAT nova, sem análogo
   nos módulos card-grid do design system (justifica classes próprias, ver
   design.md "zero classes novas sem justificativa"). Borders-only, tokens do
   sistema, zero box-shadow. Altura herda do shell coop-overview (flex:1). ── */
.assistente-shell {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 15px;
}
.assistente-rail {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 10px;
}
.assistente-rail-list {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.assistente-rail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--fs-md);
  cursor: pointer;
  text-align: left;
  transition: var(--transition-smooth);
}
.assistente-rail-item:hover { border-color: var(--border-muted); color: var(--text-primary); }
.assistente-rail-item--ativo {
  border-color: var(--brand-primary-border);
  color: var(--text-primary);
  background: var(--bg-surface-raised);
}
.assistente-rail-item-titulo {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assistente-rail-item-acao {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  opacity: 0;
  transition: var(--transition-smooth);
}
.assistente-rail-item:hover .assistente-rail-item-acao { opacity: 1; }
.assistente-rail-item-acao:hover { color: var(--text-primary); }
.assistente-main {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  overflow: hidden;
}
.assistente-stream {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.assistente-msg {
  max-width: 78%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: var(--fs-lg);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--border-subtle);
}
.assistente-msg--user {
  align-self: flex-end;
  background: var(--brand-primary-muted);
  border-color: var(--brand-primary-border);
  color: var(--text-primary);
}
.assistente-msg--assistant {
  align-self: flex-start;
  background: var(--bg-surface-raised);
  color: var(--text-primary);
}
.assistente-proposta {
  align-self: stretch;
  width: 100%;
  max-width: 78%;
}
.assistente-proposta-acoes { display: flex; gap: 8px; margin-top: 12px; }
.assistente-empty {
  margin: auto;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  text-align: center;
  max-width: 340px;
  line-height: 1.5;
}
.assistente-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border-subtle);
}
.assistente-composer textarea {
  flex: 1 1;
  resize: none;
  min-height: 38px;
  max-height: 160px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-lg);
  padding: 9px 10px;
  outline: none;
  transition: var(--transition-smooth);
}
.assistente-composer textarea:focus { border-color: var(--border-muted); }

@media (max-width: 768px) {
  .assistente-shell { flex-direction: column; }
  .assistente-rail { width: auto; max-height: 160px; }
  .assistente-msg, .assistente-proposta { max-width: 92%; }
}

/* ── Módulo Cardápio · fila do lojista (F4) ─────────────────────────────────
   Molde dos cards do Atendente (atd-conv-*): profundidade SÓ por borda, acento
   dinâmico por --card-color, sem box-shadow. Gap de lista via `+` (não gap no
   container). Ver docs/domains/link-page/cardapio.md (F4). */
.cooperado-painel .cardapio-vazio {
  font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; padding: 16px 4px;
}
/* F4.5 — badge de pedidos novos: pill acionável no acento --card-color, pulsa pra
   chamar atenção; sem box-shadow (profundidade só por borda/cor). Clicar reconhece. */
.cooperado-painel .cardapio-novos-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
  padding: 2px 9px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: normal; text-transform: none;
  color: #fff; background: var(--card-color, var(--brand-primary));
  border: 1px solid var(--card-color, var(--brand-primary));
  cursor: pointer;
  animation: cardapio-novos-pulse 1.6s ease-in-out infinite;
}
.cooperado-painel .cardapio-novos-badge:hover { filter: brightness(1.08); }
@keyframes cardapio-novos-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.62; }
}
@media (prefers-reduced-motion: reduce) {
  .cooperado-painel .cardapio-novos-badge { animation: none; }
}
.cooperado-painel .cardapio-fila-lista { display: flex; flex-direction: column; }
.cooperado-painel .cardapio-fila-lista > .cardapio-pedido + .cardapio-pedido { margin-top: 8px; }

.cooperado-painel .cardapio-pedido {
  position: relative;
  display: flex; flex-direction: column; gap: 7px;
  padding: 11px 13px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  transition: border-color .15s ease;
}
.cooperado-painel .cardapio-pedido:hover { border-color: var(--border-muted); }
/* pedido novo/pronto = precisa de ação do lojista (receber ou despachar/entregar) →
   acento --card-color (como atd-conv-card--anotada). preparo/saiu/concluido/cancelado
   ficam no --border-subtle default: já estão em andamento, sem ação pendente. */
.cooperado-painel .cardapio-pedido[data-status="novo"],
.cooperado-painel .cardapio-pedido[data-status="pronto"] { border-color: var(--card-color, var(--brand-primary)); }

.cooperado-painel .cardapio-pedido-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cooperado-painel .cardapio-pedido-tipo {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .02em;
}
.cooperado-painel .cardapio-pedido-status {
  display: inline-flex; align-items: center; flex-shrink: 0;
  font-size: var(--fs-xs); font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border-muted); color: var(--text-secondary);
}
.cooperado-painel .cardapio-pedido-status[data-status="novo"],
.cooperado-painel .cardapio-pedido-status[data-status="pronto"] {
  border-color: var(--card-color, var(--brand-primary));
  color: var(--card-color, var(--brand-primary));
}

.cooperado-painel .cardapio-pedido-cliente {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--fs-md); font-weight: 600; color: var(--text-primary);
}
.cooperado-painel .cardapio-pedido-fone {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted);
}

.cooperado-painel .cardapio-pedido-itens { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.cooperado-painel .cardapio-pedido-item { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-sm); }
.cooperado-painel .cardapio-pedido-item-nome { color: var(--text-primary); }
.cooperado-painel .cardapio-pedido-qtd { font-weight: 700; color: var(--card-color, var(--text-primary)); }
.cooperado-painel .cardapio-pedido-opts { font-size: var(--fs-xs); color: var(--text-secondary); padding-left: 14px; }
.cooperado-painel .cardapio-pedido-obs { font-size: var(--fs-xs); color: var(--text-muted); font-style: italic; padding-left: 14px; }

.cooperado-painel .cardapio-pedido-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 1px; font-size: var(--fs-xs); color: var(--text-muted);
}
.cooperado-painel .cardapio-pedido-hora { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cooperado-painel .cardapio-pedido-agendado { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); }
.cooperado-painel .cardapio-pedido-total { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); }

/* Resumo (coluna lateral) */
.cooperado-painel .cardapio-resumo { display: flex; flex-direction: column; gap: 6px; }
.cooperado-painel .cardapio-resumo-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--bg-surface);
}
.cooperado-painel .cardapio-resumo-linha[data-status="novo"] { border-color: var(--card-color, var(--brand-primary)); }
.cooperado-painel .cardapio-resumo-label { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--text-secondary); }
.cooperado-painel .cardapio-resumo-num { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); }
.cooperado-painel .cardapio-resumo-total {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 4px; padding: 9px 11px;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-sm); color: var(--text-secondary);
}
.cooperado-painel .cardapio-resumo-total strong { font-size: var(--fs-md); color: var(--text-primary); }

/* Links da operação (F4c.5) — cozinha/entrega por token, na lateral da view.
   Mesma linguagem do resumo (borda, --card-color, sem box-shadow). A URL quebra
   linha (é longa e tem que ser lida por inteiro antes de colar no tablet). */
.cooperado-painel .cardapio-links { display: flex; flex-direction: column; gap: 8px; }
.cooperado-painel .cardapio-link {
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 11px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--bg-surface);
}
.cooperado-painel .cardapio-link:hover { border-color: var(--border-muted); }
.cooperado-painel .cardapio-link-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cooperado-painel .cardapio-link-label { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--text-secondary); }
.cooperado-painel .cardapio-link-url {
  margin: 0; font-size: var(--fs-xs); color: var(--text-primary);
  word-break: break-all; line-height: 1.4;
}
.cooperado-painel .cardapio-link-hint { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.cooperado-painel .cardapio-link-btn {
  padding: 4px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-secondary); font-size: var(--fs-xs); cursor: pointer;
}
.cooperado-painel .cardapio-link-btn:hover { border-color: var(--card-color, var(--brand-primary)); color: var(--text-primary); }
.cooperado-painel .cardapio-link-btn:disabled { cursor: default; opacity: 0.6; }
.cooperado-painel .cardapio-link-btn--perigo { border-color: var(--card-color, var(--brand-primary)); color: var(--text-primary); }
.cooperado-painel .cardapio-link-regen {
  align-self: flex-start; padding: 0; border: none; background: transparent;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); color: var(--text-muted); cursor: pointer;
}
.cooperado-painel .cardapio-link-regen:hover { color: var(--text-secondary); }
.cooperado-painel .cardapio-link-confirma {
  display: flex; flex-direction: column; gap: 7px;
  font-size: var(--fs-xs); color: var(--text-secondary);
}
.cooperado-painel .cardapio-link-confirma-acoes { display: flex; gap: 6px; }
.cooperado-painel .cardapio-links-erro { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* Modal de detalhe do pedido (F4.3) — pareado com o card. Mesma linguagem visual
   (borda, acento --card-color, sem box-shadow). Renderiza sob .cooperado-painel. */
.cooperado-painel .cardapio-modal { display: flex; flex-direction: column; gap: 13px; }
.cooperado-painel .cardapio-modal-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.cooperado-painel .cardapio-modal-sec { display: flex; flex-direction: column; gap: 6px; }
.cooperado-painel .cardapio-modal-contato {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px;
  font-size: var(--fs-md); color: var(--text-primary);
}
.cooperado-painel .cardapio-modal-contato span { display: inline-flex; align-items: center; gap: 5px; }
.cooperado-painel .cardapio-modal-endereco {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.45;
}
.cooperado-painel .cardapio-modal-endereco em { color: var(--text-muted); font-style: italic; }

.cooperado-painel .cardapio-modal-itens {
  display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px 0;
  list-style: none; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
}
.cooperado-painel .cardapio-modal-item { display: flex; flex-direction: column; gap: 2px; }
.cooperado-painel .cardapio-modal-item-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cooperado-painel .cardapio-modal-item-nome { font-size: var(--fs-md); color: var(--text-primary); }
.cooperado-painel .cardapio-modal-item-preco { flex-shrink: 0; font-size: var(--fs-sm); color: var(--text-secondary); }

.cooperado-painel .cardapio-modal-obs-geral {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--fs-sm); color: var(--text-secondary); font-style: italic;
}

.cooperado-painel .cardapio-modal-valores { display: flex; flex-direction: column; gap: 5px; }
.cooperado-painel .cardapio-modal-valor-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: var(--fs-sm); color: var(--text-secondary);
}
.cooperado-painel .cardapio-modal-valor-linha span { display: inline-flex; align-items: center; gap: 5px; }
.cooperado-painel .cardapio-modal-valor-total {
  margin-top: 3px; padding-top: 8px; border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-md); color: var(--text-primary);
}
.cooperado-painel .cardapio-modal-pagamento {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 3px;
  font-size: var(--fs-sm); color: var(--text-secondary);
}

.cooperado-painel .cardapio-modal-tempo {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px;
  font-size: var(--fs-xs); color: var(--text-muted);
}
.cooperado-painel .cardapio-modal-tempo span { display: inline-flex; align-items: center; gap: 5px; }
.cooperado-painel .cardapio-modal-agendado { color: var(--text-secondary); }

.cooperado-painel .cardapio-modal-acoes {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 2px; padding-top: 13px; border-top: 1px solid var(--border-subtle);
}
/* CTA de avançar = acento dinâmico da marca (--card-color), não brand fixo */
.cooperado-painel .cardapio-modal-avancar {
  background: var(--card-color, var(--brand-primary));
  border-color: var(--card-color, var(--brand-primary));
  color: var(--surface-on-accent);
}
.cooperado-painel .cardapio-modal-avancar:hover {
  background: var(--card-color, var(--brand-primary));
  border-color: var(--card-color, var(--brand-primary));
  color: var(--surface-on-accent);
}
.cooperado-painel .cardapio-modal-cancelar { align-self: flex-start; color: var(--text-muted); }
.cooperado-painel .cardapio-modal-cancelar:hover { color: var(--status-danger, #d33); border-color: var(--status-danger, #d33); }
.cooperado-painel .cardapio-modal-confirmar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: var(--fs-sm); color: var(--text-secondary);
}

/* Imprimir comanda (F4.6) — escolha de largura térmica + botão. Ações secundárias
   do modal (o CTA de status manda; isto é rodapé). */
.cooperado-painel .cardapio-modal-imprimir {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 2px;
}
.cooperado-painel .cardapio-modal-larguras { display: inline-flex; gap: 0; }
.cooperado-painel .cardapio-modal-largura {
  padding: 4px 9px;
  font-size: var(--fs-xs); color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
}
.cooperado-painel .cardapio-modal-largura:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.cooperado-painel .cardapio-modal-largura:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: none; }
.cooperado-painel .cardapio-modal-largura:hover { border-color: var(--border-muted); }
.cooperado-painel .cardapio-modal-largura[aria-pressed="true"] {
  color: var(--surface-on-accent);
  background: var(--card-color, var(--brand-primary));
  border-color: var(--card-color, var(--brand-primary));
}

/* A comanda é portalizada num nó filho de <body> (irmão do app), INVISÍVEL na
   tela — só o @media print a revela. */
.cardapio-comanda-root { display: none; }

/* ── Impressão: esconde o app inteiro e mostra só a comanda térmica ──
   Usa display:none no app (não visibility) — o Chromium NÃO aplica
   visibility:hidden via `body *` a <button>/form controls, então eles vazavam
   pra impressão; display:none remove da render tree e não deixa quirk. A comanda
   fica num nó irmão do app (portal), preservado pelo :not(). Largura fixa 58/80mm
   (--comanda-w, inline), monoespaçada, P&B (térmica é preto-e-branco).

   O hijack fica sob `body:has(.cardapio-comanda-root)`: o nó da comanda só existe
   no DOM enquanto o ClienteModalPedido está aberto (ComandaPedido portaliza pra
   body). Fora do Cardápio esse nó não existe, então imprimir qualquer outra tela
   (repasse, contrato, tarefa) segue normal — sem `:has`, o `display:none` no app
   valia pra QUALQUER página e ela saía em branco (PRINT-1). */
@media print {
  body:has(.cardapio-comanda-root) { background: #fff !important; overflow: visible !important; }
  body:has(.cardapio-comanda-root) > *:not(.cardapio-comanda-root) { display: none !important; }
  .cardapio-comanda-root { display: block; }

  /* named page: margem 0 só na comanda — sem isso o `@page` global tirava a
     margem de QUALQUER impressão do painel (PRINT-1). */
  @page cardapio-comanda { margin: 0; }

  .cardapio-comanda {
    page: cardapio-comanda;
    width: var(--comanda-w, 80mm);
    padding: 4mm 3mm;
    zoom: 1;
    color: #000; background: #fff;
    font-family: "Courier New", ui-monospace, monospace;
    font-size: 12px; line-height: 1.35;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .cardapio-comanda-cab {
    display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
    font-weight: 700; font-size: 15px;
  }
  .cardapio-comanda-num { font-size: 13px; }
  .cardapio-comanda-meta { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; font-size: 11px; }
  .cardapio-comanda-tipo { font-weight: 700; text-transform: uppercase; }
  .cardapio-comanda-sep { border-top: 1px dashed #000; margin: 5px 0; }
  .cardapio-comanda-cliente { display: flex; flex-direction: column; gap: 1px; }
  .cardapio-comanda-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
  .cardapio-comanda-item { display: flex; flex-direction: column; gap: 1px; }
  .cardapio-comanda-item-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-weight: 700; }
  .cardapio-comanda-item-preco { flex-shrink: 0; }
  .cardapio-comanda-item-opts,
  .cardapio-comanda-item-obs { padding-left: 12px; font-size: 11px; font-weight: 400; }
  .cardapio-comanda-obs { font-size: 11px; }
  .cardapio-comanda-valores { display: flex; flex-direction: column; gap: 2px; }
  .cardapio-comanda-vlinha { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
  .cardapio-comanda-total { margin-top: 3px; padding-top: 3px; border-top: 1px solid #000; font-weight: 700; font-size: 14px; }
  .cardapio-comanda-pag { margin-top: 4px; font-size: 11px; }
}