/* ========================================================= APP.CSS (unificado) - Base + Layout + Login + Dashboard - Theme por empresa via data-theme no ou ========================================================= */ @charset "UTF-8"; /* ==================== RESET ==================== */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; appearance: textfield; } /* Campos inválidos (Validação Unificada) */ .is-invalid { border-color: var(--error-color) !important; box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.1) !important; background-color: #fff8f8 !important; } .is-invalid:focus { border-color: var(--error-color) !important; box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.2) !important; } /* ==================== TOKENS / VARIÁVEIS ==================== */ :root { /* Brand (default = verde atual) */ /* --primary-color: rgb(50, 150, 100); --primary-dark: rgb(35, 120, 80); --primary-light: rgb(80, 180, 130); --primary-lighter: rgb(120, 210, 160); --primary-lightest: rgb(180, 230, 200); */ /* Este projeto usa nomes "green" em vários pontos. Para tematizar por empresa, a gente só sobrescreve esses tokens. */ --dark-green: rgb(19, 85, 45); --medium-green: rgb(30, 120, 70); --dark-green-darker: rgb(15, 65, 35); /* Neutros */ --white: #ffffff; --text-dark: #1a1a1a; --text-light: #666666; --border-color: #e0e0e0; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --error-color: #e74c3c; --shadow: rgba(19, 85, 45, 0.1); /* Logo Padrão */ --company-logo: url('../img/logoArboTech.png'); } /* ==================== THEMES POR EMPRESA ==================== */ /* Globalis (primary #12407e / secondary #ee2152) */ :root[data-theme="globalis"], body[data-theme="globalis"] { --primary-color: #12407e; --primary-dark: #0b2a55; --primary-light: #2c66b3; --primary-lighter: #5a88c7; --primary-lightest: #d9e6f7; /* reaproveitando nomes existentes do projeto */ --dark-green: #0b2a55; /* "dark" vira azul escuro */ --medium-green: #ee2152; /* "medium" vira o vermelho secundário */ --dark-green-darker: #071d3a; --shadow: rgba(18, 64, 126, 0.18); --company-logo: url('../img/logoGlobalis.png'); } /* AD Turismo (preto e branco) */ :root[data-theme="ad"], body[data-theme="ad"] { --primary-color: #000000; --primary-dark: #000000; --primary-light: #333333; --primary-lighter: #666666; --primary-lightest: #f2f2f2; --dark-green: #000000; --medium-green: #aaaaaa; --dark-green-darker: #242424; --text-dark: #0a0a0a; --text-light: #4b5563; --border-color: #e5e7eb; --shadow: rgba(0, 0, 0, 0.12); --company-logo: url('../img/logoADTurismo.png'); } /* Arbotech (Neon Green + Dark) */ :root[data-theme="arbotech"], body[data-theme="arbotech"] { --primary-color: #232c26; --primary-dark: #1a211c; --primary-light: #3d4d42; --primary-lighter: #576e5e; --primary-lightest: #d3dbd7; --dark-green: #000000; --medium-green: #00ed3b; --dark-green-darker: #050505; --shadow: rgba(35, 44, 38, 0.15); --company-logo: url('../img/logoArboTech.png'); } /* ========================================================= A partir daqui: CSS existente (style.css + login.css + dashboard.css) (com os blocos duplicados de reset/:root removidos) ========================================================= */ /* ====== style.css ====== */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--gray-50); height: 100vh; overflow: hidden; } .dashboard-container { display: flex; height: 100vh; width: 100%; } /* Sidebar */ .sidebar { /* background: linear-gradient(180deg, var(--medium-green) 0%, var(--dark-green) 100%); */ background: linear-gradient(180deg, var(--dark-green) 0%, var(--medium-green) 140%); color: var(--white); display: flex; flex-direction: column; transition: width 0.3s ease-in-out; overflow: hidden; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); } .sidebar.open { width: 256px; } .sidebar.closed { width: 80px; } /* Sidebar Header */ .sidebar-header { padding: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: space-between; min-height: 64px; } .logo-container { display: flex; align-items: center; gap: 12px; width: 100%; } .logo-icon { width: 75px; height: 75px; background: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .logo-icon img { width: 100%; height: 100%; object-fit: contain; } #companyLogo { display: block; width: 100%; height: 100%; min-width: 32px; /* Forçar uma largura mínima visível */ min-height: 32px; /* Forçar uma altura mínima visível */ background-image: var(--company-logo); background-size: contain; background-repeat: no-repeat; background-position: center; color: transparent; /* Oculta o texto alt se o src estiver vazio */ } .logo-text { font-size: 18px; font-weight: 600; white-space: nowrap; transition: opacity 0.3s ease; } .sidebar.closed .logo-text { display: none; } .sidebar.closed .sidebar-header { padding: 12px 8px; justify-content: center; } .sidebar.closed .logo-container { justify-content: center; } /* Sidebar Navigation */ .sidebar-nav { flex: 1; padding: 24px 0; overflow-y: auto; } .menu-list { list-style: none; padding: 0 12px; } .menu-list li { margin-bottom: 4px; } .menu-item-with-submenu { position: relative; } .menu-item { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 5px; padding: 12px; border-radius: 8px; color: var(--white); text-decoration: none; transition: all 0.3s ease; cursor: pointer; position: relative; pointer-events: auto; user-select: none; -webkit-user-select: none; } /* Garantir que o ícone fique à esquerda */ .menu-item:hover { background: rgba(255, 255, 255, 0.15); } .menu-item.active { background: rgba(255, 255, 255, 0.2); font-weight: 600; } .menu-item.active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 60%; background: var(--white); border-radius: 0 4px 4px 0; } .menu-item svg.menu-icon { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; display: block; align-self: center; } .menu-item .menu-label { font-size: 14px; font-weight: 500; white-space: nowrap; transition: opacity 0.3s ease; display: block; align-self: center; line-height: 1.5; } .sidebar.closed .menu-label { display: none; } /* Submenu */ .menu-item-parent { position: relative; gap: 12px; } .menu-item-parent.active { background: rgba(255, 255, 255, 0.2); font-weight: 600; } .submenu-arrow { width: 16px; height: 16px; margin-left: auto; transition: transform 0.3s ease; flex-shrink: 0; } .menu-item-parent.active .submenu-arrow { transform: rotate(180deg); } .submenu { list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out, padding 0.2s ease-out; padding-left: 20px; } .menu-item-with-submenu .menu-item-parent.active~.submenu, .submenu.open { max-height: 500px; padding-top: 4px; padding-bottom: 4px; transition: max-height 0.3s ease-in, padding 0.3s ease-in; } .submenu-item { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--white); text-decoration: none; transition: all 0.3s ease; cursor: pointer; position: relative; pointer-events: auto; user-select: none; -webkit-user-select: none; opacity: 0.9; font-size: 14px; } .submenu-item svg.menu-icon { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; display: block; align-self: center; } .submenu-item:hover { background: rgba(255, 255, 255, 0.1); opacity: 1; } .submenu-item.active { background: rgba(255, 255, 255, 0.15); font-weight: 600; opacity: 1; } .sidebar.closed .submenu { display: none; } .sidebar.closed .submenu-arrow { display: none; } /* Main Content */ .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--gray-50); } /* Header */ .main-header { background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .header-left { display: flex; align-items: center; gap: 16px; } .header-right { display: flex; align-items: center; gap: 16px; } .sidebar-toggle { padding: 8px; background: transparent; border: none; border-radius: 8px; cursor: pointer; color: var(--text-dark); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; pointer-events: auto; z-index: 10; position: relative; } .sidebar-toggle:hover { background: var(--gray-100); color: var(--primary-color); } .toggle-icon { width: 20px; height: 20px; stroke: currentColor; transition: opacity 0.3s ease, transform 0.3s ease; } .menu-icon { position: relative; } .close-icon { position: relative; top: 2px; } .sidebar-toggle { position: relative; } .page-title { font-size: 24px; font-weight: 600; color: var(--text-dark); margin: 0; } .header-right { display: flex; align-items: center; gap: 16px; } /* User Profile */ .user-profile { position: relative; } .user-profile-button { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: transparent; border: 1px solid var(--gray-200); border-radius: 8px; cursor: pointer; transition: all 0.3s ease; color: var(--text-dark); } .user-profile-button:hover { background: var(--gray-100); border-color: var(--gray-300); } .user-avatar { width: 32px; height: 32px; border-radius: 50%; /* background: linear-gradient(135deg, var(--primary-color) 0%, var(--medium-green) 100%); */ background: var(--primary-color); display: flex; align-items: center; justify-content: center; color: var(--white); flex-shrink: 0; } .user-avatar svg { width: 18px; height: 18px; } .user-name { font-size: 14px; font-weight: 500; color: var(--text-dark); white-space: nowrap; } .dropdown-arrow { width: 16px; height: 16px; color: var(--text-light); transition: transform 0.3s ease; } .user-profile.active .dropdown-arrow { transform: rotate(180deg); } .user-menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--white); border: 1px solid var(--gray-200); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); min-width: 200px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 1000; overflow: hidden; } .user-profile.active .user-menu { opacity: 1; visibility: visible; transform: translateY(0); } .user-menu-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--text-dark); text-decoration: none; transition: all 0.2s ease; border-bottom: 1px solid var(--gray-100); background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; cursor: pointer; } .user-menu-item:last-child { border-bottom: none; } .user-menu-item:hover { background: var(--gray-50); color: var(--primary-color); } .user-menu-item svg { width: 18px; height: 18px; flex-shrink: 0; } .user-menu-item span { font-size: 14px; font-weight: 500; } .user-menu-item-danger { color: #dc2626; } .user-menu-item-danger:hover { background: #fef2f2; color: #dc2626; } /* Content Area */ .content-area { flex: 1; overflow-y: auto; padding: 24px; background: var(--gray-50); display: flex; flex-direction: column; gap: 24px; position: relative; } .main-footer { padding: 10px 0; text-align: center; color: var(--text-light); font-size: 13px; border-top: 1px solid var(--gray-200); margin-top: auto; } .welcome-message { background: var(--white); border-radius: 12px; padding: 48px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; } .welcome-message h2 { font-size: 28px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; } .welcome-message p { font-size: 16px; color: var(--text-light); } /* Scrollbar personalizado */ .sidebar-nav::-webkit-scrollbar, .content-area::-webkit-scrollbar { width: 6px; } .sidebar-nav::-webkit-scrollbar-track, .content-area::-webkit-scrollbar-track { background: transparent; } .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 3px; } .sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); } .content-area::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 3px; } .content-area::-webkit-scrollbar-thumb:hover { background: var(--border-color); } /* Responsividade */ @media (max-width: 768px) { .sidebar.open { width: 256px; position: fixed; left: 0; top: 0; bottom: 0; z-index: 1000; } .sidebar.closed { width: 0; overflow: hidden; } .main-content { width: 100%; } } /* Tooltip diretamente no menu-item */ .sidebar.closed .menu-item[data-tooltip] { position: relative; } .sidebar.closed .menu-item[data-tooltip]::after { content: attr(data-tooltip); position: fixed; transform: translateY(0%) translateX(50%); white-space: nowrap; background: rgba(0, 0, 0, 0.85); color: #fff; font-size: 13px; padding: 8px 12px; border-radius: 8px; opacity: 0; visibility: hidden; pointer-events: none; z-index: 9999; transition: opacity 0.2s ease, visibility 0.2s ease; } .sidebar.closed .menu-item[data-tooltip]:hover::after { opacity: 1; visibility: visible; } * Estilos para Cards de Submenu no Conteúdo */ .submenu-content-grid { background: var(--white); border-radius: 12px; padding: 32px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .submenu-content-title { font-size: 28px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; } .submenu-content-subtitle { font-size: 16px; color: var(--text-light); margin-bottom: 32px; } .submenu-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .submenu-card { background: var(--white); border: 2px solid var(--gray-200); border-radius: 12px; padding: 24px; text-decoration: none; color: var(--text-dark); transition: all 0.3s ease; cursor: pointer; display: flex; flex-direction: column; gap: 12px; } .submenu-card:hover { border-color: var(--primary-color); transform: translateY(-4px); box-shadow: 0 8px 20px rgba(50, 150, 100, 0.15); } .submenu-card-icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--primary-lighter) 0%, var(--primary-color) 100%); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; } .submenu-card-icon svg { width: 24px; height: 24px; stroke: var(--white); } .submenu-card h3 { font-size: 18px; font-weight: 600; color: var(--text-dark); margin: 0; } .submenu-card p { font-size: 14px; color: var(--text-light); margin: 0; line-height: 1.5; } @media (max-width: 768px) { .submenu-cards { grid-template-columns: 1fr; } .submenu-content-grid { padding: 24px; } } /* ==================== TABELAS E LISTAGENS ==================== */ .content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .content-header h2 { font-size: 24px; font-weight: 600; color: var(--text-dark); margin: 0; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; text-decoration: none; } .btn svg { width: 18px; height: 18px; } .btn-primary { /* background: linear-gradient(135deg, var(--primary-color) 0%, var(--medium-green) 100%); */ background: var(--primary-color); color: var(--white); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(50, 150, 100, 0.3); } .btn:disabled, .btn[disabled] { opacity: 0.6; cursor: not-allowed; box-shadow: none; transform: none; } .btn:disabled:hover, .btn[disabled]:hover { transform: none; box-shadow: none; } .table-container { background: var(--white); border-radius: 12px; padding: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); overflow-x: auto; max-height: calc(100vh - 250px); overflow-y: auto; position: relative; } .data-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0; } .data-table thead { position: sticky; top: 0; z-index: 1000; } .data-table th { padding: 12px 16px; text-align: left; font-size: 13px; font-weight: 600; color: var(--text-dark); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--gray-200); background: var(--gray-200) !important; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } .data-table th:first-child { padding-left: 24px; } .data-table th:last-child { padding-right: 24px; } .data-table td:first-child { padding-left: 24px; } .data-table td:last-child { padding-right: 24px; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table td { padding: 16px; border-bottom: 1px solid var(--gray-100); color: var(--text-dark); } .data-table tbody tr:hover { background: var(--gray-50); } .empty-state { text-align: center; color: var(--text-light); padding: 48px 24px !important; } .empty-state a { color: var(--primary-color); text-decoration: none; font-weight: 500; } .empty-state a:hover { text-decoration: underline; } .btn-icon { padding: 8px; border: none; background: transparent; cursor: pointer; border-radius: 6px; transition: all 0.2s ease; } .btn-icon svg { width: 18px; height: 18px; } .btn-edit { color: #3b82f6; } .btn-edit:hover { background: #eff6ff; } .btn-delete { color: #ef4444; } .btn-delete:hover { background: #fef2f2; } .actions { display: flex; gap: 8px; } .form-container { background: white; border-radius: 8px; padding: 2rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .client-form { max-width: 900px; margin: 0 auto; } .form-section { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #e5e7eb; } .form-section:last-of-type { border-bottom: none; } .form-section h3 { font-size: 1.125rem; font-weight: 600; color: #1f2937; margin-bottom: 1.5rem; } .select-with-action { display: flex; gap: 0.6rem; align-items: center; } .select-with-action select.form-control { flex: 1; width: 100%; } .btn-add-attachment { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem; font-size: 0.95rem; font-weight: 600; border-radius: 0.35rem; transition: none; } .btn-add-attachment .btn-icon { font-size: 1rem; line-height: 1; } .anexos-container { margin-top: 1rem; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; min-height: 86px; } .attachment-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 0.75rem 1rem; box-shadow: 0 10px 20px rgba(15, 23, 42, 0.05); } .attachment-info { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.95rem; color: #0f172a; } .attachment-info strong { font-size: 1rem; } .attachment-info span { font-size: 0.85rem; color: #64748b; } .attachment-actions { display: flex; align-items: center; } .attachment-remove { border: none; background: transparent; color: #ef4444; font-weight: 600; cursor: pointer; padding: 0; transition: color 0.2s ease; } .attachment-remove:hover { color: #b91c1c; } .form-row { display: flex; gap: 1rem; margin-bottom: 1rem; } .form-group { flex: 1; display: flex; flex-direction: column; } .form-group.full-width { flex: 1 1 100%; } .form-group.flex-2 { flex: 2; } .form-group label { font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.5rem; } .form-control { padding: 0.625rem 0.875rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.875rem; transition: all 0.2s; } .form-control:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .form-control:disabled { background-color: #f3f4f6; cursor: not-allowed; } .form-control.auto-filled { background-color: #f0fdf4; border-color: #86efac; } select.form-control { cursor: pointer; } textarea.form-control { resize: vertical; min-height: 80px; font-family: inherit; } /* Input wrapper para campos com botão toggle (senha) */ .input-wrapper { position: relative; display: flex; align-items: center; } .input-wrapper .form-control { padding-right: 45px; /* Espaço para o botão toggle */ border-right: none; /* Remove qualquer borda direita */ } .input-wrapper { position: relative; display: flex; align-items: center; border: none; background: transparent; } .toggle-password { position: absolute; right: 8px; background: transparent !important; border: none !important; cursor: pointer; padding: 8px; border-radius: 8px; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; color: var(--text-light); z-index: 1; outline: none !important; box-shadow: none !important; margin: 0; width: auto; height: auto; min-width: 0; min-height: 0; } .toggle-password:hover { background: rgba(50, 150, 100, 0.1); color: var(--primary-color); } .toggle-password:focus { outline: none; box-shadow: none; } .toggle-password:active { outline: none; box-shadow: none; } .eye-container { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; position: relative; transition: transform 0.3s ease; } .eye-open, .eye-closed { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .eye-open svg, .eye-closed svg { width: 100%; height: 100%; } .form-hint { font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem; } .checkbox-group { flex-direction: row; align-items: center; gap: 0.5rem; } .form-checkbox { width: 1.25rem; height: 1.25rem; border-radius: 4px; border: 1px solid #d1d5db; cursor: pointer; } .checkbox-group label { margin-bottom: 0; cursor: pointer; } /* Input com botão */ .input-with-button { display: flex; gap: 0.5rem; } .input-with-button .form-control { flex: 1; } .btn-search { padding: 0.625rem 1rem; background-color: #10b981; color: white; border: none; border-radius: 6px; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; } .btn-search:hover { background-color: #059669; } .btn-search:disabled { background-color: #9ca3af; cursor: not-allowed; } .btn-search svg { width: 1rem; height: 1rem; } /* Spinner para loading */ .spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .form-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; } .btn { padding: 0.625rem 1.25rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; border: none; } /* .btn-primary { background-color: #3b82f6; color: white; } */ /* .btn-primary:hover { background-color: #2563eb; } */ .btn-secondary { background-color: #e5e7eb; color: #374151; } .btn-secondary:hover { background-color: #d1d5db; } /* Espaçamento dos botões na modal SweetAlert2 */ .swal-actions-row { display: flex; justify-content: center; gap: 15px; margin-top: 20px; } .btn svg { width: 1rem; height: 1rem; } @media (max-width: 768px) { .form-row { flex-direction: column; } .form-container { padding: 1rem; } .input-with-button { flex-direction: column; } .btn-search { width: 100%; justify-content: center; } } /* Customização SweetAlert2 */ .swal2-container { z-index: 2000 !important; } .swal2-popup { border-radius: 12px; } .swal2-title { font-size: 1.5rem; } .swal2-html-container { font-size: 1rem; } /* Estilos para Flatpickr - Paleta de cores do sistema */ /* ==================== FLATPICKR ==================== */ /* Tema do calend?rio e componentes relacionados */ .flatpickr-input.form-control { cursor: pointer; } .flatpickr-calendar { font-family: inherit; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border: 1px solid var(--gray-200); background: var(--white); } /* Header do calendário (mês/ano) */ .flatpickr-months { background: var(--dark-green) 100%; border-radius: 8px 8px 0 0; padding: 8px 0; } .flatpickr-months .flatpickr-month { color: var(--white); fill: var(--white); } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--white); fill: var(--white); } .flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: rgba(255, 255, 255, 0.1); border-radius: 4px; } .flatpickr-months .flatpickr-current-month { color: var(--white); } .flatpickr-months .flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--white); background: rgba(255, 255, 255, 0.1); border-radius: 4px; } .flatpickr-months .flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: rgba(255, 255, 255, 0.2); } /* Dias da semana */ .flatpickr-weekdays { background: var(--gray-50); border-bottom: 1px solid var(--gray-200); } .flatpickr-weekday { color: var(--text-light); font-weight: 600; font-size: 0.875rem; } /* Dias do calendário */ .flatpickr-day { color: var(--text-dark); border-radius: 4px; transition: all 0.2s ease; } .flatpickr-day:hover { background: var(--primary-lightest); border-color: var(--primary-color); color: var(--dark-green); } .flatpickr-day.today { border-color: var(--primary-color); color: var(--primary-color); font-weight: 600; } .flatpickr-day.today:hover { background: var(--primary-lightest); border-color: var(--primary-color); } /* Dia selecionado */ .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--primary-color); border-color: var(--primary-color); color: var(--white); font-weight: 600; } .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover { background: var(--medium-green); border-color: var(--medium-green); color: var(--white); } /* Dias com eventos */ .flatpickr-day.has-event { background: #16a34a; border-color: #16a34a; color: var(--white); font-weight: 600; } .flatpickr-day.has-event:hover { background: #15803d; border-color: #15803d; color: var(--white); } /* ==================== AUTOCOMPLETE ==================== */ .autocomplete-wrapper { position: relative; width: 100%; } .autocomplete-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #111827; color: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); z-index: 50; max-height: 240px; overflow-y: auto; display: none; padding: 6px; } .autocomplete-wrapper .form-control { width: 100%; } .autocomplete-item { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; } .autocomplete-item:hover, .autocomplete-item.active { background: rgba(255, 255, 255, 0.12); } /* Dias de outros meses (faded) */ .flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--gray-200); opacity: 0.5; } /* Input do calendário quando focado */ .flatpickr-input.form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(50, 150, 100, 0.1); } /* Botão de fechar (se houver) */ .flatpickr-close { color: var(--white); } .flatpickr-close:hover { background: rgba(255, 255, 255, 0.1); } /* Setas de navegação */ .flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--white); width: 12px; height: 12px; } /* Setas do ano (input numérico) */ .flatpickr-current-month .numInputWrapper span.arrowUp, .flatpickr-current-month .numInputWrapper span.arrowDown { border: none !important; border-color: transparent !important; box-shadow: none; width: 14px; height: 8px; background: #e5e7eb; border-radius: 3px; } .flatpickr-current-month .numInputWrapper span.arrowUp:hover, .flatpickr-current-month .numInputWrapper span.arrowDown:hover { border: none !important; border-color: transparent !important; background: #f3f4f6; } .flatpickr-current-month .numInputWrapper span.arrowUp { border: none; } .flatpickr-current-month .numInputWrapper span.arrowDown { border: none; } /* Dropdown de mês/ano */ .flatpickr-monthDropdown-months, .flatpickr-monthDropdown-month { color: #111827; background: #ffffff; } .flatpickr-monthDropdown-months:hover, .flatpickr-monthDropdown-month:hover { background: #eaf7f1; color: #0f172a; } .flatpickr-monthDropdown-months option { color: #111827; background: #ffffff; } .flatpickr-monthDropdown-months option:checked, .flatpickr-monthDropdown-months option:checked:hover { background: #e5e7eb !important; color: #111827 !important; } /* Range de datas (se usado) */ .flatpickr-day.inRange { background: var(--primary-lightest); border-color: var(--primary-lightest); color: var(--dark-green); box-shadow: -5px 0 0 var(--primary-lightest), 5px 0 0 var(--primary-lightest); } .flatpickr-day.selected.inRange { background: var(--primary-color); border-color: var(--primary-color); color: var(--white); box-shadow: -5px 0 0 var(--primary-lightest), 5px 0 0 var(--primary-lightest); } /* Estados desabilitados */ .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: var(--gray-200); cursor: not-allowed; background: transparent; } /* Animação suave */ .flatpickr-calendar.animate.open { animation: flatpickrFadeIn 0.2s ease-out; } @keyframes flatpickrFadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } /* ================== FIM FLATPICKR ================== */ } /* ==================== MAPA ==================== */ .map-container { height: 400px; width: 100%; margin: 20px 0; border-radius: 8px; overflow: hidden; border: 2px solid #e5e7eb; } /* ==================== DETALHES DO LOCAL ==================== */ .local-detalhes { margin-top: 20px; padding: 1.5rem; background: #f9fafb; border-radius: 8px; } .local-detalhes h4 { font-size: 1rem; font-weight: 600; color: #1f2937; margin-bottom: 1rem; } /* ==================== BOTÃO COM ÍCONE DE MAPA ==================== */ .input-with-button { display: flex; gap: 0.5rem; } .input-with-button .form-control { flex: 1; } .btn-map { padding: 0.625rem 1rem; background-color: #10b981; color: white; border: none; border-radius: 6px; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; } .btn-map:hover { background-color: #059669; transform: translateY(-1px); } .btn-map:disabled { background-color: #9ca3af; cursor: not-allowed; transform: none; } .btn-map svg { width: 1rem; height: 1rem; } /* ==================== RESPONSIVO ==================== */ @media (max-width: 768px) { .modal-content-large { max-width: 100%; max-height: 95vh; margin: 10px; } .map-container { height: 300px; } .input-with-button { flex-direction: column; } .btn-map { width: 100%; justify-content: center; } .modal-header { padding: 1rem; } .modal-body { padding: 1rem; } .modal-footer { padding: 1rem; flex-direction: column-reverse; } .modal-footer .btn { width: 100%; } } /* ==================== AUTOCOMPLETE DO GOOGLE ==================== */ .pac-container { z-index: 10000 !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border: 1px solid #e5e7eb; margin-top: 4px; } .pac-item { padding: 10px; cursor: pointer; border-bottom: 1px solid #f3f4f6; } .pac-item:hover { background-color: #f9fafb; } .pac-icon { margin-right: 10px; } /*======================== Campos de Serviç0s========================= */ .services-grid { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; } .service-tile { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 110px; } .service-tile input { display: none; } .service-box { width: 56px; height: 56px; border: 2px solid #e6e6e6; border-radius: 12px; background: #fafafa; display: flex; align-items: center; justify-content: center; font-size: 22px; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease; user-select: none; } .service-label { font-size: 13px; color: #666; text-align: center; } .service-tile:hover .service-box { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08); } .service-tile input:checked+.service-box { border-color: var(--primary-color); background: #f1fff6; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1); } .form-hint { display: block; margin-top: 6px; color: #999; } /* ==================== LOCALIZAÇÕES MÚLTIPLAS ==================== */ #localizacoes-container { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; } .localizacao-item { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; position: relative; } .localizacao-item.highlight { border-color: #10b981; background: #f0fdf4; } .localizacao-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e5e7eb; } .localizacao-numero { background: #3b82f6; color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.875rem; } .localizacao-titulo { flex: 1; font-weight: 600; color: #1f2937; } .btn-remove-local { background: #ef4444; color: white; border: none; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.75rem; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 0.25rem; } .btn-remove-local:hover { background: #dc2626; } .btn-remove-local svg { width: 0.875rem; height: 0.875rem; } .localizacao-info { display: flex; gap: 1rem; align-items: center; margin-top: 0.5rem; } .localizacao-info .info-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #6b7280; } .localizacao-info .info-item svg { width: 1rem; height: 1rem; color: #9ca3af; } .localizacao-vazia { text-align: center; padding: 2rem; color: #9ca3af; font-style: italic; } @media (max-width: 768px) { .localizacao-header { flex-wrap: wrap; } .localizacao-info { flex-direction: column; align-items: flex-start; gap: 0.5rem; } } /* mantenha os estilos existentes do .service-box */ .service-box { display: flex; align-items: center; justify-content: center; } /* A cor será herdada do elemento pai */ .service-icon { width: 24px; height: 24px; stroke: currentColor; } /* ==================== MODELO CSS PARA MODAL ==================== */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; overflow: hidden; } .modal-overlay.is-visible { display: flex; } .modal-overlay[hidden] { display: none !important; } /* SweetAlert deve ficar acima dos modais */ .swal2-container { z-index: 10050 !important; } .modal-container { /* width: 100%; */ max-width: 1100px; max-height: 90vh; animation: modalSlideIn 0.3s ease-out; } .cliente-modal .modal-container { max-width: 1100px; } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-card { background: var(--white); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); overflow: hidden; display: flex; flex-direction: column; /* width: min(100%, 1100px); */ width: 700px; max-height: 90vh; } .modal-header { background: #f9fafb; padding: 24px 32px; color: var(--white); display: flex; justify-content: space-between; align-items: center; } .modal-header h2 { margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--text-dark); } .modal-close-btn { background: rgba(228, 14, 14, 0.3); border: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; } .modal-close-btn:hover { background: rgba(228, 14, 14); /* transform: rotate(90deg); */ } .modal-close-btn svg { width: 20px; height: 20px; color: var(--white); } .modal-body { padding: 32px; overflow-y: auto; flex: 1 1 auto; } .modal-body .form-control { width: 100%; } .modal-field { margin-bottom: 24px; } .modal-field.half-width { flex: 1; min-width: 0; } .modal-row { display: flex; gap: 24px; margin-bottom: 24px; } .modal-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text-light); margin-bottom: 8px; letter-spacing: 0.5px; } .modal-value { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 8px; padding: 12px 16px; font-size: 1rem; color: var(--text-dark); min-height: 44px; display: flex; align-items: center; } .modal-value.modal-textarea { min-height: 120px; align-items: flex-start; white-space: pre-wrap; word-wrap: break-word; } .modal-field.form-control { width: 100%; padding: 12px 16px; font-size: 1rem; border: 1px solid var(--gray-200); border-radius: 8px; background: white; color: var(--text-dark); transition: all 0.2s; } .modal-field.form-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(50, 150, 100, 0.1); } .modal-field select.form-control { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; } .status-badge { display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 20px; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .status-badge.status-briefing { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .anexos-list { display: flex; flex-direction: column; gap: 8px; } .anexo-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: white; border: 1px solid var(--gray-200); border-radius: 8px; transition: all 0.2s; cursor: pointer; } .anexo-item:hover { border-color: var(--primary-color); box-shadow: 0 2px 4px rgba(50, 150, 100, 0.1); } .anexo-item svg { width: 20px; height: 20px; color: var(--primary-color); flex-shrink: 0; } .anexo-item span { font-size: 0.9375rem; color: var(--text-dark); flex: 1; } .anexo-item .download-icon { width: 18px; height: 18px; color: var(--primary-color); margin-left: auto; transition: transform 0.2s; } .anexo-item:hover .download-icon { transform: translateY(2px); } .modal-footer { padding: 24px 32px; background: var(--gray-50); border-top: 1px solid var(--gray-200); display: flex; justify-content: flex-end; gap: 12px; } .btn-update-briefing { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; font-size: 1rem; font-weight: 600; border-radius: 8px; transition: all 0.3s; } .btn-update-briefing:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(50, 150, 100, 0.3); } .btn-secondary { background: var(--gray-200); color: var(--text-dark); border: none; padding: 12px 24px; font-size: 1rem; font-weight: 600; border-radius: 8px; cursor: pointer; transition: all 0.3s; } .btn-secondary:hover { background: var(--gray-300); } /* Responsivo */ @media (max-width: 768px) { .modal-container { max-height: 95vh; } .modal-header, .modal-body, .modal-footer { padding: 20px; } .modal-row { flex-direction: column; gap: 0; } .modal-field.half-width { width: 100%; } .modal-footer { flex-direction: column; } .modal-footer button { width: 100%; } } /* ====== login.css ====== */ html { font-size: 16px; height: 100%; overflow: hidden; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: linear-gradient(135deg, var(--primary-lightest) 0%, var(--primary-lighter) 50%, var(--white) 100%); height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 0; padding: 0; } .login-container { width: 100%; max-width: 100vw; position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(10px, 2vw, 20px); box-sizing: border-box; min-height: 100vh; } /* Conteúdo principal */ .login-content { display: grid; grid-template-columns: 1fr 1fr; max-width: min(1200px, 95vw); width: 100%; background: var(--white); border-radius: clamp(16px, 2vw, 24px); box-shadow: 0 20px 60px var(--shadow); overflow: hidden; position: relative; z-index: 1; min-height: clamp(400px, 60vh, 550px); box-sizing: border-box; } /* Seção esquerda */ .left-section { background: linear-gradient(180deg, var(--primary-lighter) 0%, var(--primary-light) 30%, var(--primary-color) 60%, var(--medium-green) 85%, var(--dark-green) 100%); padding: clamp(25px, 3.5vw, 40px) clamp(25px, 3.5vw, 40px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: relative; overflow: hidden; box-sizing: border-box; box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.1); } .left-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%); pointer-events: none; z-index: 1; } .logo-section { position: relative; z-index: 2; text-align: left; margin-bottom: clamp(25px, 3.5vw, 40px); animation: fadeInUp 0.8s ease-out; } .welcome-text { font-size: clamp(14px, 1.5vw, 18px); color: var(--white); opacity: 0.95; margin-bottom: 12px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); animation: fadeInUp 0.8s ease-out 0.1s both; } .system-title { font-size: clamp(32px, 4.5vw, 48px); font-weight: 700; color: var(--white); margin-bottom: 0; letter-spacing: -0.5px; line-height: 1.2; text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); animation: fadeInUp 0.8s ease-out 0.2s both; } .features-list { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: flex-start; list-style: none; padding: 0; margin: 0; animation: fadeInUp 0.8s ease-out 0.3s both; } .feature-item { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 20px); margin-bottom: clamp(18px, 2.5vw, 28px); color: var(--white); font-size: clamp(15px, 1.6vw, 18px); font-weight: 500; padding: clamp(8px, 1vw, 12px) clamp(12px, 1.5vw, 18px); border-radius: 12px; transition: all 0.3s ease; cursor: default; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); width: 100%; box-sizing: border-box; } .feature-item:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); transform: translateX(8px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .check-icon { width: 26px; height: 26px; color: #ffffff; flex-shrink: 0; stroke-width: 3; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); transition: transform 0.3s ease; } .feature-item:hover .check-icon { transform: scale(1.15) rotate(5deg); } /* Seção direita */ .right-section { padding: clamp(25px, 3.5vw, 40px) clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background: linear-gradient(180deg, #e5f8f3 0%, rgba(255, 255, 255, 0.8) 100%); position: relative; box-sizing: border-box; } .right-section::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 200px; background: linear-gradient(180deg, transparent 0%, rgba(50, 150, 100, 0.2) 100%); filter: blur(20px); z-index: 0; } .logo-placeholder { position: relative; z-index: 1; margin-bottom: clamp(15px, 2vw, 25px); margin-top: clamp(-10px, -1vw, -5px); text-align: center; display: flex; align-items: center; justify-content: center; } .logo-img { width: clamp(150px, 15vw, 200px); height: clamp(112px, 11vw, 150px); object-fit: contain; } .login-form-container { width: 100%; max-width: min(400px, 90vw); position: relative; z-index: 1; background: transparent; padding: clamp(20px, 4vw, 40px); border-radius: clamp(12px, 1.5vw, 16px); box-shadow: none; box-sizing: border-box; margin-top: 0; } .form-header { margin-bottom: clamp(20px, 2.5vw, 28px); text-align: left; } .form-header h2 { font-size: clamp(28px, 3.5vw, 38px); font-weight: 700; color: var(--text-dark); margin-bottom: 0; } /* Formulário */ .login-form { width: 100%; } .input-group { margin-bottom: clamp(18px, 2vw, 22px); } .input-group label { display: block; font-size: clamp(15px, 1.5vw, 17px); font-weight: 600; color: var(--text-dark); margin-bottom: 10px; } .input-wrapper { position: relative; display: flex; align-items: center; } .input-icon { position: absolute; left: 16px; width: 20px; height: 20px; color: var(--text-light); z-index: 1; pointer-events: none; } .input-wrapper input { width: 100%; padding: clamp(16px, 2vw, 18px) clamp(18px, 2.2vw, 20px); font-size: clamp(16px, 1.6vw, 18px); border: 2px solid var(--border-color); border-radius: 12px; background: #f9fafb; color: var(--text-dark); transition: all 0.3s ease; outline: none; } .input-wrapper input:focus { border-color: var(--primary-color); background: var(--white); box-shadow: 0 0 0 4px rgba(50, 150, 100, 0.1); transform: translateY(-1px); } .input-wrapper input::placeholder { color: #9ca3af; } .toggle-password { position: absolute; right: 12px; background: none; border: none; cursor: pointer; padding: 8px; border-radius: 8px; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; color: var(--text-light); z-index: 1; } .toggle-password:hover { background: rgba(50, 150, 100, 0.1); color: var(--primary-color); } /* Container do olho */ .eye-container { width: 24px; height: 24px; position: relative; display: flex; align-items: center; justify-content: center; } /* Olho aberto */ .eye-open { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transform: scale(0.8); transition: opacity 0.3s ease, transform 0.3s ease; } .eye-open svg { width: 100%; height: 100%; color: #6b7280; transition: color 0.3s ease; } /* Olho fechado */ .eye-closed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; transform: scale(1); transition: opacity 0.3s ease, transform 0.3s ease; } .eye-closed svg { width: 100%; height: 100%; color: #6b7280; transition: color 0.3s ease; } .toggle-password:hover .eye-open svg, .toggle-password:hover .eye-closed svg { color: var(--primary-color); } /* Estado: Senha visível */ .eye-container.visible .eye-open { opacity: 1; transform: scale(1); } .eye-container.visible .eye-closed { opacity: 0; transform: scale(0.8); } .form-options { display: flex; align-items: center; margin-bottom: 32px; font-size: 14px; } .checkbox-label { display: flex; align-items: center; cursor: pointer; color: var(--text-dark); user-select: none; position: relative; font-size: clamp(15px, 1.5vw, 17px); } .terms-link { color: var(--primary-color); text-decoration: none; font-weight: 500; transition: color 0.3s ease; } .terms-link:hover { color: var(--medium-green); text-decoration: underline; } .checkbox-label input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; } .checkmark { width: 20px; height: 20px; border: 2px solid #d1d5db; border-radius: 6px; margin-right: 10px; position: relative; transition: all 0.3s ease; flex-shrink: 0; background: #f9fafb; display: flex; align-items: center; justify-content: center; } .checkmark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: translate(-50%, -60%) rotate(45deg) scale(0); transition: transform 0.3s ease; } .checkbox-label input[type="checkbox"]:checked~.checkmark { background: linear-gradient(135deg, var(--primary-color) 0%, var(--medium-green) 100%); border-color: var(--primary-color); } .checkbox-label input[type="checkbox"]:checked~.checkmark::after { transform: translate(-50%, -60%) rotate(45deg) scale(1); } .forgot-password-container { margin-top: 8px; text-align: center; font-size: clamp(15px, 1.5vw, 17px); } .forgot-password { color: var(--primary-color); text-decoration: none; font-weight: 500; transition: all 0.3s ease; position: relative; display: inline-block; } .forgot-password::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: linear-gradient(135deg, var(--primary-color) 0%, var(--medium-green) 100%); transition: width 0.3s ease; } .forgot-password:hover { color: var(--medium-green); } .forgot-password:hover::after { width: 100%; } .login-button { width: 100%; padding: clamp(18px, 2vw, 20px); font-size: clamp(17px, 1.7vw, 19px); font-weight: 600; color: var(--white); background: linear-gradient(135deg, var(--dark-green) 0%, var(--medium-green) 100%); border: none; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(19, 85, 45, 0.4); position: relative; overflow: hidden; margin-top: 8px; } .login-button::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s ease; } .login-button:hover::before { left: 100%; } .login-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(19, 85, 45, 0.5); } .login-button:active { transform: translateY(0); } .login-button span { position: relative; z-index: 1; } .login-button.loading { pointer-events: none; } .login-button.loading span { opacity: 0; } .login-button.loading::after { content: ""; position: absolute; width: 20px; height: 20px; top: 50%; left: 50%; margin-left: -10px; margin-top: -10px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 0.8s linear infinite; z-index: 1; } @keyframes spin { to { transform: rotate(360deg); } } .button-icon { width: 20px; height: 20px; position: relative; z-index: 1; } .form-footer { margin-top: 32px; text-align: center; font-size: 14px; color: var(--text-light); } .form-footer a { color: var(--primary-color); text-decoration: none; font-weight: 600; transition: color 0.3s ease; } .form-footer a:hover { color: var(--medium-blue); text-decoration: underline; } /* Responsividade */ @media (max-width: 968px) { .login-content { grid-template-columns: 1fr; max-width: 500px; } .left-section { display: none; } .right-section { padding: 40px 30px; } } @media (max-width: 480px) { .login-container { padding: 10px; } .right-section { padding: 30px 20px; } .form-header h2 { font-size: 24px; } .system-title { font-size: 28px; } } /* Animações de entrada */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .login-form-container { animation: fadeInUp 0.6s ease-out; } .input-group { animation: fadeInUp 0.6s ease-out; animation-fill-mode: both; } .input-group:nth-child(1) { animation-delay: 0.1s; } .input-group:nth-child(2) { animation-delay: 0.2s; } .form-options { animation: fadeInUp 0.6s ease-out; animation-delay: 0.3s; animation-fill-mode: both; } .login-button { animation: fadeInUp 0.6s ease-out; animation-delay: 0.4s; animation-fill-mode: both; } /* ====== dashboard.css ====== */ /* Container principal */ #dashboardContent { width: 100%; height: calc(100vh - 120px); overflow: auto; padding: 20px; } /* ==================== BOTÃO DE ALTERNÂNCIA ==================== */ .view-toggle-container { margin-right: 20px; } .view-toggle-button { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--primary-color); color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .view-toggle-button:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } .view-toggle-button svg { width: 20px; height: 20px; } /* Ocultar ícone inativo */ .view-toggle-button .icon-kanban, .view-toggle-button .icon-table { display: none; } /* Modo Kanban - mostrar ícone de tabela */ .view-toggle-button[data-view="kanban"] .icon-table { display: block; } /* Modo Tabela - mostrar ícone de kanban */ .view-toggle-button[data-view="table"] .icon-kanban { display: block; } /* ==================== VISUALIZAÇÃO KANBAN ==================== */ .kanban-view { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; height: 100%; overflow-x: auto; padding-bottom: 20px; } .kanban-column { background: #f8f9fa; border-radius: 12px; padding: 16px; min-height: 400px; display: flex; flex-direction: column; } .kanban-column-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid rgba(0, 0, 0, 0.1); } .kanban-column-title { font-size: 16px; font-weight: 600; color: #2c3e50; display: flex; align-items: center; gap: 8px; } .kanban-column-count { background: rgba(0, 0, 0, 0.1); color: #2c3e50; padding: 4px 10px; border-radius: 12px; font-size: 13px; font-weight: 600; } .kanban-cards { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 4px; } /* Scrollbar personalizada para colunas */ .kanban-cards::-webkit-scrollbar { width: 6px; } .kanban-cards::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 10px; } .kanban-cards::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 10px; } .kanban-cards::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } /* Cards do Kanban */ .kanban-card { background: white; border-radius: 8px; padding: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); cursor: pointer; transition: all 0.2s ease; border-left: 4px solid #ccc; } .kanban-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .kanban-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; } .kanban-card-title { font-size: 15px; font-weight: 600; color: #2c3e50; line-height: 1.4; flex: 1; } .kanban-card-status { padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap; margin-left: 8px; } .kanban-card-body { display: flex; flex-direction: column; gap: 8px; } .kanban-card-info { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #6c757d; } .kanban-card-info svg { width: 14px; height: 14px; stroke: currentColor; } .kanban-card-budget { font-size: 15px; font-weight: 700; color: #27ae60; margin-top: 4px; } /* Cores das colunas */ .kanban-column[data-status="briefing"] .kanban-column-header { border-bottom-color: #06b6d4; } .kanban-column[data-status="briefing"] .kanban-card { border-left-color: #06b6d4; } .kanban-column[data-status="concorrencia"] .kanban-column-header { border-bottom-color: #3b82f6; } .kanban-column[data-status="concorrencia"] .kanban-card { border-left-color: #3b82f6; } .kanban-column[data-status="andamento"] .kanban-column-header { border-bottom-color: #8b5cf6; } .kanban-column[data-status="andamento"] .kanban-card { border-left-color: #8b5cf6; } .kanban-column[data-status="finalizado"] .kanban-column-header { border-bottom-color: #10b981; } .kanban-column[data-status="finalizado"] .kanban-card { border-left-color: #10b981; } .kanban-column[data-status="cancelado"] .kanban-column-header { border-bottom-color: #ef4444; } .kanban-column[data-status="cancelado"] .kanban-card { border-left-color: #ef4444; } /* Status tags */ .status-tag { padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap; } .status-tag.concorrencia { background: #dbeafe; color: #1e40af; } .status-tag.andamento { background: #ede9fe; color: #6d28d9; } .status-tag.finalizado { background: #d1fae5; color: #065f46; } .status-tag.briefing { background: #cffafe; color: #0e7490; } .status-tag.cancelado { background: #fee2e2; color: #991b1b; } /* ==================== VISUALIZAÇÃO TABELA ==================== */ .table-view { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .table-container { overflow-x: auto; } .events-table { width: 100%; border-collapse: collapse; } .events-table thead { background: #f8f9fa; position: sticky; top: 0; z-index: 10; } .events-table th { padding: 14px 16px; text-align: left; font-size: 13px; font-weight: 600; color: #2c3e50; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid #dee2e6; } .events-table tbody tr { border-bottom: 1px solid #e9ecef; transition: background-color 0.2s ease; } .events-table tbody tr:hover { background-color: #f8f9fa; } .events-table td { padding: 12px 16px; font-size: 14px; color: #495057; } .events-table td:first-child { font-weight: 600; color: #2c3e50; } .table-status-tag { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; } .table-budget { font-weight: 700; color: #27ae60; } /* ==================== DASHBOARD FILTERS ==================== */ .dashboard-filters { display: grid; grid-template-columns: repeat(5, minmax(160px, 1fr)); gap: 16px; margin-bottom: 20px; } .dashboard-filters .filter-field { display: flex; flex-direction: column; gap: 6px; } .dashboard-filters .filter-field label { font-size: 12px; font-weight: 600; color: var(--text-dark); text-transform: uppercase; letter-spacing: 0.4px; } .dashboard-filters .filter-field .form-control { height: 40px; } @media (max-width: 1200px) { .dashboard-filters { grid-template-columns: repeat(3, minmax(160px, 1fr)); } } @media (max-width: 768px) { .dashboard-filters { grid-template-columns: repeat(1, minmax(0, 1fr)); } } /* ==================== MENSAGEM VAZIA ==================== */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; } .data-table td.empty-state { display: table-cell; text-align: center; } .empty-state svg { width: 80px; height: 80px; color: #cbd5e0; margin-bottom: 20px; } .empty-state h3 { font-size: 20px; color: #2c3e50; margin-bottom: 8px; } .empty-state p { font-size: 14px; color: #6c757d; } /* ==================== RESPONSIVIDADE ==================== */ @media (max-width: 768px) { .kanban-view { grid-template-columns: 1fr; } .view-toggle-text { display: none; } .view-toggle-button { padding: 10px; } .table-container { font-size: 12px; } .events-table th, .events-table td { padding: 10px 12px; font-size: 12px; } } /* ==================== ANIMAÇÕES ==================== */ @keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .kanban-card, .events-table tbody tr { animation: slideIn 0.3s ease-out; }