:root {
      --ceopag-blue: #0057a8;
      --ceopag-blue-dark: #003b73;
      --ceopag-blue-soft: #e8f2ff;
      --ceopag-orange: #ff7a00;
      --ceopag-orange-dark: #d85f00;
      --ceopag-white: #ffffff;
      --ceopag-ink: #0f2742;
    }
  body {
      background-color: #f0f4f8;
      font-family: 'Arial', sans-serif;
    }

    /* ===== SIDEBAR ===== */
    .app-sidebar {
      width: 230px;
      min-width: 230px;
      background: linear-gradient(180deg, #0057a8 0%, #003b73 100%);
      overflow-y: auto;
      transition: width .25s ease, min-width .25s ease;
      flex-shrink: 0;
    }
    .app-sidebar.collapsed {
      width: 0;
      min-width: 0;
      overflow: hidden;
    }
    .sidebar-nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 11px 14px;
      border-radius: 10px;
      border: none;
      background: transparent;
      color: rgba(255,255,255,.8);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      text-align: left;
      transition: background .15s, color .15s;
      white-space: nowrap;
      overflow: hidden;
    }
    .sidebar-nav-item i {
      width: 18px;
      text-align: center;
      flex-shrink: 0;
      font-size: 15px;
    }
    .sidebar-nav-item:hover {
      background: rgba(255,255,255,.15);
      color: #fff;
    }
    .sidebar-nav-item.active {
      background: rgba(255,255,255,.22);
      color: #fff;
      font-weight: 700;
    }
    .sidebar-nav-item.sidebar-action {
      background: rgba(255,165,0,.25);
      color: #ffd07a;
    }
    .sidebar-nav-item.sidebar-action:hover {
      background: rgba(255,165,0,.4);
      color: #fff;
    }
    .sidebar-divider {
      height: 1px;
      background: rgba(255,255,255,.15);
      margin: 8px 10px;
    }
    .sidebar-header-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(0, 87, 168, 0.14);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.62);
      color: var(--ceopag-blue);
      cursor: pointer;
    }
    .sidebar-header-toggle:hover {
      background: #fff;
      color: var(--ceopag-blue-dark);
    }
    #navOcultarSidebar,
    #sidebarReveal {
      display: none !important;
    }
    /* ===== STATUS DOT (ativo/inativo) ===== */
    .status-dot {
      display: inline-block;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      margin-left: 6px;
      flex-shrink: 0;
      vertical-align: middle;
    }
    .status-dot.ativo  { background: #22c55e; box-shadow: 0 0 4px rgba(34,197,94,.6); }
    .status-dot.inativo { background: #94a3b8; }

    /* ===== MODAL DE EDIÇÃO DE COLABORADOR ===== */
    #editCollaboratorModal {
      position: fixed; inset: 0; z-index: 9999;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,.45);
    }
    #editCollaboratorModal.hidden { display: none; }
    #editCollaboratorModal .modal-box {
      background: #fff; border-radius: 14px;
      width: 100%; max-width: 480px;
      box-shadow: 0 20px 60px rgba(0,0,0,.3);
      overflow: hidden;
    }
    #editCollaboratorModal .modal-header {
      background: linear-gradient(90deg, #0057a8 0%, #003b73 100%);
      color: #fff; padding: 14px 20px;
      display: flex; align-items: center; justify-content: space-between;
      font-weight: 700; font-size: 15px;
    }
    #editCollaboratorModal .modal-body { padding: 20px; }
    #editCollaboratorModal label {
      display: block; font-size: 11px; font-weight: 700;
      color: #64748b; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
    }
    #editCollaboratorModal input[type="text"],
    #editCollaboratorModal input[type="email"] {
      width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1;
      border-radius: 8px; font-size: 14px; margin-bottom: 14px;
      box-sizing: border-box;
    }
    .toggle-ativo-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 16px; border-radius: 20px; border: none;
      font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s;
    }
    .toggle-ativo-btn.is-ativo   { background: #dcfce7; color: #15803d; }
    .toggle-ativo-btn.is-inativo { background: #f1f5f9; color: #64748b; }
    .collaborator { cursor: pointer; transition: background .12s; }
    .collaborator:hover { background: #f8fafc; }
    .card {
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      padding: 1rem;
      margin-bottom: 1rem;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .card:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }
    .header-bar {
      background: linear-gradient(90deg, #4a90e2 0%, #50e3c2 100%);
      color: white;
      padding: 1rem;
      font-weight: 600;
      font-size: 1.5rem;
      border-radius: 8px 8px 0 0;
      margin-bottom: 1rem;
      user-select:none;
    }
    .department-header {
      padding: 0.75rem 1rem;
      border-radius: 8px 8px 0 0;
      font-weight: 600;
      font-size: 1.2rem;
      margin-bottom: 1rem;
      user-select:none;
      box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
    }
    .department-team-group {
      border: 1px solid #d9e3f0;
      border-radius: 14px;
      background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
      padding: 0.5rem;
      box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
    }
    .department-header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      flex-wrap: wrap;
    }
    .department-header-title {
      font-size: 1rem;
      letter-spacing: 0.01em;
      text-transform: capitalize;
    }
    .department-header-actions {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-left: auto;
    }
    .department-count {
      display: inline-flex;
      align-items: center;
      padding: 0.28rem 0.82rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.42);
      font-size: 0.8rem;
      font-weight: 700;
      color: #ffffff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
      white-space: nowrap;
    }
    .department-Departamento-Pessoal {
      background: linear-gradient(90deg, #28a745 0%, #6ee7b7 100%);
      color: white;
    }
    .department-RH {
      background: linear-gradient(90deg, #ff6f61 0%, #ff9f43 100%);
      color: white;
    }
    .team-departamento-pessoal { background-color: #28a745; }
    .team-rh { background-color: #ff6f61; }
    .team-0 { background-color: #4CAF50; }
    .team-1 { background-color: #2196F3; }
    .team-2 { background-color: #FF9800; }
    .team-3 { background-color: #F44336; }
    .team-4 { background-color: #9C27B0; }
    .team-5 { background-color: #FFEB3B; }
    .team-6 { background-color: #795548; }
    .team-7 { background-color: #00BCD4; }
    .team-8 { background-color: #E91E63; }
    .team-9 { background-color: #3F51B5; }
    .team-10 { background-color: #8BC34A; }
    .team-11 { background-color: #CDDC39; }
    .team-12 { background-color: #FF5722; }
    .team-13 { background-color: #673AB7; }
    .team-14 { background-color: #009688; }
    .team-15 { background-color: #FFC107; }
    .team-16 { background-color: #607D8B; }
    .team-17 { background-color: #AD1457; }
    .team-18 { background-color: #5D4037; }
    .team-19 { background-color: #FF1744; }
    .team-20 { background-color: #00E5FF; }
    .team-21 { background-color: #1DE9B6; }
    .team-22 { background-color: #76FF03; }
    .team-23 { background-color: #C6FF00; }
    .team-24 { background-color: #D500F9; }
    .team-25 { background-color: #FF6D00; }
    .team-26 { background-color: #AEEA00; }
    .team-27 { background-color: #C51162; }
    .team-28 { background-color: #AA00FF; }
    .team-29 { background-color: #FFAB00; }

    .sector-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 20px; font-weight: 700; white-space: nowrap; color: #fff; }
    .sector-badge:not([class*="team-"]) { background-color: #6b7280; }

    /* Cabeçalho de grupo de setor na lista de tarefas */
    .sector-group-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 16px; border-radius: 10px; margin: 18px 0 6px;
      color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .03em;
    }
    .sector-group-header:first-child { margin-top: 0; }
    .sector-group-header:not([class*="team-"]) { background-color: #6b7280; }
    .sector-group-count {
      background: rgba(255,255,255,.25); border-radius: 20px;
      padding: 2px 10px; font-size: 11px; font-weight: 600;
    }
    /* Cores fixas por nome de setor */
    .sector-group-header[data-sector-name="financeiro"]     { background: #22c55e !important; }
    .sector-group-header[data-sector-name="relacionamento"] { background: #8b5cf6 !important; }

    .task-done { text-decoration: line-through; opacity: 0.6; }
    .filter-hidden { display: none !important; }
    .tarefa-item { border-left: 4px solid transparent; }
    .tarefa-item.status-nao-iniciado { border-left-color: #dc3545; }
    .tarefa-item.status-pendente { border-left-color: #d97706; }
    .tarefa-item.status-em-retorno { border-left-color: #2563eb; }
    .tarefa-item.status-concluido { border-left-color: #15803d; }
    .status-label.status-nao-iniciado { background-color: #ffcccc; color: #dc3545; }
    .status-label.status-pendente { background-color: #fff3cd; color: #856404; }
    .status-label.status-em-retorno { background-color: #cce5ff; color: #004085; }
    .status-label.status-concluido { background-color: #d4edda; color: #155724; }
    .status-Não-Iniciado { background-color: #ffcccc; color: #dc3545; }
    .status-Pendente { background-color: #fff3cd; color: #856404; }
    .status-Em-Retorno { background-color: #cce5ff; color: #004085; }
    .status-Concluído { background-color: #d4edda; color: #155724; }
    .collaborator {
      display: flex;
      align-items: center;
      padding: 0.75rem;
      background: linear-gradient(135deg, #ffffff 0%, #f6fbff 100%);
      border-radius: 8px;
      margin-bottom: 0.5rem;
      transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
      border: 1px solid #dde7f3;
    }
    .collaborator:hover {
      background-color: #eef8ff;
      transform: translateY(-2px);
      box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12);
    }
    .collaborator-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      margin-right: 1rem;
      background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
      color: white;
      user-select:none;
      box-shadow: 0 10px 18px rgba(59, 130, 246, 0.22);
    }
    .collaborator-info {
      flex: 1;
    }
    .collaborator-name {
      font-weight: 600;
      color: #2c3e50;
    }
    .collaborator-role {
      color: #7f8c8d;
      font-size: 0.9rem;
    }
    .collaborator.is-gestor {
      background: linear-gradient(135deg, #fffbeb 0%, #fef9ee 100%);
      border-left-width: 5px;
    }
    .task-card {
      border: 1px solid #e9ecef;
      border-radius: 8px;
      padding: 0.75rem;
      margin-bottom: 0.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #ffffff;
      transition: transform 0.2s, box-shadow 0.2s;
      color: black;
    }
    .task-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }
    .task-card .team-indicator {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 0.5rem;
    }
    .task-info {
      flex: 1;
    }
    .task-title {
      font-weight: 600;
      color: #041629;
    }
    .task-meta {
      color: #01000e;
      font-size: 0.9rem;
    }
    .status-label {
      padding: 0.25rem 0.75rem;
      border-radius: 12px;
      font-size: 0.85rem;
      margin-left: 0.5rem;
      user-select:none;
    }
    .task-card-header {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      justify-content: space-between;
      align-items: flex-start;
    }
    .task-card-body {
      flex: 1 1 320px;
      min-width: 0;
    }
    .task-card-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
      justify-content: flex-end;
      margin-left: auto;
    }
    .task-status-select {
      min-width: 150px;
    }
    .task-step-form {
      border: 1px solid #e5e7eb;
      background: #fff;
      border-radius: 8px;
      padding: 0.9rem;
    }
    .task-step-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 0.75rem;
      align-items: end;
    }
    .task-step-form input,
    .task-step-form select {
      width: 100%;
    }
    .task-flow-progress {
      width: 100%;
      height: 10px;
      background: #e5e7eb;
      border-radius: 999px;
      overflow: hidden;
    }
    .task-flow-progress-bar {
      height: 100%;
      background: linear-gradient(90deg, #2563eb 0%, #14b8a6 100%);
      transition: width 0.2s ease;
    }
    .task-flow-step {
      border: 1px solid #e5e7eb;
      border-left: 4px solid #cbd5e1;
      border-radius: 12px;
      background: #f8fafc;
      padding: 0.85rem;
    }
    .task-flow-step.status-nao-iniciado {
      border-left-color: #dc3545;
    }
    .task-flow-step.status-pendente {
      border-left-color: #d97706;
    }
    .task-flow-step.status-em-retorno {
      border-left-color: #2563eb;
    }
    .task-flow-step.status-concluido {
      border-left-color: #15803d;
    }
    @media (max-width: 768px) {
      .task-general-assignment,
      .task-auto-fields {
        grid-template-columns: 1fr;
      }
      .task-card-toolbar {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
      }
    }
    #listaTarefas, #listaSetores {
      max-height: 440px;
      overflow-y: auto;
      padding: 0.5rem;
    }
    #listaTarefas::-webkit-scrollbar, #listaSetores::-webkit-scrollbar {
      width: 8px;
    }
    #listaTarefas::-webkit-scrollbar-thumb, #listaSetores::-webkit-scrollbar-thumb {
      background-color: #a1a1aa;
      border-radius: 4px;
    }
    #listaTarefas::-webkit-scrollbar-track, #listaSetores::-webkit-scrollbar-track {
      background-color: #f1f1f1;
    }
    .action-icon {
      font-size: 1rem;
      cursor: pointer;
      margin-left: 0.5rem;
      user-select:none;
    }
    .trash-icon {
      color: #e74c3c;
    }
    .trash-icon:hover {
      color: #c0392b;
    }
    .notify-icon {
      color: white;
      font-size: 1.2rem;
      cursor: pointer;
      margin-right: 1rem;
      user-select:none;
    }
    .notify-icon:hover {
      color: #ecf0f1;
    }
    .return-icon {
      color: #3498db;
    }
    .return-icon:hover {
      color: #2980b9;
    }
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      z-index: 20;
      justify-content: center;
      align-items: center;
    }
    .modal-content {
      background-color: #ffffff;
      padding: 20px;
      width: 90%;
      max-width: 600px;
      border-radius: 12px;
      box-shadow: 0 8px 16px rgba(0,0,0,0.2);
      position: relative;
    }
    .notification-panel {
      display: none;
      position: absolute;
      right: 10px;
      top: 60px;
      background-color: #ffffff;
      border: 1px solid #e9ecef;
      padding: 10px;
      max-height: 200px;
      overflow-y: auto;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      width: 300px;
      z-index: 10;
      border-radius: 8px;
    }
    .notification-item {
      display: flex;
      align-items: center;
      padding: 5px;
      border-bottom: 1px solid #eee;
      background-color: #f8f9fa;
      border-radius: 4px;
      margin-bottom: 5px;
    }
    .notification-item:last-child {
      border-bottom: none;
    }
    .speech-bubble {
      margin-right: 8px;
      font-size: 16px;
      color: #2ecc71;
      user-select:none;
    }
    .highlight-name { font-weight: bold; color: #3498db; user-select:none; }
    .highlight-task { font-weight: bold; color: #e74c3c; user-select:none; }
    .highlight-group-name { font-weight: bold; color: #0057a8; user-select:none; }
    .highlight-group-dept { font-style: italic; color: #d35400; user-select:none; }
    .highlight-group-desc { background-color: #f0f4f8; padding: 2px 4px; border-radius: 4px; user-select:none; }
    .eye-icon {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      color: #6b7280;
      user-select:none;
    }
    .suggestions {
      position: absolute;
      background: white;
      border: 1px solid #e9ecef;
      max-height: 200px;
      overflow-y: auto;
      width: 100%;
      z-index: 10;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      border-radius: 8px;
    }
    .suggestions div {
      padding: 8px;
      cursor: pointer;
      background-color: #f8f9fa;
      user-select:none;
    }
    .suggestions div:hover {
      background-color: #e9ecef;
    }
    .greeting {
      font-size: 1.5rem;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 1rem;
      padding: 1rem;
      background: linear-gradient(90deg, #0057a8 0%, #ff7a00 100%);
      border-radius: 8px;
      color: white;
      text-align: center;
      user-select:none;
    }
    button {
      transition: background-color 0.2s, transform 0.2s;
    }
    button:hover {
      transform: translateY(-1px);
    }
    /* ===== CRIAR TAREFA – layout ===== */
    .criar-tarefa-card {
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 4px 20px rgba(0,0,0,.09);
      overflow: hidden;
    }
    .task-create-panel {
      margin: 0.75rem;
      animation: taskCreatePanelIn .18s ease-out;
    }
    @keyframes taskCreatePanelIn {
      from { opacity: 0; transform: translateY(-8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .criar-tarefa-header {
      background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 60%, #ea580c 100%);
      padding: 1rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #fff;
    }
    .criar-tarefa-voltar {
      background: rgba(255,255,255,.15);
      border: 1px solid rgba(255,255,255,.35);
      color: #fff;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background .2s;
    }
    .criar-tarefa-voltar:hover { background: rgba(255,255,255,.28); }
    .criar-tarefa-body {
      padding: 1.75rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25rem;
    }
    .form-group { display: flex; flex-direction: column; gap: 5px; }
    .form-group.full { grid-column: 1 / -1; }
    .form-label {
      font-size: 13px;
      font-weight: 600;
      color: #374151;
    }
    .form-input {
      width: 100%;
      padding: 9px 12px;
      border: 1.5px solid #d1d5db;
      border-radius: 8px;
      font-size: 14px;
      color: #111827;
      background: #fff;
      transition: border-color .2s, box-shadow .2s;
      box-sizing: border-box;
    }
    .form-input:focus {
      outline: none;
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37,99,235,.12);
    }
    textarea.form-input { resize: vertical; min-height: 82px; }

    /* Categoria da Demanda */
    .categoria-demanda-block {
      background: linear-gradient(135deg, #1e3a8a, #2563eb);
      border-radius: 10px;
      padding: 14px 16px;
      box-shadow: 0 2px 8px rgba(37,99,235,.25);
    }
    .categoria-demanda-title {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 10px;
    }
    .categoria-demanda-btns { display: flex; gap: 10px; }
    .categoria-demanda-item { flex: 1; cursor: pointer; }
    .cat-btn {
      text-align: center;
      padding: 10px 8px;
      border-radius: 8px;
      border: 2px solid rgba(255,255,255,.35);
      background: rgba(255,255,255,.1);
      color: #fff;
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      transition: all .2s;
    }
    .cat-btn:hover, .cat-btn.selected {
      background: rgba(255,255,255,.95);
      color: #1e3a8a;
      border-color: #fff;
    }

    /* Upload de anexo */
    .anexo-upload-label {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border: 2px dashed #cbd5e1;
      border-radius: 8px;
      cursor: pointer;
      color: #64748b;
      font-size: 13px;
      font-weight: 500;
      transition: border-color .2s, background .2s;
    }
    .anexo-upload-label:hover { border-color: #2563eb; background: #eff6ff; color: #2563eb; }
    .anexo-upload-label input[type="file"] { display: none; }

    /* Botão principal */
    .btn-criar-tarefa {
      width: 100%;
      padding: 13px;
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      transition: opacity .2s, transform .15s;
      letter-spacing: .3px;
    }
    .btn-criar-tarefa:hover { opacity: .92; transform: translateY(-1px); }
    .btn-criar-tarefa:disabled { opacity: .6; cursor: not-allowed; transform: none; }

    /* Adicionar passo */
    .btn-add-step {
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background .2s;
    }
    .btn-add-step:hover { background: #dbeafe; }

    /* Responsivo */
    @media (max-width: 640px) {
      .criar-tarefa-body { grid-template-columns: 1fr; padding: 1.1rem; }
      .form-group.full { grid-column: 1; }
    }
    /* ===== FIM CRIAR TAREFA ===== */

    .multi-task-container {
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 0.75rem;
      background: #f8fafc;
      overflow: visible;
      margin-bottom: 0;
    }
    .task-general-assignment {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.75rem;
      margin: 0.5rem 0 0.75rem;
    }
    .task-general-assignment.is-flow-mode,
    .task-mode-hidden {
      display: none;
    }
    .task-mode-select {
      border-color: #cbd5e1;
      background: #fff;
      font-weight: 600;
    }
    .task-auto-fields {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.75rem;
    }
    .task-mode-badge {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      gap: 0.35rem;
      padding: 0.2rem 0.55rem;
      border-radius: 999px;
      background: #eef2ff;
      color: #4338ca;
      font-size: 0.72rem;
      font-weight: 700;
    }
    .task-number-label {
      display: inline-flex;
      width: fit-content;
      padding: 0.15rem 0.45rem;
      border-radius: 6px;
      background: #f1f5f9;
      color: #334155;
      font-size: 0.72rem;
      font-weight: 700;
    }
    .multi-task-row {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
      flex-wrap: wrap;
    }
    .multi-task-row > * {
      flex: 1 1 150px;
    }
    .multi-task-remove {
      cursor: pointer;
      color: #e74c3c;
      font-size: 1.5rem;
      user-select:none;
    }
    .multi-task-remove:hover {
      color: #c0392b;
    }
    .icon-group {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #0057a8 0%, #ff7a00 100%);
      color: white;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      font-size: 14px;
      margin-left: 0.25rem;
      user-select:none;
    }
    .dashboard-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 1rem;
      align-items: center;
    }
    .dashboard-filters > * {
      flex: 1 1 200px;
    }
    .dashboard-filters label {
      font-weight: 600;
      color: #2c3e50;
      user-select:none;
    }
    .dashboard-filters select, .dashboard-filters input[type="text"] {
      width: 100%;
      padding: 0.5rem;
      border-radius: 8px;
      border: 1px solid #ccc;
    }
    .multi-task-container::-webkit-scrollbar {
      width: 8px;
    }
    .multi-task-container::-webkit-scrollbar-thumb {
      background-color: #a1a1aa;
      border-radius: 4px;
    }
    .multi-task-container::-webkit-scrollbar-track {
      background-color: #f1f1f1;
    }
    .charts-container {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      margin-top: 2rem;
      justify-content: center;
    }
    .charts-container > div {
      flex: 1 1 400px;
      max-width: 500px;
    }
    .charts-container h3 {
      text-align: center;
      color: #2c3e50;
      font-weight: 600;
      margin-bottom: 1rem;
    }
    canvas {
      background-color: #fff;
      border-radius: 8px;
      padding: 1rem;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .task-dialog {
      background-color: white;
      color: #333;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: none;
      z-index: 1000;
      width: 90%;
      max-width: 600px;
      max-height: 90vh;
      overflow-y: auto;
    }
    .task-dialog h3 {
      margin: 0 0 15px;
      color: #333;
    }
    .task-dialog input,
    .task-dialog textarea,
    .task-dialog select {
      width: 100%;
      padding: 10px;
      margin: 5px 0;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    .task-dialog button {
      width: 100%;
      padding: 10px;
      margin: 5px 0;
      background-color: #0078d4;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    .task-dialog button:hover {
      background-color: #005bb5;
    }
    .task-dialog .close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 1.4rem;
      font-weight: bold;
      cursor: pointer;
      color: #fff;
      background: #e53e3e;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      transition: background 0.2s;
    }
    .task-dialog .close-btn:hover {
      background: #c53030;
    }
    .task-tempo-info span {
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .task-title-suggestions {
      position: fixed;
      background: #fff;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.12);
      z-index: 99999;
      max-height: 240px;
      overflow-y: auto;
    }
    .task-title-option {
      padding: 8px 12px;
      cursor: pointer;
      font-size: 0.85rem;
      color: #374151;
      border-bottom: 1px solid #f3f4f6;
      transition: background 0.15s;
    }
    .task-title-option:last-child { border-bottom: none; }
    .task-title-option:hover,
    .task-title-option.active {
      background: #eff6ff;
      color: #1d4ed8;
    }
    .task-title-option strong { color: #1d4ed8; }
    .gradient-header {
      background: linear-gradient(to right, var(--ceopag-blue), var(--ceopag-orange));
    }

    .ceopag-login-bg {
      background:
        linear-gradient(135deg, rgba(0, 87, 168, 0.08), rgba(255, 122, 0, 0.08)),
        #f4f7fb;
    }
    .ceopag-login-card {
      border: 1px solid rgba(0, 87, 168, 0.12);
      box-shadow: 0 18px 48px rgba(15, 39, 66, 0.16);
    }
    .ceopag-login-logo {
      max-height: 70px;
      width: auto;
      object-fit: contain;
    }
    .ceopag-title {
      color: var(--ceopag-blue);
    }
    .ceopag-link {
      color: var(--ceopag-blue);
      font-weight: 600;
    }
    .ceopag-primary-btn {
      background: linear-gradient(90deg, var(--ceopag-blue) 0%, #0474d8 100%) !important;
      color: #fff !important;
      border: none;
    }
    .ceopag-primary-btn:hover {
      background: linear-gradient(90deg, var(--ceopag-blue-dark) 0%, var(--ceopag-blue) 100%) !important;
    }
    .ceopag-orange-btn {
      background: linear-gradient(90deg, var(--ceopag-orange) 0%, #ff9d2e 100%) !important;
      color: #fff !important;
      border: none;
    }
    .ceopag-orange-btn:hover {
      background: linear-gradient(90deg, var(--ceopag-orange-dark) 0%, var(--ceopag-orange) 100%) !important;
    }
    #appContainer { display: flex; flex-direction: column; min-height: 100vh; }
    .app-with-sidebar { display: flex; flex: 1; min-height: 0; }
    .app-sidebar { flex-shrink: 0; overflow-y: auto; }
    .app-layout { flex: 1; overflow-y: auto; min-width: 0; }

    .ceopag-app-header {
      flex-shrink: 0;
      background: linear-gradient(90deg, #ffffff 0%, #f7fbff 42%, #fff3e8 100%);
      color: var(--ceopag-ink) !important;
      border-bottom: 3px solid var(--ceopag-orange);
      box-shadow: 0 8px 24px rgba(0, 87, 168, 0.12);
    }
    .ceopag-logo-wrap {
      background: #fff;
      border: 1px solid rgba(0, 87, 168, 0.12);
      border-radius: 10px;
      padding: 0.35rem 0.7rem;
    }
    .ceopag-header-logo {
      height: 48px;
      width: auto;
      object-fit: contain;
      filter: none;
    }
    .ceopag-section-header,
    .greeting {
      background: linear-gradient(90deg, var(--ceopag-blue) 0%, #0877d8 68%, var(--ceopag-orange) 100%) !important;
      color: #fff !important;
      padding: 1rem;
      border-radius: 8px;
    }
    .task-flow-progress-bar {
      background: linear-gradient(90deg, var(--ceopag-blue) 0%, var(--ceopag-orange) 100%);
    }
    .task-mode-badge {
      background: var(--ceopag-blue-soft);
      color: var(--ceopag-blue);
    }
    .task-number-label {
      background: #fff3e8;
      color: var(--ceopag-orange-dark);
      border: 1px solid rgba(255, 122, 0, 0.24);
    }
    .icon-group {
      background: linear-gradient(135deg, var(--ceopag-blue) 0%, var(--ceopag-orange) 100%);
    }
    .highlight-group-name {
      color: var(--ceopag-blue);
    }
    .task-step-title,
    .text-purple-700,
    .text-purple-800 {
      color: var(--ceopag-blue) !important;
    }
    .bg-purple-100 {
      background-color: var(--ceopag-blue-soft) !important;
    }
    .hover\:bg-purple-200:hover {
      background-color: #d9ebff !important;
    }
    .bg-purple-600,
    .hover\:bg-purple-700:hover,
    .hover\:bg-purple-500:hover {
      background-color: var(--ceopag-blue) !important;
    }
    .accent-purple-600 {
      accent-color: var(--ceopag-orange);
    }
    .notify-icon {
      color: var(--ceopag-blue);
    }
    .notify-icon:hover {
      color: var(--ceopag-orange);
    }

    /* Animação para o sino de notificações */
    @keyframes pulse {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
      }
      100% {
        transform: scale(1);
      }
    }

    .notify-icon {
      transition: all 0.3s ease;
    }

    .notify-icon:hover {
      transform: scale(1.1);
    }