/* ==========================================================
   SISTEMA ALPHA — STYLE MODERNIZADO (v2025.10 • Lavender UI)
   - Paleta e componentes padronizados para todos os módulos.
   - Mantém as MESMAS classes/IDs já usados no seu projeto.
   - Inclui o layout compacto (index-compact) sem rolagem.
   ========================================================== */

/* ----------------------------------------------------------
   0) TOKENS (cores, tipografia, espaçamento, sombras)
   ---------------------------------------------------------- */
   :root {
    /* Paleta Lavender UI (mock) */
    --color-primary: #6a4cff;
    --color-primary-light: #8a72ff;
    --color-secondary: #f55d9c;
    --color-accent: #ff8fb5;
    --color-success: #17a773;
    --color-warning: #ffcc33;
    --color-danger:  #ff375f;
  
    /* Superfícies */
    --surface-app:   #eef1ff;
    --surface-panel: #ffffff;
    --surface-muted: #f3f4ff;
  
    /* Texto */
    --text-dark:      #1f2263;
    --text-secondary: #6b7280;
    --text-on-dark:   #ffffff;
  
    /* Bordas & Radius */
    --border-color: #e7e9ff;
    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --border-radius-lg: 14px;
    --border-radius-xl: 18px;
    --radius-xxl: 22px;
    --radius: 10px; /* compat */
  
    /* Sombras */
    --shadow-sm:   0 2px 6px rgba(0,0,0,.06);
    --shadow-md:   0 8px 20px rgba(0,0,0,.10);
    --shadow-lg:   0 14px 30px rgba(0,0,0,.16);
    --shadow-soft: 0 10px 30px rgba(106,76,255,.12);
    --shadow-soft-2: 0 6px 18px rgba(0,0,0,.06);
  
    /* Vidro */
    --glass-bg: rgba(255,255,255,.75);
    --glass-border: 1px solid rgba(0,0,0,.06);
    --glass-shadow: var(--shadow-md);
    --backdrop-filter: blur(10px) saturate(140%);
  
    /* Tipografia */
    --font-size-base: 16px;
    --font-size-sm: .875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 2rem;
  
    /* Espaços */
    --space-xs: .25rem;
    --space-sm: .5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
  
    /* Transições */
    --transition-speed: .25s;
    --transition-easing: cubic-bezier(.4,0,.2,1);
  }
  
  /* ----------------------------------------------------------
     1) RESET MODERNO + ACESSIBILIDADE
     ---------------------------------------------------------- */
  *, *::before, *::after { box-sizing: border-box; }
  html { font-size: var(--font-size-base); scroll-behavior: smooth; }
  body {
    min-height: 100vh;
    margin: 0;
    font-family: Inter, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    background: radial-gradient(1200px 800px at 85% -10%, #f7f6ff 20%, var(--surface-app) 60%, #eff3ff 100%);
    color: var(--text-dark);
    line-height: 1.6;
  }
  img, svg { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  :focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
  
  /* ----------------------------------------------------------
     2) LAYOUT (Wrapper, Sidebar, Main, Footer)
     ---------------------------------------------------------- */
  .wrapper { display: flex; min-height: 100vh; position: relative; }
  
  /* Sidebar “rail” (mock) */
  .sidebar {
    width: 76px;
    background: linear-gradient(180deg, #5f46ff, #4c2fd6);
    color: var(--text-on-dark);
    padding: 14px;
    position: fixed; inset: 0 auto 0 0; height: 100vh;
    border-right: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    display: flex; flex-direction: column; gap: var(--space-md);
    z-index: 10;
  }
  .sidebar-title { text-align: center; font-size: 1.1rem; font-weight: 700; display:none; }
  .sidebar .menu { display: flex; flex-direction: column; gap: 8px; }
  .menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 0; border-radius: 14px; justify-content: center;
    color: #f8f9ff; transition: background var(--transition-speed), transform var(--transition-speed);
  }
  .menu-item i { font-size: 18px; opacity: .95; }
  .menu-item:hover { background: rgba(255,255,255,.12); transform: translateX(2px); }
  .menu-item.is-current { background: rgba(255,255,255,.16); }
  .menu-item.is-danger { color: #ffe1e9; }
  #user-name { display:none; }
  
  @media (min-width: 1024px) {
    .sidebar { width: 220px; padding: 16px; }
    .sidebar-title, #user-name { display: block; }
    .menu-item { justify-content: flex-start; padding: 12px 14px; }
    .menu-item span { display: inline; }
  }
  
  /* Main */
  .main-content {
    margin-left: 96px;
    padding: 28px;
    flex: 1; min-width: 0;
    transition: margin-left var(--transition-speed) ease;
  }
  @media (min-width: 1024px) { .main-content { margin-left: 240px; } }
  
  /* Cartão branco principal (seções) */
  .main-content > section {
    background: var(--surface-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xxl);
    box-shadow: var(--shadow-soft);
    padding: clamp(18px, 2.2vw, 28px);
  }
  
  /* Footer */
  .footer {
    background: var(--surface-muted);
    color: var(--text-dark);
    text-align: center;
    padding: 10px;
    border-top: 1px solid var(--border-color);
  }

  /* ===== Espaço seguro para o rodapé ===== */
:root{
  --footer-h: 64px;     /* altura do footer (será atualizada via JS abaixo) */
  --footer-gap: 16px;   /* respiro extra */
}

/* se o conteúdo principal rola, garanta espaço para o footer */
.main-content.allow-scroll,
.main-content.scroll-y{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--footer-h) + var(--footer-gap) + env(safe-area-inset-bottom, 0px));
}

/* faça o shell ocupar a tela, descontando o footer */
.app-shell{
  min-height: calc(100dvh - var(--footer-h));
}

/* só para garantir um footer confortável */
.footer{ padding: 12px 16px; line-height: 1.4; }
  
  /* ----------------------------------------------------------
     3) HEADER + CARDS DE TOTAIS (KPIs)
     ---------------------------------------------------------- */
  .header-row {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-md);
  }
  .dynamic-title {
    font-size: var(--font-size-xxl); font-weight: 800; color: var(--text-dark);
    position: relative; padding: 2px 0; margin: 0; letter-spacing: -.5px;
  }
  .dynamic-title::after {
    content: ""; position: absolute; left: 0; bottom: -6px; width: 56%; height: 4px;
    border-radius: 999px; background: linear-gradient(90deg, var(--color-secondary), var(--color-primary-light));
  }
  @media (max-width: 768px) { .dynamic-title { font-size: 1.35rem; } }
  
  .total-container { display: flex; gap: 14px; flex-wrap: wrap; }
  .total-card{
    background: var(--surface-panel);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: var(--shadow-soft-2);
    padding: 14px 16px; min-width: 160px; text-align: left;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  }
  .total-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .total-icon{
    width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
    background:#f2f0ff;color:var(--color-primary);margin-bottom:6px;font-size:16px;
  }
  .total-label{ font-size:.75rem;color:#7b7e8c;font-weight:600;letter-spacing:.04em; text-transform: uppercase; }
  .total-value{ font-size:1.35rem;font-weight:800;color:var(--text-dark); }
  .total-value.positive { color: var(--color-success); }
  .total-value.negative { color: var(--color-danger); }
  .total-value.zero     { color: var(--color-warning); }
  
  /* ----------------------------------------------------------
     4) BUSCA / FORMULÁRIOS
     ---------------------------------------------------------- */
  .search-container { position: relative; max-width: 260px; }
  .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); }
  .search-input{
    width:100%; padding:10px 12px 10px 38px; border:1px solid var(--border-color);
    border-radius:999px; background:#fff; color:var(--text-dark);
    transition:border var(--transition-speed), box-shadow var(--transition-speed);
  }
  .search-input::placeholder{ color:#9aa3af; }
  .search-input:focus{ border-color:var(--color-secondary); box-shadow:0 0 0 4px rgba(77,208,225,.16); outline:0; }
  
  .grid-form { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
  .grid-form input, .grid-form select, .form-control, .data-input, .valor-causa-input, #search-clientes {
    padding:10px; border:1px solid var(--border-color); border-radius: var(--border-radius-sm);
    background:#fff; color: var(--text-dark);
  }
  .grid-form input:focus, .grid-form select:focus, .form-control:focus, .data-input:focus, .valor-causa-input:focus, #search-clientes:focus {
    border-color: var(--color-primary-light); box-shadow: 0 0 0 3px rgba(138,114,255,.18); outline: none;
  }
  
  /* ----------------------------------------------------------
     5) BOTÕES (usa .button existente)
     ---------------------------------------------------------- */
  .button {
    --btn-bg: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:10px 16px; border:none; border-radius:999px;
    background: var(--btn-bg); color:#fff; font-weight:700; cursor:pointer;
    box-shadow: 0 8px 20px rgba(106,76,255,.12);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed), filter var(--transition-speed);
  }
  .button:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); filter: brightness(1.02); }
  .button:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
  .button i { font-size: 1rem; }
  .button.is-small { padding: 6px 10px; font-size: var(--font-size-sm); }
  .button.is-info    { --btn-bg: linear-gradient(135deg, var(--color-secondary), #f55d9c); }
  .button.is-warning { --btn-bg: linear-gradient(135deg, var(--color-warning), #ffb700); color:#111; }
  .button.is-danger  { --btn-bg: linear-gradient(135deg, var(--color-danger), #d81b60); }
  .button.is-success { --btn-bg: linear-gradient(135deg, var(--color-success), #0c8e60); }
  
  /* ----------------------------------------------------------
     6) TABELAS
     ---------------------------------------------------------- */
  .table-container{
    background: var(--surface-panel);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    padding: var(--space-md);
    box-shadow: var(--shadow-soft-2);
    overflow: auto; -webkit-overflow-scrolling: touch;
    max-height: 800px; margin-bottom: var(--space-xl);
  }
  table { width:100%; border-collapse: separate; border-spacing: 0 10px; min-width: 700px; }
  table th, table td { text-align:left; padding:12px 14px; font-size: var(--font-size-sm); color: var(--text-dark); }
  table thead th{
    position: sticky; top:0; z-index:1;
    background:#f6f7ff; color:#3a3e78;
    border:1px solid var(--border-color);
    text-transform: uppercase; letter-spacing:.04em; font-weight:700;
    border-top-left-radius:12px; border-top-right-radius:12px;
  }
  table tbody td{ background:#fff; border:1px solid var(--border-color); }
  table tbody tr{ box-shadow: var(--shadow-sm); transition: transform var(--transition-speed), background var(--transition-speed); }
  table tbody td:first-child{ border-top-left-radius:12px; border-bottom-left-radius:12px; }
  table tbody td:last-child { border-top-right-radius:12px; border-bottom-right-radius:12px; }
  table tbody tr:hover td { background:#f6f7ff; transform: translateY(-2px); }
  
  .badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-weight:700; font-size:.78rem; }
  .badge.pendente { background:#fff3cd; color:#7a5b00; }
  .badge.aprovado { background:#d1e7dd; color:#0b684b; }
  .badge.rejeitado{ background:#f8d7da; color:#842029; }
  
  tr.status-vencido td    { background: linear-gradient(135deg, rgba(255,55,95,.10), rgba(255,55,95,.06)); color: var(--color-danger); }
  tr.status-no-prazo td   { background: linear-gradient(135deg, rgba(255,204,51,.14), rgba(255,204,51,.08)); color: #9a6b00; }
  tr.status-a-vencer td,
  tr.status-futuro td     { background: linear-gradient(135deg, rgba(23,167,115,.12), rgba(23,167,115,.06)); color: #0b684b; font-weight: 600; }
  tr.status-aprovado td   { background: linear-gradient(135deg, rgba(23,167,115,.14), rgba(23,167,115,.08)); color: var(--color-success); }
  tr.status-rejeitado td  { background: linear-gradient(135deg, rgba(255,55,95,.12), rgba(255,55,95,.08)); color: var(--color-danger); }
  
  table td:nth-child(6){ color: var(--color-primary); font-weight: 700; }
  table td:nth-child(10){ font-weight: 700; }
  
  /* ----------------------------------------------------------
     7) TABS
     ---------------------------------------------------------- */
  .tabs { margin-bottom: 16px; }
  .tabs ul { display:flex; gap:6px; list-style:none; padding:0; margin:0; border-bottom:1px solid var(--border-color); }
  .tabs li a{
    display:block; padding:10px 16px; border:1px solid transparent; border-bottom:none;
    color:#334; border-top-left-radius:8px; border-top-right-radius:8px;
  }
  .tabs li a:hover{ background: var(--surface-muted); }
  .tabs li.is-active a{ background:#fff; border-color: var(--border-color); color: var(--color-primary); font-weight: 800; }
  .section-content{ display:none; }
  .section-content.is-active{ display:block; }
  
  /* ----------------------------------------------------------
     8) CHAT
     ---------------------------------------------------------- */
  .chatbot-container{ position: fixed; bottom:70px; right:15px; width:320px; max-height:70vh; background:var(--glass-bg); border-radius:var(--border-radius-md); box-shadow:var(--glass-shadow); border:var(--glass-border); display:flex; flex-direction:column; overflow:hidden; z-index:1000; backdrop-filter: var(--backdrop-filter); }
  #chatbot-window{ display:none; height:100%; }
  .chatbot-container.active #chatbot-window{ display:flex; flex-direction:column; }
  .chatbot-header{ padding:10px 12px; background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary)); color:#fff; display:flex; align-items:center; justify-content:space-between; }
  .chatbot-close-btn{ background:none; border:none; color:#fff; cursor:pointer; font-size:1rem; }
  .chat-messages{ flex:1 1 auto; max-height: calc(70vh - 96px); padding:12px; overflow:auto; background: var(--surface-muted); display:flex; flex-direction:column; gap:8px; }
  .chat-input-area{ padding:10px; display:flex; gap:8px; border-top: var(--glass-border); background: var(--surface-muted); }
  .chat-input{ flex:1; padding:10px; border:1px solid var(--border-color); border-radius:20px; background:#fff; color:var(--text-dark); }
  .send-button{ width:40px; height:40px; border-radius:50%; border:none; background: var(--color-primary-light); color:#fff; }
  .send-button:hover{ background: var(--color-secondary); }
  .chatbot-toggle-button{ position:fixed; bottom:15px; right:15px; width:50px; height:50px; border-radius:50%; background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary)); color:#fff; border:none; box-shadow: var(--shadow-md); z-index:1001; display:grid; place-items:center; }
  .chatbot-badge{ position:absolute; top:-6px; right:-6px; background:#ff2d55; color:#fff; border-radius:999px; padding:2px 6px; font-size:12px; font-weight:700; }
  
  .message{ display:flex; gap:8px; max-width:90%; }
  .message.bot{ align-self:flex-start; }
  .message.user{ align-self:flex-end; flex-direction: row-reverse; }
  .message-avatar{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary)); color:#fff; }
  .message.user .message-avatar{ background: linear-gradient(135deg, var(--color-secondary), #00b8d4); }
  .message-text{ padding:8px 12px; border-radius: var(--border-radius-md); background:#fff; color: var(--text-dark); box-shadow: var(--shadow-sm); font-size: var(--font-size-sm); }
  .message.user .message-text{ background:#f2efff; }
  .message-time{ font-size:.75rem; color: var(--text-secondary); }
  
  /* ----------------------------------------------------------
     9) NOTIFICAÇÕES / TOASTS
     ---------------------------------------------------------- */
  #notification-container, .notification-global{ position:fixed; top:20px; right:20px; z-index:1000; }
  .notification, .notification-global{
    display:flex; align-items:center; gap:10px; color:#fff; padding:12px 16px;
    border-radius: var(--border-radius-md); box-shadow: var(--shadow-md);
  }
  .notification.is-danger, .notification-global.is-danger{ background: linear-gradient(135deg, var(--color-danger), #d81b60); }
  .notification.is-success, .notification-global.is-success{ background: linear-gradient(135deg, var(--color-success), #0c8e60); }
  .notification.is-warning, .notification-global.is-warning{ background: linear-gradient(135deg, var(--color-warning), #ffb700); color:#111; }
  .notification.is-info, .notification-global.is-info{ background: linear-gradient(135deg, var(--color-secondary), #00a5b8); }
  .notification .delete, .notification-global .delete{ background: rgba(255,255,255,.2); border:none; padding:6px 10px; border-radius:6px; color:#fff; cursor:pointer; }
  
  /* ----------------------------------------------------------
     10) CONTEXT MENU
     ---------------------------------------------------------- */
  .context-menu{ position:fixed; background:#fff; border:1px solid var(--border-color); border-radius: var(--border-radius-md); box-shadow: var(--shadow-md); padding:8px; z-index:1000; display:flex; flex-direction:column; gap:6px; min-width:180px; }
  .context-menu .button, .context-menu button{ width:100%; justify-content:flex-start; background:transparent; color:var(--text-dark); border:none; padding:8px 10px; border-radius: var(--border-radius-sm); text-align:left; }
  .context-menu .button:hover, .context-menu button:hover{ background: var(--surface-muted); }
  .context-menu .is-warning{ color:#9a6b00; }
  .context-menu .is-danger{ color:#b4232b; }
  
  /* ----------------------------------------------------------
     11) AGENDA / CALENDÁRIO
     ---------------------------------------------------------- */
  .agenda-container{ display:flex; flex-direction:column; gap:1rem; padding:1rem; }
  .agenda-controls{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; }
  .agenda-layout{ display:flex; gap:1rem; }
  .agenda-calendar{ flex:3; background:#fff; border-radius: var(--border-radius-md); padding:1rem; box-shadow: var(--shadow-sm); border:1px solid var(--border-color); }
  .agenda-summary{  flex:1; background:#fff; border-radius: var(--border-radius-md); padding:1rem; box-shadow: var(--shadow-sm); border:1px solid var(--border-color); max-height:600px; overflow-y:auto; }
  .calendar-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; }
  .calendar-day-header{ background:#ffffff; color:#111; text-align:center; padding:10px; font-weight:700; border:1px solid var(--border-color); border-radius:8px; }
  .calendar-day{ background:#ffffff; color:#111; border:1px solid var(--border-color); padding:10px; min-height:100px; border-radius:8px; position:relative; }
  .calendar-day.empty{ background: var(--surface-muted); border:1px dashed var(--border-color); }
  .calendar-day.today{ outline:2px solid var(--color-secondary); outline-offset:-2px; }
  .calendar-day.has-pendencia-despacho{ box-shadow: inset 0 0 0 2px var(--color-danger); }
  .calendar-day.has-pendencia-prospeccao{ box-shadow: inset 0 0 0 2px var(--color-primary); }
  .calendar-day.has-both-pendencias{ box-shadow: inset 0 0 0 2px #ff00ff; }
  .event{ background:#e0f7fa; color:#0b6b62; border-left:3px solid var(--color-success); padding:2px 6px; margin:2px 0; font-size:.9em; border-radius:4px; }
  .event.pendente-despacho{ background:#ffebee; color:#b4232b; border-left-color: var(--color-danger); }
  .event.pendente-prospeccao{ background:#eef2ff; color:#1f2263; border-left-color: var(--color-primary); }
  
  /* ----------------------------------------------------------
     12) MODAIS
     ---------------------------------------------------------- */
  .modal{ display:none; position:fixed; inset:0; background: rgba(0,0,0,.6); z-index:1000; place-items:center; }
  .modal-content{ background:#fff; border-radius: var(--border-radius-lg); width:min(92vw, 820px); max-height:80vh; overflow:auto; padding:24px; box-shadow: var(--shadow-lg); }
  .modal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .modal-title{ font-size:1.25rem; color: var(--text-dark); }
  .close-modal{ background:none; border:none; font-size:1.25rem; color:#6b7280; cursor:pointer; }
  
  /* ----------------------------------------------------------
     13) TIMELINE / LISTAS
     ---------------------------------------------------------- */
  .timeline-container, .calendar-container, .shared-tasks-container, .timeline{
    background:#fff; border-radius: var(--border-radius-lg); padding:16px; box-shadow: var(--shadow-md); border:1px solid var(--border-color);
  }
  .timeline{ position:relative; padding-left:24px; }
  .timeline::before{ content:""; position:absolute; left:10px; top:0; bottom:0; width:4px; background: linear-gradient(180deg, var(--color-primary-light), var(--color-secondary)); border-radius:999px; }
  .timeline-item{ position:relative; margin:12px 0; padding-left:16px; }
  .timeline-item::before{ content:""; position:absolute; left:6px; top:4px; width:12px; height:12px; border-radius:50%; background: var(--color-primary); }
  .timeline-item.completed::before{ background: var(--color-success); }
  
  /* ----------------------------------------------------------
     14) FUNCIONÁRIOS (larguras)
     ---------------------------------------------------------- */
  #funcionarios-tabela th:nth-child(1), #funcionarios-tabela td:nth-child(1){ width:5%; text-align:center; }
  #funcionarios-tabela th:nth-child(2), #funcionarios-tabela td:nth-child(2),
  #funcionarios-tabela th:nth-child(3), #funcionarios-tabela td:nth-child(3),
  #funcionarios-tabela th:nth-child(4), #funcionarios-tabela td:nth-child(4),
  #funcionarios-tabela th:nth-child(5), #funcionarios-tabela td:nth-child(5),
  #funcionarios-tabela th:nth-child(6), #funcionarios-tabela td:nth-child(6),
  #funcionarios-tabela th:nth-child(7), #funcionarios-tabela td:nth-child(7),
  #funcionarios-tabela th:nth-child(8), #funcionarios-tabela td:nth-child(8){ width:15%; text-align:center; }
  .filter-select{ margin-left:10px; padding:6px 8px; border-radius: var(--border-radius-sm); border:1px solid var(--border-color); }
  
  /* ----------------------------------------------------------
     15) UTILITÁRIOS
     ---------------------------------------------------------- */
  .highlight{ animation: highlight 900ms ease; }
  @keyframes highlight{ 0%{ background:#e8f5e9; } 100%{ background: transparent; } }
  .fade-out{ animation: fadeOut .3s ease-in-out forwards; }
  @keyframes fadeOut{ from{ opacity:1; transform:scale(1); } to{ opacity:0; transform:scale(.98); } }
  @keyframes slideIn{ from{ transform: translateY(8px); opacity:0; } to{ transform: translateY(0); opacity:1; } }
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:999px; }
  ::-webkit-scrollbar-thumb:hover{ background:#bfc6d1; }
  #search-itens{ width:100%; max-width:140px; margin-bottom:12px; padding:8px; border-radius: var(--border-radius-sm); border:1px solid var(--border-color); box-shadow: var(--shadow-sm); }
  #gerar-pdf-pendentes-btn, #gerar-pdf-historico-btn{ border:none; cursor:pointer; }
  .docx-preview{ max-height:600px; overflow-y:auto; padding:10px; border:1px solid var(--border-color); background:#fff; color: var(--text-dark); }
  
  /* ----------------------------------------------------------
     16) HERO (usado na Home “moderna”)
     ---------------------------------------------------------- */
  .hero{ position:relative; padding: clamp(32px, 6vw, 72px) 0; }
  .hero-inner{ display:grid; grid-template-columns: 1.3fr 1fr; gap: clamp(16px, 4vw, 40px); align-items:center; }
  @media (max-width: 960px){ .hero-inner{ grid-template-columns: 1fr; } }
  .hero .ambient-orbs{ position:absolute; inset:0; overflow:hidden; z-index:0; }
  .hero .orb{
    position:absolute; width:48vmin; height:48vmin; border-radius:50%;
    filter: blur(52px); opacity:.28;
    background: radial-gradient(circle at 30% 30%, var(--color-secondary), transparent 60%);
    animation: orbMove 24s ease-in-out infinite alternate;
  }
  .hero .orb:nth-child(2){ left:60%; top:10%; background: radial-gradient(circle, var(--color-primary-light), transparent 60%); animation-duration:30s; }
  .hero .orb:nth-child(3){ left:10%; bottom:-10%; background: radial-gradient(circle, var(--color-accent), transparent 60%); animation-duration:28s; }
  @keyframes orbMove{ 0%{ transform: translate3d(-10%,0,0) scale(1); } 100%{ transform: translate3d(8%,-4%,0) scale(1.08); } }
  @media (prefers-reduced-motion: reduce){ .hero .orb{ animation:none; opacity:.18; } }
  .hero-text{ position:relative; z-index:1; }
  .hero-title{ font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height:1.15; color: var(--text-dark); font-weight:800; letter-spacing:-.5px; }
  .hero-title strong{ color: var(--color-primary); }
  .hero-subtitle{ margin-top:8px; color: var(--text-secondary); }
  .quick-actions{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px; }
  .continue-last{ margin-top:12px; }
  
  /* ----------------------------------------------------------
     17) CARD 3D / TILT (para .card, .tilt)
     ---------------------------------------------------------- */
  .card, .tilt{
    position:relative; background:#fff; border:1px solid var(--border-color);
    border-radius: 20px; box-shadow: var(--shadow-soft-2); padding: 16px;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  }
  .tilt{ transform-style: preserve-3d; will-change: transform; perspective: 800px; }
  .tilt:hover{ box-shadow: var(--shadow-lg); }
  .card-shine{
    position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background: radial-gradient(120px 120px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.40), transparent 60%);
    opacity:var(--shine,0); transition: opacity .25s ease;
  }
  .tilt:hover .card-shine{ --shine: 1; }
  .card[role="button"]:focus, .tilt:focus{ outline:2px solid var(--color-secondary); outline-offset:2px; }
  
  /* ----------------------------------------------------------
     18) COMMAND PALETTE (.cmdk)
     ---------------------------------------------------------- */
  .cmdk{ position:fixed; inset:0; background: rgba(0,0,0,.35); display:none; z-index:1002; }
  .cmdk.is-open{ display:grid; place-items: start center; padding-top:10vh; }
  .cmdk-dialog{
    width:min(720px, 92vw); background:#fff; border:1px solid var(--border-color);
    border-radius:18px; box-shadow: var(--shadow-soft); padding:16px;
  }
  #cmdk-input{ width:100%; padding:12px; border-radius:8px; border:1px solid var(--border-color); font-size:1rem; margin-top:8px; }
  .cmdk-list{ margin-top:10px; max-height:320px; overflow:auto; list-style:none; padding:0; }
  .cmdk-list li{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; cursor:pointer; }
  .cmdk-list li[aria-selected="true"], .cmdk-list li:hover{ background:#f6f7ff; }
  
  /* ----------------------------------------------------------
     19) INDEX COMPACT (sem rolagem) — usado na nova Home
     ---------------------------------------------------------- */
  body.index-compact{ overflow:hidden; }
  .app-shell{
    height:100vh; display:grid; grid-template-columns: 260px 1fr; gap:16px; padding:16px;
  }
  .sidebar.rail{
    width:260px; height: calc(100vh - 32px);
    position: sticky; top:16px; left:16px;
    border-radius:18px; background: linear-gradient(180deg,#6a4df7,#4d39de);
    box-shadow: 0 10px 20px rgba(54,33,170,.25), inset 0 1px 0 rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.12);
  }
  .main-content{ height: calc(100vh - 32px); overflow:hidden; margin-left:0; padding:0; }
  .dashboard-panel{
    height:100%; border-radius:18px; background:#fff; padding:16px; box-shadow: var(--shadow-soft);
    display:flex; flex-direction:column; gap:14px; isolation:isolate; margin:0;
  }
  .panel-topbar{ display:grid; grid-template-columns: 1fr auto; align-items:center; gap:12px; }
  .panel-title{ margin:0; font-size:1.25rem; color:#1f2263; font-weight:800; }
  .panel-actions{ display:flex; gap:10px; align-items:center; }
  
  /* Grid de widgets (sem rolagem) */
  .widgets{
    flex:1; display:grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 110px;
    gap: 12px;
    overflow:hidden;
  }
  .widget{
    background:#fff; border:1px solid var(--border-color);
    border-radius:16px; padding:12px;
    box-shadow: var(--shadow-soft-2);
    display:flex; flex-direction:column; gap:8px; position:relative;
  }
  .widget .widget-head{ display:flex; align-items:center; gap:8px; font-weight:700; color:#2b2f6b; font-size:.92rem; }
  .widget.small { grid-column: span 3; grid-row: span 2; }
  .widget.wide  { grid-column: span 6; grid-row: span 3; }
  .widget.pie   { grid-column: span 3; grid-row: span 3; align-items:center; justify-content:center; }
  .widget.activity{ grid-column: span 6; grid-row: span 3; }
  
  /* KPI com sparkline */
  .widget.kpi{
    flex-direction:row; align-items:center; justify-content:space-between;
    background: linear-gradient(135deg,#f2ecff,#e9f7ff);
    box-shadow: 0 12px 22px rgba(91,61,245,.12), inset 0 1px 0 rgba(255,255,255,.9);
  }
  .kpi-meta{ display:grid; gap:4px; }
  .kpi-label{ font-size:.8rem; color: var(--text-secondary); }
  .kpi-value{ font-size:1.6rem; font-weight:800; color:#1f2263; }
  .mini-chart{ width:120px; height:44px; }
  .chart{ width:100%; height:100%; }
  .donut{ width:88px; height:88px; }
  .activity-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
  .activity-list li{
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 10px; border:1px dashed var(--border-color); border-radius:10px;
    background:#fafbff;
  }
  
  /* Responsivo do painel compacto */
  @media (max-width: 1200px){
    .widget.small{ grid-column: span 4; }
    .widget.wide{  grid-column: span 8; }
    .widget.pie{   grid-column: span 4; }
    .widget.activity{ grid-column: span 8; }
  }
  @media (max-width: 900px){
    .app-shell{ grid-template-columns: 72px 1fr; }
    .sidebar.rail{ width:72px; }
    .widgets{ grid-auto-rows: 120px; overflow:auto; padding-right:4px; }
    .panel-title{ font-size:1.1rem; }
  }
/* ----------------------------------------------------------
   20) CHART SKIN (Chart.js, canvases e mini-sparklines)
   ---------------------------------------------------------- */
   :root{
    --chart-bg: #ffffff;
    --chart-grid: #e8eaff;
    --chart-line-1: #6a4cff;
    --chart-line-2: #f55d9c;
    --chart-line-3: #ff8fb5;
    --chart-bar-1: #a79bff;
    --chart-bar-2: #7ce6f1;
    --chart-bar-3: #ffc1d6;
  }
  .chart, .mini-chart, canvas{
    display:block; width:100%; height:100%;
    background: var(--chart-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  }
  .canvas-wrap{
    position:relative; width:100%; height:100%;
    overflow:hidden; border-radius:14px;
  }
  .sparkline{
    width:120px; height:44px; border:none; box-shadow:none;
    background: linear-gradient(180deg,#ffffff 0%, #fafbff 100%);
  }
  
  /* Grade para cards de gráfico prontos */
  .chart-card{
    display:flex; flex-direction:column; gap:8px;
    background:#fff; border:1px solid var(--border-color);
    border-radius:16px; padding:12px; box-shadow: var(--shadow-soft-2);
  }
  .chart-card .head{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    font-weight:700; color:#2b2f6b; font-size:.92rem;
  }
  .chart-legend{ display:flex; gap:10px; flex-wrap:wrap; }
  .chart-legend .dot{
    width:10px; height:10px; border-radius:50%;
    background: currentColor; display:inline-block;
  }
  .chart-legend .item{ display:flex; align-items:center; gap:6px; color:#677; font-weight:600; }
  
  /* Força os canvases a respeitarem o container dos widgets */
  .widget canvas{ width:100% !important; height:100% !important; }
  
  /* ----------------------------------------------------------
     21) PROGRESS / BARRAS / DONUTS “mock style”
     ---------------------------------------------------------- */
  .progress{
    height:10px; background:#f0f1ff; border-radius:999px; overflow:hidden;
    border:1px solid var(--border-color);
  }
  .progress > .bar{
    height:100%; background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary));
    border-right: 1px solid rgba(0,0,0,.06);
  }
  .progress.is-secondary > .bar{
    background: linear-gradient(90deg, var(--color-secondary), #f55d9c);
  }
  .progress.is-warning > .bar{
    background: linear-gradient(90deg, var(--color-warning), #ffb700);
  }
  .progress.is-success > .bar{
    background: linear-gradient(90deg, var(--color-success), #0c8e60);
  }
  
  /* Donut “fake” com CSS (quando não usar Chart.js) */
  .donut-ring{
    --size: 88px; --track: #eef0ff; --fill: var(--color-primary);
    width: var(--size); height: var(--size); border-radius:50%;
    background:
      conic-gradient(var(--fill) var(--val,0deg), transparent 0),
      radial-gradient(#fff 55%, transparent 56%),
      var(--track);
    border:1px solid var(--border-color);
    box-shadow: var(--shadow-soft-2);
  }
  
  /* ----------------------------------------------------------
     22) AVATAR / CHIPS / TAGS
     ---------------------------------------------------------- */
  .avatar{
    width:36px; height:36px; border-radius:50%;
    background: linear-gradient(135deg,#f2f0ff,#fff);
    border:1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    display:grid; place-items:center; color: var(--color-primary); font-weight:800;
  }
  .chip{
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 10px; border-radius:999px;
    background:#f6f7ff; border:1px solid var(--border-color);
    font-weight:700; color:#3a3e78; font-size:.8rem;
  }
  .chip .dot{ width:8px; height:8px; border-radius:50%; background: currentColor; }
  
  /* ----------------------------------------------------------
     23) DROPDOWNS / MENUS (compat genérico)
     ---------------------------------------------------------- */
  .dropdown{
    position:relative; display:inline-block;
  }
  .dropdown-menu{
    position:absolute; right:0; top:calc(100% + 8px);
    background:#fff; border:1px solid var(--border-color);
    border-radius:12px; box-shadow: var(--shadow-md);
    min-width:180px; padding:6px; z-index:20;
  }
  .dropdown-item{
    display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px;
    color:#334; cursor:pointer;
  }
  .dropdown-item:hover{ background:#f6f7ff; }
  
  /* ----------------------------------------------------------
     24) CARDS DE ATALHO (versão “mini” 3D da Home)
     ---------------------------------------------------------- */
  .shortcut{
    display:flex; align-items:center; gap:12px; cursor:pointer;
    padding:12px; border-radius:16px; border:1px solid var(--border-color);
    background: linear-gradient(180deg,#fff 0%, #fbfbff 100%);
    box-shadow: var(--shadow-soft-2);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  }
  .shortcut:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .shortcut i{
    width:36px; height:36px; border-radius:12px; display:grid; place-items:center;
    background:#f2f0ff; color: var(--color-primary);
  }
  
  /* ----------------------------------------------------------
     25) BARRA SUPERIOR DO PAINEL COMPACTO (ícones)
     ---------------------------------------------------------- */
  .icon-btn{
    width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
    border:1px solid var(--border-color); background:#fff; color:#5c61a1;
    box-shadow: var(--shadow-sm); cursor:pointer;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed), background var(--transition-speed);
  }
  .icon-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); background:#f9f9ff; }
  
  /* ----------------------------------------------------------
     26) LISTAS DE ATIVIDADE (Home)
     ---------------------------------------------------------- */
  .activity-list .status{
    display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.8rem;
  }
  .status.ok{ color: var(--color-success); }
  .status.warn{ color: var(--color-warning); }
  .status.err{ color: var(--color-danger); }
  
  /* ----------------------------------------------------------
     27) UTILIDADES DE LAYOUT
     ---------------------------------------------------------- */
  .grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap:12px; }
  .grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
  .grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px; }
  .flex{ display:flex; gap:10px; }
  .center{ display:grid; place-items:center; }
  .right{ margin-left:auto; }
  .mt-0{ margin-top:0; } .mt-1{ margin-top:6px; } .mt-2{ margin-top:12px; }
  .mb-0{ margin-bottom:0; } .mb-1{ margin-bottom:6px; } .mb-2{ margin-bottom:12px; }
  .p-0{ padding:0; } .p-1{ padding:6px; } .p-2{ padding:12px; }
  
  /* ----------------------------------------------------------
     28) ACESSIBILIDADE / SR-ONLY
     ---------------------------------------------------------- */
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  
  /* ----------------------------------------------------------
     29) AJUSTES FINAIS (Home sem rolagem + canvas arredondado)
     ---------------------------------------------------------- */
  .index-compact .dashboard-panel .table-container{ max-height: 42vh; }
  .index-compact .widgets .widget.activity{ overflow:auto; }
  .index-compact .widgets .widget .canvas-wrap,
  .index-compact .widgets .widget canvas{ border-radius: 14px; }



/* ----------------------------------------------------------
     30) Alpha Form Deck (reutilizável)
     ---------------------------------------------------------- */

.alpha-card {
  background:#fff; border:1px solid #e9e9ef; border-radius:12px;
  padding:16px; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.alpha-toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.alpha-toolbar .spacer { flex:1 }
.alpha-badge {
  display:inline-block; min-width:18px; padding:2px 8px; border-radius:999px;
  background:#6a4cff; color:#fff; font-size:.8rem; text-align:center; line-height:1.6;
}

/* Navegação do registro (no header) */
.alpha-record-nav { display:flex; gap:8px; align-items:center; min-width:420px; max-width:600px; flex:1 }
.alpha-record-nav .button.is-light { border:1px solid #e6e6f2; }
.alpha-record-name {
  flex:1; min-width:220px; height:40px; border:1px solid #e6e6f2; border-radius:10px;
  padding:0 14px; outline:0; background:#fff;
}

/* Busca com dropdown de resultados */
.alpha-search-wrap { position:relative }
.alpha-search-results {
  position:absolute; inset-inline:0; top:44px; background:#fff; border:1px solid #e9e9ef;
  border-radius:10px; max-height:260px; overflow:auto; z-index:12; box-shadow:0 8px 22px rgba(16,24,40,.08);
}
.alpha-search-item {
  padding:10px 12px; cursor:pointer; border-bottom:1px solid #f3f3f8;
}
.alpha-search-item:hover { background:#f6f6ff }

/* Grid compacto para formulários de cadastro */
.alpha-grid {
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}
.alpha-grid .input, .alpha-grid .textarea, .alpha-grid select {
  width:100%; border:1px solid #e6e6f2; border-radius:10px; padding:10px 12px; background:#fff;
}
.alpha-grid .textarea { min-height:84px }

/* Tabs compactas (padronizadas) */
.alpha-tabs { margin-top:10px }
.alpha-tabs ul {
  display:flex; gap:6px; padding:0; margin:0; list-style:none;
  border-bottom:1px solid #ececf5;
}
.alpha-tabs li { margin-bottom:-1px }
.alpha-tabs a {
  display:block; padding:10px 14px; border:1px solid transparent; border-bottom:none;
  color:#6a4cff; text-decoration:none; border-radius:10px 10px 0 0;
}
.alpha-tabs li.is-active a {
  background:#fff; border-color:#ececf5; border-bottom-color:transparent; color:#3b2ed0;
}
.alpha-tabpanel {
  display:none; padding:16px; border:1px solid #ececf5; border-top:none;
  background:#fff; border-radius:0 0 12px 12px; margin-top:-1px;
}
.alpha-tabpanel.is-active { display:block }

/* Tabelas leves internas (sublistas) */
.table-lite { width:100%; border-collapse:collapse; margin-top:8px }
.table-lite th, .table-lite td { border:1px solid #f1f1f6; padding:8px; text-align:left; }
.table-lite th { background:#fafaff; font-weight:600 }

/* Uploader e checklist padronizados */
.alpha-uploader {
  border:1px dashed #cfcfea; padding:12px; border-radius:12px; background:#fcfcff;
}
.alpha-checklist { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:8px; margin-top:10px }
.alpha-checkitem { display:flex; gap:8px; align-items:center; border:1px solid #f0f0f7; border-radius:10px; padding:10px; background:#fff }

/* Ações (rodapé) */
.alpha-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px }

/* Responsividade de conforto */
@media (max-width: 880px) {
  .alpha-record-nav { min-width:100%; max-width:none }
}

/* Pequenas sutilezas visuais */
.input::placeholder, .textarea::placeholder { color:#a3a3bb }


/* 31 === módulo: monitor-banco =============================== */
.monitor-grid{display:grid;grid-template-columns:320px 1fr;gap:16px}
.monitor-list{border:1px solid #e5e7eb;border-radius:10px;height:60vh;overflow:auto;background:#fff}
.monitor-item{padding:8px 10px;border-bottom:1px dashed #eee;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}
.monitor-item:hover,.monitor-item.active{background:#f7f8fa}
.pill{padding:6px 10px;border-radius:999px;background:#eef2ff;border:1px solid #e5e7eb;font-size:12px}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
.counts{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
/* ========================================================= */


/* 32 ===== Login Futurista (Aurora + Orbs + Tilt) ===== */
.login-page{ min-height:100vh; display:grid; grid-template-rows: 1fr auto; }
.footer-login{ background: transparent; border-top: none; }

.login-aurora{
  position:fixed; inset:0; overflow:hidden; z-index:-1;
  background: radial-gradient(1400px 800px at 85% -10%, #f7f6ff 20%, var(--surface-app) 60%, #eff3ff 100%);
}
.login-aurora .aurora{
  position:absolute; inset:-20% -10% -10% -10%;
  background:
    radial-gradient(60% 60% at 20% 20%, rgba(106,76,255,.25), transparent 60%),
    radial-gradient(50% 50% at 80% 10%, rgba(77,208,225,.25), transparent 60%),
    radial-gradient(45% 45% at 10% 90%, rgba(255,143,181,.22), transparent 60%);
  filter: blur(40px); animation: auroraShift 22s ease-in-out infinite alternate;
}
.orb{
  position:absolute; width:42vmin; height:42vmin; border-radius:50%;
  filter: blur(36px); opacity:.28;
}
.orb-1{ left:10%; top:12%; background: radial-gradient(circle at 30% 30%, var(--color-secondary), transparent 60%); animation: orbFloat 18s ease-in-out infinite alternate; }
.orb-2{ right:8%; top:8%; background: radial-gradient(circle at 40% 40%, var(--color-primary-light), transparent 60%); animation: orbFloat 24s ease-in-out infinite alternate; }
.orb-3{ left:20%; bottom:-8%; background: radial-gradient(circle at 60% 40%, var(--color-accent), transparent 60%); animation: orbFloat 20s ease-in-out infinite alternate; }
@keyframes auroraShift{ from{ transform: translate3d(-2%,0,0) scale(1); } to{ transform: translate3d(2%,-1%,0) scale(1.04); } }
@keyframes orbFloat{ from{ transform: translate3d(-2%, -1%, 0); } to{ transform: translate3d(2%, 1%, 0); } }
@media (prefers-reduced-motion: reduce){
  .login-aurora .aurora, .orb{ animation:none; opacity:.18; }
}

/* Grid do login */
.login-wrap{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(16px, 5vw, 48px);
  align-items:center; width:min(1200px, 96vw); margin: clamp(16px, 5vh, 48px) auto 0;
}
@media (max-width: 980px){ .login-wrap{ grid-template-columns: 1fr; } }

/* Branding / Selling points */
.login-left{ display:grid; gap: clamp(14px, 2.6vh, 20px); }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  color:#fff; font-weight:900; font-size:1.3rem; box-shadow: var(--shadow-md);
}
.brand-title{ margin:0; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; letter-spacing: -0.02em; }
.brand-title strong{ color: var(--color-primary); }
.brand-sub{ margin:.25rem 0 0; color: var(--text-secondary); }
.selling-points{ list-style:none; padding:0; margin:.5rem 0 0; display:grid; gap:10px; }
.selling-points li{ display:flex; align-items:center; gap:10px; color:#2b2f6b; font-weight:700; }
.selling-points i{ color: var(--color-primary); }

/* Cartão de login (glass + tilt) */
.login-right{ display:flex; justify-content:center; }
.login-card{
  width:min(420px, 94vw);
  background: var(--glass-bg); border: var(--glass-border); box-shadow: var(--glass-shadow);
  border-radius: var(--border-radius-xl);
  padding: clamp(16px, 3.2vh, 28px); position:relative; isolation:isolate;
  transform-style: preserve-3d; will-change: transform; perspective: 1000px;
  animation: slideIn .4s var(--transition-easing);
}
.login-card:focus{ outline: 2px solid var(--color-secondary); outline-offset:2px; }
.login-card .dynamic-title{ margin-top: 4px; margin-bottom: 18px; }

/* Form de login */
.login-form .field{ margin-bottom: 12px; }
.login-form .field-inline{ display:flex; align-items:center; gap:10px; }
/* altura padrão compartilhada */
:root{ --field-height: 48px; }

.login-form .control{ width:100%; position: relative; }

.login-form .input{
  width:100%;
  height: var(--field-height);
  background:#fff; color: var(--text-dark);
  border:1px solid var(--border-color);
  border-radius: 999px;                 /* mesmo “pill” do botão */
  padding: 0 44px 0 42px;               /* espaço p/ ícones */
  font-size: 1rem;
}

.login-form .control.has-icons-left .input { padding-left: 42px; }
.login-form .control.has-icons-right .input{ padding-right: 50px; }

/* garante que o botão acompanhe a altura */
#login-button{ min-height: var(--field-height); }


.login-form .input:focus{
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 4px rgba(77,208,225,.16);
}
.toggle-pass{
  position:absolute; right:8px; top:50%; transform: translateY(-50%);
  background:#fff; border:1px solid var(--border-color); border-radius:10px;
  width:36px; height:36px; display:grid; place-items:center; color:#5c61a1;
}
.toggle-pass:hover{ background:#f6f7ff; }
.icon-btn.small{ width:36px; height:36px; }

/* Dicas/feedback */
.form-hint{ margin:6px 2px 0; font-size:.85rem; color: var(--text-secondary); }
.row-hints{ display:flex; align-items:center; gap:10px; justify-content:space-between; min-height:22px; }
.caps-hint{ font-weight:700; color: #9a6b00; background:#fff3cd; border:1px solid #ffe79a; border-radius:6px; padding:2px 8px; }
.form-feedback{ margin-top:10px; font-weight:700; }
.form-feedback.error{ color: var(--color-danger); }
.form-feedback.ok{ color: var(--color-success); }
.small-link{ font-size:.9rem; color: var(--color-primary); }

/* Botão com spinner */
.button.is-fullwidth{ width:100%; }
.btn-spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff;
  margin-left:10px; display:none; animation: spin .7s linear infinite;
}
.is-loading .btn-spinner{ display:inline-block; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* Tilt + brilho seguindo o mouse (usa .card-shine já definida no seu CSS) */
.tilt{ transition: transform .15s ease-out, box-shadow .25s ease; }
.tilt:hover{ box-shadow: var(--shadow-lg); }
.tilt:hover .card-shine{ --shine: 1; }



/* 33=====================  ANIMAÇÕES UTILITÁRIAS  ===================== */
/* Respeito a acessibilidade */
@media (prefers-reduced-motion: reduce) {
  .anim-shake, .anim-shake-once,
  .anim-pulse, .anim-pulse-once, .anim-pulse-hover:hover,
  .anim-shimmer, .anim-shimmer-surface::after {
    animation: none !important;
    transition: none !important;
  }
}

/* 1) SHAKE (erro/validação) */
@keyframes alphaShake {
  0%,100% { transform: translateX(0) }
  15%     { transform: translateX(-6px) }
  30%     { transform: translateX(6px) }
  45%     { transform: translateX(-4px) }
  60%     { transform: translateX(4px) }
  75%     { transform: translateX(-2px) }
  90%     { transform: translateX(2px) }
}
.anim-shake      { animation: alphaShake .38s var(--transition-easing) infinite }
.anim-shake-once { animation: alphaShake .38s var(--transition-easing) 1 }

/* 2) PULSE (realce de ação/sucesso) */
@keyframes alphaPulse {
  0%   { transform: scale(1);    box-shadow: var(--shadow-md) }
  50%  { transform: scale(1.04); box-shadow: 0 14px 30px rgba(106,76,255,.22) }
  100% { transform: scale(1);    box-shadow: var(--shadow-md) }
}
.anim-pulse       { animation: alphaPulse 1.1s ease-in-out infinite }
.anim-pulse-once  { animation: alphaPulse .65s ease-out 1 }
.anim-pulse-hover:hover { animation: alphaPulse .65s ease-out 1 }

/* 3) SHIMMER (skeleton/loading de superfícies) */
@keyframes alphaShimmer {
  0%   { transform: translateX(-100%) }
  100% { transform: translateX(100%) }
}
/* Use em elementos “placeholder” (ex.: linhas de tabela ou cards enquanto carrega) */
.anim-shimmer {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg,#ffffff 0%, #fbfbff 100%) !important;
}
.anim-shimmer::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: alphaShimmer 1.25s ease-in-out infinite;
}
/* Quando quiser manter o background original e só “passar” o brilho: */
.anim-shimmer-surface { position:relative; overflow:hidden; }
.anim-shimmer-surface::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: alphaShimmer 1.25s ease-in-out infinite;
}

/* 4) SLIDE-IN suave (bom para toasts, dropdowns) */
@keyframes alphaSlideInUp { from { opacity:0; transform: translateY(8px) } to { opacity:1; transform: translateY(0) } }
.anim-slide-in-up { animation: alphaSlideInUp .25s var(--transition-easing) 1 }

/* Sugestões rápidas de uso */
.button.anim-pulse-hover { will-change: transform, box-shadow; }
.total-card.is-loading, .widget.is-loading, .table-container.is-loading { position:relative; }
.total-card.is-loading .total-value,
.widget.is-loading .widget-head,
.table-container.is-loading table tbody tr td { opacity:.65; }


/* 34 === Underline do título com movimento sutil === */
.dynamic-title::after{
  /* mantém tua aparência, mas agora com deslocamento suave */
  background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-primary-light) 50%, var(--color-secondary) 100%);
  background-size: 200% 100%;
  animation: alphaUnderlineFlow 6s linear infinite;
}
@keyframes alphaUnderlineFlow{
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}
/* Respeita acessibilidade: desliga animação se o usuário preferir */
@media (prefers-reduced-motion: reduce){
  .dynamic-title::after{ animation: none !important; }
}

/* === Relógio discreto para o header === */
.clock-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:#fff; border:1px solid var(--border-color);
  color: var(--text-dark); font-weight:700; font-size:.9rem;
  box-shadow: var(--shadow-sm);
}
.clock-pill i{ opacity:.7 }

/* === (Opcional) leve “float-in” nos canvases quando aparecem === */
.widget canvas, .chart, .mini-chart{
  animation: chartPop .35s var(--transition-easing);
}
@keyframes chartPop{ from{ transform:translateY(6px); opacity:.0 } to{ transform:none; opacity:1 } }



  /* Fim do stylesheet (v2025.10) */