/* ================================================================
   DASHBOARD-CHAMAR-AGENTE — Design System CSS
   Based on SPEC.md + ds-tokens.txt + ds-elements.txt
   ================================================================ */

/* === GOOGLE FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* === CSS CUSTOM PROPERTIES (Design Tokens) === */
:root {
  /* Backgrounds */
  --bg-page: #020617;
  --bg-card: #0a0f1a;
  --bg-card-alt: #050a12;
  --bg-sidebar: #1a1a1a;
  --bg-sidebar-accent: #232330;

  /* Semantic Colors */
  --primary-yellow: #fbbf24;
  --amber-accent: #f59e0b;
  --cyan: #00f5c4;
  --cyan-bright: #00f5c4;
  --cyan-mid: #00b4d8;
  --cyan-deep: #0096c7;
  --blue-mid: #00b4d8;
  --emerald: #10b981;
  --purple: #a855f7;
  --red: #ef4444;

  /* Borders */
  --border-default: rgba(100, 116, 139, 0.15);
  --border-hover: rgba(100, 116, 139, 0.4);
  --border-active: rgba(100, 116, 139, 0.6);
  --border-amber-subtle: rgba(245, 158, 11, 0.1);

  /* Text */
  --text-primary: #f1f5f9;
  --text-secondary: #e2e8f0;
  --text-muted: #64748b;
  --text-header-table: #94a3b8;

  /* Typography */
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Border Radius */
  --radius: 0.5rem;
  --radius-lg: 8px;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows / Glows */
  --glow-emerald: 0 0 8px rgba(16, 185, 129, 0.4);
  --glow-emerald-strong: 0 0 12px rgba(16, 185, 129, 0.6);
  --glow-red: 0 0 8px rgba(239, 68, 68, 0.4);
  --glow-red-strong: 0 0 12px rgba(239, 68, 68, 0.6);
  --glow-amber: 0 0 8px rgba(245, 158, 11, 0.4);
  --glow-amber-strong: 0 0 12px rgba(245, 158, 11, 0.6);
  --glow-blue: 0 0 8px rgba(59, 130, 246, 0.6);
  --glow-cyan: 0 0 20px rgba(0, 245, 196, 0.3);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* Botao Limpar: vermelho claro (global, todas as telas, todos os modos) */
#projects-reset-filters,
#projects-list-reset-btn,
#sessions-reset-btn,
#tasks-reset-btn,
#bulk-reset-btn,
#agents-reset-filters {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

#projects-reset-filters:hover,
#projects-list-reset-btn:hover,
#sessions-reset-btn:hover,
#tasks-reset-btn:hover,
#bulk-reset-btn:hover,
#agents-reset-filters:hover {
  background: rgba(239, 68, 68, 0.25) !important;
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-page);
  min-height: 100vh;
}

/* === LAYOUT === */
.app-layout {
  display: flex;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 52px; /* sidebar width */
  min-height: 100vh;
  min-width: 0; /* 01M3YW3: sem isso o kanban-grid (6x180px) estoura o flex em
                   paisagem (844x390) e a pagina ganha scroll horizontal */
}

.page-content {
  flex: 1;
  padding: var(--space-lg);
  padding-bottom: var(--space-xl);
  min-width: 0; /* 01M3YW3: idem — permite o scroll INTERNO do .kanban-section */
}

/* === SIDEBAR === */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 52px;
  /* task 01M361ZNJEWDJ9HA3298GT8BA3 (2a metade): a altura vem de --app-vh (window.innerHeight,
     medido pelo index.html). 100vh/100dvh ficam como fallback — em varios aparelhos 100vh e o
     viewport GRANDE (barra recolhida), o que jogava o rodape p/ fora da tela apos o reload. */
  height: 100vh;
  height: 100dvh;
  height: var(--app-vh, 100dvh);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md) 0;
  /* iPhone/notch: nao deixar o rodape (SAIR) atras da safe-area */
  padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  min-height: 0;    /* deixa o .sidebar-nav encolher e rolar em vez de empurrar o rodape */
  z-index: 100;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
  padding: 0 var(--space-sm);
  /* task 01M361ZNJEWDJ9HA3298GT8BA3: o menu ocupa o espaco livre e ROLA se nao couber —
     em viewport baixa (celular/PWA) ele nao empurra mais o rodape do usuario p/ fora. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;          /* rail de 48-52px: sem barra visivel */
}
.sidebar-nav::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.sidebar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: var(--radius-lg);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
  position: relative;
}

.sidebar-btn:hover {
  background: var(--bg-sidebar-accent);
  color: var(--text-primary);
}

.sidebar-btn:focus-visible {
  outline: 2px solid rgba(0, 245, 196, 0.5);
  outline-offset: 2px;
}

.sidebar-btn.active {
  color: var(--primary-yellow);
  background: var(--bg-sidebar-accent);
}

.sidebar-btn.active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--primary-yellow);
  border-radius: 0 2px 2px 0;
}

.sidebar-btn svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

/* task 01M361ZNJEWDJ9HA3298GT8BA3: rodape do usuario (avatar + Trocar senha + SAIR).
   flex-shrink:0 + margin-top:auto = ancorado no rodape e NUNCA cortado pelo menu. */
.sidebar-user {
  flex-shrink: 0;
  margin-top: auto;
}

/* === HEADER === */
.header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-md) var(--space-lg);
}

.header-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.header-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.alert-banner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
}

.alert-banner.concurrency {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.4);
  color: var(--amber-accent);
  box-shadow: var(--glow-cyan);
}

.alert-banner.orphaned {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.4);
  color: var(--red);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

.alert-banner svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* === CARDS === */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  padding: var(--space-lg);
  transition: border-color var(--transition-fast);
}

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

.card-header {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-header-table);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
}

.card-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

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

.card-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.card-value.small {
  font-size: 24px;
}

.card-meta {
  font-size: 13px;
  color: var(--text-muted);
}

.card-meta.mono {
  font-family: var(--font-mono);
}

.card-warning {
  border-color: rgba(245, 158, 11, 0.4);
}

/* === BADGES === */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Design system — Badges & Pills (mesmas regras de design-system.html) */
.badge-cyan {
  background: rgba(0, 245, 196, 0.15);
  color: var(--cyan-bright);
}

.badge-emerald {
  background: rgba(16, 185, 129, 0.15);
  color: var(--emerald);
}

.badge-amber {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.badge-blue {
  background: rgba(0, 150, 199, 0.15);
  color: var(--cyan-deep);
}

.badge.online {
  background: rgba(16, 185, 129, 0.15);
  color: var(--emerald);
}

.badge.degraded {
  background: rgba(245, 158, 11, 0.15);
  color: var(--amber-accent);
}

.badge.down {
  background: rgba(239, 68, 68, 0.15);
  color: var(--red);
}

.badge.running {
  background: rgba(59, 130, 246, 0.15);
  color: var(--blue-mid);
}

.badge.done {
  background: rgba(16, 185, 129, 0.15);
  color: var(--emerald);
}

.badge.error {
  background: rgba(239, 68, 68, 0.15);
  color: var(--red);
}

.badge.pending {
  background: rgba(100, 116, 139, 0.15);
  color: var(--text-muted);
}

.badge.info {
  background: rgba(59, 130, 246, 0.15);
  color: var(--blue-mid);
}

.badge.warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--amber-accent);
}

/* HTTP Code badges for errors page */
.badge.http-2xx {
  background: rgba(16, 185, 129, 0.15);
  color: var(--emerald);
}

.badge.http-3xx {
  background: rgba(59, 130, 246, 0.15);
  color: var(--blue-mid);
}

.badge.http-4xx {
  background: rgba(245, 158, 11, 0.15);
  color: var(--amber-accent);
}

.badge.http-5xx {
  background: rgba(239, 68, 68, 0.15);
  color: var(--red);
}

/* === SEMAPHORE (Overview) === */
.semaphore {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  align-items: center;
}

.semaphore-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.semaphore-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.semaphore-dot.online {
  background: var(--emerald);
  box-shadow: var(--glow-emerald-strong);
}

.semaphore-dot.degraded {
  background: var(--amber-accent);
  box-shadow: var(--glow-amber-strong);
}

.semaphore-dot.down {
  background: var(--red);
  box-shadow: var(--glow-red-strong);
}

.semaphore-label {
  font-size: 12px;
  color: var(--text-header-table);
  font-weight: 500;
}

.semaphore-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

/* === TABLES === */
.table-container {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table thead {
  background: var(--bg-card-alt);
}

.table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-header-table);
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}

.table th:first-child {
  border-radius: var(--radius-lg) 0 0 0;
}

.table th:last-child {
  border-radius: 0 var(--radius-lg) 0 0;
}

.table td {
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(100, 116, 139, 0.1);
  vertical-align: middle;
}

.table tbody tr {
  transition: background var(--transition-fast);
}

.table tbody tr:hover {
  background: rgba(100, 116, 139, 0.12);
}

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

.table .mono {
  font-family: var(--font-mono);
  font-size: 12px;
}

.table .text-right {
  text-align: right;
}

.table .text-center {
  text-align: center;
}

/* Sortable headers */
.table th.sortable {
  cursor: pointer;
  user-select: none;
}

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

.table th.sortable.active {
  color: var(--primary-yellow);
  background: rgba(251, 191, 36, 0.08);
  border-bottom: 2px solid var(--primary-yellow);
}

.sort-icon {
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.15s ease;
}

/* Table row expanded */
.table-row-expanded {
  background: var(--bg-card-alt);
  border-left: 3px solid rgba(0, 245, 196, 0.3);
}

.table-row-expanded td {
  padding: var(--space-md);
}

/* Session highlight >7d */
.session-old {
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid rgba(245, 158, 11, 0.4);
}

.session-old td {
  color: var(--amber-accent);
}

/* === BULK ACTIONS MOBILE === */
@media (max-width: 640px) {
  #bulk-reset-btn .limpar-text {
    display: none;
  }
  #bulk-actions-bar {
    gap: 9.5px !important;
  }
  #bulk-reset-btn {
    min-width: auto !important;
    padding: 6px 8px !important;
  }

  #bulk-actions-bar .btn {
    font-size: 11px !important;
    padding: 5px 8px !important;
    white-space: nowrap;
  }
  #bulk-actions-bar .btn-hard-delete {
    font-size: 10px !important;
    line-height: 1.2;
  }
}

/* === PAGINATION === */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--space-md);
}

.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border-default);
  background: transparent;
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pagination-btn:hover:not(:disabled) {
  background: rgba(100, 116, 139, 0.1);
  color: var(--text-primary);
}

.pagination-btn:focus-visible {
  outline: 2px solid rgba(0, 245, 196, 0.5);
  outline-offset: 2px;
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-btn.active {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.4);
  color: var(--primary-yellow);
}

.pagination-btn svg {
  width: 16px;
  height: 16px;
}

/* === FILTERS === */
.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: var(--space-md);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.filter-select,
.filter-input {
  height: 43px;
  padding: 0 12px;
  background: var(--bg-card);
  border: 1px solid rgba(100,116,139,0.3);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast);
  min-width: 140px;
  cursor: pointer;
}

.filter-select:hover,
.filter-input:hover {
  border-color: rgba(100,116,139,0.5);
}

.filter-select:focus,
.filter-input:focus {
  outline: 2px solid var(--primary-yellow);
  outline-offset: 0;
  border-color: var(--border-active);
}

input[type="date"].filter-input {
  border: 1px solid rgba(100,116,139,0.3);
}



.ms-toggle:focus-visible,
.ms-toggle:focus {
  outline: 2px solid var(--primary-yellow);
  outline-offset: 2px;
}

.filter-select option {
  background: var(--bg-card);
  color: var(--text-primary);
}

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

/* === DROPdowns === */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: rgba(10, 15, 26, 0.95);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  z-index: 50;
  max-height: 300px;
  overflow-y: auto;
}

.dropdown-item {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
  white-space: nowrap;
}

.dropdown-item:hover {
  background: rgba(100, 116, 139, 0.1);
}

.dropdown-item.selected {
  background: rgba(251, 191, 36, 0.1);
  color: var(--primary-yellow);
}

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 10px 20px;
  height: 43px;
  border: none;
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn:focus-visible {
  outline: 2px solid rgba(0, 245, 196, 0.5);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--primary-yellow);
  color: #020617;
}

.btn-primary:hover {
  background: var(--amber-accent);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}

.btn-secondary:hover {
  border-color: var(--border-hover);
  background: rgba(100, 116, 139, 0.1);
}

.btn svg {
  width: 16px;
  height: 16px;
}

/* === TOGGLE BUTTONS (Stats period) === */
.toggle-group {
  display: flex;
  gap: 8px;
  margin-bottom: var(--space-lg);
}

.toggle-btn {
  padding: 8px 20px;
  border: 1px solid rgba(100, 116, 139, 0.3);
  background: transparent;
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.toggle-btn:hover {
  background: rgba(100, 116, 139, 0.1);
  color: var(--text-primary);
}

.toggle-btn:focus-visible {
  outline: 2px solid rgba(0, 245, 196, 0.5);
  outline-offset: 2px;
}

.toggle-btn.active {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.4);
  color: var(--primary-yellow);
}

/* === SKELETON LOADING === */
.skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.skeleton-line {
  height: 14px;
  border-radius: 4px;
  background: rgba(100, 116, 139, 0.15);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.skeleton-line:nth-child(1) {
  width: 60%;
}

.skeleton-line:nth-child(2) {
  width: 80%;
}

.skeleton-line:nth-child(3) {
  width: 40%;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* === SPINNER === */
.spinner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner svg {
  width: 20px;
  height: 20px;
  color: var(--blue-mid);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* === ERROR BANNER === */
.error-banner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: var(--radius-lg);
  color: var(--red);
  margin-bottom: var(--space-md);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

.error-banner-text {
  flex: 1;
  font-size: 14px;
}

.error-banner svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.error-banner .btn {
  padding: 6px 12px;
  font-size: 13px;
}

/* === EMPTY STATE === */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  gap: var(--space-md);
  text-align: center;
}

.empty-state svg {
  width: 48px;
  height: 48px;
  color: rgba(100, 116, 139, 0.4);
}

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

.empty-state-subtext {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* === REFRESH INDICATOR === */
.refresh-indicator {
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
  margin-top: var(--space-md);
}

/* === GRID (Agents) === */
.agent-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 1280px) {
  .agent-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .agent-grid {
    grid-template-columns: 1fr;
  }
}

.agent-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  padding: var(--space-lg);
  transition: all var(--transition-normal);
}

.agent-card:hover {
  border-color: var(--primary-yellow);
  box-shadow: var(--glow-amber);
  transform: translateY(-3px);
}

.agent-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-md);
}

.agent-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.agent-port {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.agent-last-task {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: var(--space-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-success-rate {
  font-size: 12px;
  margin-top: var(--space-xs);
  font-weight: 500;
}

.agent-success-rate.high {
  color: var(--emerald);
}

.agent-success-rate.medium {
  color: var(--amber-accent);
}

.agent-success-rate.low {
  color: var(--red);
}

/* === CHART CONTAINER === */
.chart-container {
  background: var(--bg-card-alt);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  padding: var(--space-lg);
  height: 300px;
  margin-top: var(--space-lg);
}

.chart-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-header-table);
  margin-bottom: var(--space-md);
}

/* === GRID LAYOUTS === */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

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

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

/* === PAGE TITLE === */
.page-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-lg) 0;
}

/* === OVERVIEW GRID === */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

/* === KANBAN === */
.kanban-section {
  margin-top: var(--space-lg);
  overflow-x: auto;
}

.kanban-section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}

.kanban-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: var(--space-md);
  width: 100%;
  table-layout: fixed;
}

.kanban-section {
  margin-top: var(--space-lg);
}

.kanban-column {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  min-height: 240px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  word-wrap: break-word;
}

.kanban-column-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: 4px;
}

.kanban-column-header.cyan { color: var(--cyan); }
.kanban-column-header.emerald { color: var(--emerald); }
.kanban-column-header.red { color: var(--red); }
.kanban-column-header.amber { color: var(--amber-accent); }
.kanban-column-header.purple { color: var(--purple); }
.kanban-column-header.slate { color: var(--text-muted); }
.kanban-column-header.blue { color: var(--blue-mid); }

.kanban-task {
  background: rgba(100, 116, 139, 0.05);
  border: 1px solid rgba(100, 116, 139, 0.1);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: var(--space-sm);
}

.kanban-empty {
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  padding: var(--space-lg) 0;
}

/* === BREADCRUMBS (v1.2.3) === */
.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-sm) 0;
  font-size: 13px;
  color: var(--text-muted);
}

.breadcrumb-item {
  white-space: nowrap;
}

.breadcrumb-link {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.breadcrumb-current {
  color: var(--text-primary);
  font-weight: 600;
}

.breadcrumb-sep {
  color: var(--text-muted);
  opacity: 0.5;
  margin: 0 2px;
  user-select: none;
}

/* === UTILITIES === */
.text-purple {
  color: var(--purple);
}

.text-emerald {
  color: var(--emerald);
}

.text-red {
  color: var(--red);
}

.text-amber {
  color: var(--amber-accent);
}

.text-cyan {
  color: var(--cyan);
}

.text-blue {
  color: var(--blue-mid);
}

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

.font-mono {
  font-family: var(--font-mono);
}

.font-bold {
  font-weight: 700;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === FOCUS RING === */
*:focus-visible {
  outline: 2px solid rgba(0, 245, 196, 0.5);
  outline-offset: 2px;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.5);
}

/* === VISIBILITY POLLING === */
[data-polling-paused="true"] {
  opacity: 0.7;
}

/* === OVERVIEW PREMIUM EFFECTS === */

/* Page Title — Glow + Animacao */
.page-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.25);
  animation: title-enter 0.5s ease-out;
}
@keyframes title-enter {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 4 Overview Cards — Hover com Glow na Cor */
.card-overview-semaphore:hover {
  border-color: rgba(0, 245, 196, 0.4);
  box-shadow: 0 0 20px rgba(0, 245, 196, 0.15);
}
.card-overview-running:hover {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
}
.card-overview-done:hover {
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
}
.card-overview-error:hover {
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.15);
}

/* Kanban — Borda Lateral Colorida no Hover */
.kanban-column {
  transition: box-shadow var(--transition-normal);
}
.kanban-column:hover.cyan    { box-shadow: inset 3px 0 0 var(--cyan); }
.kanban-column:hover.emerald { box-shadow: inset 3px 0 0 var(--emerald); }
.kanban-column:hover.red     { box-shadow: inset 3px 0 0 var(--red); }
.kanban-column:hover.amber   { box-shadow: inset 3px 0 0 var(--amber-accent); }
.kanban-column:hover.purple  { box-shadow: inset 3px 0 0 var(--purple); }
.kanban-column:hover.slate   { box-shadow: inset 3px 0 0 var(--text-muted); }
.kanban-column:hover.blue    { box-shadow: inset 3px 0 0 var(--blue-mid); }

/* Header ilumina no hover da coluna */
.kanban-column:hover .kanban-column-header {
  background: rgba(100, 116, 139, 0.1);
}

/* Kanban Task — Hover Elevacao */
.kanban-task {
  background: rgba(100, 116, 139, 0.05);
  border: 1px solid rgba(100, 116, 139, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
  transition: transform var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  cursor: pointer;
}
.kanban-task:hover {
  transform: translateY(-2px);
  border-color: rgba(100, 116, 139, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Badge de Contagem — Pills Coloridos */
.kanban-running .kanban-column-header span,
.kanban-column-header.blue span {
  background: rgba(0, 180, 216, 0.15);
  color: var(--blue-mid);
}
.kanban-done .kanban-column-header span,
.kanban-column-header.emerald span {
  background: rgba(16, 185, 129, 0.15);
  color: var(--emerald);
}
.kanban-error .kanban-column-header span,
.kanban-column-header.red span {
  background: rgba(239, 68, 68, 0.15);
  color: var(--red);
}
.kanban-interrupted .kanban-column-header span,
.kanban-column-header.amber span {
  background: rgba(245, 158, 11, 0.15);
  color: var(--amber-accent);
}
.kanban-zombie .kanban-column-header span,
.kanban-column-header.purple span {
  background: rgba(168, 85, 247, 0.15);
  color: var(--purple);
}
.kanban-orphan .kanban-column-header span,
.kanban-column-header.slate span {
  background: rgba(100, 116, 139, 0.15);
  color: var(--text-muted);
}

/* Semaphore Dots — Pulse Animation */
.semaphore-dot.online,
.semaphore-dot.degraded,
.semaphore-dot.down {
  animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

/* Card Entrance — Escalonada */
@keyframes card-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.overview-grid > .card {
  animation: card-enter 0.4s ease-out backwards;
}
.overview-grid > .card:nth-child(1) { animation-delay: 0ms; }
.overview-grid > .card:nth-child(2) { animation-delay: 80ms; }
.overview-grid > .card:nth-child(3) { animation-delay: 160ms; }
.overview-grid > .card:nth-child(4) { animation-delay: 240ms; }

/* Kanban Column Entrance — Removida: coluna comeca visivel, skeletons tem pulse proprio */
/* Column enter animation removed — skeleton pulse handles visual feedback during load */

/* Empty State — Icone Flutuante */
.kanban-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  gap: var(--space-sm);
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  animation: empty-float 3s ease-in-out infinite;
}
.kanban-empty svg {
  width: 24px;
  height: 24px;
  color: rgba(100, 116, 139, 0.3);
  animation: empty-icon-pulse 2s ease-in-out infinite;
}
@keyframes empty-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes empty-icon-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.5; }
}

/* Error Banner — Entrada Animada */
@keyframes error-enter {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.error-banner {
  animation: error-enter 0.3s ease-out;
}
.error-banner .btn {
  animation: error-pulse-btn 1.5s ease-in-out infinite;
}
@keyframes error-pulse-btn {
  0%, 100% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
  50% { box-shadow: 0 0 12px rgba(239, 68, 68, 0.4); }
}

/* Progress Bar — Shimmer Animation */
.progress-fill {
  background: linear-gradient(90deg, var(--cyan-bright), var(--cyan-mid));
  transition: width 0.5s ease;
  position: relative;
  overflow: hidden;
}
.progress-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: progress-shimmer 2s ease-in-out infinite;
}
@keyframes progress-shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Refresh Indicator */
.refresh-indicator {
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
  margin-top: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
}
.refresh-indicator .spinner {
  display: inline-flex;
}

/* === 4 CARDS PREMIUM OVERVIEW === */

/* Icone do card — centralizado no topo */
.card-icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.card-icon-wrap svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
}
.card-icon-wrap.cyan svg { color: var(--cyan); filter: drop-shadow(0 0 8px rgba(0,245,196,0.5)); }
.card-icon-wrap.blue svg { color: var(--blue-mid); filter: drop-shadow(0 0 8px rgba(0,180,216,0.5)); }
.card-icon-wrap.emerald svg { color: var(--emerald); filter: drop-shadow(0 0 8px rgba(16,185,129,0.5)); }
.card-icon-wrap.red svg { color: var(--red); filter: drop-shadow(0 0 8px rgba(239,68,68,0.5)); }

/* Badge de label no card */
.card-label-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.card-label-badge.cyan { background: rgba(0,245,196,0.15); color: var(--cyan); }
.card-label-badge.blue { background: rgba(0,180,216,0.15); color: var(--blue-mid); }
.card-label-badge.emerald { background: rgba(16,185,129,0.15); color: var(--emerald); }
.card-label-badge.red { background: rgba(239,68,68,0.15); color: var(--red); }

.card-ts {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Section divider interno do card */
.card-inner-divider {
  border: none;
  border-top: 1px solid rgba(100,116,139,0.15);
  margin: 10px 0;
}

/* Agent name badge */
.agent-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(100,116,139,0.1);
  color: var(--text-primary);
}

/* Meta row — icone + texto */
.meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.meta-row svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Progress bar interna do card */
.card-progress {
  height: 10px;
  background: rgba(100,116,139,0.2);
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 8px;
}
.card-progress-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.5s ease;
}
.card-progress-fill.blue { background: linear-gradient(90deg, #00b4d8, #0096c7); }
.card-progress-fill.cyan { background: linear-gradient(90deg, #00f5c4, #00b4d8); }

/* Badge MAX ao lado do valor */
.card-max-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(100,116,139,0.1);
  color: var(--text-muted);
  border: 1px solid rgba(100,116,139,0.2);
  margin-left: 8px;
  vertical-align: middle;
}

/* Error message expandida */
.card-error-msg {
  font-size: 13px;
  color: var(--red);
  line-height: 1.5;
  max-height: 60px;
  overflow-y: auto;
  padding: 8px;
  background: rgba(239,68,68,0.08);
  border-radius: 8px;
  border: 1px solid rgba(239,68,68,0.15);
}

/* Pulse animation pro icone do Running */
@keyframes icon-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.08); }
}
.icon-running-animated {
  animation: icon-pulse 1.5s ease-in-out infinite;
}

/* Left border accent permanente no card Error — REMOVIDO */
/*
.card-overview-error {
  border-left: 3px solid rgba(239,68,68,0.3) !important;
}
.card-overview-error:hover {
  border-left-color: rgba(239,68,68,0.6) !important;
}
*/

/* === RESPONSIVE === */
@media (max-width: 1280px) {
  .main-content {
    margin-left: 52px;
  }

  .page-content {
    padding: var(--space-md);
  }
}


/* === v1.6.0: ConversationViewer (somente-leitura) === */
.cv-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  padding: 16px;
}
.cv-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  width: 500px; max-width: 100%;
  height: 600px; max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cv-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-default);
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
}
.cv-close-btn {
  background: #EF4444; border: none; color: white;
  cursor: pointer; font-size: 18px; line-height: 1;
  width: 32px; height: 32px; border-radius: 50%;
  /* Garante CIRCULO no mobile: sem flex-shrink:0 o botao encolhia na horizontal
     (cabecalho apertado com titulo longo) mantendo 32px de altura -> OVAL.
     O titulo do header absorve a diferenca; desktop nao muda (ja tem espaco). */
  flex-shrink: 0; min-width: 32px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.cv-close-btn:hover { background: #DC2626; }

/* REASONING-2 (task 01M3RTNKC07YKAHBFJNH1W9RR6): bloco PROPRIO do reasoning,
   separado das respostas, com visual distinto; default RECOLHIDO. */
.cv-reasoning {
  margin: 4px 0 6px;
  padding: 6px 10px;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  border-radius: 10px;
  background: rgba(100, 116, 139, 0.08);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.cv-reasoning-cab {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  user-select: none;
}
.cv-reasoning-corpo { display: none; margin-top: 5px; }
/* REASONING-4 (c): listas DENTRO do quadro pontilhado — o bloco nao tinha regra
   propria (só .cv-msg-content tinha), entao o ul ficava com os 40px default do
   navegador e os bullets/linhas estouravam a caixa. Mesma indentacao do corpo da
   mensagem (20px), ol/ul/li cobertos, sem tocar no markdown do resto. */
.cv-reasoning-corpo ul,
.cv-reasoning-corpo ol { margin: 4px 0; padding-left: 20px; }
.cv-reasoning-corpo ul li,
.cv-reasoning-corpo ol li { margin: 2px 0; }
.cv-reasoning-corpo { overflow-wrap: anywhere; }
.cv-reasoning-aberto .cv-reasoning-corpo { display: block; }
.cv-reasoning-aberto { border-color: rgba(0, 245, 196, 0.35); background: rgba(0, 245, 196, 0.05); }
.cv-reasoning-aberto .cv-reasoning-cab { color: rgba(0, 245, 196, 0.85); }
.cv-reasoning-corpo pre { max-height: 320px; overflow: auto; }

/* REASONING-2: botao do balao de pensamento no header (ao lado do X) */
.cv-rsn-btn {
  width: 32px; height: 32px; min-width: 32px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(100, 116, 139, 0.3);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}
.cv-rsn-btn:hover { border-color: rgba(100, 116, 139, 0.6); }
.cv-rsn-btn-on {
  border-color: rgba(0, 245, 196, 0.5);
  color: rgb(0, 245, 196);
  background: rgba(0, 245, 196, 0.08);
}
.cv-rsn-btn:focus-visible { outline: 2px solid var(--primary-yellow); outline-offset: 1px; }

/* REASONING-3: indicador "Pensando" + 3 pontinhos animados enquanto o agente
   nao imprimiu a resposta final (some sozinho quando a resposta chega no poll) */
.cv-pensando {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 9px;
  font-size: 12.5px;
  color: var(--text-muted);
  user-select: none;
}
.cv-pensando-nome { font-weight: 600; letter-spacing: 0.02em; }
.cv-pensando-pontos { display: inline-flex; gap: 4px; align-items: center; }
.cv-pensando-pontos span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: cvPensandoDot 1.2s infinite ease-in-out both;
}
.cv-pensando-pontos span:nth-child(1) { animation-delay: 0s; }
.cv-pensando-pontos span:nth-child(2) { animation-delay: 0.16s; }
.cv-pensando-pontos span:nth-child(3) { animation-delay: 0.32s; }
@keyframes cvPensandoDot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .cv-pensando-pontos span { animation: none; opacity: 0.7; }
}
.cv-body {
  flex: 1; overflow-y: auto;
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.cv-bubble {
  max-width: 75%; padding: 8px 12px; border-radius: 12px;
  font-size: 14px; line-height: 1.4;
  word-wrap: break-word;
}
.cv-bubble-user {
  align-self: flex-end;
  background: rgba(0, 180, 216, 0.2);
  color: var(--cyan);
  border-bottom-right-radius: 4px;
}
.cv-bubble-agent {
  align-self: flex-start;
  background: rgba(100, 116, 139, 0.15);
  color: var(--text-secondary);
  border-bottom-left-radius: 4px;
}
.cv-empty {
  text-align: center; color: var(--text-muted); font-size: 13px;
  padding: 24px;
}
.cv-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-default);
  flex-shrink: 0;
}

/* === HEALTH CARD (v1.6.6) === */
.health-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default, #ddd);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.health-card.healthy { border-left: 4px solid var(--emerald); }
.health-card.warning { border-left: 4px solid var(--amber-accent); }
.health-card.critical { border-left: 4px solid var(--red); }
.health-card-title { font-weight: 600; font-size: 14px; margin-bottom: 8px; color: var(--text-primary); }
.health-problems-list.health-collapsed .health-agent-row:nth-child(n+4) { display: none; }
.health-agent-row { background: var(--bg-card-alt); padding: 10px 12px; border-radius: 6px; margin-top: 8px; }
.health-agent-name { font-weight: 600; font-size: 13px; }
.health-problem { font-size: 12px; color: var(--text-muted, #666); margin-top: 4px; }
.health-fix-cmd {
  font-family: monospace;
  background: var(--bg-card-alt);
  color: var(--text-primary);
  padding: 8px 10px;
  border-radius: 4px;
  margin-top: 6px;
  font-size: 12px;
  word-break: break-all;
}
.health-copy-btn {
  background: rgba(0,180,216,0.2);
  color: var(--cyan);
  border: 1px solid rgba(0,180,216,0.3);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  margin-top: 6px;
}
.health-copy-btn:hover { background: rgba(0,180,216,0.3); }
.health-copy-btn.copied { background: rgba(16,185,129,0.2); color: var(--emerald); border-color: rgba(16,185,129,0.3); }
.health-toggle-btn {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  margin-top: 8px;
  width: 100%;
}
.health-toggle-btn:hover { background: var(--bg-card-alt); }

/* === v1.7.0: Icon button danger === */
.btn-icon-danger {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--red);
  padding: 2px;
  line-height: 0;
  border-radius: 4px;
  transition: all var(--transition-fast);
}
.btn-icon-danger:hover {
  background: rgba(239,68,68,0.15);
  color: #f87171;
}
.btn-icon-danger:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* === Responsive touch targets for session action buttons === */

/* ── Comentario da task: Enviar/Stop ABAIXO do textarea em MOBILE E DESKTOP (pedido do operador) ── */
.tdp-comment-row { flex-direction: column; align-items: stretch !important; }
/* em coluna, o flex:1 do style inline vira eixo ALTURA e engole o height do auto-grow -> anula */
.tdp-comment-row textarea { flex: 0 0 auto !important; }
.tdp-comment-actions { width: 100%; }

@media (max-width: 768px) {
  .btn-icon,
  .btn-icon-danger {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
}

/* === v1.7.1: Overview Cards DS === */

/* Semaphore items */
.semaphore-item {
  text-align: center;
}
.semaphore-count {
  font-size: 20px;
  font-weight: 700;
  margin-top: 2px;
}
.semaphore-count.emerald { color: var(--emerald); }
.semaphore-count.amber { color: var(--amber-accent); }
.semaphore-count.red { color: var(--red); }

/* Agent badge variants */
.agent-badge.emerald {
  background: rgba(16, 185, 129, 0.1);
}
.agent-badge.red {
  background: rgba(239, 68, 68, 0.1);
}

/* Empty card state */
.card-empty {
  font-size: 12px;
  text-align: center;
  padding: 16px 0;
  color: var(--text-muted);
  opacity: 0.5;
}

/* Meta row variants */
.meta-row.purple {
  color: var(--purple);
}

/* Responsive overview grid */
@media (max-width: 1100px) {
  .overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .overview-grid {
    grid-template-columns: 1fr;
  }
}

/* Agent card status colors — baseado na ultima task */
.agent-card.task-running .agent-name { color: #058FC3; }
.agent-card.task-done .agent-name { color: var(--emerald); }
.agent-card.task-error .agent-name { color: var(--red); }

/* Session descendant rows */
.session-descendant {
  border-left: 2px solid rgba(0, 245, 196, 0.15);
  animation: sessionSlideIn 0.2s ease-out;
}
.session-descendant td {
  border-bottom: 1px solid var(--border-default);
}

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

/* Tree toggle line */
.tree-line {
  color: rgba(100, 116, 139, 0.5);
  font-size: 11px;
}

/* v1.8.2: Tree toggle remover chevron rotation */
.tree-toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  color: var(--text-muted);
  vertical-align: middle;
}
.tree-toggle-badge {
  font-size: 12px;
  padding: 0 6px;
  min-width: 22px;
  height: 22px;
  text-align: center;
  background: rgba(253, 224, 71, 0.2);
  color: #fde047;
  border-radius: 9999px;
  line-height: 22px;
  vertical-align: middle;
  font-family: var(--font-mono);
  font-weight: 600;
  pointer-events: none;
}

.tree-toggle-empty { cursor: default; opacity: 0.5; }

/* === STATUS SESSIONS (v1.9.0) === */
.status-ativa { color: var(--emerald); }
.status-ociosa { color: var(--primary-yellow); }
.status-encerrada { color: var(--text-muted); }

.filter-select {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid rgba(100,116,139,0.3);
  border-radius: 6px;
  padding: 0 12px;
  font-size: 13px;
  cursor: pointer;
  height: 43px;
  min-width: 140px;
}

/* === STATUS TOOLTIPS (v1.9.5) === */
.status-ativa, .status-ociosa, .status-encerrada { cursor: help; }


/* === RESPONSIVE KANBAN (Mobile) === */
@media (max-width: 1024px) and (min-width: 769px) {
  #btn-new-task-kanban,
  #btn-piloto-kanban {
    font-size: 15px !important;
    padding: 12px 18px !important;
  }
  #tdp-piloto-toggle {
    font-size: 15px !important;
    padding: 12px 18px !important;
  }
}
@media (max-width: 768px) {
  /* === PREVENT HORIZONTAL SCROLL === */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  main {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
    box-sizing: border-box !important;
  }

  .page {
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* === SIDEBAR === */
  .sidebar {
    width: 48px !important;
    min-width: 48px !important;
    /* task 01M361ZNJEWDJ9HA3298GT8BA3: mesma altura visivel do desktop (--app-vh) */
    height: 100dvh !important;
    height: var(--app-vh, 100dvh) !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .sidebar-btn span {
    display: none !important;
  }
  .sidebar-btn {
    justify-content: center !important;
    padding: 10px 0 !important;
  }
  /* task 01M361ZNJEWDJ9HA3298GT8BA3: menu rola, rodape do usuario (SAIR) fica sempre visivel */
  .sidebar-nav {
    padding: 0 4px !important;      /* 48px - 8px = 40px uteis p/ os botoes */
  }
  .sidebar-user {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-bottom: 2px !important;
  }
  .sidebar-user .sidebar-btn {
    width: 40px !important;         /* alvo de toque 40px (36-44) p/ Trocar senha e SAIR */
    height: 40px !important;
    padding: 0 !important;
  }
  main {
    margin-left: 48px !important;
  }

  /* === PAGE TITLE === */
  .page-title {
    font-size: 20px !important;
  }

  /* === OVERVIEW === */
  .overview-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-sm) !important;
  }
  .overview-grid > .card,
  .overview-grid > .card-overview-semaphore {
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .kanban-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-sm) !important;
  }
  .kanban-column {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: auto !important;
  }
  .kanban-task {
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .kanban-section-title {
    font-size: 16px !important;
  }

  /* === KANBAN PROJECTS === */
  .kb-board {
    flex-direction: column !important;
    overflow-x: visible !important;
    gap: var(--space-sm) !important;
  }
  .kc-column {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .kc-card {
    min-width: 100% !important;
    max-width: 100% !important;
  }
  #projects-kanban-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-sm) !important;
  }
  #btn-new-task-kanban,
  #btn-piloto-kanban {
    flex: 1 !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
    justify-content: center !important;
    min-width: 0 !important;
  }
  #projects-kanban-header > div:last-child {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
  }
  #projects-kanban-breadcrumbs {
    font-size: 12px !important;
  }
  #tdp-piloto-toggle {
    width: 100% !important;
    justify-content: center !important;
    font-size: 14px !important;
    padding: 10px 16px !important;
  }
  .kc-column-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: var(--bg-card) !important;
  }

  /* === TASKS === */
  #content-tasks > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-sm) !important;
  }
  #content-tasks > div:first-child .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  #tasks-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  #tasks-table-container .table {
    min-width: 700px !important;
    width: max-content !important;
  }
  .pagination {
    flex-wrap: wrap !important;
    gap: 5px !important;
    justify-content: center !important;
  }
  .pagination button {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* === AGENTS === */
  .agent-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-sm) !important;
  }
  .agent-card {
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .agent-card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-xs) !important;
  }

  /* === SESSIONS === */
  #content-sessions .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  #content-sessions .table {
    min-width: 600px !important;
    width: max-content !important;
  }
  #content-sessions .table th,
  #content-sessions .table td {
    padding: 8px 6px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* === FILTERS: ALL pages (Projects, Sessions, Tasks) === */
  /* Regra: input[text] = full width. select/dropdown = 2 por linha. */
  #projects-kanban-filters,
  #content-sessions .filters-bar,
  #content-tasks .filters-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    flex-wrap: unset !important;
  }

  /* Text inputs: full width (1 per row) */
  #projects-kanban-filters > .filter-group:has(input[type="text"]),
  #content-tasks .filters-bar > .filter-group:has(input[type="text"]) {
    grid-column: 1 / -1 !important;
  }

  /* Custom date range: full width */
  #projects-kanban-filters > #custom-date-range,
  #content-tasks .filters-bar > #custom-date-range {
    grid-column: 1 / -1 !important;
  }

  /* Buttons: full width */
  #projects-kanban-filters > .btn,
  #projects-kanban-filters > button,
  #content-sessions .filters-bar > .btn,
  #content-sessions .filters-bar > button,
  #content-tasks .filters-bar > .btn,
  #content-tasks .filters-bar > button {
    grid-column: 1 / -1 !important;
  }

  /* === FILTROS RESPONSIVOS === */
  .filter-group,
  #filter-project-agente-container,
  #filter-project-tipo-container,
  #filter-project-prioridade-container,
  #filter-project-status-container {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* (vermelho dos botoes esta no topo do arquivo, global) */

  /* Botao Limpar Filtros da tela de selecao: linha inteira */
  #projects-list-reset-btn {
    flex-basis: 100% !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
  }

  /* Campos De/Ate do periodo personalizado: lado a lado */
  #projects-list-custom-dates {
    width: 100% !important;
  }

  #projects-list-custom-dates .filter-group {
    flex: 1 !important;
    min-width: 0 !important;
  }

  #projects-list-custom-dates .filter-input {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Multiselect wrappers: forcar width:100% pra expandir */
  .multiselect-wrapper {
    width: 100% !important;
    display: flex !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Botao do multiselect: width:100% */
  .ms-toggle {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .filter-select,
  .filter-input {
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }  /* === TASK DETAIL PANEL === */
  #task-detail-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    right: -100vw !important;
  }
  #task-detail-panel[style*="right: 0"] {
    right: 0 !important;
  }
  .tdp-fields-row > div {
    flex: 0 0 calc(50% - 4px) !important;
    min-width: 0 !important;
  }

  /* === STATS === */
  .stats-grid,
  .stats-overview {
    grid-template-columns: 1fr !important;
    gap: var(--space-sm) !important;
  }
  .stats-card,
  .stat-card {
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* === ALERTS === */
  .alert-banner {
    min-width: 100% !important;
    max-width: 100% !important;
    font-size: 13px !important;
  }
  .alert-banner svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  /* === CHARTS === */
  .overview-chart,
  .chart-container,
  .stats-chart,
  .chart-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  /* === TABLES (generic) === */
  .table-container,
  #tasks-table-container,
  #content-sessions .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  .table,
  #tasks-table-container .table,
  #content-sessions .table {
    min-width: 600px !important;
    width: max-content !important;
  }
  .table th,
  .table td,
  #tasks-table-container .table th,
  #tasks-table-container .table td,
  #content-sessions .table th,
  #content-sessions .table td {
    padding: 8px 6px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* === MULTiselect === */
  .tdp-multiselect-container {
    width: 100% !important;
  }
}

/* === SINGLE-SELECT DROPDOWN (matches multiselect .ms-toggle/.ms-dropdown) === */
.ss-wrapper { position: relative; display: inline-flex; flex-direction: column; gap: 0; }
.ss-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 12px; height: 43px;
  border: 1px solid rgba(100,116,139,0.3); border-radius: 6px;
  background: var(--bg-card); color: var(--text-primary);
  font-size: 13px; font-family: var(--font-sans);
  cursor: pointer; min-width: 140px; white-space: nowrap;
  transition: border-color var(--transition-fast);
}
.ss-toggle:hover { border-color: rgba(100,116,139,0.5); }
.ss-toggle:focus { outline: 2px solid var(--primary-yellow); outline-offset: 0; border-color: var(--border-active); }
.ss-display { flex: 1; text-align: left; }
.ss-dropdown {
  display: none; position: absolute; top: 100%; left: 0; z-index: 100;
  min-width: 100%; max-height: 280px; overflow-y: auto;
  background: var(--bg-card); border: 1px solid rgba(100,116,139,0.3);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  margin-top: 4px; padding: 6px;
}
.ss-option {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 4px; cursor: pointer; font-size: 13px;
  color: var(--text-secondary); transition: background 0.1s;
}
.ss-option.ss-selected { color: var(--text-primary); font-weight: 500; }
.ss-check { width: 14px; text-align: center; color: var(--primary-yellow); font-size: 12px; }
.ss-dropdown::-webkit-scrollbar-track { background: transparent; }
.ss-dropdown::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.3); border-radius: 3px; }

/* ── Barra de progresso dos cards de #projects (polling silencioso de 5s) ──
   Cada segmento anima o width quando o status de uma task muda por baixo,
   em vez de teleportar. Desligado para quem pede menos movimento. */
.pc-seg { transition: width 0.3s ease; }
@media (prefers-reduced-motion: reduce) {
  .pc-seg { transition: none; }
}


/* === INDICE EXPLICATIVO DO PILOTO AUTOMATICO (task 01M36VPJ696PQP3KRPFBAV5YRB) === */
@media (max-width: 640px) {
}

/* === INDICE DO PILOTO AUTOMATICO: icone de informacao + popover (task 01M36VPJ696PQP3KRPFBAV5YRB) === */
.indice-pa-wrap { position: relative; display: inline-flex; align-items: center; }
#indice-pa-slot-desktop, #indice-pa-slot-mobile { flex: 0 0 auto; }
.indice-pa-btn { -webkit-tap-highlight-color: transparent; color: var(--text-muted); cursor: pointer; background: none; border: none; padding: 2px; line-height: 0; border-radius: var(--radius); }
@media (hover: hover) and (pointer: fine) {
  .indice-pa-btn:hover { color: var(--cyan); background: rgba(100,116,139,0.15); }
}
.indice-pa-btn svg { width: 15px; height: 15px; display: block; }
/* aberto (mobile): indicacao visual de que o informativo esta aberto */
.indice-pa-btn.ativo { color: var(--cyan); background: rgba(100,116,139,0.22); }
@media (hover: hover) and (pointer: fine) { .indice-pa-btn.ativo:hover { background: rgba(100,116,139,0.28); } }
.indice-pa-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.indice-pa-pop { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 380px; max-width: 88vw;
  max-height: 60vh; overflow-y: auto; text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; background: var(--bg-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: 0 12px 32px rgba(0,0,0,0.5); z-index: 1200; }
.indice-pa-pop.aberto { display: block; }
.indice-pa-pop .indice-pa-intro { margin: 0 0 var(--space-sm); font-size: 13px; color: var(--text-secondary); }
.indice-pa-pop .indice-pa-passos { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-secondary); display: grid; gap: var(--space-sm); }
.indice-pa-pop .indice-pa-passos li { line-height: 1.5; }
.indice-pa-pop .indice-pa-conds { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 2px; }
.indice-pa-pop .indice-pa-conds li { font-size: 12px; color: var(--text-muted); }
.indice-pa-pop .indice-pa-alerta { color: var(--amber-accent); }
@media (max-width: 768px) {
  /* ancora logo abaixo do icone de info (nao no rodape da tela) */
  .indice-pa-pop { position: absolute; left: 0; right: auto; top: calc(100% + 8px); bottom: auto; transform: none;
    width: 86vw; max-width: calc(100vw - 16px); max-height: 60vh; }
}

/* Agendamento do PA (task 01M37MQMT0A8WDQKWRWTRJ3GHE): painel + botao */
.agpa-painel { position: fixed; z-index: 10001; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius); box-shadow: 0 10px 28px rgba(0,0,0,0.45); padding: 12px; }
/* mesmo padrao visual do botao de info (.indice-pa-btn): sem fundo, icone 15px */
.agpa-wrap { position: relative; display: block; }
.agpa-wrap-inner { display: inline-flex; align-items: center; }
.agpa-btn { flex: 0 0 auto; align-self: center; vertical-align: middle; -webkit-tap-highlight-color: transparent; color: var(--text-muted); cursor: pointer; background: none; border: none; padding: 2px; line-height: 0; border-radius: var(--radius); }
.agpa-btn svg { width: 15px; height: 15px; display: block; }
@media (hover: hover) and (pointer: fine) { .agpa-btn:hover { color: var(--cyan); background: rgba(100,116,139,0.15); } }
.agpa-btn.agpa-verde { color: #22c55e; }
.agpa-btn.agpa-vermelho { color: #ef4444; }
.agpa-btn.ativo { background: rgba(100,116,139,0.22); }   /* aberto: so o fundo; a cor e do estado */

/* Botao de prioridade por bucket (kanban): toque confortavel no mobile */
@media (max-width: 768px) {
  .kc-btn-prioridade { width: 30px !important; height: 30px !important; }
  .kc-btn-prioridade svg { width: 15px !important; height: 15px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Modal de USUARIOS (criar/editar/excluir) — visual no Design System
   task 01M3M3ASFWSEHSPYT7D9QSXDPV | escopo: #us-overlay (nao afeta outras telas)
   ═══════════════════════════════════════════════════════════════════════════ */
#us-overlay {
  position: fixed; inset: 0; z-index: 9600;
  background: rgba(2, 6, 23, 0.78);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-md);
}
#us-overlay .us-modal {
  display: flex; flex-direction: column;
  width: 100%; max-width: 640px; max-height: 88vh;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
#us-overlay .us-modal-topo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--border-default);
}
#us-overlay .us-modal-titulo {
  margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary);
}
#us-overlay .us-modal-x {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 auto;
  background: none; border: 1px solid transparent; border-radius: var(--radius-lg);
  color: var(--text-muted); cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
#us-overlay .us-modal-x:hover { color: var(--text-primary); border-color: var(--border-hover); background: rgba(100, 116, 139, 0.1); }
#us-overlay .us-modal-x:focus-visible { outline: 2px solid rgba(0, 245, 196, 0.5); outline-offset: 2px; }
#us-overlay .us-modal-erro {
  display: none;
  margin: var(--space-md) var(--space-lg) 0;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  font-size: 13px; line-height: 1.45;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}
#us-overlay .us-modal-corpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: var(--space-lg);
  /* rolagem "encaixa" na linha: nunca para no meio de um item */
  scroll-snap-type: y proximity;
  scroll-padding-top: var(--space-sm);
}
#us-overlay .us-modal-corpo > .us-campo { scroll-snap-align: start; }
#us-overlay .us-modal-rodape {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border-default);
  background: var(--bg-card-alt);
}
/* campos */
#us-overlay .us-campo { margin-bottom: var(--space-lg); }
#us-overlay .us-campo-ultimo { margin-bottom: 0; }
#us-overlay .us-rotulo {
  display: block; margin-bottom: var(--space-sm);
  font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
  color: var(--text-header-table);
}
#us-overlay .us-req { color: var(--primary-yellow); }
#us-overlay .us-dica { color: var(--text-muted); font-weight: 400; }
#us-overlay .us-input {
  width: 100%; box-sizing: border-box; min-width: 0; height: 43px; cursor: text;
  /* campo mais escuro que o modal (--bg-card) — mesmo criterio dos outros modais do app */
  background: var(--bg-card-alt);
}
#us-overlay .us-select { cursor: pointer; }
#us-overlay .us-campo-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
#us-overlay .us-campo-topo .us-rotulo { margin-bottom: 0; }
#us-overlay .us-cont { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
#us-overlay .us-busca { flex: 1 1 auto; }
/* listas de opcao (telas + projetos) */
#us-overlay .us-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-sm);
}
/* PERMISSOES-V2: selector de projeto em edicao + modo global/especifico */
.us-perm-selector { max-width: 220px; }
.us-perm-modo { display: flex; gap: var(--space-sm, 8px); flex-wrap: wrap; align-items: center; margin: 6px 0; }
.us-perm-modo-op { cursor: pointer; }

/* PERMISSOES-2: quadro de permissoes — 3 colunas quando couber (so nome + check) */
#us-overlay .us-grade-perm {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 760px) {
  #us-overlay .us-grade-perm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  #us-overlay .us-grade-perm { grid-template-columns: 1fr; }
}
#us-overlay .us-grade-perm .us-op { padding: 8px 10px; font-size: 12.5px; }
#us-overlay .us-grade-proj { max-height: 190px; overflow-y: auto; padding-right: 2px; scroll-snap-type: y proximity; }
#us-overlay .us-grade-proj .us-op { scroll-snap-align: start; }
#us-overlay .us-op {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 10px 12px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  font-size: 13px; color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
#us-overlay .us-op:hover { border-color: var(--border-hover); background: rgba(100, 116, 139, 0.08); }
#us-overlay .us-op input[type="checkbox"] {
  width: 16px; height: 16px; flex: 0 0 auto; margin: 0;
  accent-color: var(--cyan); cursor: pointer;
}
#us-overlay .us-op:has(input:checked) { border-color: rgba(0, 245, 196, 0.45); background: rgba(0, 245, 196, 0.06); }
#us-overlay .us-op:has(input:disabled) { cursor: not-allowed; }
#us-overlay .us-op input[type="checkbox"]:disabled { accent-color: #475569; cursor: not-allowed; }
#us-overlay .us-op-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#us-overlay .us-grade-off {
  padding: var(--space-sm);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
  background: rgba(100, 116, 139, 0.04);
}
#us-overlay .us-grade-off .us-op { background: transparent; border-color: transparent; }
#us-overlay .us-grade-off .us-op-txt { color: var(--text-secondary); }
#us-overlay .us-vazio { font-size: 12px; color: var(--text-muted); padding: var(--space-sm) 0; }
/* "todos os projetos" */
#us-overlay .us-todos {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: var(--space-sm);
  padding: 12px 14px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
#us-overlay .us-todos:hover { border-color: var(--border-hover); background: rgba(100, 116, 139, 0.08); }
#us-overlay .us-todos:has(input:checked) { border-color: rgba(0, 245, 196, 0.45); background: rgba(0, 245, 196, 0.06); }
#us-overlay .us-todos input[type="checkbox"] {
  width: 16px; height: 16px; flex: 0 0 auto; margin: 0;
  accent-color: var(--cyan); cursor: pointer;
}
#us-overlay .us-todos-txt { font-size: 13px; font-weight: 600; color: var(--text-primary); }
/* mobile ~390: 1 coluna, sem rolagem horizontal */
@media (max-width: 520px) {
  #us-overlay { padding: var(--space-sm); }
  #us-overlay .us-modal { max-height: 92vh; }
  #us-overlay .us-modal-topo,
  #us-overlay .us-modal-corpo,
  #us-overlay .us-modal-rodape { padding-left: var(--space-md); padding-right: var(--space-md); }
  #us-overlay .us-grade { grid-template-columns: 1fr; }
  #us-overlay .us-grade-proj { max-height: none; }
  #us-overlay .us-modal-rodape .btn { flex: 1 1 auto; }
}


/* ===== RT166 — painel minimalista: quadros com icone, campos recolhiveis, quadros de agentes ===== */
.tdp-quadro {
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  background: var(--bg-card-alt);
  padding: 8px 10px;
  margin-bottom: var(--space-md);
}
.tdp-quadro-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  margin-bottom: 6px;
  color: var(--text-muted);
  /* RT168n: o BOX TODO expande/recolhe (RT168k) -> mesma mao do icone */
  cursor: pointer;
}
/* RT168n: excecoes mantem o cursor proprio (sem isto herdariam o pointer do box).
   Olho e botoes ja sao pointer por regra propria; o extra ("Editar") fica auto. */
.tdp-quadro-head [data-quadro-extra] { cursor: auto; }
.tdp-quadro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
/* RT168 (2): hover/focus NAO muda a cor — so 2 estados (aberto=verde, fechado=sem cor) */
.tdp-quadro-btn:hover,
.tdp-quadro-btn:focus-visible {
  background: var(--bg-card);
  border-color: var(--border-default);
  outline: none;
}
.tdp-quadro-btn-dir { margin-left: auto; }
.tdp-quadro-rot {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* RT168g (1)+(2): contadores de CARACTERES (desc/notas/feito) e de ARQUIVOS
   (Artefatos) — mesma fonte/tamanho dos contadores de commits/comentarios
   (o rotulo do quadro: 11px/600), no lugar do span solto de 10px. */
.tdp-quadro-rot .tdp-quadro-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 4px;
  letter-spacing: inherit;
  text-transform: none;
}
.tdp-quadro-corpo { display: block; }
.tdp-quadro-corpo[hidden] { display: none; }

/* Quadros de agentes: lado a lado no desktop, empilhados no mobile */
.tdp-ag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  /* Claire (30/09): o grid nao tinha margem inferior — o campo NOTAS ficava COLADO
     nos quadros dos agentes. Mesmo espaco dos demais campos (--space-md). */
  margin-bottom: var(--space-md);
}
.tdp-ag-grid > * { min-width: 0; }
@media (max-width: 480px) {
  .tdp-ag-grid { grid-template-columns: 1fr; }
}

/* Botao solido do agente: cor SOLIDA = cor do quadro atual (cyan orq / purple exec) */
.tdp-ag-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  text-align: left;
  margin-bottom: var(--space-xs);
}
/* RT167 (6): Cyan-600 #0096c7 + escurecimento sutil */
/* RT168g (4): MESMA TRANSPARENCIA do Trocar SID (bg alpha 0.12 + borda da cor),
   no lugar da cor solida + overlay escuro (inset 9999px). Tokens do DS orq/exec. */
.tdp-ag-btn-orq { background: rgba(0, 150, 199, 0.12); color: #ffffff; border: 1px solid #0096c7; box-shadow: none; }
/* RT167 (6): Purple-500 #a855f7 + escurecimento sutil */
.tdp-ag-btn-exec { background: rgba(16, 185, 129, 0.108); color: #ffffff; border: 1px solid #10b981; box-shadow: none; }
.tdp-ag-nome {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tdp-ag-id {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(2, 6, 23, 0.22);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  max-width: 240px;
  transition: background 0.15s;
}
.tdp-ag-id:hover { background: rgba(2, 6, 23, 0.42); }
.tdp-ag-x {
  margin-left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(2, 6, 23, 0.28);
  color: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tdp-ag-x:hover { background: rgba(2, 6, 23, 0.5); }
.tdp-ag-copiado { font-weight: 700; }


/* ============================================================
   RT167 — 12 ajustes do operador sobre a v1 do painel
   ============================================================ */
/* (7) quadros lado a lado com MESMA ALTURA (stretch = default do grid) */
.tdp-ag-grid > .tdp-ag-quadro { height: 100%; }
/* RT172-fix item 7 (mobile): no mobile os quadros ficam EMPILENADOS (1 coluna = 2 linhas);
   o height:100% acima combinado com margin-bottom:16px e min-height criava realimentacao
   (+16px por rodada do equalize => loop de crescimento medido: 114 -> 2519px). height:auto
   devolve o sizing natural da linha; o stretch de cada linha + o min-height do equalize
   igualam os dois quadros sem ciclo. Precisa vir DEPOIS da regra acima (mesma
   especificidade, ultimo vence) e media-scoped para nao afetar o desktop. */
@media (max-width: 480px) {
  .tdp-ag-grid > .tdp-ag-quadro { height: auto; }
}
/* RT172-fix item 19: textos de CONTEUDO do painel JUSTIFICADOS.
   Escopo registrado: previews de Descricao/Notas/Feito (modo leitura) + texto dos
   comentarios; o popover (.tdp-hint-pop) ja era justify (RT167 item 5). Textarea de
   edicao tambem recebe a regra (o Chrome ignora text-align em textarea — se o
   navegador nao suportar, o texto exibido em leitura continua justificado). */
#tdp-desc-preview, #tdp-notas-preview, #tdp-feito-preview,
#tdp-desc, #tdp-notas, #tdp-feito,
.comment-text {
  text-align: justify;
}
.tdp-ag-quadro { position: relative; }

/* (4) linha do orquestrador: folder-sync SO ICONE na frente do botao */
.tdp-ag-linha-orq {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: var(--space-xs);
}
/* (3) icone do agente dobrado + (10) icone id-card dobrado
   RT168 (5)+RT168g (7): largura do respectivo QUADRO (antes: fixa 230px) — no desktop
   a linha do orquestrador distribui agente + Trocar SID com o espaco do item 3. */
.tdp-ag-btn { gap: 8px; padding: 7px 11px; width: 100%; flex-wrap: nowrap; }
.tdp-ag-linha-orq .tdp-ag-btn { flex: 1 1 auto; width: auto; min-width: 0; }
.tdp-ag-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* RT168i (1): id-card (e o X do executor logo atras dele) alinhados a DIREITA —
   extremidade oposta ao nome, em TODOS os modos (o @media mobile ja fazia isso;
   o desktop ficava colado ao nome). */
.tdp-ag-btn-orq .tdp-ag-id,
.tdp-ag-btn-exec .tdp-ag-id { margin-left: auto; }
/* (3) id-card = SO o icone (SID fica na frente dele, sem texto dentro) */
.tdp-ag-id {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  opacity: .95;
}
.tdp-ag-id:hover { opacity: 1; }
.tdp-ag-id svg { width: 26px; height: 26px; }

/* (3) SID como texto simples NA FRENTE do id-card */

/* RT168 (4): Trocar Sessao em caixinha AMBAR (tokens do DS) */
.tdp-sid-amber {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  /* Claire (30/09): cor base trocada de amber para Fuel/OK #10b981 (pedido do operador). */
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid #10b981;
  border-radius: 8px;
  color: #10b981;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.22);
  transition: background 0.15s;
}
.tdp-sid-amber:hover { background: rgba(16, 185, 129, 0.22); }
.tdp-sid-amber svg { width: 18px; height: 18px; }

/* RT168i (3): DESKTOP — Trocar SID QUADRADO perfeito: largura == altura == altura do
   botao do agente orquestrador (44px = valor aprovado no mobile; antes 34x34, menor
   que o botao). stretch + min-height igualam os dois por construcao. */
@media (min-width: 481px) {
  .tdp-ag-linha-orq { align-items: stretch; }
  .tdp-ag-linha-orq .tdp-ag-btn { min-height: 46px; }
  .tdp-sid-amber { width: 46px; height: 46px; }
}
/* RT168i (1b): X do executor VERMELHO transparente — MESMO padrao do quadro de
   ALERTA do par (.tdp-hint-pop: borda rgba(239,68,68,0.55)) + fundo vermelho no
   alpha do DS (0.12) e icone no vermelho de erro. */
.tdp-ag-btn-exec .tdp-ag-x {
  background: rgba(239, 68, 68, 0.12);
  /* Claire (30/09): o icone virou circle-x do Lucide (o circulo E o X num SVG so),
     entao o botao perdeu a borda (evita circulo dentro de circulo) e a cor ficou
     identica: fundo rgba(239,68,68,0.12) + traco no vermelho de erro. */
  border: none;
  color: rgb(239, 68, 68);
}
.tdp-ag-btn-exec .tdp-ag-x svg { display: block; }
/* FIX (Claire 04/10 — agente SEM SID): o X ancora a DIREITA mesmo sem o id-card
   (o id-card so existe quando ha SID; sem ele o X ficava colado no nome).
   Com SID o id-card (margin-left:auto) empurra os dois juntos — a 2a regra zera
   o auto do X nesse caso para nao dividir o espaco entre id-card e X. */
.tdp-ag-btn-exec .tdp-ag-x { margin-left: auto; }
.tdp-ag-btn-exec .tdp-ag-id + .tdp-ag-x { margin-left: 0; }
/* RT168 (3): triangle-alert MAIOR, no canto superior DIREITO do quadro do orquestrador */
.tdp-alerta-ic {
  display: inline-flex;
  color: var(--amber-accent);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
}
.tdp-alerta-ic:hover { opacity: .85; }

/* (5) popover com a mensagem do par — texto JUSTIFICADO, clique/hover abrem */
.tdp-hint-pop {
  position: absolute;
  top: 38px;
  left: 8px;
  right: 8px;
  max-width: 340px;
  z-index: 70;
  background: var(--bg-card);
  border: 1px solid rgba(239, 68, 68, 0.55);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
  text-align: justify;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.tdp-hint-pop[hidden] { display: none; }
.tdp-hint-pop .tdp-hint-txt { display: block; }

/* (9) extra (Editar/Preview) so aparece com o campo expandido */
.tdp-quadro-extra { display: inline-flex; align-items: center; margin-left: auto; }

/* RT168g (8): OLHO de DEFAULT do campo. Aberto = verde (olho); fechado = sem cor
   (olho cortado). Vale para TODAS as tasks.
   RT168i (2): olho na OUTRA PONTA do header (extremidade direita, TODOS os modos) —
   margin-left:auto o leva para a ponta; quando o extra (Editar/Preview) esta
   visivel ele ja tem o auto (folga antes dele) e o olho fica logo em seguida,
   sendo o ULTIMO elemento do header. */
.tdp-quadro-head .tdp-quadro-olho {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 2px 3px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.75;
}
.tdp-quadro-head .tdp-quadro-olho:hover { opacity: 1; }
.tdp-quadro-head .tdp-quadro-olho:focus-visible { outline: 2px solid var(--primary-yellow); outline-offset: 1px; }
.tdp-quadro-head .tdp-quadro-olho.tdp-olho-aberto { color: var(--emerald); opacity: 1; }
.tdp-quadro-head:has(.tdp-quadro-extra:not([hidden])) .tdp-quadro-olho { margin-left: 4px; }
.tdp-quadro-extra[hidden] { display: none; }

/* RT168 (1)+(2): SO 2 estados limpos — secao ABERTA = VERDE, FECHADA = SEM COR */
.tdp-btn-aberto { color: #22c55e; opacity: 1; }
.tdp-btn-fechado { color: var(--text-muted); opacity: 0.55; }

/* RT167 (11): dependencias VERDE/VERMELHO mantido NO ROTULO;
   o icone de toggle segue a logica da secao (RT168 1: aberto=verde/fechado=sem cor) */
/* RT168i (4): header dos campos RECOLHIVEIS em VERDE quando o campo TEM CONTEUDO
   (mesma cor do DEPENDENCIAS concluido = #22c55e). Vazio = sem cor (estado atual).
   As DEPS mantem a logica RT167 (verde/vermelho por conclusao) e vencem aqui. */
.tdp-quadro-head.tdp-tem-conteudo .tdp-quadro-rot { color: #22c55e; }
.tdp-quadro-head.tdp-dep-verde .tdp-quadro-rot { color: #22c55e; }
.tdp-quadro-head.tdp-dep-vermelho .tdp-quadro-rot { color: rgb(239, 68, 68); }

@media (max-width: 480px) {
  .tdp-ag-linha-orq { flex-wrap: nowrap; }
  .tdp-hint-pop { max-width: none; }
}

/* ============================================================
   RT168d — SOMENTE MOBILE: linha do orquestrador na mesma faixa
   dos executores (medidas provadas em viewport 390)
   ============================================================ */
@media (max-width: 480px) {
  /* (4) linha ocupa TODA a largura do quadro; gap 0 para a soma
     (botao agente + caixinha sid) ser EXATAMENTE igual a largura
     do botao do executor do quadro de baixo */
  .tdp-ag-linha-orq {
    width: 100%;
    gap: 8px; /* RT168g (3): espaco entre o botao do orquestrador e o Trocar SID */
    align-items: stretch;
  }
  .tdp-ag-linha-orq .tdp-ag-btn-orq {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin-bottom: 0; /* senao a linha cresce e o sid fica mais alto */
  }
  /* (1) Trocar Sessao na MESMA ALTURA do botao do agente (stretch) */
  .tdp-sid-amber {
    width: 44px;
    height: auto;
    align-self: stretch;
  }
  /* (3) botoes dos executores em TODA a largura do quadro */
  .tdp-ag-btn { width: 100%; }
  /* (2) icones a DIREITA — extremidade oposta ao nome
     (no executor o X ja vem depois do id-card) */
  .tdp-ag-btn-orq .tdp-ag-id { margin-left: auto; }
  .tdp-ag-btn-exec .tdp-ag-id { margin-left: auto; }
}

/* PERM-BLOQUEIO (CORRECAO URGENTE): campos sem permissao — SÓ o artefato que ja
   existia no FEITO: visual apagado + cursor de proibido. SEM icone, SEM
   "Sem permissão —", SEM toast (o operador nao quer msg nenhuma).
   pointer-events NAO pode existir: ele mata o :hover do campo e o cursor
   not-allowed deixa de aparecer — o disabled sozinho ja impede foco/clique. */
textarea:disabled,
input[type="text"]:disabled,
input[type="radio"]:disabled,
select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


/* ===== PICARETA / CHICOTE (task 01M3RXY34YMSW6WRF093QSC0T0) ===============
 * Indicador "agente trabalhando" no PAINEL da task: executores martelam com a
 * picareta (fagulhas a cada toque; DIAMANTE na 5a martelada) e o orquestrador
 * estala o CHICOTE. So aparece enquanto ha atividade (janela de 90s). */
.pic-ind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: var(--primary-yellow);
  font-size: 11px;
  line-height: 1;
  vertical-align: middle;
}
.pic-ind-chicote { color: var(--cyan-mid, #00b4d8); }
.pic-anim { position: relative; display: inline-block; }
.pic-anim svg { display: block; }

/* Picareta: martelada (levanta e bate no chao) */
.pic-ciclo .pic-braco,
.pic-ind .pic-braco {
  transform-origin: 62% 66%;
  animation: picMartelo 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes picMartelo {
  0%   { transform: rotate(0deg); }
  35%  { transform: rotate(-52deg); }
  55%  { transform: rotate(7deg); }   /* impacto no chao */
  70%  { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}

/* Fagulhas de pedra: saem do ponto de impacto a cada toque (3 particulas) */
.pic-fagulhas {
  position: absolute;
  left: 64%;
  bottom: 12%;
  width: 3px;
  height: 3px;
  pointer-events: none;
}
.pic-fagulhas::before,
.pic-fagulhas::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 3px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0;
  animation: picFagulha 0.9s ease-out infinite;
}
.pic-fagulhas::after {
  background: color-mix(in srgb, currentColor 70%, #f59e0b);
  animation-delay: 0.06s;
}
@keyframes picFagulha {
  0%, 52% { opacity: 0; transform: translate(0, 0) scale(0.7); }
  56%     { opacity: 1; transform: translate(1px, -1px) scale(1); }
  100%    { opacity: 0; transform: translate(9px, -12px) scale(0.45); }
}

/* Diamante: so aparece quando o ciclo "acha" (5a martelada) */
.pic-diamante {
  display: inline-block;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(4px) scale(0.4);
}
.pic-ind.pic-acha-diamante .pic-diamante,
.pic-ind.pic-acha-diamante.pic-ciclo .pic-diamante {
  width: auto;
  animation: picAchaDiamante 1.8s ease-out 0.55s forwards;
}
@keyframes picAchaDiamante {
  0%   { opacity: 0; transform: translateY(6px) scale(0.3) rotate(-14deg); }
  35%  { opacity: 1; transform: translateY(-4px) scale(1.15) rotate(6deg); }
  70%  { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translateY(0) scale(1); }
}

/* Chicote: estalada (a corda corta o ar e o impacto pisca) */
.pic-ind-chicote .pic-corda {
  transform-origin: 8% 14%;
  animation: picChicote 0.75s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
@keyframes picChicote {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(26deg); }
  55%  { transform: rotate(-16deg); }
  75%  { transform: rotate(6deg); }
  100% { transform: rotate(0deg); }
}
.pic-ind-chicote .pic-impacto {
  opacity: 0;
  animation: picImpacto 0.75s ease-out infinite;
}
@keyframes picImpacto {
  0%, 45% { opacity: 0; transform: scale(0.6); }
  55%     { opacity: 1; transform: scale(1.1); }
  100%    { opacity: 0; transform: scale(1.35); }
}
.pic-estalos {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  animation: picEstalo 0.75s ease-out infinite;
}
@keyframes picEstalo {
  0%, 50% { opacity: 0; transform: scale(0.4); }
  58%     { opacity: 0.9; transform: scale(1); }
  100%    { opacity: 0; transform: scale(1.6); }
}

/* Mobile: indicador mais discreto (390/360/320 nao pode quebrar o head) */
@media (max-width: 560px) {
  .pic-ind { margin-left: 6px; padding: 1px 5px; }
  .pic-ind svg { width: 16px; height: 16px; }
  .pic-diamante svg { width: 13px; height: 13px; }
}


/* ================= ICONES FINAIS v9c (task 01M3T56662VHCQGQ6CCXEYEK4V) =============
   Copiados EXATAMENTE de artefatos/indicadores-v9c-FINAL.html (so com prefixo .v9c-).
   PICARETA: 3 batidas completas (4,2s) + pedrinhas a cada batida + diamante branco
   VAZADO na frente (pos 3a) com estrelas ao redor; pivo no cabo (12% 76%). */
@keyframes v9c-swing{
  0%   { transform: rotate(-6deg);  animation-timing-function: cubic-bezier(.3,.9,.5,1) }
  9%   { transform: rotate(-52deg); animation-timing-function: cubic-bezier(.55,0,.85,.55) }
  21%  { transform: rotate(28deg);  animation-timing-function: cubic-bezier(.3,.9,.5,1) }
  30%  { transform: rotate(-52deg); animation-timing-function: cubic-bezier(.55,0,.85,.55) }
  42%  { transform: rotate(28deg);  animation-timing-function: cubic-bezier(.3,.9,.5,1) }
  51%  { transform: rotate(-52deg); animation-timing-function: cubic-bezier(.55,0,.85,.55) }
  63%  { transform: rotate(28deg);  animation-timing-function: cubic-bezier(.3,.9,.5,1) }
  71%  { transform: rotate(28deg) }
  93%  { transform: rotate(28deg) }
  100% { transform: rotate(-6deg); animation-timing-function: linear }
}
.v9c-pick{transform-origin:12% 76%;animation:v9c-swing 4.2s linear infinite}
@keyframes v9c-pedra1{0%,20%{opacity:0;transform:translate(0,0)}23%{opacity:1;transform:translate(0,0)}34%{opacity:0;transform:translate(6px,4px)}100%{opacity:0}}
@keyframes v9c-pedra2{0%,41%{opacity:0;transform:translate(0,0)}44%{opacity:1;transform:translate(0,0)}55%{opacity:0;transform:translate(6px,4px)}100%{opacity:0}}
@keyframes v9c-pedra3{0%,62%{opacity:0;transform:translate(0,0)}65%{opacity:1;transform:translate(0,0)}76%{opacity:0;transform:translate(6px,4px)}100%{opacity:0}}
.v9c-p1{animation:v9c-pedra1 4.2s linear infinite}
.v9c-p2{animation:v9c-pedra2 4.2s linear infinite}
.v9c-p3{animation:v9c-pedra3 4.2s linear infinite}
@keyframes v9c-surgir{
  0%,70%{opacity:0;transform:scale(.4)}
  73%{opacity:1;transform:scale(1.08)}
  76%{transform:scale(1)}
  93%{opacity:1;transform:scale(1)}
  98%{opacity:0;transform:scale(.92)}
  100%{opacity:0}
}
.v9c-dia{animation:v9c-surgir 4.2s ease-out infinite;color:#fff}
@keyframes v9c-estrela{
  0%,71%{opacity:0;transform:scale(.3)}
  75%{opacity:1;transform:scale(1)}
  85%{opacity:1;transform:scale(.85)}
  93%{opacity:0;transform:scale(.6)}
  100%{opacity:0}
}
.v9c-est{animation:v9c-estrela 4.2s ease-out infinite;color:#fff}
.v9c-est.v9c-e2{animation-delay:.12s}.v9c-est.v9c-e3{animation-delay:.22s}.v9c-est.v9c-e4{animation-delay:.3s}
/* estrelinhas do chicote (na ponta, segue o path do rAF) */
@keyframes v9c-estChicote{0%,48%{opacity:0;transform:scale(.25)}52%{opacity:1;transform:scale(1.2)}60%{opacity:0;transform:scale(.7)}100%{opacity:0}}
.v9c-ec1,.v9c-ec2{animation:v9c-estChicote 2.4s ease-out infinite;color:#fff}
.v9c-ec1.v9c-d2,.v9c-ec2.v9c-d2{animation-delay:.1s}
/* wrapper do chicote: pivo do rAF (cabo fixo) */
.v9c-whip{transform-origin:18% 82%}
/* ---- posicionamento NO PAINEL (regra (7)): colado no nome / apos o rotulo ---- */
.v9c-ind{display:inline-flex;align-items:center;line-height:0;margin-left:6px;vertical-align:middle;}
.v9c-ind svg{display:block;overflow:visible}
.tdp-quadro-head .v9c-ind{margin-left:7px}
.tdp-ag-nome + .v9c-ind, .v9c-ind.tdp-ag-nome-after{margin-left:7px}
/* ---- PILULAS dos cards (regra (3)): 14px desktop / 11px mobile, gap 7px/6px ---- */
/* (F10, operador 01/10) STACK das pilulas: ancora do canto inf. dir. e coluna —
   com 2 papeis a pilula do ORQ nasce EM CIMA e a do executor EMBAIXO; com 1,
   mesmo visual/ancoramento de sempre (bottom:10px; o _kcPilulaSubir sobe a stack). */
/* 01M3Y48YC4SG2RKHEEFVGP4F7W: NO FLUXO (wrapper .kc-ativ-row) — sem ancora absoluta
   a pilula fica no lugar certo do DOM (abaixo do anexo, antes das acoes) e o card NAO
   salta; o offset por JS (e148c7b) foi removido junto (somava com a subida das acoes e
   levava a pilula para cima do TITULO). */
.kc-ativ-stack{
  position:static;right:auto;bottom:auto;display:flex;flex-direction:column;
  align-items:flex-end;gap:4px;z-index:3;
}
.kc-ativ-stack .kc-ativ-pill{position:static;right:auto;bottom:auto}
/* (F11, operador 01/10) o chicote da pilula BATE no viewBox do svg (o desenho sai
   5.4px alem da borda esquerda na fase de "arm") — overflow:visible igual ao painel
   (.v9c-ind svg) + padding-left 9->14px da folga p/ o movimento completo caber. */
.kc-ativ-pill{
  position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:7px;
  background:#111c33;padding:4px 9px 4px 14px;border-radius:999px;font-size:11px;z-index:3;
}
.kc-ativ-pill .kc-ativ-txt{font-weight:600;white-space:nowrap}
.kc-ativ-pill.kc-ativ-orq .kc-aktiv-txt{color:var(--cyan-mid,#38bdf8)}
.kc-ativ-pill .kc-ativ-icone{position:relative;display:inline-flex;align-items:center}
.kc-ativ-pill .kc-ativ-icone svg{width:14px;height:14px;display:block;overflow:visible}
/* (F4, operador 01/10) CARD: a pilula NAO tem diamante — em vez de a picareta
   ficar parada no chao no fim do ciclo (janela do diamante), ela volta pra tras
   logo apos a 3a batida e TERMINA LA ATRAS (posicao de inicio do movimento).
   Batidas (21/42/63%) e pedrinhas (23/44/65%) mantem o timing original. */
@keyframes kc-swing{
  /* (F6) batidas mais CEDO: 1a em 14% (0.59s — era 21%/0.88s), 2a 35%, 3a 56% */
  0%   { transform: rotate(-52deg); animation-timing-function: cubic-bezier(.55,0,.85,.55) }
  14%  { transform: rotate(28deg);  animation-timing-function: cubic-bezier(.3,.9,.5,1) }
  23%  { transform: rotate(-52deg); animation-timing-function: cubic-bezier(.55,0,.85,.55) }
  35%  { transform: rotate(28deg);  animation-timing-function: cubic-bezier(.3,.9,.5,1) }
  44%  { transform: rotate(-52deg); animation-timing-function: cubic-bezier(.55,0,.85,.55) }
  56%  { transform: rotate(28deg);  animation-timing-function: cubic-bezier(.3,.9,.5,1) }
  /* volta pra tras suave (relaxa) e pausa final curta: 15% = 0.63s */
  85%  { transform: rotate(-52deg) }
  100% { transform: rotate(-52deg) }
}
.kc-ativ-pill .kc-ativ-icone .v9c-pick{animation:kc-swing 4.2s linear infinite}
/* (F6) pedrinhas do card sincronizadas com as batidas 14/35/56% (painel intacto) */
@keyframes kc-pedra1{0%,13%{opacity:0;transform:translate(0,0)}16%{opacity:1;transform:translate(0,0)}27%{opacity:0;transform:translate(6px,4px)}100%{opacity:0}}
@keyframes kc-pedra2{0%,34%{opacity:0;transform:translate(0,0)}37%{opacity:1;transform:translate(0,0)}48%{opacity:0;transform:translate(6px,4px)}100%{opacity:0}}
@keyframes kc-pedra3{0%,55%{opacity:0;transform:translate(0,0)}58%{opacity:1;transform:translate(0,0)}69%{opacity:0;transform:translate(6px,4px)}100%{opacity:0}}
.kc-ativ-pill .v9c-p1{animation:kc-pedra1 4.2s linear infinite}
.kc-ativ-pill .v9c-p2{animation:kc-pedra2 4.2s linear infinite}
.kc-ativ-pill .v9c-p3{animation:kc-pedra3 4.2s linear infinite}
/* (F12, operador 01/10) desktop PEQUENO (641-1100px): estende o MESMO estilo
   reduzido do mobile para a faixa de desktop estreito (a pilula grande cobria o
   horario do card). Operador: "em mobile ta otimo, nao mexa... ajuste apenas em
   telas menores de desktop". O padding-left mantem folga do chicote (F11);
   o mobile (<=640px) abaixo segue INTACTO. */
@media (min-width:641px) and (max-width:1100px){
  .kc-ativ-stack{gap:3px}
  .kc-ativ-pill{gap:6px;padding:3px 7px 3px 12px;font-size:10px}
  .kc-ativ-pill .kc-ativ-icone svg{width:11px;height:11px}
}
@media (max-width: 640px){
  .kc-ativ-stack{gap:3px}   /* right/bottom removidos — no FLUXO (01M3Y48YC4SG2RKHEEFVGP4F7W) */
  .kc-ativ-pill{gap:6px;padding:3px 7px;font-size:10px;right:8px;bottom:8px}
  .kc-ativ-pill .kc-ativ-icone svg{width:11px;height:11px}
}

/* 01M3YC8YHN59E8Y3TNGQVB46M1 — campo RESPONSAVEL no form da task:
   desktop = ao lado do ADR (ordem do DOM, mesma linha do flex);
   MOBILE (pedido verbatim do operador) = ACIMA de PRD e ADR em UMA linha so
   (order:-1 sobe antes dos dois; flex-basis 100% ocupa a largura inteira). */
@media (max-width: 640px){
  /* !important: o inline style do form tem flex:1/min-width:150px e o inline VENCE
      o CSS do media; order nao vem inline por isso funcionou sozinho. */
  .tdp-campo-resp{ order:-1 !important; flex:0 0 100% !important; min-width:0 !important; }
}

/* 01M3YC8YHN59E8Y3TNGQVB46M1 — pedido do operador (desktop): o controle do
   RESPONSAVEL deve ter a MESMA ALTURA dos inputs PRD/ADR ao lado e SEGUIR ate o
   FIM da linha (borda direita alinhada com os vizinhos). O multiselect nasce com
   height:43px/min-width:140px + wrapper inline-flex (140px vs 250px dos inputs);
   aqui igualamos ao input dos vizinhos (height medido = 33px, width:100%). */
.tdp-campo-resp .multiselect-wrapper{ width:100% !important; display:flex !important; }
.tdp-campo-resp .ms-toggle{ width:100% !important; min-width:0 !important; height:33px !important; box-sizing:border-box; }

/* 01M40ZW0 + 01M410G7 (operador 03/10) — BASE primeiro: a fonte da badge do
   responsavel mora aqui (saiu do inline do kanban-card p/ ser media-query
   controlavel). 01M410G7 UNIFICOU tudo em 11px (fonte aprovada = .kc-ativ-pill)
   — logo a media DESKTOP deixou de mexer na FONTE (so o icone 12px continua). */
.kc-resp-badge{ font-size:11px; }

/* SOMENTE DESKTOP (min-width 769px; ate 768 = mobile aprovado, NAO mexer).
   Garante que a coluna RESPONSAVEL tenha a MESMA ALTURA do input PRD/ADR
   mesmo ENQUANTO o multiselect ainda nao inicializou (init adiado -> folga
   de ~33px embaixo da coluna = o "hoje difere" do operador): o #tdp-resp-ms
   reserva o espaco do input. Badge +2px de fonte e icone de user maior. */
@media (min-width: 769px){
  .tdp-campo-resp #tdp-resp-ms{ min-height:33px; }
}

/* operador 03/10: o icone de user do responsavel = 14px (o MESMO da pilula
   .kc-ativ-icone svg) em DESKTOP E MOBILE — antes o mobile herdava o
   atributo width=10 do svg. Regra global, fora da media. */
.kc-resp-icone{ width:14px; height:14px; }


/* ===== 01M412XQ (operador 03/10): ID da task + copiar SEM transbordo em
   TODA faixa de desktop =====
   O .kc-id e um flex container com o span mono (26 chars, white-space normal
   mas nao encolhia: flex item sem min-width:0) + botao 24px — conteudo de
   ~200px em ~140px disponiveis => ID e botao SAIAM pela direita do card
   (invadiam a coluna vizinha; medido: span +19px, botao +47px fora do card).
   Fix: min-width:0 no container e ELLIPSIS no span (o botao volta pra dentro).
   VARREDURA 03/10 (17 larguras, medido no app real): a regra antiga so cobria
   1024-1439 — em 769-1023 E em >=1440 o container transbordava (id sw=206 >
   cw=141; botao +52px ALEM da borda do card) sem reticencias = "em umas telas
   ele coloca ... e em outras nao" (operador). Agora vale p/ todo desktop
   (min-width:769 = desktop/tablet landscape; <=768 continua INTACTO =
   card min-width:100% aprovado). Ellipsis so age quando o conteudo nao cabe. */
@media (min-width: 769px) {
  .kc-id {
    min-width: 0;
    overflow: hidden;
  }
  .kc-id > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* ===== 01M412NZ6 (decisao fechada do operador 03/10): ICONES POR ORIGEM —
   copiado EXATO do preview 2 (/home/node/projetos/preview-icones-kanban/
   index.html, secoes 2b e 3) — analisando=robo+sparkles, checando=lupa.
   Coordenando (chicote v9c) NAO muda. ===== */
.bmWrap svg, .lupaWrap { overflow: visible; }   /* sparkles saem do viewBox (preview: svg{overflow:visible}) */
  @keyframes scanSpiral{
    0.00%{transform:translate(0.00px,-4.50px)}
    2.50%{transform:translate(3.05px,-3.05px)}
    5.00%{transform:translate(4.12px,-0.00px)}
    7.50%{transform:translate(2.78px,2.78px)}
    10.00%{transform:translate(0.00px,3.75px)}
    12.50%{transform:translate(-2.52px,2.52px)}
    15.00%{transform:translate(-3.38px,0.00px)}
    17.50%{transform:translate(-2.25px,-2.25px)}
    20.00%{transform:translate(-0.00px,-3.00px)}
    22.50%{transform:translate(1.99px,-1.99px)}
    25.00%{transform:translate(2.62px,-0.00px)}
    27.50%{transform:translate(1.72px,1.72px)}
    30.00%{transform:translate(0.00px,2.25px)}
    32.50%{transform:translate(-1.46px,1.46px)}
    35.00%{transform:translate(-1.87px,0.00px)}
    37.50%{transform:translate(-1.19px,-1.19px)}
    40.00%{transform:translate(-0.00px,-1.50px)}
    42.50%{transform:translate(0.93px,-0.93px)}
    45.00%{transform:translate(1.12px,-0.00px)}
    47.50%{transform:translate(0.66px,0.66px)}
    50.00%{transform:translate(0.00px,0.75px)}
    52.50%{transform:translate(-0.40px,0.40px)}
    55.00%{transform:translate(-0.38px,0.00px)}
    57.50%{transform:translate(-0.13px,-0.13px)}
    60.00%{transform:translate(-0.00px,-0.00px)}
    61%{transform:translate(0,0)}
    100%{transform:translate(0,0)}
  }
@keyframes checkPop{
    0%,62%{opacity:0;transform:scale(.4)}
    72%{opacity:1;transform:scale(1.18)}
    78%{transform:scale(1)}
    93%{opacity:1;transform:scale(1)}
    98%{opacity:0;transform:scale(.92)}
    100%{opacity:0}
  }
  .lupaWrap .lupaBody{animation:scanSpiral 3.4s linear infinite}
  .lupaWrap .lupaCheck{animation:checkPop 3.4s ease-out infinite;transform-origin:center}

  /* ==== 2b: bot-message-square + sparkles (teste do operador 03/10) ==== */
  .bmWrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
  .bmOlhos{transform-box:fill-box;transform-origin:center;animation:bmPisca 3.2s ease-in-out infinite}
  .spkWrap{position:absolute;right:-12px;top:-5px}  /* operador 03/10: posicao final (ajustes: -4, 2, -16, -12) */
  .spkWrap .spkP3{animation:spkSeqA 1.7s linear infinite}
  .spkWrap .spkP1{animation:spkSeqB 1.7s linear infinite}
  .spkWrap .spkP2{animation:spkSeqC 1.7s linear infinite}
@keyframes bmPisca{0%,6%{transform:scaleY(1)}9%{transform:scaleY(.12)}12%{transform:scaleY(1)}20%{transform:scaleY(.12)}23%{transform:scaleY(1)}55%,62%{transform:scaleY(1)}65%{transform:scaleY(.12)}68%,100%{transform:scaleY(1)}}
  @keyframes spkSeqA{0%{opacity:0}10%{opacity:1}88%{opacity:1}97%,100%{opacity:0}}
  @keyframes spkSeqB{0%,20%{opacity:0}32%{opacity:1}88%{opacity:1}97%,100%{opacity:0}}
  @keyframes spkSeqC{0%,42%{opacity:0}54%{opacity:1}88%{opacity:1}97%,100%{opacity:0}}


/* ═══ MODO CUTUCADA (01M4AZPCC) — AJUSTE MOBILE do header do board ═══
   Pedido do operador (print do celular): no MOBILE o botao "Cutucada Ativa"
   grande atrapalhava o PA. Agora: linha 1 = PA sozinho de ponta a ponta;
   linha 2 = Cutucada + Nova Task equilibrados. DESKTOP INTACO (regra existe
   SÓ dentro deste breakpoint de 640px — o padrao da casa). O slot do indice
   PA continua no fluxo (no mobile ele ja e oculto pelo CSS existente; no
   desktop nao ha regra aqui). Quebras: specificity .kc-header-actions #id +
   posicao NO FIM do arquivo vencem os !important do bloco 768px antigo. */
@media (max-width: 640px) {
  .kc-header-actions {
    flex-wrap: wrap !important;
    row-gap: var(--space-sm, 8px) !important;
  }
  .kc-header-actions #indice-pa-slot-desktop {
    order: 0;
    flex: 0 0 auto;
  }
  .kc-header-actions #btn-piloto-kanban {
    flex: 1 0 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    min-width: 0 !important;
  }
  .kc-header-actions #btn-cutucada-kanban,
  .kc-header-actions #btn-new-task-kanban {
    flex: 1 1 0 !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    min-width: 0 !important;
  }
}

/* ── Barra de acoes do modal de conversa (task 01M5SYBWEXP44ZXAR4GT9MY852) ──
   Respiro a esquerda igual ao titulo do header (20px) e separador de 1px entre a
   barra e o conteudo. No mobile o padding cai para 12px e a barra rola na
   horizontal em vez de cortar os botoes. */
.cv-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-default);
}
@media (max-width: 640px) {
  .cv-actions {
    padding: 10px 12px; gap: 6px;
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
  }
}

/* ── Overview: controle MANUAL de colunas visiveis (task 01M62AZMCVABYNY9K2W8EDQ018) ──
   Icone 14px discreto ao lado do titulo da secao; o multiselect abre logo abaixo.
   Nada de toolbar/linha de filtros nova. */
.kanban-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-md); }
/* Ajuste: titulo e icone na MESMA linha de base (a margem do h2 empurrava o icone p/ baixo) */
.kanban-section-head .kanban-section-title {
  display: flex; align-items: center;
  margin: 0;
  line-height: 1.2;
}
.kanban-section-head .ov-buckets-btn { align-self: center; line-height: 1; }
.ov-buckets-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border-radius: 6px;
  background: transparent; border: 1px solid transparent;
  color: hsl(var(--muted-foreground, 215.4 16.3% 60%)); cursor: pointer;
  opacity: .7; transition: opacity .15s, background .15s, border-color .15s;
}
.ov-buckets-btn:hover { opacity: 1; background: rgba(100,116,139,.14); border-color: rgba(100,116,139,.35); }
.ov-buckets-btn:focus-visible { outline: 2px solid var(--primary-yellow, #facc15); outline-offset: 2px; }
.ov-buckets-btn[aria-expanded="true"] { opacity: 1; background: rgba(100,116,139,.18); border-color: rgba(100,116,139,.45); }
.ov-buckets-btn svg { width: 14px; height: 14px; }
.ov-buckets-restaurar {
  margin: 6px 0 2px; font-size: 11px; color: hsl(var(--muted-foreground, 215.4 16.3% 60%));
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
#ov-buckets-ms { margin: 6px 0 2px; }
@media (max-width: 640px) {
  .kanban-section-head { flex-wrap: wrap; }
  .ov-buckets-btn { width: 26px; height: 26px; }   /* alvo de toque confortavel no celular */
}

/* ── Overview: painel de colunas ancorado no icone (ajuste 01M62AZM) ── */
.ov-buckets-wrap { position: relative; display: inline-flex; align-items: center; }
.ov-buckets-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 190px; padding: 6px;
  background: var(--bg-card); border: 1px solid var(--border-default);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.ov-buckets-panel .ov-buckets-opt:hover { background: rgba(100,116,139,.15); }
.ov-buckets-panel #ov-buckets-mostrar-todas:hover { background: rgba(100,116,139,.15); }