/* ══════════════════════════════════════════════════════════════════
   GUUG COMERCIAL — Design System
   Identidade: azul GUUG (#84D0E6 / #47B1D8), grafite profundo e cinza claro.
   Estrutura herdada do sistema de gestão, retematizada para a marca GUUG.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Marca ─────────────────────────────────────────────────── */
  --guug-blue-100: #EAF7FC;
  --guug-blue-200: #C9EBF6;
  --guug-blue-300: #A8E0F0;
  --guug-blue-400: #84D0E6;   /* azul principal do logotipo */
  --guug-blue-500: #5FBEDD;
  --guug-blue-600: #47B1D8;   /* arco do "g" — ações e destaques */
  --guug-blue-700: #2E92B8;
  --guug-blue-800: #1F7191;

  --guug-ink-900: #0E1114;    /* preto dos materiais institucionais */
  --guug-ink-800: #16191D;
  --guug-ink-700: #1E2328;
  --guug-ink-600: #2A3138;
  --guug-ink-500: #3B444D;

  --guug-gray-100: #F5F7F9;
  --guug-gray-200: #E9EDF1;
  --guug-gray-300: #DDDDDD;   /* cinza do wordmark */
  --guug-gray-400: #C3CBD3;

  /* ── Semânticas ────────────────────────────────────────────── */
  --accent:        var(--guug-blue-600);
  --accent-soft:   var(--guug-blue-400);
  --accent-dim:    rgba(71,177,216,.14);
  --accent-border: rgba(71,177,216,.38);
  --accent-dark:   var(--guug-blue-700);

  --green:      #16A34A;
  --green-dim:  rgba(22,163,74,.13);
  --red:        #DC2626;
  --red-dim:    rgba(220,38,38,.12);
  --blue:       #2563EB;
  --blue-dim:   rgba(37,99,235,.12);
  --yellow:     #D97706;
  --yellow-dim: rgba(217,119,6,.14);
  --purple:     #7C3AED;
  --purple-dim: rgba(124,58,237,.12);
  --teal:       #0D9488;
  --teal-dim:   rgba(13,148,136,.12);

  /* Temperatura da oportunidade */
  --temp-cold:  #3B82F6;
  --temp-warm:  #F59E0B;
  --temp-hot:   #EF4444;

  /* ── Superfícies ───────────────────────────────────────────── */
  --bg:        #F2F5F8;
  --surface-0: #FBFCFD;
  --surface-1: #FFFFFF;
  --surface-2: #F7F9FB;
  --surface-3: #EFF3F7;
  --surface-4: #E4EAF0;
  --border:    rgba(14,17,20,.08);
  --border-2:  rgba(14,17,20,.14);
  --txt:       #12181E;
  --txt-muted: #56646F;
  --txt-dim:   #8B98A4;
  --bg-input:  #FFFFFF;
  --bg-hover:  rgba(14,17,20,.035);

  --shadow-sm: 0 1px 2px rgba(14,17,20,.07);
  --shadow-md: 0 4px 14px rgba(14,17,20,.09);
  --shadow:    0 12px 32px rgba(14,17,20,.13);
  --shadow-lg: 0 24px 60px rgba(14,17,20,.18);

  /* ── Sidebar ───────────────────────────────────────────────── */
  --sb-bg:        var(--guug-ink-900);
  --sb-bg-2:      var(--guug-ink-800);
  --sb-border:    rgba(255,255,255,.07);
  --sb-txt:       rgba(255,255,255,.58);
  --sb-txt-dim:   rgba(255,255,255,.30);
  --sb-hover:     rgba(255,255,255,.07);
  --sb-hover-txt: rgba(255,255,255,.95);

  /* ── Métricas ──────────────────────────────────────────────── */
  --sidebar-w:         256px;
  --sidebar-compact-w: 78px;
  --topbar-h:          62px;
  --radius-sm:  7px;
  --radius:     11px;
  --radius-lg:  16px;
  --radius-full: 9999px;
  --transition: .24s cubic-bezier(.4,0,.2,1);

  --font-body:    'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;
}

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

html { font-size: 14px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  overflow-x: clip;
  padding-left: var(--sidebar-w);
  transition: padding-left var(--transition);
}
body.sidebar-compact { padding-left: var(--sidebar-compact-w); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.25; }

/* Só a barra da janela é desenhada; as internas somem (ver "Rolagem sem
   barra", no fim do arquivo). */
html::-webkit-scrollbar { width: 9px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 5px; }
html::-webkit-scrollbar-thumb:hover { background: var(--guug-gray-400); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ══ SIDEBAR ══════════════════════════════════════════════════ */
.sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  z-index: 1200;
  display: flex; flex-direction: column;
  transition: width var(--transition), transform var(--transition);
  overflow: hidden;
}
/* Menu liberado: o JavaScript aplica .close ao retirar o mouse e a remove ao
   entrar novamente, acompanhando o comportamento da sidebar do Guug Project. */
.sidebar.close { width: var(--sidebar-compact-w); }

.sidebar-brand {
  position: relative;
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid var(--sb-border);
}
.sidebar-brand img {
  width: auto; height: 26px;
  display: block; object-fit: contain; flex-shrink: 0;
}
.sidebar.close .sidebar-brand { justify-content: center; padding: 0; }
.sidebar.close .sidebar-brand img { width: auto; height: 18px; max-width: 60px; }
.sidebar-toggle {
  position: absolute; top: 20px; right: 12px;
  background: none; border: 0; color: var(--sb-txt-dim);
  font-size: 18px; line-height: 1; padding: 2px;
  transition: color var(--transition), transform var(--transition);
}
.sidebar-toggle:hover { color: #fff; }

/* Cadeado fechado = menu fixo aberto. Cadeado aberto = menu solto, estreito,
   que se abre ao passar o mouse. Com o menu estreito não há espaço para o
   botão; ele reaparece assim que o menu se expande — que é exatamente quando
   dá para clicar nele. */
.sidebar.close .sidebar-toggle {
  opacity: 0; pointer-events: none;
}
.sidebar-toggle[aria-pressed="false"] { color: var(--guug-blue-400); }
.sidebar-mobile-close { display: none; }

.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 0 8px; }

.nav-section {
  padding: 15px 20px 5px;
  font-size: 8.5px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sb-txt-dim);
  white-space: nowrap;
}
.sidebar.close .nav-section {
  padding: 14px 0 6px; text-align: center; font-size: 0;
}
.sidebar.close .nav-section::after {
  content: ''; display: block; width: 22px; height: 1px;
  margin: 0 auto; background: var(--sb-border);
}

.nav-item {
  display: flex; align-items: center; gap: 12px;
  margin: 2px 10px; padding: 9px 12px;
  border-radius: var(--radius);
  color: var(--sb-txt); font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; position: relative;
  transition: background var(--transition), color var(--transition);
}
.nav-item i { font-size: 19px; flex-shrink: 0; width: 22px; text-align: center; }
.nav-item:hover { background: var(--sb-hover); color: var(--sb-hover-txt); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(132,208,230,.18), rgba(132,208,230,.05));
  color: #fff; font-weight: 600;
}
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--guug-blue-400);
}
.nav-item.active i { color: var(--guug-blue-400); }
.nav-badge {
  margin-left: auto; background: var(--red); color: #fff;
  border-radius: var(--radius-full); font-size: 10px; font-weight: 700;
  padding: 1px 7px; line-height: 1.6; flex-shrink: 0;
}
.sidebar.close .nav-item { justify-content: center; padding: 11px 0; margin: 2px 12px; }
.sidebar.close .nav-item span:not(.nav-badge) { display: none; }
.sidebar.close .nav-item .nav-badge {
  position: absolute; top: 4px; right: 6px; margin: 0; padding: 0 4px; font-size: 9px;
}

.sidebar-footer {
  border-top: 1px solid var(--sb-border);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
}
.sidebar-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--guug-blue-400); color: var(--guug-ink-900);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .8rem; overflow: hidden;
}
.sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-user { min-width: 0; flex: 1; }
.sidebar-user strong {
  display: block; font-size: 12.5px; color: rgba(255,255,255,.92);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user small { font-size: 10.5px; color: var(--sb-txt); }
.sidebar-logout {
  background: rgba(255,255,255,.07); border: 0; border-radius: 9px;
  color: var(--sb-txt); width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  transition: background var(--transition), color var(--transition);
}
.sidebar-logout:hover { background: rgba(220,38,38,.28); color: #fff; }
.sidebar.close .sidebar-footer { flex-direction: column; gap: 10px; padding: 12px 6px; }
.sidebar.close .sidebar-user { display: none; }

/* ══ TOPBAR ═══════════════════════════════════════════════════ */
.topbar {
  height: var(--topbar-h);
  position: sticky; top: 0; z-index: 900;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px;
  padding: 0 24px;
}
.topbar-search {
  flex: 1; max-width: 460px; position: relative;
}
/* O seletor precisa incluir [type="search"]: a regra genérica de formulário
   vem depois no arquivo e, com a mesma especificidade, venceria — foi assim
   que o padding sumiu e a lupa passou a cair em cima do texto. */
.topbar-search input[type="search"] {
  width: 100%; height: 38px; min-height: 38px; padding: 0 14px 0 40px;
  border: 1px solid var(--border); border-radius: var(--radius-full);
  background: var(--surface-2); color: var(--txt); font-size: 13px;
  transition: border-color var(--transition), background var(--transition);
}
.topbar-search input[type="search"]:focus {
  outline: none; border-color: var(--accent-border); background: #fff;
}
.topbar-search i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--txt-dim); font-size: 17px;
  pointer-events: none;
}
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar-btn {
  width: 38px; height: 38px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--surface-1);
  color: var(--txt-muted); font-size: 18px; position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.topbar-btn:hover { border-color: var(--accent-border); color: var(--accent); background: var(--accent-dim); }
.topbar-btn .dot {
  position: absolute; top: 7px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); border: 2px solid var(--surface-1);
}
.menu-toggle-mobile { display: none; }

/* ══ LAYOUT ═══════════════════════════════════════════════════ */
.main-wrapper { min-height: 100vh; display: flex; flex-direction: column; min-width: 0; }
.app-view { flex: 1; padding: 24px; max-width: 1680px; width: 100%; margin: 0 auto; }

.app-footer {
  padding: 10px 24px 14px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  color: var(--txt-dim); font-size: 10.5px; font-weight: 500;
  letter-spacing: .025em; line-height: 1;
  opacity: .72;
}
.app-footer-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .65;
}

/* ══ CABEÇALHO DE PÁGINA ══════════════════════════════════════ */
.page-header {
  display: flex; align-items: flex-start; gap: 16px;
  flex-wrap: wrap; margin-bottom: 22px;
}
.page-header h1 { font-size: 1.5rem; letter-spacing: -.015em; }
.page-header p { color: var(--txt-muted); font-size: 13px; margin-top: 4px; }
.page-header-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.breadcrumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--txt-dim); margin-bottom: 8px;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb i { font-size: 13px; opacity: .6; }

/* ══ CARDS ════════════════════════════════════════════════════ */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card + .card { margin-top: 18px; }
.card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.card-head h2, .card-head h3 { font-size: .98rem; font-weight: 700; }
.card-head p { font-size: 12px; color: var(--txt-muted); margin-top: 2px; }
.card-head-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.card-body { padding: 20px; }
.card-body.tight { padding: 0; }
.card-foot {
  padding: 14px 20px; border-top: 1px solid var(--border);
  background: var(--surface-2);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* ══ ESTATÍSTICAS ═════════════════════════════════════════════ */
.stats-grid {
  display: grid; gap: 14px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.stat {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  position: relative; overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-label {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt-dim);
  display: flex; align-items: center; gap: 6px;
}
.stat-value {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 800;
  letter-spacing: -.03em; margin-top: 8px; line-height: 1.1;
}
.stat-value.sm { font-size: 1.3rem; }
.stat-sub { font-size: 11.5px; color: var(--txt-muted); margin-top: 5px; }
.stat-trend { font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.stat-trend.up { color: var(--green); }
.stat-trend.down { color: var(--red); }
.stat-icon {
  position: absolute; right: 14px; top: 14px;
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; background: var(--accent-dim); color: var(--accent);
}
.stat.is-green .stat-icon { background: var(--green-dim); color: var(--green); }
.stat.is-red .stat-icon { background: var(--red-dim); color: var(--red); }
.stat.is-yellow .stat-icon { background: var(--yellow-dim); color: var(--yellow); }
.stat.is-purple .stat-icon { background: var(--purple-dim); color: var(--purple); }
.stat.is-teal .stat-icon { background: var(--teal-dim); color: var(--teal); }

/* ══ GRID ═════════════════════════════════════════════════════ */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-sidebar { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }

/* ══ BOTÕES ═══════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; line-height: 1;
  white-space: nowrap; cursor: pointer;
  transition: all var(--transition);
}
.btn i { font-size: 17px; }
.btn:disabled, .btn.disabled { opacity: .5; pointer-events: none; }

.btn-accent {
  background: var(--guug-blue-600); color: #fff;
  box-shadow: 0 2px 8px rgba(71,177,216,.30);
}
.btn-accent:hover { background: var(--guug-blue-700); box-shadow: 0 4px 14px rgba(71,177,216,.38); }

.btn-dark { background: var(--guug-ink-900); color: #fff; }
.btn-dark:hover { background: var(--guug-ink-700); }

.btn-outline { background: transparent; border-color: var(--border-2); color: var(--txt-muted); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

.btn-ghost { background: transparent; color: var(--txt-muted); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--txt); }

.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { filter: brightness(.92); }

.btn-success { background: var(--green); color: #fff; }
.btn-success:hover { filter: brightness(.92); }

.btn-sm { height: 32px; padding: 0 12px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-sm i { font-size: 15px; }
.btn-lg { height: 44px; padding: 0 22px; font-size: 14px; }
.btn-icon { width: 34px; padding: 0; }
.btn-icon.btn-sm { width: 30px; }
.btn-block { width: 100%; }

.btn-group { display: inline-flex; gap: 0; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.btn-group .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }

/* ══ FORMULÁRIOS ══════════════════════════════════════════════ */
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(12, 1fr); }

/* As doze larguras existem todas: uma classe sem regra fazia o campo cair
   para 1/12 e aparecer espremido no meio da linha. */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Grade uniforme: todos os campos com a mesma largura, distribuída pela
   linha. É o que usar quando a seção tem campos condicionais — com spans
   fixos, o campo que some deixa buraco e o último fica sozinho e estreito. */
.form-grid.uniforme {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.form-grid.uniforme > .field { grid-column: auto; }
.form-grid.uniforme > .field.col-12 { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label {
  font-size: 11.5px; font-weight: 600; color: var(--txt-muted);
  display: flex; align-items: center; gap: 5px;
}
.field label .req { color: var(--red); }
.field .hint { font-size: 11px; color: var(--txt-dim); }
.field .err { font-size: 11.5px; color: var(--red); font-weight: 500; }

.input, .select, .textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="time"], input[type="tel"], input[type="url"], input[type="search"],
select, textarea {
  width: 100%; min-height: 38px; padding: 8px 12px;
  border: 1px solid var(--border-2); border-radius: var(--radius);
  background: var(--bg-input); color: var(--txt); font-size: 13px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
textarea { min-height: 90px; resize: vertical; line-height: 1.55; }
select { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356646F' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
  padding-right: 32px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-3); color: var(--txt-dim); cursor: not-allowed;
}
input.is-invalid, select.is-invalid, textarea.is-invalid {
  border-color: var(--red); box-shadow: 0 0 0 3px var(--red-dim);
}
::placeholder { color: var(--txt-dim); }

.input-group { display: flex; align-items: stretch; }
.input-group .prefix, .input-group .suffix {
  display: flex; align-items: center; padding: 0 11px;
  background: var(--surface-3); border: 1px solid var(--border-2);
  font-size: 12px; color: var(--txt-muted); white-space: nowrap;
}
.input-group .prefix { border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
.input-group .suffix { border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; }
.input-group .prefix + input, .input-group .prefix + select { border-radius: 0 var(--radius) var(--radius) 0; }
.input-group input:has(+ .suffix), .input-group select:has(+ .suffix) { border-radius: var(--radius) 0 0 var(--radius); }

.check {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; cursor: pointer; user-select: none;
}
.check input[type="checkbox"], .check input[type="radio"] {
  width: 17px; height: 17px; min-height: 0; margin-top: 1px;
  accent-color: var(--accent); cursor: pointer; flex-shrink: 0;
}
.check span { color: var(--txt-muted); line-height: 1.45; }

/* `.field label` é mais específico que `.check` e encolhia o texto do
   checkbox só quando ele estava dentro de um campo. */
.field label.check { font-size: 13px; font-weight: 500; }

/* Um campo que é só um check não tem linha de rótulo em cima; sem esta
   compensação ele subiria e ficaria desalinhado dos campos vizinhos. A
   altura mínima iguala a de um campo com rótulo + controle. */
.form-grid > .field:has(> label.check:first-child) {
  padding-top: 23px;
  min-height: 61px;
  justify-content: flex-start;
}

/* Bloco de opções relacionadas: elas se alinham entre si, com rótulo
   próprio, em vez de disputarem colunas com campos de texto. */
.check-grid {
  display: grid; gap: 10px 18px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface-2);
}
.check-grid .check { align-items: flex-start; }
.check-grid .check-note { grid-column: 1 / -1; font-size: 11px; color: var(--txt-dim); }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { display: none; }
.switch .track {
  width: 40px; height: 22px; border-radius: var(--radius-full);
  background: var(--surface-4); position: relative; transition: background var(--transition);
}
.switch .track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow-sm); transition: transform var(--transition);
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(18px); }

.form-section {
  border-top: 1px solid var(--border);
  padding-top: 18px; margin-top: 20px;
}
.form-section:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.form-section-title {
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px; display: flex; align-items: center; gap: 7px;
}
.form-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-top: 18px; margin-top: 20px; border-top: 1px solid var(--border);
}

/* ══ FILTROS ══════════════════════════════════════════════════ */
.filters {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 16px;
}
.filters form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filters .field { flex: 1 1 165px; min-width: 140px; }
.filters .field.wide { flex: 2 1 260px; }
.filters .actions { display: flex; gap: 8px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--radius-full);
  background: var(--accent-dim); color: var(--accent-dark);
  font-size: 11.5px; font-weight: 600;
}
.chip a { opacity: .65; font-size: 13px; line-height: 1; }
.chip a:hover { opacity: 1; }

/* ══ TABELAS ══════════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; }
table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
thead th {
  text-align: left; padding: 11px 14px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--txt-dim);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
thead th[data-sortable="1"] { cursor: pointer; user-select: none; }
thead th[data-sortable="1"]:hover { color: var(--accent); }
thead th[aria-sort]::after { content: ' ↑'; opacity: .8; }
thead th[aria-sort="descending"]::after { content: ' ↓'; }
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.actions, th.actions { text-align: right; white-space: nowrap; width: 1%; }
td.actions .btn + .btn { margin-left: 4px; }
/* Ações que exigem POST (com CSRF) vêm dentro de um form; sem isto ele
   quebraria a linha e empilharia os botões. O alinhamento acompanha o dos
   botões vizinhos, que são inline-flex alinhados pela baseline. */
td.actions form { display: inline-flex; margin-left: 4px; vertical-align: baseline; }
.table-empty { padding: 48px 20px; text-align: center; color: var(--txt-dim); }
.table-empty i { font-size: 42px; opacity: .35; display: block; margin-bottom: 10px; }
.table-empty strong { display: block; color: var(--txt-muted); font-size: 14px; margin-bottom: 4px; }

.cell-title { font-weight: 600; color: var(--txt); display: block; }
.cell-sub { font-size: 11.5px; color: var(--txt-dim); display: block; margin-top: 1px; }
.cell-code { font-family: var(--font-mono); font-size: 11.5px; color: var(--txt-dim); }

/* ══ BADGES ═══════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--radius-full);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap; line-height: 1.6;
}
.badge i { font-size: 12px; }
.badge-neutral { background: var(--surface-3); color: var(--txt-muted); }
.badge-accent  { background: var(--accent-dim); color: var(--accent-dark); }
.badge-green   { background: var(--green-dim); color: var(--green); }
.badge-red     { background: var(--red-dim); color: var(--red); }
.badge-yellow  { background: var(--yellow-dim); color: var(--yellow); }
.badge-blue    { background: var(--blue-dim); color: var(--blue); }
.badge-purple  { background: var(--purple-dim); color: var(--purple); }
.badge-teal    { background: var(--teal-dim); color: var(--teal); }
.badge-dark    { background: var(--guug-ink-900); color: #fff; }
.badge-lg { padding: 5px 12px; font-size: 11.5px; }

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

/* Temperatura */
.temp { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; }
.temp-cold { color: var(--temp-cold); }
.temp-warm { color: var(--temp-warm); }
.temp-hot  { color: var(--temp-hot); }

/* ══ ALERTAS ══════════════════════════════════════════════════ */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 16px; border-radius: var(--radius);
  border: 1px solid; font-size: 13px; margin-bottom: 18px;
  line-height: 1.5;
}
.alert i { font-size: 19px; flex-shrink: 0; }
.alert-success { background: var(--green-dim); border-color: rgba(22,163,74,.28); color: #14532D; }
.alert-error   { background: var(--red-dim);   border-color: rgba(220,38,38,.28);  color: #7F1D1D; }
.alert-warning { background: var(--yellow-dim);border-color: rgba(217,119,6,.28);  color: #78350F; }
.alert-info    { background: var(--accent-dim);border-color: var(--accent-border);  color: #0C4A60; }
.alert-close { margin-left: auto; background: none; border: 0; color: inherit; opacity: .55; font-size: 18px; line-height: 1; }
.alert-close:hover { opacity: 1; }

/* ══ TABS ═════════════════════════════════════════════════════ */
.tabs {
  display: flex; gap: 2px; overflow-x: auto;
  border-bottom: 1px solid var(--border); margin-bottom: 20px;
}
.tab {
  padding: 10px 15px; font-size: 13px; font-weight: 600;
  color: var(--txt-muted); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: flex; align-items: center; gap: 6px;
  transition: color var(--transition), border-color var(--transition);
}
.tab i { font-size: 16px; }
.tab:hover { color: var(--txt); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab .count {
  background: var(--surface-3); color: var(--txt-dim);
  border-radius: var(--radius-full); padding: 0 6px;
  font-size: 10.5px; font-weight: 700;
}
.tab.active .count { background: var(--accent-dim); color: var(--accent-dark); }

/* ══ PAGINAÇÃO ════════════════════════════════════════════════ */
.pagination {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--txt-muted);
}
.pagination .pages { margin-left: auto; display: flex; gap: 4px; }
.pagination .pages a, .pagination .pages span {
  min-width: 32px; height: 32px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-weight: 600; transition: all var(--transition);
}
.pagination .pages a:hover { border-color: var(--accent); color: var(--accent); }
.pagination .pages .current { background: var(--accent); border-color: var(--accent); color: #fff; }
.pagination .pages .gap { border: 0; }

/* ══ TIMELINE ═════════════════════════════════════════════════ */
.timeline { position: relative; padding-left: 30px; }
.timeline::before {
  content: ''; position: absolute; left: 11px; top: 6px; bottom: 6px;
  width: 2px; background: var(--surface-4);
}
.tl-item { position: relative; padding-bottom: 20px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: -30px; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-1); border: 2px solid var(--surface-4);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--txt-dim);
}
.tl-item.is-accent .tl-dot { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.tl-item.is-green .tl-dot  { border-color: var(--green); color: var(--green); background: var(--green-dim); }
.tl-item.is-red .tl-dot    { border-color: var(--red); color: var(--red); background: var(--red-dim); }
.tl-item.is-yellow .tl-dot { border-color: var(--yellow); color: var(--yellow); background: var(--yellow-dim); }
.tl-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tl-title { font-weight: 600; font-size: 13px; }
.tl-time { font-size: 11px; color: var(--txt-dim); margin-left: auto; }
.tl-body { font-size: 12.5px; color: var(--txt-muted); margin-top: 4px; line-height: 1.55; }
.tl-meta { font-size: 11px; color: var(--txt-dim); margin-top: 5px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ══ KANBAN ═══════════════════════════════════════════════════ */
.kanban {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 14px;
  align-items: flex-start; min-height: 60vh;
}
.kanban-col {
  flex: 0 0 296px; width: 296px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 210px);
}
.kanban-col.drop-target { border-color: var(--accent); background: var(--accent-dim); }
.kanban-col-head {
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.kanban-col-head .stage-color {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.kanban-col-head strong { font-size: 12.5px; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kanban-col-head .count {
  background: var(--surface-4); color: var(--txt-muted);
  border-radius: var(--radius-full); padding: 1px 8px;
  font-size: 10.5px; font-weight: 700;
}
.kanban-col-total {
  padding: 6px 14px; font-size: 11px; font-weight: 700;
  color: var(--txt-muted); border-bottom: 1px solid var(--border);
  background: var(--surface-3); flex-shrink: 0;
}
.kanban-cards { padding: 10px; overflow-y: auto; flex: 1; min-height: 90px; }
.kanban-empty { padding: 24px 10px; text-align: center; font-size: 11.5px; color: var(--txt-dim); }

.kanban-card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-left: 3px solid var(--surface-4);
  border-radius: var(--radius); padding: 11px 12px;
  margin-bottom: 9px; cursor: grab;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.kanban-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kanban-card.dragging { opacity: .45; cursor: grabbing; }
.kanban-card.temp-hot  { border-left-color: var(--temp-hot); }
.kanban-card.temp-warm { border-left-color: var(--temp-warm); }
.kanban-card.temp-cold { border-left-color: var(--temp-cold); }
.kanban-card.is-stale  { border-left-color: var(--red); background: #FFFAFA; }
.kc-title { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.kc-sub { font-size: 11px; color: var(--txt-dim); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-value { font-size: 13px; font-weight: 800; color: var(--accent-dark);
  margin-top: 7px; font-variant-numeric: tabular-nums; }
.kc-foot {
  display: flex; align-items: center; gap: 7px; margin-top: 9px;
  padding-top: 8px; border-top: 1px solid var(--border);
  font-size: 10.5px; color: var(--txt-dim);
}
.kc-foot .avatar-xs {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-dim); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; flex-shrink: 0;
}
.kc-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 7px; }

/* ══ FUNIL ════════════════════════════════════════════════════ */
.funnel { display: flex; flex-direction: column; gap: 4px; }
.funnel-row { display: flex; align-items: center; gap: 12px; }
.funnel-label { flex: 0 0 165px; font-size: 12px; color: var(--txt-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funnel-bar-wrap { flex: 1; background: var(--surface-3); border-radius: var(--radius-sm); height: 26px; overflow: hidden; }
.funnel-bar {
  height: 100%; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--guug-blue-400), var(--guug-blue-600));
  display: flex; align-items: center; padding: 0 9px;
  font-size: 11px; font-weight: 700; color: #fff;
  min-width: 34px; transition: width .6s cubic-bezier(.4,0,.2,1);
}
.funnel-value { flex: 0 0 105px; text-align: right; font-size: 12px;
  font-weight: 700; font-variant-numeric: tabular-nums; }

/* ══ BARRA DE PROGRESSO ═══════════════════════════════════════ */
.progress { height: 7px; background: var(--surface-3); border-radius: var(--radius-full); overflow: hidden; }
.progress-bar { height: 100%; border-radius: var(--radius-full); background: var(--accent); transition: width .6s ease; }
.progress-bar.is-green { background: var(--green); }
.progress-bar.is-red { background: var(--red); }
.progress-bar.is-yellow { background: var(--yellow); }

/* ══ ETAPAS (stepper) ═════════════════════════════════════════ */
.stepper { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 6px; }
.step {
  flex: 1; min-width: 96px; padding: 8px 10px 8px 20px;
  background: var(--surface-3); color: var(--txt-dim);
  font-size: 11px; font-weight: 600; position: relative;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%);
}
.step:first-child { clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%); padding-left: 12px; }
.step.done { background: var(--accent-dim); color: var(--accent-dark); }
.step.current { background: var(--guug-blue-600); color: #fff; }

/* ══ AVATAR ═══════════════════════════════════════════════════ */
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-dim); color: var(--accent-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .78rem; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 28px; height: 28px; font-size: .68rem; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.1rem; }
.avatar-xl { width: 84px; height: 84px; font-size: 1.6rem; }

/* ══ MODAL ════════════════════════════════════════════════════ */
dialog.modal {
  border: 0; padding: 0; max-width: 92vw; width: 520px;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  background: var(--surface-1); color: var(--txt);
  /* O reset global zera a margem de tudo, inclusive a `margin: auto` que o
     navegador usa para centralizar o dialog modal — sem esta linha, todo
     pop-up abre grudado no canto superior esquerdo. */
  margin: auto;
  max-height: calc(100vh - 48px);
}
dialog.modal::backdrop { background: rgba(14,17,20,.55); backdrop-filter: blur(3px); }
dialog.modal.wide { width: 820px; }
.modal-head {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.modal-head h3 { font-size: 1rem; }
.modal-close { margin-left: auto; background: none; border: 0; font-size: 20px; color: var(--txt-dim); line-height: 1; }
.modal-close:hover { color: var(--txt); }
.modal-body { padding: 20px; max-height: 70vh; overflow-y: auto; }
.modal-foot {
  padding: 14px 20px; border-top: 1px solid var(--border);
  background: var(--surface-2); display: flex; gap: 10px; justify-content: flex-end;
}

/* ══ DROPDOWN ═════════════════════════════════════════════════ */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 800;
  min-width: 190px; padding: 6px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: none;
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-menu a, .dropdown-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: 0; background: none;
  border-radius: var(--radius-sm); font-size: 12.5px;
  color: var(--txt-muted); text-align: left;
  transition: background var(--transition), color var(--transition);
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--bg-hover); color: var(--txt); }
.dropdown-menu a.danger, .dropdown-menu button.danger { color: var(--red); }
.dropdown-menu hr { border: 0; border-top: 1px solid var(--border); margin: 5px 0; }

/* ══ AUTENTICAÇÃO ═════════════════════════════════════════════ */
body.auth-body { padding-left: 0; background: var(--guug-ink-900); }
.auth-wrap { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

.auth-visual {
  position: relative; overflow: hidden;
  background: var(--guug-ink-900);
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px 60px; color: #fff;
}
.auth-visual::before {
  content: ''; position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .30; filter: grayscale(1);
}
.auth-visual::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(14,17,20,.94) 20%, rgba(14,17,20,.66) 100%);
}
.auth-visual > * { position: relative; z-index: 2; }
/* align-self é obrigatório: .auth-visual é um flex em coluna e o padrão
   (stretch) esticaria a imagem até a largura da coluna, deformando o logo. */
.auth-logo {
  height: 42px; width: auto; margin-bottom: 42px;
  align-self: flex-start; object-fit: contain; flex-shrink: 0;
}
.auth-visual h1 {
  font-size: 2.6rem; line-height: 1.12; letter-spacing: -.03em; font-weight: 800;
}
.auth-visual h1 span { color: var(--guug-blue-400); }
.auth-visual p { margin-top: 16px; font-size: 14px; color: rgba(255,255,255,.66); max-width: 440px; line-height: 1.65; }
.auth-features { margin-top: 42px; display: flex; flex-direction: column; gap: 18px; }
.auth-feature { display: flex; gap: 14px; align-items: flex-start; }
.auth-feature-icon {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: rgba(132,208,230,.14); color: var(--guug-blue-400);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.auth-feature strong { display: block; font-size: 13.5px; }
.auth-feature small { font-size: 12px; color: rgba(255,255,255,.52); line-height: 1.5; }
.auth-tagline {
  margin-top: 48px; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.34);
}

.auth-form-wrap {
  background: var(--surface-1);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 28px;
}
.auth-form { width: 100%; max-width: 372px; }
.auth-form h2 { font-size: 1.55rem; letter-spacing: -.02em; text-align: center; }
.auth-form > p { color: var(--txt-muted); font-size: 13px; margin: 6px 0 26px; text-align: center; }
.auth-form .field { margin-bottom: 15px; }
.auth-form .btn { margin-top: 6px; }
.auth-links { margin-top: 20px; text-align: center; font-size: 12.5px; color: var(--txt-muted); }
.auth-links a { color: var(--accent); font-weight: 600; }
.auth-links a:hover { text-decoration: underline; }
.auth-mobile-logo {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 26px;
}

/* ══ PÁGINA DE ERRO ═══════════════════════════════════════════ */
body.error-body { padding-left: 0; }
.error-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 40px 24px; text-align: center;
}
.error-page .code {
  font-family: var(--font-display); font-size: 6rem; font-weight: 800;
  line-height: 1; letter-spacing: -.05em; color: var(--guug-blue-400);
}
.error-page h1 { font-size: 1.5rem; margin: 12px 0 8px; }
.error-page p { color: var(--txt-muted); font-size: 13.5px; max-width: 420px; margin: 0 auto 24px; line-height: 1.6; }
.error-page pre {
  text-align: left; background: var(--surface-3); padding: 14px;
  border-radius: var(--radius); font-size: 11.5px; overflow: auto;
  max-width: 760px; margin: 24px auto 0; max-height: 320px;
}

/* ══ UTILITÁRIOS ══════════════════════════════════════════════ */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; min-width: 0; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; } .mt-5 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 24px; }
.ml-auto { margin-left: auto; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--txt-muted); }
.text-dim { color: var(--txt-dim); }
.text-accent { color: var(--accent); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-yellow { color: var(--yellow); }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }
.text-lg { font-size: 15px; }
.font-bold { font-weight: 700; }
.font-mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-full { width: 100%; }
.hidden { display: none !important; }
.divider { height: 1px; background: var(--border); margin: 16px 0; border: 0; }

.empty-state { padding: 56px 20px; text-align: center; }
.empty-state i { font-size: 52px; color: var(--surface-4); display: block; margin-bottom: 14px; }
.empty-state strong { display: block; font-size: 15px; margin-bottom: 6px; }
.empty-state p { color: var(--txt-muted); font-size: 13px; max-width: 380px; margin: 0 auto 18px; line-height: 1.6; }

.definition { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 9px 16px; font-size: 13px; }
.definition dt { color: var(--txt-dim); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; align-self: center; }
.definition dd { color: var(--txt); font-weight: 500; }

/* ══ NAVEGAÇÃO MOBILE ═════════════════════════════════════════ */
.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 1150;
  background: rgba(14,17,20,.5); border: 0; display: none;
}
body.sidebar-mobile-open .sidebar-backdrop { display: block; }

.mobile-nav { display: none; }

@media (max-width: 1100px) {
  .grid-sidebar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  body, body.sidebar-compact { padding-left: 0; padding-bottom: 66px; }
  .sidebar,
  .sidebar.close { transform: translateX(-100%); width: var(--sidebar-w) !important; }
  body.sidebar-mobile-open .sidebar { transform: translateX(0); }

  /* No celular o menu é gaveta, nunca compacto: quando aberto mostra tudo.
     Cada seletor repete o do desktop — com especificidade menor a regra
     original venceria e os rótulos continuariam invisíveis. */
  .sidebar.close .sidebar-brand { justify-content: flex-start; padding: 0 18px; }
  .sidebar.close .sidebar-brand img { display: block; width: auto; height: 26px; max-width: none; }
  .sidebar.close .nav-item span:not(.nav-badge) { display: inline; }
  .sidebar.close .nav-section {
    padding: 15px 20px 5px; font-size: 8.5px; text-align: left;
  }
  .sidebar.close .nav-section::after { display: none; }
  .sidebar.close .nav-item { justify-content: flex-start; padding: 9px 12px; margin: 2px 12px; }
  .sidebar.close .sidebar-footer { flex-direction: row; padding: 12px 16px; }
  .sidebar.close .sidebar-user { display: block; }

  .sidebar-toggle,
  .sidebar.close .sidebar-toggle { display: none; }
  .sidebar-mobile-close {
    position: absolute; top: 11px; right: 14px;
    width: 40px; height: 40px; border: 0; border-radius: 9px;
    background: var(--sb-hover); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
  }
  .menu-toggle-mobile { display: flex; }

  /* Header do celular: só os botões. A busca continua disponível na página
     de cada módulo, e aqui roubaria a largura toda. */
  .topbar-search { display: none; }

  .app-view { padding: 16px; }
  .topbar { padding: 0 16px; gap: 8px; }
  .topbar-actions { margin-left: auto; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-mobile-logo { display: flex; margin-bottom: 26px; }
  .auth-mobile-logo img { height: 34px; }
  .auth-form-wrap { min-height: 100vh; }
  .form-grid > [class^="col-"] { grid-column: span 12; }
  .col-6.keep, .col-4.keep, .col-3.keep { grid-column: span 6; }
  .page-header h1 { font-size: 1.25rem; }
  .stat-value { font-size: 1.45rem; }
  .kanban-col { flex-basis: 82vw; width: 82vw; max-height: none; }
  .definition { grid-template-columns: 1fr; gap: 3px 0; }
  .definition dd { margin-bottom: 10px; }

  .mobile-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    height: 62px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--surface-1); border-top: 1px solid var(--border);
    box-shadow: 0 -3px 16px rgba(14,17,20,.09);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-nav a, .mobile-nav button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; border: 0; background: none; position: relative;
    font-size: 9.5px; font-weight: 600; color: var(--txt-dim);
  }
  .mobile-nav i { font-size: 21px; }
  .mobile-nav .active { color: var(--accent); }
  .mobile-nav .nav-badge { position: absolute; top: 7px; right: 22%; margin: 0; }
}

@media (max-width: 560px) {
  .page-header-actions { width: 100%; }
  .page-header-actions .btn { flex: 1; }
  .filters .field { flex-basis: 100%; }
  .card-head { padding: 14px; }
  .card-body { padding: 14px; }
  thead th, tbody td { padding: 10px; }
}

@media print {
  body { padding: 0; background: #fff; }
  .sidebar, .topbar, .mobile-nav, .app-footer, .page-header-actions,
  .filters, .btn, .pagination { display: none !important; }
  .card { border: 1px solid #ddd; box-shadow: none; break-inside: avoid; }
  .app-view { padding: 0; max-width: none; }
}

/* ══ CENTRAL DE AJUDA ═════════════════════════════════════════ */
.help-search {
  display: flex; align-items: center; gap: 10px; position: relative;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 10px 12px 10px 42px;
  box-shadow: var(--shadow-sm); margin-bottom: 22px;
}
.help-search > i {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: 19px; color: var(--txt-dim); pointer-events: none;
}
.help-search input[type="search"] {
  flex: 1; border: 0; background: none; min-height: 34px; padding: 0;
  font-size: 14px; box-shadow: none;
}
.help-search input[type="search"]:focus { outline: none; box-shadow: none; }

.help-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}
.help-category {
  display: block; padding: 18px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.help-category:hover {
  border-color: var(--accent-border); transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.help-category-icon {
  width: 40px; height: 40px; border-radius: 12px; margin-bottom: 12px;
  background: var(--accent-dim); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.help-category strong { display: block; font-size: 14px; margin-bottom: 5px; }
.help-category p { font-size: 12.5px; color: var(--txt-muted); line-height: 1.5; }
.help-category-count {
  display: inline-block; margin-top: 10px; font-size: 11px;
  color: var(--txt-dim); font-weight: 600;
}

.help-featured { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.help-featured-item {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color var(--transition), background var(--transition);
}
.help-featured-item:hover { border-color: var(--accent-border); background: var(--surface-2); }
.help-featured-item > i { font-size: 20px; color: var(--accent); margin-top: 2px; }
.help-featured-item strong { display: block; font-size: 13px; }
.help-featured-item small { display: block; font-size: 11.5px; color: var(--txt-muted); margin-top: 3px; line-height: 1.45; }

.help-layout { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 18px; align-items: start; }
.help-aside .card { position: sticky; top: calc(var(--topbar-h) + 16px); }

.help-list { display: flex; flex-direction: column; }
.help-list-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px; border-top: 1px solid var(--border);
  transition: background var(--transition);
}
.help-list-item:first-child { border-top: 0; }
.help-list-item:hover { background: var(--surface-2); }
.help-list-item strong { display: block; font-size: 13.5px; font-weight: 600; }
.help-list-item small { display: block; font-size: 12px; color: var(--txt-muted); margin-top: 3px; line-height: 1.45; }
.help-list-item > i { color: var(--txt-dim); font-size: 18px; flex-shrink: 0; }
.help-crumb { display: inline-block; margin-top: 6px; font-size: 11px; color: var(--txt-dim); }

.help-nav { display: flex; flex-direction: column; padding: 6px; }
.help-nav a {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border-radius: var(--radius-sm); font-size: 12.5px; color: var(--txt-muted);
  transition: background var(--transition), color var(--transition);
}
.help-nav a:hover { background: var(--surface-2); color: var(--txt); }
.help-nav a.active { background: var(--accent-dim); color: var(--accent-dark); font-weight: 600; }
.help-nav a span { flex: 1; min-width: 0; }
.help-nav a em { font-style: normal; font-size: 11px; color: var(--txt-dim); }

.help-article .card-body { font-size: 14px; line-height: 1.7; color: var(--txt); }
.help-article p { margin-bottom: 14px; }
.help-article ul, .help-article ol { margin: 0 0 16px 22px; }
.help-article li { margin-bottom: 8px; }
.help-article strong { font-weight: 600; }
.help-article em { color: var(--txt-muted); }
.help-rating { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.help-empty { text-align: center; padding: 44px 24px; }
.help-empty > i { font-size: 44px; color: var(--txt-dim); }
.help-empty h2 { margin: 14px 0 8px; font-size: 1.15rem; }
.help-empty p { color: var(--txt-muted); max-width: 520px; margin: 0 auto 10px; font-size: 13px; line-height: 1.6; }

.glossary-index { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.glossary-index a {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-1); border: 1px solid var(--border);
  font-weight: 700; font-size: 12px; color: var(--txt-muted);
}
.glossary-index a:hover { border-color: var(--accent-border); color: var(--accent); }
.glossary-list { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.glossary-term h3 { font-size: 14px; margin-bottom: 4px; }
.glossary-short { font-size: 12.5px; color: var(--accent-dark); font-weight: 500; margin-bottom: 6px; }
.glossary-body { font-size: 13px; color: var(--txt-muted); line-height: 1.6; }

/* Painel de ajuda contextual, aberto pelo "?" da barra superior */
.help-popover {
  position: fixed; top: calc(var(--topbar-h) + 8px); right: 18px; z-index: 1300;
  width: min(380px, calc(100vw - 32px));
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.help-popover[hidden] { display: none; }
.help-popover-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.help-popover-head strong { flex: 1; font-size: 13px; }
.help-popover-body { max-height: min(60vh, 420px); overflow-y: auto; }
.help-popover-foot { padding: 10px 16px; border-top: 1px solid var(--border); }
.help-popover .help-list-item { padding: 11px 16px; }

/* Tour de primeiro acesso */
.tour-overlay {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(14,17,20,.62);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.tour-overlay[hidden] { display: none; }
.tour-card {
  width: min(520px, 100%); background: var(--surface-1);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.tour-card-head { padding: 26px 26px 0; display: flex; gap: 14px; align-items: flex-start; }
.tour-card-icon {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  background: var(--accent-dim); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.tour-card-head h2 { font-size: 1.2rem; }
.tour-card-body { padding: 14px 26px 22px; font-size: 13.5px; line-height: 1.65; color: var(--txt-muted); }
.tour-card-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-top: 1px solid var(--border); background: var(--surface-2);
}
.tour-dots { display: flex; gap: 5px; flex: 1; }
.tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--surface-4); }
.tour-dot.active { background: var(--accent); }

@media (max-width: 900px) {
  .help-layout { grid-template-columns: minmax(0, 1fr); }
  .help-aside .card { position: static; }
  .help-popover { right: 8px; left: 8px; width: auto; }
}

/* ══ CAIXA DE ENTRADA DO WHATSAPP ═════════════════════════════ */
.inbox {
  display: grid;
  grid-template-columns: 300px minmax(360px, 1fr) 280px;
  gap: 14px;
  height: calc(100vh - var(--topbar-h) - 150px);
  min-height: 460px;
}
.inbox-list, .inbox-thread {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden;
}
.inbox-panel { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.inbox-panel .card { margin: 0; }

.inbox-search { position: relative; padding: 12px 12px 8px; }
.inbox-search > i {
  position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  color: var(--txt-dim); font-size: 16px; pointer-events: none;
}
.inbox-search input[type="search"] {
  width: 100%; min-height: 34px; padding: 0 12px 0 34px;
  border-radius: var(--radius-full); font-size: 12.5px;
}

.inbox-tabs { display: flex; gap: 4px; padding: 0 12px 10px; border-bottom: 1px solid var(--border); }
.inbox-tabs a {
  flex: 1; text-align: center; padding: 6px 4px; border-radius: var(--radius-sm);
  font-size: 11.5px; font-weight: 600; color: var(--txt-muted);
}
.inbox-tabs a:hover { background: var(--surface-2); }
.inbox-tabs a.active { background: var(--accent-dim); color: var(--accent-dark); }
.inbox-tabs a em {
  font-style: normal; margin-left: 3px; padding: 0 5px; border-radius: var(--radius-full);
  background: var(--accent); color: #fff; font-size: 10px;
}

.inbox-items { flex: 1; overflow-y: auto; }
.inbox-item {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px;
  border-bottom: 1px solid var(--border); position: relative;
  transition: background var(--transition);
}
.inbox-item:hover { background: var(--surface-2); }
.inbox-item.active { background: var(--accent-dim); }
.inbox-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--guug-blue-400); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.inbox-item-body { min-width: 0; flex: 1; }
.inbox-item-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.inbox-item-top strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-item-top small { font-size: 10.5px; color: var(--txt-dim); flex-shrink: 0; }
.inbox-item p {
  font-size: 12px; color: var(--txt-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inbox-item-meta { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.inbox-chip {
  font-size: 10px; color: var(--txt-dim); display: inline-flex; align-items: center; gap: 3px;
}
.inbox-chip-warn { color: var(--yellow); }
.inbox-unread {
  position: absolute; right: 12px; bottom: 12px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full);
  background: var(--green); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.inbox-empty { padding: 28px 16px; text-align: center; color: var(--txt-dim); font-size: 12.5px; }

.inbox-thread-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.inbox-thread-head strong { display: block; font-size: 13.5px; }
.inbox-thread-head small { font-size: 11px; color: var(--txt-muted); }
.inbox-thread-actions { display: flex; gap: 6px; align-items: center; }
.inbox-thread-actions form { display: inline-flex; }

.inbox-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface-3);
}
.msg { display: flex; flex-direction: column; max-width: 74%; }
.msg-in { align-self: flex-start; }
.msg-out { align-self: flex-end; align-items: flex-end; }
.msg-bubble {
  padding: 8px 11px; border-radius: 12px; font-size: 13px; line-height: 1.5;
  background: var(--surface-1); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.msg-out .msg-bubble { background: var(--accent-dim); border-color: var(--accent-border); }
.msg-failed .msg-bubble { background: var(--red-dim); border-color: var(--red); }
.msg-text { white-space: pre-wrap; word-break: break-word; }
.msg-meta {
  display: block; margin-top: 4px; font-size: 10px; color: var(--txt-dim); text-align: right;
}
.msg-error { font-size: 10.5px; color: var(--red); margin-top: 3px; }
.msg-image { max-width: 240px; border-radius: 8px; display: block; margin-bottom: 4px; }
.msg-audio, .msg-video { max-width: 260px; display: block; margin-bottom: 4px; }
.msg-file {
  display: flex; gap: 8px; align-items: center; padding: 6px;
  border-radius: 8px; background: var(--surface-2); margin-bottom: 4px;
}
.msg-file i { font-size: 22px; color: var(--accent); }
.msg-file strong { display: block; font-size: 12px; }
.msg-file small { font-size: 10.5px; color: var(--txt-dim); }

.inbox-composer {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface-1);
}
.inbox-composer textarea {
  flex: 1; min-height: 38px; max-height: 130px; resize: none; padding: 9px 12px;
  border-radius: var(--radius-lg); font-size: 13px;
}
.inbox-template { max-width: 130px; min-height: 38px; font-size: 12px; }
.inbox-attach {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--txt-muted);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.inbox-attach:hover { border-color: var(--accent-border); color: var(--accent); }
.inbox-attach input { display: none; }
.inbox-attach-name { padding: 0 14px 8px; font-size: 11.5px; color: var(--accent-dark); }

.inbox-placeholder {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 30px; color: var(--txt-muted);
}
.inbox-placeholder > i { font-size: 46px; color: var(--guug-blue-400); }
.inbox-placeholder h2 { margin: 12px 0 6px; font-size: 1.1rem; color: var(--txt); }
.inbox-placeholder p { font-size: 12.5px; max-width: 320px; }

.inbox-notes { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.inbox-note { padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); }
.inbox-note p { font-size: 12px; line-height: 1.5; }
.inbox-note small { font-size: 10.5px; color: var(--txt-dim); }
.inbox-events { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.inbox-events li { font-size: 12px; line-height: 1.45; }
.inbox-events strong { font-size: 12px; }
.inbox-events small { display: block; font-size: 10.5px; color: var(--txt-dim); }
.inbox-events em { display: block; font-size: 11px; color: var(--txt-muted); font-style: normal; }

.qr-box { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.qr-image { width: 240px; height: 240px; border-radius: var(--radius); border: 1px solid var(--border); }

/* O painel do cliente é o primeiro a sair quando falta largura: a conversa
   espremida é pior do que ficar sem o resumo ao lado. */
@media (max-width: 1400px) {
  .inbox { grid-template-columns: 280px minmax(0, 1fr); }
  .inbox-panel { display: none; }
}
@media (max-width: 900px) {
  .inbox { grid-template-columns: minmax(0, 1fr); height: auto; }
  .inbox-list { max-height: 340px; }
  .inbox-thread { min-height: 60vh; }
  .msg { max-width: 88%; }
}

/* Perfil do cliente, aberto ao clicar na foto da conversa */
.inbox-avatar-btn { border: 0; cursor: pointer; font: inherit; }
.inbox-avatar-btn:hover { filter: brightness(1.12); }
.inbox-avatar-lg { width: 62px; height: 62px; font-size: 20px; margin: 0 auto 10px; }

.inbox-profile { position: fixed; inset: 0; z-index: 1300; display: flex; justify-content: flex-end; }
.inbox-profile[hidden] { display: none; }
.inbox-profile-backdrop {
  position: absolute; inset: 0; border: 0; padding: 0;
  background: rgba(14,17,20,.5); backdrop-filter: blur(2px);
}
.inbox-profile-panel {
  position: relative; width: min(380px, 100%); height: 100%;
  background: var(--surface-2); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  animation: inbox-profile-in .2s ease-out;
}
@keyframes inbox-profile-in { from { transform: translateX(24px); opacity: .4; } }
.inbox-profile-head {
  position: relative; padding: 22px 20px 18px; text-align: center;
  background: var(--surface-1); border-bottom: 1px solid var(--border);
}
.inbox-profile-head .modal-close { position: absolute; top: 10px; right: 12px; margin: 0; }
.inbox-profile-head h2 { font-size: 1.05rem; }
.inbox-profile-head p { font-size: 12.5px; color: var(--txt-muted); margin-top: 2px; }
.inbox-profile-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.inbox-profile-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.inbox-profile-body .card { margin: 0; }

/* Abas roláveis e sub-abas das configurações */
.tabs-scroll { overflow-x: auto; flex-wrap: nowrap; }
.tabs-scroll .tab { flex-shrink: 0; }
.tabs-sub {
  margin-top: -6px; margin-bottom: 18px;
  border-bottom: 0; gap: 4px;
}
.tabs-sub .tab {
  padding: 6px 12px; font-size: 12px; border: 1px solid var(--border);
  border-radius: var(--radius-full); background: var(--surface-1);
}
.tabs-sub .tab.active {
  background: var(--accent-dim); border-color: var(--accent-border); color: var(--accent-dark);
}

/* ── Configuração de WhatsApp e e-mail ────────────────────────────
   Mesmo desenho do multicanal do sistema-gestao: quem administra os dois
   sistemas encontra os mesmos painéis nos mesmos lugares. */
.mc-page { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mc-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 16px; align-items: start; min-width: 0;
}
.mc-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.mc-health {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface-1);
  color: var(--txt-muted); font-size: 12.5px;
}
.mc-health.ok     { color: var(--green);  border-color: var(--green-dim);  background: var(--green-dim); }
.mc-health.warn   { color: var(--yellow); border-color: var(--yellow-dim); background: var(--yellow-dim); }
.mc-health.danger { color: var(--red);    border-color: var(--red-dim);    background: var(--red-dim); }
.mc-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

.mc-code {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); padding: 9px 10px;
  font-family: var(--font-mono, monospace); font-size: 11.5px; line-height: 1.5;
  overflow-wrap: anywhere; word-break: break-word;
}
.mc-note { color: var(--txt-muted); font-size: 12px; line-height: 1.55; margin-top: 10px; }
.mc-list { color: var(--txt-muted); font-size: 12.5px; line-height: 1.85; padding-left: 18px; margin: 0; }
.mc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.mc-link {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 10px; font-size: 12px; text-decoration: none;
  color: var(--txt); background: var(--surface-1);
}

.mc-status-card {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 12px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface-2);
}
.mc-status-card > span:first-child { font-size: 12px; color: var(--txt-muted); }
.mc-status-card strong { font-size: 15px; text-transform: capitalize; }

.mc-webhook-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mc-webhook-actions .btn { width: 100%; justify-content: center; white-space: normal; }

.mc-alert {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px; font-size: 12px; line-height: 1.45;
  background: var(--surface-2); color: var(--txt-muted); overflow-wrap: anywhere;
}
.mc-alert.ok  { color: var(--green); border-color: var(--green-dim); background: var(--green-dim); }
.mc-alert.err { color: var(--red);   border-color: var(--red-dim);   background: var(--red-dim); }

.mc-qr-inline {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); padding: 12px; text-align: center;
}
.mc-qr-inline img { max-width: 230px; width: 100%; height: auto; margin: 0 auto; }
.mc-qr-inline textarea {
  width: 100%; margin-top: 10px; padding: 9px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-1); font-size: 11.5px; resize: vertical;
}
.mc-pairing-code {
  margin-top: 10px; text-align: center;
  font-size: 18px; font-weight: 800; letter-spacing: .18em;
}

.mc-empty {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 18px; text-align: center; color: var(--txt-muted); font-size: 13px;
}
.mc-session-list { display: flex; flex-direction: column; gap: 10px; }
.mc-session {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); padding: 12px;
}
.mc-session-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mc-session-name { font-weight: 700; font-size: 13.5px; }
.mc-session-sub { color: var(--txt-muted); font-size: 11.5px; margin-top: 2px; word-break: break-word; }

@media (max-width: 1100px) {
  .mc-grid { grid-template-columns: minmax(0, 1fr); }
  .mc-webhook-actions { grid-template-columns: minmax(0, 1fr); }
}

/* ── Campo digitável com busca ──────────────────────────────────── */
.autocomplete { position: relative; }
.autocomplete > input[type="text"] { width: 100%; padding-right: 34px; }
.autocomplete .ac-clear {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: none; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--txt-muted); cursor: pointer;
}
.autocomplete.has-value .ac-clear { display: flex; }
.autocomplete .ac-clear:hover { background: var(--red-dim); color: var(--red); }

.ac-list {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 260px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-1); box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.12));
}
.ac-list li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: calc(var(--radius) - 2px); cursor: pointer;
}
.ac-list li:hover, .ac-list li.is-active { background: var(--accent-dim); }
.ac-list li strong { font-size: 13px; font-weight: 600; }
.ac-list li small { font-size: 11.5px; color: var(--txt-muted); }
.ac-list .ac-empty { color: var(--txt-muted); font-size: 12.5px; cursor: default; }
.ac-list .ac-empty:hover { background: none; }

.cep-aviso { display: block; }

/* ── Agenda mensal ──────────────────────────────────────────────── */
.cal-day {
  min-height: 104px; padding: 7px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface-1);
  transition: border-color .12s, background .12s;
}
.cal-day.is-today { border-color: var(--accent); background: var(--accent-dim); }
.cal-day.is-clickable { cursor: pointer; }
.cal-day.is-clickable:hover { border-color: var(--accent); background: var(--accent-dim); }
.cal-day .cal-add { font-size: 14px; color: transparent; transition: color .12s; }
.cal-day.is-clickable:hover .cal-add { color: var(--accent); }

/* ── Dashboard em abas ──────────────────────────────────────────── */
.dash-shell { display: grid; gap: 18px; }

.dash-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 24px 26px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: linear-gradient(130deg, var(--surface-1) 0%, var(--surface-1) 62%, var(--accent-dim) 100%);
}
.dash-hero:after {
  content: ""; position: absolute; right: -65px; top: -95px;
  width: 250px; height: 250px; border-radius: 50%;
  border: 52px solid rgba(71,177,216,.09); pointer-events: none;
}
.dash-hero-copy, .dash-hero-actions { position: relative; z-index: 1; }
.dash-eyebrow {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  color: var(--accent-dark); font-size: 11px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
}
.dash-eyebrow:before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.dash-hero h1 { margin: 0 0 4px; font-size: 26px; line-height: 1.2; }
.dash-hero p { margin: 0; color: var(--txt-muted); font-size: 13px; }
.dash-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.dash-tabs {
  display: flex; gap: 6px; padding: 6px; overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-1); scrollbar-width: none;
}
.dash-tabs::-webkit-scrollbar { display: none; }
.dash-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 8px 16px; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--txt-muted);
  font: inherit; font-size: 12.5px; font-weight: 700;
  white-space: nowrap; cursor: pointer; transition: .16s ease;
}
.dash-tab:hover { color: var(--txt); background: var(--surface-2); }
.dash-tab[aria-selected="true"] {
  color: var(--accent-dark); background: var(--accent-dim);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}
.dash-tab i { font-size: 17px; }
.dash-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full);
  background: var(--surface-3); color: var(--txt-muted); font-size: 10.5px;
}
.dash-tab[aria-selected="true"] .dash-tab-count { background: var(--accent); color: #fff; }

.dash-panel[hidden] { display: none; }
.dash-panel { animation: dashReveal .18s ease; }
@keyframes dashReveal { from { opacity: .4; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dash-kpi {
  position: relative; display: flex; align-items: center; gap: 13px;
  min-width: 0; padding: 16px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-1); color: inherit; text-decoration: none;
  cursor: pointer; font: inherit; transition: transform .16s, border-color .16s, box-shadow .16s;
}
.dash-kpi:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-md); }
.dash-kpi-icon {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; font-size: 21px;
}
.dash-kpi-copy { display: block; min-width: 0; }
.dash-kpi-value { display: block; font-size: 19px; font-weight: 800; line-height: 1.1; }
.dash-kpi-label { display: block; margin-top: 3px; font-size: 12px; font-weight: 650; color: var(--txt-muted); }
.dash-kpi-note { display: block; margin-top: 2px; font-size: 10.5px; color: var(--txt-dim); }
.dash-kpi-arrow { margin-left: auto; color: var(--txt-dim); font-size: 18px; }
.dash-tone-blue   { background: var(--blue-dim);   color: var(--blue); }
.dash-tone-purple { background: var(--purple-dim); color: var(--purple); }
.dash-tone-green  { background: var(--green-dim);  color: var(--green); }
.dash-tone-teal   { background: var(--teal-dim);   color: var(--teal); }
.dash-tone-yellow { background: var(--yellow-dim); color: var(--yellow); }
.dash-tone-red    { background: var(--red-dim);    color: var(--red); }

.dash-content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dash-table-card {
  min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-1); overflow: hidden;
}
.dash-table-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.dash-table-hd-main { min-width: 0; }
.dash-table-title { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 14px; font-weight: 800; }
.dash-table-title i { color: var(--accent); font-size: 18px; }
.dash-table-subtitle { margin: 3px 0 0; color: var(--txt-muted); font-size: 11.5px; }
.dash-card-body { padding: 16px 18px; }
.dash-table-card .table-wrap { border: 0; border-radius: 0; }

.dash-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 180px; padding: 28px; text-align: center;
}
.dash-empty-icon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 11px; border-radius: 50%;
  background: var(--surface-3); color: var(--txt-dim); font-size: 21px;
}
.dash-empty strong { font-size: 13px; }
.dash-empty span { max-width: 280px; margin-top: 4px; color: var(--txt-muted); font-size: 11.5px; }

.dash-chart { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding-top: 8px; }
.dash-chart-col {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  height: 100%; justify-content: flex-end; min-width: 0;
}
.dash-chart-bar {
  width: 100%; max-width: 34px; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--guug-blue-400), var(--guug-blue-600));
}
.dash-chart-count { font-size: 10.5px; color: var(--txt-dim); font-variant-numeric: tabular-nums; }
.dash-chart-label { font-size: 9.5px; color: var(--txt-dim); white-space: nowrap; }
.dash-chart-legend { margin-top: 12px; font-size: 11px; color: var(--txt-dim); }

.dash-pulse { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dash-pulse-item {
  display: block; padding: 14px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface-2);
  color: inherit; text-decoration: none; transition: .16s ease;
}
.dash-pulse-item:hover { border-color: var(--accent); background: var(--accent-dim); }
.dash-pulse-label { display: block; margin-bottom: 6px; color: var(--txt-muted); font-size: 11px; }
.dash-pulse-value { font-size: 19px; font-weight: 800; }

.dash-quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dash-quick-action {
  display: flex; align-items: center; gap: 10px; padding: 13px;
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--txt); font-size: 12.5px; font-weight: 700; text-decoration: none; transition: .16s ease;
}
.dash-quick-action:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-dim); }
.dash-quick-action i { font-size: 19px; }

.dash-line {
  display: flex; align-items: center; gap: 10px; padding: 9px;
  border-radius: var(--radius); background: var(--surface-2); color: inherit; text-decoration: none;
}
.dash-line:hover { background: var(--accent-dim); }
.dash-line > i { font-size: 17px; }
.dash-date { min-width: 42px; text-align: center; }
.dash-date strong { display: block; font-size: 17px; line-height: 1; }
.dash-date small { font-size: 10px; color: var(--txt-dim); text-transform: uppercase; }

@media (max-width: 1300px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .dash-content-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-pulse { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .dash-hero { flex-direction: column; align-items: flex-start; padding: 20px; }
  .dash-hero-actions { width: 100%; justify-content: flex-start; }
  .dash-kpis { grid-template-columns: minmax(0, 1fr); }
  .dash-quick-actions { grid-template-columns: minmax(0, 1fr); }
  .dash-kpi-arrow { display: none; }
}

/* ── Relatório financeiro: indicadores agrupados ────────────────── */
.rep-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.rep-kpis { display: grid; gap: 10px; }
.rep-kpi {
  padding: 12px 14px; border: 1px solid var(--border);
  border-left: 3px solid var(--txt-dim);
  border-radius: var(--radius); background: var(--surface-2);
}
.rep-kpi.is-green  { border-left-color: var(--green); }
.rep-kpi.is-teal   { border-left-color: var(--teal); }
.rep-kpi.is-purple { border-left-color: var(--purple); }
.rep-kpi.is-yellow { border-left-color: var(--yellow); }
.rep-kpi-label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--txt-dim);
}
.rep-kpi-value { display: block; margin-top: 4px; font-size: 18px; font-weight: 800; line-height: 1.15; }
.rep-kpi-note { display: block; margin-top: 3px; font-size: 11px; color: var(--txt-muted); }

.rep-chart { display: flex; align-items: flex-end; gap: 10px; height: 190px; }
.rep-chart-col {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; gap: 6px; height: 100%; justify-content: flex-end;
}
.rep-chart-pair { display: flex; align-items: flex-end; gap: 3px; width: 100%; height: 100%; justify-content: center; }
.rep-chart-bar { width: 46%; max-width: 26px; border-radius: 5px 5px 0 0; }
.rep-chart-bar.is-contracted { background: var(--guug-blue-600); }
.rep-chart-bar.is-potential { background: var(--accent-dim); border: 1px solid var(--accent-border); }
.rep-chart-label { font-size: 9.5px; color: var(--txt-dim); white-space: nowrap; }

@media (max-width: 1100px) { .rep-groups { grid-template-columns: minmax(0, 1fr); } }

/* ══════════════════════════════════════════════════════════════════
   Tema escuro
   Só as variáveis mudam — nenhum componente precisa saber do tema.
   A marca continua a mesma: o azul GUUG clareia um pouco para manter
   contraste sobre fundo escuro, e o grafite institucional vira a base.
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="escuro"] {
  --accent:        var(--guug-blue-400);
  --accent-soft:   var(--guug-blue-300);
  --accent-dim:    rgba(132,208,230,.15);
  --accent-border: rgba(132,208,230,.34);
  --accent-dark:   var(--guug-blue-300);

  --green:      #34D399;
  --green-dim:  rgba(52,211,153,.15);
  --red:        #F87171;
  --red-dim:    rgba(248,113,113,.15);
  --blue:       #60A5FA;
  --blue-dim:   rgba(96,165,250,.15);
  --yellow:     #FBBF24;
  --yellow-dim: rgba(251,191,36,.16);
  --purple:     #A78BFA;
  --purple-dim: rgba(167,139,250,.16);
  --teal:       #2DD4BF;
  --teal-dim:   rgba(45,212,191,.15);

  --bg:        #0E1114;
  --surface-0: #121619;
  --surface-1: #171B20;
  --surface-2: #1D2228;
  --surface-3: #242A31;
  --surface-4: #2E353D;
  --border:    rgba(255,255,255,.09);
  --border-2:  rgba(255,255,255,.16);
  --txt:       #E8EDF2;
  --txt-muted: #A3B0BC;
  --txt-dim:   #6F7C89;
  --bg-input:  #12161A;
  --bg-hover:  rgba(255,255,255,.05);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.45);
  --shadow:    0 12px 32px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6);

  /* O menu já era escuro; no tema escuro ele se separa do conteúdo pela
     borda, não pelo contraste de fundo. */
  --sb-bg:     #0A0D10;
  --sb-bg-2:   #0E1114;
  --sb-border: rgba(255,255,255,.08);
}

/* A seta do select é desenhada em SVG com a cor fixa; no escuro ela
   precisa clarear para não sumir. */
html[data-theme="escuro"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3B0BC' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Blocos que fixavam branco ou cinza claro na mão. */
html[data-theme="escuro"] .badge-neutral { background: var(--surface-3); color: var(--txt-muted); }
html[data-theme="escuro"] .alert-success { color: #6EE7B7; }
html[data-theme="escuro"] .alert-error   { color: #FCA5A5; }
html[data-theme="escuro"] .alert-warning { color: #FCD34D; }
html[data-theme="escuro"] .alert-info    { color: var(--guug-blue-300); }
html[data-theme="escuro"] .dash-hero {
  background: linear-gradient(130deg, var(--surface-1) 0%, var(--surface-1) 60%, rgba(132,208,230,.10) 100%);
}
html[data-theme="escuro"] .error-page.on-light { color: var(--txt); }
html[data-theme="escuro"] img.logo-dark-hide { display: none; }

/* Impressão sempre em papel branco, seja qual for o tema da tela. */
@media print {
  html[data-theme="escuro"] {
    --bg: #FFFFFF; --surface-0: #FFFFFF; --surface-1: #FFFFFF;
    --surface-2: #FFFFFF; --surface-3: #F2F2F2;
    --txt: #000000; --txt-muted: #333333; --txt-dim: #666666;
    --border: rgba(0,0,0,.2); --border-2: rgba(0,0,0,.3);
  }
}

/* Botão de troca de tema, na barra superior. */
.topbar-btn .bx-moon, .topbar-btn .bx-sun { transition: transform .2s ease; }
.topbar-btn[data-theme-toggle]:hover .bx-moon,
.topbar-btn[data-theme-toggle]:hover .bx-sun { transform: rotate(-18deg); }

/* Pontos que fixavam branco na regra base e não seguiriam as variáveis. */
html[data-theme="escuro"] .topbar { background: rgba(23,27,32,.88); }
html[data-theme="escuro"] .topbar-search input[type="search"]:focus { background: var(--surface-2); }
html[data-theme="escuro"] .kanban-card.is-stale { background: rgba(248,113,113,.07); }
html[data-theme="escuro"] .switch .track::after { background: var(--surface-4); }
html[data-theme="escuro"] .switch input:checked + .track::after { background: #fff; }

/* O padrão topográfico da marca é desenhado em tom claro: no escuro ele
   precisa baixar a opacidade para não virar ruído sobre o fundo. */
html[data-theme="escuro"] .topo-overlay { opacity: .35; }

/* No escuro o azul da marca clareia; texto branco sobre ele ficaria
   ilegível, então os botões de destaque usam o grafite institucional. */
html[data-theme="escuro"] .btn-accent,
html[data-theme="escuro"] .btn-primary {
  background: var(--guug-blue-400); color: var(--guug-ink-900);
}
html[data-theme="escuro"] .btn-accent:hover,
html[data-theme="escuro"] .btn-primary:hover { background: var(--guug-blue-300); }
html[data-theme="escuro"] .pagination .pages .current,
html[data-theme="escuro"] .dash-tab[aria-selected="true"] .dash-tab-count,
html[data-theme="escuro"] .step.current { background: var(--guug-blue-400); color: var(--guug-ink-900); }

/* ══════════════════════════════════════════════════════════════════
   Rolagem sem barra

   As barras das áreas internas cortavam o desenho: apareciam sob as
   abas, ao lado das tabelas e dentro dos modais mesmo quando não havia
   nada a rolar. Aqui elas somem — a rolagem continua inteira pelo dedo,
   pela roda do mouse, pelo trackpad e pelo teclado.

   A barra da janela (no <html>) permanece: é o único indicador de
   posição da página, e não faz parte do desenho da aplicação.
   ══════════════════════════════════════════════════════════════════ */
body *::-webkit-scrollbar { width: 0; height: 0; }
body * { scrollbar-width: none; -ms-overflow-style: none; }

/* Tiras horizontais — abas, sub-abas e listas de chips — só rolam para o
   lado. Sem isto, a regra de overflow do CSS transforma o eixo vertical
   em "auto" e nasce uma segunda barra, vertical, do nada. */
.tabs,
.tabs-scroll,
.dash-tabs,
.chip-list,
.mc-webhook-actions,
.kanban-board {
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}

/* Rolagem por toque com inércia nas áreas laterais. */
.tabs, .tabs-scroll, .dash-tabs, .table-wrap, .kanban-board {
  -webkit-overflow-scrolling: touch;
}

/* ══════════════════════════════════════════════════════════════════
   Telas estreitas

   O alvo é a faixa abaixo de 260px — largura de relógio, de janela
   encaixada ou de zoom alto no celular. Abaixo disso nada pode escapar
   pela lateral: a página inteira rola só na vertical.
   ══════════════════════════════════════════════════════════════════ */

/* Toda tira de abas rola para o lado, como a do dashboard, em vez de
   quebrar linha e empilhar. */
.tabs, .tabs-sub, .dash-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
.tabs > .tab, .tabs-sub > .tab, .dash-tabs > .dash-tab { flex-shrink: 0; }

/* Botão que perde o rótulo e vira só ícone quando não há largura. */
.btn-collapse { white-space: nowrap; }

@media (max-width: 900px) {
  /* O botão de menu do cabeçalho sai: a barra inferior já tem o dele. */
  .menu-toggle-mobile { display: none !important; }

  /* "Nova oportunidade" vira um "+". */
  .btn-collapse .btn-label { display: none; }
  .btn-collapse {
    width: 36px; height: 36px; padding: 0;
    justify-content: center; border-radius: 50%;
  }
  .btn-collapse i { font-size: 20px; margin: 0; }
}

@media (max-width: 420px) {
  .app-view { padding: 12px; }
  .topbar { padding: 0 12px; gap: 6px; }
  .page-header { gap: 10px; }
  .page-header h1 { font-size: 1.15rem; }
  .card-head, .card-body, .card-foot { padding: 13px; }
  .dash-hero { padding: 18px; }
  .dash-hero h1 { font-size: 21px; }
}

@media (max-width: 320px) {
  /* Nenhuma grade pode exigir largura mínima maior que a tela. */
  .stats-grid, .grid-2, .grid-3, .grid-4, .grid-sidebar,
  .dash-kpis, .dash-content-grid, .mc-grid, .rep-groups,
  .check-grid, .form-grid.uniforme, .help-grid, .help-featured,
  .glossary-list, .dash-quick-actions, .mc-webhook-actions, .dash-pulse {
    grid-template-columns: minmax(0, 1fr);
  }
  .form-grid { gap: 12px; }

  .app-view { padding: 9px; }
  .topbar { padding: 0 9px; gap: 4px; }
  .topbar-actions { gap: 2px; }
  .topbar-btn { width: 32px; height: 32px; font-size: 17px; }

  .card-head, .card-body, .card-foot { padding: 11px; }
  .card-head { flex-wrap: wrap; gap: 8px; }
  .page-header { flex-direction: column; align-items: stretch; }
  .page-header-actions { width: 100%; flex-wrap: wrap; }
  .page-header-actions .btn { flex: 1 1 100%; }

  .btn { padding: 8px 11px; font-size: 12px; }
  .btn-sm { padding: 6px 9px; font-size: 11.5px; }
  .tab { padding: 9px 11px; font-size: 12px; }

  thead th, tbody td { padding: 8px; font-size: 12px; }
  .stat { padding: 13px; }
  .stat-value { font-size: 1.2rem; }
  .stat-value.sm { font-size: 1rem; }
  .dash-kpi { padding: 12px; gap: 10px; }
  .dash-kpi-icon { flex-basis: 36px; width: 36px; height: 36px; font-size: 18px; }
  .dash-kpi-value { font-size: 16px; }
  .dash-hero h1 { font-size: 19px; }
  .dash-hero-actions { width: 100%; }
  .dash-hero-actions .btn { flex: 1; justify-content: center; }

  .modal-head, .modal-body, .modal-foot { padding: 13px; }
  .modal-foot { flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 100%; }
}

@media (max-width: 270px) {
  /* Faixa extrema: cabe pouco, então nada disputa espaço. */
  .app-view { padding: 7px; }
  .topbar { padding: 0 7px; }
  .topbar-btn { width: 29px; height: 29px; font-size: 16px; }
  .btn-collapse { width: 30px; height: 30px; }
  .btn-collapse i { font-size: 17px; }

  .card-head, .card-body, .card-foot { padding: 9px; }
  .card-head h2, .card-head h3 { font-size: 13px; }
  .page-header h1 { font-size: 1.02rem; }
  .page-header p { font-size: 11.5px; }

  /* A barra inferior fica só com os ícones: cinco rótulos em 260px
     viravam três letras e um "…". */
  .mobile-nav { height: 54px; }
  .mobile-nav span { display: none; }
  .mobile-nav i { font-size: 22px; }
  body, body.sidebar-compact { padding-bottom: 58px; }

  .dash-hero { padding: 14px; }
  .dash-hero:after { display: none; }
  .dash-eyebrow { font-size: 10px; }
  .dash-hero h1 { font-size: 17px; }
  .dash-hero p { font-size: 11.5px; }

  .stat-label, .dash-kpi-label { font-size: 10px; }
  .stat-sub, .dash-kpi-note { font-size: 10px; }
  .tab { padding: 8px 9px; font-size: 11.5px; }
  .tab i { font-size: 14px; }
  .badge { font-size: 9.5px; padding: 2px 6px; }

  .filters { padding: 10px; }
  .field label { font-size: 11px; }
  input, select, textarea { font-size: 12.5px; padding: 7px 9px; min-height: 34px; }

  /* Diálogos ocupam a tela inteira: sobra de margem aqui é espaço perdido. */
  dialog.modal, dialog.modal.wide { width: 96vw; max-width: 96vw; }
  .help-popover { width: calc(100vw - 14px); }
}

/* O funil em três colunas fixas (165 + barra + 105) não cabe em telas
   estreitas: o valor era empurrado para fora e sumia sem aviso. Abaixo
   de 520px cada etapa vira duas linhas. */
@media (max-width: 520px) {
  .funnel-row { flex-wrap: wrap; gap: 4px 10px; }
  .funnel-label { flex: 1 1 auto; min-width: 0; }
  .funnel-value { flex: 0 0 auto; }
  .funnel-bar-wrap { flex: 1 1 100%; height: 22px; }
}

/* Enquanto arrasta, o cursor mostra que a tira está sendo puxada e o
   texto não é selecionado sem querer. */
.tabs, .tabs-scroll, .dash-tabs, .table-wrap, .kanban-board { cursor: default; }
.is-dragging { cursor: grabbing; user-select: none; }
.is-dragging * { pointer-events: none; }