/* ============================================
   1. IMPORTAÇÃO DA FONTE INTER
   ============================================ */
   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

   /* ============================================
      2. DARK MODE - SISTEMA DE TOKENS
      ============================================ */
   :root {
       /* --- Cores do Modo Claro --- */
       --claro-red: #ee0000;
       --claro-red-light: rgba(238, 0, 0, 0.05);
       --claro-dark: #212529;
       --bg-light: #f8f9fa;
       --sidebar-bg: #ffffff;
       --text-main: #1a1f36;
       --text-muted: #697386;
       --nav-hover: #f7f8fa;
       --border-color: #dee2e6;
       --card-bg: #ffffff;
       --input-bg: #f8f9fa;
       --shadow-color: rgba(0, 0, 0, 0.1);
       --sidebar-width: 260px;
       --brand-brown: #998755;
       --brand-black: #1e1e1e;
   }
   
   /* --- Cores do Modo Escuro --- */
   html.dark-mode {
       --claro-dark: #e9ecef;
       --bg-light: #121212;
       --sidebar-bg: #1a1a1a;
       --text-main: #e9ecef;
       --text-muted: #9ca3af;
       --nav-hover: #2d2d2d;
       --border-color: #374151;
       --card-bg: #1e1e1e;
       --input-bg: #2d2d2d;
       --shadow-color: rgba(0, 0, 0, 0.5);
       --brand-brown: #b8956a;
   }
   
   /* ============================================
      3. APLICAÇÃO GLOBAL
      ============================================ */
   html, body, button, input, select, textarea, .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
   }
   
   body {
       background-color: var(--bg-light) !important;
       color: var(--text-main) !important;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       letter-spacing: -0.01em;
   }
   
   /* ============================================
      4. SCROLLBAR PERSONALIZADA
      ============================================ */
   ::-webkit-scrollbar {
       width: 6px;
       height: 6px;
   }
   
   ::-webkit-scrollbar-track {
       background: transparent;
   }
   
   ::-webkit-scrollbar-thumb {
       background: var(--border-color) !important;
       border-radius: 3px;
   }
   
   ::-webkit-scrollbar-thumb:hover {
       background: var(--text-muted) !important;
   }
   
   /* ============================================
      5. CONFIGURAÇÃO DA PALETA
      ============================================ */
   :root {
       --claro-red: #ee0000;
       --claro-red-light: rgba(238, 0, 0, 0.05);
       --claro-dark: #212529;
       --bg-light: #f8f9fa;
       --sidebar-bg: #ffffff;
       --text-main: #1a1f36;
       --text-muted: #697386;
       --nav-hover: #f7f8fa;
       --sidebar-width: 260px;
       --border-color: #dee2e6;
   }
   
   /* ============================================
      6. LOGO E BREADCRUMB
      ============================================ */
   .logo-vizta a {
       text-decoration: none;
       display: flex;
       align-items: center;
   }
   
   .logo-vizta .dot {
       width: 6px;
       height: 6px;
       border-radius: 50%;
       margin-left: 2px;
   }
   
   @keyframes live-pulse {
       0%, 100% {
           transform: scale(1);
           opacity: 1;
       }
       50% {
           transform: scale(0.65);
           opacity: 0.7;
       }
   }
   
   .dot-live {
       animation: live-pulse 2s infinite ease-in-out;
       transform-origin: center;
       display: inline-block;
       vertical-align: middle;
   }
   
   .dot-live-header {
       width: 6px !important;
       height: 6px !important;
       background-color: var(--claro-red, #E30613) !important;
       border-radius: 50% !important;
       display: inline-block !important;
       margin-left: 2px !important;
       margin-bottom: 0 !important;
       margin-top: 2px !important;
       animation: live-pulse-header 1.2s ease-in-out 3 forwards !important;
       transform-origin: center !important;
       flex-shrink: 0 !important;
   }
   
   .nav-breadcrumb {
       font-size: 0.85rem;
       color: var(--text-muted) !important;
       margin-left: 15px;
       padding-left: 15px;
       border-left: 1px solid var(--border-color) !important;
   }
   
   .user-avatar-header {
       width: 35px;
       height: 35px;
       border-radius: 50%;
       object-fit: cover;
       border: 2px solid var(--card-bg) !important;
   }
   
   .header-user-dropdown::after {
       display: none;
   }
   
   /* ============================================
      7. SIDEBAR
      ============================================ */
   #sidebar {
       width: var(--sidebar-width);
       height: 100vh;
       position: fixed;
       background: var(--sidebar-bg) !important;
       border-right: 1px solid var(--border-color) !important;
       display: flex;
       flex-direction: column;
       z-index: 1000;
       overflow: hidden;
       transition: all 0.3s ease;
   }
   
   .brand-dot {
       width: 8px;
       height: 8px;
       background: var(--claro-red);
       border-radius: 50%;
       margin-right: 10px;
   }
   
   .brand-logo {
       text-decoration: none;
       color: var(--text-main) !important;
       font-size: 1.1rem;
       display: flex;
       align-items: center;
   }
   
   .nav-header-btn,
   .nav-item-btn {
       width: 100%;
       padding: 12px 24px;
       border: none !important;
       background: none !important;
       background-color: transparent !important;
       outline: none !important;
       box-shadow: none !important;
       appearance: none;
       -webkit-appearance: none;
       display: flex;
       justify-content: space-between;
       align-items: center;
       color: var(--text-main) !important;
       font-weight: 600;
       font-size: 0.85rem;
       transition: all 0.2s ease;
       cursor: pointer;
   }
   
   .nav-header-btn.dropdown-toggle::after,
   .nav-item-btn.dropdown-toggle::after,
   .nav-link.dropdown-toggle::after {
       display: none !important;
       content: none !important;
   }
   
   .nav-item-btn {
       padding: 8px 24px 8px 48px !important;
       color: var(--text-muted) !important;
       font-weight: 500 !important;
   }
   
   .nav-header-btn:hover,
   .nav-item-btn:hover {
       background-color: var(--nav-hover) !important;
       color: var(--claro-red) !important;
       border: none !important;
   }
   
   .arrow,
   .arrow-sm {
       transition: transform 0.3s ease;
   }
   
   button:not(.collapsed) .arrow,
   button:not(.collapsed) .arrow-sm {
       transform: rotate(90deg);
   }
   
   /* ============================================
      8. BREADCRUMB
      ============================================ */
   .breadcrumb {
       display: flex;
       flex-wrap: wrap;
       padding: 0;
       margin: 0;
       list-style: none;
       background: transparent;
       border-radius: 0.375rem;
   }
   
   .breadcrumb-item {
       display: flex;
       align-items: center;
       font-size: 0.65rem;
       font-weight: bold;
       text-transform: uppercase;
   }
   
   .breadcrumb-item + .breadcrumb-item {
       padding-left: 0;
   }
   
   .breadcrumb-item + .breadcrumb-item::before {
       display: inline-block;
       padding-right: 0.5rem;
       padding-left: 0.5rem;
       color: var(--text-muted) !important;
       content: "";
       width: 12px;
       height: 12px;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'%3E%3C/path%3E%3C/svg%3E");
       background-size: contain;
       background-repeat: no-repeat;
       background-position: center;
       flex-shrink: 0;
   }
   
   .breadcrumb-item a {
       color: var(--claro-red) !important;
       text-decoration: none;
       transition: color 0.15s ease-in-out;
   }
   
   .breadcrumb-item a:hover {
       color: var(--claro-red) !important;
       text-decoration: underline;
   }
   
   .breadcrumb-item.active {
       color: var(--text-muted) !important;
       font-weight: 500;
   }
   
   .text-brand-brown {
       color: var(--claro-red) !important;
   }
   
   .hover\:text-brand-brown:hover {
       color: var(--claro-red) !important;
   }
   
   .breadcrumb-header {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       align-items: flex-start;
       gap: 1rem;
       padding-bottom: 1.25rem;
   }
   
   .header-divider {
       width: 100%;
       height: 1px;
       background: linear-gradient(
           to right,
           rgba(229, 229, 229, 0.1) 0%,
           var(--border-color) 20%,
           var(--border-color) 80%,
           rgba(229, 229, 229, 0.1) 100%
       ) !important;
       margin-top: 0;
       margin-bottom: 1.5rem;
   }
   
   .breadcrumb-title {
       font-size: 1.5rem;
       font-weight: 900;
       color: var(--text-main) !important;
       margin-bottom: 0.25rem;
   }
   
   .breadcrumb-description {
       color: var(--text-muted) !important;
       font-size: 0.75rem;
       margin-bottom: 0;
   }
   
   .breadcrumb-wrapper {
       margin-bottom: 0;
   }
   
   /* ============================================
      9. MENU TABS
      ============================================ */
   .menu-tabs {
       display: flex;
       gap: 0.25rem;
       padding: 0.25rem;
       background-color: var(--bg-light) !important;
       border-radius: 0.75rem;
       border: 1px solid var(--border-color) !important;
       box-shadow: 0 1px 0 var(--shadow-color);
       flex-shrink: 0;
       align-self: flex-start;
   }
   
   .menu-tab {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.5rem 1rem;
       border-radius: 0.5rem;
       font-size: 0.75rem;
       font-weight: 700;
       cursor: pointer;
       color: var(--text-muted) !important;
       background: transparent;
       border: none;
       transition: all 0.15s ease-in-out;
       text-decoration: none;
   }
   
   .menu-tab:hover {
       color: var(--text-main) !important;
       background-color: var(--nav-hover) !important;
       text-decoration: none;
   }
   
   .menu-tab.active {
       background-color: var(--card-bg) !important;
       color: var(--text-main) !important;
       box-shadow: 0 1px 2px 0 var(--shadow-color);
       border: 1px solid var(--border-color) !important;
   }
   
   .menu-tab:visited {
       color: var(--text-muted) !important;
   }
   
   .menu-tab.active:visited {
       color: var(--text-main) !important;
   }
   
   .menu-tab svg {
       width: 14px;
       height: 14px;
       flex-shrink: 0;
   }
   
   .menu-tab .icon-active {
       color: var(--claro-red) !important;
   }
   
   /* ============================================
      10. BOTÕES E LOADING
      ============================================ */
    .btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        border-radius: 0.5rem;
        padding: 0.3rem 1rem;
        font-size: 0.75rem;
        font-weight: 700;
        cursor: pointer;
        color: var(--text-muted);
        background: transparent;
        transition: all 0.15s ease-in-out;
        text-decoration: none;
    }
   .btn-loading {
       position: relative !important;
       color: transparent !important;
       pointer-events: none;
       opacity: 0.9;
   }
   
   .btn-loading::after {
       content: "";
       position: absolute;
       top: 50% !important;
       left: 50% !important;
       width: 18px !important;
       height: 18px !important;
       margin-top: -9px !important;
       margin-left: -9px !important;
       border: 2px solid rgba(255, 255, 255, 0.3);
       border-radius: 50%;
       border-top-color: #ffffff;
       animation: spin-button 0.8s linear infinite;
       z-index: 5;
   }
   
   @keyframes spin-button {
       to {
           transform: rotate(360deg);
       }
   }
   
   .btn-processing {
       pointer-events: none !important;
       opacity: 0.7;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
   }
   
   /* ============================================
   11. NAVEGAÇÃO
   ============================================ */
    .nav-divider {
        margin: 15px 24px;
        border-top: 1px solid var(--border-color) !important;
        opacity: 0.5;
    }

    .nav-header-btn .arrow {
        font-size: 0.7rem;
        transition: transform 0.3s ease;
        color: var(--text-muted) !important;
    }

    .nav-header-btn[aria-expanded="true"] .arrow {
        transform: rotate(90deg);
    }

    .nav-label {
        padding: 12px 24px 4px;
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.05rem;
        color: var(--text-muted) !important;
        font-weight: 700;
        transition: padding 0.3s ease;
    }

    /* --- ESTADO PADRÃO (EXPANDIDO) --- */
    .nav-item {
        display: flex;
        align-items: center;
        padding: 8px 24px 8px 48px;
        font-size: 0.85rem !important;
        color: var(--text-muted) !important;
        text-decoration: none;
        position: relative;
        transition: padding 0.3s ease;
    }

    .nav-item.active {
        color: var(--claro-red) !important;
        font-weight: 600;
    }

    .nav-item.active::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 60%;
        background: var(--claro-red);
        border-radius: 0 4px 4px 0;
    }

    .nav-item:hover:not(.active) {
        color: var(--text-main) !important;
        background: var(--nav-hover) !important;
    }

    /* --- ESTADO COLAPSADO (Apenas padding reduzido em 2px) --- */
    .vz-floating-sidebar.collapsed .nav-item {
        padding: 6px 22px 6px 46px !important; /* Reduzido em 2px em todos os lados */
    }

    .vz-floating-sidebar.collapsed .nav-label {
        padding: 10px 22px 2px !important; /* Reduzido em 2px em todos os lados */
    }

    /* Ajuste da borda ativa no estado colapsado (opcional) */
    .vz-floating-sidebar.collapsed .nav-item.active::before {
        height: 50%;
    }

    /* --- Ajustes para os links do rodapé (Ajustes e Reportar Bug) --- */
    .sidebar-other-section .nav-item {
        padding: 6px 12px !important;
    }

    .vz-floating-sidebar.collapsed .sidebar-other-section .nav-item {
        padding: 4px 10px !important; /* Reduzido em 2px em todos os lados */
    }

    .sidebar-brand {
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        color: var(--claro-dark) !important;
    }

    .sidebar-brand span.red {
        color: var(--claro-red) !important;
    }
   
   /* ============================================
      12. TABS (ACORDOS E INVESTIMENTOS)
      ============================================ */
   #acordosTabs {
       display: flex;
       flex-wrap: nowrap;
       gap: 2px;
       background: var(--input-bg) !important;
       padding: 2px;
       border-radius: 8px;
       border: none;
       width: 100%;
   }
   
   #acordosTabs .nav-item {
       flex: 1;
       padding: 0 !important;
       margin: 0 !important;
   }
   
   #acordosTabs .nav-link {
       width: 100%;
       padding: 6px 0 !important;
       font-size: 0.62rem !important;
       text-align: center;
       border: none !important;
       color: var(--text-muted) !important;
       font-weight: 700 !important;
       background: transparent;
       border-radius: 6px !important;
       white-space: nowrap;
       transition: all 0.2s ease;
   }
   
   #acordosTabs .nav-link.active {
       background-color: var(--card-bg) !important;
       color: var(--claro-red) !important;
       box-shadow: 0 2px 4px var(--shadow-color);
   }
   
   #pills-tab {
       display: flex !important;
       flex-wrap: nowrap !important;
       gap: 2px;
       background: var(--input-bg) !important;
       padding: 2px;
       border-radius: 8px;
       border: none;
       width: 100%;
   }
   
   #pills-tab .nav-item {
       flex: 1;
       padding: 0 !important;
       margin: 0 !important;
   }
   
   #pills-tab .nav-link {
       width: 100%;
       padding: 6px 0 !important;
       font-size: 0.62rem !important;
       text-align: center;
       border: none !important;
       color: var(--text-muted) !important;
       font-weight: 700 !important;
       background: transparent;
       border-radius: 6px !important;
       white-space: nowrap;
       transition: all 0.2s ease;
   }
   
   #pills-tab .nav-link.active {
       background-color: var(--card-bg) !important;
       color: var(--claro-red) !important;
       box-shadow: 0 2px 4px var(--shadow-color);
   }
   
   /* ============================================
      13. ANIMAÇÕES
      ============================================ */
   @keyframes pulse-green {
       0% {
           transform: scale(0.8);
           opacity: 0.6;
       }
       50% {
           transform: scale(1.2);
           opacity: 1;
       }
       100% {
           transform: scale(0.8);
           opacity: 0.6;
       }
   }
   
   .pulse-green {
       animation: pulse-green 2s infinite ease-in-out;
       display: inline-block;
       text-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
   }
   
   .x-small-text {
       font-size: 0.72rem !important;
   }
   
   /* ============================================
      14. SIDEBAR SCROLL
      ============================================ */
   .sidebar-scroll-content {
       flex: 1;
       overflow-y: auto;
       overflow-x: hidden;
   }
   
   .sidebar-scroll-content::-webkit-scrollbar {
       width: 4px;
   }
   
   .sidebar-scroll-content::-webkit-scrollbar-thumb {
       background: var(--border-color) !important;
       border-radius: 4px;
   }
   
   /* ============================================
      15. FOOTER E PERFIL
      ============================================ */
   .sidebar-footer {
       padding: 16px;
       border-top: 1px solid var(--border-color) !important;
   }
   
   .user-pill {
       padding: 8px;
       border-radius: 8px;
       transition: background 0.2s;
   }
   
   .user-pill:hover {
       background: var(--nav-hover) !important;
   }
   
   .avatar-sm {
       width: 32px;
       height: 32px;
       border-radius: 50%;
   }
   
   .user-name {
       font-size: 0.85rem;
       font-weight: 600;
       color: var(--text-main) !important;
   }
   
   /* ============================================
      16. LAYOUT GERAL
      ============================================ */
   #content-wrapper {
       margin-left: var(--sidebar-width);
       background: var(--bg-light) !important;
       min-height: 100vh;
   }
   
   .sidebar-scroll-content {
       flex-grow: 1;
       overflow-y: auto;
       overflow-x: hidden;
       scrollbar-width: thin;
       scrollbar-color: var(--border-color) transparent;
   }
   
   .sidebar-scroll-content::-webkit-scrollbar {
       width: 4px;
   }
   
   .sidebar-scroll-content::-webkit-scrollbar-thumb {
       background-color: var(--border-color) !important;
       border-radius: 10px;
   }
   
   .arrow-icon {
       font-size: 0.7rem;
       transition: transform 0.3s ease;
       color: inherit;
       opacity: 0.5;
   }
   
   .arrow-icon.small {
       font-size: 0.6rem;
   }
   
   .nav-link:not(.collapsed) .arrow-icon {
       transform: rotate(180deg);
       opacity: 1;
   }
   
   .nav-group-header,
   .dropdown-toggle {
       display: flex !important;
       align-items: center;
       justify-content: space-between;
   }
   
   .top-header {
       height: var(--header-height);
       background: var(--card-bg) !important;
       border-bottom: 1px solid var(--border-color) !important;
       padding: 0 2rem;
       display: flex;
       align-items: center;
       justify-content: space-between;
       position: sticky;
       top: 0;
       z-index: 900;
   }
   
   /* ============================================
      17. CARDS E UI ELEMENTS
      ============================================ */
   .card-kpi {
       border: none;
       border-radius: 0.75rem;
       box-shadow: 0 1px 2px var(--shadow-color);
       transition: transform 0.2s, box-shadow 0.2s;
       background: var(--card-bg) !important;
   }
   
   .card-kpi:hover {
       transform: translateY(-2px);
       box-shadow: 0 4px 6px var(--shadow-color);
   }
   
   .text-claro {
       color: var(--claro-red) !important;
   }
   
   .text-claro-red {
       color: var(--claro-red) !important;
   }
   
   .bg-claro-red {
       background-color: var(--claro-red) !important;
   }
   
   .btn-claro {
        background-color: var(--claro-red) !important;
        color: white;
        border: none;
   }
   
   .btn-claro:hover {
        background-color: color-mix(in srgb, var(--claro-red), black 15%) !important;
        color: white;
   }
   
   .bg-soft-red {
       background: var(--claro-red-light) !important;
       color: var(--claro-red) !important;
   }
   
   .progress-thin {
       height: 8px;
       border-radius: 4px;
   }
   
   .creative-card img {
       height: 180px;
       object-fit: cover;
       width: 100%;
   }
   
   .user-avatar {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       object-fit: cover;
   }
   
   /* ============================================
      18. LOGIN
      ============================================ */
   .login-split-screen {
       min-height: 100vh;
   }
   
   .login-bg-image {
       background: url('https://storage.googleapis.com/uxpilot-auth.appspot.com/c34df31248-a3b0552b195ea72b348f.png') no-repeat center center;
       background-size: cover;
       position: relative;
   }
   
   .login-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(227, 38, 46, 0.05));
   }
   
   .login-form-container {
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 3rem;
       background-color: var(--card-bg) !important;
   }
   
   .login-wrapper {
       min-height: 100vh;
       background-color: var(--card-bg) !important;
       overflow: hidden;
   }
   
   .login-brand-section {
       background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop');
       background-size: cover;
       background-position: center;
       position: relative;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       padding: 3rem;
   }
   
   .login-brand-section::before {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg, rgba(227, 6, 19, 0.85) 0%, rgba(0, 0, 0, 0.9) 100%);
       z-index: 1;
   }
   
   .brand-content {
       position: relative;
       z-index: 2;
       color: white;
   }
   
   .glass-card {
       background: rgba(255, 255, 255, 0.1);
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 1rem;
       padding: 2rem;
       margin-top: auto;
       max-width: 400px;
   }
   
   .login-form-section {
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 2rem;
       background-color: var(--card-bg) !important;
   }
   
   .login-container {
       width: 100%;
       max-width: 420px;
   }
   
   .form-floating>.form-control {
       background-color: var(--input-bg) !important;
       border: 1px solid transparent;
       border-radius: 0.75rem;
       height: 3.5rem;
       font-weight: 500;
       transition: all 0.2s;
       color: var(--text-main) !important;
   }
   
   .form-floating>.form-control:focus {
       background-color: var(--card-bg) !important;
       border-color: rgba(238, 0, 0, 0.3);
       box-shadow: 0 0 0 4px rgba(238, 0, 0, 0.05);
   }
   
   .form-floating>label {
       color: var(--text-muted) !important;
       padding-left: 1rem;
   }
   
   .btn-login {
       background-color: var(--claro-red);
       color: white;
       font-weight: 600;
       padding: 1rem;
       border-radius: 0.75rem;
       border: none;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       box-shadow: 0 4px 6px rgba(227, 6, 19, 0.2);
   }
   
   .btn-login:hover {
       background-color: #cc0511;
       color: white;
       transform: translateY(-2px);
       box-shadow: 0 10px 15px rgba(227, 6, 19, 0.3);
   }
   
   .btn-login:active {
       transform: translateY(0);
   }
   
   .link-modern {
       color: var(--text-muted) !important;
       text-decoration: none;
       font-size: 0.9rem;
       transition: color 0.2s;
   }
   
   .link-modern:hover {
       color: var(--claro-red) !important;
   }
   
   .fade-in-up {
       animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
   }
   
   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(20px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   /* ============================================
      19. PORTAL/LANDING
      ============================================ */
   .portal-card {
       transition: all 0.3s ease;
       border: 1px solid var(--border-color) !important;
       border-radius: 1rem;
       text-decoration: none;
       display: block;
       height: 100%;
       background: var(--card-bg) !important;
   }
   
   .portal-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 10px 20px var(--shadow-color);
       border-color: var(--claro-red) !important;
   }
   
   .portal-icon-circle {
       width: 80px;
       height: 80px;
       border-radius: 50%;
       background-color: var(--claro-red-light) !important;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 1.5rem;
       color: var(--claro-red) !important;
       font-size: 2rem;
       transition: background-color 0.3s;
   }
   
   .portal-card:hover .portal-icon-circle {
       background-color: rgba(238, 0, 0, 0.2) !important;
   }
   
   /* ============================================
      20. TOGGLE SWITCH
      ============================================ */
   .btn-toggle-container {
       background-color: var(--card-bg) !important;
       border: 1px solid var(--border-color) !important;
       border-radius: 0.5rem;
       padding: 2px;
       display: inline-flex;
       text-decoration: none !important;
   }
   
   .btn-toggle {
       border: none;
       background: transparent;
       color: var(--text-muted) !important;
       padding: 0.375rem 1rem;
       border-radius: 0.375rem;
       font-weight: 500;
       font-size: 0.875rem;
       transition: all 0.2s;
   }
   
   .btn-toggle.active {
       background-color: var(--claro-red);
       color: white !important;
       box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
       text-decoration: none !important;
   }
   
   /* ============================================
      21. GRÁFICO CIRCULAR
      ============================================ */
   .circular-chart {
       display: block;
       margin: 0 auto;
       max-width: 100%;
       max-height: 250px;
   }
   
   .circle-bg {
       fill: none;
       stroke: var(--border-color) !important;
       stroke-width: 2.5;
   }
   
   .circle {
       fill: none;
       stroke-width: 2.5;
       stroke-linecap: round;
       animation: progress 1s ease-out forwards;
   }
   
   .percentage {
       fill: var(--claro-red) !important;
       font-family: 'Inter', sans-serif;
       font-weight: bold;
       font-size: 0.5em;
       text-anchor: middle;
   }
   
   @keyframes progress {
       0% {
           stroke-dasharray: 0 100;
       }
   }
   
   /* ============================================
      22. TOGGLE SIDEBAR
      ============================================ */
   #sidebar,
   #content-wrapper,
   .nav-link,
   .sidebar-brand,
   .user-info,
   .sidebar-header {
       transition: all 0.3s ease;
   }
   
   #sidebarToggle {
       cursor: pointer;
       background: transparent;
       border: none;
       color: var(--text-muted) !important;
       font-size: 1.2rem;
       width: 40px;
       height: 40px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 5px;
       transition: all 0.2s;
   }
   
   #sidebarToggle:hover {
       color: var(--claro-red) !important;
       background-color: var(--nav-hover) !important;
   }
   
   #wrapper.toggled #sidebar {
       width: 80px;
       min-width: 80px;
   }
   
   #wrapper.toggled #content-wrapper {
       margin-left: 80px;
   }
   
   #wrapper.toggled .sidebar-header {
       padding: 0;
       justify-content: center !important;
   }
   
   #wrapper.toggled .sidebar-brand {
       display: none !important;
   }
   
   #wrapper.toggled #sidebarToggle {
       margin: 0;
       font-size: 1.4rem;
   }
   
   #wrapper.toggled .nav-link span,
   #wrapper.toggled .nav-section-title,
   #wrapper.toggled .user-info-text {
       display: none;
   }
   
   #wrapper.toggled .nav-link {
       justify-content: center;
       padding: 15px 0;
       margin: 0 10px;
   }
   
   #wrapper.toggled .nav-link i {
       margin-right: 0;
       font-size: 1.2rem;
   }
   
   #wrapper.toggled .mt-auto {
       display: flex;
       justify-content: center;
       padding: 15px !important;
   }
   
   #wrapper.toggled .user-avatar {
       width: 32px;
       height: 32px;
       margin: 0;
   }
   
   /* ============================================
      23. FULLCALENDAR
      ============================================ */
   :root {
       --fc-border-color: var(--border-color) !important;
       --fc-button-text-color: #fff;
       --fc-button-bg-color: var(--claro-red);
       --fc-button-border-color: var(--claro-red);
       --fc-button-hover-bg-color: #cc0511;
       --fc-button-hover-border-color: #cc0511;
       --fc-button-active-bg-color: #b3040f;
       --fc-button-active-border-color: #b3040f;
       --fc-event-bg-color: #3788d8;
       --fc-event-border-color: #3788d8;
       --fc-today-bg-color: rgba(238, 0, 0, 0.05);
   }
   
   .fc-event {
       cursor: pointer;
       border: none;
       padding: 2px 4px;
       font-size: 0.85em;
       border-radius: 4px;
       transition: transform 0.1s;
   }
   
   .fc-event:hover {
       transform: scale(1.01);
       filter: brightness(0.95);
   }
   
   .fc-event-title {
       font-weight: 600;
   }
   
   .tooltip-inner {
       max-width: 200px;
       text-align: left;
       padding: 8px 12px;
   }
   
   /* ============================================
      24. TABELA SANFONA
      ============================================ */
   .table-accordion-row {
       cursor: pointer;
   }
   
   .table-accordion-row:hover {
       background-color: var(--nav-hover) !important;
   }
   
   .collapse-row {
       background-color: var(--bg-light) !important;
   }
   
   .collapse-row td {
       padding: 0 !important;
       border-bottom: 0;
   }
   
   .sub-table {
       margin: 0;
       background: transparent;
   }
   
   .sub-table th,
   .sub-table td {
       font-size: 0.85rem;
       border: none;
       padding: 1rem 1rem;
   }
   
   .sub-table tr:first-child td {
       padding-top: 1rem;
   }
   
   .sub-table tr:last-child td {
       padding-bottom: 1rem;
       border-bottom: 1px solid var(--border-color) !important;
   }
   
   .rotate-icon {
       transition: transform 0.3s;
   }
   
   .collapsed .rotate-icon {
       transform: rotate(-90deg);
   }
   
   /* ============================================
      25. DROPDOWN
      ============================================ */
   #sidebar .dropdown-menu {
       width: 90%;
       margin-left: 5%;
       border-radius: 12px;
       background: var(--card-bg) !important;
       border-color: var(--border-color) !important;
   }
   
   .dropdown-toggle::after {
       display: inline-block;
       margin-left: auto;
       vertical-align: middle;
   }
   
   .dropdown-toggle:hover {
       opacity: 0.8;
   }
   
   /* ============================================
      26. MÓDULOS E GALERIA
      ============================================ */
   .module-shortcut {
       min-height: 85px;
       align-items: center;
   }
   
   .module-shortcut .h5 {
       line-height: 1.2;
   }
   
   .object-fit-cover {
       object-fit: cover;
   }
   
   .shadow-xs {
       box-shadow: 0 1px 3px var(--shadow-color);
   }
   
   .btn-zoom {
       transition: transform 0.2s, z-index 0.2s;
   }
   
   .btn-zoom:hover {
       transform: scale(1.1);
       z-index: 10;
   }
   
   #modalZoomCriativo .modal-backdrop.show {
       opacity: 0.85;
   }
   
   #imgZoomTarget {
       max-height: 80vh;
       border: 3px solid var(--card-bg) !important;
   }
   
   /* ============================================
      27. RESPONSIVIDADE
      ============================================ */
   @media (min-width: 768px) {
       .breadcrumb-header {
           flex-direction: row;
           align-items: center;
       }
       .menu-tabs {
           align-self: auto;
       }
   }
   
   @media (max-width: 768px) {
       .menu-tabs {
           flex-wrap: wrap;
           width: 100%;
       }
       .menu-tab {
           flex: 1;
           justify-content: center;
           padding: 0.5rem 0.75rem;
           font-size: 0.7rem;
       }
       .menu-tab span {
           display: none;
       }
   }
   
   @media (max-width: 576px) {
       .breadcrumb {
           padding: 0.5rem 0;
       }
       .breadcrumb-item+.breadcrumb-item::before {
           padding-right: 0.25rem;
           padding-left: 0.25rem;
           width: 10px;
           height: 10px;
       }
       .header-divider {
           margin-bottom: 1rem;
       }
       .menu-tab {
           padding: 0.4rem 0.5rem;
           font-size: 0.65rem;
       }
       .menu-tab svg {
           width: 12px;
           height: 12px;
       }
   }
   
   /* ============================================
      28. DARK MODE - AJUSTES ESPECÍFICOS
      ============================================ */
   html.dark-mode .brand-logo {
       color: var(--text-main) !important;
   }
   
   html.dark-mode .sidebar-brand {
       color: var(--text-main) !important;
   }
   
   html.dark-mode .dropdown-menu {
       background-color: var(--card-bg) !important;
       border-color: var(--border-color) !important;
   }
   
   html.dark-mode .dropdown-item {
       color: var(--text-main) !important;
   }
   
   html.dark-mode .dropdown-item:hover {
       background-color: var(--nav-hover) !important;
   }
   
   html.dark-mode .modal-content {
       background-color: var(--card-bg) !important;
       border-color: var(--border-color) !important;
   }
   
   html.dark-mode .modal-header,
   html.dark-mode .modal-footer {
       border-color: var(--border-color) !important;
   }
   
   html.dark-mode .alert {
       background-color: var(--card-bg) !important;
       border-color: var(--border-color) !important;
       color: var(--text-main) !important;
   }
   
   html.dark-mode .table {
       color: var(--text-main) !important;
   }
   
   html.dark-mode .table th,
   html.dark-mode .table td {
       border-color: var(--border-color) !important;
   }
   
   html.dark-mode .table-striped tbody tr:nth-of-type(odd) {
       background-color: var(--nav-hover) !important;
   }
   
   html.dark-mode .form-control {
       background-color: var(--input-bg) !important;
       color: var(--text-main) !important;
       border-color: var(--border-color) !important;
   }
   
   html.dark-mode .form-control:focus {
       background-color: var(--card-bg) !important;
       border-color: rgba(238, 0, 0, 0.3) !important;
   }
   
   html.dark-mode .form-control::placeholder {
       color: var(--text-muted) !important;
   }
   
   html.dark-mode .form-select {
       background-color: var(--input-bg) !important;
       color: var(--text-main) !important;
       border-color: var(--border-color) !important;
   }
   
   html.dark-mode .list-group-item {
       background-color: var(--card-bg) !important;
       color: var(--text-main) !important;
       border-color: var(--border-color) !important;
   }
   
   html.dark-mode .list-group-item:hover {
       background-color: var(--nav-hover) !important;
   }
   
   html.dark-mode .nav-tabs .nav-link {
       color: var(--text-muted) !important;
       border-color: transparent !important;
   }
   
   html.dark-mode .nav-tabs .nav-link.active {
       background-color: var(--card-bg) !important;
       color: var(--text-main) !important;
       border-color: var(--border-color) !important;
   }
   
   html.dark-mode .nav-tabs .nav-link:hover {
       border-color: var(--border-color) !important;
   }
   
   html.dark-mode .accordion-item {
       background-color: var(--card-bg) !important;
       border-color: var(--border-color) !important;
   }
   
   html.dark-mode .accordion-header {
       background-color: var(--card-bg) !important;
   }
   
   html.dark-mode .accordion-button {
       background-color: var(--card-bg) !important;
       color: var(--text-main) !important;
   }
   
   html.dark-mode .accordion-button:not(.collapsed) {
       background-color: var(--nav-hover) !important;
       color: var(--text-main) !important;
   }
   
   html.dark-mode .accordion-body {
       background-color: var(--card-bg) !important;
       color: var(--text-main) !important;
   }
   
   html.dark-mode .badge {
       color: var(--text-main) !important;
   }
   
   html.dark-mode .toast {
       background-color: var(--card-bg) !important;
       border-color: var(--border-color) !important;
   }
   
   html.dark-mode .toast-header {
       background-color: var(--nav-hover) !important;
       color: var(--text-main) !important;
       border-color: var(--border-color) !important;
   }
   
   html.dark-mode .toast-body {
       color: var(--text-main) !important;
   }
   
   html.dark-mode .close {
       color: var(--text-main) !important;
   }
   
   html.dark-mode .close:hover {
       color: var(--claro-red) !important;
   }
   
   /* ============================================
      29. BOTÃO DE DARK MODE (Personalize)
      ============================================ */
   .dark-mode-toggle {
       cursor: pointer;
       background: var(--nav-hover) !important;
       border: 1px solid var(--border-color) !important;
       border-radius: 50%;
       width: 38px;
       height: 38px;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
       color: var(--text-main) !important;
   }
   
   .dark-mode-toggle:hover {
       background: var(--claro-red) !important;
       color: white !important;
       transform: rotate(20deg);
   }
   
   html.dark-mode .dark-mode-toggle {
       background: var(--nav-hover) !important;
   }
   
   html.dark-mode .dark-mode-toggle:hover {
       background: var(--claro-red) !important;
   }


   /* ============================================
      30. FILTER CARD / ADVANCED SEARCH
      ============================================ */   

    #advanced_search {
        transition: all 0.2s ease;
        background-color: #ffffff;
        color: #6c757d;
        border-color: #dee2e6;
        height: 31px; /* mesma altura dos inputs */
    }
    
    #advanced_search:hover {
        background-color: #f8f9fa;
        border-color: #ced4da;
        color: #343a40;
    }
    
    #advanced_search.active {
        background-color: #f1f3f5;
        border-color: #868e96;
        color: #212529;
    }
    
    #advancedChevron {
        transition: transform 0.3s ease;
        display: inline-block;
    }
    
    #advancedFilters {
        animation: fadeInDown 0.3s ease;
    }
    
    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Ajuste para a linha horizontal sutil */
    #advancedFilters hr {
        border: none;
        border-top: 1px solid #e9ecef;
        margin: 16px 0 20px 0;
        opacity: 0.8;
    }
    
    /* Ajuste para o título da seção */
    .card-body h5 i {
        opacity: 0.7;
    }
    
    /* Responsividade para telas menores */
    @media (max-width: 768px) {
        .card-body .row:first-child .col-md-6 {
            text-align: center !important;
        }
        .card-body .row:first-child .col-md-6:last-child {
            margin-top: 10px;
        }
        .card-body .row:first-child .d-flex {
            justify-content: center !important;
        }
    }

/* Leitura local de textos presentes em imagens de PDFs. */
.briefing-ocr-loader {
    position: fixed;
    inset: 0;
    /* Keep OCR as the only visible feedback surface while extraction runs.
       SweetAlert and application drawers use lower stacking levels. */
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .28);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .25s ease;
}

body.briefing-ocr-active { overflow: hidden; }
/* Durante o OCR, o loader é a única superfície de feedback. O checklist
   genérico permanece montado para a etapa seguinte, mas não deve parecer um
   segundo diálogo atrás do OCR. */
body.briefing-ocr-active #briefing_sidebar_analysis,
body.briefing-ocr-active .briefing-analysis-swal {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.briefing-ocr-loader.is-visible { opacity: 1; }
.briefing-ocr-loader.is-leaving { opacity: 0; pointer-events: none; }

/* Durante o preflight o usuario ainda precisa enxergar a area de envio. A
   classe is-analyzing e aplicada antes da resposta do servidor, portanto sem
   esta excecao a sidebar fica vazia enquanto o PDF e verificado. */
.briefing-upload-sidebar.is-preflight .briefing-sidebar-intake-content,
.briefing-upload-sidebar.is-preflight .briefing-sidebar-helper {
    max-height: 1200px !important;
    margin-top: initial !important;
    margin-bottom: initial !important;
    padding-top: initial !important;
    padding-bottom: initial !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
}

.briefing-ocr-loader-card {
    width: min(520px, 100%);
    padding: 28px;
    border: 1px solid #dbe3ee;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .2);
    text-align: center;
    transform: translateY(8px);
    transition: transform .25s ease;
}

.briefing-ocr-loader-card:focus {
    outline: 3px solid color-mix(in srgb, var(--ws-primary, #e30613) 34%, transparent);
    outline-offset: 4px;
}

.briefing-ocr-loader.is-visible .briefing-ocr-loader-card { transform: translateY(0); }

.briefing-ocr-loader-spinner {
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    border: 5px solid color-mix(in srgb, var(--ws-primary, #e30613) 18%, #fff);
    border-top-color: var(--ws-primary, #e30613);
    border-radius: 50%;
    animation: briefingOcrSpin .85s linear infinite;
}

.briefing-ocr-loader-copy { display: grid; gap: 7px; }
.briefing-ocr-loader-copy strong { color: #172033; font-size: 1.05rem; }
.briefing-ocr-loader-message { color: #526078; line-height: 1.5; }

.briefing-ocr-loader-progress {
    height: 8px;
    margin: 22px 0 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8edf4;
}

.briefing-ocr-loader-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: var(--ws-primary, #e30613);
    transition: width .35s ease;
}

.briefing-ocr-loader-progress-bar.is-indeterminate {
    width: 38% !important;
    background: linear-gradient(90deg, transparent, var(--ws-primary, #e30613), transparent);
    background-size: 200% 100%;
    animation: briefingOcrProgressSweep 1.25s ease-in-out infinite;
}

.briefing-field-error {
    margin-top: 5px;
    font-size: .78rem;
    line-height: 1.35;
}

.currency-container:has(.form-control.is-invalid) {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

.select2-container.is-invalid .select2-selection,
.ts-wrapper.is-invalid .ts-control {
    border-color: var(--bs-form-invalid-border-color, #dc3545) !important;
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .12);
}

.step2-research-chip-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
}

.step2-research-chip.is-verifying,
.step2-research-chip.is-uploading,
.step2-research-chip.is-reading {
    border-color: color-mix(in srgb, var(--ws-primary, #e30613) 35%, #bfdbfe);
    background: color-mix(in srgb, var(--ws-primary, #e30613) 5%, #fff);
}

.step2-research-chip.is-ready {
    border-color: #86efac;
    background: #f0fdf4;
}

.step2-research-chip.is-error {
    border-color: #fca5a5;
    background: #fff1f2;
}

.step2-research-chip.is-error .step2-research-chip-status { color: #b91c1c; }
.step2-research-chip.is-ready .step2-research-chip-status { color: #166534; }

#btn_analyze_documents.is-analysis-submitting,
#btn_analyze_documents.is-analysis-submitting:disabled {
    color: #fff !important;
}

.briefing-ocr-loader-count,
.briefing-ocr-loader-helper { display: block; color: #6b778c; }
.briefing-ocr-loader-count {
    width: fit-content;
    margin: 0 auto;
    padding: 7px 12px;
    border: 1px solid color-mix(in srgb, var(--ws-primary, #e30613) 24%, #dbe3ee);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ws-primary, #e30613) 7%, #fff);
    color: #263248;
    font-size: 1rem;
    font-weight: 700;
}
.briefing-ocr-loader-extracted { color: var(--ws-primary, #e30613); font-size: 1.12em; }
.briefing-ocr-loader-helper { margin-top: 12px; }

@keyframes briefingOcrSpin { to { transform: rotate(360deg); } }
@keyframes briefingOcrProgressSweep {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .briefing-ocr-loader,
    .briefing-ocr-loader-card,
    .briefing-ocr-loader-progress-bar { transition: none; }
    .briefing-ocr-loader-spinner { animation-duration: 1.8s; }
    .briefing-ocr-loader-progress-bar.is-indeterminate { animation: none; }
}