/* ============================================================ GRU ERP — Design System Global v2.0 GRU Soluções e Serviços — Premium Edition ============================================================ */ /* Font loaded via layout preconnect + this import */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); /* ── Tokens CSS ──────────────────────────────────────────── */ :root { /* Cores primárias */ --c-primary: #FF4A00; --c-primary-dark: #D93A00; --c-primary-light: #FF6A2A; --c-primary-glow: rgba(255, 74, 0, 0.15); /* Neutros escuros (dark mode padrão) */ --c-bg: #0B0C10; --c-bg-card: #13151A; --c-bg-input: #0E1015; --c-bg-hover: #1A1D24; --c-border: #23272F; --c-border-light: #2F3540; /* Texto */ --c-text: #EAEDF3; --c-text-muted: #808899; --c-text-dim: #4A4F5C; /* Status */ --c-success: #22C55E; --c-warning: #F59E0B; --c-danger: #EF4444; --c-info: #3B82F6; --c-purple: #A855F7; /* Técnicos — status cores */ --status-online: #22C55E; --status-online-sem-os: #3B82F6; --status-offline: #6B7280; --status-deslocamento: #F59E0B; --status-executando: #F97316; --status-aguardando: #111111; --status-finalizado: #84CC16; /* Sidebar */ --sidebar-width: 260px; --topbar-height: 64px; /* Espaçamento */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Bordas */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full:9999px; /* Sombras */ --shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2); --shadow-md: 0 4px 16px rgba(0,0,0,.35); --shadow-lg: 0 12px 40px rgba(0,0,0,.4); --shadow-xl: 0 24px 80px rgba(0,0,0,.5); --shadow-glow:0 0 30px var(--c-primary-glow); /* Glass */ --glass-bg: rgba(19, 21, 26, 0.7); --glass-border: rgba(255, 255, 255, 0.06); --glass-blur: 12px; /* Transições */ --tr-fast: .15s cubic-bezier(.4,0,.2,1); --tr-base: .25s cubic-bezier(.4,0,.2,1); --tr-slow: .4s cubic-bezier(.4,0,.2,1); /* Typography */ --font: 'Inter', system-ui, -apple-system, sans-serif; --fs-xs: .75rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 1.875rem; --fs-4xl: 2.25rem; } /* Light mode */ [data-theme="light"] { --c-bg: #F3F4F8; --c-bg-card: #FFFFFF; --c-bg-input: #F0F1F5; --c-bg-hover: #E8EAF0; --c-border: #DDE1E8; --c-border-light:#C8CDD6; --c-text: #1A1D26; --c-text-muted: #5C6170; --c-text-dim: #9198A5; --glass-bg: rgba(255, 255, 255, 0.7); --glass-border: rgba(0, 0, 0, 0.06); } /* ── Reset ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; /* CRITICAL: Do NOT set any overflow on — iOS WebKit PWA breaks vertical scroll */ } body { font-family: var(--font); background: var(--c-bg); color: var(--c-text); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } a { color: var(--c-primary); text-decoration: none; transition: color var(--tr-base); } a:hover { color: var(--c-primary-light); } img, svg { display: block; max-width: 100%; } /* ── Scrollbar personalizada ─────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--c-border-light); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--c-text-dim); } /* ── Layout Principal ────────────────────────────────────── */ .app-wrapper { display: flex; min-height: 100vh; } /* ── Sidebar ──────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-width); background: linear-gradient(180deg, rgba(19, 21, 26, 0.98) 0%, rgba(11, 12, 16, 0.98) 100%); border-right: 1px solid var(--c-border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; transition: transform var(--tr-base), width var(--tr-base); overflow: hidden; overscroll-behavior: contain; box-shadow: 8px 0 32px rgba(0,0,0,.22); } .sidebar-logo { padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--c-border); display: flex; align-items: center; gap: var(--sp-3); min-height: var(--topbar-height); margin: 8px 12px 0; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(255,74,0,.12), transparent 70%); } .sidebar-logo img { width: 36px; height: 36px; object-fit: contain; } .sidebar-logo-text { font-size: var(--fs-sm); font-weight: 700; color: var(--c-text); line-height: 1.3; } .sidebar-logo-text span { color: var(--c-primary); } .sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 0; overscroll-behavior: contain; } .nav-section { padding: 8px 20px 2px; font-size: .625rem; text-transform: uppercase; letter-spacing: .1em; color: var(--c-text-dim); font-weight: 600; } .nav-item { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 16px; margin: 2px 12px; color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: 600; border-radius: var(--radius-md); transition: background var(--tr-fast), color var(--tr-fast), transform var(--tr-fast); position: relative; cursor: pointer; } .nav-item:hover { color: var(--c-text); background: var(--c-bg-hover); transform: translateX(2px); } .nav-item.active { color: var(--c-primary); background: var(--c-primary-glow); box-shadow: 0 4px 12px var(--c-primary-glow); font-weight: 700; } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; background: var(--c-primary); border-radius: var(--radius-full); } .nav-item .icon { width: 20px; height: 20px; flex-shrink: 0; opacity: .7; } .nav-item.active .icon { opacity: 1; } .nav-badge { margin-left: auto; background: var(--c-primary); color: #fff; font-size: .625rem; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-full); min-width: 18px; text-align: center; } .sidebar-footer { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--c-border); margin: 8px 12px 12px; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(255,74,0,.08), transparent 80%); border: 1px solid var(--c-border); } /* ── Topbar ─────────────────────────────────────────────── */ .topbar { position: fixed; top: 0; left: var(--sidebar-width); right: 0; height: var(--topbar-height); background: linear-gradient(90deg, rgba(19,21,26,.92) 0%, rgba(19,21,26,.86) 60%, rgba(11,12,16,.94) 100%); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; padding: 0 var(--sp-6); gap: var(--sp-4); z-index: 100; transition: left var(--tr-base); box-shadow: 0 8px 24px rgba(0,0,0,.16); } .topbar-title { font-size: var(--fs-xl); font-weight: 700; color: var(--c-text); flex: 1; } .topbar-actions { display: flex; align-items: center; gap: var(--sp-3); } .topbar-btn { width: 40px; height: 40px; border: none; background: var(--c-bg-hover); border-radius: var(--radius-md); color: var(--c-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--tr-fast); position: relative; } .topbar-btn:hover { background: var(--c-border); color: var(--c-text); transform: scale(1.05); } /* Ícone de Notificação (Sino) sempre Vermelho Claro/Vibrante */ #notif-btn svg, #notif-toggle svg, .sidebar-nav a[href="/admin/notificacoes"] svg { color: #EF4444 !important; } /* Alternador de Tema Day/Night (Sol/Lua) - Dourado no Dark Mode, Âmbar no Light Mode */ [data-theme="dark"] #theme-btn svg { color: #FFB800 !important; } [data-theme="light"] #theme-btn svg { color: #FF9F0A !important; } /* Ícone de menu Hambúrguer sempre Laranja */ .mobile-toggle svg, [data-theme="dark"] .mobile-toggle svg, [data-theme="light"] .mobile-toggle svg { color: #FF4A00 !important; } .notif-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: var(--c-primary); border-radius: 50%; border: 2px solid var(--c-bg-card); animation: pulseNotif 2s ease infinite; } @keyframes pulseNotif { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,74,0,.4); } 50% { box-shadow: 0 0 0 6px rgba(255,74,0,0); } } .avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-sm); color: #fff; cursor: pointer; flex-shrink: 0; transition: transform var(--tr-fast), box-shadow var(--tr-fast); } .avatar:hover { transform: scale(1.08); box-shadow: 0 0 20px rgba(255,74,0,.3); } /* ── Main Content ────────────────────────────────────────── */ .main-content { margin-left: var(--sidebar-width); margin-top: var(--topbar-height); flex: 1; padding: var(--sp-6); transition: margin-left var(--tr-base); min-height: calc(100vh - var(--topbar-height)); max-width: calc(100vw - var(--sidebar-width, 0px)); width: calc(100vw - var(--sidebar-width, 0px)); overflow-x: hidden; overflow-y: visible; box-sizing: border-box; } /* ── Cards ───────────────────────────────────────────────── */ .card { background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-6); transition: border-color var(--tr-base), box-shadow var(--tr-base), transform var(--tr-base); position: relative; overflow: hidden; max-width: 100%; box-sizing: border-box; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); min-width: 0; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--glass-border), transparent); opacity: 0; transition: opacity var(--tr-base); } .card:hover { border-color: var(--c-border-light); box-shadow: 0 14px 32px rgba(0,0,0,.18); } .card:hover::before { opacity: 1; } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border); } .card-title { font-size: var(--fs-base); font-weight: 700; color: var(--c-text); } .card-subtitle { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: 2px; } /* ── KPI Cards ────────────────────────────────────────────── */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); } .kpi-card { background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-6); display: flex; align-items: center; gap: var(--sp-4); transition: all var(--tr-base); position: relative; overflow: hidden; } .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--kpi-color, var(--c-primary)); border-radius: 0 4px 4px 0; } .kpi-card::after { content: ''; position: absolute; top: 0; right: 0; width: 80px; height: 100%; background: linear-gradient(135deg, transparent 30%, color-mix(in srgb, var(--kpi-color, var(--c-primary)) 5%, transparent)); pointer-events: none; } .kpi-card:hover { border-color: color-mix(in srgb, var(--kpi-color, var(--c-primary)) 30%, var(--c-border)); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,.2), 0 0 20px color-mix(in srgb, var(--kpi-color, var(--c-primary)) 10%, transparent); } .kpi-icon { width: 52px; height: 52px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--kpi-color, var(--c-primary)) 12%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform var(--tr-base); } .kpi-card:hover .kpi-icon { transform: scale(1.1); } .kpi-icon svg { color: var(--kpi-color, var(--c-primary)); } .kpi-value { font-size: var(--fs-2xl); font-weight: 800; color: var(--c-text); line-height: 1.1; } .kpi-label { font-size: var(--fs-xs); color: var(--c-text-muted); font-weight: 500; margin-top: 2px; text-transform: uppercase; letter-spacing: .05em; } .kpi-trend { font-size: var(--fs-xs); font-weight: 600; margin-top: 4px; } .kpi-trend.up { color: var(--c-success); } .kpi-trend.down { color: var(--c-danger); } /* ── Tabelas ─────────────────────────────────────────────── */ .table-wrapper { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--c-border); max-width: 100%; } table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } thead th { background: var(--c-bg-hover); padding: var(--sp-3) var(--sp-4); text-align: left; font-weight: 600; color: var(--c-text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--c-border); white-space: nowrap; position: sticky; top: 0; z-index: 5; } tbody td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); color: var(--c-text); vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr { transition: background var(--tr-fast); } tbody tr:hover td { background: var(--c-bg-hover); } tbody tr:nth-child(even) td { background: rgba(255,255,255,.015); } [data-theme="light"] tbody tr:nth-child(even) td { background: rgba(0,0,0,.015); } tbody tr:nth-child(even):hover td { background: var(--c-bg-hover); } .table-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; } /* ── Buttons ─────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 9px 18px; border: none; border-radius: var(--radius-md); font-family: var(--font); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: all var(--tr-fast); white-space: nowrap; line-height: 1; position: relative; overflow: hidden; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-primary { background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark)); color: #fff; box-shadow: 0 2px 8px rgba(255,74,0,.3); } .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255,74,0,.4); } .btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(255,74,0,.3); } .btn-secondary { background: var(--c-bg-hover); color: var(--c-text); border: 1px solid var(--c-border); } .btn-secondary:hover:not(:disabled) { background: var(--c-border); border-color: var(--c-border-light); transform: translateY(-1px); } .btn-danger { background: rgba(239,68,68,.12); color: var(--c-danger); border: 1px solid rgba(239,68,68,.25); } .btn-danger:hover:not(:disabled) { background: var(--c-danger); color: #fff; border-color: var(--c-danger); } .btn-success { background: rgba(34,197,94,.12); color: var(--c-success); border: 1px solid rgba(34,197,94,.25); } .btn-success:hover:not(:disabled) { background: var(--c-success); color: #fff; border-color: var(--c-success); } .btn-sm { padding: 6px 12px; font-size: var(--fs-xs); border-radius: var(--radius-sm); } .btn-lg { padding: 12px 24px; font-size: var(--fs-base); } .btn-icon { padding: 8px; width: 36px; height: 36px; } .btn-icon-sm { padding: 5px; width: 28px; height: 28px; } /* ── Forms ───────────────────────────────────────────────── */ .form-group { margin-bottom: var(--sp-5); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .form-row-3 { grid-template-columns: 1fr 1fr 1fr; } label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--c-text-muted); margin-bottom: var(--sp-2); } label .req { color: var(--c-primary); margin-left: 2px; } .form-control { width: 100%; background: var(--c-bg-input); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 10px 14px; color: var(--c-text); font-family: var(--font); font-size: var(--fs-sm); transition: border-color var(--tr-fast), box-shadow var(--tr-fast); appearance: none; } .form-control:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-glow), 0 0 20px rgba(255,74,0,.08); } .form-control::placeholder { color: var(--c-text-dim); } .form-control:disabled { opacity: .5; cursor: not-allowed; } select.form-control { cursor: pointer; } textarea.form-control { resize: vertical; min-height: 100px; } .form-hint { font-size: var(--fs-xs); color: var(--c-text-dim); margin-top: var(--sp-1); } .form-error{ font-size: var(--fs-xs); color: var(--c-danger); margin-top: var(--sp-1); } /* ── Badges / Pills ──────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-full); font-size: .6875rem; font-weight: 600; white-space: nowrap; letter-spacing: .02em; } .badge-success { background: rgba(34,197,94,.12); color: var(--c-success); border: 1px solid rgba(34,197,94,.2); } .badge-warning { background: rgba(245,158,11,.12); color: var(--c-warning); border: 1px solid rgba(245,158,11,.2); } .badge-danger { background: rgba(239,68,68,.12); color: var(--c-danger); border: 1px solid rgba(239,68,68,.2); } .badge-info { background: rgba(59,130,246,.12); color: var(--c-info); border: 1px solid rgba(59,130,246,.2); } .badge-primary { background: var(--c-primary-glow); color: var(--c-primary); border: 1px solid rgba(255,74,0,.2); } .badge-muted { background: var(--c-bg-hover); color: var(--c-text-muted); border: 1px solid var(--c-border); } .badge-secondary{ background: var(--c-bg-hover); color: var(--c-text-muted); border: 1px solid var(--c-border); } /* Status do técnico */ .status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .status-dot.online { background: var(--status-online); box-shadow: 0 0 6px var(--status-online); } .status-dot.online-sem-os { background: var(--status-online-sem-os); } .status-dot.offline { background: var(--status-offline); } .status-dot.deslocamento { background: var(--status-deslocamento); box-shadow: 0 0 6px var(--status-deslocamento); animation: pulse 1.5s ease infinite; } .status-dot.executando { background: var(--status-executando); box-shadow: 0 0 6px var(--status-executando); animation: pulse 1.5s ease infinite; } .status-dot.aguardando { background: #1a1a1a; border: 2px solid #444; } .status-dot.finalizado { background: var(--status-finalizado); } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .7; transform: scale(1.2); } } /* ── Modals ──────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 999999; padding: var(--sp-4); opacity: 0; pointer-events: none; transition: opacity var(--tr-base); } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal { background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: var(--radius-xl); width: 100%; max-width: 640px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; transform: translateY(20px) scale(.97); transition: transform var(--tr-base); box-shadow: var(--shadow-xl); } .modal-overlay.active .modal { transform: translateY(0) scale(1); } .modal-lg { max-width: 900px; } .modal-xl { max-width: 1100px; } .modal-sm { max-width: 420px; } .modal-header { padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .modal-title { font-size: var(--fs-lg); font-weight: 700; } .modal-body { padding: var(--sp-6); overflow-y: auto; flex: 1; } .modal-footer { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--c-border); display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); flex-shrink: 0; } /* ── Custom Inline Modals (legacy support) ──────────────── */ /* Ensures modals with inline style "display:flex;position:fixed" work responsively */ div[style*="position:fixed"][style*="z-index:999"], div[style*="position: fixed"][style*="z-index: 999"], div[style*="position:fixed"][style*="z-index:9999"] { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } div[style*="position:fixed"][style*="z-index:999"] > .card, div[style*="position: fixed"][style*="z-index: 999"] > .card, div[style*="position:fixed"][style*="z-index:9999"] > .card { max-height: 90vh !important; overflow-y: auto !important; box-shadow: var(--shadow-xl) !important; border-radius: var(--radius-xl) !important; } /* ── Alerts/Toast ────────────────────────────────────────── */ .toast-container { position: fixed; top: 80px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: var(--sp-3); pointer-events: none; } .toast { background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--sp-4) var(--sp-5); display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 300px; max-width: 420px; box-shadow: var(--shadow-lg); pointer-events: auto; animation: slideIn var(--tr-base) forwards; backdrop-filter: blur(8px); } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .toast-icon { font-size: 1.25rem; flex-shrink: 0; } .toast-msg { flex: 1; font-size: var(--fs-sm); } .toast.success { border-color: var(--c-success); } .toast.error { border-color: var(--c-danger); } .toast.warning { border-color: var(--c-warning); } .toast.info { border-color: var(--c-info); } /* ── Dropdown ────────────────────────────────────────────── */ .dropdown { position: relative; } .dropdown-menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: var(--radius-md); min-width: 180px; box-shadow: var(--shadow-lg); z-index: 500; overflow: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: all var(--tr-fast); } .dropdown-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; } .dropdown-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); color: var(--c-text-muted); font-size: var(--fs-sm); cursor: pointer; transition: all var(--tr-fast); } .dropdown-item:hover { background: var(--c-bg-hover); color: var(--c-text); } .dropdown-item.danger:hover { color: var(--c-danger); } .dropdown-divider { height: 1px; background: var(--c-border); margin: 4px 0; } /* ── Search / Filter bar ─────────────────────────────────── */ .search-bar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); flex-wrap: wrap; } .search-input-wrap { position: relative; flex: 1; min-width: 200px; } .search-input-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--c-text-dim); pointer-events: none; } .search-input { width: 100%; background: var(--c-bg-input); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 9px 14px 9px 38px; color: var(--c-text); font-size: var(--fs-sm); font-family: var(--font); transition: border-color var(--tr-fast), box-shadow var(--tr-fast); } .search-input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-glow); } /* ── Paginação ───────────────────────────────────────────── */ .pagination { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) 0; gap: var(--sp-3); flex-wrap: wrap; } .pagination-info { font-size: var(--fs-sm); color: var(--c-text-muted); } .pagination-pages { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .page-btn { min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg-card); color: var(--c-text-muted); font-size: var(--fs-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--tr-fast); text-decoration: none; } .page-btn:hover { border-color: var(--c-primary); color: var(--c-primary); transform: translateY(-1px); } .page-btn.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; box-shadow: 0 2px 8px rgba(255,74,0,.3); } .page-btn:disabled, .page-btn.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; } /* ── File Upload ─────────────────────────────────────────── */ .upload-zone { border: 2px dashed var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-10); text-align: center; cursor: pointer; transition: all var(--tr-base); position: relative; } .upload-zone:hover, .upload-zone.drag-over { border-color: var(--c-primary); background: var(--c-primary-glow); } .upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; } /* ── Photo Grid ──────────────────────────────────────────── */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-3); } .photo-item { aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; position: relative; border: 2px solid var(--c-border); cursor: pointer; transition: border-color var(--tr-fast), transform var(--tr-fast); } .photo-item:hover { border-color: var(--c-primary); transform: scale(1.03); } .photo-item img { width: 100%; height: 100%; object-fit: cover; } .photo-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; background: rgba(0,0,0,.7); border-radius: 50%; border: none; color: #fff; cursor: pointer; display: none; align-items: center; justify-content: center; font-size: .75rem; } .photo-item:hover .photo-remove { display: flex; } /* ── Signature Pad ───────────────────────────────────────── */ .sig-container { border: 2px solid var(--c-border); border-radius: var(--radius-md); background: #fff; overflow: hidden; } .sig-container canvas { display: block; width: 100%; } .sig-controls { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); } /* ── Map Container ───────────────────────────────────────── */ .map-container { width: 100%; height: 500px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--c-border); position: relative; } .map-legend { position: absolute; bottom: var(--sp-4); left: var(--sp-4); background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--sp-4); z-index: 10; display: flex; flex-direction: column; gap: var(--sp-2); max-height: 300px; overflow-y: auto; } .legend-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-muted); } /* ── Tabs ────────────────────────────────────────────────── */ .tabs { display: flex; border-bottom: 1px solid var(--c-border); margin-bottom: var(--sp-6); gap: 0; overflow-x: auto; } .tab { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-sm); font-weight: 500; color: var(--c-text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--tr-fast); white-space: nowrap; } .tab:hover { color: var(--c-text); } .tab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); } /* ── Timeline (histórico OS) ─────────────────────────────── */ .timeline { padding-left: var(--sp-4); } .timeline-item { position: relative; padding: 0 0 var(--sp-5) var(--sp-6); border-left: 2px solid var(--c-border); } .timeline-item:last-child { border-left-color: transparent; } .timeline-dot { position: absolute; left: -9px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-primary); border: 3px solid var(--c-bg-card); } .timeline-time { font-size: var(--fs-xs); color: var(--c-text-dim); } .timeline-text { font-size: var(--fs-sm); color: var(--c-text); margin-top: 2px; } /* ── Utilitários ─────────────────────────────────────────── */ .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-col { display: flex; flex-direction: column; } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); } .items-center { align-items: center; } .flex-1 { flex: 1; } .w-full { width: 100%; } .text-center { text-align: center; } .text-right { text-align: right; } .text-muted { color: var(--c-text-muted); } .text-sm { font-size: var(--fs-sm); } .text-xs { font-size: var(--fs-xs); } .text-lg { font-size: var(--fs-lg); } .font-bold { font-weight: 700; } .font-600 { font-weight: 600; } .mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); } .p-4 { padding: var(--sp-4); } .p-6 { padding: var(--sp-6); } .hidden { display: none !important; } .divider { height: 1px; background: var(--c-border); margin: var(--sp-5) 0; } .text-primary { color: var(--c-primary); } .text-success { color: var(--c-success); } .text-danger { color: var(--c-danger); } .text-warning { color: var(--c-warning); } /* ── OS Flow Steps ───────────────────────────────────────── */ .os-flow { display: flex; align-items: center; gap: 0; flex-wrap: wrap; margin: var(--sp-4) 0; } .os-step { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 600; background: var(--c-bg-hover); color: var(--c-text-dim); border: 1px solid var(--c-border); white-space: nowrap; } .os-step.done { background: rgba(34,197,94,.12); color: var(--c-success); border-color: rgba(34,197,94,.25); } .os-step.active { background: var(--c-primary-glow); color: var(--c-primary); border-color: var(--c-primary); } .os-step-arrow { color: var(--c-border); font-size: .75rem; } /* ── Responsividade ──────────────────────────────────────── */ .mobile-toggle { display: none; width: 40px; height: 40px; border: none; background: transparent; color: var(--c-text); cursor: pointer; border-radius: var(--radius-sm); } @media (max-width: 1024px) { .form-row-3 { grid-template-columns: 1fr 1fr; } } /* ── Responsividade de Layout (Desktop, Tablet, Celular) ───────────────── */ /* 1. Desktop (> 1024px) - Sidebar sempre expandida */ @media (min-width: 1025px) { .sidebar { width: 260px !important; transform: translateX(0) !important; } .topbar { left: 260px !important; } .main-content { margin-left: 260px !important; max-width: calc(100vw - 260px) !important; width: calc(100vw - 260px) !important; box-sizing: border-box !important; overflow-x: hidden !important; } .mobile-toggle { display: none !important; } } /* 2. Tablet (769px a 1024px) - Sidebar retrátil e compacta (somente ícones) */ @media (min-width: 769px) and (max-width: 1024px) { :root { --sidebar-width: 70px; } .sidebar { width: 70px !important; transform: translateX(0) !important; overflow: hidden !important; } .sidebar .sidebar-logo { justify-content: center !important; padding: var(--sp-2) !important; } .sidebar .sidebar-logo img { max-height: 30px !important; } .sidebar .sidebar-logo-text, .sidebar .nav-item span, .sidebar .nav-section, .sidebar .sidebar-footer { display: none !important; } .sidebar .nav-item { justify-content: center !important; padding: 10px !important; margin: 4px 8px !important; border-radius: var(--radius-sm) !important; } .sidebar .nav-item svg, .sidebar .nav-item .icon { margin: 0 !important; width: 20px !important; height: 20px !important; } .topbar { left: 70px !important; } .main-content { margin-left: 70px !important; padding: var(--sp-4) !important; max-width: calc(100vw - 70px) !important; width: calc(100vw - 70px) !important; box-sizing: border-box !important; overflow-x: hidden !important; } .mobile-toggle { display: none !important; } } /* 3. Celular (<= 768px) - Sidebar Drawer (Overlay) */ @media (max-width: 768px) { :root { --sidebar-width: 0px; } .mobile-toggle { display: flex !important; align-items: center; justify-content: center; } .sidebar { position: fixed !important; top: 0; left: 0; bottom: 0; width: 260px !important; transform: translateX(-260px) !important; z-index: 99999 !important; transition: transform var(--tr-base) !important; } .sidebar.open { transform: translateX(0) !important; } .topbar { left: 0 !important; } .main-content { margin-left: 0 !important; padding: var(--sp-3) !important; } } /* ── Premium Responsive Grid System ─────────────────────────────────── */ .grid-responsive { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } @media (max-width: 1200px) { .grid-responsive { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .grid-responsive { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .grid-responsive { grid-template-columns: 1fr; } } /* ── Eliminação total de scrollbar horizontal ────────────────────── */ /* IMPORTANT: Only set overflow-x on body, NOT on html (breaks vertical scroll) */ body { overflow-x: hidden !important; max-width: 100vw !important; } /* ── Tabelas Responsivas (Mantendo Alinhamentos e Colunas) ────────── */ .table-responsive { width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; margin-bottom: 16px; border: 1px solid var(--c-border); border-radius: var(--radius-lg); max-width: 100%; box-sizing: border-box; } /* Containers — sem overflow horizontal */ .card, .main-content, .content-wrapper { overflow-x: hidden !important; max-width: 100% !important; box-sizing: border-box !important; } /* Prevent cell content from causing horizontal overflow */ .table-responsive table td, .table-responsive table th, .boletos-table td, .boletos-table th, .extrato-table td, .extrato-table th { word-break: break-word; overflow-wrap: break-word; overflow: hidden; text-overflow: ellipsis; } .table-responsive table { width: 100% !important; min-width: 0; border-collapse: collapse !important; table-layout: fixed; } .table-responsive thead th { position: sticky !important; top: 0 !important; z-index: 5 !important; background: var(--c-bg-card) !important; } /* ── Formulários Responsivos ─────────────────────────────────────────── */ .form-row, .form-row-3 { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 16px !important; width: 100% !important; } @media (max-width: 768px) { .form-row, .form-row-3 { grid-template-columns: 1fr !important; } .form-control { width: 100% !important; } } /* ── Modais Responsivos Premium (Fullscreen no Mobile) ─────────────── */ .modal-fullscreen-mobile { background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: var(--radius-xl); width: 100%; max-width: 640px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow-xl); } @media (max-width: 600px) { .modal-overlay { padding: 0 !important; } .modal, .modal-fullscreen-mobile { width: 100% !important; height: 100% !important; max-height: 100vh !important; max-width: 100vw !important; border-radius: 0 !important; margin: 0 !important; } .modal-body { flex: 1 !important; overflow-y: auto !important; } /* Inline modals fullscreen on mobile */ div[style*="position:fixed"][style*="z-index:999"] > .card, div[style*="position: fixed"][style*="z-index: 999"] > .card, div[style*="position:fixed"][style*="z-index:9999"] > .card { width: 100% !important; max-width: 100vw !important; max-height: 100vh !important; height: 100% !important; border-radius: 0 !important; margin: 0 !important; } } /* ── Botões Acessíveis para Toque (regras movidas para seção de padronização global no final do arquivo) ── */ .topbar-btn, .avatar { min-height: 40px; } /* ── Loading States ──────────────────────────────────────── */ .skeleton { background: linear-gradient(90deg, var(--c-bg-hover) 25%, var(--c-border) 50%, var(--c-bg-hover) 75%); background-size: 200% 100%; animation: skeleton 1.5s infinite; border-radius: var(--radius-sm); } @keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .spinner { width: 20px; height: 20px; border: 2px solid var(--c-border); border-top-color: var(--c-primary); border-radius: 50%; animation: spin .6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Sidebar Overlay (mobile) ────────────────────────────── */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 199; } @media (max-width: 1024px) { .sidebar-overlay.active { display: block; } } /* ── Colapso de tabelas em cards responsivos para evitar barras de rolagem ── */ @media (max-width: 1024px) { .table-responsive-cards { display: block; width: 100% !important; border: none !important; } .table-responsive-cards thead { display: none !important; } .table-responsive-cards tbody { display: block; width: 100% !important; } .table-responsive-cards tr { display: block; background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: 12px; padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow-sm); position: relative; } .table-responsive-cards td { display: flex !important; justify-content: space-between; align-items: center; padding: 10px 0 !important; border: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; font-size: 0.875rem !important; text-align: right !important; min-height: 40px; width: 100% !important; word-break: break-word !important; } .table-responsive-cards td:last-child { border-bottom: none !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; } .table-responsive-cards td:last-child::before { margin-bottom: 4px !important; } .table-responsive-cards td:last-child > div, .table-responsive-cards td:last-child > .table-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; justify-content: flex-end !important; width: 100% !important; } .table-responsive-cards td::before { content: attr(data-label); font-weight: 700; color: var(--c-text-muted); font-size: 0.75rem; text-transform: uppercase; text-align: left; margin-right: 16px; flex-shrink: 0; } } /* Distribuição em 2 colunas de cards para tablets para aproveitar espaço */ @media (min-width: 769px) and (max-width: 1024px) { .table-responsive-cards tbody { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } .table-responsive-cards tr { margin-bottom: 0 !important; } } /* ── Overrides de Grids com inline styles ── */ @media (max-width: 1024px) { div[style*="grid-template-columns"][style*="2fr 1fr"], div[style*="grid-template-columns"][style*="1fr 340px"], div[style*="grid-template-columns"][style*="1fr 360px"], div[style*="grid-template-columns"][style*="1fr 1fr"] { grid-template-columns: 1fr !important; } div[style*="grid-template-columns"][style*="1fr 1fr 1fr"], div[style*="grid-template-columns"][style*="repeat(3, 1fr)"], div[style*="grid-template-columns"][style*="repeat(3,1fr)"], div[style*="grid-template-columns"][style*="repeat(4, 1fr)"], div[style*="grid-template-columns"][style*="repeat(4,1fr)"], div[style*="grid-template-columns"][style*="2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; } } @media (min-width: 601px) and (max-width: 1024px) { div[style*="grid-template-columns"][style*="1fr 1fr"], div[style*="grid-template-columns"][style*="1fr 1fr 1fr"], div[style*="grid-template-columns"][style*="repeat(3, 1fr)"], div[style*="grid-template-columns"][style*="repeat(3,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 600px) { div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } } /* ── Ajustes adicionais para mobile ── */ @media (max-width: 480px) { .main-content { padding: var(--sp-3) !important; } .card { padding: var(--sp-4) !important; border-radius: var(--radius-md) !important; } .topbar { padding-left: 12px !important; padding-right: 12px !important; } } /* ── Sidebar z-index hierarchy ── */ .sidebar { z-index: 1000 !important; } .sidebar-overlay { z-index: 999 !important; } /* ── Trava de rolagem de fundo com menu aberto no mobile/tablet ── */ /* Using overflow:hidden only — no position:fixed to avoid scroll position reset */ body.sidebar-open-active { overflow: hidden !important; height: 100% !important; width: 100% !important; } /* ── Fotos Grid Responsivo (4 por linha no desktop) ── */ .fotos-grid-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 992px) { .fotos-grid-container { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .fotos-grid-container { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .fotos-grid-container { grid-template-columns: 1fr; } } /* ── Trava de Overflow Horizontal Global ── */ body { max-width: 100vw !important; overflow-x: hidden !important; width: 100% !important; } /* ── Impedir que elementos extrapolem a largura ── */ img, svg, video, iframe, input, select, textarea, pre, code, .form-group { max-width: 100% !important; } /* Cards e tabelas: controle de overflow correto */ .card { max-width: 100% !important; box-sizing: border-box !important; } /* ── Ajuste de tabelas ── */ .table-wrapper { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* ── Tabelas dentro de cards: sem min-width fixo ── */ .card table, .card .table-responsive table, .card .boletos-table, .card .extrato-table { min-width: 0 !important; width: 100% !important; table-layout: auto !important; } /* ── Coluna de ações: wrap e sem largura fixa ── */ table th:last-child, table td:last-child { width: auto !important; min-width: 0 !important; } /* ── Action buttons containers ── */ .table-actions, td > div[style*="display:flex"][style*="gap"] { flex-wrap: wrap !important; max-width: 100%; } /* ── Modais no mobile/tablet ── */ @media (max-width: 768px) { .modal-overlay .modal, .modal-overlay .card { width: 100% !important; max-width: 100% !important; margin: 8px auto !important; box-sizing: border-box !important; } } /* ── Flexbox toolbars responsivas ── */ @media (max-width: 992px) { div[style*="display:flex"], div[style*="display: flex"], .main-content > div[style*="display"] { flex-wrap: wrap !important; gap: 12px !important; } div[style*="display:flex"] > a, div[style*="display:flex"] > button, div[style*="display: flex"] > a, div[style*="display: flex"] > button { flex-grow: 1 !important; text-align: center !important; } } /* ── Premium Layout Grids ───────────────────────────────────────────── */ .grid-layout-sidebar { display: grid; grid-template-columns: 1fr 360px; gap: 24px; } .grid-responsive-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 1024px) { .grid-layout-sidebar { grid-template-columns: 1fr !important; } } @media (max-width: 900px) { .grid-responsive-2col { grid-template-columns: 1fr !important; } } .grid-layout-sidebar-left { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; } @media (max-width: 1024px) { .grid-layout-sidebar-left { grid-template-columns: 1fr !important; } } .grid-layout-content-sidebar { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; } @media (max-width: 1024px) { .grid-layout-content-sidebar { grid-template-columns: 1fr !important; } } /* ── Animations ── */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-fadeInUp { animation: fadeInUp .4s ease forwards; } .animate-fadeIn { animation: fadeIn .3s ease forwards; } /* ══════════════════════════════════════════════════════════════ RESPONSIVIDADE — PWA Android, iOS, Tablet (H/V) Sem barra de rolagem horizontal. Conteúdo 100% adaptável. ══════════════════════════════════════════════════════════════ */ /* ── PWA: Overflow global — sem barra horizontal ──────────── */ .main-content { overflow-x: hidden; overflow-y: visible; min-width: 0; } .main-content > * { max-width: 100%; min-width: 0; } .table-responsive, .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* Ensure all financial module tables are fully contained */ .boletos-table, .extrato-table { table-layout: fixed; width: 100%; } /* ══ TABLET LANDSCAPE (1024px) ═══════════════════════════════ */ @media (max-width: 1024px) { /* Alertas: detail column fica menor */ .alertas-detail-column { width: 280px !important; } .alertas-list-column { max-height: calc(100vh - 200px); } /* Filter bar: 2 colunas */ .filter-bar { grid-template-columns: repeat(2, 1fr) !important; } /* Boletos KPI grid: 2 colunas */ .boleto-kpi .kpi-val, .extrato-kpi .kpi-val { font-size: 1.4rem; } } /* ══ TABLET PORTRAIT (768px) ═════════════════════════════════ */ @media (max-width: 768px) { /* Layout principal: padding reduzido */ .main-content { padding: var(--sp-4) !important; } /* Alertas: empilhar verticalmente, sem detail column */ .alertas-layout { flex-direction: column !important; } .alertas-detail-column { display: none !important; } .alertas-list-column { max-height: none !important; overflow-y: visible !important; padding-right: 0 !important; } /* KPI grid do dashboard admin: 2 colunas */ .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .kpi-card { padding: 12px 14px !important; } .kpi-icon { width: 40px !important; height: 40px !important; } .kpi-value { font-size: 1.2rem !important; } /* Impersonate grid: 1 coluna */ .impersonate-grid { grid-template-columns: 1fr !important; } .impersonate-grid form { flex-direction: column !important; } /* Grid responsive: 2 colunas */ .grid-responsive { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } /* KPI cards menores */ .boleto-kpi { padding: 14px 16px !important; gap: 10px !important; } .boleto-kpi .kpi-val, .extrato-kpi .kpi-val, .dash-kpi-item .val { font-size: 1.2rem !important; } .boleto-kpi .kpi-ico, .extrato-kpi .kpi-ico, .dash-kpi-item .ico { width: 36px !important; height: 36px !important; font-size: 16px !important; border-radius: 10px !important; } /* KPI grids: 2 colunas */ .dash-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } /* Finance cards, quick links: 2 colunas */ .quick-links { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } /* Filter bar: empilhar */ .filter-bar { grid-template-columns: 1fr !important; } /* Formulários inline de filtros: empilhar */ form[style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } /* Dash saldo card: ajustar textos */ .dash-saldo-card { padding: 20px !important; border-radius: 14px !important; } #lbl-saldo-disp, .dash-saldo-card .saldo-inner > div:nth-child(2) { font-size: 2rem !important; } /* Dashboard financeiro: finance cards */ .dash-finance-card { padding: 14px 16px !important; } .dash-finance-card > div:last-child { font-size: 1.4rem !important; } /* Tabelas: converter para layout de cards no mobile */ .table-responsive table thead, .card > .table-responsive > table > thead, .card > table > thead { display: none; } .table-responsive table tbody tr, .card > .table-responsive > table > tbody > tr, .card > table > tbody > tr { display: flex; flex-direction: column; border: 1px solid var(--c-border); border-radius: var(--radius-md); margin-bottom: 10px; padding: 12px; background: var(--c-bg-card); gap: 6px; } .table-responsive table tbody td, .card > .table-responsive > table > tbody > td, .card > table > tbody > td { display: flex; justify-content: space-between; align-items: flex-start; padding: 4px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.03) !important; font-size: .8125rem !important; text-align: left !important; gap: 8px; } .table-responsive table tbody td::before, .card > .table-responsive > table > tbody > td::before, .card > table > tbody > td::before { content: attr(data-label); font-weight: 700; font-size: .72rem; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .3px; flex-shrink: 0; min-width: 90px; } .table-responsive table tbody td:last-child, .card > .table-responsive > table > tbody > td:last-child, .card > table > tbody > td:last-child { border-bottom: none !important; } /* Tabelas específicas (boletos, extrato) — mesma lógica */ .boletos-table thead, .extrato-table thead { display: none; } .boletos-table tbody tr, .extrato-table tbody tr { display: flex; flex-direction: column; border: 1px solid var(--c-border); border-radius: var(--radius-md); margin-bottom: 10px; padding: 12px; background: var(--c-bg-card); gap: 4px; } .boletos-table tbody td, .extrato-table tbody td { display: flex; justify-content: space-between; align-items: flex-start; padding: 4px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.03) !important; font-size: .8125rem !important; text-align: left !important; } .boletos-table tbody td::before, .extrato-table tbody td::before { content: attr(data-label); font-weight: 700; font-size: .72rem; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .3px; flex-shrink: 0; min-width: 80px; } /* table-actions: stack on mobile */ .table-actions { flex-wrap: wrap !important; gap: 6px !important; justify-content: flex-start !important; } .table-actions .btn { flex: 1 1 auto !important; min-width: 0 !important; font-size: .72rem !important; padding: 6px 10px !important; } /* Card header: empilhar */ .card-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } .card-header select { width: 100% !important; } /* Pagination: empilhar */ .pagination-container { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; } .pagination-buttons { justify-content: center !important; flex-wrap: wrap !important; } /* Modais: full width */ .modal-box { max-width: calc(100vw - 24px) !important; margin: 12px !important; } } /* ══ MOBILE PORTRAIT (480px) ═════════════════════════════════ */ @media (max-width: 480px) { /* Layout: padding mínimo */ .main-content { padding: 10px !important; } /* Cards: menos padding */ .card { padding: var(--sp-3) !important; border-radius: var(--radius-md) !important; } /* Grid responsive: 1 coluna */ .grid-responsive { grid-template-columns: 1fr !important; gap: 8px !important; } /* KPI: 1 coluna */ .dash-kpi-grid, .kpi-grid { grid-template-columns: 1fr !important; gap: 8px !important; } /* Quick links: 1 coluna */ .quick-links { grid-template-columns: 1fr !important; gap: 8px !important; } /* KPI cards: compactos */ .boleto-kpi { padding: 12px 14px !important; gap: 10px !important; border-radius: 10px !important; } .boleto-kpi .kpi-val, .extrato-kpi .kpi-val, .dash-kpi-item .val { font-size: 1.1rem !important; } .boleto-kpi .kpi-lbl, .extrato-kpi .kpi-lbl, .dash-kpi-item .lbl { font-size: .68rem !important; } .boleto-kpi .kpi-sub { font-size: .65rem !important; } .boleto-kpi .kpi-ico, .extrato-kpi .kpi-ico, .dash-kpi-item .ico { width: 32px !important; height: 32px !important; font-size: 14px !important; border-radius: 8px !important; } /* Formulário filtros: 1 coluna */ form[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* Botões de ação nos filtros: full-width */ form div[style*="grid-column"] { grid-column: 1 / -1 !important; flex-direction: column !important; align-items: stretch !important; } form div[style*="grid-column"] .btn { width: 100% !important; } /* Saldo card ajuste */ .dash-saldo-card { padding: 16px !important; border-radius: 12px !important; } #lbl-saldo-disp, .dash-saldo-card .saldo-inner > div:nth-child(2) { font-size: 1.6rem !important; } /* Finance cards compact */ .dash-finance-card { padding: 12px 14px !important; border-radius: 10px !important; } .dash-finance-card > div:last-child { font-size: 1.2rem !important; } /* Alertas cards: mais compactos */ .alerta-card { padding: 12px !important; border-radius: 10px !important; } /* Badges: menores */ .badge-situacao, .badge-tipo-mov { font-size: .62rem !important; padding: 3px 6px !important; } /* Botões de ação (btn-action) */ .btn-action { width: 28px !important; height: 28px !important; font-size: 12px !important; } /* Topbar título: menor */ .topbar-title { font-size: var(--fs-base) !important; } /* Pagination compact */ .pagination-btn { padding: 5px 8px !important; font-size: .75rem !important; } /* Modais: full width */ .modal-box { max-width: calc(100vw - 16px) !important; margin: 8px !important; border-radius: 12px !important; } .modal-header { padding: 14px 16px !important; } .modal-body { padding: 14px 16px !important; } .modal-footer { padding: 12px 16px !important; flex-direction: column !important; } .modal-footer .btn { width: 100% !important; } } /* ══ MOBILE PEQUENO (360px) ═══════════════════════════════════ */ @media (max-width: 360px) { .main-content { padding: 8px !important; } .boleto-kpi .kpi-val, .extrato-kpi .kpi-val, .dash-kpi-item .val { font-size: 1rem !important; } #lbl-saldo-disp, .dash-saldo-card .saldo-inner > div:nth-child(2) { font-size: 1.4rem !important; } } /* ══ INPUTS TOUCH-FRIENDLY (iOS/Android) ═════════════════════ */ @media (max-width: 768px) { /* Inputs maiores para toque */ .form-control, select.form-control, input.form-control { min-height: 44px !important; font-size: .875rem !important; padding: 10px 14px !important; } /* Prevenir zoom no iOS ao focar em inputs */ input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], input[type="password"], textarea, select { font-size: 16px !important; } } /* ══ LANDSCAPE-SPECIFIC (tablet horizontal) ═══════════════════ */ @media (max-height: 500px) and (orientation: landscape) { /* Reduzir padding vertical em landscape */ .main-content { padding: var(--sp-3) var(--sp-4) !important; } .card { padding: var(--sp-3) var(--sp-4) !important; } .boleto-kpi, .extrato-kpi { padding: 12px 16px !important; } .alertas-list-column { max-height: calc(100vh - 120px) !important; } } /* ══ PWA STANDALONE: ajustes para home screen ═════════════════ */ @media (display-mode: standalone) { /* Sem bounce no iOS */ html, body { overscroll-behavior: none; } /* Safe areas para notch */ .topbar { padding-top: env(safe-area-inset-top, 0); } .main-content { padding-bottom: max(var(--sp-6), env(safe-area-inset-bottom, 0)); } } /* ══ NO HORIZONTAL SCROLLBAR — regra final ═══════════════════ */ body { overflow-x: hidden !important; overflow-y: auto !important; max-width: 100vw !important; -webkit-overflow-scrolling: touch !important; } /* CRITICAL: Do NOT add overflow-x:hidden to html — breaks iOS PWA vertical scroll */ .main-content { overflow-x: hidden !important; overflow-y: visible !important; } .mobile-content { overflow-x: hidden !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch !important; } /* ══ TABELAS FINANCEIRAS — Conversão mobile definitiva ═══════ */ @media (max-width: 768px) { /* Boletos table → cards */ .boletos-table, .extrato-table { min-width: 0 !important; width: 100% !important; } .boletos-table thead, .extrato-table thead { display: none !important; } .boletos-table tbody tr, .extrato-table tbody tr { display: flex !important; flex-direction: column !important; border: 1px solid var(--c-border) !important; border-radius: var(--radius-md) !important; margin-bottom: 10px !important; padding: 12px !important; background: var(--c-bg-card) !important; gap: 6px !important; } .boletos-table tbody td, .extrato-table tbody td { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; padding: 4px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.03) !important; font-size: .8125rem !important; text-align: left !important; gap: 8px !important; width: 100% !important; max-width: 100% !important; } .boletos-table tbody td::before, .extrato-table tbody td::before { content: attr(data-label); font-weight: 700; font-size: .72rem; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .3px; flex-shrink: 0; min-width: 80px; } .boletos-table tbody td:last-child, .extrato-table tbody td:last-child { border-bottom: none !important; flex-wrap: wrap !important; } /* Filter bar: stack on mobile */ .filter-bar { grid-template-columns: 1fr !important; gap: 10px !important; } /* KPI grids with inline styles */ div[style*="grid-template-columns"][style*="minmax(230px"], div[style*="grid-template-columns"][style*="minmax(240px"] { grid-template-columns: 1fr !important; } /* Pagination containers */ .pagination-container { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; } .pagination-buttons { justify-content: center !important; flex-wrap: wrap !important; } /* btn-action: wrap properly */ td div[style*="display:flex"][style*="gap"] { flex-wrap: wrap !important; justify-content: flex-start !important; } } @media (max-width: 480px) { div[style*="grid-template-columns"][style*="minmax(230px"], div[style*="grid-template-columns"][style*="minmax(240px"], div[style*="grid-template-columns"][style*="minmax(200px"] { grid-template-columns: 1fr !important; } } @media (min-width: 769px) and (max-width: 1024px) { div[style*="grid-template-columns"][style*="minmax(230px"], div[style*="grid-template-columns"][style*="minmax(240px"] { grid-template-columns: repeat(2, 1fr) !important; } } /* ══════════════════════════════════════════════════════════════ PWA PORTRAIT LOCK — Bloqueio silencioso (sem overlay visual) O PWA fica bloqueado em portrait via manifest, sem mensagem. ══════════════════════════════════════════════════════════════ */ #pwa-landscape-block { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* ══════════════════════════════════════════════════════════════ TABELAS FINANCEIRAS — Ajustes desktop/laptop (1025px–1400px) Evita overflow horizontal com muitas colunas e botões ══════════════════════════════════════════════════════════════ */ @media (min-width: 1025px) and (max-width: 1400px) { /* Reduzir padding das células em tabelas financeiras */ .boletos-table thead th, .boletos-table tbody td { padding: 8px 6px !important; font-size: .72rem !important; } /* Compactar botões de ação da tabela de boletos */ .boletos-table .table-actions .btn, .boletos-table .table-actions .btn-sm { padding: 4px 6px !important; font-size: .65rem !important; min-height: 26px !important; gap: 3px !important; } /* Tabelas genéricas do financeiro */ .table-responsive table thead th, .table-responsive table tbody td { padding: 10px 10px !important; font-size: .8rem !important; } /* Botões de ação menores */ .table-responsive .table-actions .btn-sm { padding: 4px 8px !important; font-size: .72rem !important; } } /* ══════════════════════════════════════════════════════════════ PIX TxID — Word break para strings longas ══════════════════════════════════════════════════════════════ */ td[data-label="TxID"] { word-break: break-all !important; overflow-wrap: break-word !important; max-width: 160px; } @media (max-width: 768px) { td[data-label="TxID"] { max-width: 100% !important; } } /* ══════════════════════════════════════════════════════════════ BOLETOS TABLE — Colunas ocultas no desktop para caber sem scroll Oculta: Nosso Nº (2), Emissão (7), Banco (9), Forma pag. (10) Mantém: Nº Boleto, Cliente, CPF/CNPJ, Valor, Vencimento, Situação, Ações ══════════════════════════════════════════════════════════════ */ @media (min-width: 1025px) { /* Card sem padding — tabela borda-a-borda */ .card-boletos { padding: 0 !important; overflow: hidden !important; max-width: 100% !important; } /* Sem scroll horizontal */ .card-boletos .table-responsive { overflow-x: hidden !important; overflow-y: visible !important; } /* Tabela fixa a 100% */ .boletos-table { table-layout: fixed !important; width: 100% !important; } /* Ocultar colunas 2, 7, 9, 10 */ .boletos-table th:nth-child(2), .boletos-table td:nth-child(2), .boletos-table th:nth-child(7), .boletos-table td:nth-child(7), .boletos-table th:nth-child(9), .boletos-table td:nth-child(9), .boletos-table th:nth-child(10), .boletos-table td:nth-child(10) { display: none !important; } /* Larguras das 7 colunas visíveis = 100% */ .boletos-table th:nth-child(1) { width: 9%; } /* Nº Boleto */ .boletos-table th:nth-child(3) { width: 16%; } /* Cliente */ .boletos-table th:nth-child(4) { width: 13%; } /* CPF/CNPJ */ .boletos-table th:nth-child(5) { width: 10%; } /* Valor */ .boletos-table th:nth-child(6) { width: 10%; } /* Vencimento */ .boletos-table th:nth-child(8) { width: 10%; } /* Situação */ .boletos-table th:nth-child(11) { width: 32%; } /* Ações */ /* Truncar texto */ .boletos-table td { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* Coluna de ações: wrap permitido */ .boletos-table td:nth-child(11) { white-space: normal !important; overflow: visible !important; } .boletos-table .table-actions { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; justify-content: center !important; } .boletos-table .table-actions .btn { padding: 5px 10px !important; font-size: .7rem !important; min-height: 28px !important; white-space: nowrap !important; } /* Paginação: padding interno */ .card-boletos > div:last-child:not(.table-responsive) { padding: 0 16px; } } /* ══════════════════════════════════════════════════════════════ CONTAS A RECEBER — Wrap nos botões de ação (muitos botões) ══════════════════════════════════════════════════════════════ */ @media (min-width: 1025px) { .table-responsive .table-actions { flex-wrap: wrap !important; gap: 4px !important; justify-content: center !important; } } /* ══════════════════════════════════════════════════════════════ PREMIUM UI ENHANCEMENTS — Modernização v2.1 ══════════════════════════════════════════════════════════════ */ /* ── Page Content Entry Animation ────────────────────────── */ .main-content { animation: pageContentFadeIn .12s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes pageContentFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ── Enhanced KPI Card Gradient Accents ─────────────────── */ .kpi-card { background: linear-gradient(135deg, var(--c-bg-card) 0%, color-mix(in srgb, var(--kpi-color, var(--c-primary)) 3%, var(--c-bg-card)) 100%); } .kpi-card:hover { background: linear-gradient(135deg, var(--c-bg-card) 0%, color-mix(in srgb, var(--kpi-color, var(--c-primary)) 6%, var(--c-bg-card)) 100%); } /* ── Card Glass Depth on Hover ──────────────────────────── */ .card:hover { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ── Enhanced Button Press States ────────────────────────── */ .btn:active:not(:disabled) { transform: scale(.97) !important; transition-duration: .08s !important; } .btn-primary:active:not(:disabled) { box-shadow: 0 1px 4px rgba(255,74,0,.4) !important; } /* ── Form Focus Ring Enhancement ─────────────────────────── */ .form-control:focus { background: color-mix(in srgb, var(--c-primary) 2%, var(--c-bg-input)); } /* ── Badge Pulse for Critical Status ─────────────────────── */ .badge-danger { animation: badgePulseSubtle 3s ease-in-out infinite; } @keyframes badgePulseSubtle { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } 50% { box-shadow: 0 0 0 3px rgba(239,68,68,.08); } } /* ── Smooth Sidebar Nav Transitions ──────────────────────── */ .nav-item { will-change: transform, background; } .nav-item:active { transform: translateX(2px) scale(.98); } /* ── Topbar Glassmorphism Enhancement ────────────────────── */ .topbar { background: color-mix(in srgb, var(--c-bg-card) 85%, transparent); box-shadow: 0 1px 0 var(--glass-border); } /* ── Status Badge Dot Animation ──────────────────────────── */ .status-dot.online { animation: statusOnlinePulse 2.5s ease-in-out infinite; } @keyframes statusOnlinePulse { 0%, 100% { box-shadow: 0 0 4px var(--status-online); } 50% { box-shadow: 0 0 10px var(--status-online), 0 0 20px rgba(34,197,94,.15); } } /* ── Enhanced Toast Slide-in ─────────────────────────────── */ .toast { animation: toastSlideIn .35s cubic-bezier(.4,0,.2,1) forwards; border-left: 3px solid transparent; } .toast.success { border-left-color: var(--c-success); } .toast.error { border-left-color: var(--c-danger); } .toast.warning { border-left-color: var(--c-warning); } .toast.info { border-left-color: var(--c-info); } @keyframes toastSlideIn { from { transform: translateX(100%) scale(.95); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } } /* ── Modal Entry Enhancement ─────────────────────────────── */ .modal-overlay.active .modal { animation: modalPopIn .3s cubic-bezier(.34,1.56,.64,1) forwards; } @keyframes modalPopIn { from { transform: translateY(24px) scale(.94); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* ── Improved Dropdown Animation ─────────────────────────── */ .dropdown-menu.open { animation: dropdownReveal .2s cubic-bezier(.4,0,.2,1) forwards; } @keyframes dropdownReveal { from { transform: translateY(-6px) scale(.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* ── Enhanced Avatar Ring on Hover ────────────────────────── */ .avatar:hover { box-shadow: 0 0 0 3px var(--c-primary-glow), 0 0 20px rgba(255,74,0,.2); } /* ── Table Row Selection Indicator ───────────────────────── */ tbody tr { transition: background var(--tr-fast), border-left-color var(--tr-fast); border-left: 3px solid transparent; } tbody tr:hover { border-left-color: var(--c-primary); } /* ── Prefers Reduced Motion ──────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ══════════════════════════════════════════════════════════════ BOTÕES — Padronização Global v3.0 Todos os painéis (Admin, Cliente, Técnico) Botões uniformes, responsivos e consistentes em cards ══════════════════════════════════════════════════════════════ */ /* ── 1. Reset de inline styles dos botões ──────────────────── Override agressivo para neutralizar inline styles inconsistentes encontrados nos templates PHP dos 3 painéis ─────────────────────────────────────────────────────────── */ /* Botão padrão: tamanho uniforme para caber em cards */ .btn { padding: 10px 18px !important; font-size: .8125rem !important; font-weight: 600 !important; border-radius: 10px !important; line-height: 1.2 !important; min-height: 40px !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; box-sizing: border-box !important; text-decoration: none !important; vertical-align: middle !important; } /* Botão SM: compacto mas ainda legível */ .btn.btn-sm, .btn-sm { padding: 7px 14px !important; font-size: .75rem !important; min-height: 34px !important; border-radius: 8px !important; gap: 5px !important; } /* Botão LG: para ações principais em destaque */ .btn.btn-lg, .btn-lg { padding: 13px 28px !important; font-size: .9375rem !important; min-height: 48px !important; border-radius: 12px !important; gap: 8px !important; font-weight: 700 !important; } /* Botão ícone: quadrado perfeito */ .btn.btn-icon, .btn-icon { padding: 0 !important; width: 38px !important; height: 38px !important; min-height: 38px !important; border-radius: 10px !important; font-size: .875rem !important; } .btn.btn-icon-sm, .btn-icon-sm { padding: 0 !important; width: 30px !important; height: 30px !important; min-height: 30px !important; border-radius: 8px !important; font-size: .75rem !important; } /* Botão full width */ .btn.w-100, .btn.w-full, a.btn.w-100, a.btn.w-full { width: 100% !important; max-width: 100% !important; } /* ── 2. Botões Warning (ausente no sistema base) ─────────── */ .btn-warning { background: rgba(245, 158, 11, 0.12) !important; color: #f59e0b !important; border: 1px solid rgba(245, 158, 11, 0.25) !important; } .btn-warning:hover:not(:disabled) { background: #f59e0b !important; color: #fff !important; border-color: #f59e0b !important; } /* Botão Info */ .btn-info { background: rgba(59, 130, 246, 0.12) !important; color: #3b82f6 !important; border: 1px solid rgba(59, 130, 246, 0.25) !important; } .btn-info:hover:not(:disabled) { background: #3b82f6 !important; color: #fff !important; border-color: #3b82f6 !important; } /* ── 3. Botões dentro de Cards: layout uniforme ──────────── */ .card .btn, .client-card .btn, .os-card .btn, .kpi-card .btn { flex-shrink: 0 !important; } /* Card header buttons: tamanho compacto alinhado à direita */ .card-header .btn { padding: 7px 14px !important; font-size: .75rem !important; min-height: 34px !important; border-radius: 8px !important; } /* ── 4. Containers de ações — layout flexbox uniforme ─────── */ .table-actions, .card-actions, .modal-footer, .sig-controls, .form-actions { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; } /* Botões nas ações de tabela: todos do mesmo tamanho */ .table-actions .btn { padding: 7px 12px !important; font-size: .75rem !important; min-height: 32px !important; border-radius: 8px !important; flex: 0 0 auto !important; } /* Modal footer: botões com tamanho uniforme */ .modal-footer .btn { padding: 10px 20px !important; font-size: .8125rem !important; min-height: 40px !important; border-radius: 10px !important; min-width: 100px !important; } /* ── 5. Botões de filtro e busca — uniformes ─────────────── */ .search-bar .btn, form .btn:not(.btn-lg) { padding: 10px 18px !important; font-size: .8125rem !important; min-height: 40px !important; border-radius: 10px !important; } /* ── 6. Botões dentro de divs com inline flex styles ─────── */ div[style*="display:flex"] > .btn, div[style*="display: flex"] > .btn, div[style*="display:flex"] > a.btn, div[style*="display: flex"] > a.btn { flex-shrink: 0 !important; } /* ── 7. Pagination buttons padronizados ──────────────────── */ .pagination-btn, .page-btn { padding: 7px 12px !important; font-size: .75rem !important; min-height: 34px !important; min-width: 34px !important; border-radius: 8px !important; } /* ── 8. btn-action padronizado ───────────────────────────── */ .btn-action { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; border-radius: 8px !important; font-size: .8125rem !important; border: 1px solid var(--c-border) !important; background: var(--c-bg-hover) !important; color: var(--c-text-muted) !important; cursor: pointer !important; transition: all var(--tr-fast) !important; } .btn-action:hover { border-color: var(--c-primary) !important; color: var(--c-primary) !important; transform: scale(1.05) !important; } /* ══ RESPONSIVIDADE DOS BOTÕES ═══════════════════════════════ */ /* ── Tablet (769px – 1024px) ─────────────────────────────── */ @media (min-width: 769px) and (max-width: 1024px) { .btn { padding: 9px 16px !important; font-size: .8rem !important; min-height: 38px !important; border-radius: 10px !important; } .btn.btn-sm, .btn-sm { padding: 6px 12px !important; font-size: .72rem !important; min-height: 32px !important; } .btn.btn-lg, .btn-lg { padding: 12px 24px !important; font-size: .875rem !important; min-height: 44px !important; } .btn.btn-icon, .btn-icon { width: 36px !important; height: 36px !important; min-height: 36px !important; } .table-actions .btn { padding: 6px 10px !important; font-size: .72rem !important; min-height: 30px !important; } } /* ── Mobile (≤ 768px) ────────────────────────────────────── */ @media (max-width: 768px) { /* Botões com tamanho touch-friendly (44px Apple guidelines) */ .btn { padding: 11px 18px !important; font-size: .8125rem !important; min-height: 44px !important; border-radius: 10px !important; width: auto !important; } .btn.btn-sm, .btn-sm { padding: 8px 14px !important; font-size: .75rem !important; min-height: 38px !important; border-radius: 8px !important; } .btn.btn-lg, .btn-lg { padding: 14px 28px !important; font-size: .9375rem !important; min-height: 50px !important; border-radius: 12px !important; } .btn.btn-icon, .btn-icon { width: 44px !important; height: 44px !important; min-height: 44px !important; border-radius: 10px !important; } .btn.btn-icon-sm, .btn-icon-sm { width: 36px !important; height: 36px !important; min-height: 36px !important; border-radius: 8px !important; } /* Botões de ação de tabela no mobile: expandir uniformemente */ .table-actions { gap: 6px !important; justify-content: stretch !important; } .table-actions .btn { flex: 1 1 auto !important; min-width: 0 !important; padding: 8px 12px !important; font-size: .75rem !important; min-height: 38px !important; } /* Botões full-width em cards no mobile */ .card .btn.w-100, .card .btn.w-full, .client-card .btn.w-100, .client-card .btn.w-full { padding: 12px 20px !important; min-height: 46px !important; font-size: .875rem !important; font-weight: 700 !important; } /* Card header buttons no mobile */ .card-header .btn { padding: 8px 14px !important; font-size: .75rem !important; min-height: 38px !important; } /* Modal footer: botões empilhados full-width */ .modal-footer { flex-direction: column !important; gap: 8px !important; } .modal-footer .btn { width: 100% !important; min-width: 0 !important; min-height: 44px !important; font-size: .8125rem !important; } /* Search/filter bar buttons */ .search-bar .btn { min-height: 44px !important; } /* btn-action no mobile: maior para toque */ .btn-action { width: 38px !important; height: 38px !important; min-height: 38px !important; } /* Pagination */ .pagination-btn, .page-btn { min-height: 38px !important; min-width: 38px !important; padding: 8px 12px !important; } } /* ── Mobile pequeno (≤ 480px) ────────────────────────────── */ @media (max-width: 480px) { /* Cards com múltiplos botões: empilhar verticalmente */ .card-header { flex-wrap: wrap !important; gap: 8px !important; } .card-header .btn { flex: 1 1 auto !important; min-width: 0 !important; text-align: center !important; } /* Form buttons: full width */ form .btn:not(.btn-sm):not(.btn-icon):not(.btn-icon-sm) { width: 100% !important; } /* Botões de ação em inline-flex divs: empilhar */ div[style*="display:flex"][style*="gap"] > .btn, div[style*="display: flex"][style*="gap"] > .btn { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; text-align: center !important; } /* Impersonate buttons: full width */ .impersonate-grid .btn { width: 100% !important; } } /* ── Mobile muito pequeno (≤ 360px) ──────────────────────── */ @media (max-width: 360px) { .btn { padding: 10px 14px !important; font-size: .75rem !important; min-height: 42px !important; } .btn.btn-sm, .btn-sm { padding: 7px 10px !important; font-size: .7rem !important; min-height: 36px !important; } .table-actions .btn { font-size: .68rem !important; padding: 6px 8px !important; min-height: 34px !important; } } /* ── Desktop grande (≥ 1400px) ───────────────────────────── */ @media (min-width: 1400px) { .btn { padding: 10px 20px !important; font-size: .8125rem !important; min-height: 40px !important; border-radius: 10px !important; } .table-actions .btn { padding: 7px 14px !important; font-size: .75rem !important; min-height: 34px !important; } } /* ── Flow buttons do técnico: padronizados mas maiores ────── */ .flow-btn { padding: 14px 20px !important; font-size: 1rem !important; font-weight: 700 !important; min-height: 52px !important; border-radius: 12px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } @media (max-width: 480px) { .flow-btn { padding: 12px 16px !important; font-size: .9375rem !important; min-height: 48px !important; } } /* ── Botões de navegação (Google Maps, Waze) ─────────────── */ .flow-btn-maps, .flow-btn-waze { min-height: 48px !important; } /* ── Botões dentro do painel do técnico OS show ──────────── */ .os-card .btn, .os-detail-layout .btn { padding: 10px 16px !important; font-size: .8125rem !important; min-height: 40px !important; border-radius: 10px !important; } /* ── Botões de proposta (assinatura, recusa) ─────────────── */ .signature-actions .btn, #modal-assinatura .btn, #modal-recusar .btn { min-height: 44px !important; font-weight: 700 !important; border-radius: 10px !important; }