/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Inter","arguments":[{"subsets":["latin"],"variable":"--font-inter","display":"swap"}],"variableName":"inter"} ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: '__Inter_f367f3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Inter_f367f3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: '__Inter_f367f3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: '__Inter_f367f3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: '__Inter_f367f3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Inter_f367f3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Inter_f367f3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Inter_Fallback_f367f3';src: local("Arial");ascent-override: 90.49%;descent-override: 22.56%;line-gap-override: 0.00%;size-adjust: 107.06%
}.__className_f367f3 {font-family: '__Inter_f367f3', '__Inter_Fallback_f367f3';font-style: normal
}.__variable_f367f3 {--font-inter: '__Inter_f367f3', '__Inter_Fallback_f367f3'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/* ==========================================================================
   Claude ML — Design System
   Paleta: navy para titulos/destaque, azul como cor primaria de acao (botoes,
   links, item ativo da sidebar). Cada modulo tem uma cor de "acento" PROPRIA
   (azul, roxo, ambar, verde, laranja) usada so em icones/badges de card para
   escaneabilidade — nao e a cor primaria do sistema. Convencao de status
   (verde=ok, ambar=atencao, vermelho=critico) mantida em todo o app.
   ========================================================================== */

:root {
  /* Superficie / fundo */
  --color-bg: #f3f5fa;
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafc;
  --color-border: #e5e9f0;
  --color-border-strong: #d7dce6;

  /* Texto */
  --color-navy: #101a33;
  --color-text: #1a2236;
  --color-text-muted: #667085;
  --color-text-faint: #98a2b3;

  /* Cor primaria de acao (botoes, links, item ativo) */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-soft: #eaf1ff;
  --color-primary-soft-strong: #d7e6fe;

  /* Convencao de status — mantida em todo o sistema */
  --color-success: #16a34a;
  --color-success-bg: #dcfce7;
  --color-error: #dc2626;
  --color-error-bg: #fee2e2;
  --color-warning: #d97706;
  --color-warning-bg: #fef3c7;

  /* Acentos de MODULO — usados so em icones/badges dos cards, nunca como cor
     primaria de acao. */
  --accent-blue: #2563eb;
  --accent-blue-bg: #e8f0fe;
  --accent-purple: #7c3aed;
  --accent-purple-bg: #f2ebfe;
  --accent-amber: #d97706;
  --accent-amber-bg: #fef3e2;
  --accent-green: #16a34a;
  --accent-green-bg: #e5f8ec;
  --accent-orange: #ea580c;
  --accent-orange-bg: #fef0e6;
  --accent-gray: #667085;
  --accent-gray-bg: #eef1f5;
  --accent-teal: #0d9488;
  --accent-teal-bg: #e1f5f2;

  --sidebar-width: 250px;
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(16, 26, 51, 0.04);
  --shadow-sm: 0 1px 3px rgba(16, 26, 51, 0.06), 0 1px 2px rgba(16, 26, 51, 0.04);
  --shadow-md: 0 8px 24px rgba(16, 26, 51, 0.08);

  --font-sans: var(--font-inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
}

/* --- Tema escuro -----------------------------------------------------------
   Inversao coerente da mesma paleta: fundo escuro navy/cinza-azulado, texto
   claro, mesmos acentos de modulo e a mesma convencao verde/ambar/vermelho de
   status (com fundo translucido em vez de solido, para manter contraste
   sobre superficies escuras). Aplicado via atributo `data-theme="dark"` na
   tag <html> — setado o mais cedo possivel por um script inline (ver
   layout.tsx) para nao "piscar" o tema claro antes de hidratar. */
:root[data-theme='dark'] {
  --color-bg: #0b1120;
  --color-surface: #131b2e;
  --color-surface-muted: #1a2338;
  --color-border: #26314a;
  --color-border-strong: #34405c;

  --color-navy: #f3f5fb;
  --color-text: #e4e8f2;
  --color-text-muted: #93a0b8;
  --color-text-faint: #6b7891;

  --color-primary: #4f8cff;
  --color-primary-hover: #6ea1ff;
  --color-primary-soft: rgba(79, 140, 255, 0.16);
  --color-primary-soft-strong: rgba(79, 140, 255, 0.26);

  --color-success: #34d399;
  --color-success-bg: rgba(52, 211, 153, 0.16);
  --color-error: #f87171;
  --color-error-bg: rgba(248, 113, 113, 0.16);
  --color-warning: #fbbf24;
  --color-warning-bg: rgba(251, 191, 36, 0.16);

  --accent-blue: #60a5fa;
  --accent-blue-bg: rgba(96, 165, 250, 0.16);
  --accent-purple: #b39dfb;
  --accent-purple-bg: rgba(179, 157, 251, 0.18);
  --accent-amber: #fbbf24;
  --accent-amber-bg: rgba(251, 191, 36, 0.16);
  --accent-green: #4ade80;
  --accent-green-bg: rgba(74, 222, 128, 0.16);
  --accent-orange: #fb923c;
  --accent-orange-bg: rgba(251, 146, 60, 0.16);
  --accent-gray: #93a0b8;
  --accent-gray-bg: rgba(147, 160, 184, 0.14);
  --accent-teal: #2dd4bf;
  --accent-teal-bg: rgba(45, 212, 191, 0.16);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
}

:root[data-theme='dark'] .btn:disabled {
  background: #2c3c63;
  color: #7c8aa8;
}

:root[data-theme='dark'] .login-page {
  background:
    radial-gradient(circle at 15% 10%, rgba(79, 140, 255, 0.14), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(179, 157, 251, 0.1), transparent 45%),
    var(--color-bg);
}

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

/* --- Shell / layout geral ------------------------------------------------ */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-surface);
  color: var(--color-text);
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-border);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 20px 18px;
  font-weight: 700;
  font-size: 16px;
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 12px;
}

/* --- Logo da marca (Bastil) — troca claro/escuro 100% via CSS -------------- */

.brand-logo {
  display: inline-flex;
  align-items: center;
}

.brand-logo-img {
  display: block;
  object-fit: cover;
  object-position: center;
}

.brand-logo--sidebar .brand-logo-img {
  width: 210px;
  height: 48px;
}

.brand-logo--login .brand-logo-img {
  width: 220px;
  height: 48px;
}

.brand-logo-dark {
  display: none;
}

:root[data-theme='dark'] .brand-logo-light {
  display: none;
}

:root[data-theme='dark'] .brand-logo-dark {
  display: block;
}

.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 4px 12px;
  flex: 1 1;
  overflow-y: auto;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: background 0.12s ease, color 0.12s ease;
}

.sidebar-link:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.sidebar-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

.sidebar-link-label {
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-link.active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 700;
}

.sidebar-link.active:hover {
  background: var(--color-primary-soft-strong);
}

.sidebar-link.disabled {
  color: var(--color-text-faint);
  cursor: default;
}

.sidebar-link.disabled:hover {
  background: transparent;
  color: var(--color-text-faint);
}

.sidebar-link.disabled .sidebar-link-icon {
  opacity: 0.5;
}

.sidebar-group {
  list-style: none;
}

.sidebar-group-header {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.sidebar-group-chevron {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--color-text-faint);
  font-size: 15px;
  transition: transform 0.15s ease;
}

.sidebar-group-chevron.open {
  transform: rotate(90deg);
}

.sidebar-group-children {
  list-style: none;
  margin: 0 0 2px;
  padding: 0;
}

.sidebar-link-child {
  padding-left: 34px;
  font-size: 13.5px;
}

.sidebar-link-child .sidebar-link-icon {
  width: 16px;
  font-size: 13px;
}

.badge-soon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--accent-gray-bg);
  color: var(--color-text-muted);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

.sidebar-footer {
  padding: 14px 20px 0;
  margin: 8px 12px 0;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--color-text-muted);
}

.sidebar-footer strong {
  color: var(--color-text);
}

.sidebar-footer button {
  margin-top: 10px;
  width: 100%;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.sidebar-footer button:hover {
  background: var(--color-border);
}

.sidebar-footer-user {
  margin-bottom: 6px;
}

.sidebar-pin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

.sidebar-footer .sidebar-pin-switch {
  flex-shrink: 0;
  width: 34px;
  height: 19px;
  margin-top: 0;
  padding: 2px;
  background: var(--color-border-strong);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease;
}

.sidebar-footer .sidebar-pin-switch.on {
  background: var(--color-primary);
}

.sidebar-pin-switch-thumb {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}

.sidebar-pin-switch.on .sidebar-pin-switch-thumb {
  transform: translateX(15px);
}

/* --- Sidebar recolhivel (interruptor "Fixar menu") -------------------------
   A sidebar passa a ser `position: fixed` SEMPRE (fixa ou recolhida) — o
   `.main-content` reserva o espaco certo via margin-left, desacoplado do
   estado de hover da sidebar. Recolhida, a sidebar fica so com os icones
   (68px); ao passar o mouse ela expande por CIMA do conteudo (overlay, com
   sombra), sem empurrar o `.main-content` — exatamente como referencia de
   sidebars "mini variant" de ERPs (ex.: Olist). */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 40;
  transition: width 0.18s ease, box-shadow 0.18s ease;
}

.sidebar-collapsed {
  width: 68px;
}

.sidebar-collapsed:hover {
  width: var(--sidebar-width);
  box-shadow: var(--shadow-md);
}

.sidebar-collapsed .sidebar-brand,
.sidebar-collapsed .sidebar-link-label,
.sidebar-collapsed .sidebar-group-chevron,
.sidebar-collapsed .badge-soon,
.sidebar-collapsed .sidebar-group-children,
.sidebar-collapsed .sidebar-footer-label {
  display: none;
}

.sidebar-collapsed:hover .sidebar-brand,
.sidebar-collapsed:hover .sidebar-link-label,
.sidebar-collapsed:hover .sidebar-group-chevron,
.sidebar-collapsed:hover .badge-soon,
.sidebar-collapsed:hover .sidebar-group-children,
.sidebar-collapsed:hover .sidebar-footer-label {
  display: revert;
}

.sidebar-collapsed .sidebar-pin-row {
  justify-content: center;
}

.sidebar-collapsed .sidebar-link {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.sidebar-collapsed:hover .sidebar-link {
  justify-content: flex-start;
  padding-left: 12px;
  padding-right: 12px;
}

.main-content {
  flex: 1 1;
  margin-left: var(--sidebar-width);
  padding: 32px 40px 48px;
  max-width: 100%;
  overflow-x: auto;
  transition: margin-left 0.18s ease;
}

.main-content-sidebar-collapsed {
  margin-left: 68px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: -0.01em;
}

.page-header p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
  max-width: 720px;
  line-height: 1.5;
}

/* --- Componentes reutilizaveis -------------------------------------------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-xs);
}

.card h2 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.btn:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-sm);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  background: #aac0ec;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  box-shadow: none;
}

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

.btn-danger {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error-bg);
  box-shadow: none;
}

.btn-danger:hover {
  background: var(--color-error);
  color: #fff;
}

.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}

.form-group input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--color-surface);
  color: var(--color-text);
}

.form-group input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
  border-color: var(--color-primary);
}

/* Mesmo visual de `.form-group input` — adicionado na tarefa "Duplicar
   anuncios" (Gestao de Anuncios) para os dropdowns "Conta de destino"/"Tipo
   de anuncio" do formulario do topo, mas generico o bastante para qualquer
   outro form-group com select no futuro. */
.form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--color-surface);
  color: var(--color-text);
}

.form-group select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
  border-color: var(--color-primary);
}

/* --- Login ---------------------------------------------------------------- */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 15% 10%, rgba(37, 99, 235, 0.10), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(124, 58, 237, 0.08), transparent 45%),
    var(--color-bg);
  padding: 24px;
}

.login-box {
  width: 380px;
  max-width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: var(--shadow-md);
}

.login-box-mark {
  margin-bottom: 18px;
}

.login-box h1 {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.login-box p {
  margin: 0 0 24px;
  color: var(--color-text-muted);
  font-size: 14px;
}

/* --- Alertas ---------------------------------------------------------------- */

.alert {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.5;
}

.alert-error {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.alert-success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.alert-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

/* --- Status pill (convencao: verde=ok, ambar=atencao, vermelho=critico) --- */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
}

.status-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-connected {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.status-pending {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.status-error,
.status-disconnected {
  background: var(--color-error-bg);
  color: var(--color-error);
}

/* Cinza/neutro — "sem dado" ou informativo (nunca "ruim"), ex. Checklist de
   qualidade do anuncio (bolinha cinza: estoque, sem avaliacao, Ads/foto
   sem dado confirmado ainda). */
.status-neutral {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

/* Bolinha (sem texto dentro, diferente de .status-pill) da lista vertical do
   Checklist de qualidade do anuncio — MESMAS cores/tokens de .status-pill
   acima (--color-success/--color-error/--color-text-muted), so num circulo
   solido em vez de pilula com texto (layout de lista, nao de badge). */
.quality-checklist-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: currentColor;
}

.quality-checklist-dot.tone-ok {
  color: var(--color-success);
}

.quality-checklist-dot.tone-alerta {
  color: var(--color-error);
}

.quality-checklist-dot.tone-neutro {
  color: var(--color-text-muted);
}

.quality-checklist-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.quality-checklist-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}

.quality-checklist-list li:last-child {
  border-bottom: none;
}

.quality-checklist-helper {
  color: var(--color-text-muted);
  font-size: 12px;
}

/* --- Tabela ----------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  text-align: left;
  padding: 13px 14px;
  border-bottom: 1px solid var(--color-border);
}

th {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

th:first-child {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}

th:last-child {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

tbody tr:hover {
  background: var(--color-surface-muted);
}

tbody tr:last-child td {
  border-bottom: none;
}

.empty-state {
  color: var(--color-text-muted);
  font-size: 14px;
  padding: 32px 0;
  text-align: center;
}

.loading-text {
  color: var(--color-text-muted);
  font-size: 14px;
}

/* --- Cards de diagnostico do Checklist (Fase 2) -------------------------- */

.diagnostics-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.diagnostic-card {
  flex: 1 1 170px;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.diagnostic-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.diagnostic-card-badge {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.diagnostic-card-badge-red {
  background: var(--color-error-bg);
}

.diagnostic-card-badge-amber {
  background: var(--accent-amber-bg);
}

.diagnostic-card-badge-orange {
  background: var(--accent-orange-bg);
}

.diagnostic-card-badge-purple {
  background: var(--accent-purple-bg);
}

.diagnostic-card-badge-green {
  background: var(--accent-green-bg);
}

.diagnostic-card-badge-blue {
  background: var(--accent-blue-bg);
}

.diagnostic-card-badge-gray {
  background: var(--accent-gray-bg);
}

.diagnostic-card-body {
  min-width: 0;
}

.diagnostic-card-count {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-navy);
}

.diagnostic-card-label {
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin-top: 2px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.diagnostic-card-critical.active {
  border-color: var(--color-error);
  background: var(--color-error-bg);
}

.diagnostic-card-critical.active .diagnostic-card-count {
  color: var(--color-error);
}

.diagnostic-card-warning.active {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
}

.diagnostic-card-warning.active .diagnostic-card-count {
  color: var(--color-warning);
}

.diagnostic-card-success.active {
  border-color: var(--color-success);
  background: var(--color-success-bg);
}

.diagnostic-card-success.active .diagnostic-card-count {
  color: var(--color-success);
}

.diagnostics-note {
  font-size: 12px;
  color: var(--color-text-faint);
  margin: 0 0 20px;
}

/* --- Painel de filtros adicionais do Checklist (vendas / envio) --------- */

.checklist-filters-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 16px;
  padding: 14px 18px;
}

.checklist-filters-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.checklist-filters-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-right: 2px;
}

.filter-chip {
  font-family: inherit;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.filter-chip:hover {
  border-color: var(--color-primary);
}

.filter-chip.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

/* --- Checklist de Anuncios (Fase 2) ------------------------------------- */

.checklist-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.checklist-search {
  flex: 1 1;
  min-width: 240px;
  padding: 10px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--color-surface);
  color: var(--color-text);
}

.checklist-search:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
  border-color: var(--color-primary);
}

.checklist-toolbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.checklist-total {
  color: var(--color-text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.columns-config {
  position: relative;
}

.columns-config-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: var(--shadow-md);
  z-index: 10;
  min-width: 180px;
}

.columns-config-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 5px 0;
  cursor: pointer;
  white-space: nowrap;
}

/* Botao "IA" (Atendimento) + gaveta de escolha de agente (AgentPicker) —
   mesmo padrao visual do menu "Colunas" acima (.columns-config-menu/-item),
   com classes proprias so para nao confundir semanticamente com "colunas". */
.ai-button-group {
  position: relative;
  display: flex;
}

.ai-button-group .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.agent-picker {
  position: relative;
}

.agent-picker-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 8px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
  font-size: 11px;
}

.agent-picker-toggle:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

/* BUG REAL CORRIGIDO nesta tarefa: usuario notou os itens do dropdown
   cortados (so "Generica" aparecia). Causa: o botao "IA" sempre fica perto
   do fim do painel de conversa (Perguntas/Mensagens/Reclamacoes), e o menu
   abrindo pra BAIXO estourava o limite inferior do container, sem espaco
   sobrando. Abrir pra CIMA evita isso nos 3 lugares onde este botao existe. */
.agent-picker-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 4px;
  box-shadow: var(--shadow-md);
  z-index: 10;
  min-width: 140px;
  display: flex;
  flex-direction: column;
}

.agent-picker-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
}

.agent-picker-item:hover {
  background: var(--color-surface-muted);
}

.agent-picker-item-selected {
  font-weight: 600;
  color: var(--color-primary);
}

/* Autocomplete de comandos de barra no chat dos Agentes (pedido explicito do
   usuario, estilo Slack/Discord) — abre para CIMA pelo mesmo motivo do
   .agent-picker-menu (campo fica perto do fim do painel de conversa). */
.command-suggest-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 4px;
  box-shadow: var(--shadow-md);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.command-suggest-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
}

.command-suggest-item:hover {
  background: var(--color-surface-muted);
}

.command-suggest-usage {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  font-family: monospace;
}

.command-suggest-description {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.sortable-th {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.sortable-th:hover {
  color: var(--color-text);
}

.checklist-row {
  cursor: pointer;
}

.checklist-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  display: block;
}

.checklist-thumb-empty {
  background: var(--color-surface-muted);
}

/* --- Chip desabilitado (grupo "Promocao", Em validacao) — mesmo espirito
   visual de .filter-modal-option.disabled, adaptado ao formato pill de
   .filter-chip. ------------------------------------------------------- */

.filter-chip-disabled,
.filter-chip-disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
}

/* --- Interruptor Lista/Cards (Checklist) --------------------------------- */

.view-mode-switch {
  display: inline-flex;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.view-mode-switch-option {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border: none;
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.view-mode-switch-option + .view-mode-switch-option {
  border-left: 1px solid var(--color-border-strong);
}

.view-mode-switch-option:hover {
  color: var(--color-text);
}

.view-mode-switch-option.active {
  background: var(--color-primary);
  color: #fff;
}

/* --- Modo Cards do Checklist ---------------------------------------------
   Cada anuncio como card, inspirado no layout do concorrente (screenshot do
   usuario) — mesmos dados da linha da lista, reaproveitando os badges ja
   existentes (.status-pill) e a paleta ja usada em .diagnostic-card-badge-*
   em vez de inventar um sistema visual novo. ---------------------------- */

.checklist-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 8px;
}

.checklist-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.checklist-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.checklist-card-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-muted);
}

.checklist-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  border-radius: 0;
}

.checklist-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checklist-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.checklist-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.checklist-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.checklist-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-navy);
}

.checklist-card-badge-blue {
  background: var(--accent-blue-bg);
}

.checklist-card-badge-green {
  background: var(--accent-green-bg);
}

.checklist-card-badge-gray {
  background: var(--accent-gray-bg);
}

.checklist-card-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--color-border);
}

.checklist-card-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-navy);
}

.checklist-card-type {
  font-size: 12px;
  color: var(--color-text-muted);
}

.checklist-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px 14px;
  gap: 10px 14px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
}

.checklist-card-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.checklist-card-stat-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-faint);
  font-weight: 700;
}

.checklist-card-stat-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.checklist-card-stat-placeholder {
  color: var(--color-text-faint);
  font-weight: 500;
  font-style: italic;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* --- Detalhe do anuncio (Fase 2) ----------------------------------------- */

.detail-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.detail-tab {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
}

.detail-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.detail-tab.disabled {
  color: var(--color-text-faint);
  cursor: not-allowed;
}

.detail-hero {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.detail-image {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}

.detail-image-empty {
  background: var(--color-surface-muted);
}

.detail-info {
  flex: 1 1;
  min-width: 260px;
}

.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  grid-gap: 12px 24px;
  gap: 12px 24px;
  font-size: 14px;
}

.images-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.images-grid-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  display: block;
}

/* --- Preco e Aliquota ----------------------------------------------------- */

.stats-row {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.stat-card {
  flex: 1 1;
  min-width: 220px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-xs);
}

.stat-card-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  font-weight: 700;
  margin-bottom: 10px;
}

.stat-card-value {
  font-size: 25px;
  font-weight: 800;
  color: var(--color-navy);
}

.stat-card-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.stat-card-link {
  color: var(--color-primary);
  cursor: pointer;
  font-weight: 600;
}

.stat-card-clickable {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.stat-card-clickable:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.pricing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0;
  flex-wrap: wrap;
}

.pricing-toolbar-actions {
  display: flex;
  gap: 10px;
}

.inline-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}

.inline-form .form-group {
  margin-bottom: 0;
}

.import-result {
  margin-bottom: 16px;
  font-size: 13px;
}

.import-result-errors {
  margin-top: 8px;
  max-height: 160px;
  overflow-y: auto;
  font-size: 12px;
  color: var(--color-error);
}

/* --- Promocoes -------------------------------------------------------- */

.promo-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.promo-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.promo-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.promo-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.promo-card-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-navy);
}

.promo-card-type {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.promo-card-dates {
  font-size: 12px;
  color: var(--color-text-muted);
}

.promo-card-benefit {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-success);
  font-weight: 700;
}

.promo-bulk-panel {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 8px;
}

.promo-bulk-panel .inline-form {
  margin-bottom: 8px;
  padding-bottom: 0;
  border-bottom: none;
}

/* --- Seletor de conta global (multi-conta) ------------------------------ */

.account-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.account-selector-btn {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.account-selector-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
}

.account-selector-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ==========================================================================
   Dashboard (Fase 2) — cards de KPI + grid de modulos. So usados na tela
   /dashboard, mas ficam no design system para reaproveitar tokens.
   ========================================================================== */

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

.kpi-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-xs);
}

a.kpi-card,
.kpi-card-clickable {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

a.kpi-card:hover,
.kpi-card-clickable:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.kpi-card-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--accent-blue-bg);
  color: var(--accent-blue);
}

.kpi-card-icon.tone-purple {
  background: var(--accent-purple-bg);
  color: var(--accent-purple);
}

.kpi-card-icon.tone-amber {
  background: var(--accent-amber-bg);
  color: var(--accent-amber);
}

.kpi-card-icon.tone-green {
  background: var(--accent-green-bg);
  color: var(--accent-green);
}

.kpi-card-icon.tone-orange {
  background: var(--accent-orange-bg);
  color: var(--accent-orange);
}

.kpi-card-icon.tone-gray {
  background: var(--accent-gray-bg);
  color: var(--accent-gray);
}

.kpi-card-body {
  min-width: 0;
  flex: 1 1;
}

.kpi-card-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.kpi-card-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.15;
}

.kpi-card-sub {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.kpi-card-sub.tone-success {
  color: var(--color-success);
  font-weight: 600;
}

.kpi-card-sub.tone-warning {
  color: var(--color-warning);
  font-weight: 600;
}

.kpi-card-sub.tone-error {
  color: var(--color-error);
  font-weight: 600;
}

.dashboard-section-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 14px;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

/* --- "Resumo da conta" (Dashboard) ----------------------------------------- */

.account-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.summary-card-note {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.reputation-metrics {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.reputation-metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.reputation-metric strong {
  color: var(--color-navy);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.module-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.module-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.module-card.highlight {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft), var(--shadow-sm);
}

.module-card.disabled {
  cursor: default;
  opacity: 0.6;
}

.module-card.disabled:hover {
  border-color: var(--color-border);
  box-shadow: var(--shadow-xs);
  transform: none;
}

.module-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.module-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  background: var(--accent-blue-bg);
  color: var(--accent-blue);
  flex-shrink: 0;
}

.module-card-icon.tone-purple {
  background: var(--accent-purple-bg);
  color: var(--accent-purple);
}

.module-card-icon.tone-amber {
  background: var(--accent-amber-bg);
  color: var(--accent-amber);
}

.module-card-icon.tone-green {
  background: var(--accent-green-bg);
  color: var(--accent-green);
}

.module-card-icon.tone-orange {
  background: var(--accent-orange-bg);
  color: var(--accent-orange);
}

.module-card-icon.tone-gray {
  background: var(--accent-gray-bg);
  color: var(--accent-gray);
}

.module-card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 4px;
}

.module-card-desc {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ==========================================================================
   Novidades (changelog do sistema + comunicados do Mercado Livre)
   ========================================================================== */

.novidades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  align-items: start;
}

.notice-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notice-card {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.notice-card.highlighted {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.notice-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.notice-card-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-navy);
}

.notice-card-date {
  font-size: 12px;
  color: var(--color-text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}

.notice-card-desc {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.notice-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.notice-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--accent-blue-bg);
  color: var(--accent-blue);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.notice-action-btn {
  padding: 6px 12px;
  font-size: 12.5px;
}

.notice-source-note {
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin: 0 0 14px;
  line-height: 1.5;
}

.changelog-category {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.changelog-category-modulo {
  background: var(--accent-green-bg);
  color: var(--accent-green);
}

.changelog-category-melhoria {
  background: var(--accent-purple-bg);
  color: var(--accent-purple);
}

/* ==========================================================================
   Alternador de tema (claro/escuro)
   ========================================================================== */

.theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.theme-toggle:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.theme-toggle .theme-toggle-icon-lit {
  color: #f5b301;
}

.theme-toggle .theme-toggle-icon-unlit {
  color: var(--color-text-faint);
}

/* ==========================================================================
   Sino de notificacoes (Atendimento) — ocupa a posicao original do theme
   toggle (topo direito).
   ========================================================================== */

.notifications-bell-wrapper {
  position: fixed;
  top: 18px;
  right: 24px;
  z-index: 50;
}

.notifications-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.notifications-bell:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.notifications-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--color-error);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.notifications-panel {
  position: absolute;
  top: 46px;
  right: 0;
  width: 340px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.notifications-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}

.notifications-category-list {
  overflow-y: auto;
  flex: 1 1;
}

.notifications-category-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.15s ease;
}

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

.notifications-category-row:hover {
  background: var(--color-surface-muted);
}

.notifications-category-row-disabled {
  cursor: default;
  opacity: 0.6;
}

.notifications-category-row-disabled:hover {
  background: none;
}

.notifications-category-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-surface-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.notifications-category-body {
  min-width: 0;
  flex: 1 1;
}

.notifications-category-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-navy);
}

.notifications-category-preview {
  font-size: 12.5px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.notifications-category-count {
  flex-shrink: 0;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-error);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notifications-category-chevron-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-faint);
  font-size: 16px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.notifications-category-chevron-btn:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.notifications-category-chevron-btn.open {
  transform: rotate(90deg);
  color: var(--color-text);
}

/* Lista expandida de uma categoria (pedido explicito do usuario): altura
   propria com scroll, para nao empurrar as outras categorias pra fora do
   tamanho ja existente do painel. */
.notifications-subitem-list {
  max-height: 180px;
  overflow-y: auto;
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
}

.notifications-subitem-row {
  padding: 8px 14px 8px 50px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s ease;
}

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

.notifications-subitem-row:hover {
  background: var(--color-surface);
}

.notifications-subitem-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-navy);
}

.notifications-subitem-text {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.notifications-subitem-empty {
  padding: 12px 14px 12px 50px;
  font-size: 12.5px;
  color: var(--color-text-faint);
}

/* ==========================================================================
   Atendimento (Perguntas + Pos-vendas) — acento teal, ainda nao usado por
   nenhum outro modulo (blue=Checklist, purple=Promocoes, amber=Preco e
   Aliquota, green=Sincronizacao, orange=Configuracoes).
   ========================================================================== */

/* --- Perguntas ------------------------------------------------------------ */

.question-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.question-card {
  display: flex;
  gap: 14px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.question-card-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.question-card-thumb-empty {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: var(--color-border);
}

.question-card-body {
  min-width: 0;
  flex: 1 1;
}

.question-card-listing-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.question-card-text {
  font-size: 14px;
  color: var(--color-text);
  margin: 0 0 6px;
  line-height: 1.5;
}

.question-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--color-text-faint);
}

.question-answer-box {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--color-text);
  line-height: 1.5;
}

.question-answer-box-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--accent-teal);
  margin-bottom: 4px;
}

.question-reply-form {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.question-reply-textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  font-family: inherit;
  font-size: 13.5px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
}

.question-reply-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --- Pos-vendas ------------------------------------------------------------- */

.pack-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pack-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pack-row:hover {
  border-color: var(--accent-teal);
  box-shadow: var(--shadow-xs);
}

.pack-row-body {
  min-width: 0;
  flex: 1 1;
}

.pack-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 4px;
}

.pack-row-preview {
  font-size: 13px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pack-row-unread-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-error);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.conversation-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pendencia-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  color: var(--color-navy);
  transition: background 0.15s ease;
}

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

.pendencia-row:hover {
  background: var(--color-surface-muted);
}

.conversation-back {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 0 14px;
  text-align: left;
}

.conversation-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 480px;
  overflow-y: auto;
  padding: 4px 4px 12px;
}

.message-bubble {
  max-width: 72%;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.5;
}

.message-bubble-buyer {
  align-self: flex-start;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.message-bubble-seller {
  align-self: flex-end;
  background: var(--accent-teal-bg);
  color: var(--color-text);
  border: 1px solid transparent;
}

/* Reclamacoes/mediacoes (pedido explicito do usuario): so 2 cores — minhas
   mensagens (respondent) em azul a direita, qualquer outra parte (comprador
   OU mediador do Mercado Livre) em cinza a esquerda. */
.message-bubble-mine {
  align-self: flex-end;
  background: var(--accent-amber-bg);
  color: var(--color-text);
  border: 1px solid transparent;
}

.message-bubble-other {
  align-self: flex-start;
  max-width: 85%;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.message-bubble-date {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-text-faint);
}

.conversation-reply-bar {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
  margin-top: 4px;
}

.conversation-reply-bar textarea {
  flex: 1 1;
  min-height: 56px;
  resize: vertical;
  font-family: inherit;
  font-size: 13.5px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
}

/* ==========================================================================
   Perguntas — layout 3 colunas (lista / thread / detalhe do anuncio)
   ========================================================================== */

/* Grafico "Prazo de resposta" (pedido explicito do usuario, ver ResponseTimeCard). */
.response-time-card {
  margin-bottom: 16px;
}

.response-time-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.response-time-headline-value {
  font-size: 22px;
  font-weight: 700;
}

.response-time-headline-value.good {
  color: var(--color-success);
}

.response-time-headline-value.bad {
  color: var(--color-error);
}

.response-time-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.response-time-bar-row {
  display: grid;
  grid-template-columns: 220px 1fr 90px;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
}

.response-time-bar-label {
  font-size: 12.5px;
  color: var(--color-text-faint);
}

.response-time-bar-track {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  overflow: hidden;
}

.response-time-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
}

.response-time-bar-fill.good {
  background: var(--color-success);
}

.response-time-bar-fill.bad {
  background: var(--color-error);
}

.response-time-bar-value {
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
}

@media (max-width: 720px) {
  .response-time-bar-row {
    grid-template-columns: 140px 1fr 70px;
  }
}

.qa-layout {
  display: flex;
  align-items: stretch;
  gap: 16px;
  height: calc(100vh - 260px);
  min-height: 560px;
}

.qa-col {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.qa-col-list {
  width: 400px;
  flex-shrink: 0;
}

.qa-col-thread {
  flex: 1 1;
  min-width: 0;
}

.qa-col-detail {
  width: 380px;
  flex-shrink: 0;
}

@media (max-width: 1200px) {
  .qa-layout {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }

  .qa-col-list,
  .qa-col-detail {
    width: 100%;
  }

  .qa-col-thread {
    min-height: 480px;
  }
}

/* --- Coluna 1: lista --- */

.qa-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.qa-list-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy);
}

.qa-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.qa-icon-btn:hover {
  border-color: var(--accent-teal);
  color: var(--accent-teal);
}

.qa-list-toolbar {
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.qa-list-search-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13.5px;
}

.qa-list-search-input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
  border-color: var(--color-primary);
}

.qa-list-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.qa-list-status-select {
  padding: 7px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
}

.qa-list-sort-label {
  font-size: 12px;
  color: var(--color-text-faint);
  white-space: nowrap;
}

.qa-list-body {
  flex: 1 1;
  overflow-y: auto;
  min-height: 0;
}

.qa-list-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13.5px;
}

.qa-row {
  display: flex;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.15s ease;
}

.qa-row:hover {
  background: var(--color-surface-muted);
}

.qa-row-active {
  background: var(--accent-teal-bg);
}

.qa-row-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
}

.qa-row-body {
  min-width: 0;
  flex: 1 1;
}

.qa-row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.qa-row-buyer {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  min-width: 0;
}

.qa-row-date {
  font-size: 11px;
  color: var(--color-text-faint);
  flex-shrink: 0;
  white-space: nowrap;
}

.qa-row-account-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  margin-left: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100px;
}

.qa-row-price {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.qa-row-title {
  font-size: 12.5px;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 3px;
  line-height: 1.35;
}

.qa-row-preview {
  font-size: 12.5px;
  color: var(--color-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qa-list-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.qa-list-footer .btn-secondary {
  padding: 4px 10px;
}

/* --- Coluna 2: thread --- */

.qa-thread-empty,
.qa-detail-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
}

.qa-thread-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.qa-thread-header-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
}

.qa-thread-header-body {
  min-width: 0;
  flex: 1 1;
}

.qa-thread-header-buyer {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
}

.qa-thread-header-sub {
  font-size: 12.5px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qa-thread-header-account {
  font-size: 12px;
  color: var(--color-text-faint);
  flex-shrink: 0;
}

.qa-thread-note {
  margin: 0;
  padding: 8px 18px;
  font-size: 12px;
  color: var(--color-text-faint);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  flex-shrink: 0;
}

.qa-thread-messages {
  flex: 1 1;
  overflow-y: auto;
  min-height: 0;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qa-bubble {
  max-width: 72%;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.5;
}

.qa-bubble-buyer {
  align-self: flex-start;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.qa-bubble-answer {
  align-self: flex-end;
  background: var(--accent-teal-bg);
  color: var(--color-text);
  border: 1px solid transparent;
}

.qa-bubble-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-text-faint);
}

.qa-bubble-check {
  color: var(--accent-teal);
  font-weight: 700;
}

.qa-composer {
  border-top: 1px solid var(--color-border);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.qa-composer-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.qa-composer-row textarea {
  flex: 1 1;
  min-height: 56px;
  resize: vertical;
  font-family: inherit;
  font-size: 13.5px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
}

.qa-composer-row textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.qa-composer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  font-size: 11.5px;
  color: var(--color-text-faint);
}

/* margin-right:auto empurra o contador de caracteres para a direita sem
   quebrar o layout quando nao ha sugestao de IA (badge nao renderizado). */
.qa-ai-model-badge {
  font-size: 11.5px;
  color: var(--color-text-faint);
  font-style: italic;
  margin-right: auto;
}

/* --- Coluna 3: detalhe do anuncio --- */

.qa-detail-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  flex-shrink: 0;
}

.qa-detail-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1 1;
  min-height: 0;
}

.qa-detail-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 12px;
  line-height: 1.4;
}

.qa-detail-fact-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 6px;
}

.qa-detail-fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
}

.qa-detail-fact:last-child {
  border-bottom: none;
}

.qa-detail-fact-label {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.qa-detail-fact-value {
  color: var(--color-text);
  font-weight: 600;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qa-detail-condition-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: capitalize;
}

.qa-detail-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--accent-teal);
  margin: 18px 0 8px;
}

.qa-detail-buyer {
  font-size: 13.5px;
  color: var(--color-text);
}

.qa-detail-recommendation-placeholder {
  font-size: 12.5px;
  color: var(--color-text-faint);
  font-style: italic;
  line-height: 1.5;
}

/* ==========================================================================
   Mensagens (pos-venda) — KPIs, filtro de data e cards enriquecidos
   ========================================================================== */

.qa-date-filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.qa-date-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.qa-date-filter input[type='date'] {
  padding: 6px 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 12.5px;
}

.pack-row-source-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--accent-teal-bg);
  color: var(--accent-teal);
  font-size: 11px;
  font-weight: 800;
}

.pack-row-date {
  font-size: 11.5px;
  color: var(--color-text-faint);
  margin-top: 2px;
}

.pack-row-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.pack-row-action-btn {
  padding: 5px 10px;
  font-size: 12px;
  white-space: nowrap;
}

/* --- Pos-vendas: abas de categoria dentro da pagina (Reclamacoes e
   mediacoes / Mensagens / Devolucoes — mesmo padrao da tela nativa
   "Pos-venda" do Mercado Livre, tudo dentro de uma so pagina). ------------ */

.postsale-category-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.postsale-category-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.postsale-category-tab:hover {
  border-color: var(--accent-teal);
  color: var(--color-text);
}

.postsale-category-tab.active {
  border-color: var(--accent-teal);
  background: var(--accent-teal-bg);
  color: var(--accent-teal);
}

.postsale-category-tab-icon {
  font-size: 13px;
  line-height: 1;
}

.postsale-category-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-error);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* ==========================================================================
   Reclamacoes/Mediacoes/Devolucoes — cards-resumo + modal "Filtrar e
   ordenar" (pedido explicito do usuario, no espirito da tela nativa do
   Mercado Livre). Reaproveita os tokens/estrutura ja usados em `.stat-card`
   (ver preco-aliquota/promocoes) em vez de criar um sistema visual novo.
   ========================================================================== */

.stat-card-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Cards-resumo agrupados (pedido explicito do usuario, para bater com o
   layout real do painel nativo do Mercado Livre): 2 caixas lado a lado —
   "Proximas a serem atendidas" (destaque, o caso mais urgente do vendedor)
   e "Atendidas" (lista de itens, cada um clicavel/desabilitado). Substituiu
   a fileira plana de `.stat-card` usada antes para este bloco especifico. */
.summary-group-row {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.summary-group-card {
  flex: 1 1;
  min-width: 260px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-xs);
}

.summary-group-card-highlight {
  border-color: var(--color-primary);
}

.summary-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 12px;
}

.summary-group-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-primary-light, rgba(37, 99, 235, 0.12));
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 800;
}

.summary-group-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.summary-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 14px;
  color: var(--color-text);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

.summary-group-item:hover {
  color: var(--color-primary);
}

.summary-group-item-disabled {
  cursor: not-allowed;
  color: var(--color-text-muted);
  opacity: 0.7;
}

.summary-group-item-value {
  font-weight: 700;
  color: inherit;
}

.filter-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 26, 51, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.filter-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.filter-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--color-border);
}

.filter-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy);
}

.filter-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px 6px;
}

.filter-modal-close:hover {
  color: var(--color-text);
}

.filter-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1 1;
}

.filter-modal-section {
  margin-bottom: 22px;
}

.filter-modal-section:last-child {
  margin-bottom: 0;
}

.filter-modal-section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.filter-modal-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
}

.filter-modal-option input {
  margin-top: 3px;
}

.filter-modal-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--color-text-muted);
}

.filter-modal-option-note {
  display: block;
  font-size: 11px;
  color: var(--color-text-faint);
  margin-top: 2px;
}

.filter-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   Aba "Analise" (Gestao de Anuncios) — reaproveita .stat-card/.stats-row
   (Preco e Aliquota), .checklist-toolbar/.checklist-search/.checklist-total/
   .sortable-th/.checklist-thumb/.pagination/.loading-text/.empty-state
   (Checklist) em vez de duplicar. So os elementos NOVOS desta tela (celula
   Anuncio da tabela, barra de "Canais", sparkline de "Evolucao") ganham
   classes proprias abaixo.
   ========================================================================== */

/* Card "Sem venda (30d)" clicavel, com o filtro ativo — mesmo truque visual
   de destaque ja usado em `.summary-group-card-highlight`. */
.stat-card-active {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* Celula "Anuncio" da tabela — thumbnail + titulo (2 linhas, trunca) + SKU. */
.analise-listing-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 220px;
  max-width: 320px;
}

.analise-listing-info {
  min-width: 0;
}

.analise-listing-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}

.analise-listing-sku {
  margin-top: 3px;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Botao de texto simples ("Carregar canais" / "Erro — tentar de novo") —
   mesmo espirito visual de `.stat-card-link`, so sem herdar padding de botao. */
.load-inline-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.load-inline-btn:hover {
  text-decoration: underline;
}

/* Coluna "Canais (60d)" — barra horizontal segmentada + legenda com %,
   pedido explicito do usuario para bater com o screenshot do concorrente. */
.channels-cell {
  min-width: 130px;
  max-width: 170px;
}

.channels-bar {
  display: flex;
  width: 100%;
  height: 8px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--color-surface-muted);
}

.channels-bar-segment {
  height: 100%;
}

.channels-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 6px;
}

.channels-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.channels-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Paleta dos 4 canais — reaproveita os tokens de acento ja usados em
   `.diagnostic-card-badge-*` (globals.css) em vez de inventar cores novas. */
.channels-full {
  background: var(--accent-blue);
}

.channels-flex {
  background: var(--accent-green);
}

.channels-coleta {
  background: var(--accent-amber);
}

.channels-correios {
  background: var(--accent-purple);
}

.channels-outro {
  background: var(--accent-gray);
}

/* Coluna "Evolucao" — sparkline SVG simples (sem biblioteca de graficos),
   barras dos ultimos ~30 dias de `ListingSalesDaily.units` (zeros
   preenchidos no frontend para os dias sem linha, ver buildSparklineSeries). */
.sparkline-svg {
  display: block;
}

.sparkline-bar {
  fill: var(--color-primary);
}

.sparkline-bar-empty {
  fill: var(--color-border);
}

/* ==========================================================================
   Aba "Vendas mes a mes" (Gestao de Anuncios) — reaproveita .stat-card/
   .stats-row, .checklist-toolbar/-search/-total, .filter-chip,
   .analise-listing-cell/-info/-title/-sku (celula "Produto", identica a
   Analise) e .pagination/.loading-text/.empty-state em vez de duplicar. So
   os elementos NOVOS desta tela (link "voltar", heatmap mensal, coluna
   Tendencia) ganham classes proprias abaixo.
   ========================================================================== */

.page-header-back {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
}

.page-header-back:hover {
  color: var(--color-primary);
}

.monthly-sales-month-th {
  text-align: center;
  white-space: nowrap;
  font-size: 11.5px;
}

.monthly-sales-month-cell {
  text-align: center;
  white-space: nowrap;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Heatmap mensal — melhor/pior mes (em unidades) de cada linha. */
.monthly-sales-cell-best {
  background: var(--color-success-bg);
}

.monthly-sales-cell-worst {
  background: var(--color-error-bg);
}

.monthly-sales-12m-units {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

.monthly-sales-12m-revenue {
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.monthly-sales-trend {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.monthly-sales-trend-value {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}

.monthly-sales-trend-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.monthly-sales-trend-up .monthly-sales-trend-value,
.monthly-sales-trend-up .monthly-sales-trend-label {
  color: var(--color-success);
}

.monthly-sales-trend-down .monthly-sales-trend-value,
.monthly-sales-trend-down .monthly-sales-trend-label {
  color: var(--color-error);
}

/* ==========================================================================
   Aba "Saude" (Gestao de Anuncios) — reaproveita .stat-card/.stats-row,
   .checklist-toolbar/-search/-total, .analise-listing-cell/-info/-title/-sku,
   .checklist-thumb/-empty, .pagination/.loading-text/.empty-state e o
   PADRAO de barra ja usado em "Prazo de resposta" (Atendimento,
   .response-time-bar-row/-track/-fill) em vez de duplicar. So os elementos
   NOVOS desta tela (5 barras de faixa clicaveis, banner de moderacao, linha
   da lista "Anuncios com maior risco" com pills de deducao) ganham classes
   proprias abaixo.
   ========================================================================== */

.saude-bands {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.saude-band-row {
  display: grid;
  grid-template-columns: 110px 1fr 130px;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}

.saude-band-row:hover {
  background: var(--color-surface-muted);
}

.saude-band-row.active {
  background: var(--color-surface-muted);
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.saude-band-label {
  font-size: 13px;
  font-weight: 700;
}

.saude-band-track {
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  overflow: hidden;
}

.saude-band-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.2s ease;
}

.saude-band-fill-excelente {
  background: var(--color-success);
}

.saude-band-fill-boa {
  background: var(--accent-blue);
}

.saude-band-fill-mediana {
  background: var(--accent-amber);
}

.saude-band-fill-ruim {
  background: var(--accent-orange);
}

.saude-band-fill-critica {
  background: var(--color-error);
}

.saude-band-label-excelente {
  color: var(--color-success);
}

.saude-band-label-boa {
  color: var(--accent-blue);
}

.saude-band-label-mediana {
  color: var(--accent-amber);
}

.saude-band-label-ruim {
  color: var(--accent-orange);
}

.saude-band-label-critica {
  color: var(--color-error);
}

.saude-band-value {
  font-size: 12.5px;
  color: var(--color-text-muted);
  text-align: right;
  font-weight: 600;
}

.saude-moderation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.saude-moderation-banner:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.saude-moderation-banner.active {
  outline: 2px solid var(--color-warning);
  outline-offset: -2px;
}

.saude-moderation-banner-title {
  font-weight: 700;
  color: var(--color-warning);
  margin: 0 0 2px;
  font-size: 14px;
}

.saude-moderation-banner-sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.saude-moderation-banner-count {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-warning);
  flex-shrink: 0;
}

/* Linha da lista "Anuncios com maior risco" — reaproveita .analise-listing-cell
   para a celula do anuncio, mas o restante das colunas + as pills de deducao
   abaixo sao especificos desta tela. */
.saude-risk-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.saude-risk-row-main {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) 90px 130px 90px 80px 90px;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
}

.saude-risk-col-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-faint);
  margin-bottom: 2px;
}

.saude-risk-col-value {
  font-size: 13px;
  color: var(--color-text);
}

.saude-score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 14px;
}

.saude-score-badge-excelente {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.saude-score-badge-boa {
  background: var(--accent-blue-bg);
  color: var(--accent-blue);
}

.saude-score-badge-mediana {
  background: var(--accent-amber-bg);
  color: var(--accent-amber);
}

.saude-score-badge-ruim {
  background: var(--accent-orange-bg);
  color: var(--accent-orange);
}

.saude-score-badge-critica {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.saude-risk-deductions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Pills de deducao — mesmo formato de .checklist-card-badge, cor unica
   (vermelho fraco) porque toda pill aqui representa um problema encontrado,
   nao uma categoria neutra. */
.saude-deduction-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  background: var(--color-error-bg);
  color: var(--color-error);
}

.saude-moderation-note {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-size: 12.5px;
  border: 1px solid var(--color-warning);
}

@media (max-width: 900px) {
  .saude-risk-row-main {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   "Gestao de Vendas > Visao geral" — reaproveita .page-header, .kpi-grid/
   .kpi-card, .checklist-filters-group/.filter-chip, .qa-date-filter-group/
   .qa-date-filter, .card/.checklist-toolbar, .diagnostics-note e .btn/
   .btn-secondary em vez de duplicar. So o cabecalho com o botao "Ver
   lucratividade" e o grafico "Vendas por dia" (SVG desenhado a mao, sem lib
   de grafico nova) sao novos de verdade.
   ========================================================================== */

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

.sales-overview-chart-svg {
  width: 100%;
  min-width: 640px;
  height: auto;
  display: block;
}

.sales-overview-chart-grid {
  stroke: var(--color-border);
  stroke-width: 1;
}

.sales-overview-chart-bar {
  fill: var(--accent-blue);
  opacity: 0.85;
}

.sales-overview-chart-line {
  stroke: var(--color-warning);
  stroke-width: 2.5;
}

.sales-overview-chart-dot {
  fill: var(--color-warning);
}

.sales-overview-chart-axis-label {
  font-size: 11px;
  fill: var(--color-text-muted);
}

.sales-overview-chart-axis-max {
  font-size: 11px;
  fill: var(--color-text-muted);
  font-weight: 600;
}

.sales-overview-chart-legend {
  display: flex;
  gap: 20px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.sales-overview-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.sales-overview-chart-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

.sales-overview-chart-legend-bar {
  background: var(--accent-blue);
  opacity: 0.85;
}

.sales-overview-chart-legend-line {
  background: var(--color-warning);
  border-radius: 999px;
  height: 3px;
  margin-top: 4px;
}

/* --- "Gestao de Vendas > Lucratividade" (DRE do periodo + lucro por
   produto) — painel esquerdo/direito lado a lado (empilha em telas
   estreitas), linhas de DRE (.dre-line) e coloracao vermelha/verde das
   celulas da tabela de produtos (.profitability-table), reaproveitando os
   tokens de cor ja usados em .kpi-card-sub.tone-success/.tone-error. */
.profitability-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(480px, 1.6fr);
  grid-gap: 16px;
  gap: 16px;
  align-items: start;
}

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

.dre-subtitle {
  margin: 0 0 14px;
  color: var(--color-text-muted);
  font-size: 13px;
}

.dre-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
}

.dre-line:last-of-type {
  border-bottom: none;
}

.dre-line-label-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dre-line-label {
  font-size: 13.5px;
  color: var(--color-text);
}

.dre-line-label-strong {
  font-weight: 800;
  font-size: 15px;
  color: var(--color-navy);
}

.dre-line-value-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}

.dre-line-percent {
  font-size: 12px;
  color: var(--color-text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.dre-line-value {
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.dre-line-value-strong {
  font-size: 17px;
  font-weight: 800;
}

.dre-line-value.tone-error {
  color: var(--color-error);
}

.dre-line-note {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--color-text-muted);
}

.dre-divider {
  height: 1px;
  background: var(--color-border);
  margin: 6px 0;
}

.profitability-table td.tone-error,
.profitability-table td.tone-success {
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.profitability-table td.tone-error {
  color: var(--color-error);
}

.profitability-table td.tone-success {
  color: var(--color-success);
}

/* --------------------------------------------------------------------------
   Aba "Metas de produtos" (Gestao de Vendas) — 100% dado interno (ver
   GoalsService). Reaproveita .stat-card/.stats-row, .checklist-toolbar/
   -search/-total, .analise-listing-cell/-info/-title/-sku (celula "Produto",
   identica as outras abas de anuncio), .status-pill (badges "No ritmo"/
   "Em risco"/"Meta batida") e .card/.btn/.form-group/.diagnostics-note ja
   existentes. Elementos novos de verdade: navegador de mes, barra de
   progresso com marcador de "esperado ate hoje", os 2 selos extras de meta
   batida sem equivalente em .status-pill (Super/Hyper) e o dropdown de busca
   de produto (autocomplete simples, sem biblioteca externa). -------------- */

.goals-month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 14px 20px;
  margin-bottom: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  flex-wrap: wrap;
}

.goals-month-nav-arrow {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}

.goals-month-nav-arrow:hover:not(:disabled) {
  background: var(--color-surface-muted);
  color: var(--color-primary);
}

.goals-month-nav-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.goals-month-nav-current {
  text-align: center;
  min-width: 160px;
}

.goals-month-nav-current-label {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-navy);
}

.goals-month-nav-current-sub {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Barra de progresso da coluna "Progresso" — preenchimento verde/vermelho
   (conforme status) mais um "traco" vertical marcando onde a meta deveria
   estar hoje (esperado%). O preenchimento visual e sempre limitado (clamp) a
   100% da largura da barra mesmo quando o progresso real passa disso (meta
   batida/Super/Hyper) — o numero exato fica no texto abaixo, a barra so
   comunica "cheio ou nao" de forma rapida. */
.goals-progress-track {
  position: relative;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  overflow: visible;
  min-width: 140px;
}

.goals-progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-success);
}

.goals-progress-fill-risco {
  background: var(--color-error);
}

.goals-progress-marker {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 16px;
  background: var(--color-navy);
  opacity: 0.55;
}

.goals-progress-text {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Selos "Super"/"Hyper" (progresso >=110%/>=120% da meta) — MESMA estrutura
   visual de .status-pill, so com os acentos de modulo roxo/laranja ja
   existentes (--accent-purple/--accent-orange) em vez de verde/vermelho, por
   nao terem equivalente na convencao de status do sistema. */
.goals-badge-super {
  background: var(--accent-purple-bg);
  color: var(--accent-purple);
}

.goals-badge-hyper {
  background: var(--accent-orange-bg);
  color: var(--accent-orange);
}

/* Secao "Definir meta de produto" — busca com dropdown de resultados. */
.goals-search-box {
  position: relative;
  max-width: 420px;
}

.goals-search-box .checklist-search {
  width: 100%;
}

.goals-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-height: 320px;
  overflow-y: auto;
}

.goals-search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
}

.goals-search-result-item:last-child {
  border-bottom: none;
}

.goals-search-result-item:hover {
  background: var(--color-surface-muted);
}

.goals-target-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 16px;
  background: var(--color-surface-muted);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.goals-target-form .form-group {
  margin-bottom: 0;
  width: 140px;
}