/* =========================================== 🔷 BASE GLOBAL =========================================== */ :root { --azul: #0d6efd; --ciano: #00bcd4; --gradiente-azul: linear-gradient(90deg, var(--azul), var(--ciano)); --texto-claro: #ffffff; --texto-escuro: #212529; --fundo-claro: #f8f9fa; --fundo-card-claro: #ffffff; --fundo-escuro: #1e1e2e; --fundo-card-escuro: #2a2a3b; --borda-suave: rgba(0, 0, 0, 0.08); --transicao: all 0.3s ease; } body { font-family: "Poppins", Arial, sans-serif; background: var(--fundo-claro); color: var(--texto-escuro); transition: var(--transicao); } [data-tema="dark"] { background: var(--fundo-escuro); color: var(--texto-claro); } a { text-decoration: none; color: inherit; } h1, h2, h3, h4, h5, h6 { font-weight: 600; } /* =========================================== 🔸 LAYOUT GERAL =========================================== */ .sidebar { width: 250px; height: 100vh; background: var(--gradiente-azul); color: var(--texto-claro); position: fixed; top: 0; left: 0; overflow-y: auto; transition: var(--transicao); } .sidebar .nav-link { color: #e0e0e0; padding: 12px 20px; display: flex; align-items: center; border-radius: 8px; margin: 4px 10px; transition: var(--transicao); } .sidebar .nav-link:hover, .sidebar .nav-link.active { background: rgba(255, 255, 255, 0.2); color: #fff; } .sidebar-logo { width: 70px; height: 70px; object-fit: cover; border-radius: 50%; } .content { margin-left: 250px; padding: 20px; transition: var(--transicao); } /* =========================================== 🔹 CARDS =========================================== */ .card { background: var(--fundo-card-claro); color: var(--texto-escuro); border-radius: 10px; border: 1px solid var(--borda-suave); transition: var(--transicao); } /* Estilo para os cards de navegação (atalhos) */ .nav-card { cursor: pointer; border: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } .nav-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Novo estilo de hover com gradiente azul */ background: var(--gradiente-azul) !important; /* Adicionado !important */ color: var(--texto-claro) !important; } .nav-card:hover .text-primary, .nav-card:hover .fa-user-friends, .nav-card:hover .fa-clipboard-list, .nav-card:hover .fa-box-open, .nav-card:hover .fa-wallet, .nav-card:hover .fa-cogs, .nav-card:hover .text-muted { color: var(--texto-claro) !important; } /* Estilo para garantir que os cards fiquem lado a lado sem quebra de linha */ .nav-cards-row { flex-wrap: nowrap; overflow-x: auto; /* Adiciona scroll horizontal se necessário */ padding-bottom: 10px; /* Espaço para o scrollbar */ } .nav-cards-row .col-md-2 { flex-shrink: 0; /* Impede que os cards encolham */ width: 20%; /* Garante que 5 cards de 20% ocupem 100% do espaço */ } /* Ajuste para telas menores, se necessário */ @media (max-width: 767.98px) { .nav-cards-row { flex-wrap: nowrap; } .nav-cards-row .col-sm-6 { flex-shrink: 0; width: 50%; /* 2 cards por linha em telas pequenas */ } } [data-tema="dark"] .card { background: var(--fundo-card-escuro); color: var(--texto-claro); border-color: rgba(255, 255, 255, 0.08); } .card-header.gradiente-azul { background: var(--gradiente-azul); color: white; font-weight: 600; border-top-left-radius: 10px; border-top-right-radius: 10px; /* Garante que o conteúdo interno não seja centralizado */ text-align: left; } /* =========================================== 🟦 BOTÕES =========================================== */ .btn-cadastrar, .btn-primary, .gradiente-azul { background: var(--gradiente-azul); color: white !important; border: none; transition: var(--transicao); } .btn-cadastrar:hover, .btn-primary:hover, .gradiente-azul:hover { opacity: 0.9; transform: translateY(-1px); } [data-tema="dark"] .btn, [data-tema="dark"] .btn-cadastrar { color: #fff !important; background: var(--gradiente-azul); } /* =========================================== 📋 TABELAS =========================================== */ .comanda-servicos { /* white-space: nowrap; */ } .table { border: none; border-radius: 10px; overflow: hidden; } .table thead { background: var(--gradiente-azul); color: white; font-weight: 600; } .table tbody tr { transition: var(--transicao); } .table tbody tr:hover { background: rgba(13, 110, 253, 0.05); } [data-tema="dark"] .table tbody tr:hover { background: rgba(255, 255, 255, 0.05); } /* =========================================== 🌗 SWITCH DE TEMA =========================================== */ .switch { position: relative; display: inline-block; width: 50px; height: 24px; } .switch input { display: none; } .slider { position: absolute; cursor: pointer; background: linear-gradient(90deg, #0d6efd, #00bcd4); border-radius: 24px; transition: var(--transicao); top: 0; left: 0; right: 0; bottom: 0; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: var(--transicao); } input:checked + .slider { background: linear-gradient(90deg, #00bcd4, #0d6efd); } input:checked + .slider:before { transform: translateX(26px); } /* =========================================== ⚙️ MODAIS =========================================== */ .modal-content { border-radius: 12px; border: none; } .modal-header.gradiente-azul { background: var(--gradiente-azul); color: white; } [data-tema="dark"] .modal-content { background: var(--fundo-card-escuro); color: var(--texto-claro); } /* =========================================== 🧾 LISTAS E FORMULÁRIOS =========================================== */ .list-group-item { background: var(--fundo-card-claro); color: var(--texto-escuro); transition: var(--transicao); } [data-tema="dark"] .list-group-item { background: var(--fundo-card-escuro); color: var(--texto-claro); } .form-control, .form-select { border-radius: 6px; border: 1px solid var(--borda-suave); transition: var(--transicao); background: var(--fundo-card-claro); color: var(--texto-escuro); } [data-tema="dark"] .form-control, [data-tema="dark"] .form-select { background: var(--fundo-card-escuro); color: var(--texto-claro); border-color: rgba(255, 255, 255, 0.1); } /* =========================================== 🌙 TEMA ESCURO - AJUSTES EXTRAS =========================================== */ [data-tema="dark"] .sidebar { background: linear-gradient(180deg, #121826, #0d111f); } [data-tema="dark"] .nav-link { color: #cfd8dc; } [data-tema="dark"] .nav-link.active { background: rgba(255, 255, 255, 0.2); color: #fff; } [data-tema="dark"] .gradiente-azul { background: var(--gradiente-azul); color: white; } /* =========================================== 💠 UTILITÁRIOS =========================================== */ /* Estilo para listas com scroll e altura fixa */ /* =========================================== 💠 UTILITÁRIOS =========================================== */ /* Estilo para listas com scroll e altura fixa */ .scroll-list { max-height: 400px; /* Altura máxima definida para forçar o scroll */ overflow-y: auto; padding-right: 5px; /* Espaço para o scrollbar */ } /* Novo estilo para o card de conteúdo com scroll */ .card-scroll-content { max-height: 70vh; /* Altura máxima para o conteúdo do card */ overflow-y: auto; padding-right: 5px; /* Espaço para o scrollbar */ } /* Scrollbar personalizado (Webkit) - Aplicado a ambas as classes */ .scroll-list::-webkit-scrollbar, .card-scroll-content::-webkit-scrollbar { width: 8px; } .scroll-list::-webkit-scrollbar-thumb, .card-scroll-content::-webkit-scrollbar-thumb { background-color: var(--azul); /* Cor azul */ border-radius: 4px; } .scroll-list::-webkit-scrollbar-track, .card-scroll-content::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); /* Fundo claro para o track */ } /* Ajuste para o tema escuro */ [data-tema="dark"] .scroll-list::-webkit-scrollbar-track, [data-tema="dark"] .card-scroll-content::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); /* Fundo escuro para o track no tema escuro */ } [data-tema="dark"] .scroll-list::-webkit-scrollbar-thumb, [data-tema="dark"] .card-scroll-content::-webkit-scrollbar-thumb { background-color: var(--azul); /* Mantém o azul no thumb */ } /* Destaque para os 5 primeiros itens */ .list-group-item.destaque { background-color: rgba(13, 110, 253, 0.05); /* Fundo levemente azul */ border-left: 3px solid var(--azul); /* Borda lateral azul */ font-weight: 600; } [data-tema="dark"] .scroll-list::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.3); } [data-tema="dark"] .list-group-item.destaque { background-color: rgba(13, 110, 253, 0.15); } .gradiente-azul { background: var(--gradiente-azul); color: white; } .text-gradient { background: var(--gradiente-azul); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .shadow-soft { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } .border-rounded { border-radius: 12px; } /* =========================================== 🔸 MENU LATERAL (INTEGRADO AO NOVO ESTILO) =========================================== */ .sidebar { height: 100vh; width: 240px; position: fixed; top: 0; left: 0; background: var(--fundo-card-claro); border-right: 1px solid var(--borda-suave); color: var(--texto-escuro); transition: var(--transicao); display: flex; flex-direction: column; z-index: 1000; } .sidebar.collapsed { width: 80px; } /* Cabeçalho da sidebar */ .sidebar-header { border-bottom: 1px solid var(--borda-suave); background: var(--gradiente-azul); color: var(--texto-claro); padding: 15px; text-align: center; } .sidebar-logo { width: 55px; height: 55px; border-radius: 50%; object-fit: cover; } .sidebar .nav-link { color: var(--texto-escuro); padding: 12px 18px; display: flex; align-items: center; font-weight: 500; border-radius: 8px; margin: 4px 10px; transition: var(--transicao); } .sidebar .nav-link i { font-size: 18px; width: 22px; text-align: center; } .sidebar .nav-link.active, .sidebar .nav-link:hover { background: var(--gradiente-azul); color: #fff !important; transform: translateX(4px); } .sidebar-footer { border-top: 1px solid var(--borda-suave); font-size: 13px; padding: 10px; text-align: center; } /* Toggle */ #toggleBtn { position: fixed; top: 12px; left: 260px; background: var(--gradiente-azul); color: white; border: none; border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1200; transition: var(--transicao); } .sidebar.collapsed ~ #toggleBtn { left: 90px; } /* Tema escuro */ [data-tema="dark"] .sidebar { background: var(--fundo-card-escuro); border-right: 1px solid rgba(255, 255, 255, 0.08); color: var(--texto-claro); } [data-tema="dark"] .sidebar .nav-link { color: var(--texto-claro); } [data-tema="dark"] .sidebar .nav-link.active, [data-tema="dark"] .sidebar .nav-link:hover { background: var(--gradiente-azul); color: #fff !important; } /* ====================== NOTIFICAÇÕES (canto superior direito) ====================== */ #notificacoes-container { display: flex; flex-direction: column; align-items: flex-end; /* 🔹 garante alinhamento à direita */ gap: 10px; position: fixed; right: 18px; top: 18px; z-index: 2100; } /* Base da notificação */ .notificacao { display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 12px 18px; border-radius: 10px; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.2; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); backdrop-filter: blur(6px); animation: noti-in 0.4s ease forwards; transition: all 0.35s ease; max-width: 90vw; /* 🔹 adapta-se à tela (resposta móvel) */ width: max-content; /* 🔹 cresce conforme o texto */ min-width: 220px; /* 🔹 mantém tamanho mínimo bonito */ /* white-space: nowrap; */ /* 🔹 impede quebra de linha */ overflow: hidden; /* 🔹 impede texto de estourar */ text-overflow: ellipsis; /* 🔹 adiciona "..." se for longo demais */ } /* Cores dos tipos */ .notificacao.sucesso { background: linear-gradient(90deg,#28a745,#2ecc71); } .notificacao.erro { background: linear-gradient(90deg,#dc3545,#e74c3c); } .notificacao.aviso { background: linear-gradient(90deg,#ff9f1a,#ffc107); } /* Ícone */ .notificacao i { flex-shrink: 0; font-size: 18px; opacity: 0.95; } /* Texto */ .notificacao span { overflow: hidden; text-overflow: ellipsis; /* white-space: nowrap; */ } /* Entrada e saída suave */ @keyframes noti-in { from { transform: translateX(25px) scale(0.95); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } } @keyframes noti-out { from { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); } to { opacity: 0; transform: translateX(30px) scale(0.96); filter: blur(3px); } } .notificacao.hide { animation: noti-out 0.4s ease forwards; } /* =========================================== 🔸 AUTO-HIDE DA SIDEBAR (ICONE SOMENTE) =========================================== */ /* Quando recolhida */ .sidebar.collapsed { width: 80px; transition: var(--transicao); } /* Some os textos quando recolhido */ .sidebar.collapsed .nav-link span, .sidebar.collapsed .sidebar-title { display: none; opacity: 0; visibility: hidden; transition: var(--transicao); } /* Centraliza os ícones no modo recolhido */ .sidebar.collapsed .nav-link { justify-content: center; padding: 12px 0; } /* Mantém a logo visível, mas menor */ .sidebar.collapsed .sidebar-logo { width: 50px; height: 50px; margin-bottom: 0; } /* Mantém o cabeçalho compacto */ .sidebar.collapsed .sidebar-header { padding: 10px 0; } /* Move o botão de toggle */ .sidebar.collapsed ~ #toggleBtn { left: 100px; } /* Ajusta o conteúdo */ .sidebar.collapsed ~ .content { margin-left: 100px; transition: var(--transicao); } /* =========================================== 🌙 AJUSTES GERAIS PARA TEMA ESCURO =========================================== */ [data-tema="dark"] { background-color: var(--fundo-escuro); color: var(--texto-claro); } /* Textos gerais */ [data-tema="dark"] h1, [data-tema="dark"] h2, [data-tema="dark"] h3, [data-tema="dark"] h4, [data-tema="dark"] h5, [data-tema="dark"] h6, [data-tema="dark"] p, [data-tema="dark"] span, [data-tema="dark"] label, [data-tema="dark"] .form-label, [data-tema="dark"] .fw-semibold, [data-tema="dark"] .fw-bold, [data-tema="dark"] .text-dark { color: var(--texto-claro) !important; } /* Inputs e selects */ [data-tema="dark"] .form-control, [data-tema="dark"] .form-select, [data-tema="dark"] textarea { background-color: #2a2a3b; color: var(--texto-claro); border-color: rgba(255, 255, 255, 0.1); } [data-tema="dark"] .form-control::placeholder, [data-tema="dark"] textarea::placeholder { color: rgba(255, 255, 255, 0.6); } /* Cards */ [data-tema="dark"] .card { background-color: var(--fundo-card-escuro); color: var(--texto-claro); border-color: rgba(255, 255, 255, 0.08); } /* Sidebar */ [data-tema="dark"] .sidebar { background: linear-gradient(180deg, #121826, #0d111f); color: var(--texto-claro); } [data-tema="dark"] .sidebar .nav-link { color: #cfd8dc; } [data-tema="dark"] .sidebar .nav-link.active, [data-tema="dark"] .sidebar .nav-link:hover { background: var(--gradiente-azul); color: #fff !important; } /* Botões */ [data-tema="dark"] .btn, [data-tema="dark"] .btn-cadastrar, [data-tema="dark"] .btn-primary { color: #fff !important; background: var(--gradiente-azul); } [data-tema="dark"] .btn-light { background: rgba(255, 255, 255, 0.1); color: #fff !important; border: none; } /* Títulos e textos brancos em modais */ [data-tema="dark"] .modal-content { background: var(--fundo-card-escuro); color: var(--texto-claro); } /* === Busca / Filtro === */ .search-box { position: relative; display: flex; align-items: center; background: var(--card-bg, #f1f1f1); border-radius: 25px; padding: 4px 10px; transition: all 0.3s ease; } .search-box input { border: none; background: transparent; outline: none; width: 0; opacity: 0; color: var(--text-color, #000); transition: all 0.3s ease; } .search-box.active input { width: 180px; opacity: 1; margin-left: 8px; } .btn-search, .btn-clear { border: none; background: transparent; color: var(--text-color, #000); font-size: 1.2rem; transition: transform 0.2s ease; } .btn-search:hover, .btn-clear:hover { transform: scale(1.1); } .btn-clear { display: none; } .search-box.active .btn-clear { display: inline; } /* === Botão gradiente === */ .btn-gradiente { background: linear-gradient(90deg, #007bff, #00c6ff); border: none; color: white; transition: 0.3s; } .btn-gradiente:hover { opacity: 0.85; } /* === Card das listas === */ .card-tema { background: var(--card-bg, #fff); border: none; border-radius: 12px; box-shadow: 0 3px 8px rgba(0,0,0,0.1); color: var(--text-color, #000); } /* === Tema escuro === */ body[data-tema="dark"] { --card-bg: #1f1f2e; --text-color: #fff; background-color: #14141f !important; color: #fff !important; } body[data-tema="dark"] .form-control, body[data-tema="dark"] .form-select { background-color: #2a2a3b; border: 1px solid #3c3c52; color: #fff; } body[data-tema="dark"] .card-tema { background: #1f1f2e; color: #fff; } /* === Transições === */ .card-tema, .search-box, body { transition: background-color 0.3s ease, color 0.3s ease; } /* ===== BUSCA NA LISTA DE COMANDAS ===== */ .card-header { position: relative; /* garante que a lupa possa se posicionar dentro */ display: flex; align-items: center; justify-content: space-between; height: 42px; overflow: hidden; } /* ===== CONTAINER GERAL ===== */ #buscaComandaContainer { position: absolute; right: 15px; /* canto direito */ top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; } /* ===== BOTÕES (LUPA E X) ===== */ #buscaComandaContainer .btn-transparent { background: transparent; border: none; color: inherit; padding: 6px 8px; cursor: pointer; transition: transform 0.25s ease; } /* clique na lupa dá leve efeito */ #btnToggleBusca:active { transform: scale(0.96); } /* ===== INPUT DE BUSCA ===== */ #buscaComandaContainer input { width: 0; opacity: 0; padding: 6px 10px; height: 30px; font-size: 0.85rem; border: none; border-radius: 20px; color: #000; background-color: rgba(255, 255, 255, 0.92); transform: translateX(20px); max-width: 260px; transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, transform 0.3s ease; } /* ===== QUANDO ATIVA ===== */ #buscaComandaContainer.ativo input { width: 220px !important; opacity: 1 !important; transform: translateX(0); } /* ===== ANIMAÇÃO DA LUPA ===== */ #buscaComandaContainer.ativo #btnToggleBusca i { transform: rotate(90deg) scale(1.15); } /* ===== BOTÃO X ===== */ #btnClearBusca { display: none; background: transparent; border: none; padding: 6px 8px; cursor: pointer; color: inherit; opacity: 0.9; } /* ajustes para lupa / busca (compat com seu CSS antigo) */ #buscaComandaContainer input { color: var(--texto-escuro); background-color: rgba(255,255,255,0.92); border: 1px solid rgba(0,0,0,0.06); } /* tema escuro: inverte para legibilidade */ body[data-tema="dark"] #buscaComandaContainer input { color: var(--texto-claro); background-color: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.06); } /* garantir que o X fique visível */ #btnClearBusca { color: inherit; } body[data-tema="dark"] #buscaComandaContainer input { color: #fff; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); } /* ======================== AJUSTE FINAL DAS TABELAS DE COMANDAS ======================== */ /* Aplica sombra suave e bordas consistentes */ .table { background-color: var(--fundo-card-claro) !important; color: var(--texto-escuro); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); /* igual à shadow-soft */ border-radius: 10px; overflow: hidden; border-collapse: separate; border-spacing: 0; } /* Remove linhas brancas internas */ .table td, .table th { background-color: transparent !important; border-color: rgba(0, 0, 0, 0.06); } /* Cabeçalho segue gradiente */ .table thead { background: var(--gradiente-azul); color: #fff; font-weight: 600; } /* Hover suave */ .table tbody tr { transition: background-color 0.2s ease; } .table tbody tr:hover { background-color: rgba(13, 110, 253, 0.06); } /* ======================== MODO ESCURO ======================== */ [data-tema="dark"] .table { background-color: var(--fundo-card-escuro) !important; color: var(--texto-claro); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); } [data-tema="dark"] .table thead { background: var(--gradiente-azul); color: #fff; } [data-tema="dark"] .table td, [data-tema="dark"] .table th { background-color: transparent !important; color: var(--texto-claro) !important; border-color: rgba(255, 255, 255, 0.08); } /* Hover ajustado para contraste em tema escuro */ [data-tema="dark"] .table tbody tr:hover { background-color: rgba(255, 255, 255, 0.05); } /* ======================== AJUSTE FINAL DO TEXTO DE OBSERVAÇÃO ======================== */ .table .text-muted.small.fst-italic { font-size: 0.8rem; opacity: 0.8; margin-top: 4px; display: block; line-height: 1.3; color: rgba(0, 0, 0, 0.65) !important; } /* Modo escuro — texto branco suave e discreto */ [data-tema="dark"] .table .text-muted.small.fst-italic { color: rgba(255, 255, 255, 0.75) !important; opacity: 0.85; } /* ===== BUSCA DE CLIENTES (lupa animada) ===== */ #buscaClienteContainer { background-color: #dee2e6; /* Cinza claro para o modo claro (mais escuro que o branco) */ border-radius: 20px; padding: 4px 10px; display: flex; align-items: center; gap: 6px; transition: all 0.3s ease; } #buscaClienteContainer:focus-within { background-color: #ced4da; /* Cinza um pouco mais escuro ao focar no modo claro */ box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); } #buscaClienteContainer input { background: transparent; border: none; color: var(--texto-escuro); /* Garante cor do texto escura no modo claro */ flex: 1; padding: 6px 8px; } #buscaClienteContainer input:focus { outline: none; box-shadow: none; } #buscaClienteContainer input::placeholder { color: rgba(0, 0, 0, 0.5); /* Placeholder cinza escuro no modo claro */ } #buscaClienteContainer .btn-transparent { background: transparent; border: none; color: #fff; opacity: 0.85; transition: all 0.3s ease; } #buscaClienteContainer .btn-transparent:hover { opacity: 1; transform: rotate(15deg) scale(1.1); } /* === Ajuste de alinhamento apenas para títulos gradiente (sem afetar listas) === */ .card-header.gradiente-azul.titulo, .modal-header.gradiente-azul.titulo { display: flex; align-items: center; justify-content: flex-start; text-align: left !important; } .card-header.gradiente-azul.titulo i, .modal-header.gradiente-azul.titulo i { margin-right: 8px; } /* ==================== GRADIENTE AZUL PADRÃO ==================== */ .gradiente-azul { background: linear-gradient(135deg, #007bff, #00bcd4); } /* ==================== CARDS DE RESUMO FINANCEIRO ==================== */ .card-resumo { border: none; border-radius: 12px; color: var(--texto-escuro); /* Cor do texto padrão */ background: var(--fundo-card-claro); /* Fundo do card padrão */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.25s ease; padding: 1rem; text-align: center; } [data-tema="dark"] .card-resumo { color: var(--texto-claro); background: var(--fundo-card-escuro); } .card-resumo:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); } .card-resumo .fs-4 { font-size: 1.6rem; opacity: 0.95; /* Garante que o container não tenha cor de fundo */ background: none; display: inline-block; color: initial; /* Remove a cor sólida */ } .card-resumo .fs-4 i { /* Aplica o gradiente APENAS ao ícone para a visualização web */ background: var(--gradiente-azul); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; /* Necessário para o background-clip funcionar corretamente */ } .card-resumo h6 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.25rem; } .card-resumo h5 { font-size: 1.2rem; font-weight: 700; margin: 0; } /* ======================== INTERAÇÃO DOS CARDS DE NAVEGAÇÃO ======================== */ .nav-card { cursor: pointer; transition: all 0.25s ease; } .nav-card:hover { transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); filter: brightness(1.08); } .nav-card:active { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); filter: brightness(0.95); } /* ===== Logout (fixo no final da sidebar) ===== */ .sidebar { display: flex; flex-direction: column; height: 100vh; } .logout-section { margin-top: auto; padding: 1rem 0; border-top: 1px solid rgba(255, 255, 255, 0.1); } .logout-section .nav-link { color: #ff4d4d; font-weight: 600; transition: background 0.2s, color 0.2s; } .logout-section .nav-link:hover { background-color: rgba(255, 77, 77, 0.1); color: #fff; border-radius: 8px; } /* =========================================== 🎯 TELA DE LOGIN - PUYOL DUCORTE =========================================== */ .login-container { display: flex; align-items: center; justify-content: center; height: 100vh; background: var(--fundo-claro); transition: var(--transicao); } [data-tema="dark"] .login-container { background: var(--fundo-escuro); } /* ===== CARD PRINCIPAL ===== */ .login-card { position: relative; background: var(--fundo-card-claro); color: var(--texto-escuro); border-radius: 12px; width: 100%; max-width: 400px; padding: 2.5rem 2rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); transition: var(--transicao); text-align: center; } [data-tema="dark"] .login-card { background: var(--fundo-card-escuro); color: var(--texto-claro); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } /* ===== CABEÇALHO ===== */ .login-header { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 2rem; } /* Logo sem círculo — muda conforme o tema via JS */ .login-logo { width: 100px; height: auto; object-fit: contain; margin-bottom: 0.8rem; transition: transform 0.3s ease; } .login-logo:hover { transform: scale(1.05); } .login-title { font-size: 1.8rem; font-weight: 700; margin: 0; background: var(--gradiente-azul); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .login-subtitle { font-size: 0.95rem; color: rgba(0, 0, 0, 0.6); margin-top: 0.2rem; } [data-tema="dark"] .login-subtitle { color: rgba(255, 255, 255, 0.7); } /* ===== FORMULÁRIO ===== */ .login-form { display: flex; flex-direction: column; gap: 1rem; } .form-group { display: flex; flex-direction: column; gap: 0.4rem; } label { font-weight: 500; font-size: 0.9rem; text-align: left; } input.form-control { width: 100%; padding: 0.7rem 0.9rem; border-radius: 8px; border: 1px solid var(--borda-suave); background-color: var(--fundo-card-claro); color: var(--texto-escuro); transition: var(--transicao); font-size: 0.95rem; } [data-tema="dark"] input.form-control { background-color: #2a2a3b; color: var(--texto-claro); border-color: rgba(255, 255, 255, 0.1); } input.form-control:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25); } /* ===== CAMPO DE SENHA COM ÍCONE ===== */ .senha-wrapper { position: relative; } .input-group { position: relative; display: flex; align-items: center; width: 100%; } .input-group input { flex: 1; width: 100%; } .btn-toggle-senha { position: absolute; right: 12px; background: transparent; border: none; color: var(--texto-escuro); font-size: 1rem; cursor: pointer; transition: var(--transicao); } [data-tema="dark"] .btn-toggle-senha { color: var(--texto-claro); } .btn-toggle-senha:hover { color: var(--ciano); } /* ===== BOTÃO ===== */ .btn-login { border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; padding: 0.8rem; cursor: pointer; color: #fff; transition: var(--transicao); display: flex; align-items: center; justify-content: center; gap: 8px; /* 🔥 adiciona espaçamento automático entre ícone e texto */ } .btn-login:hover { opacity: 0.9; transform: translateY(-1px); } /* ===== MENSAGEM DE ERRO ===== */ .error-msg { color: #ff4d4d; font-weight: 500; font-size: 0.9rem; text-align: center; margin-top: 0.5rem; min-height: 1.2rem; } /* ===== RODAPÉ ===== */ .login-footer { text-align: center; margin-top: 1.5rem; font-size: 0.85rem; opacity: 0.7; } /* =========================================== 🧩 BLOQUEIO DE AUTOCOMPLETE (CORRIGIDO) =========================================== */ /* impede chrome/autofill de colorir fundo */ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--fundo-card-claro) inset !important; -webkit-text-fill-color: var(--texto-escuro) !important; transition: background-color 9999s ease-in-out 0s; } [data-tema="dark"] input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--fundo-card-escuro) inset !important; -webkit-text-fill-color: var(--texto-claro) !important; } /* remove botões e ícones automáticos */ input::-ms-clear, input::-ms-reveal, input::-webkit-search-decoration, input::-webkit-search-cancel-button { display: none !important; } /* campo invisível truque */ input.fake-field { position: absolute; top: -9999px; left: -9999px; opacity: 0; pointer-events: none; } /* ===== TOGGLE DE TEMA ===== */ .theme-toggle { position: absolute; top: 14px; right: 16px; } .theme-toggle button { background: transparent; border: none; font-size: 1.25rem; color: var(--texto-escuro); cursor: pointer; transition: transform 0.3s ease, color 0.3s ease; } [data-tema="dark"] .theme-toggle button { color: var(--texto-claro); } .theme-toggle button:hover { transform: rotate(15deg) scale(1.1); } /* ===== INPUT GROUP PADRONIZADO ===== */ .input-group { display: flex; align-items: center; position: relative; width: 100%; } .input-group input { width: 100%; padding-right: 40px; /* espaço pro botão de olho */ box-sizing: border-box; } /* ===== ÍCONE DO BOTÃO DE SENHA ===== */ .btn-toggle-senha { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--texto-escuro); font-size: 1rem; cursor: pointer; padding: 0; line-height: 0; transition: var(--transicao); } [data-tema="dark"] .btn-toggle-senha { color: var(--texto-claro); } .btn-toggle-senha:hover { color: var(--ciano); } /* =========================================== ⚠️ MODAL DE ERRO - ALINHADO AO LOGIN =========================================== */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: none; align-items: center; justify-content: center; z-index: 3000; backdrop-filter: blur(3px); animation: fadeIn 0.25s ease; } .modal-box { background: var(--fundo-card-claro); color: var(--texto-escuro); border-radius: 14px; width: 100%; max-width: 380px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.25); overflow: hidden; transform: scale(0.97) translateY(10px); opacity: 0; animation: modalIn 0.35s ease forwards; } [data-tema="dark"] .modal-box { background: var(--fundo-card-escuro); color: var(--texto-claro); } /* ===== CABEÇALHO ===== */ .modal-header { background: var(--gradiente-azul); color: #fff; padding: 1rem 1.2rem; display: flex; align-items: center; gap: 10px; } .modal-header h5 { font-weight: 600; font-size: 1.05rem; margin: 0; } /* ===== CORPO ===== */ .modal-body { padding: 1.8rem 1.6rem 1.6rem; text-align: center; } .modal-body p { font-size: 1rem; font-weight: 500; color: inherit; margin: 0 0 1.4rem; line-height: 1.4; } /* ===== BOTÃO ===== */ .modal-body .btn-gradiente { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; padding: 0.7rem 1.4rem; font-size: 0.95rem; font-weight: 600; transition: all 0.25s ease; } .modal-body .btn-gradiente:hover { transform: translateY(-1px); opacity: 0.9; } /* ===== ANIMAÇÕES ===== */ @keyframes modalIn { 0% { transform: scale(0.95) translateY(20px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } #listaUltimasAlteracoes li { border: none; border-bottom: 1px solid rgba(0,0,0,0.05); } [data-tema="dark"] #listaUltimasAlteracoes li { border-bottom: 1px solid rgba(255,255,255,0.1); } /* Modo escuro */ body[data-tema="dark"] .text-secondary { color: white !important; } body[data-tema="dark"] .text-muted { color: #aaa !important; } /* Para garantir visibilidade das datas nas últimas comandas */ body[data-tema="dark"] #dataComanda { color: white !important; } /* =========================================== TABELA DE ABAS (TABS) - ESTILIZAÇÃO FINANCEIRO =========================================== */ .nav-tabs { border-bottom: none; /* Remove a borda padrão do Bootstrap */ } .nav-tabs .nav-link { border: none; border-radius: 8px 8px 0 0; color: var(--texto-escuro); background-color: var(--fundo-card-claro); margin-right: 5px; transition: var(--transicao); font-weight: 500; } .nav-tabs .nav-link:hover { border: none; background-color: rgba(0, 0, 0, 0.05); } .nav-tabs .nav-link.active { background: var(--gradiente-azul); color: var(--texto-claro); border: none; font-weight: 600; /* Adiciona uma sombra suave para destacar */ box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); } /* Ajustes para o tema escuro */ [data-tema="dark"] .nav-tabs .nav-link { color: var(--texto-claro); background-color: var(--fundo-card-escuro); } [data-tema="dark"] .nav-tabs .nav-link:hover { background-color: rgba(255, 255, 255, 0.1); } [data-tema="dark"] .nav-tabs .nav-link.active { background: var(--gradiente-azul); color: var(--texto-claro); } /* =========================================== ESCONDER SPIN BUTTON EM INPUT TYPE="NUMBER" (Para um visual mais limpo) =========================================== */ /* Para Chrome, Safari, Edge, Opera */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* =========================================== 🔷 BASE GLOBAL =========================================== */ :root { --azul: #0d6efd; --ciano: #00bcd4; --gradiente-azul: linear-gradient(90deg, var(--azul), var(--ciano)); --texto-claro: #ffffff; --texto-escuro: #212529; --fundo-claro: #f8f9fa; --fundo-card-claro: #ffffff; --fundo-escuro: #1e1e2e; --fundo-card-escuro: #2a2a3b; --borda-suave: rgba(0, 0, 0, 0.08); --transicao: all 0.3s ease; } body { font-family: "Poppins", Arial, sans-serif; background: var(--fundo-claro); color: var(--texto-escuro); transition: var(--transicao); } [data-tema="dark"] { background: var(--fundo-escuro); color: var(--texto-claro); } a { text-decoration: none; color: inherit; } h1, h2, h3, h4, h5, h6 { font-weight: 600; } /* =========================================== 🔸 LAYOUT GERAL =========================================== */ .sidebar { width: 250px; height: 100vh; background: var(--gradiente-azul); color: var(--texto-claro); position: fixed; top: 0; left: 0; overflow-y: auto; transition: var(--transicao); } .sidebar .nav-link { color: #e0e0e0; padding: 12px 20px; display: flex; align-items: center; border-radius: 8px; margin: 4px 10px; transition: var(--transicao); } .sidebar .nav-link:hover, .sidebar .nav-link.active { background: rgba(255, 255, 255, 0.2); color: #fff; } .sidebar-logo { width: 70px; height: 70px; object-fit: cover; border-radius: 50%; } .content { margin-left: 250px; padding: 20px; transition: var(--transicao); } /* =========================================== 🔹 CARDS =========================================== */ .card { background: var(--fundo-card-claro); border-radius: 10px; border: 1px solid var(--borda-suave); transition: var(--transicao); } [data-tema="dark"] .card { background: var(--fundo-card-escuro); border-color: rgba(255, 255, 255, 0.08); } .card-header.gradiente-azul { background: var(--gradiente-azul); color: white; font-weight: 600; border-top-left-radius: 10px; border-top-right-radius: 10px; } /* =========================================== 🟦 BOTÕES =========================================== */ .btn-cadastrar, .btn-primary, .gradiente-azul { background: var(--gradiente-azul); color: white !important; border: none; transition: var(--transicao); } .btn-cadastrar:hover, .btn-primary:hover, .gradiente-azul:hover { opacity: 0.9; transform: translateY(-1px); } [data-tema="dark"] .btn, [data-tema="dark"] .btn-cadastrar { color: #fff !important; background: var(--gradiente-azul); } /* =========================================== 📋 TABELAS =========================================== */ /* 1. Remover quebra de linha nas células */ .table td, .table th { /* white-space: nowrap; */ /* Impede quebra de linha */ } /* 2. Adicionar scroll e altura fixa ao container da lista */ .comanda-list-container { max-height: 300px; /* Altura fixa para o scroll */ overflow-y: auto; /* Adiciona barra de rolagem vertical */ margin-bottom: 1rem; /* Espaçamento após o container */ } /* 3. Garantir que a tabela se ajuste dentro do container */ .comanda-list-container table { width: 100%; margin-bottom: 0; /* Remove margem inferior padrão do Bootstrap */ } .comanda-servicos { white-space: normal; /* Permite quebra de linha no conteúdo do serviço */ } /* Regra geral para células da tabela (removendo o nowrap geral que estava causando o corte) */ .table td, .table th { white-space: normal; /* Volta ao normal para evitar corte */ } /* =========================================== 📋 TABELAS =========================================== */ /* 1. Altura fixa e scroll para o card principal (Lista de Comandas) */ .card-scroll-content { max-height: 70vh; /* Altura máxima para o card (70% da altura da tela) */ overflow-y: auto; /* Adiciona barra de rolagem vertical */ padding-right: 10px !important; /* Espaço para a barra de rolagem customizada */ } /* 2. Customização da barra de rolagem (WebKit - Chrome, Safari) */ .card-scroll-content::-webkit-scrollbar { width: 8px; } .card-scroll-content::-webkit-scrollbar-track { background: var(--fundo-card-escuro); /* Fundo da barra de rolagem */ border-radius: 10px; } .card-scroll-content::-webkit-scrollbar-thumb { background: var(--gradiente-azul); /* Cor da barra de rolagem */ border-radius: 10px; } /* 3. Ajuste para a coluna de serviços (permitir quebra de linha, mas com limite) */ .table td:nth-child(5) { /* Coluna de Serviços */ white-space: normal !important; /* Permite quebra de linha */ max-width: 250px; /* Limite de largura para evitar que a coluna fique muito larga */ word-wrap: break-word; /* Garante que palavras longas quebrem */ } .comanda-servicos { white-space: normal; /* Permite quebra de linha no conteúdo do serviço */ } /* Ajuste para o container interno da lista, que é onde o JS insere o conteúdo */ #comandaListPendentes, #comandaListConcluidas { display: block; /* Garante que o container interno se comporte corretamente */ } /* Ajuste para a tabela dentro do container */ .table { margin-bottom: 0; } /* Ajuste para o corpo da tabela dentro do container */ .table tbody { display: table-row-group; } /* Regra específica para a coluna de serviços dentro da célula */ .servicos-cell { white-space: normal; /* Permite quebra de linha */ word-wrap: break-word; } /* Ajuste para o texto de uso de pacote */ .observacao.text-info { white-space: normal; } /* Garante que o texto das descrições de comanda e logs seja claro no tema escuro */ [data-tema="dark"] .card-body p, [data-tema="dark"] .card-body div { color: var(--texto-claro) !important; } /* Ajuste específico para textos que usam a classe text-muted ou similar */ [data-tema="dark"] .text-muted, [data-tema="dark"] .small { color: rgba(255, 255, 255, 0.7) !important; } .table { border: none; border-radius: 10px; overflow: hidden; } .table thead { background: var(--gradiente-azul); color: white; font-weight: 600; } .table tbody tr { transition: var(--transicao); } .table tbody tr:hover { background: rgba(13, 110, 253, 0.05); } [data-tema="dark"] .table tbody tr:hover { background: rgba(255, 255, 255, 0.05); } /* =========================================== 🌗 SWITCH DE TEMA =========================================== */ .switch { position: relative; display: inline-block; width: 50px; height: 24px; } .switch input { display: none; } .slider { position: absolute; cursor: pointer; background: linear-gradient(90deg, #0d6efd, #00bcd4); border-radius: 24px; transition: var(--transicao); top: 0; left: 0; right: 0; bottom: 0; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: var(--transicao); } input:checked + .slider { background: linear-gradient(90deg, #00bcd4, #0d6efd); } input:checked + .slider:before { transform: translateX(26px); } /* =========================================== ⚙️ MODAIS =========================================== */ .modal-content { border-radius: 12px; border: none; } .modal-header.gradiente-azul { background: var(--gradiente-azul); color: white; } [data-tema="dark"] .modal-content { background: var(--fundo-card-escuro); color: var(--texto-claro); } /* =========================================== 🧾 LISTAS E FORMULÁRIOS =========================================== */ .list-group-item { background: var(--fundo-card-claro); transition: var(--transicao); } [data-tema="dark"] .list-group-item { background: var(--fundo-card-escuro); color: var(--texto-claro); } .form-control, .form-select { border-radius: 6px; border: 1px solid var(--borda-suave); transition: var(--transicao); } [data-tema="dark"] .form-control, [data-tema="dark"] .form-select { background: #2a2a3b; color: white; border-color: rgba(255, 255, 255, 0.1); } /* =========================================== 🌙 TEMA ESCURO - AJUSTES EXTRAS =========================================== */ [data-tema="dark"] .sidebar { background: linear-gradient(180deg, #121826, #0d111f); } [data-tema="dark"] .nav-link { color: #cfd8dc; } [data-tema="dark"] .nav-link.active { background: rgba(255, 255, 255, 0.2); color: #fff; } [data-tema="dark"] .gradiente-azul { background: var(--gradiente-azul); color: white; } /* =========================================== 💠 UTILITÁRIOS =========================================== */ .gradiente-azul { background: var(--gradiente-azul); color: white; } .text-gradient { background: var(--gradiente-azul); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .shadow-soft { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } .border-rounded { border-radius: 12px; } /* =========================================== 🔹 ATALHOS RÁPIDOS - HOVER =========================================== */ .nav-card-hover { transition: var(--transicao); position: relative; overflow: hidden; } .nav-card-hover::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--gradiente-azul); opacity: 0; transition: var(--transicao); z-index: 1; } .nav-card-hover:hover::before { opacity: 1; } .nav-card-hover:hover { color: white !important; transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .nav-card-hover:hover .card-body * { color: white !important; z-index: 2; position: relative; } .nav-card-hover .card-body i { transition: var(--transicao); } .nav-card-hover:hover .card-body i { transform: scale(1.1); } [data-tema="dark"] .nav-card-hover:hover { background: transparent; /* Garante que o gradiente do ::before seja o único fundo */ } /* Fim dos estilos de Atalhos Rápidos */ /* =========================================== 🔸 MENU LATERAL (INTEGRADO AO NOVO ESTILO) =========================================== */ .sidebar { height: 100vh; width: 240px; position: fixed; top: 0; left: 0; background: var(--fundo-card-claro); border-right: 1px solid var(--borda-suave); color: var(--texto-escuro); transition: var(--transicao); display: flex; flex-direction: column; z-index: 1000; } .sidebar.collapsed { width: 80px; } /* Cabeçalho da sidebar */ .sidebar-header { border-bottom: 1px solid var(--borda-suave); background: var(--gradiente-azul); color: var(--texto-claro); padding: 15px; text-align: center; } .sidebar-logo { width: 55px; height: 55px; border-radius: 50%; object-fit: cover; } .sidebar .nav-link { color: var(--texto-escuro); padding: 12px 18px; display: flex; align-items: center; font-weight: 500; border-radius: 8px; margin: 4px 10px; transition: var(--transicao); } .sidebar .nav-link i { font-size: 18px; width: 22px; text-align: center; } .sidebar .nav-link.active, .sidebar .nav-link:hover { background: var(--gradiente-azul); color: #fff !important; transform: translateX(4px); } .sidebar-footer { border-top: 1px solid var(--borda-suave); font-size: 13px; padding: 10px; text-align: center; } /* Toggle */ #toggleBtn { position: fixed; top: 12px; left: 260px; background: var(--gradiente-azul); color: white; border: none; border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1200; transition: var(--transicao); } .sidebar.collapsed ~ #toggleBtn { left: 90px; } /* Ajusta o conteúdo */ .sidebar.collapsed ~ .content { margin-left: 100px; transition: var(--transicao); } /* Tema escuro */ [data-tema="dark"] .sidebar { background: var(--fundo-card-escuro); border-right: 1px solid rgba(255, 255, 255, 0.08); color: var(--texto-claro); } [data-tema="dark"] .sidebar .nav-link { color: var(--texto-claro); } [data-tema="dark"] .sidebar .nav-link.active, [data-tema="dark"] .sidebar .nav-link:hover { background: var(--gradiente-azul); color: #fff !important; } /* ====================== NOTIFICAÇÕES (canto superior direito) ====================== */ #notificacoes-container { display: flex; flex-direction: column; gap: 10px; max-width: 320px; right: 18px; top: 18px; z-index: 2100; } .notificacao { /* white-space: nowrap; */ /* 🔹 evita quebra de linha */ overflow: hidden; text-overflow: ellipsis; /* 🔹 adiciona "..." se for muito longa */ display: flex; align-items: center; gap: 8px; background-color: rgba(0, 0, 0, 0.85); color: #fff; border-radius: 10px; padding: 10px 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); backdrop-filter: blur(6px); animation: fadeInDown 0.35s ease; transition: opacity 0.3s ease; max-width: 420px; } /* tipos */ .notificacao.sucesso { background: linear-gradient(90deg,#28a745,#2ecc71); } .notificacao.erro { background: linear-gradient(90deg,#dc3545,#e74c3c); } .notificacao.aviso { background: linear-gradient(90deg,#ff9f1a,#ffc107); } /* ícone */ .notificacao i { font-size: 18px; opacity: .95; } /* texto */ .notificacao span { display: inline-block; font-weight: 600; font-size: 14px; line-height: 1.1; } /* entrada / saída */ @keyframes noti-in { from { transform: translateX(18px) scale(.98); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } } /* tamanho e suavidade aprimorados */ .notificacao { transform: translateX(18px) scale(0.98); opacity: 0; transition: all 0.4s ease; font-size: 15px; padding: 12px 16px; } /* entrada */ .notificacao.show { animation: noti-in 0.4s ease forwards; } /* saída elegante */ .notificacao.hide { animation: noti-out 0.4s ease forwards; } @keyframes noti-out { from { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); } to { opacity: 0; transform: translateX(30px) scale(0.96); filter: blur(3px); } } /* =========================================== 🔸 AUTO-HIDE DA SIDEBAR (ICONE SOMENTE) =========================================== */ /* Quando recolhida */ .sidebar.collapsed { width: 80px; transition: var(--transicao); } /* Some os textos quando recolhido */ .sidebar.collapsed .nav-link span, .sidebar.collapsed .sidebar-title { display: none; opacity: 0; visibility: hidden; transition: var(--transicao); } /* Centraliza os ícones no modo recolhido */ .sidebar.collapsed .nav-link { justify-content: center; padding: 12px 0; } /* Mantém a logo visível, mas menor */ .sidebar.collapsed .sidebar-logo { width: 50px; height: 50px; margin-bottom: 0; } /* Mantém o cabeçalho compacto */ .sidebar.collapsed .sidebar-header { padding: 10px 0; } /* Move o botão de toggle */ .sidebar.collapsed ~ #toggleBtn { left: 100px; } /* Ajusta o conteúdo */ .sidebar.collapsed ~ .content { margin-left: 100px; transition: var(--transicao); } /* =========================================== 🌙 AJUSTES GERAIS PARA TEMA ESCURO =========================================== */ [data-tema="dark"] { background-color: var(--fundo-escuro); color: var(--texto-claro); } /* Textos gerais */ [data-tema="dark"] h1, [data-tema="dark"] h2, [data-tema="dark"] h3, [data-tema="dark"] h4, [data-tema="dark"] h5, [data-tema="dark"] h6, [data-tema="dark"] p, [data-tema="dark"] span, [data-tema="dark"] label, [data-tema="dark"] .form-label, [data-tema="dark"] .fw-semibold, [data-tema="dark"] .fw-bold, [data-tema="dark"] .text-dark { color: var(--texto-claro) !important; } /* Inputs e selects */ [data-tema="dark"] .form-control, [data-tema="dark"] .form-select, [data-tema="dark"] textarea { background-color: #2a2a3b; color: var(--texto-claro); border-color: rgba(255, 255, 255, 0.1); } [data-tema="dark"] .form-control::placeholder, [data-tema="dark"] textarea::placeholder { color: rgba(255, 255, 255, 0.6); } /* Cards */ [data-tema="dark"] .card { background-color: var(--fundo-card-escuro); color: var(--texto-claro); border-color: rgba(255, 255, 255, 0.08); } /* Sidebar */ [data-tema="dark"] .sidebar { background: linear-gradient(180deg, #121826, #0d111f); color: var(--texto-claro); } [data-tema="dark"] .sidebar .nav-link { color: #cfd8dc; } [data-tema="dark"] .sidebar .nav-link.active, [data-tema="dark"] .sidebar .nav-link:hover { background: var(--gradiente-azul); color: #fff !important; } /* Botões */ [data-tema="dark"] .btn, [data-tema="dark"] .btn-cadastrar, [data-tema="dark"] .btn-primary { color: #fff !important; background: var(--gradiente-azul); } [data-tema="dark"] .btn-light { background: rgba(255, 255, 255, 0.1); color: #fff !important; border: none; } /* Títulos e textos brancos em modais */ [data-tema="dark"] .modal-content { background: var(--fundo-card-escuro); color: var(--texto-claro); } /* === Busca / Filtro === */ .search-box { position: relative; display: flex; align-items: center; background: var(--card-bg, #f1f1f1); border-radius: 25px; padding: 4px 10px; transition: all 0.3s ease; } .search-box input { border: none; background: transparent; outline: none; width: 0; opacity: 0; color: var(--text-color, #000); transition: all 0.3s ease; } .search-box.active input { width: 180px; opacity: 1; margin-left: 8px; } .btn-search, .btn-clear { border: none; background: transparent; color: var(--text-color, #000); font-size: 1.2rem; transition: transform 0.2s ease; } .btn-search:hover, .btn-clear:hover { transform: scale(1.1); } .btn-clear { display: none; } .search-box.active .btn-clear { display: inline; } /* === Botão gradiente === */ .btn-gradiente { background: linear-gradient(90deg, #007bff, #00c6ff); border: none; color: white; transition: 0.3s; } .btn-gradiente:hover { opacity: 0.85; } /* === Card das listas === */ .card-tema { background: var(--card-bg, #fff); border: none; border-radius: 12px; box-shadow: 0 3px 8px rgba(0,0,0,0.1); color: var(--text-color, #000); } /* === Tema escuro === */ body[data-tema="dark"] { --card-bg: #1f1f2e; --text-color: #fff; background-color: #14141f !important; color: #fff !important; } body[data-tema="dark"] .form-control, body[data-tema="dark"] .form-select { background-color: #2a2a3b; border: 1px solid #3c3c52; color: #fff; } body[data-tema="dark"] .card-tema { background: #1f1f2e; color: #fff; } /* === Transições === */ .card-tema, .search-box, body { transition: background-color 0.3s ease, color 0.3s ease; } /* ===== BUSCA NA LISTA DE COMANDAS ===== */ .card-header { position: relative; /* garante que a lupa possa se posicionar dentro */ display: flex; align-items: center; justify-content: space-between; height: 42px; overflow: hidden; } /* ===== CONTAINER GERAL ===== */ #buscaComandaContainer { position: absolute; right: 15px; /* canto direito */ top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; } /* ===== BOTÕES (LUPA E X) ===== */ #buscaComandaContainer .btn-transparent { background: transparent; border: none; color: inherit; padding: 6px 8px; cursor: pointer; transition: transform 0.25s ease; } /* clique na lupa dá leve efeito */ #btnToggleBusca:active { transform: scale(0.96); } /* ===== INPUT DE BUSCA ===== */ #buscaComandaContainer input { width: 0; opacity: 0; padding: 6px 10px; height: 30px; font-size: 0.85rem; border: none; border-radius: 20px; color: #000; background-color: rgba(255, 255, 255, 0.92); transform: translateX(20px); max-width: 260px; transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, transform 0.3s ease; } /* ===== QUANDO ATIVA ===== */ #buscaComandaContainer.ativo input { width: 220px !important; opacity: 1 !important; transform: translateX(0); } /* ===== ANIMAÇÃO DA LUPA ===== */ #buscaComandaContainer.ativo #btnToggleBusca i { transform: rotate(90deg) scale(1.15); } /* ===== BOTÃO X ===== */ #btnClearBusca { display: none; background: transparent; border: none; padding: 6px 8px; cursor: pointer; color: inherit; opacity: 0.9; } #buscaComandaContainer.ativo #btnClearBusca { display: inline; } /* ===== AJUSTES DE TEMA ESCURO PARA BUSCA ===== */ [data-tema="dark"] #buscaClienteContainer { background-color: #343a40; /* Cinza escuro para o modo dark (mais claro que o fundo do card) */ } [data-tema="dark"] #buscaClienteContainer:focus-within { background-color: #495057; /* Cinza mais escuro ao focar no modo escuro */ box-shadow: 0 0 6px rgba(255, 255, 255, 0.25); } [data-tema="dark"] #buscaClienteContainer input { background: transparent; border: none; color: var(--texto-claro); flex: 1; padding: 6px 8px; } [data-tema="dark"] #buscaClienteContainer input::placeholder { color: rgba(255, 255, 255, 0.6); } [data-tema="dark"] #buscaClienteContainer .btn-transparent { color: var(--texto-claro); } /* garantir que o X fique visível */ #btnClearBusca { color: inherit; } body[data-tema="dark"] #buscaComandaContainer input { color: #fff; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); } /* ======================== AJUSTE FINAL DAS TABELAS DE COMANDAS ======================== */ /* Aplica sombra suave e bordas consistentes */ .table { background-color: var(--fundo-card-claro) !important; color: var(--texto-escuro); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); /* igual à shadow-soft */ border-radius: 10px; overflow: hidden; border-collapse: separate; border-spacing: 0; } /* Remove linhas brancas internas */ .table td, .table th { background-color: transparent !important; border-color: rgba(0, 0, 0, 0.06); } /* Cabeçalho segue gradiente */ .table thead { background: var(--gradiente-azul); color: #fff; font-weight: 600; } /* Hover suave */ .table tbody tr { transition: background-color 0.2s ease; } .table tbody tr:hover { background-color: rgba(13, 110, 253, 0.06); } /* ======================== MODO ESCURO ======================== */ [data-tema="dark"] .table { background-color: var(--fundo-card-escuro) !important; color: var(--texto-claro); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); } [data-tema="dark"] .table thead { background: var(--gradiente-azul); color: #fff; } [data-tema="dark"] .table td, [data-tema="dark"] .table th { background-color: transparent !important; color: var(--texto-claro) !important; border-color: rgba(255, 255, 255, 0.08); } /* Hover ajustado para contraste em tema escuro */ [data-tema="dark"] .table tbody tr:hover { background-color: rgba(255, 255, 255, 0.05); } /* ======================== AJUSTE FINAL DO TEXTO DE OBSERVAÇÃO ======================== */ .table .text-muted.small.fst-italic { font-size: 0.8rem; opacity: 0.8; margin-top: 4px; display: block; line-height: 1.3; color: rgba(0, 0, 0, 0.65) !important; } /* Modo escuro — texto branco suave e discreto */ [data-tema="dark"] .table .text-muted.small.fst-italic { color: rgba(255, 255, 255, 0.75) !important; opacity: 0.85; } /* ===== BUSCA DE CLIENTES (lupa animada) ===== */ #buscaClienteContainer { background-color: #dee2e6; /* Cinza claro para o modo claro (mais escuro que o branco) */ border-radius: 20px; padding: 4px 10px; display: flex; align-items: center; gap: 6px; transition: all 0.3s ease; } #buscaClienteContainer:focus-within { background-color: #ced4da; /* Cinza um pouco mais escuro ao focar no modo claro */ box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); } #buscaClienteContainer input { background: transparent; border: none; color: var(--texto-escuro); /* Garante cor do texto escura no modo claro */ flex: 1; padding: 6px 8px; } #buscaClienteContainer input:focus { outline: none; box-shadow: none; } #buscaClienteContainer input::placeholder { color: rgba(0, 0, 0, 0.5); /* Placeholder cinza escuro no modo claro */ } #buscaClienteContainer .btn-transparent { background: transparent; border: none; color: #fff; opacity: 0.85; transition: all 0.3s ease; } #buscaClienteContainer .btn-transparent:hover { opacity: 1; transform: rotate(15deg) scale(1.1); } /* === Ajuste de alinhamento apenas para títulos gradiente (sem afetar listas) === */ .card-header.gradiente-azul.titulo, .modal-header.gradiente-azul.titulo { display: flex; align-items: center; justify-content: flex-start; text-align: left !important; } .card-header.gradiente-azul.titulo i, .modal-header.gradiente-azul.titulo i { margin-right: 8px; } /* ==================== GRADIENTE AZUL PADRÃO ==================== */ .gradiente-azul { background: linear-gradient(135deg, #007bff, #00bcd4); } /* ==================== CARDS DE RESUMO FINANCEIRO ==================== */ .card-resumo { border: none; border-radius: 12px; color: var(--texto-escuro); /* Cor do texto padrão */ background: var(--fundo-card-claro); /* Fundo do card padrão */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.25s ease; padding: 1rem; text-align: center; } [data-tema="dark"] .card-resumo { color: var(--texto-claro); background: var(--fundo-card-escuro); } .card-resumo:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); } .card-resumo .fs-4 { font-size: 1.6rem; opacity: 0.95; /* Garante que o container não tenha cor de fundo */ background: none; display: inline-block; color: initial; /* Remove a cor sólida */ } .card-resumo .fs-4 i { /* Aplica o gradiente APENAS ao ícone para a visualização web */ background: var(--gradiente-azul); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; /* Necessário para o background-clip funcionar corretamente */ } .card-resumo h6 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.25rem; } .card-resumo h5 { font-size: 1.2rem; font-weight: 700; margin: 0; } /* ======================== INTERAÇÃO DOS CARDS DE NAVEGAÇÃO ======================== */ .nav-card { cursor: pointer; transition: all 0.25s ease; } .nav-card:hover { transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); filter: brightness(1.08); } .nav-card:active { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); filter: brightness(0.95); } /* ===== Logout (fixo no final da sidebar) ===== */ .sidebar { display: flex; flex-direction: column; height: 100vh; } .logout-section { margin-top: auto; padding: 1rem 0; border-top: 1px solid rgba(255, 255, 255, 0.1); } .logout-section .nav-link { color: #ff4d4d; font-weight: 600; transition: background 0.2s, color 0.2s; } .logout-section .nav-link:hover { background-color: rgba(255, 77, 77, 0.1); color: #fff; border-radius: 8px; } /* =========================================== 🎯 TELA DE LOGIN - PUYOL DUCORTE =========================================== */ .login-container { display: flex; align-items: center; justify-content: center; height: 100vh; background: var(--fundo-claro); transition: var(--transicao); } [data-tema="dark"] .login-container { background: var(--fundo-escuro); } /* ===== CARD PRINCIPAL ===== */ .login-card { position: relative; background: var(--fundo-card-claro); color: var(--texto-escuro); border-radius: 12px; width: 100%; max-width: 400px; padding: 2.5rem 2rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); transition: var(--transicao); text-align: center; } [data-tema="dark"] .login-card { background: var(--fundo-card-escuro); color: var(--texto-claro); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } /* ===== CABEÇALHO ===== */ .login-header { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 2rem; } /* Logo sem círculo — muda conforme o tema via JS */ .login-logo { width: 100px; height: auto; object-fit: contain; margin-bottom: 0.8rem; transition: transform 0.3s ease; } .login-logo:hover { transform: scale(1.05); } .login-title { font-size: 1.8rem; font-weight: 700; margin: 0; background: var(--gradiente-azul); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .login-subtitle { font-size: 0.95rem; color: rgba(0, 0, 0, 0.6); margin-top: 0.2rem; } [data-tema="dark"] .login-subtitle { color: rgba(255, 255, 255, 0.7); } /* ===== FORMULÁRIO ===== */ .login-form { display: flex; flex-direction: column; gap: 1rem; } .form-group { display: flex; flex-direction: column; gap: 0.4rem; } label { font-weight: 500; font-size: 0.9rem; text-align: left; } input.form-control { width: 100%; padding: 0.7rem 0.9rem; border-radius: 8px; border: 1px solid var(--borda-suave); background-color: var(--fundo-card-claro); color: var(--texto-escuro); transition: var(--transicao); font-size: 0.95rem; } [data-tema="dark"] input.form-control { background-color: #2a2a3b; color: var(--texto-claro); } .login-footer { margin-top: 1.5rem; font-size: 0.85rem; color: rgba(0, 0, 0, 0.5); } [data-tema="dark"] .login-footer { color: rgba(255, 255, 255, 0.5); } .login-footer a { color: var(--azul); font-weight: 600; } .login-footer a:hover { text-decoration: underline; } /* ===== TEMA ESCURO - AJUSTES DE INPUTS ===== */ [data-tema="dark"] .form-control:focus, [data-tema="dark"] .form-select:focus { background-color: #2a2a3b; color: var(--texto-claro); border-color: var(--ciano); box-shadow: 0 0 0 0.25rem rgba(0, 188, 212, 0.25); } /* ===== AJUSTES PARA LISTA DE SERVIÇOS SELECIONADOS ===== */ #servicosSelecionados .list-group-item, #editarServicosSelecionados .list-group-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; font-size: 0.9rem; } #servicosSelecionados .list-group-item button, #editarServicosSelecionados .list-group-item button { background: none; border: none; color: #6610f2; /* Indigo para Esgotado */ font-size: 1.1rem; cursor: pointer; padding: 0; margin-left: 10px; transition: color 0.2s; } #servicosSelecionados .list-group-item button:hover, #editarServicosSelecionados .list-group-item button:hover { color: #c82333; } /* ===== AJUSTES PARA LISTA DE CLIENTES/BARBEIROS (SELECT2) ===== */ .select2-container--bootstrap-5 .select2-selection--single { padding: 0.7rem 0.9rem !important; height: auto !important; border-radius: 8px !important; font-size: 0.95rem !important; } .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { padding: 0 !important; line-height: 1.5 !important; } .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow { height: 100% !important; top: 0 !important; right: 0.9rem !important; } /* Tema escuro para Select2 */ [data-tema="dark"] .select2-container--bootstrap-5 .select2-selection--single { background-color: #2a2a3b !important; color: var(--texto-claro) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } [data-tema="dark"] .select2-container--bootstrap-5 .select2-dropdown { background-color: #2a2a3b !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } [data-tema="dark"] .select2-container--bootstrap-5 .select2-results__option { color: var(--texto-claro) !important; } [data-tema="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--gradiente-azul) !important; color: #fff !important; } /* ===== AJUSTES PARA LISTA DE CLIENTES/PACOTES ===== */ /* =========================================== 👁️ SPOILER PARA GRÁFICOS =========================================== */ .grafico-spoiler { position: relative; overflow: hidden; } .grafico-spoiler .grafico-conteudo { transition: filter 0.5s ease; } .grafico-spoiler:not(.revelado) .grafico-conteudo { filter: blur(20px); /* Blur mais forte */ pointer-events: none; /* Impede interação com o gráfico borrado */ } .grafico-spoiler .grafico-icone-oculto { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3rem; color: rgba(255, 255, 255, 0.8); background: transparent; /* Removido o fundo */ border-radius: 0; /* Removido o border-radius */ padding: 0; /* Removido o padding */ cursor: pointer; z-index: 10; transition: opacity 0.3s ease, transform 0.3s ease; filter: none; /* Garante que o ícone não seja borrado */ } .grafico-spoiler:not(.revelado) .grafico-icone-oculto { opacity: 1; transform: translate(-50%, -50%) scale(1); } .grafico-spoiler.revelado .grafico-icone-oculto { opacity: 0; transform: translate(-50%, -50%) scale(0.8); pointer-events: none; } .grafico-spoiler .grafico-icone-oculto:hover { color: #fff; background: transparent; /* Mantém o fundo transparente no hover */ } /* Ajuste para o tema escuro */ [data-tema="dark"] .grafico-spoiler .grafico-icone-oculto { color: rgba(255, 255, 255, 0.8); /* Cor do ícone no tema escuro */ background: transparent; /* Removido o fundo */ } [data-tema="dark"] .grafico-spoiler .grafico-icone-oculto:hover { color: #fff; /* Cor do ícone no hover do tema escuro */ background: transparent; /* Mantém o fundo transparente no hover */ } /* Ajuste para o card-body que contém o canvas */ .grafico-spoiler .card-body { position: relative; } /* Garante que o canvas não seja afetado pelo blur do card-body */ .grafico-spoiler .card-body > canvas { transition: filter 0.5s ease; } .grafico-spoiler:not(.revelado) .card-body > canvas { filter: blur(20px); /* Blur mais forte */ } /* O ícone fica transparente e desativado quando revelado, mas o clique no card-body o oculta novamente */ /* Fim dos estilos de Spoiler para Gráficos */ .table-responsive { border-radius: 10px; overflow: hidden; overflow-x: hidden; /* Adicionado para remover a barra de rolagem horizontal */ } /* Fixa o cabeçalho da tabela */ .table-sticky-header thead th { position: sticky; top: 0; z-index: 10; background: var(--gradiente-azul); } /* ===== AJUSTES PARA TABELA DE COMANDAS (LISTA DE COMANDAS) ===== */ /* Ajuste para que a tabela ocupe 100% do container com scroll */ .comanda-list-container { max-height: 350px; /* Altura fixa para o scroll */ overflow-y: auto; /* Adiciona barra de rolagem vertical */ margin-bottom: 1rem; /* Espaçamento após o container */ } /* O cabeçalho da tabela não precisa mais ser "sticky" pois não há scroll interno */ /* Remove quebra de linha em todas as células da tabela */ .comanda-list-container table td, .comanda-list-container table th { /* white-space: nowrap; */ overflow: hidden; text-overflow: ellipsis; } /* Ajuste específico para a coluna de serviços, permitindo um pouco mais de espaço se necessário, mas ainda evitando quebras */ .comanda-list-container table td:nth-child(5) { /* Coluna de Serviços */ max-width: 200px; /* Limita a largura para que o `text-overflow: ellipsis` funcione melhor */ /* white-space: nowrap; */ overflow: hidden; text-overflow: ellipsis; } /* Ajuste para o container interno da lista, que é onde o JS insere o conteúdo */ #comandaListPendentes, #comandaListConcluidas { display: block; /* Garante que o container interno se comporte corretamente */ } /* Ajuste para a tabela dentro do container */ .comanda-list-container .table { margin-bottom: 0; } /* O cabeçalho da tabela não precisa mais ser "sticky" pois não há scroll interno */ /* Ajuste para o corpo da tabela dentro do container */ .comanda-list-container .table tbody { display: table-row-group; } /* =========================================== 📋 TABELAS =========================================== */ /* 1. Remover quebra de linha nas células */ .table td, .table th { /* white-space: nowrap; */ /* Impede quebra de linha */ } /* 2. Adicionar scroll e altura fixa ao container da lista */ .comanda-list-container { max-height: 300px; /* Altura fixa para o scroll */ overflow-y: auto; /* Adiciona barra de rolagem vertical */ margin-bottom: 1rem; /* Espaçamento após o container */ } /* 3. Garantir que a tabela se ajuste dentro do container */ .comanda-list-container table { width: 100%; margin-bottom: 0; /* Remove margem inferior padrão do Bootstrap */ } .comanda-servicos { white-space: normal; /* Permite quebra de linha no conteúdo do serviço */ } /* Regra geral para células da tabela (removendo o nowrap geral que estava causando o corte) */ .table td, .table th { white-space: normal; /* Volta ao normal para evitar corte */ } /* =========================================== 📋 TABELAS =========================================== */ /* 1. Altura fixa e scroll para o card principal (Lista de Comandas) */ .card-scroll-content { max-height: 70vh; /* Altura máxima para o card (70% da altura da tela) */ overflow-y: auto; /* Adiciona barra de rolagem vertical */ padding-right: 10px !important; /* Espaço para a barra de rolagem customizada */ } /* 2. Customização da barra de rolagem (WebKit - Chrome, Safari) */ .card-scroll-content::-webkit-scrollbar { width: 8px; } .card-scroll-content::-webkit-scrollbar-track { background: var(--fundo-card-escuro); /* Fundo da barra de rolagem */ border-radius: 10px; } .card-scroll-content::-webkit-scrollbar-thumb { background: var(--gradiente-azul); /* Cor da barra de rolagem */ border-radius: 10px; } /* 3. Ajuste para a coluna de serviços (permitir quebra de linha, mas com limite) */ .table td:nth-child(5) { /* Coluna de Serviços */ white-space: normal !important; /* Permite quebra de linha */ max-width: 250px; /* Limite de largura para evitar que a coluna fique muito larga */ word-wrap: break-word; /* Garante que palavras longas quebrem */ } .comanda-servicos { white-space: normal; /* Permite quebra de linha no conteúdo do serviço */ } /* Ajuste para o container interno da lista, que é onde o JS insere o conteúdo */ #comandaListPendentes, #comandaListConcluidas { display: block; /* Garante que o container interno se comporte corretamente */ } /* Ajuste para a tabela dentro do container */ .table { margin-bottom: 0; } /* Ajuste para o corpo da tabela dentro do container */ .table tbody { display: table-row-group; } /* Regra específica para a coluna de serviços dentro da célula */ .servicos-cell { white-space: normal; /* Permite quebra de linha */ word-wrap: break-word; } /* Ajuste para o texto de uso de pacote */ .observacao.text-info { white-space: normal; } /* Garante que o texto das descrições de comanda e logs seja claro no tema escuro */ [data-tema="dark"] .card-body p, [data-tema="dark"] .card-body div { color: var(--texto-claro) !important; } /* Ajuste específico para textos que usam a classe text-muted ou similar */ [data-tema="dark"] .text-muted, [data-tema="dark"] .small { color: rgba(255, 255, 255, 0.7) !important; } .table { border: none; border-radius: 10px; overflow: hidden; } .table thead { background: var(--gradiente-azul); color: white; font-weight: 600; } .table tbody tr { transition: var(--transicao); } .table tbody tr:hover { background: rgba(13, 110, 253, 0.05); } [data-tema="dark"] .table tbody tr:hover { background: rgba(255, 255, 255, 0.05); } /* =========================================== 🔹 ATALHOS RÁPIDOS - HOVER =========================================== */ .nav-card-hover { transition: var(--transicao); position: relative; overflow: hidden; } .nav-card-hover::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--gradiente-azul); opacity: 0; transition: var(--transicao); z-index: 1; } .nav-card-hover:hover::before { opacity: 1; } .nav-card-hover:hover { color: white !important; transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .nav-card-hover:hover .card-body * { color: white !important; z-index: 2; position: relative; } .nav-card-hover .card-body i { transition: var(--transicao); } .nav-card-hover:hover .card-body i { transform: scale(1.1); } [data-tema="dark"] .nav-card-hover:hover { background: transparent; /* Garante que o gradiente do ::before seja o único fundo */ } /* =========================================== Customização para 5 colunas =========================================== */ .col-5-custom { flex: 0 0 auto; width: 20%; /* 100% / 5 = 20% */ } /* Garante que em telas pequenas (sm) ele ainda quebre, mas em md+ fique em 5 colunas */ @media (min-width: 768px) { .col-md-5-custom { flex: 0 0 auto; width: 20%; } } /* Garante que o flex-nowrap funcione e os cards não quebrem */ #atalhos-rapidos { flex-wrap: nowrap; } /* Ajuste para o espaçamento entre os cards em flex-nowrap */ #atalhos-rapidos > .col-5-custom { padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); } /* Ajuste para o primeiro e último item, para manter o espaçamento do row */ #atalhos-rapidos > .col-5-custom:first-child { padding-left: var(--bs-gutter-x); } #atalhos-rapidos > .col-5-custom:last-child { padding-right: var(--bs-gutter-x); } /* =========================================== FINAL DO ARQUIVO =========================================== */ /* =========================================== 🔒 LOGIN PAGE STYLES =========================================== */ /* Estilo para o input-group no login */ .login-form .input-group-text { background-color: var(--fundo-card-claro); border-color: var(--borda-suave); color: var(--texto-escuro); padding: 0.75rem 1rem; border-radius: 6px 0 0 6px; transition: var(--transicao); } [data-tema="dark"] .login-form .input-group-text { background-color: var(--fundo-card-escuro); border-color: rgba(255, 255, 255, 0.1); color: var(--texto-claro); } /* Efeito hover no botão de login */ .btn-login.gradiente-azul { transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; } .btn-login.gradiente-azul::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.15); /* Brilho suave */ opacity: 0; transition: opacity 0.3s ease; z-index: -1; } .btn-login.gradiente-azul:hover::after { opacity: 1; } /* =========================================== 🔔 NOTIFICAÇÕES CUSTOMIZADAS (Developer Page) =========================================== */ .custom-toast { /* Estilo para parecer mais com um Toast/Snackbar */ padding: 0.5rem 1rem; margin-bottom: 0.5rem; border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); max-width: 350px; /* Limita a largura para não ser muito grande */ /* Garante que o texto não quebre linha e não seja cortado */ /* white-space: nowrap; */ /* Impede a quebra de linha */ overflow: hidden; /* Esconde o que ultrapassar */ text-overflow: ellipsis; /* Adiciona '...' ao final */ display: flex; align-items: center; justify-content: space-between; } .custom-toast .btn-close { /* Ajusta o botão de fechar */ margin-left: 1rem; padding: 0; line-height: 1; opacity: 0.8; } /* Ajuste para o tema escuro */ [data-tema="dark"] .custom-toast { box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1); } /* =========================================== 🛠️ AJUSTES PÁGINA DEVELOPER =========================================== */ .dev-util-btn { width: 100px; /* Largura fixa para padronizar */ text-align: center; flex-shrink: 0; /* Impede que o botão encolha */ } /* Garante que o texto do utilitário não seja cortado */ .card-body .d-flex > span { flex-grow: 1; /* white-space: nowrap; */ overflow: hidden; text-overflow: ellipsis; } /* ================================ BOTÕES DO DEVELOPER - Tema Azul Estilo Original ================================ */ body[data-tema][data-tema] .dev-util-btn, body[data-tema][data-tema] .card .btn.btn-info, body[data-tema][data-tema] .card .btn.btn-primary, body[data-tema][data-tema] .card .btn.btn-warning, body[data-tema][data-tema] .card .btn.btn-danger, body[data-tema][data-tema] .card .btn.btn-success, body[data-tema][data-tema] .card .btn.btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; /* espaço entre ícone e texto */ background: linear-gradient(90deg, #007bff, #00c6ff); border: none; color: #fff !important; transition: all 0.25s ease-in-out; box-shadow: 0 3px 6px rgba(0, 123, 255, 0.3); font-weight: 500; /* restaura formato e tamanho original */ padding: 6px 14px; border-radius: 6px; height: auto; min-height: 34px; } body[data-tema][data-tema] .card .btn:hover { background: linear-gradient(90deg, #00aaff, #007bff); transform: translateY(-1px); box-shadow: 0 5px 10px rgba(0, 150, 255, 0.4); } body[data-tema][data-tema] .card .btn:focus, body[data-tema][data-tema] .card .btn:active { outline: none; box-shadow: 0 0 0 3px rgba(0, 150, 255, 0.3); } /* Ícones centralizados e proporcionais */ body[data-tema][data-tema] .card .btn i { margin: 0; font-size: 0.9rem; } .card-header.d-flex.align-items-center { justify-content: flex-start !important; /* 🔹 força alinhamento à esquerda */ gap: 8px; /* espaço entre ícone e texto */ text-align: left; } /* =========================================== 📱 RESPONSIVIDADE =========================================== */ /* Ajustes para telas menores que 992px (tablets e celulares) */ @media (max-width: 991.98px) { /* Oculta a sidebar por padrão em telas pequenas */ .sidebar { left: -240px; /* Move para fora da tela */ width: 240px; z-index: 1030; /* Acima do conteúdo */ box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); } /* Ajusta o conteúdo para ocupar 100% da largura */ .content { margin-left: 0; padding-top: 60px; /* Espaço para o novo header/navbar */ } /* Classe para mostrar a sidebar (será ativada via JS) */ .sidebar.show { left: 0; } /* Oculta o botão de toggle fixo, pois usaremos um botão na navbar */ #toggleBtn { display: none !important; } /* Ajuste para os cards de atalho */ .nav-cards-row { flex-wrap: wrap; /* Permite quebra de linha */ overflow-x: hidden; /* Remove scroll horizontal desnecessário */ } .nav-cards-row .col-md-2 { width: 50%; /* 2 cards por linha */ margin-bottom: 1rem; } /* Ajuste para os cards de resumo */ .resumo-card { margin-bottom: 1rem; } /* Ajuste para os gráficos */ .col-md-6 { width: 100%; } } /* Ajustes para telas muito pequenas (celulares) */ @media (max-width: 575.98px) { .nav-cards-row .col-sm-6 { width: 100%; /* 1 card por linha */ } .resumo-card { width: 100%; /* 1 card por linha */ } } /* Estilos para a Navbar Mobile */ #mobile-navbar { height: 56px; /* Altura padrão do Bootstrap */ z-index: 1020; background-color: transparent !important; /* ✅ Remove o fundo branco */ border-bottom: none !important; /* ✅ Remove qualquer borda inferior */ box-shadow: none !important; /* ✅ Remove sombra */ } /* Overlay para fechar a sidebar no mobile */ .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1029; display: none; transition: opacity 0.3s ease; opacity: 0; } .sidebar-overlay.show { display: block; opacity: 1; } /* Ajuste para o conteúdo quando a navbar mobile estiver ativa */ @media (max-width: 991.98px) { .content { padding-top: 76px !important; /* Ajusta o padding para a navbar fixa */ } } /* =========================================== FIX: FORÇAR ROLAGEM HORIZONTAL DA TABELA (Fallback caso table-responsive não funcione no dispositivo) =========================================== */ .card-body .table { /* min-width: 900px; Removido para permitir que a tabela se ajuste ao card */ } .card-body .table-responsive { overflow-x: hidden; overflow-x: hidden !important; /* Removido para evitar rolagem horizontal indesejada */ } /* ========================== 🔹 Cabeçalho Gradiente ========================== */ .header-gradient { background: linear-gradient(90deg, #007bff, #00c6ff); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 0 10px rgba(0, 183, 255, 0.3); } .header-gradient h3 { color: #fff; font-weight: 600; text-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } /* 🔹 Ícones do filtro / ação */ .filtro-icone { cursor: pointer; font-size: 1.2rem; color: rgba(255, 255, 255, 0.6); transition: all 0.2s ease; } .filtro-icone:hover { color: #fff; text-shadow: 0 0 6px #00bfff; transform: scale(1.1); } .filtro-icone.ativo { color: #fff; text-shadow: 0 0 8px #00d5ff; } /* 🔹 Borda gradiente (cards e contornos) */ .border-gradient { border: 2px solid transparent; border-image: linear-gradient(90deg, #007bff, #00c6ff) 1; border-radius: 12px; } /* ======== Gradiente azul principal ======== */ .header-gradient { background: linear-gradient(90deg, #007bff, #00d4ff); color: #fff; font-weight: 600; } /* ======== Bordas com gradiente ======== */ .border-gradient { border: 2px solid transparent; border-radius: 12px; background: linear-gradient(var(--fundo-principal, #0d0f1a), var(--fundo-principal, #0d0f1a)) padding-box, linear-gradient(90deg, #007bff, #00d4ff) border-box; } /* ======== Header interno de cards ======== */ .header-card-gradient { background: linear-gradient(90deg, #007bff, #00d4ff); font-weight: 600; font-size: 0.95rem; } /* ======== Botão gradiente ======== */ .btn-gradient { background: linear-gradient(90deg, #007bff, #00d4ff); border: none; color: #fff; font-weight: 600; border-radius: 10px; transition: 0.2s ease; } .btn-gradient:hover { opacity: 0.9; transform: scale(1.03); } /* ======== Ícones de filtro ======== */ #filtroPagamentoIcones .filtro-icone { font-size: 1.3rem; cursor: pointer; opacity: 0.6; transition: all 0.25s ease; background: #1b1e2a; border-radius: 50%; padding: 8px; } #filtroPagamentoIcones .filtro-icone:hover { transform: scale(1.1); opacity: 1; } #filtroPagamentoIcones .filtro-icone[data-filtro="todos"] { color: #bbb; } #filtroPagamentoIcones .filtro-icone[data-filtro="true"] { color: #17a2b8; /* Um azul-ciano para "Pago" */ } #filtroPagamentoIcones .filtro-icone[data-filtro="false"] { color: #007bff; /* Um azul mais vibrante para "Não Pago" */ } #filtroPagamentoIcones .filtro-icone.ativo { box-shadow: 0 0 5px currentColor; opacity: 1; } /* Tema escuro para Select2 */ [data-tema="dark"] .select2-container--bootstrap-5 .select2-selection--single { background-color: #2a2a3b !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } [data-tema="dark"] .select2-container--bootstrap-5 .select2-dropdown { background-color: #2a2a3b !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } [data-tema="dark"] .select2-container--bootstrap-5 .select2-results__option { color: #ffffff !important; } [data-tema="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted { background-color: #007bff !important; /* Gradiente azul */ color: #fff !important; } [data-tema="dark"] .select2-container--bootstrap-5 .select2-selection__clear { color: #ffffff !important; } /* === SERVIÇOS SELECIONADOS (visual azul gradiente igual comanda) === */ .servico-selecionado { background: linear-gradient(135deg, #007bff, #00c3ff); color: #fff; border: none !important; box-shadow: 0 0 10px rgba(0, 195, 255, 0.4); transition: all 0.25s ease-in-out; } .servico-selecionado:hover { transform: scale(1.02); box-shadow: 0 0 15px rgba(0, 195, 255, 0.7); } .servico-selecionado .btn { background: rgba(255, 255, 255, 0.2); border: none; color: #fff; transition: all 0.2s; } .servico-selecionado .btn:hover { background: rgba(255, 255, 255, 0.35); transform: scale(1.1); } /* === Gradiente azul padrão === */ .gradiente-azul { background: linear-gradient(135deg, #007bff, #00c3ff); color: #fff !important; border: none; } /* === Serviços dentro do modal de edição da comanda === */ .item-servico-edicao { background: linear-gradient(135deg, #007bff, #00c3ff); color: #fff !important; border-radius: 10px; border: none !important; display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; margin-bottom: 6px; box-shadow: 0 0 10px rgba(0, 195, 255, 0.4); transition: all 0.2s ease; } .item-servico-edicao:hover { transform: scale(1.02); box-shadow: 0 0 15px rgba(0, 195, 255, 0.6); } .item-servico-edicao .btn { background: rgba(255, 255, 255, 0.2); border: none; color: #fff; transition: 0.2s; } .item-servico-edicao .btn:hover { background: rgba(255, 255, 255, 0.35); transform: scale(1.1); } /* === FIX: Corrigir cards invertidos entre light / dark === */ /* 1) Estado padrão (tema claro) -> cards claros */ :root, body:not([data-tema="dark"]) { --card-bg-corrigido: var(--fundo-card-claro); --card-text-corrigido: var(--texto-escuro); --card-border-corrigido: rgba(0,0,0,0.06); --card-shadow-corrigido: 0 4px 14px rgba(0,0,0,0.06); } /* 2) Quando body indicar tema escuro -> cards escuros */ body[data-tema="dark"] { --card-bg-corrigido: var(--fundo-card-escuro); --card-text-corrigido: var(--texto-claro); --card-border-corrigido: rgba(255,255,255,0.06); --card-shadow-corrigido: 0 6px 20px rgba(0,0,0,0.45); } /* 3) Aplicar correção aos cards e modais (usa as variáveis acima) */ .card-tema, .card, .modal-content { background: var(--card-bg-corrigido) !important; color: var(--card-text-corrigido) !important; border: 1px solid var(--card-border-corrigido) !important; box-shadow: var(--card-shadow-corrigido) !important; } /* 4) Cabeçalhos dos cards e modais permanecem com gradiente e texto branco */ .header-card-gradient, .card-header.gradiente-azul, .modal-header.gradiente-azul { background: linear-gradient(135deg, #007bff, #00c6ff) !important; color: #fff !important; } /* 5) Ajustes visuais para botões/detalhes dentro dos cards */ .card-tema .text-muted, .card .text-muted { color: rgba(0,0,0,0.6) !important; } body[data-tema="dark"] .card-tema .text-muted, body[data-tema="dark"] .card .text-muted { color: rgba(255,255,255,0.72) !important; } /* 6) Garante que elementos com classes de utilidade bg-white/bg-dark não invertam o layout */ .card.bg-white, .card.bg-light { background: var(--card-bg-corrigido) !important; color: var(--card-text-corrigido) !important; } /* Ajuste para espaçamento dos botões de ação na lista de pacotes */ #pacotesList .btn-primary { margin-right: 8px; } /* =========================================== 🔍 AJUSTE DE VISIBILIDADE DO PLACEHOLDER =========================================== */ /* Garante que o placeholder do campo de busca de clientes seja visível no tema claro */ #inputBuscaCliente::placeholder { color: rgba(33, 37, 41, 0.5) !important; /* Cinza escuro semi-transparente */ } #inputBuscaCliente:-ms-input-placeholder { color: rgba(33, 37, 41, 0.5) !important; } #inputBuscaCliente::-ms-input-placeholder { color: rgba(33, 37, 41, 0.5) !important; } /* Garante que o tema escuro continue funcionando perfeitamente */ [data-tema="dark"] #inputBuscaCliente::placeholder { color: rgba(255, 255, 255, 0.5) !important; /* Branco semi-transparente */ } [data-tema="dark"] #inputBuscaCliente:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5) !important; } [data-tema="dark"] #inputBuscaCliente::-ms-input-placeholder { color: rgba(255, 255, 255, 0.5) !important; } /* Estilos para o novo cabeçalho do relatório */ .relatorio-header { background: var(--gradiente-azul); color: var(--texto-claro); padding: 2rem 1.5rem; border-radius: 12px; margin-bottom: 2rem; text-align: center; box-shadow: 0 8px 25px rgba(0, 123, 255, 0.2); } .relatorio-header img { width: 70px; height: 70px; margin-bottom: 1rem; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.5); } .relatorio-header h2 { font-size: 2.2rem; font-weight: 700; margin-bottom: 0.5rem; } .relatorio-header p { font-size: 1rem; opacity: 0.9; margin-bottom: 0; } /* Estilos modernizados para os cards de resumo */ .row.row-cols-lg-5 { /* Força a não quebra de linha para o PDF */ flex-wrap: nowrap !important; overflow-x: hidden !important; } .row.row-cols-lg-5 > .col { /* Garante que cada card ocupe exatamente 20% */ flex: 0 0 20% !important; max-width: 20% !important; } .card-resumo h6 { /* Impede a quebra de linha no título do card */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-resumo h5 { /* Reduz um pouco o tamanho da fonte do valor para caber melhor */ font-size: 1.2rem; } .card-resumo { background: #fff; color: var(--texto-escuro); border-radius: 12px; padding: 1.5rem; text-align: center; transition: all 0.3s ease; border: 1px solid var(--borda-suave); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; justify-content: space-between; height: 100%; /* Garante que todos os cards tenham a mesma altura */ } .card-resumo:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } .card-resumo .fs-4 { font-size: 2rem !important; color: var(--azul); margin-bottom: 0.75rem; } .card-resumo h6 { font-size: 0.9rem; font-weight: 500; color: #6c757d; margin-bottom: 0.5rem; } .card-resumo h5 { font-size: 1.75rem; font-weight: 700; color: var(--texto-escuro); margin-bottom: 0; } [data-tema="dark"] .card-resumo { background: var(--fundo-card-escuro); color: var(--texto-claro); } [data-tema="dark"] .card-resumo h5, [data-tema="dark"] .card-resumo h6 { color: var(--texto-claro); } /* Ajuste para a fonte */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); body { font-family: 'Inter', sans-serif; } /* =========================================== 💰 AJUSTES FINANCEIRO (CARDS DE RESUMO) =========================================== */ /* Estilo para o card de resumo (financeiro) */ .card-resumo { /* Torna o card mais compacto */ padding: 10px; text-align: center; height: 100%; /* Garante que todos tenham a mesma altura */ display: flex; flex-direction: column; justify-content: center; align-items: center; } /* Ícone menor */ .card-resumo .fa-solid, .card-resumo .fas { font-size: 1.5rem !important; /* Ícone um pouco menor */ margin-bottom: 5px; /* Aplica o gradiente como cor do ícone */ background: var(--gradiente-azul); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } [data-tema="dark"] .card-resumo .fa-solid, [data-tema="dark"] .card-resumo .fas { /* O gradiente já é aplicado acima, não precisa de regra específica para o tema dark */ } /* Título menor */ .card-resumo h6 { font-size: 0.8rem; /* Título bem menor */ margin-bottom: 2px !important; color: #6c757d; /* Cor cinza para o título */ } [data-tema="dark"] .card-resumo h6 { color: #adb5bd; } /* Valor principal */ .card-resumo h5 { font-size: 1rem; /* Valor principal menor */ font-weight: 700; margin-bottom: 0 !important; } /* =========================================== 🖨️ AJUSTES PARA IMPRESSÃO / EXPORTAÇÃO PDF =========================================== */ @media print { /* Força a cor azul sólida nos ícones dos cards de resumo para evitar o problema do gradiente no PDF */ .card-resumo .fs-4 i { color: var(--azul) !important; background: none !important; -webkit-text-fill-color: initial !important; } /* Impede a quebra de página dentro das linhas da tabela */ .table tbody tr { page-break-inside: avoid !important; break-inside: avoid !important; } } /* =========================================== ✅ ESTILOS DE FILTRO DE PACOTES =========================================== */ .filtro-icone { font-size: 1.5rem; /* Aumenta o tamanho do ícone */ cursor: pointer; transition: var(--transicao); padding: 5px; /* Adiciona um padding para a área de clique */ border-radius: 50%; /* Torna o fundo circular */ opacity: 0.6; /* Opacidade padrão para inativos */ color: var(--texto-claro); /* Cor do ícone no cabeçalho azul */ } .filtro-icone:hover { opacity: 0.8; transform: scale(1.05); } /* Estilo para o ícone ATIVO (selecionado) */ .filtro-icone.ativo { opacity: 1; /* Adiciona um fundo sutil para destacar */ background-color: rgba(255, 255, 255, 0.2); box-shadow: 0 0 3px rgba(255, 255, 255, 0.3); /* Sombra suave */ } /* Estilos específicos para os ícones de status */ /* Ícone de Todos (fa-layer-group) */ .filtro-icone[data-filtro="todos"] { /* Cor neutra, talvez um cinza claro */ color: #cfd8dc; } /* Ícone de Pago (fa-circle-check) */ .filtro-icone[data-filtro="true"] { /* Cor de sucesso */ color: #17a2b8; /* Um azul-ciano para "Pago" */ } /* Ícone de Não Pago (fa-circle-exclamation) */ .filtro-icone[data-filtro="false"] { /* Cor de aviso */ color: #007bff; /* Um azul mais vibrante para "Não Pago" */ } /* Ajuste para o tema escuro (se necessário, mas o filtro está dentro de um header gradiente) */ [data-tema="dark"] .filtro-icone { /* Mantém o estilo, pois o pai já é escuro/gradiente */ color: var(--texto-claro); } /* Ícone de Esgotado (fa-hourglass-end) */ .filtro-icone[data-filtro="esgotado"] { /* Cor de alerta/esgotado, por exemplo, um vermelho suave */ color: #6610f2; /* Indigo para Esgotado */ } /* =========================================== 💠 UTILITÁRIOS =========================================== */ /* Estilo para listas com scroll e altura fixa */ .scroll-list { overflow-y: auto; padding-right: 5px; /* Espaço para o scrollbar */ } /* Scrollbar personalizado (Webkit) */ .scroll-list::-webkit-scrollbar { width: 8px; } .scroll-list::-webkit-scrollbar-thumb { background: var(--gradiente-azul); /* Cor azul gradiente */ border-radius: 4px; } .scroll-list::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); /* Fundo claro para o track */ } .text-gradient { background: var(--gradiente-azul); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .shadow-soft { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } .border-rounded { border-radius: 12px; } /* =========================================== 💰 EFEITO SPOILER PARA LUCRO (Versão 2) =========================================== */ .lucro-spoiler { position: relative; cursor: pointer; height: 36px; /* Altura fixa para evitar pulo de layout */ display: flex; align-items: center; justify-content: center; } /* O valor do lucro */ .lucro-spoiler .lucro-valor { opacity: 0; /* Oculto por padrão */ transition: opacity 0.3s ease; } /* O ícone de olho fechado */ .lucro-spoiler .lucro-icone-oculto { position: absolute; font-size: 1.5rem; color: white; /* Cor do ícone */ opacity: 1; /* Visível por padrão */ transition: opacity 0.3s ease; } /* Estado Revelado: Mostrar o valor e ocultar o ícone */ .lucro-spoiler.revelado .lucro-valor { opacity: 1; } .lucro-spoiler.revelado .lucro-icone-oculto { opacity: 0; pointer-events: none; /* Impede o clique no ícone quando revelado */ } /* =========================================== 📅 MELHORIA DO DATE PICKER NATIVO (Corrigido) =========================================== */ /* 1. Estiliza o ícone do calendário no input (Webkit) */ .form-control[type="date"]::-webkit-calendar-picker-indicator { /* Garante que o ícone seja visível */ opacity: 1; cursor: pointer; /* Tenta forçar a cor do ícone para o tema claro */ color: var(--texto-escuro); /* Aumenta o tamanho do ícone para melhor visualização */ font-size: 1.2rem; } /* 1.1. Estiliza o ícone do calendário no input (Webkit) - Tema Escuro */ [data-tema="dark"] .form-control[type="date"]::-webkit-calendar-picker-indicator { /* Força a cor do ícone para o tema escuro */ filter: invert(1); /* Inverte a cor do ícone para branco */ color: var(--texto-claro); /* Tenta definir a cor do ícone */ } /* 2. Estiliza o input para garantir que o texto fique visível no tema escuro */ [data-tema="dark"] .form-control[type="date"] { color-scheme: dark; /* Sugere ao navegador que use o tema escuro para o pop-up */ color: var(--texto-claro); /* Garante que o texto digitado seja claro */ } /* 3. Garante que o texto no tema claro seja escuro */ .form-control[type="date"] { color: var(--texto-escuro); } /* ========================================================== 🔵 SWITCH TIPO BOTÃO — IGUAL AO GERAR RELATORIO (switch redondo, CARD com raio igual ao botão) ========================================================== */ .switch-btn { display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, #007bff, #00c6ff); border: none; border-radius: 10px; /* <-- IGUAL AO BOTÃO */ color: #fff; font-weight: 600; height: 35px; padding: 0 14px; box-shadow: 0 3px 9px rgba(0,0,0,0.25); cursor: pointer; user-select: none; transition: .25s ease-in-out; } .switch-btn:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 5px 12px rgba(0,0,0,0.30); } /* esconde input */ .switch-btn input { display: none; } /* =============================== SWITCH INTERNO (CONTINUA REDONDO) ================================ */ .switch-track { width: 34px; height: 18px; border-radius: 20px; /* <-- REDONDO */ background: rgba(255,255,255,0.35); position: relative; transition: .25s ease; } .switch-knob { width: 14px; height: 14px; background: white; border-radius: 50%; /* <-- BOLINHA REDONDA */ position: absolute; top: 50%; left: 2px; transform: translateY(-50%); transition: .25s ease; box-shadow: 0 0 6px rgba(255,255,255,0.7); } /* ativado */ .switch-btn input:checked + .switch-track { background: white; } .switch-btn input:checked + .switch-track .switch-knob { left: 18px; background: #00c6ff; box-shadow: 0 0 6px rgba(0,198,255,0.9); } /* texto */ .switch-title { font-size: 0.75rem; margin: 0; } /* BOTÃO ON/OFF DE INCLUIR PACOTES */ #btnIncluirPacotes.ativado { background: linear-gradient(90deg, #0051ff, #0084ff) !important; color: #fff !important; transform: scale(1.04); } #btnIncluirPacotes i { transition: transform 0.25s ease; } #btnIncluirPacotes.ativado i { transform: rotate(20deg); } .badge-pacote { background: linear-gradient(90deg, #0d6efd, #00bcd4); color: #fff; font-size: 0.75rem; padding: 3px 8px; border-radius: 12px; font-weight: 600; margin-left: 5px; } /* Ajustes para a barra de navegação móvel */ @media (max-width: 991.98px) { /* ✅ Oculta completamente a navbar mobile */ #mobile-navbar { display: none !important; } /* ✅ Ajusta o padding do conteúdo já que não há navbar */ .content { padding-top: 20px !important; } /* ✅ Botão flutuante para abrir menu (criado via JS) */ #floatingMenuBtn { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; border-radius: 50%; background: var(--gradiente-azul); color: white; border: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; font-size: 24px; z-index: 1000; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } #floatingMenuBtn:hover { transform: scale(1.1); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); } #floatingMenuBtn:active { transform: scale(0.95); } } /* =========================================== AJUSTES PARA MOBILE (Sidebar) =========================================== */ @media (max-width: 991.98px) { /* Oculta a sidebar por padrão no mobile */ .sidebar { left: -240px; /* Esconde a sidebar */ z-index: 1050; /* Acima de tudo, exceto modais */ box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); } /* Mostra a sidebar quando a classe 'show-mobile' é adicionada */ .sidebar.show-mobile { left: 0; } /* Ajusta o conteúdo para não ter margem lateral */ .content-wrapper, .content { margin-left: 0 !important; } /* Adiciona um overlay quando o menu está aberto */ .sidebar.show-mobile + .content-wrapper::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 1040; } } /* =========================================== 📱 MELHORIAS ADICIONAIS PARA MOBILE Adicione este CSS ao final do style.css =========================================== */ /* Melhoria para touch targets (botões e links) */ @media (max-width: 991.98px) { .btn, .nav-link, button, a.btn { min-height: 44px; min-width: 44px; padding: 12px 16px; } /* Melhoria para inputs em mobile */ .form-control, .form-select { font-size: 16px; /* Previne zoom automático no iOS */ padding: 12px; } /* Melhoria para modais em mobile */ .modal-dialog { margin: 0.5rem; max-width: calc(100% - 1rem); } /* Melhoria para tabelas em mobile */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { font-size: 0.875rem; } .table th, .table td { padding: 0.5rem; white-space: nowrap; } /* Melhoria para cards em mobile */ .card { margin-bottom: 1rem; } .card-body { padding: 1rem; } /* Melhoria para títulos em mobile */ h1 { font-size: 1.75rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } /* Melhoria para espaçamento em mobile */ .container-fluid { padding-left: 1rem; padding-right: 1rem; } /* Melhoria para scroll suave */ html { scroll-behavior: smooth; } /* Previne zoom em inputs no iOS */ input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], textarea, select { font-size: 16px !important; } } /* Ajustes específicos para telas muito pequenas */ @media (max-width: 575.98px) { /* Reduz padding em telas pequenas */ .container-fluid { padding-left: 0.75rem; padding-right: 0.75rem; } /* Ajusta tamanho de fonte */ body { font-size: 0.9rem; } /* Melhoria para botões em telas pequenas */ .btn-lg { padding: 0.75rem 1rem; font-size: 1rem; } /* Ajusta cards de resumo */ .resumo-card h3 { font-size: 1.5rem; } .resumo-card h6 { font-size: 0.875rem; } } /* Melhoria para orientação landscape em mobile */ @media (max-width: 991.98px) and (orientation: landscape) { .sidebar { width: 200px; } .sidebar.show { left: 0; } .content { padding-top: 60px; } } /* Melhoria para acessibilidade touch */ @media (hover: none) and (pointer: coarse) { /* Remove hover effects em dispositivos touch */ .nav-card:hover { transform: none; } /* Adiciona feedback visual no tap */ .nav-card:active { transform: scale(0.98); opacity: 0.9; } .btn:active { transform: scale(0.98); } } /* Melhoria para notificações em mobile */ @media (max-width: 575.98px) { #notificacoes-container { right: 0.5rem !important; top: 0.5rem !important; left: 0.5rem; } .notificacao { font-size: 0.875rem; padding: 0.75rem; } } /* Melhoria para sidebar overlay */ @media (max-width: 991.98px) { .sidebar-overlay { backdrop-filter: blur(2px); } } /* Melhoria para formulários em mobile */ @media (max-width: 575.98px) { .form-label { font-size: 0.9rem; margin-bottom: 0.375rem; } .input-group { flex-wrap: nowrap; } } /* Melhoria para gráficos em mobile */ @media (max-width: 991.98px) { canvas { max-height: 250px !important; } } /* Fix para scroll horizontal indesejado */ @media (max-width: 991.98px) { body { overflow-x: hidden; } .content-wrapper { overflow-x: hidden; } } /* ===== BOTÃO LINK PARA AGENDA (LOGIN PAGE) ===== */ .btn-link-agenda { display: inline-block; color: var(--azul); font-size: 0.95rem; font-weight: 500; padding: 0.5rem 1rem; border-radius: 6px; transition: var(--transicao); text-decoration: none; } .btn-link-agenda:hover { background: rgba(13, 110, 253, 0.1); color: var(--ciano); text-decoration: none; } [data-tema="dark"] .btn-link-agenda { color: var(--ciano); } [data-tema="dark"] .btn-link-agenda:hover { background: rgba(0, 188, 212, 0.15); color: var(--azul); } /* ===== BOTÃO DE TEMA NA PÁGINA DE AGENDAMENTOS ===== */ .theme-toggle-agendamento { position: fixed; top: 20px; right: 20px; z-index: 1000; } .theme-toggle-agendamento button { background: var(--gradiente-azul); border: none; border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: var(--transicao); color: white; font-size: 1.1rem; } .theme-toggle-agendamento button:hover { transform: scale(1.1); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); } .theme-toggle-agendamento button:active { transform: scale(0.95); } [data-tema="dark"] .theme-toggle-agendamento button { background: var(--gradiente-azul); } /* ===== CORREÇÕES PARA MOBILE - COMANDAS ===== */ /* Garante que o texto do header apareça completo no mobile */ @media (max-width: 991.98px) { #mobile-navbar .navbar-brand { font-size: 1rem !important; white-space: nowrap !important; overflow: visible !important; max-width: none !important; } #mobile-navbar .navbar-brand span { display: inline !important; visibility: visible !important; } /* Ajusta o container do navbar */ #mobile-navbar .container-fluid { display: flex; align-items: center; gap: 0.5rem; } } /* Melhora a responsividade da tabela de comandas no mobile */ @media (max-width: 768px) { /* Reduz padding do formulário de nova comanda */ .col-lg-4.col-md-5.col-12 .card-body { padding: 1rem !important; } /* Ajusta inputs para mobile */ .col-lg-4.col-md-5.col-12 .form-control, .col-lg-4.col-md-5.col-12 .form-select { font-size: 14px; } /* Container com scroll horizontal para a tabela */ #comandaListPendentes, #comandaListConcluidas { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Tabela com largura mínima para forçar scroll */ #comandaListPendentes table, #comandaListConcluidas table { min-width: 600px; width: 100%; } /* Ajusta tamanho da fonte e padding */ #comandaListPendentes table th, #comandaListPendentes table td, #comandaListConcluidas table th, #comandaListConcluidas table td { font-size: 0.85rem; padding: 0.5rem 0.4rem; white-space: nowrap; } /* Botões de ação menores */ #comandaListPendentes .btn-sm, #comandaListConcluidas .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; } } /* Ajustes extras para telas muito pequenas */ @media (max-width: 576px) { #comandaListPendentes table, #comandaListConcluidas table { min-width: 550px; } #comandaListPendentes table th, #comandaListPendentes table td, #comandaListConcluidas table th, #comandaListConcluidas table td { font-size: 0.8rem; padding: 0.4rem 0.3rem; } } /* =========================================== AJUSTES DE INPUTS E BOTÕES (CORREÇÃO V2) =========================================== */ /* Garante que o botão do datepicker tenha a mesma altura do input e o ícone centralizado */ #btnDataPicker { /* Força o botão a ter a altura do input-group, que deve ser a altura do form-control */ height: 100%; /* Usa flexbox para centralizar o ícone */ display: flex; align-items: center; justify-content: center; /* Ajusta o padding para garantir que o ícone não fique espremido */ padding: 0.375rem 0.75rem; } #btnDataPicker i { /* Garante que o ícone tenha um tamanho que preencha o espaço verticalmente */ font-size: 1.25rem; /* Remove qualquer margem que possa estar causando desalinhamento */ margin: 0 !important; } /* Garante que o input-group esteja configurado corretamente para o alinhamento */ .input-group { align-items: stretch; } /* =========================================== 🔑 AJUSTES PARA TELA DE LOGIN =========================================== */ .separator { display: flex; align-items: center; text-align: center; margin: 15px 0; color: var(--text-color-secondary); font-size: 0.9em; } .separator::before, .separator::after { content: ''; flex: 1; border-bottom: 1px solid var(--borda-suave); margin: 0 10px; } [data-tema="dark"] .separator::before, [data-tema="dark"] .separator::after { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .login-links { text-align: center; margin-top: 10px; } .btn-link { background: none; border: none; color: var(--azul); /* Cor primária para links */ cursor: pointer; font-size: 0.9em; text-decoration: underline; padding: 0; transition: color 0.3s ease; } .btn-link:hover { color: var(--ciano); } [data-tema="dark"] .btn-link { color: #90caf9; /* Azul mais claro para tema escuro */ } [data-tema="dark"] .btn-link:hover { color: #4fc3f7; } /* Estilo para o botão de enviar código SMS */ .btn-login.gradiente-roxo { background: linear-gradient(90deg, #673AB7, #9C27B0); /* Roxo */ } .btn-login.gradiente-roxo:hover { opacity: 0.9; transform: translateY(-1px); } /* Estilo para o botão de verificar código */ .btn-login.gradiente-verde { background: linear-gradient(90deg, #4CAF50, #8BC34A); /* Verde */ } .btn-login.gradiente-verde:hover { opacity: 0.9; transform: translateY(-1px); }