/* ============================================================ FLEX DRIVE — APP Design system herdado do WEBSITE FLEX DRIVE Cores: AZUL / BRANCO / CINZA · Tema: Tecnologia · Liquid Glass ============================================================ */ /* ─── RESET ─── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ─── TOKENS ─── */ :root { --white: #FFFFFF; --off: #F5F6FA; --off2: #ECEEF4; /* Marca NOVU — vermelho (as variáveis mantêm o nome "blue" por compatibilidade com o restante do CSS; o VALOR é a cor da marca) */ --blue: var(--nv-red); --blue-dark: var(--nv-red-dark); --blue-light: var(--nv-red-light); --blue-pale: rgba(var(--nv-rgb), 0.10); --gray-1: #1A1D23; --gray-2: #3D4252; --gray-3: #6B7280; --gray-4: #9CA3AF; --gray-5: #D1D5DB; --gray-6: #E5E7EB; --green: #16A34A; --green-pale: #DCFCE7; --amber: #D97706; --amber-pale: #FEF3C7; --red: #DC2626; --red-pale: #FEE2E2; --glass-bg: rgba(255, 255, 255, 0.62); --glass-bg-dark: rgba(255, 255, 255, 0.38); --glass-border: rgba(255, 255, 255, 0.85); --glass-shadow: 0 8px 32px rgba(37, 99, 235, 0.08), 0 2px 8px rgba(0,0,0,0.06); --glass-blur: blur(24px) saturate(180%); --glass-blur-sm: blur(16px) saturate(160%); --radius-sm: 12px; --radius-md: 20px; --radius-lg: 28px; --radius-xl: 40px; --radius-pill: 9999px; --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); --sidebar-w: 256px; } /* ─── BASE ─── */ body { background: var(--off); color: var(--gray-1); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; } /* Ambient background blobs (igual ao site) */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; background: radial-gradient(ellipse 60% 50% at 15% 20%, rgba(var(--nv-rgb), 0.07) 0%, transparent 65%), radial-gradient(ellipse 50% 40% at 85% 70%, rgba(var(--nv-rgb), 0.06) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 50% 100%, rgba(var(--nv-rgb), 0.04) 0%, transparent 55%); pointer-events: none; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font-family: inherit; } input, select, textarea { font-family: inherit; } /* ─── GLASS ─── */ .glass { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.9); position: relative; } /* ─── TYPOGRAPHY ─── */ h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; color: var(--gray-1); } h1 em { font-style: normal; color: var(--blue); } h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; color: var(--gray-1); } h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; color: var(--gray-1); } .eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); } .body-sm { font-size: 0.875rem; color: var(--gray-3); line-height: 1.65; letter-spacing: -0.01em; } .muted { color: var(--gray-3); } .text-blue { color: var(--blue); } .mono { font-variant-numeric: tabular-nums; } /* ─── BUTTONS ─── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0.72rem 1.5rem; border-radius: var(--radius-pill); font-size: 0.9rem; font-weight: 500; letter-spacing: -0.01em; cursor: pointer; border: none; transition: all .22s var(--ease-smooth); white-space: nowrap; } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn-sm { padding: 0.5rem 1rem; font-size: 0.82rem; } .btn-blue { background: var(--blue); color: #fff; box-shadow: 0 2px 16px rgba(var(--nv-rgb), 0.3), inset 0 1px 0 rgba(255,255,255,0.2); } .btn-green { background: var(--green); color: #fff; box-shadow: 0 2px 16px rgba(22,163,74,0.3), inset 0 1px 0 rgba(255,255,255,0.2); } .btn-green:hover:not(:disabled) { background: #15803D; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(22,163,74,0.4); } .btn-blue:hover:not(:disabled) { background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(var(--nv-rgb), 0.4); } .btn-glass { background: rgba(255,255,255,0.6); color: var(--gray-1); border: 1px solid rgba(255,255,255,0.9); backdrop-filter: var(--glass-blur-sm); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 8px rgba(0,0,0,0.06); } .btn-glass:hover:not(:disabled) { background: rgba(255,255,255,0.85); transform: translateY(-2px); } .btn-ghost { background: none; color: var(--blue); border: 1.5px solid rgba(var(--nv-rgb), 0.25); } .btn-ghost:hover:not(:disabled) { border-color: var(--blue); background: var(--blue-pale); } .btn-danger { background: var(--red-pale); color: var(--red); } .btn-danger:hover:not(:disabled) { background: #fecaca; } .btn-block { width: 100%; } /* ─── BADGES ─── */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 0.28rem 0.7rem; border-radius: var(--radius-pill); font-size: 0.74rem; font-weight: 600; letter-spacing: -0.01em; } .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .badge-green { background: var(--green-pale); color: var(--green); } .badge-amber { background: var(--amber-pale); color: var(--amber); } .badge-red { background: var(--red-pale); color: var(--red); } .badge-blue { background: var(--blue-pale); color: var(--blue); } .badge-gray { background: var(--off2); color: var(--gray-3); } /* ─── FORM ─── */ .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 1rem; } .field label { font-size: 0.8rem; font-weight: 600; color: var(--gray-2); letter-spacing: -0.01em; } .input, .select, .textarea { width: 100%; padding: 0.72rem 0.95rem; border-radius: var(--radius-sm); border: 1.5px solid var(--gray-6); background: rgba(255,255,255,0.7); font-size: 0.92rem; color: var(--gray-1); transition: all .18s var(--ease-smooth); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(var(--nv-rgb), 0.12); background: #fff; } .textarea { resize: vertical; min-height: 96px; } /* ═══════════════════════════════════════════════════════════ AUTH / LOGIN ═══════════════════════════════════════════════════════════ */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.2rem; position: relative; z-index: 1; } .auth-card { width: 100%; max-width: 440px; padding: 2.6rem 2.4rem; border-radius: var(--radius-lg); } .auth-logo { display: flex; justify-content: center; margin-bottom: 1.4rem; } .auth-logo img { height: 76px; width: auto; } .auth-title { text-align: center; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.3rem; } .auth-sub { text-align: center; color: var(--gray-3); font-size: 0.9rem; margin-bottom: 1.8rem; } /* Tabs empresa/cliente */ .seg { display: flex; gap: 4px; background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.9); border-radius: var(--radius-pill); padding: 4px; margin-bottom: 1.6rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8); } .seg button { flex: 1; background: none; border: none; cursor: pointer; padding: 0.55rem; font-size: 0.85rem; font-weight: 600; color: var(--gray-3); border-radius: var(--radius-pill); transition: all .22s var(--ease-smooth); } .seg button.active { background: var(--blue); color: #fff; box-shadow: 0 2px 8px rgba(var(--nv-rgb), 0.35); } .alert { padding: 0.7rem 0.95rem; border-radius: var(--radius-sm); font-size: 0.84rem; margin-bottom: 1rem; display: none; } .alert.show { display: block; } .alert-error { background: var(--red-pale); color: var(--red); } .alert-ok { background: var(--green-pale); color: var(--green); } .alert-info { background: var(--blue-pale); color: var(--blue); } .demo-tag { position: fixed; bottom: 14px; left: 14px; z-index: 50; background: var(--amber-pale); color: var(--amber); font-size: 0.72rem; font-weight: 700; padding: 0.4rem 0.8rem; border-radius: var(--radius-pill); border: 1px solid rgba(217,119,6,0.25); } /* ═══════════════════════════════════════════════════════════ APP SHELL (sidebar + topbar) ═══════════════════════════════════════════════════════════ */ .shell { display: flex; min-height: 100vh; position: relative; z-index: 1; } /* Sidebar */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; background: rgba(255,255,255,0.7); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-right: 1px solid rgba(255,255,255,0.8); display: flex; flex-direction: column; padding: 1.4rem 1rem; z-index: 40; transition: transform .3s var(--ease-smooth); } .sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 0 0.6rem 1.4rem; } /* Ícone do app (mostrado quando a lateral está recolhida) */ .logo-mark { display: none; width: 42px; height: 42px; border-radius: 12px; overflow: hidden; flex-shrink: 0; box-shadow: 0 6px 16px rgba(var(--nv-rgb), 0.32); } .logo-mark img { width: 100%; height: 100%; display: block; object-fit: contain; } .sidebar-logo img { height: 50px; width: auto; } .nav-list { display: flex; flex-direction: column; gap: 4px; flex: 1; } .nav-section-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-4); padding: 1rem 0.8rem 0.4rem; } /* Navegação estilo "app" — cada aba com um chip de ícone; ativo = chip com gradiente + trilho lateral */ .nav-item { display: flex; align-items: center; gap: 11px; padding: 0.4rem 0.6rem; border-radius: 14px; cursor: pointer; color: var(--gray-2); font-size: 0.9rem; font-weight: 600; transition: all .18s var(--ease-smooth); position: relative; border: none; background: #ECEEF3; } .nav-item:hover { background: #E2E6EE; color: var(--gray-1); } .nav-item:hover .nav-ico { background: rgba(var(--nv-rgb), 0.15); } .nav-item.active { background: rgba(var(--nv-rgb), 0.10); color: var(--blue); } .nav-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: rgba(var(--nv-rgb), 0.08); color: var(--blue); transition: all .2s var(--ease-smooth); } .nav-ico svg { width: 20px; height: 20px; } .nav-item.active .nav-ico { background: linear-gradient(135deg, var(--nv-red-light), var(--nv-red-dark)); color: #fff; box-shadow: 0 6px 16px rgba(var(--nv-rgb), 0.32); } .nav-item .nav-count { margin-left: auto; font-size: 0.72rem; font-weight: 700; background: var(--blue-pale); color: var(--blue); padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); } .sidebar-user { display: flex; align-items: center; gap: 10px; padding: 0.7rem; border-radius: var(--radius-sm); background: rgba(255,255,255,0.6); margin-top: 0.6rem; } .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } .sidebar-user .meta { min-width: 0; flex: 1; } .sidebar-user .meta .name { font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user .meta .role { font-size: 0.72rem; color: var(--gray-3); } .logout-btn { background: none; border: none; cursor: pointer; color: var(--gray-3); padding: 6px; border-radius: 8px; display: grid; place-items: center; } .logout-btn:hover { background: var(--red-pale); color: var(--red); } /* Main */ .main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.8rem; background: rgba(245,246,250,0.75); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm); border-bottom: 1px solid rgba(255,255,255,0.7); } .topbar .page-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; } .topbar .page-sub { font-size: 0.8rem; color: var(--gray-3); } .topbar .spacer { flex: 1; } .menu-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--gray-1); } .content { padding: 1.8rem; max-width: 1440px; margin-inline: auto; } /* Dashboard: fundo azul para diferenciar das demais abas */ body.dash-active .main { background: linear-gradient(180deg, rgba(var(--nv-rgb), 0.10) 0%, rgba(var(--nv-rgb), 0.10) 42%, rgba(var(--nv-rgb), 0.06) 100%); } body.dash-active .topbar { background: rgba(214,228,255,0.72); border-bottom-color: rgba(var(--nv-rgb), 0.14); } /* ─── KPI CARDS ─── */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; margin-bottom: 1.6rem; } .kpi { padding: 1.3rem 1.4rem; border-radius: var(--radius-md); } .kpi .kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; } .kpi .kpi-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-pale); color: var(--blue); } .kpi .kpi-label { font-size: 0.78rem; color: var(--gray-3); font-weight: 500; } .kpi .kpi-val { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.3rem; } .kpi .kpi-delta { font-size: 0.76rem; font-weight: 600; } .kpi .kpi-delta.up { color: var(--green); } .kpi .kpi-delta.down { color: var(--red); } /* ─── CARD / PANEL ─── */ .panel { padding: 1.4rem 1.5rem; border-radius: var(--radius-md); margin-bottom: 1.4rem; } .panel-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.1rem; } .panel-head h3 { flex: 1; } .panel-head .panel-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-pale); color: var(--blue); } .grid-cols { display: grid; gap: 1.4rem; } /* cada painel com sua própria altura (evita o calendário esticar junto com o painel ao lado) */ .grid-cols.align-start { align-items: start; } @media (min-width: 1000px){ .grid-2-3 { grid-template-columns: 1.6fr 1fr; } .grid-3-2 { grid-template-columns: 1fr 1.6fr; } } @media (min-width: 1000px){ .grid-2 { grid-template-columns: 1fr 1fr; } } /* ─── TABLE ─── */ .table-wrap { overflow-x: auto; border-radius: var(--radius-sm); } table.tbl { width: 100%; border-collapse: collapse; font-size: 0.875rem; } table.tbl th { text-align: left; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-4); padding: 0.6rem 0.6rem; border-bottom: 1px solid var(--gray-6); white-space: nowrap; } table.tbl td { padding: 0.75rem 0.6rem; border-bottom: 1px solid rgba(229,231,235,0.6); vertical-align: middle; } table.tbl th:first-child, table.tbl td:first-child { padding-left: 0.2rem; } table.tbl th:last-child, table.tbl td:last-child { padding-right: 0.2rem; } table.tbl tr:last-child td { border-bottom: none; } table.tbl tbody tr { transition: background .15s; } table.tbl tbody tr:hover { background: rgba(235,242,255,0.5); } .cell-strong { font-weight: 600; color: var(--gray-1); } .cell-sub { font-weight: 400; font-size: 0.78rem; color: var(--gray-3); margin-top: 1px; line-height: 1.35; } table.tbl td.nowrap { white-space: nowrap; } .row-actions { display: flex; gap: 6px; justify-content: flex-end; } table.tbl td.row-actions .btn { flex-shrink: 0; } .icon-btn { background: rgba(255,255,255,0.6); border: 1px solid var(--gray-6); cursor: pointer; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--gray-3); transition: all .15s; } .icon-btn:hover { color: var(--blue); border-color: var(--blue); background: var(--blue-pale); } .icon-btn.danger:hover { color: var(--red); border-color: var(--red); background: var(--red-pale); } /* ─── VEHICLE CARDS ─── */ .veh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; } .veh-card { border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s var(--ease-smooth), box-shadow .2s; } .veh-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(var(--nv-rgb), 0.14); } .veh-thumb { height: 140px; background: linear-gradient(135deg, rgba(var(--nv-rgb), 0.10), rgba(var(--nv-rgb), 0.18)); display: grid; place-items: center; position: relative; overflow: hidden; } .veh-thumb img { max-height: 92px; max-width: 100%; object-fit: contain; } /* foto real do veículo: presa dentro da moldura (140px), carro inteiro centralizado, sem vazar sobre o texto */ .veh-thumb img.veh-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; padding: 10px; } .veh-thumb .badge { position: absolute; top: 10px; right: 10px; } .veh-body { padding: 1rem 1.1rem 1.2rem; flex: 1; display: flex; flex-direction: column; } .veh-body .plate { font-family: 'Inter'; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; color: var(--gray-3); background: var(--off2); padding: 0.15rem 0.5rem; border-radius: 6px; display: inline-block; margin-bottom: 0.5rem; align-self: flex-start; } .veh-body h4 { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.02em; } .veh-meta { display: flex; gap: 1rem; margin-top: 0.5rem; font-size: 0.78rem; color: var(--gray-3); } .veh-foot { margin-top: auto; padding-top: 0.9rem; display: flex; align-items: center; justify-content: space-between; } .veh-price { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; } .veh-price small { font-weight: 500; color: var(--gray-4); font-size: 0.72rem; } /* ─── DRIVER CARDS (Motoristas) ─── */ .driver-card { border: none; cursor: pointer; transition: transform .18s var(--ease-smooth), box-shadow .18s; font-family: inherit; } .driver-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(var(--nv-rgb), 0.14); } .add-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; cursor: pointer; border: 2px dashed var(--gray-5); background: rgba(255,255,255,0.4); color: var(--blue); font-weight: 600; font-size: .92rem; min-height: 116px; font-family: inherit; transition: all .2s var(--ease-smooth); } .add-tile:hover { border-color: var(--blue); background: var(--blue-pale); transform: translateY(-3px); } .add-tile .add-ico { width: 42px; height: 42px; border-radius: 50%; background: var(--blue-pale); color: var(--blue); display: grid; place-items: center; } /* ─── DROPZONE ─── */ .dropzone { border: 2px dashed var(--gray-5); border-radius: var(--radius-md); padding: 2rem; text-align: center; cursor: pointer; transition: all .2s; background: rgba(255,255,255,0.4); } .dropzone:hover, .dropzone.drag { border-color: var(--blue); background: var(--blue-pale); } .dropzone .dz-ico { width: 48px; height: 48px; margin: 0 auto 0.7rem; color: var(--blue); } .dropzone .dz-title { font-weight: 600; margin-bottom: 0.2rem; } .dropzone .dz-sub { font-size: 0.8rem; color: var(--gray-3); } /* ─── DOC / FILE LIST ─── */ .file-row { display: flex; align-items: center; gap: 12px; padding: 0.8rem 0.9rem; border-radius: var(--radius-sm); background: rgba(255,255,255,0.55); border: 1px solid var(--gray-6); margin-bottom: 0.7rem; } .file-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--red-pale); color: var(--red); display: grid; place-items: center; flex-shrink: 0; } .file-ico.blue { background: var(--blue-pale); color: var(--blue); } .file-row .f-meta { flex: 1; min-width: 0; } .file-row .f-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-row .f-sub { font-size: 0.76rem; color: var(--gray-3); } /* ─── CALENDAR (cliente) ─── */ .cal { user-select: none; } .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .cal-head .cal-month { font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; text-transform: capitalize; } .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .cal-dow { text-align: center; font-size: 0.68rem; font-weight: 700; color: var(--gray-4); text-transform: uppercase; padding-bottom: 4px; } .cal-cell { aspect-ratio: 1; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 500; color: var(--gray-2); position: relative; transition: all .15s; } .cal-cell.empty { background: none; } .cal-cell.muted { color: var(--gray-5); } .cal-cell.today { border: 1.5px solid var(--blue); color: var(--blue); font-weight: 700; } .cal-cell.pay { background: var(--blue); color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(var(--nv-rgb), 0.35); } .cal-cell.pay.paid { background: var(--green); box-shadow: 0 4px 12px rgba(22,163,74,0.3); } .cal-cell.pay.late { background: var(--red); box-shadow: 0 4px 12px rgba(220,38,38,0.3); } .cal-cell .cal-mark { position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } /* ─── NEXT PAYMENT HERO (cliente) ─── */ .pay-hero { padding: 1.6rem 1.7rem; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--blue), var(--blue-light)); color: #fff; position: relative; overflow: hidden; } .pay-hero::after { content: ''; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,0.12); } .pay-hero .ph-label { font-size: 0.76rem; font-weight: 600; opacity: .85; letter-spacing: 0.06em; text-transform: uppercase; } .pay-hero .ph-val { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 0.3rem 0; } .pay-hero .ph-date { font-size: 0.92rem; opacity: .92; display: flex; align-items: center; gap: 8px; } /* ─── INFO ROWS ─── */ .info-list { display: flex; flex-direction: column; } .info-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(229,231,235,0.7); font-size: 0.9rem; } .info-row:last-child { border-bottom: none; } .info-row .k { color: var(--gray-3); } .info-row .v { font-weight: 600; text-align: right; } /* ─── EMPTY ─── */ .empty { text-align: center; padding: 2.5rem 1rem; color: var(--gray-4); } .empty .empty-ico { width: 48px; height: 48px; margin: 0 auto 0.8rem; opacity: .5; } /* ═══════════════════════════════════════════════════════════ MODAL ═══════════════════════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(26,29,35,0.45); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 1.5rem; opacity: 0; pointer-events: none; transition: opacity .22s; } .modal-overlay.show { opacity: 1; pointer-events: auto; } .modal { width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: var(--radius-md); box-shadow: 0 24px 64px rgba(0,0,0,0.25); transform: scale(.96) translateY(8px); transition: transform .25s var(--ease-spring); } .modal-overlay.show .modal { transform: scale(1) translateY(0); } .modal-head { display: flex; align-items: center; gap: 0.8rem; padding: 1.3rem 1.5rem; border-bottom: 1px solid var(--gray-6); } .modal-head h3 { flex: 1; } .modal-close { background: none; border: none; cursor: pointer; color: var(--gray-3); width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; } .modal-close:hover { background: var(--off2); color: var(--gray-1); } .modal-body { padding: 1.4rem 1.5rem; } .modal-foot { padding: 1.1rem 1.5rem; border-top: 1px solid var(--gray-6); display: flex; gap: 0.7rem; justify-content: flex-end; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } .form-grid .full { grid-column: 1 / -1; } /* ─── TOAST ─── */ .toast-stack { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; } .toast { display: flex; align-items: center; gap: 10px; padding: 0.85rem 1.1rem; border-radius: var(--radius-sm); background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.15); font-size: 0.88rem; font-weight: 500; border-left: 4px solid var(--blue); animation: toastIn .3s var(--ease-spring); min-width: 240px; } .toast.ok { border-left-color: var(--green); } .toast.err { border-left-color: var(--red); } .toast .t-ico { flex-shrink: 0; } @keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } /* ─── NOTIFICAÇÕES (sino) ─── */ .topbar-actions { position: relative; display: flex; align-items: center; gap: 0.6rem; } .bell-btn { position: relative; background: rgba(255,255,255,0.6); border: 1px solid var(--gray-6); cursor: pointer; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--gray-2); transition: all .18s; } .bell-btn:hover { color: var(--blue); border-color: var(--blue); background: var(--blue-pale); } .bell-badge { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff; font-size: 0.68rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--off); } .notif-dropdown { position: absolute; top: 52px; right: 0; width: 340px; max-width: 88vw; max-height: 440px; overflow-y: auto; background: #fff; border-radius: var(--radius-md); box-shadow: 0 18px 50px rgba(0,0,0,0.18); border: 1px solid var(--gray-6); z-index: 60; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: all .2s var(--ease-smooth); } .notif-dropdown.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .notif-head { padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--gray-6); font-weight: 700; font-size: 0.92rem; display: flex; align-items: center; gap: 8px; } .notif-item { display: flex; gap: 11px; padding: 0.8rem 1.1rem; border-bottom: 1px solid rgba(229,231,235,0.6); cursor: pointer; transition: background .15s; } .notif-item:hover { background: var(--off); } .notif-item:last-child { border-bottom: none; } .notif-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; } .notif-ico.pay { background: var(--blue-pale); color: var(--blue); } .notif-ico.late { background: var(--red-pale); color: var(--red); } .notif-ico.due { background: var(--amber-pale); color: var(--amber); } .notif-item .n-title { font-weight: 600; font-size: 0.86rem; } .notif-item .n-sub { font-size: 0.76rem; color: var(--gray-3); } /* notificação já vista (cinza) */ .notif-item.read { opacity: 0.55; } .notif-item.read .notif-ico { background: var(--off2) !important; color: var(--gray-4) !important; } .notif-item.read .n-title { font-weight: 500; color: var(--gray-3); } /* ─── Legenda do calendário (motorista) ─── */ .cal-legend { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid rgba(229,231,235,0.7); } .cal-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; color: var(--gray-2); } .cal-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; } .cal-dot.due { background: var(--blue); } .cal-dot.paid { background: var(--green); } .cal-dot.late { background: var(--red); } /* ─── Método de cobrança (empresa · Recebimentos) ─── */ .cobr-card { border: 1px solid var(--gray-6); border-radius: var(--radius-md); padding: 0.75rem; margin-bottom: 0; background: var(--off); } .cobr-card-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; } .cobr-card-head .cobr-label { flex: 1; font-weight: 600; } .brand-fee-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } /* card de método de cobrança mais compacto no desktop */ #cobr-methods { display: grid; gap: 0.7rem; margin-bottom: 0.7rem; } .cobr-panel .form-grid { gap: 0.6rem; } .cobr-split { display: grid; gap: 1.1rem; margin-top: 1.2rem; } @media (min-width: 900px) { #cobr-methods { grid-template-columns: 1fr 1fr; } .cobr-split { grid-template-columns: 1fr 1fr; align-items: start; } } /* ─── Recebimentos agrupados por período (empresa) ─── */ .rcpt-group { border: 1px solid var(--gray-6); border-radius: var(--radius-sm); margin-bottom: 0.7rem; overflow: hidden; } .rcpt-group[open] { background: rgba(255,255,255,0.4); } .rcpt-sum { list-style: none; display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1rem; cursor: pointer; font-weight: 600; user-select: none; } .rcpt-sum::-webkit-details-marker { display: none; } .rcpt-chev { display: inline-flex; color: var(--gray-4); transition: transform .18s; flex-shrink: 0; } .rcpt-group[open] .rcpt-chev { transform: rotate(90deg); } .rcpt-sum-label { flex: 1; min-width: 0; } .rcpt-count { font-size: 0.72rem; font-weight: 700; background: var(--blue-pale); color: var(--blue); padding: 0.1rem 0.55rem; border-radius: var(--radius-pill); flex-shrink: 0; } .rcpt-total { font-size: 0.82rem; color: var(--gray-2); flex-shrink: 0; } .rcpt-group .table-wrap { padding: 0 1rem 0.8rem; } /* barra de resumo do período em "Todos os Semanais" */ .rcpt-sumbar { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; align-items: center; padding: 0.4rem 0.1rem 0.85rem; font-size: 0.86rem; color: var(--gray-3); border-bottom: 1px solid var(--gray-6); margin-bottom: 0.5rem; } .rcpt-sumbar strong { color: var(--gray-1); font-weight: 800; margin-left: 0.25rem; } .rcpt-sumbar strong.ok { color: var(--green); } .rcpt-sumbar strong.bad { color: var(--red); } /* ─── Gráficos do Dashboard (empresa) ─── */ .chart-pie-card { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .chart-pie { flex-shrink: 0; display: block; overflow: visible; } .pie-slice { cursor: pointer; transition: opacity .15s var(--ease-smooth); transform-origin: center; } .pie-center-lbl { font-size: 11px; fill: var(--gray-4); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .pie-center-val { font-size: 18px; fill: var(--gray-1); font-weight: 800; } .chart-legend { display: flex; flex-direction: column; gap: 0.55rem; } .chart-legend-below { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.5rem; width: 100%; } .cl-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; border: 1px solid var(--gray-6); background: var(--off); border-radius: var(--radius-pill); padding: 0.4rem 0.85rem; cursor: pointer; transition: all .15s var(--ease-smooth); } .chart-legend-below .cl-item { flex: 0 1 auto; } .cl-item:hover, .cl-item.active { border-color: var(--blue); box-shadow: 0 2px 10px rgba(var(--nv-rgb), 0.15); } .cl-dot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; } .cl-lbl { color: var(--gray-2); font-weight: 600; } .cl-val { color: var(--gray-1); font-weight: 700; } .bars { display: flex; align-items: flex-end; gap: 0.5rem; height: 170px; padding-top: 0.5rem; } .bar-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; } .bar-val { font-size: 0.66rem; font-weight: 700; color: var(--gray-3); white-space: nowrap; } .bar { width: 70%; max-width: 46px; min-height: 4px; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, var(--blue-light), var(--blue)); box-shadow: 0 2px 8px rgba(var(--nv-rgb), 0.25); transition: height .3s var(--ease-smooth); } .bar-lbl { font-size: 0.68rem; font-weight: 600; color: var(--gray-4); text-transform: capitalize; white-space: nowrap; } /* total do donut (fora do centro) */ .chart-total { font-size: 0.82rem; color: var(--gray-3); font-weight: 600; } .chart-total strong { color: var(--gray-1); font-weight: 800; } .chart-total strong.neg { color: var(--red); } /* gráfico de trajeto (estilo Uber) */ .route-wrap { width: 100%; padding-top: 0.3rem; } .route-svg { display: block; width: 100%; height: auto; overflow: visible; } .route-line { filter: drop-shadow(0 3px 6px rgba(var(--nv-rgb), 0.22)); } .route-dot { fill: #fff; stroke: var(--blue); stroke-width: 2.5; } .route-val { font-size: 10px; font-weight: 800; fill: var(--gray-1); } .route-lbl { font-size: 9.5px; font-weight: 700; fill: var(--gray-4); text-transform: capitalize; } /* seletor Mês/Ano dos gráficos */ .seg.seg-sm { margin: 0; flex-shrink: 0; } .seg.seg-sm button { padding: 0.32rem 0.7rem; font-size: 0.76rem; } .rcpt-filter { flex: 0 1 220px; max-width: 220px; width: auto; } /* cabeçalho de painel que quebra no mobile (evita o botão sair do card) */ @media (max-width: 560px) { .panel-head-wrap { flex-wrap: wrap; } .panel-head-wrap h3 { flex: 1 1 auto; } .panel-head-wrap .btn { flex: 1 1 100%; width: 100%; justify-content: center; margin-top: 0.4rem; } .rcpt-filter { flex: 1 1 100%; max-width: none; margin-top: 0.4rem; } } /* ─── PIX (pagamento cliente) ─── */ .pix-amount { text-align: center; margin-bottom: 1rem; } .pix-amount .pa-label { font-size: 0.76rem; color: var(--gray-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .pix-amount .pa-val { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.03em; color: var(--gray-1); } .pix-qr { display: grid; place-items: center; padding: 0.8rem; background: #fff; border: 1px solid var(--gray-6); border-radius: var(--radius-md); margin: 0 auto 1rem; width: fit-content; } .pix-qr img { width: 188px; height: 188px; image-rendering: pixelated; } .pix-copy { display: flex; gap: 8px; align-items: stretch; } .pix-code { flex: 1; min-width: 0; font-size: 0.74rem; font-family: ui-monospace, monospace; background: var(--off); border: 1px solid var(--gray-6); border-radius: var(--radius-sm); padding: 0.7rem 0.8rem; color: var(--gray-2); word-break: break-all; max-height: 76px; overflow-y: auto; } .pix-steps { display: flex; flex-direction: column; gap: 8px; margin: 1rem 0; } .pix-step { display: flex; gap: 10px; align-items: flex-start; font-size: 0.84rem; color: var(--gray-2); } .pix-step .ps-num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-pale); color: var(--blue); font-weight: 700; font-size: 0.74rem; display: grid; place-items: center; } .upload-mini { border: 2px dashed var(--gray-5); border-radius: var(--radius-sm); padding: 0.9rem; text-align: center; cursor: pointer; transition: all .18s; font-size: 0.85rem; color: var(--gray-3); } .upload-mini:hover, .upload-mini.drag { border-color: var(--blue); background: var(--blue-pale); color: var(--blue); } .upload-mini.has-file { border-style: solid; border-color: var(--green); background: var(--green-pale); color: var(--green); font-weight: 600; } /* ─── SPINNER ─── */ .spinner { width: 22px; height: 22px; border: 2.5px solid rgba(var(--nv-rgb), 0.2); border-top-color: var(--blue); border-radius: 50%; animation: spin .7s linear infinite; } .loading-screen { min-height: 100vh; display: grid; place-items: center; } @keyframes spin { to { transform: rotate(360deg); } } .fade-in { animation: fadeIn .35s var(--ease-smooth) both; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ─── SCROLLBAR ─── */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--gray-5); border-radius: 10px; border: 2px solid var(--off); } ::-webkit-scrollbar-thumb:hover { background: var(--gray-4); } /* ═══════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════ */ .backdrop { display: none; position: fixed; inset: 0; background: rgba(26,29,35,0.4); z-index: 35; } /* Anti-overflow: permite que tabelas e conteúdos encolham dentro de grids/flex (sem isso, uma tabela larga empurra a página inteira além da tela no mobile). */ html { overflow-x: hidden; } .main { min-width: 0; } .content { min-width: 0; } .grid-cols > *, .kpi-grid > *, .veh-grid > *, .panel { min-width: 0; } .table-wrap { max-width: 100%; } .topbar > div { min-width: 0; } .topbar .page-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 900px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .main { margin-left: 0; } .menu-toggle { display: grid; place-items: center; } .backdrop.show { display: block; } .content { padding: 1.1rem; max-width: 100%; } .form-grid { grid-template-columns: 1fr; } .kpi-grid { grid-template-columns: 1fr; gap: 0.9rem; } .grid-cols { gap: 1.1rem; } .grid-2-3 { grid-template-columns: 1fr; } .veh-grid { grid-template-columns: 1fr; gap: 1rem; } .kpi .kpi-val { font-size: 1.7rem; } /* fonte 16px nos campos evita o zoom automático do iOS ao focar um input */ .input, .select, .textarea { font-size: 16px; } } @media (max-width: 560px) { .topbar { padding: 0.7rem 0.9rem; gap: 0.6rem; } .topbar .page-title { font-size: 1.05rem; } .topbar .page-sub { font-size: 0.72rem; } .content { padding: 0.85rem; } .panel { padding: 1.1rem 1rem; } .kpi { padding: 1.05rem 1.1rem; } .kpi .kpi-val { font-size: 1.5rem; } .modal-overlay { padding: 0.7rem; } .modal-head { padding: 1.05rem 1.05rem; } .modal-body { padding: 1.1rem 1.05rem; } .modal-foot { padding: 1rem 1.05rem; flex-wrap: wrap; } .form-grid { grid-template-columns: 1fr; } .pay-hero { padding: 1.3rem 1.2rem; } .pay-hero .ph-val { font-size: 2rem; } table.tbl th, table.tbl td { padding: 0.6rem 0.55rem; } .seg { flex-wrap: wrap; } h2 { font-size: 1.3rem; } .toast-stack { left: 12px; right: 12px; bottom: 12px; } .toast { min-width: 0; } /* Notificações: ancora à tela inteira (não ao sino) para não cortar nas bordas */ .notif-dropdown { position: fixed; top: 66px; left: 10px; right: 10px; width: auto; max-width: none; max-height: 72vh; } } @media (max-width: 900px) { /* Reforço anti-zoom do iOS: todo campo com 16px */ input, select, textarea, .input, .select { font-size: 16px; } /* Tabelas viram cards empilhados — não precisa mais rolar para o lado */ .table-wrap { overflow-x: visible; } table.tbl thead { display: none; } table.tbl, table.tbl tbody, table.tbl tr, table.tbl td { display: block; width: 100%; } table.tbl tr { border: 1px solid var(--gray-6); border-radius: var(--radius-sm); padding: 0.5rem 0.9rem; margin-bottom: 0.7rem; background: rgba(255,255,255,0.55); } table.tbl tbody tr:hover { background: rgba(255,255,255,0.55); } table.tbl td { border: none; padding: 0.34rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: right; white-space: normal; } table.tbl td::before { content: attr(data-label); font-weight: 600; color: var(--gray-3); text-align: left; flex-shrink: 0; } table.tbl td:empty { display: none; } table.tbl td.row-actions { justify-content: flex-end; padding-top: 0.5rem; } table.tbl td.row-actions::before { display: none; } /* Linhas de arquivo (contratos/documentos): quebram para os botões não cobrirem o texto */ .file-row { flex-wrap: wrap; } .file-row .f-meta { flex: 1 1 60%; } } /* ─── CHAT / ASSISTENTE ─── */ .chat-panel { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: min(72vh, 640px); } .chat-head { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.7); background: rgba(255,255,255,0.35); } .chat-ava { width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius-pill); display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--blue), var(--blue-light)); box-shadow: 0 4px 14px rgba(var(--nv-rgb), 0.35); } .chat-ava svg { width: 24px; height: 24px; } .chat-id { flex: 1; min-width: 0; } .chat-name { font-weight: 600; font-size: 0.98rem; color: var(--gray-1); letter-spacing: -0.02em; } .chat-status { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--gray-3); } .chat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-pale); } .chat-wa { padding: 0.5rem; } .chat-wa svg { color: var(--green); } .chat-scroll { flex: 1; overflow-y: auto; padding: 1.1rem 1.1rem 0.5rem; display: flex; flex-direction: column; gap: 0.7rem; scroll-behavior: smooth; background-color: #EEF3FC; background-image: url(../assets/chat-bg.svg); background-size: 300px 300px; background-repeat: repeat; } .chat-msg { display: flex; align-items: flex-end; gap: 0.5rem; max-width: 86%; } .chat-msg.me { align-self: flex-end; } .chat-msg.bot { align-self: flex-start; } .chat-mini-ava { width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--radius-pill); display: grid; place-items: center; color: var(--blue); background: var(--blue-pale); } .chat-mini-ava svg { width: 17px; height: 17px; } .chat-msg .bubble { padding: 0.65rem 0.9rem; border-radius: 18px; font-size: 0.92rem; line-height: 1.5; letter-spacing: -0.01em; word-break: break-word; } .chat-msg.bot .bubble { background: #fff; color: var(--gray-1); border: 1px solid var(--gray-6); border-bottom-left-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .chat-msg.me .bubble { background: var(--blue); color: #fff; border-bottom-right-radius: 6px; box-shadow: 0 2px 12px rgba(var(--nv-rgb), 0.28); } .chat-msg { animation: chatIn 0.24s var(--ease-smooth); } @keyframes chatIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .chat-typing .bubble { padding: 0.7rem 0.95rem; } .chat-typing .dots { display: inline-flex; gap: 4px; } .chat-typing .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--gray-4); animation: chatBlink 1.2s infinite ease-in-out; } .chat-typing .dots i:nth-child(2) { animation-delay: 0.2s; } .chat-typing .dots i:nth-child(3) { animation-delay: 0.4s; } @keyframes chatBlink { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } .chat-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; align-self: flex-start; max-width: 100%; padding-left: 2.2rem; animation: chatIn 0.24s var(--ease-smooth); } .chat-chip { padding: 0.45rem 0.85rem; border-radius: var(--radius-pill); border: 1.5px solid rgba(var(--nv-rgb), 0.3); background: rgba(255,255,255,0.7); color: var(--blue); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all .16s var(--ease-smooth); } .chat-chip:hover { background: var(--blue-pale); border-color: var(--blue); transform: translateY(-1px); } .chat-escalate { align-self: stretch; margin: 0.3rem 0 0.4rem; padding: 0.9rem; border-radius: var(--radius-md); background: var(--green-pale); border: 1px solid rgba(22,163,74,0.25); animation: chatIn 0.24s var(--ease-smooth); } .chat-escalate p { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; font-weight: 600; color: #166534; margin-bottom: 0.7rem; } .chat-escalate p svg { color: var(--green); width: 18px; height: 18px; } .chat-input { display: flex; gap: 0.6rem; padding: 0.85rem 1rem; border-top: 1px solid rgba(255,255,255,0.7); background: rgba(255,255,255,0.4); } .chat-field { flex: 1; padding: 0.72rem 1rem; border-radius: var(--radius-pill); border: 1.5px solid var(--gray-6); background: #fff; font-size: 0.92rem; color: var(--gray-1); transition: all .18s var(--ease-smooth); } .chat-field:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(var(--nv-rgb), 0.12); } .chat-send { flex-shrink: 0; width: 46px; height: 46px; border: none; border-radius: var(--radius-pill); background: var(--blue); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 14px rgba(var(--nv-rgb), 0.35); transition: all .18s var(--ease-smooth); } .chat-send:hover:not(:disabled) { background: var(--blue-dark); transform: translateY(-1px); } .chat-send:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .chat-field:disabled { background: var(--off2); color: var(--gray-4); cursor: not-allowed; } .chat-ended { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin: 0.4rem 0 0.6rem; padding: 0.9rem 1.1rem; border-radius: var(--radius-md); background: rgba(255,255,255,0.55); border: 1px dashed var(--gray-5); animation: chatIn 0.24s var(--ease-smooth); } .chat-ended span { font-size: 0.8rem; color: var(--gray-3); font-weight: 500; } /* Responder citando (estilo WhatsApp) */ .chat-msg { position: relative; } .chat-reply-btn { position: absolute; top: 4px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--gray-6); background: #fff; color: var(--gray-3); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s var(--ease-smooth), color .15s, border-color .15s; box-shadow: 0 2px 6px rgba(0,0,0,0.12); } .chat-reply-btn svg { width: 14px; height: 14px; } .chat-msg.bot .chat-reply-btn { right: -32px; } .chat-msg.me .chat-reply-btn { left: -32px; } .chat-msg:hover .chat-reply-btn { opacity: 1; } .chat-reply-btn:hover { color: var(--blue); border-color: var(--blue); } @media (hover: none) { .chat-reply-btn { opacity: 0.55; } } .chat-quote { display: block; border-left: 3px solid rgba(var(--nv-rgb), 0.55); background: rgba(var(--nv-rgb), 0.06); padding: 0.32rem 0.55rem; margin-bottom: 0.45rem; border-radius: 6px; font-size: 0.8rem; line-height: 1.4; } .chat-quote b { display: block; font-size: 0.73rem; margin-bottom: 1px; color: var(--blue); } .chat-quote span { color: var(--gray-2); } .chat-msg.me .chat-quote { border-left-color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.2); } .chat-msg.me .chat-quote b { color: #fff; opacity: 0.95; } .chat-msg.me .chat-quote span { color: rgba(255,255,255,0.88); } .chat-replybar { display: flex; align-items: center; gap: 0.6rem; margin: 0 1rem; padding: 0.5rem 0.7rem; background: var(--blue-pale); border: 1px solid rgba(var(--nv-rgb), 0.18); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; animation: chatIn 0.2s var(--ease-smooth); } .chat-replybar[hidden] { display: none; } /* o display:flex acima anulava o atributo hidden → caixa azul vazia sobre o input */ .chat-replybar .rb-line { align-self: stretch; width: 3px; border-radius: 3px; background: var(--blue); flex-shrink: 0; } .chat-replybar .rb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .chat-replybar .rb-body b { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--blue); } .chat-replybar .rb-body b svg { width: 13px; height: 13px; } .chat-replybar .rb-body span { font-size: 0.8rem; color: var(--gray-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-replybar .rb-close { flex-shrink: 0; border: none; background: none; color: var(--gray-3); cursor: pointer; display: grid; place-items: center; padding: 4px; border-radius: 50%; } .chat-replybar .rb-close svg { width: 16px; height: 16px; } .chat-replybar .rb-close:hover { background: rgba(0,0,0,0.07); color: var(--gray-1); } @media (max-width: 900px) { .chat-panel { height: min(70vh, 560px); } .chat-chips { padding-left: 0.4rem; } } /* ─── CONTATO RÁPIDO ─── */ .quick-contact { display: flex; flex-direction: column; gap: 0.7rem; } .quick-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--gray-6); background: rgba(255,255,255,0.6); text-decoration: none; transition: all .18s var(--ease-smooth); } .quick-item:hover { transform: translateY(-2px); border-color: rgba(var(--nv-rgb), 0.3); box-shadow: 0 6px 18px rgba(0,0,0,0.07); background: #fff; } .qi-ico { width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius-pill); display: grid; place-items: center; color: #fff; } .quick-item.wa .qi-ico { background: linear-gradient(135deg, #25D366, #128C7E); } .quick-item.mail .qi-ico { background: linear-gradient(135deg, var(--blue), var(--blue-light)); } .quick-item.ig .qi-ico { background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); } .qi-txt { display: flex; flex-direction: column; min-width: 0; } .qi-txt b { font-size: 0.94rem; font-weight: 600; color: var(--gray-1); letter-spacing: -0.01em; } .qi-txt small { font-size: 0.78rem; color: var(--gray-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ─── FOTOS DA SOLICITAÇÃO DE MANUTENÇÃO ─── */ .maint-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem; } .maint-shots .shot { display: flex; flex-direction: column; gap: 0.4rem; } .maint-shots .shot-label { font-size: 0.78rem; font-weight: 600; color: var(--gray-2); } .maint-shots .shot-img { border-radius: var(--radius-sm); overflow: hidden; background: var(--off2); min-height: 130px; display: grid; place-items: center; border: 1px solid var(--gray-6); } .maint-shots .shot-img a { display: block; width: 100%; line-height: 0; } .maint-shots .shot-img img { width: 100%; height: auto; display: block; } .maint-shots .shot-empty { font-size: 0.8rem; color: var(--gray-4); display: flex; align-items: center; gap: 6px; padding: 1rem; } /* Contato rápido: o item de e-mail é um