/* ============================================================ TechDesk — HB Móveis UI Style Guide 1.0 Brand: #E75C34 · #ED882B · #F4B937 · #F4E7D7 · #003649 ============================================================ */ /* Fontes carregadas via no do index (mais rápido que @import) */ /* ── Visby CF (fonte principal — arquivos .woff em assets/fonts/visby/) ── */ @font-face { font-family:'Visby CF'; src:url('../fonts/visby/VisbyCF-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Visby CF'; src:url('../fonts/visby/VisbyCF-Medium.woff') format('woff'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'Visby CF'; src:url('../fonts/visby/VisbyCF-Bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:'Visby CF'; src:url('../fonts/visby/VisbyCF-Heavy.woff') format('woff'); font-weight:800; font-style:normal; font-display:swap; } /* ── VARIÁVEIS ── */ :root { /* Brand */ --hot-orange: #E75C34; --orange: #ED882B; --yellow: #F4B937; --nude: #F4E7D7; --dark-blue: #003649; /* Grayscale HB */ --gray-10: #E5EBED; --gray-20: #CCD7DB; --gray-30: #B3C3C8; --gray-40: #D1D3DC; --gray-50: #809BA4; --gray-60: #668692; --gray-70: #4D7280; --gray-80: #335E6D; --gray-90: #1A4A5B; --gray-100: #003649; /* Aliases */ --primary: #E75C34; --primary-light: #F07050; --primary-dark: #C04020; --primary-faint: rgba(231,92,52,.1); --primary-faint2:rgba(231,92,52,.05); --secondary: #ED882B; --secondary-bg: rgba(237,136,43,.1); --cream: #F4E7D7; --petrol: #003649; --petrol-light: #004E68; --petrol-dark: #002233; --petrol-muted: #1A4A5B; --navy: #003649; --navy-light: #004E68; --navy-dark: #002233; --navy-muted: #1A4A5B; --gold: #E75C34; --gold-light: #F07050; --gold-dark: #C04020; --gold-faint: rgba(231,92,52,.1); --gold-faint2: rgba(231,92,52,.05); /* Backgrounds */ --bg: #F0F4F5; --bg2: #003649; --bg3: #002233; --bg4: #004E68; --bg-card: #FFFFFF; --bg-card-alt: #F4E7D7; --bg-input: #FFFFFF; --bg-row-hover: rgba(231,92,52,.05); --surface: rgba(0,54,73,.04); /* Bordas */ --border: #CCD7DB; --border2: #B3C3C8; /* Texto */ --text: #003649; --text2: #4D7280; --text3: #809BA4; /* Semânticas */ --green: #2ECC71; --green-bg: rgba(46,204,113,.1); --red: #E74C3C; --red-bg: rgba(231,76,60,.1); --blue: #4D7280; --blue-bg: rgba(77,114,128,.1); --purple: #8B5CF6; --purple-bg: rgba(139,92,246,.1); --yellow-bg: rgba(244,185,55,.12); --orange-bg: rgba(237,136,43,.1); /* Tipografia */ --font-display: 'Visby CF', 'Inter', sans-serif; --font-body: 'Visby CF', 'Inter', sans-serif; --font-mono: 'IBM Plex Mono', monospace; /* Formas */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 20px; /* Sombras */ --shadow-sm: 0 1px 3px rgba(0,54,73,.08); --shadow: 0 4px 16px rgba(0,54,73,.1); --shadow-lg: 0 8px 32px rgba(0,54,73,.14); --shadow-gold: 0 0 0 1px rgba(231,92,52,.25), 0 4px 20px rgba(231,92,52,.08); } /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-light); } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--gray-10); } ::-webkit-scrollbar-thumb { background: var(--gray-30); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--gray-50); } /* ════════════════════════════════════════════════════════════ LOGIN — Split layout ════════════════════════════════════════════════════════════ */ #screen-login { align-items: stretch; justify-content: stretch; background: #003649; position: relative; overflow: hidden; flex-direction: row; } .login-bg-glow { flex: 1; background: linear-gradient(160deg, #003649 0%, #1A4A5B 60%, #004E68 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 48px; position: relative; overflow: hidden; } .login-bg-glow::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(244,231,215,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(244,231,215,.04) 1px, transparent 1px); background-size: 40px 40px; } .login-bg-glow::after { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(231,92,52,.15) 0%, transparent 65%); bottom: -120px; right: -120px; } .login-card { width: 480px; flex-shrink: 0; background: #FFFFFF; border: none; border-radius: 0; padding: 60px 48px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; box-shadow: -8px 0 40px rgba(0,54,73,.2); overflow-y: auto; } .login-logo-wrap { display: flex; justify-content: center; margin-bottom: 24px; position: relative; z-index: 1; } .login-logo-wrap img { height: 80px; width: auto; filter: brightness(0) invert(1); } .login-tagline-left { text-align: center; position: relative; z-index: 1; } .login-tagline-left h2 { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: #F4E7D7; margin-bottom: 10px; line-height: 1.2; } .login-tagline-left p { font-size: 14px; color: rgba(244,231,215,.55); line-height: 1.7; max-width: 280px; } .login-tagline { display: none; } .login-divider { display: none; } .login-form-title { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: #003649; margin-bottom: 6px; } .login-form-sub { font-size: 13px; color: #809BA4; margin-bottom: 36px; } .login-card label { color: #335E6D; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .login-card .form-control { background: #F0F4F5; border-color: #CCD7DB; color: #003649; margin-top: 6px; } .login-card .form-control::placeholder { color: #809BA4; } .login-card .form-control:focus { border-color: #E75C34; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(231,92,52,.1); } .login-demo-hint { font-size: 12px; color: var(--text3); margin-top: 16px; text-align: center; } .login-demo-hint strong { color: var(--primary); cursor: pointer; } /* ════════════════════════════════════════════════════════════ SCREENS ════════════════════════════════════════════════════════════ */ /* ── Login screen ── */ #screen-login { display: none; position: fixed; inset: 0; z-index: 10; flex-direction: row; } #screen-login.active { display: flex; } /* ── App screen ── */ #screen-app { display: none; position: fixed; inset: 0; flex-direction: column; background: var(--bg); } #screen-app.active { display: flex; } /* ════════════════════════════════════════════════════════════ TOPBAR — petróleo escuro, identidade da marca ════════════════════════════════════════════════════════════ */ .topbar { height: 60px; background: #003649; border-bottom: 1px solid rgba(244,231,215,.08); display: flex; align-items: center; padding: 0 20px; gap: 12px; flex-shrink: 0; position: relative; z-index: 100; } .topbar-logo img { height: 32px; width: auto; filter: brightness(0) invert(1); } .topbar-separator { width: 1px; height: 28px; background: rgba(244,231,215,.15); flex-shrink: 0; } .topbar-product { display: flex; align-items: center; gap: 8px; } .topbar-product-icon { width: 28px; height: 28px; background: rgba(231,92,52,.2); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 14px; } .topbar-product-name { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #F4E7D7; } .topbar-product-sub { font-size: 10px; color: rgba(244,231,215,.4); text-transform: uppercase; letter-spacing: .06em; } .topbar-nav { display: flex; align-items: center; gap: 2px; margin-left: 16px; flex: 1; } .nav-btn { padding: 8px 16px; background: transparent; border: none; color: rgba(244,231,215,.6); border-radius: var(--radius); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; white-space: nowrap; position: relative; } .nav-btn:hover { background: rgba(244,231,215,.08); color: #F4E7D7; } .nav-btn.active { color: #F4E7D7; background: rgba(231,92,52,.15); } .nav-btn.active::after { content: ''; position: absolute; bottom: 0; left: 16px; right: 16px; height: 2px; background: #E75C34; border-radius: 2px 2px 0 0; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; } .user-badge { display: flex; align-items: center; gap: 10px; padding: 4px 10px; background: rgba(244,231,215,.06); border-radius: var(--radius); border: 1px solid rgba(244,231,215,.1); } .user-badge-info { line-height: 1.3; } .user-badge-name { font-size: 13px; font-weight: 600; color: #F4E7D7; } .role-badge { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .role-admin { color: #E75C34; } .role-user { color: rgba(244,231,215,.5); } .role-viewer { color: #ED882B; } /* ════════════════════════════════════════════════════════════ LAYOUT PRINCIPAL ════════════════════════════════════════════════════════════ */ .main-content { padding: 28px 32px; flex: 1; overflow-y: auto; overflow-x: hidden; background: var(--bg); min-height: 0; } .panel { display: none; } .panel.active { display: block; overflow-y: auto; height: 100%; } .panel.active > * { max-width: 1320px; margin-left: auto; margin-right: auto; } .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; } .page-title-wrap {} .page-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--dark-blue); } .page-title-accent { color: var(--primary); } .page-subtitle { font-size: 13px; color: var(--text2); margin-top: 2px; } /* ════════════════════════════════════════════════════════════ CARDS ════════════════════════════════════════════════════════════ */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .card + .card { margin-top: 16px; } /* ── KPIs do dashboard admin ── */ .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; } .kpi-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; transition: transform .15s, box-shadow .15s; } .kpi-card[onclick]:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .kpi-ico { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 19px; } .kpi-lbl { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; margin-top: 12px; font-weight: 700; } .kpi-val { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; line-height: 1; font-family: var(--font-display); } .kpi-sub { font-size: 11px; color: var(--text3); margin-top: 5px; } .status-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .status-chip { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; cursor: pointer; transition: .15s; display: flex; align-items: center; gap: 11px; } .status-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--primary); } .chip-dot { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .chip-n { font-size: 20px; font-weight: 800; line-height: 1; font-family: var(--font-display); } .chip-t { font-size: 10.5px; color: var(--text3); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; margin-top: 2px; } @media (max-width: 900px) { .kpi-row { grid-template-columns: 1fr 1fr; } .status-chips { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 480px) { .status-chips { grid-template-columns: 1fr 1fr; } } /* ── Cards do painel de relatórios (gráficos) ── */ .rel-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 20px 22px; } .rel-card .card-title { margin-bottom: 14px; } /* ── Cards de chamado (detalhamento) ── */ .rel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; } .rel-tk { background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); } .rel-tk.s-resolved { border-left-color: var(--green); } .rel-tk.s-closed { border-left-color: var(--text3); } .rel-tk.s-progress { border-left-color: var(--amber); } .rel-tk.s-open { border-left-color: var(--blue); } .rel-tk-top { padding: 13px 15px 10px; border-bottom: 1px solid var(--paper, #F7F1E8); } .rel-tk-row1 { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; } .rel-tk-title { font-weight: 700; font-size: 14px; color: var(--dark-blue); line-height: 1.35; } .rel-tk-type { font-size: 12px; color: var(--text2); margin-top: 3px; } .rel-tk-body { padding: 11px 15px; display: flex; flex-direction: column; gap: 9px; } .rel-tk-line { display: flex; justify-content: space-between; align-items: center; font-size: 12px; gap: 10px; } .rel-tk-line .k { color: var(--text3); white-space: nowrap; } .rel-tk-line .v { font-weight: 600; color: var(--text); text-align: right; } .rel-tempos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 3px; padding-top: 10px; border-top: 1px dashed var(--border); } .rel-tempo { text-align: center; padding: 7px 4px; border-radius: 8px; background: var(--gray-10, #F7F1E8); } .rel-tempo .tl { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--text3); } .rel-tempo .tv { font-size: 13px; font-weight: 800; margin-top: 2px; white-space: nowrap; } .rel-tempo.t-total .tv { color: var(--dark-blue); } .rel-tempo.t-ocio .tv { color: var(--text3); } .rel-tempo.t-real { background: rgba(39,174,96,.1); } .rel-tempo.t-real .tv { color: var(--green); } .rel-tk-desc { font-size: 12px; color: var(--text2); background: #F9F5F0; border-radius: 8px; padding: 8px 10px; line-height: 1.5; } .rel-tk-desc b { color: var(--text3); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: 2px; } .card-header { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #F4E7D7; } .card-title { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; color: var(--dark-blue); } .card-title-icon { width: 28px; height: 28px; background: rgba(231,92,52,.12); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 14px; } /* Stats */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; } .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 16px; cursor: default; transition: transform .15s, border-color .15s, box-shadow .15s; box-shadow: var(--shadow-sm); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--gray-30); } .stat-card.featured { border-color: rgba(231,92,52,.3); background: rgba(231,92,52,.04); box-shadow: 0 2px 8px rgba(231,92,52,.1); } .stat-icon { font-size: 20px; display: block; margin-bottom: 8px; } .stat-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; margin-bottom: 4px; } .stat-value { font-size: 26px; font-weight: 700; font-family: var(--font-display); } /* ════════════════════════════════════════════════════════════ BOTÕES ════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; /* altura padrão — alinha todos os botões */ padding: 0 18px; border-radius: var(--radius); font-size: 13px; font-weight: 600; font-family: var(--font-body); cursor: pointer; border: 1px solid transparent; transition: all .15s; white-space: nowrap; text-decoration: none; line-height: 1; box-sizing: border-box; vertical-align: middle; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-primary { background: #E75C34; color: #FFFFFF; border-color: #E75C34; } .btn-primary:hover { background: #C04020; border-color: #C04020; } .btn-secondary { background: #FFFFFF; color: #003649; border-color: #B3C3C8; } .btn-secondary:hover { background: #E5EBED; border-color: #4D7280; color: #003649; } .btn-gold { background: rgba(231,92,52,.1); color: #E75C34; border-color: rgba(231,92,52,.25); } .btn-gold:hover { background: rgba(231,92,52,.18); border-color: #E75C34; } .btn-ghost { background: transparent; color: rgba(244,231,215,.7); border-color: rgba(244,231,215,.15); } .btn-ghost:hover { background: rgba(244,231,215,.1); color: #F4E7D7; border-color: rgba(244,231,215,.3); } /* btn-ghost no conteúdo claro */ .card .btn-ghost, .modal .btn-ghost, .main-content .btn-ghost, .filter-bar .btn-ghost { color: var(--gray-70); border-color: var(--border); } .card .btn-ghost:hover, .modal .btn-ghost:hover, .main-content .btn-ghost:hover, .filter-bar .btn-ghost:hover { background: var(--gray-10); color: var(--dark-blue); border-color: var(--gray-30); } .btn-danger { background: #E74C3C; color: #FFFFFF; border-color: #E74C3C; } .btn-danger:hover { background: #C0392B; border-color: #C0392B; } .btn-success { background: #27AE60; color: #FFFFFF; border-color: #27AE60; } .btn-success:hover { background: #1E8449; border-color: #1E8449; } .btn-sm { height: 32px; padding: 0 12px; font-size: 12px; } .mt-8 { margin-top: 8px; width: 100%; justify-content: center; } /* ════════════════════════════════════════════════════════════ FORMULÁRIOS ════════════════════════════════════════════════════════════ */ .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; } .form-control { background: var(--bg-input); border: 1.5px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 10px 14px; font-size: 14px; font-family: var(--font-body); width: 100%; transition: border-color .2s, box-shadow .2s; outline: none; } .form-control:hover { border-color: var(--gray-30); } .form-control:focus { border-color: #E75C34; box-shadow: 0 0 0 3px rgba(231,92,52,.1); } .form-control::placeholder { color: var(--gray-50); } select.form-control { cursor: pointer; height: 40px; /* mesma altura dos botões */ padding: 0 38px 0 14px; /* espaço à direita para a seta */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* seta custom afastada da borda */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234D7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } textarea.form-control { resize: vertical; min-height: 80px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-hint { font-size: 11px; color: var(--text3); margin-top: 4px; } /* ════════════════════════════════════════════════════════════ TABELAS ════════════════════════════════════════════════════════════ */ table { width: 100%; border-collapse: collapse; } th { background: #F4E7D7; color: var(--gray-70); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); background: #FFFFFF; } tr:last-child td { border-bottom: none; } tr:nth-child(even) td { background: #FAFAFA; } tr:hover td { background: rgba(231,92,52,.04) !important; } .ticket-id { font-family: var(--font-mono); font-size: 12px; color: var(--primary); font-weight: 600; } /* ════════════════════════════════════════════════════════════ BADGES — Status e Prioridade ════════════════════════════════════════════════════════════ */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; } .badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} } .status-open { background: rgba(77,114,128,.1); color: #4D7280; border: 1px solid rgba(77,114,128,.2); } .status-open .badge-dot { background: #4D7280; } .status-progress { background: rgba(237,136,43,.1); color: #ED882B; border: 1px solid rgba(237,136,43,.22); } .status-progress .badge-dot { background: #ED882B; animation: blink 1.5s infinite; } .status-waiting { background: rgba(244,185,55,.1); color: #C49000; border: 1px solid rgba(244,185,55,.25); } .status-waiting .badge-dot { background: #F4B937; animation: blink 1.5s infinite; } .status-resolved { background: rgba(46,204,113,.1); color: #27AE60; border: 1px solid rgba(46,204,113,.2); } .status-resolved .badge-dot { background: #2ECC71; } .status-closed { background: rgba(128,155,164,.08); color: #809BA4; border: 1px solid #CCD7DB; } .status-closed .badge-dot { background: #809BA4; } .status-waiting-admin { background: rgba(244,185,55,.10); color: #C49000; border: 1px solid rgba(244,185,55,.30); } .status-waiting-admin .badge-dot { background: #F4B937; animation: blink 1.5s infinite; } .status-waiting-user { background: rgba(123,94,167,.10); color: #7B5EA7; border: 1px solid rgba(123,94,167,.28); } .status-waiting-user .badge-dot { background: #7B5EA7; animation: blink 1.5s infinite; } .prio-band { display: inline-block; width: 3px; height: 36px; border-radius: 2px; } .prio-band-critical { background: #E75C34; } .prio-band-high { background: #ED882B; } .prio-band-medium { background: #F4B937; } .prio-band-low { background: #4D7280; } .prio-critical { background: rgba(231,92,52,.1); color: #E75C34; border: 1px solid rgba(231,92,52,.22); } .prio-high { background: rgba(237,136,43,.1); color: #ED882B; border: 1px solid rgba(237,136,43,.22); } .prio-medium { background: rgba(244,185,55,.1); color: #C49000; border: 1px solid rgba(244,185,55,.22); } .prio-low { background: rgba(77,114,128,.08); color: #4D7280; border: 1px solid rgba(77,114,128,.18); } /* ════════════════════════════════════════════════════════════ MODAIS ════════════════════════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,54,73,.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .28s ease; } .modal-overlay.active { opacity: 1; pointer-events: all; } @keyframes slideUpSoft { from { transform: translateY(18px) scale(.97); opacity:0; } to { transform: translateY(0) scale(1); opacity:1; } } @keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-xl); width: 100%; max-width: 540px; box-shadow: 0 20px 60px rgba(0,54,73,.2); animation: slideUpSoft .35s cubic-bezier(.16,1,.3,1); overflow: hidden; } .modal-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: #F4E7D7; } .modal-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--dark-blue); } .modal-subtitle { font-size: 12px; color: var(--text2); margin-top: 3px; font-family: var(--font-mono); } .modal-close { width: 32px; height: 32px; background: rgba(0,54,73,.1); border: 1px solid rgba(0,54,73,.15); border-radius: var(--radius-sm); cursor: pointer; color: var(--gray-70); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; flex-shrink: 0; transition: all .15s; } .modal-close:hover { background: #E74C3C; color: #FFFFFF; border-color: #E74C3C; } .modal-body { padding: 24px; overflow-y: auto; max-height: 65vh; background: #FFFFFF; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: #F4E7D7; } /* ════════════════════════════════════════════════════════════ FILTROS E TABS ════════════════════════════════════════════════════════════ */ .filter-bar { display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: #F4E7D7; border-bottom: 1px solid var(--border); flex-wrap: nowrap; overflow-x: auto; } .filter-bar select.form-control { min-width: 0; width: auto; flex-shrink: 1; } .filter-bar .search-wrap { flex: 1; min-width: 160px; } .search-wrap { position: relative; flex: 1; min-width: 180px; } .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--text3); pointer-events: none; } .search-wrap .form-control { padding-left: 36px; } .detail-tabs { display: flex; gap: 2px; padding: 12px 16px 0; border-bottom: 1px solid var(--border); background: #F4E7D7; overflow-x: auto; } .detail-tab { padding: 8px 18px; border-radius: var(--radius) var(--radius) 0 0; font-size: 11px; font-weight: 700; color: var(--text2); background: transparent; border: none; cursor: pointer; transition: all .15s; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid transparent; } .detail-tab:hover { color: var(--dark-blue); background: rgba(0,54,73,.05); } .detail-tab.active { color: #E75C34; border-bottom: 2px solid #E75C34; background: rgba(231,92,52,.05); } .detail-tab-content { padding: 20px; } /* ════════════════════════════════════════════════════════════ KANBAN ════════════════════════════════════════════════════════════ */ .kanban-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px; } .kanban-col { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); } .kanban-col-header { padding: 12px 16px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; border-bottom: 2px solid var(--border); color: var(--gray-70); background: #F4E7D7; display: flex; align-items: center; justify-content: space-between; } .kanban-col-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; overflow-y: auto; max-height: 60vh; } .kanban-item { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; box-shadow: var(--shadow-sm); } .kanban-item:hover { transform: translateY(-2px); border-color: rgba(231,92,52,.3); box-shadow: var(--shadow); } /* ════════════════════════════════════════════════════════════ AVATARES ════════════════════════════════════════════════════════════ */ .user-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; color: #FFFFFF; } .avatar-gold { background: #E75C34; } .avatar-orange { background: #ED882B; } .avatar-blue { background: #4D7280; } .avatar-green { background: #27AE60; } .avatar-red { background: #E74C3C; } .avatar-purple { background: #8B5CF6; } .avatar-navy { background: #003649; } .avatar-teal { background: #1A4A5B; } .user-inline { display: flex; align-items: center; gap: 8px; } .user-inline-info { line-height: 1.3; } .user-inline-name { font-size: 13px; font-weight: 600; color: var(--text); } .user-inline-sub { font-size: 11px; color: var(--text3); } /* ════════════════════════════════════════════════════════════ DETALHE DE CHAMADO ════════════════════════════════════════════════════════════ */ .detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .detail-meta-item { } .detail-meta-label { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; } .detail-meta-value { font-size: 13px; color: var(--text); } .detail-desc-label { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; } .detail-desc-value { font-size: 14px; color: var(--text2); line-height: 1.7; } .history-item { padding: 14px 0; border-bottom: 1px solid var(--border); } .history-item:last-child { border-bottom: none; } .history-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; } .history-meta-user { font-weight: 600; font-size: 13px; color: var(--text); } .history-meta-time { font-size: 11px; color: var(--text3); font-family: var(--font-mono); } .history-meta-type { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; } .type-created { background: rgba(231,92,52,.1); color: #E75C34; } .type-status { background: rgba(237,136,43,.1); color: #ED882B; } .type-comment { background: rgba(77,114,128,.1); color: #4D7280; } /* ════════════════════════════════════════════════════════════ EMPTY STATE ════════════════════════════════════════════════════════════ */ .empty-state { text-align: center; padding: 60px 24px; color: var(--text3); background: var(--bg-card); } .empty-icon { font-size: 40px; margin-bottom: 12px; } .empty-state h3 { font-size: 16px; font-weight: 600; color: var(--text2); margin-bottom: 6px; } .empty-state p { font-size: 13px; color: var(--text3); } /* Loading */ .loading-state { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px; color: var(--text3); font-size: 13px; } @keyframes spin { to { transform: rotate(360deg); } } .spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; } .spinner-sm { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.3); border-top-color: currentColor; border-radius: 50%; animation: spin .6s linear infinite; margin-right: 6px; vertical-align: middle; } /* Toast */ .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; } .toast { padding: 12px 18px; border-radius: var(--radius); font-size: 13px; font-weight: 500; color: #FFFFFF; box-shadow: var(--shadow-lg); animation: slideUpSoft .35s cubic-bezier(.16,1,.3,1); max-width: 360px; display: flex; align-items: center; gap: 8px; } .toast-success { background: #27AE60; } .toast-error { background: #E74C3C; } .toast-warning { background: #ED882B; } .toast-info { background: #4D7280; } /* Upload */ .upload-area { border: 2px dashed var(--border2); border-radius: var(--radius); padding: 20px; text-align: center; cursor: pointer; transition: all .2s; background: var(--gray-10); } .upload-area:hover { border-color: var(--primary); background: rgba(231,92,52,.04); } .upload-area.drag-over { border-color: var(--primary); background: rgba(231,92,52,.10); transform: scale(1.01); } .upload-icon { font-size: 24px; margin-bottom: 6px; } .upload-text { font-size: 13px; color: var(--text2); font-weight: 500; } .upload-sub { font-size: 11px; color: var(--text3); margin-top: 3px; } .anexo-preview { display: flex; align-items: center; gap: 6px; background: var(--gray-10); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 12px; color: var(--text2); max-width: 200px; } .anexo-preview .anexo-remove { margin-left: auto; cursor: pointer; color: var(--red); font-size: 14px; } .anexo-img-thumb { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } /* Misc */ .ticket-id { font-family: var(--font-mono); font-size: 12px; color: var(--primary); font-weight: 600; } .section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text3); margin-bottom: 10px; } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; margin-right: 4px; flex-shrink: 0; } .hamburger span { display: block; width: 22px; height: 2px; background: rgba(244,231,215,.7); border-radius: 2px; transition: all .25s; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 150; } .mobile-menu-overlay.active { display: block; } /* Flex helpers */ .flex-center { display: flex; align-items: center; } .gap-8 { gap: 8px; } /* ════════════════════════════════════════════════════════════ MODAL DE DETALHE DO CHAMADO — layout responsivo ════════════════════════════════════════════════════════════ */ .detail-body { max-height: 80vh; overflow: hidden; } .detail-2col { display: grid; grid-template-columns: 1fr 1fr; flex: 1; overflow: hidden; min-height: 0; } .detail-col { display: flex; flex-direction: column; overflow: hidden; min-height: 0; } .detail-col-left { overflow-y: auto; border-right: 1px solid var(--border); } .detail-col-right { /* histórico flex:1 dentro */ } /* ════════════════════════════════════════════════════════════ RESPONSIVO — TABLET (≤ 1024px) ════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } .topbar-nav .nav-btn { padding: 8px 12px; font-size: 12px; } .filter-bar { flex-wrap: wrap; } .kanban-grid { grid-template-columns: repeat(2, 1fr); } /* Modal de detalhe começa a apertar — reduz grid pra evitar colunas estreitas */ .detail-2col { grid-template-columns: 1.1fr 1fr; } /* Relatórios: 3 gráficos viram 1 linha mais estreita */ .rel-graficos { grid-template-columns: 1fr 1fr !important; } } /* ════════════════════════════════════════════════════════════ RESPONSIVO — MOBILE (≤ 768px) ════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .hamburger { display: flex; } .rel-graficos, .rel-graficos2 { grid-template-columns: 1fr !important; } .rel-kpis { grid-template-columns: 1fr 1fr !important; } .topbar { padding: 0 14px; } .topbar-separator { display: none; } .topbar-product-sub { display: none; } .user-badge-info { display: none; } .topbar-right { margin-left: auto; gap: 4px; } .topbar-nav { position: fixed; top: 60px; left: -260px; width: 260px; height: calc(100vh - 60px); background: #003649; border-right: 1px solid rgba(244,231,215,.1); flex-direction: column; align-items: stretch; padding: 16px 8px; gap: 4px; z-index: 200; transition: left .25s ease; box-shadow: 4px 0 24px rgba(0,0,0,.3); overflow-y: auto; } .topbar-nav.open { left: 0; } .nav-btn { width: 100%; text-align: left; padding: 12px 16px; font-size: 14px; border-radius: var(--radius); } .nav-btn.active::after { display: none; } .nav-btn.active { border-left: 3px solid #E75C34; padding-left: 13px; } .main-content { padding: 16px 14px; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .filter-bar .search-wrap { width: 100%; } .kanban-grid { grid-template-columns: 1fr !important; } .card { overflow-x: auto; } table { min-width: 580px; font-size: 12px; } .modal-overlay { padding: 0; align-items: flex-end; } .modal { max-width: 100% !important; width: 100% !important; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 95vh; } .modal-body { max-height: 70vh; padding: 16px; } /* Modal de detalhe: empilha colunas no mobile */ .detail-body { max-height: none; overflow: visible; } .detail-2col { grid-template-columns: 1fr; overflow: visible; } .detail-col { overflow: visible; max-height: none; } .detail-col-left { border-right: none; border-bottom: 1px solid var(--border); } /* Histórico pega altura natural no mobile */ #detail-history-list { max-height: none; } /* Botões de status/prio: mais espaçados pra tocar com o dedo */ #detail-status-btns button, #detail-prio-btns button { padding: 8px 12px !important; font-size: 12px !important; } /* Header do modal não comprime mais */ .modal-header { flex-wrap: wrap; } .modal-title { font-size: 15px !important; } /* Comentário sem altura mínima excessiva */ #reply-text { min-height: 48px; } /* Listas em cards ficam respiráveis */ .card-header { padding: 12px 14px; flex-wrap: wrap; gap: 8px; } .card-title { font-size: 13px; } /* Footer do modal: botões empilham se faltar espaço */ .modal-footer { flex-wrap: wrap; gap: 8px; padding: 12px 16px; } .modal-footer .btn { flex: 1; min-width: 100px; } .form-row { grid-template-columns: 1fr; } .detail-meta { grid-template-columns: 1fr; } .page-header { flex-direction: column; align-items: flex-start; } .detail-tabs { flex-wrap: wrap; } #screen-login { flex-direction: column; } .login-bg-glow { flex: none; padding: 40px 24px 32px; min-height: 220px; } .login-logo-wrap img { height: 56px; } .login-tagline-left h2 { font-size: 20px; } .login-tagline-left p { display: none; } .login-card { width: 100%; padding: 32px 24px 40px; border-radius: 0; flex: 1; overflow-y: auto; } } /* ════════════════════════════════════════════════════════════ RESPONSIVO — MOBILE PEQUENO (≤ 480px) ════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { .filter-bar { flex-direction: column; gap: 8px; } .rel-cards { grid-template-columns: 1fr !important; } .filter-bar .form-control { width: 100% !important; } .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .stat-value { font-size: 20px; } .stat-label { font-size: 10px; } .page-title { font-size: 18px; } .main-content { padding: 12px 10px; } /* Botão flutuante (novo chamado) mais discreto */ .fab { right: 14px !important; bottom: 14px !important; } /* Modais ainda menores */ .modal-body { padding: 12px; } .modal-header { padding: 12px 14px; } .modal-title { font-size: 14px !important; } /* Tabelas ganham scroll horizontal explícito */ .card { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Bloco de descrição do chamado: fonte menor */ #detail-desc { font-size: 12px !important; } /* Cabeçalho do modal de detalhe: badges quebram linha */ #modal-ticket-detail .modal-header > div:first-child > div:nth-child(2) { gap: 6px !important; } } /* ════════════════════════════════════════════════════════════ TELAS GRANDES (≥ 1440px) ════════════════════════════════════════════════════════════ */ @media (min-width: 1440px) { .main-content { padding: 32px 40px; } .stats-grid { grid-template-columns: repeat(6, 1fr); } } /* Kanban card interno */ .kanban-cards { padding: 10px; display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 80px; } .kanban-card { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; cursor: grab; transition: transform .15s, box-shadow .15s, opacity .15s; box-shadow: var(--shadow-sm); } .kanban-card:active { cursor: grabbing; } .kanban-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .kanban-card-dragging { opacity: .45; transform: scale(.97); } .kanban-col.drag-over { background: rgba(231,92,52,.07); outline: 2px dashed var(--primary); outline-offset: -4px; } .kanban-col.drag-over .kanban-empty { color: var(--primary); font-weight: 600; } /* Rodapé do card: ações só com ícones */ .kanban-card-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); } .kc-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--gray-10); cursor: pointer; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all .15s; } .kc-btn:hover { background: #fff; border-color: var(--primary); transform: translateY(-1px); } .kc-archive:hover { border-color: #7B5EA7; background: rgba(123,94,167,.1); } .kc-del:hover { border-color: var(--red); background: rgba(192,57,43,.1); } .kanban-card-id { font-size: 10px; color: var(--text3); font-family: var(--font-mono); margin-bottom: 4px; } .kanban-card-title { font-size: 13px; font-weight: 600; color: var(--dark-blue); line-height: 1.4; } .kanban-card-meta { display: flex; gap: 6px; flex-wrap: wrap; } .kanban-count { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: rgba(0,54,73,.1); border-radius: 10px; font-size: 11px; font-weight: 700; color: var(--gray-70); } .kanban-col-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; } /* flex-between */ .flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .mb-16 { margin-bottom: 16px; } /* detail-tabs standalone (fora de card) */ .flex-between .detail-tabs { flex: 1; border-bottom: none; padding: 0; background: transparent; } .flex-between .detail-tab { border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 16px; } .flex-between .detail-tab.active { color: #E75C34; border-bottom: 2px solid #E75C34; background: transparent; } /* ── Tooltip de equipamentos ── */ .equip-tooltip-wrap { position: relative; display: inline-flex; } .equip-tooltip-wrap .equip-tooltip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #003649; color: #F4E7D7; border-radius: 8px; padding: 8px 12px; min-width: 160px; max-width: 240px; font-size: 11px; line-height: 1.6; z-index: 9999; pointer-events: none; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,.18); } .equip-tooltip-wrap .equip-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #003649; } .equip-tooltip-wrap:hover .equip-tooltip { display: block; } .equip-tooltip-title { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #C4922A; margin-bottom: 5px; } .equip-tooltip-item { display: flex; align-items: center; gap: 5px; padding: 2px 0; } .equip-tooltip-dot { width: 5px; height: 5px; border-radius: 50%; background: #F4E7D7; flex-shrink: 0; } /* ═══════════ ANIMAÇÕES (entrada, hover, transições) ═══════════ */ @keyframes riseIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } /* Entrada do painel ao trocar de aba/menu */ .panel-enter { animation: riseIn .35s cubic-bezier(.16,1,.3,1) both; } /* KPIs entram em cascata */ .kpi-row .kpi-card { animation: riseIn .5s cubic-bezier(.16,1,.3,1) both; } .kpi-row .kpi-card:nth-child(1){animation-delay:.05s} .kpi-row .kpi-card:nth-child(2){animation-delay:.12s} .kpi-row .kpi-card:nth-child(3){animation-delay:.19s} .kpi-row .kpi-card:nth-child(4){animation-delay:.26s} .status-chips .status-chip { animation: riseIn .45s cubic-bezier(.16,1,.3,1) both; } .status-chips .status-chip:nth-child(1){animation-delay:.30s} .status-chips .status-chip:nth-child(2){animation-delay:.35s} .status-chips .status-chip:nth-child(3){animation-delay:.40s} .status-chips .status-chip:nth-child(4){animation-delay:.45s} .status-chips .status-chip:nth-child(5){animation-delay:.50s} .status-chips .status-chip:nth-child(6){animation-delay:.55s} /* Hover refinado: botões sobem e afundam ao clicar */ .btn { transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s, background .15s, border-color .15s, color .15s; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(.97); } /* Linhas da tabela e cards de chamado entram em cascata */ .card table tbody tr { animation: riseIn .4s cubic-bezier(.16,1,.3,1) both; } .card table tbody tr:nth-child(1){animation-delay:.03s} .card table tbody tr:nth-child(2){animation-delay:.06s} .card table tbody tr:nth-child(3){animation-delay:.09s} .card table tbody tr:nth-child(4){animation-delay:.12s} .card table tbody tr:nth-child(5){animation-delay:.15s} .card table tbody tr:nth-child(6){animation-delay:.18s} .card table tbody tr:nth-child(7){animation-delay:.21s} .card table tbody tr:nth-child(8){animation-delay:.24s} /* cards de chamado (dashboard do usuário, se houver) */ .rel-tk, .stat-card { animation: riseIn .45s cubic-bezier(.16,1,.3,1) both; } /* Acessibilidade: desliga animações para quem prefere menos movimento */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }