* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Arial, sans-serif; }
  body { background: #f0f2f5; padding: 20px; color: #222; }
  .container { max-width: 1500px; margin: 0 auto; }
  header { background: linear-gradient(135deg, #1e3a8a, #2563eb); color: white; padding: 20px; border-radius: 10px; margin-bottom: 20px; position: relative; }
  header h1 { font-size: 24px; margin-bottom: 5px; }
  header p { opacity: 0.9; font-size: 14px; }

  .sino { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.2); border: none; color: white; width: 45px; height: 45px; border-radius: 50%; cursor: pointer; font-size: 20px; transition: 0.2s; }
  .sino:hover { background: rgba(255,255,255,0.3); }
  .sino * { pointer-events: none; }
  .sino-badge { position: absolute; top: -3px; right: -3px; background: #ef4444; color: white; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; border: 2px solid #1e3a8a; }
  .notif-painel { display: none; position: absolute; top: 70px; right: 20px; background: white; color: #222; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); width: 400px; max-height: 500px; overflow-y: auto; z-index: 50; }
  .notif-painel.show { display: block; }
  .notif-header { padding: 15px; border-bottom: 2px solid #f1f5f9; font-weight: 600; color: #1e3a8a; display: flex; justify-content: space-between; align-items: center; }
  .notif-item { padding: 12px 15px; border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: 0.2s; }
  .notif-item:hover { background: #f8fafc; }
  .notif-item.vencido { border-left: 4px solid #ef4444; }
  .notif-item.hoje { border-left: 4px solid #f59e0b; }
  .notif-item.proximo { border-left: 4px solid #3b82f6; }
  .notif-titulo { font-weight: 600; font-size: 13px; }
  .notif-detalhe { font-size: 12px; color: #666; margin-top: 3px; }
  .notif-valor { font-weight: 600; color: #1e3a8a; font-size: 13px; margin-top: 3px; }

  .alerta-topo { background: #fee2e2; color: #991b1b; padding: 12px 20px; border-radius: 8px; margin-bottom: 15px; border-left: 4px solid #ef4444; display: flex; justify-content: space-between; align-items: center; }
  .alerta-topo.amarelo { background: #fef3c7; color: #92400e; border-color: #f59e0b; }
  .alerta-topo button { background: transparent; border: 1px solid currentColor; color: inherit; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }

  .tabs { display: flex; gap: 5px; margin-bottom: 20px; border-bottom: 2px solid #e5e7eb; flex-wrap: wrap; }
  .tab { padding: 12px 24px; background: white; border: none; cursor: pointer; font-size: 14px; font-weight: 500; color: #666; border-radius: 8px 8px 0 0; transition: 0.2s; }
  .tab.active { background: #2563eb; color: white; }
  .tab:hover:not(.active) { background: #e5e7eb; }
  .tab-content { display: none; }
  .tab-content.active { display: block; }

  .dashboard { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; margin-bottom: 20px; }
  .dashboard.vendas { grid-template-columns: repeat(6, 1fr); }
  .dashboard.inicio { grid-template-columns: repeat(4, 1fr); }
  .card { background: white; padding: 18px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border-left: 4px solid; }
  .card.total { border-color: #2563eb; }
  .card.aberto { border-color: #f59e0b; }
  .card.pago { border-color: #10b981; }
  .card.vencido { border-color: #ef4444; }
  .card.proximo { border-color: #3b82f6; }
  .card.projecao { border-color: #8b5cf6; }
  .card.realizado { border-color: #10b981; }
  .card.cartao { border-color: #2563eb; }
  .card.pix { border-color: #06b6d4; }
  .card.dinheiro { border-color: #f59e0b; }
  .card.despesa { border-color: #ef4444; }
  .card.dif-pos { border-color: #10b981; }
  .card.dif-neg { border-color: #ef4444; }
  .card.dif-zero { border-color: #6b7280; }
  .card.troca { border-color: #ec4899; }
  .card.func  { border-color: #8b5cf6; }
  .card.meta { border-color: #f59e0b; }
  .card.saldo-pos { border-color: #10b981; }
  .card.saldo-neg { border-color: #ef4444; }
  .card.alerta { border-color: #ef4444; }
  .card h3 { font-size: 11px; text-transform: uppercase; color: #666; margin-bottom: 8px; }
  .card .valor { font-size: 18px; font-weight: bold; }
  .card .valor.grande { font-size: 22px; }
  .card .qtd { font-size: 12px; color: #888; margin-top: 5px; }
  .card .pct { font-size: 12px; font-weight: 600; margin-top: 4px; }
  .card .pct.up { color: #10b981; }
  .card .pct.down { color: #ef4444; }

  .toolbar { background: white; padding: 15px; border-radius: 10px; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .toolbar input, .toolbar select, .toolbar button { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
  .toolbar button { background: #2563eb; color: white; border: none; cursor: pointer; font-weight: 500; }
  .toolbar button:hover { background: #1d4ed8; }
  .toolbar button.success { background: #10b981; }
  .toolbar button.danger { background: #ef4444; }
  .toolbar button.warning { background: #f59e0b; }
  .toolbar .search { flex: 1; min-width: 200px; }

  .atalhos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
  .atalho-btn { flex: 1; min-width: 180px; padding: 16px; border: none; border-radius: 10px; cursor: pointer; font-size: 15px; font-weight: 600; color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.08); transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
  .atalho-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
  .atalho-conta { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
  .atalho-venda { background: linear-gradient(135deg, #10b981, #059669); }
  .atalho-meta { background: linear-gradient(135deg, #f59e0b, #d97706); }
  .atalho-rel { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }

  table { width: 100%; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border-collapse: collapse; }
  th { background: #f8fafc; padding: 12px; text-align: left; font-size: 12px; text-transform: uppercase; color: #555; border-bottom: 2px solid #e5e7eb; cursor: pointer; user-select: none; }
  th:hover { background: #e5e7eb; }
  td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
  tr:hover { background: #f8fafc; }
  tr.inativo { opacity: 0.5; }
  tr.domingo { background: #fef3c7; }
  tr.domingo:hover { background: #fde68a; }
  .badge { padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap; }
  .badge.aberto { background: #fef3c7; color: #92400e; }
  .badge.pago { background: #d1fae5; color: #065f46; }
  .badge.vencido { background: #fee2e2; color: #991b1b; }
  .badge.tipo { background: #e0e7ff; color: #3730a3; }
  .badge.fornecedor { background: #fce7f3; color: #9f1239; }
  .badge.ativo { background: #d1fae5; color: #065f46; }
  .badge.inativo { background: #e5e7eb; color: #4b5563; }
  .badge.acima { background: #d1fae5; color: #065f46; }
  .badge.abaixo { background: #fee2e2; color: #991b1b; }

  .actions button { padding: 5px 8px; margin: 0 1px; border: none; border-radius: 5px; cursor: pointer; font-size: 11px; }
  .btn-pagar { background: #10b981; color: white; }
  .btn-editar { background: #3b82f6; color: white; }
  .btn-excluir { background: #ef4444; color: white; }
  .btn-reabrir { background: #f59e0b; color: white; }
  .btn-ver { background: #6b7280; color: white; }
  .btn-pdf { background: #dc2626; color: white; }

  .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100; align-items: center; justify-content: center; padding: 20px; }
  .modal.show { display: flex; }
  .modal-content { background: white; padding: 25px; border-radius: 10px; width: 600px; max-width: 100%; max-height: 90vh; overflow-y: auto; }
  .modal h2 { margin-bottom: 15px; color: #1e3a8a; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .form-group { margin-bottom: 12px; }
  .form-group.full { grid-column: 1 / -1; }
  .form-group label { display: block; font-size: 13px; margin-bottom: 4px; color: #555; font-weight: 500; }
  .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; font-family: inherit; }
  .form-group textarea { resize: vertical; min-height: 60px; }
  .form-group.checkbox { display: flex; align-items: center; gap: 8px; }
  .form-group.checkbox input { width: auto; }
  .form-group.checkbox label { margin-bottom: 0; }
  .modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

  .valor-cel { font-weight: 600; color: #1e3a8a; }
  .data-vencida { color: #ef4444; font-weight: 600; }
  .data-hoje { color: #f59e0b; font-weight: 600; }
  .data-proximo { color: #3b82f6; font-weight: 600; }

  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
  .grid-3 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 20px; }
  .panel { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
  .panel h3 { color: #1e3a8a; margin-bottom: 15px; font-size: 16px; padding-bottom: 8px; border-bottom: 2px solid #f1f5f9; }
  .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #f1f5f9; flex-wrap: wrap; gap: 10px; }
  .panel-header h3 { color: #1e3a8a; font-size: 16px; border: none; padding: 0; margin: 0; }
  .panel-header button { background: #2563eb; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; }
  .panel-header button:hover { background: #1d4ed8; }
  .chart-container { position: relative; height: 300px; }

  .resumo-mes { padding: 12px; border-left: 4px solid #2563eb; background: #f8fafc; margin-bottom: 8px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
  .resumo-mes-info { flex: 1; }
  .resumo-mes-titulo { font-weight: 600; color: #1e3a8a; }
  .resumo-mes-detalhe { font-size: 12px; color: #666; margin-top: 3px; }
  .resumo-mes-valor { font-size: 16px; font-weight: bold; color: #2563eb; }

  .tag-obs { display: inline-block; background: #fef3c7; color: #92400e; padding: 2px 6px; border-radius: 4px; font-size: 10px; margin-left: 4px; cursor: help; }
  .input-busca-forn { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; margin-bottom: 15px; font-size: 14px; }

  .tab-vendas { background: linear-gradient(135deg, #10b981, #059669); color: white !important; }
  .tab-vendas.active { background: linear-gradient(135deg, #059669, #047857); }
  .tab-metas { background: linear-gradient(135deg, #f59e0b, #d97706); color: white !important; }
  .tab-metas.active { background: linear-gradient(135deg, #d97706, #b45309); }
  .tab-acompanhamento { background: linear-gradient(135deg, #0ea5e9, #0284c7); color: white !important; }
  .tab-acompanhamento.active { background: linear-gradient(135deg, #0284c7, #0369a1); }
  .tab-inicio { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: white !important; }
  .tab-inicio.active { background: linear-gradient(135deg, #1e3a8a, #1e40af); }
  .tab-usuarios { background: linear-gradient(135deg, #e74c3c, #c0392b); color: white !important; }
  .tab-usuarios.active { background: linear-gradient(135deg, #c0392b, #a93226); }
  .tab-auditoria { background: linear-gradient(135deg, #34495e, #2c3e50); color: white !important; }
  .tab-auditoria.active { background: linear-gradient(135deg, #2c3e50, #1a252f); }

  .progress-bar { width: 100%; height: 32px; background: #e5e7eb; border-radius: 16px; overflow: hidden; margin: 10px 0; }
  .progress-fill { height: 100%; transition: width 0.6s; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 13px; }
  .progress-fill.vermelho { background: linear-gradient(90deg, #ef4444, #f87171); }
  .progress-fill.amarelo { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
  .progress-fill.verde { background: linear-gradient(90deg, #10b981, #34d399); }

  .metas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 15px 0; }
  .meta-mes { background: #f8fafc; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; }
  .meta-mes label { font-size: 12px; color: #666; font-weight: 600; display: block; margin-bottom: 4px; }
  .meta-mes input { width: 100%; padding: 6px 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }

  .lista-vencimentos { max-height: 400px; overflow-y: auto; }
  .item-vencimento { padding: 12px; border-left: 4px solid #3b82f6; background: #f8fafc; margin-bottom: 8px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: 0.2s; }
  .item-vencimento:hover { background: #e0e7ff; transform: translateX(4px); }
  .item-vencimento.vencido { border-color: #ef4444; background: #fef2f2; }
  .item-vencimento.hoje { border-color: #f59e0b; background: #fef3c7; }
  .item-vencimento.pago { border-color: #10b981; background: #d1fae5; }
  .item-info { flex: 1; }
  .item-titulo { font-weight: 600; color: #1e3a8a; font-size: 14px; }
  .item-sub { font-size: 12px; color: #666; margin-top: 3px; }
  .item-valor { font-size: 15px; font-weight: bold; color: #1e3a8a; }

  /* Tela de loading inicial */
  #telaLoading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); z-index: 9998; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; }
  #telaLoading.hidden { display: none; }
  .loading-spinner { width: 48px; height: 48px; border: 5px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-text { color: white; font-size: 16px; opacity: 0.9; }

  #telaLogin { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); z-index: 9999; display: flex; align-items: center; justify-content: center; }
  #telaLogin.hidden { display: none; }
  .login-box { background: white; padding: 40px; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); width: 90%; max-width: 420px; text-align: center; }
  .login-logo { font-size: 56px; margin-bottom: 10px; }
  .login-title { font-size: 30px; font-weight: bold; color: #1e3a8a; margin-bottom: 5px; }
  .login-subtitle { color: #888; margin-bottom: 30px; font-size: 14px; }
  .login-box input[type="text"], .login-box input[type="password"] { width: 100%; padding: 14px; margin-bottom: 15px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 16px; box-sizing: border-box; transition: border 0.2s; }
  .login-box input:focus { outline: none; border-color: #2563eb; }
  .login-checkbox { text-align: left; margin: 10px 0 20px; font-size: 14px; color: #555; display: flex; align-items: center; gap: 8px; }
  .btn-login { width: 100%; padding: 14px; background: linear-gradient(135deg, #2563eb, #1e3a8a); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; transition: transform 0.2s; }
  .btn-login:hover { transform: translateY(-2px); }
  .login-erro { color: #d32f2f; margin-top: 15px; font-size: 14px; min-height: 20px; font-weight: 600; }
  .login-rodape { margin-top: 25px; padding-top: 20px; border-top: 1px solid #eee; font-size: 12px; color: #999; }

  #barraUsuario { display: flex; align-items: center; justify-content: space-between; background: #1e293b; color: white; padding: 10px 20px; font-size: 14px; border-radius: 8px; margin-bottom: 15px; }
  #barraUsuario .user-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .user-badge { padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: bold; text-transform: uppercase; color: white; }
  .user-badge.admin { background: #e74c3c; }
  .user-badge.operador { background: #3498db; }
  .user-badge.visualizador { background: #95a5a6; }
  .user-badge.vendedor { background: #10b981; }
  .btn-sair { background: #e74c3c; color: white; border: none; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: bold; }
  .btn-sair:hover { background: #c0392b; }

  .badge-perfil { padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: bold; text-transform: uppercase; color: white; }
  .badge-perfil.admin { background: #e74c3c; }
  .badge-perfil.operador { background: #3498db; }
  .badge-perfil.visualizador { background: #95a5a6; }
  .badge-perfil.vendedor { background: #10b981; }
  .badge-perfil.sem-perfil { background: #ef4444; }

  .auditoria-item { background: white; padding: 12px 15px; margin-bottom: 8px; border-radius: 6px; border-left: 4px solid #2563eb; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 1px 3px rgba(0,0,0,0.05); flex-wrap: wrap; gap: 10px; }
  .auditoria-item.criar { border-left-color: #10b981; }
  .auditoria-item.editar { border-left-color: #f59e0b; }
  .auditoria-item.excluir { border-left-color: #ef4444; }
  .auditoria-item.login { border-left-color: #2563eb; }
  .auditoria-acao { font-weight: bold; text-transform: uppercase; font-size: 11px; padding: 3px 8px; border-radius: 4px; color: white; }
  .auditoria-acao.criar { background: #10b981; }
  .auditoria-acao.editar { background: #f59e0b; }
  .auditoria-acao.excluir { background: #ef4444; }
  .auditoria-acao.login { background: #2563eb; }
  .auditoria-data { color: #888; font-size: 12px; }
  .hidden-perm { display: none !important; }

  @media (max-width: 1100px) {
    .dashboard { grid-template-columns: repeat(3, 1fr); }
    .dashboard.vendas { grid-template-columns: repeat(4, 1fr); }
    .dashboard.inicio { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 900px) {
    .dashboard { grid-template-columns: repeat(2, 1fr); }
    .dashboard.vendas { grid-template-columns: repeat(2, 1fr); }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .form-row, .form-row-3 { grid-template-columns: 1fr; }
  }
  .empty { text-align: center; padding: 40px; color: #999; }

  /* ===== SCORE DE SAUDE FINANCEIRA ===== */
  .saude-box { border-radius:14px; padding:22px 28px; margin-bottom:20px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; position:relative; overflow:hidden; }
  .saude-box::before { content:''; position:absolute; right:-30px; top:-30px; width:160px; height:160px; border-radius:50%; opacity:.08; background:white; }
  .saude-box.verde   { background:linear-gradient(135deg,#065f46,#10b981); color:white; }
  .saude-box.amarelo { background:linear-gradient(135deg,#92400e,#f59e0b); color:white; }
  .saude-box.vermelho{ background:linear-gradient(135deg,#991b1b,#ef4444); color:white; }
  .saude-score-wrap  { position:relative; width:90px; height:90px; flex-shrink:0; }
  .saude-score-svg   { transform:rotate(-90deg); }
  .saude-score-num   { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:900; }
  .saude-info        { flex:1; min-width:200px; }
  .saude-titulo      { font-size:20px; font-weight:800; margin-bottom:4px; }
  .saude-sub         { font-size:13px; opacity:.9; margin-bottom:10px; }
  .saude-fatores     { display:flex; gap:10px; flex-wrap:wrap; }
  .saude-fator       { background:rgba(255,255,255,.18); border-radius:8px; padding:6px 12px; font-size:12px; font-weight:600; display:flex; align-items:center; gap:5px; }
  .saude-fator-bar   { flex:1; display:flex; flex-direction:column; gap:6px; min-width:180px; }
  .saude-barra-item  { display:flex; align-items:center; gap:8px; font-size:12px; }
  .saude-barra-label { width:140px; opacity:.9; }
  .saude-barra-track { flex:1; height:6px; background:rgba(255,255,255,.2); border-radius:3px; }
  .saude-barra-fill  { height:100%; border-radius:3px; background:white; transition:width .8s; }

  /* ===== METAS POR DIA DA SEMANA ===== */
  .diasem-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin:14px 0; }
  .diasem-card { background:#f8fafc; border:2px solid #e5e7eb; border-radius:10px; padding:12px 10px; text-align:center; }
  .diasem-card.hoje { border-color:#2563eb; background:#eff6ff; }
  .diasem-nome { font-size:11px; font-weight:700; text-transform:uppercase; color:#64748b; margin-bottom:6px; }
  .diasem-input { width:100%; padding:6px; border:1px solid #ddd; border-radius:6px; font-size:13px; text-align:center; }
  .diasem-real { font-size:11px; color:#10b981; font-weight:600; margin-top:4px; }
  .diasem-pct  { font-size:11px; font-weight:700; margin-top:2px; }
  .diasem-pct.ok  { color:#10b981; }
  .diasem-pct.nok { color:#ef4444; }

  .vendedor-hoje-box { border-radius:12px; padding:20px 24px; margin-bottom:20px; }
  .vendedor-hoje-box.verde   { background:linear-gradient(135deg,#d1fae5,#a7f3d0); border:2px solid #10b981; }
  .vendedor-hoje-box.amarelo { background:linear-gradient(135deg,#fef3c7,#fde68a); border:2px solid #f59e0b; }
  .vendedor-hoje-box.vermelho{ background:linear-gradient(135deg,#fee2e2,#fecaca); border:2px solid #ef4444; }
  .vendedor-hoje-titulo { font-size:16px; font-weight:800; color:#1e293b; margin-bottom:4px; }
  .vendedor-hoje-valor  { font-size:32px; font-weight:900; color:#1e3a8a; line-height:1; }
  .vendedor-hoje-meta   { font-size:13px; color:#475569; margin-top:4px; }
  .vendedor-prog-wrap   { margin-top:12px; }
  .vendedor-prog-track  { height:14px; background:rgba(0,0,0,.1); border-radius:7px; overflow:hidden; }
  .vendedor-prog-fill   { height:100%; border-radius:7px; transition:width .8s; }

  /* ===== PAINEL META SEMANAL ===== */
  .meta-sem-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:14px; }
  .meta-sem-card { border-radius:10px; padding:14px 10px; border:2px solid; text-align:center; transition:.2s; }
  .meta-sem-card:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.1); }
  .meta-sem-card.verde   { border-color:#10b981; background:#f0fdf4; }
  .meta-sem-card.amarelo { border-color:#f59e0b; background:#fffbeb; }
  .meta-sem-card.vermelho{ border-color:#ef4444; background:#fef2f2; }
  .meta-sem-card.vazio   { border-color:#d1d5db; background:#f9fafb; }
  .meta-sem-card.hoje    { box-shadow:0 0 0 3px rgba(37,99,235,.3); }
  .meta-sem-nome  { font-size:11px; font-weight:700; text-transform:uppercase; color:#64748b; margin-bottom:6px; }
  .meta-sem-meta  { font-size:12px; color:#475569; margin-bottom:4px; }
  .meta-sem-real  { font-size:18px; font-weight:800; color:#1e3a8a; line-height:1; }
  .meta-sem-pct   { font-size:12px; font-weight:700; margin-top:4px; }
  .meta-sem-pct.ok  { color:#10b981; }
  .meta-sem-pct.nok { color:#ef4444; }
  .meta-sem-prog  { margin-top:6px; height:5px; background:rgba(0,0,0,.08); border-radius:3px; overflow:hidden; }
  .meta-sem-fill  { height:100%; border-radius:3px; transition:width .6s; }

  /* ===== IMPORTAR CSV VENDAS ===== */
  .import-drop-zone { border:2px dashed #cbd5e1; border-radius:12px; padding:40px 20px; text-align:center; cursor:pointer; transition:.2s; background:#f8fafc; }
  .import-drop-zone:hover, .import-drop-zone.drag-over { border-color:#2563eb; background:#eff6ff; }
  .import-drop-zone-icon { font-size:48px; margin-bottom:12px; }
  .import-drop-zone p { color:#64748b; font-size:14px; margin:4px 0; }
  .import-drop-zone strong { color:#1e3a8a; }

  .import-resultado { margin-top:16px; }
  .import-linha-ok  { background:#f0fdf4; border-left:3px solid #10b981; padding:6px 12px; margin-bottom:3px; border-radius:4px; font-size:12px; display:flex; justify-content:space-between; }
  .import-linha-err { background:#fef2f2; border-left:3px solid #ef4444; padding:6px 12px; margin-bottom:3px; border-radius:4px; font-size:12px; }
  .import-linha-dup { background:#fef3c7; border-left:3px solid #f59e0b; padding:6px 12px; margin-bottom:3px; border-radius:4px; font-size:12px; }
  .import-stats { display:flex; gap:16px; padding:14px; background:#f8fafc; border-radius:8px; margin-bottom:12px; flex-wrap:wrap; }
  .import-stat  { display:flex; flex-direction:column; align-items:center; gap:2px; }
  .import-stat-num   { font-size:22px; font-weight:800; }
  .import-stat-label { font-size:11px; color:#64748b; text-transform:uppercase; font-weight:600; }
  .import-preview-table { width:100%; border-collapse:collapse; font-size:12px; }
  .import-preview-table th { background:#0f172a; color:white; padding:7px 10px; text-align:right; font-size:11px; }
  .import-preview-table th:first-child { text-align:left; }
  .import-preview-table td { padding:6px 10px; text-align:right; border-bottom:1px solid #f1f5f9; }
  .import-preview-table td:first-child { text-align:left; font-weight:600; }
  .import-preview-table tr.dup td { background:#fef3c7; }
  .import-preview-table tr.err td { background:#fef2f2; }

  /* ===== MODAL PARCELADO / RECORRENTE ===== */
  .tipo-conta-tabs { display:flex; gap:0; margin-bottom:20px; border-radius:8px; overflow:hidden; border:2px solid #e5e7eb; }
  .tipo-conta-tab  { flex:1; padding:10px; border:none; cursor:pointer; font-size:13px; font-weight:600; background:#f8fafc; color:#666; transition:.2s; text-align:center; }
  .tipo-conta-tab.active { background:#2563eb; color:white; }
  .tipo-conta-tab:not(:last-child) { border-right:2px solid #e5e7eb; }

  .parcelas-preview { margin-top:16px; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; }
  .parcelas-preview-header { background:#0f172a; color:white; padding:10px 14px; font-size:12px; font-weight:700; display:grid; grid-template-columns:40px 1fr 130px 130px 110px; gap:8px; }
  .parcela-row { display:grid; grid-template-columns:40px 1fr 130px 130px 110px; gap:8px; padding:8px 14px; border-bottom:1px solid #f1f5f9; align-items:center; font-size:13px; }
  .parcela-row:last-child { border-bottom:none; }
  .parcela-row:hover { background:#f8fafc; }
  .parcela-row input { width:100%; padding:5px 8px; border:1px solid #ddd; border-radius:5px; font-size:12px; }
  .parcela-row input:focus { border-color:#2563eb; outline:none; }
  .parcela-num { width:24px; height:24px; background:#2563eb; color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }

  .recorrente-preview { margin-top:16px; max-height:300px; overflow-y:auto; border:1px solid #e5e7eb; border-radius:8px; }
  .recorrente-row { display:grid; grid-template-columns:40px 1fr 130px; gap:8px; padding:8px 14px; border-bottom:1px solid #f1f5f9; align-items:center; font-size:13px; }
  .recorrente-row:last-child { border-bottom:none; }
  .recorrente-row:hover { background:#f8fafc; }
  .recorrente-row input { width:100%; padding:5px 8px; border:1px solid #ddd; border-radius:5px; font-size:12px; }

  .resumo-lancamento { background:#f0f9ff; border:1px solid #bae6fd; border-radius:8px; padding:12px 16px; margin-top:12px; font-size:13px; display:flex; gap:20px; flex-wrap:wrap; }
  .resumo-item { display:flex; flex-direction:column; gap:2px; }
  .resumo-item label { font-size:10px; text-transform:uppercase; color:#0284c7; font-weight:700; }
  .resumo-item span  { font-weight:700; color:#1e3a8a; font-size:15px; }

  /* ===== ACOMPANHAMENTO DE VENDAS ===== */
  .acomp-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
  .acomp-kpi { border-radius:12px; padding:20px; position:relative; overflow:hidden; }
  .acomp-kpi::before { content:''; position:absolute; top:-20px; right:-20px; width:80px; height:80px; border-radius:50%; opacity:.15; }
  .acomp-kpi.azul   { background:linear-gradient(135deg,#1e3a8a,#2563eb); color:white; }
  .acomp-kpi.azul::before { background:white; }
  .acomp-kpi.verde  { background:linear-gradient(135deg,#065f46,#10b981); color:white; }
  .acomp-kpi.verde::before { background:white; }
  .acomp-kpi.laranja{ background:linear-gradient(135deg,#92400e,#f59e0b); color:white; }
  .acomp-kpi.vermelho{background:linear-gradient(135deg,#991b1b,#ef4444); color:white; }
  .acomp-kpi-label  { font-size:11px; text-transform:uppercase; font-weight:700; opacity:.8; letter-spacing:.8px; }
  .acomp-kpi-valor  { font-size:28px; font-weight:800; margin:6px 0 2px; line-height:1; }
  .acomp-kpi-sub    { font-size:12px; opacity:.85; }
  .acomp-kpi-icone  { position:absolute; top:16px; right:16px; font-size:28px; opacity:.6; }

  .acomp-ano-tabs { display:flex; gap:8px; margin-bottom:20px; }
  .acomp-ano-tab  { padding:9px 22px; border:2px solid #e5e7eb; border-radius:8px; cursor:pointer; font-size:14px; font-weight:700; background:white; color:#666; transition:.2s; }
  .acomp-ano-tab.active { background:#0ea5e9; color:white; border-color:#0ea5e9; }

  .acomp-table-wrap { overflow-x:auto; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
  .acomp-table { width:100%; border-collapse:collapse; font-size:13px; min-width:1100px; }
  .acomp-table th { background:#0f172a; color:white; padding:10px 12px; text-align:right; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }
  .acomp-table th:first-child { text-align:left; min-width:200px; }
  .acomp-table td { padding:9px 12px; text-align:right; border-bottom:1px solid #f1f5f9; white-space:nowrap; }
  .acomp-table td:first-child { text-align:left; font-weight:600; color:#1e293b; }
  .acomp-table tr:hover td { background:#f8fafc; }
  .acomp-table tr.row-destaque td { background:#f0f9ff; }
  .acomp-table tr.row-total td { background:#0f172a; color:white; font-weight:700; border-bottom:none; }
  .acomp-table tr.row-total td:first-child { color:white; }
  .acomp-table tr.row-sep td { background:#f8fafc; height:4px; padding:0; border:none; }

  .acomp-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:20px; font-size:11px; font-weight:700; }
  .acomp-badge.verde   { background:#d1fae5; color:#065f46; }
  .acomp-badge.amarelo { background:#fef3c7; color:#92400e; }
  .acomp-badge.vermelho{ background:#fee2e2; color:#991b1b; }
  .acomp-badge.neutro  { background:#f1f5f9; color:#475569; }

  .acomp-semaforo { font-size:16px; }
  .acomp-charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }
  .acomp-chart-full  { grid-column:1/-1; }
  .acomp-chart-box   { background:white; border-radius:12px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
  .acomp-chart-box h4 { color:#1e3a8a; font-size:15px; margin-bottom:16px; padding-bottom:8px; border-bottom:2px solid #f1f5f9; }

  /* ===== PAINEL FLUXO DE CAIXA ===== */
  .fluxo-tabs { display:flex; gap:8px; margin-bottom:16px; }
  .fluxo-tab  { padding:8px 18px; border:none; border-radius:6px; cursor:pointer; font-size:13px; font-weight:600; background:#e5e7eb; color:#555; transition:.2s; }
  .fluxo-tab.active { background:#2563eb; color:white; }

  /* Calendário mensal */
  .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
  .cal-head { text-align:center; font-size:11px; font-weight:700; color:#666; padding:6px 0; text-transform:uppercase; }
  .cal-day  { border-radius:8px; padding:6px 4px; min-height:118px; font-size:11px; cursor:pointer; transition:.2s; position:relative; border:1px solid transparent; }
  .cal-day:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.1); }
  .cal-day.vazio { background:#f9fafb; opacity:.4; cursor:default; }
  .cal-day.vazio:hover { transform:none; box-shadow:none; }
  .cal-day.hoje  { border-color:#2563eb !important; box-shadow:0 0 0 2px rgba(37,99,235,.2); }
  .cal-day.fds   { background:#f9fafb; }
  .cal-day.verde  { background:#d1fae5; border-color:#10b981; }
  .cal-day.amarelo{ background:#fef3c7; border-color:#f59e0b; }
  .cal-day.vermelho{background:#fee2e2; border-color:#ef4444; }
  .cal-day.cinza  { background:#f3f4f6; border-color:#d1d5db; }
  .cal-num  { font-weight:700; font-size:13px; margin-bottom:3px; }
  .cal-proj { font-size:10px; color:#059669; font-weight:600; }
  .cal-cont { font-size:10px; color:#dc2626; font-weight:600; }
  .cal-saldo{ font-size:10px; font-weight:700; margin-top:2px; }
  .cal-qtd  { position:absolute; top:4px; right:4px; background:#2563eb; color:white; border-radius:50%; width:16px; height:16px; font-size:9px; display:flex; align-items:center; justify-content:center; font-weight:bold; }
  .cal-best {
  border: 2px solid #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16,185,129,.18), 0 6px 16px rgba(16,185,129,.18);
}

.cal-worst {
  border: 2px solid #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,.18), 0 6px 16px rgba(239,68,68,.18);
}

.cal-rank-tag {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 10px;
  line-height: 1;
  z-index: 2;
}

.cal-rank-tag.best {
  background: #10b981;
  color: white;
}

.cal-rank-tag.worst {
  background: #ef4444;
  color: white;
}


  /* Painel semanal */
  .semana-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
  .semana-dia  { border-radius:10px; padding:14px; border:2px solid; transition:.2s; }
  .semana-dia:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,.1); }
  .semana-dia.verde   { border-color:#10b981; background:#f0fdf4; }
  .semana-dia.amarelo { border-color:#f59e0b; background:#fffbeb; }
  .semana-dia.vermelho{ border-color:#ef4444; background:#fef2f2; }
  .semana-dia.vazio   { border-color:#d1d5db; background:#f9fafb; }
  .semana-dia.hoje-sem{ box-shadow:0 0 0 3px rgba(37,99,235,.3); }
  .semana-nome { font-size:11px; font-weight:700; text-transform:uppercase; color:#666; margin-bottom:6px; }
  .semana-data-num { font-size:22px; font-weight:800; color:#1e3a8a; line-height:1; }
  .semana-proj { font-size:12px; color:#059669; font-weight:600; margin-top:6px; }
  .semana-cont { font-size:12px; color:#dc2626; font-weight:600; }
  .semana-saldo{ font-size:14px; font-weight:800; margin-top:6px; padding-top:6px; border-top:1px solid rgba(0,0,0,.08); }
  .semana-contas-lista { margin-top:8px; }
  .semana-conta-item { font-size:10px; background:rgba(0,0,0,.05); border-radius:4px; padding:2px 5px; margin-bottom:2px; display:flex; justify-content:space-between; }

  /* Sugestão de melhor dia */
  .sugestao-box { background:linear-gradient(135deg,#eff6ff,#dbeafe); border:2px solid #3b82f6; border-radius:10px; padding:14px 16px; margin:12px 0; display:flex; align-items:center; gap:12px; }
  .sugestao-icone { font-size:28px; }
  .sugestao-info { flex:1; }
  .sugestao-titulo { font-weight:700; color:#1e3a8a; font-size:14px; }
  .sugestao-detalhe { font-size:12px; color:#3b82f6; margin-top:2px; }
  .sugestao-dias { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
  .sugestao-dia-btn { padding:4px 10px; border:1px solid #3b82f6; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; background:white; color:#1e3a8a; transition:.2s; }
  .sugestao-dia-btn:hover { background:#2563eb; color:white; border-color:#2563eb; }
  .sugestao-dia-btn.melhor { background:#2563eb; color:white; }

  /* ===== TOAST NOTIFICATIONS ===== */
  #toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 99999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
  .toast { background: #1e293b; color: white; padding: 14px 20px; border-radius: 10px; font-size: 14px; font-weight: 500; box-shadow: 0 4px 20px rgba(0,0,0,0.3); display: flex; align-items: center; gap: 12px; min-width: 280px; max-width: 420px; pointer-events: all; animation: toastIn 0.3s ease; border-left: 4px solid #2563eb; }
  .toast.sucesso { border-color: #10b981; }
  .toast.erro    { border-color: #ef4444; }
  .toast.aviso   { border-color: #f59e0b; }
  .toast.info    { border-color: #2563eb; }
  .toast-icon  { font-size: 20px; flex-shrink: 0; }
  .toast-msg   { flex: 1; line-height: 1.4; }
  .toast-close { background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; font-size: 16px; padding: 0; flex-shrink: 0; }
  .toast-close:hover { color: white; }
  .toast-bar  { position: absolute; bottom: 0; left: 0; height: 3px; border-radius: 0 0 10px 10px; background: rgba(255,255,255,0.3); animation: toastBar var(--dur, 3s) linear forwards; }
  @keyframes toastIn  { from { opacity:0; transform: translateX(40px); } to { opacity:1; transform: translateX(0); } }
  @keyframes toastOut { from { opacity:1; transform: translateX(0); }   to { opacity:0; transform: translateX(40px); } }
  @keyframes toastBar { from { width: 100%; } to { width: 0%; } }

  /* ===== SESSION TIMEOUT MODAL ===== */
  #sessionModal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:99998; align-items:center; justify-content:center; }
  #sessionModal.show { display:flex; }
  .session-box { background:white; padding:30px; border-radius:12px; text-align:center; max-width:400px; box-shadow:0 10px 40px rgba(0,0,0,0.3); }
  .session-box h3 { color:#1e3a8a; margin-bottom:10px; font-size:20px; }
  .session-box p  { color:#666; margin-bottom:20px; font-size:14px; }
  .session-countdown { font-size:48px; font-weight:bold; color:#ef4444; margin:10px 0; }
  .session-box .btn-renovar { background:#2563eb; color:white; border:none; padding:12px 30px; border-radius:8px; font-size:16px; font-weight:bold; cursor:pointer; margin-right:10px; }
  .session-box .btn-sair-sess { background:#ef4444; color:white; border:none; padding:12px 20px; border-radius:8px; font-size:16px; cursor:pointer; }

  /* ===== LOADING SPINNER NOS BOTÕES ===== */
  .btn-loading { position:relative; color:transparent !important; pointer-events:none; }
  .btn-loading::after { content:''; position:absolute; top:50%; left:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border:2px solid rgba(255,255,255,0.4); border-top-color:white; border-radius:50%; animation: spin 0.7s linear infinite; }

/* ============================================================
   MELHORIAS DE MODAL — adicionar no app.css
   ============================================================ */
 
/* Shake quando tenta fechar modal fixo clicando fora */
@keyframes modalShake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-8px); }
  40%  { transform: translateX(8px); }
  60%  { transform: translateX(-5px); }
  80%  { transform: translateX(5px); }
  100% { transform: translateX(0); }
}
 
/* Cursor indica que o backdrop não é clicável nos modais fixos */
#modal,
#modalVenda,
#modalParcelado,
#modalFornecedor,
#modalUsuario,
#modalVer {
  cursor: default;
}
 
#modal .modal-content,
#modalVenda .modal-content,
#modalParcelado .modal-content,
#modalFornecedor .modal-content,
#modalUsuario .modal-content,
#modalVer .modal-content {
  cursor: default;
  animation-fill-mode: forwards;
}