/* Fontes pixeladas */ @import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323:wght@400&display=swap"); /* --- Configuração Base --- */ body { font-family: "VT323", monospace; font-size: 18px; background-color: #1e1e1e; color: #e0e0e0; background-image: linear-gradient( rgba(255, 255, 255, 0.03) 1px, transparent 1px ), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 25px 25px; } /* --- CORREÇÃO DO SCROLL --- */ /* Classe aplicada ao para travar o scroll */ html.modal-open { overflow: hidden; height: 100vh; } /* Classe aplicada ao para travar o scroll */ body.modal-open { overflow: hidden; height: 100vh; position: fixed; width: 100%; } .header-title, .section-title, .modal-title { font-family: "Press Start 2P", cursive; } .header-title { font-size: 2.25rem; color: #e0e0e0; text-shadow: 2px 2px 0px #333; } .section-title { font-size: 1.75rem; margin-bottom: 1rem; word-break: break-word; } .modal-title { font-size: 1.5rem; margin-bottom: 1.5rem; } /* --- Bordas Pixeladas --- */ .pixel-border { border: 4px solid #e0e0e0; box-shadow: inset -4px -4px 0px 0px #666, inset 4px 4px 0px 0px #fff; } .pixel-border-inset { border: 4px solid #4f4f4f; box-shadow: inset 4px 4px 0px 0px #333, inset -4px -4px 0px 0px #777; max-width: 100%; } /* --- Gráficos --- */ .chart-container { position: relative; max-width: 400px; /* Limita o tamanho em telas grandes */ margin: 0 auto; } /* --- Animações das Abas --- */ .tab-container { position: relative; overflow: hidden; min-height: 400px; } .tab-content { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateX(100px); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); pointer-events: none; } .tab-content.active { opacity: 1; transform: translateX(0); pointer-events: all; position: relative; } .tab-content.exiting { opacity: 0; transform: translateX(-100px); transition: all 0.3s cubic-bezier(0.55, 0.06, 0.68, 0.19); } /* --- Abas de Navegação --- */ .tab-btn { background-color: #3a3a3a; color: #b0b0b0; padding: 12px 20px; font-size: 1.1rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); border: 3px solid #555; font-family: "VT323", monospace; outline: none; position: relative; overflow: hidden; } .tab-btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(234, 179, 8, 0.2), transparent ); transition: left 0.5s; } .tab-btn:hover::before { left: 100%; } .tab-btn:hover { background-color: #4a4a4a; color: #e0e0e0; border-color: #777; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } .tab-btn.active { background-color: #eab308; color: #1a1a1a; transform: translateY(-4px); border-color: #eab308; box-shadow: 0 6px 12px rgba(234, 179, 8, 0.4), inset -2px -2px 0px 0px #b8860b, inset 2px 2px 0px 0px #fff3cd; } .tab-btn.active::before { display: none; } /* --- Botões --- */ .pixel-btn { display: inline-flex; align-items: center; background-color: #4a4a4a; color: #fff; padding: 10px 20px; font-size: 1.1rem; text-transform: uppercase; cursor: pointer; transition: all 0.2s ease-in-out; border: 2px solid #666; box-shadow: inset -2px -2px 0px 0px #333, inset 2px 2px 0px 0px #777; text-decoration: none; font-family: "VT323", monospace; position: relative; overflow: hidden; } .pixel-btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.1), transparent ); transition: left 0.3s; } .pixel-btn:hover::before { left: 100%; } .pixel-btn:hover { background-color: #5a5a5a; transform: translateY(-2px); box-shadow: inset -2px -2px 0px 0px #333, inset 2px 2px 0px 0px #777, 0 4px 8px rgba(0, 0, 0, 0.3); } .pixel-btn:active { transform: translateY(1px); box-shadow: inset 2px 2px 0px 0px #333; } .pixel-btn-primary { background-color: #0891b2; border-color: #06b6d4; } .pixel-btn-primary:hover { background-color: #06b6d4; } .pixel-btn-success { background-color: #16a34a; border-color: #22c55e; } .pixel-btn-success:hover { background-color: #22c55e; } .pixel-btn-danger { background-color: #be123c; border-color: #dc2626; } .pixel-btn-danger:hover { background-color: #dc2626; } .pixel-btn-secondary { background-color: #6b7280; border-color: #9ca3af; } .pixel-btn-secondary:hover { background-color: #7f8792; } /* --- Tabelas --- */ .table-container { min-height: 150px; overflow-x: auto; } table { border-collapse: collapse; width: 100%; table-layout: auto; background-color: #1a1a1a; } th, td { border: 2px solid #555; padding: 10px; text-align: left; white-space: normal; word-break: break-word; vertical-align: middle; } th { background-color: #333; color: #eab308; font-weight: bold; text-transform: uppercase; position: relative; } th::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #eab308, transparent); } tbody tr { transition: all 0.2s ease; } tbody tr:nth-child(even) { background-color: #2a2a2a; } tbody tr:hover { background-color: #404040; transform: scale(1.01); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* --- NOVO --- Estilo para botões de ação na tabela */ .action-btn { background: none; border: none; color: #e0e0e0; cursor: pointer; font-size: 1.25rem; padding: 0 4px; transition: transform 0.2s ease-in-out, color 0.2s ease-in-out; } .action-btn:hover { transform: scale(1.2); } .action-btn.view:hover { color: #22d3ee; /* Cyan */ } .action-btn.edit:hover { color: #facc15; /* Yellow */ } .action-btn.delete:hover { color: #ef4444; /* Red */ } .empty-state { display: none; padding: 40px; text-align: center; font-size: 1.25rem; color: #777; font-style: italic; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* --- Modals (CORRIGIDOS) --- */ .modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; /* Remove o scroll do backdrop */ background-color: rgba(0, 0, 0, 0.85); backdrop-filter: blur(2px); animation: fadeIn 0.3s ease-out; } @keyframes fadeIn { from { opacity: 0; backdrop-filter: blur(0px); } to { opacity: 1; backdrop-filter: blur(2px); } } .modal-content { background-color: #2c2c2c; margin: 5% auto; padding: 25px; width: 90%; max-width: 600px; max-height: 85vh; overflow-y: auto; /* Scroll apenas no conteúdo do modal */ animation: slideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; /* Garante que o modal-content seja scrollável independentemente */ -webkit-overflow-scrolling: touch; } /* Previne propagação do scroll do modal para o backdrop */ .modal-content::-webkit-scrollbar { width: 8px; } .modal-content::-webkit-scrollbar-track { background: #333; } .modal-content::-webkit-scrollbar-thumb { background: #666; border-radius: 4px; } .modal-content::-webkit-scrollbar-thumb:hover { background: #777; } #viewContent p { border-bottom: 1px dashed #555; padding-bottom: 0.75rem; font-size: 1.1rem; line-height: 1.6; } #viewContent p:last-child { border-bottom: none; } #viewContent p strong { color: #eab308; margin-right: 8px; display: inline-block; min-width: 150px; /* Alinha os valores */ } #viewContent p span { color: #e0e0e0; } @keyframes slideIn { from { transform: translateY(-50px) scale(0.9); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } label { display: block; margin-bottom: 0.5rem; color: #aaa; font-weight: bold; } /* Inputs, Selects, Textareas comuns */ input[type="text"], input[type="number"], input[type="date"], select, textarea { background-color: #1a1a1a; border: 2px solid #555; color: #e0e0e0; padding: 10px; width: 100%; font-size: 1.1rem; font-family: "VT323", monospace; box-sizing: border-box; transition: all 0.3s ease; } input:focus, select:focus, textarea:focus { outline: 2px solid #eab308; border-color: #eab308; background-color: #2a2a2a; box-shadow: 0 0 10px rgba(234, 179, 8, 0.3); } input::placeholder, textarea::placeholder { color: #777; } /* --- Sistema de Estrelas (CORRIGIDO) --- */ .star-rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; } .star-rating input[type="radio"] { display: none; } .star-rating label { color: #555; cursor: pointer; font-size: 2rem; transition: color 0.2s ease-in-out; margin: 0; } .star-rating label:hover, .star-rating label:hover ~ label, .star-rating input[type="radio"]:checked ~ label { color: #eab308; } /* --- Validação de Formulários --- */ .field-error { color: #dc2626; font-size: 0.9rem; margin-top: 0.25rem; display: none; animation: shake 0.3s ease-in-out; } .field-error.show { display: block; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } input.error, select.error, textarea.error, .searchable-dropdown.error .searchable-dropdown-display { border-color: #dc2626 !important; background-color: rgba(220, 38, 38, 0.1) !important; } input.error:focus, select.error:focus, textarea.error:focus { outline: 2px solid #dc2626; border-color: #dc2626; box-shadow: 0 0 10px rgba(220, 38, 38, 0.3); } /* --- Notificações Toast (CORRIGIDO) --- */ #toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; } .toast { padding: 15px 20px; background-color: #333; color: #fff; opacity: 0; transform: translateX(100%); transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); } .toast.show { opacity: 1; transform: translateX(0); } .toast-success { background-color: #16a34a; } .toast-error { background-color: #be123c; } /* --- Componente Dropdown com Pesquisa (NOVO) --- */ .searchable-dropdown { position: relative; } .searchable-dropdown-display { background-color: #1a1a1a; border: 2px solid #555; padding: 10px; width: 100%; cursor: pointer; min-height: 48px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .searchable-dropdown-display .placeholder { color: #777; } .searchable-dropdown-display .item-tag { background-color: #eab308; color: #1a1a1a; padding: 2px 8px; border-radius: 4px; font-size: 0.9em; } .searchable-dropdown-options { display: none; position: absolute; background-color: #2c2c2c; border: 2px solid #777; width: 100%; z-index: 110; /* Acima do conteúdo do modal */ max-height: 200px; overflow-y: auto; margin-top: 4px; } .searchable-dropdown-search { width: 100%; padding: 10px; border: none; border-bottom: 2px solid #555; background-color: #333; color: #e0e0e0; } .searchable-dropdown-options ul { list-style: none; padding: 0; margin: 0; } .searchable-dropdown-options li { padding: 10px; cursor: pointer; } .searchable-dropdown-options li:hover { background-color: #4a4a4a; } .searchable-dropdown-options li.hidden { display: none; } .searchable-dropdown-options input[type="checkbox"] { margin-right: 10px; } /* --- Autocomplete da API (NOVO) --- */ .autocomplete-results { position: absolute; width: 100%; background: #2c2c2c; border: 2px solid #555; max-height: 250px; overflow-y: auto; z-index: 120; } .autocomplete-results div { padding: 10px; cursor: pointer; } .autocomplete-results div:hover { background: #4a4a4a; } .autocomplete-results .loading { text-align: center; padding: 10px; color: #eab308; } /* --- Responsividade (NOVO/AJUSTADO) --- */ @media (max-width: 1024px) { .grid-cols-1.lg\:grid-cols-4 { grid-template-columns: 1fr; /* Coluna única em tablets */ } } @media (max-width: 768px) { body { padding: 8px; } .header-title { font-size: 1.5rem; } .section-title { font-size: 1.25rem; } .tab-btn { padding: 8px 12px; font-size: 1rem; } th, td { padding: 8px; font-size: 0.9rem; } .modal-content { margin: 10% auto; padding: 15px; max-height: 90vh; } #toast-container { right: 10px; bottom: 10px; width: calc(100% - 20px); } .flex.space-x-1, .flex.space-x-2 { flex-direction: column; gap: 8px; align-items: stretch; } .pixel-btn { justify-content: center; } #viewContent p strong { min-width: 110px; } /* Ajustes específicos para mobile quando modal está aberto */ body.modal-open { position: fixed; top: 0; left: 0; right: 0; bottom: 0; } }