/* ========================================================================= CENTRAL DE SUPORTE ARTWEB — Design System v2 Tema claro premium (Apple / macOS), acentos vermelho + preto, glass. ========================================================================= */ .csa-wrap, .csa-portal, .csa-login-wrap{ --bg:#ffffff; --bg-alt:#f6f6f8; --surface:#ffffff; --surface-2:#fbfbfc; --surface-3:#f1f1f4; --border:#ececef; --border-soft:#eeeef1; --red:#ff3b30; --red-dark:#d70015; --red-glow:rgba(255,59,48,.35); --red-soft:rgba(255,59,48,.09); --black:#0b0b0d; --black-soft:#1c1c1e; --coral:#ff6a55; --amber:#ff9f0a; --teal:#0aa89e; --blue:#3a6df0; --green:#1fa858; --text:#0b0b0d; --text-dim:#6c6c74; --text-faint:#9a9aa2; --radius:16px; --radius-sm:10px; --radius-lg:22px; --shadow-xs:0 1px 2px rgba(20,20,25,.04); --shadow-sm:0 4px 14px -6px rgba(20,20,25,.08); --shadow-md:0 14px 34px -14px rgba(20,20,25,.16); --shadow-lg:0 26px 60px -18px rgba(20,20,25,.22); --glass-bg:rgba(255,255,255,.72); --glass-border:rgba(255,255,255,.5); --ease:cubic-bezier(.16,1,.3,1); font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',"Segoe UI",sans-serif; color:var(--text); -webkit-font-smoothing:antialiased; } /* ========================================================================= TEMA ESCURO — ativado via . Mesma paleta vermelho/preto, só troca as superfícies; contraste sempre alto, nada translúcido em cima de texto (só o dock/menu usa glass). ========================================================================= */ html[data-csa-theme="escuro"] .csa-wrap, html[data-csa-theme="escuro"] .csa-portal, html[data-csa-theme="escuro"] .csa-login-wrap{ --bg:#0b0b0d; --bg-alt:#131316; --surface:#18181b; --surface-2:#1e1e22; --surface-3:#242428; --border:#2b2b30; --border-soft:#232327; --black:#f5f5f7; --black-soft:#e4e4e7; --text:#f5f5f7; --text-dim:#a8a8b3; --text-faint:#75757f; --glass-bg:rgba(18,18,21,.62); --glass-border:rgba(255,255,255,.08); --shadow-xs:0 1px 2px rgba(0,0,0,.35); --shadow-sm:0 4px 14px -6px rgba(0,0,0,.5); --shadow-md:0 14px 34px -14px rgba(0,0,0,.6); --shadow-lg:0 26px 60px -18px rgba(0,0,0,.7); color-scheme: dark; } html[data-csa-theme="escuro"] .csa-modal, html[data-csa-theme="escuro"] .csa-modal-head, html[data-csa-theme="escuro"] .csa-modal-body, html[data-csa-theme="escuro"] .csa-modal-foot, html[data-csa-theme="escuro"] .csa-drawer{ background:var(--surface) !important; color:var(--text); } html[data-csa-theme="escuro"] .csa-toast{ background:var(--surface); color:var(--text); } html, body{ transition:background-color .25s ease; } .csa-wrap, .csa-portal, .csa-panel, .csa-stat, .csa-modal, .csa-drawer, .csa-table-wrap, .csa-btn{ transition:background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; } /* ---------- botão de alternar tema claro/escuro ---------- */ .csa-icon-btn{ width:42px; height:42px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; position:relative; } .csa-theme-ico{ position:absolute; font-size:16px; transition:opacity .25s var(--ease), transform .35s var(--ease); } .csa-theme-ico-moon{ opacity:0; transform:rotate(-90deg) scale(.4); } .csa-theme-ico-sun{ opacity:1; transform:rotate(0) scale(1); } html[data-csa-theme="escuro"] .csa-theme-ico-sun{ opacity:0; transform:rotate(90deg) scale(.4); } html[data-csa-theme="escuro"] .csa-theme-ico-moon{ opacity:1; transform:rotate(0) scale(1); } .csa-wrap *, .csa-portal *{ box-sizing:border-box; } .csa-wrap{ background:var(--bg); margin:16px -20px -10px -22px; padding:26px 26px 110px; } .csa-portal{ background:var(--bg-alt); padding:26px; padding-bottom:120px; border-radius:var(--radius-lg); min-height:100vh; } ::selection{ background:var(--red); color:#fff; } .csa-wrap ::-webkit-scrollbar, .csa-portal ::-webkit-scrollbar{ width:8px; height:8px; } .csa-wrap ::-webkit-scrollbar-thumb, .csa-portal ::-webkit-scrollbar-thumb{ background:#dcdce1; border-radius:8px; } /* ---------- Entrance micro-animations ---------- */ @keyframes csaFadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } } @keyframes csaScaleIn{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:scale(1); } } @keyframes csaFade{ from{ opacity:0; } to{ opacity:1; } } .csa-stat, .csa-panel, .csa-kcard, .csa-table-wrap{ animation:csaFadeUp .5s var(--ease) both; } .csa-grid-stats .csa-stat:nth-child(1){ animation-delay:.02s; } .csa-grid-stats .csa-stat:nth-child(2){ animation-delay:.06s; } .csa-grid-stats .csa-stat:nth-child(3){ animation-delay:.10s; } .csa-grid-stats .csa-stat:nth-child(4){ animation-delay:.14s; } .csa-grid-stats .csa-stat:nth-child(5){ animation-delay:.18s; } .csa-grid-stats .csa-stat:nth-child(6){ animation-delay:.22s; } .csa-grid-stats .csa-stat:nth-child(7){ animation-delay:.26s; } .csa-grid-stats .csa-stat:nth-child(8){ animation-delay:.30s; } .csa-h1{ font-size:24px; font-weight:800; margin:0 0 4px; letter-spacing:-.02em; } .csa-sub{ color:var(--text-dim); font-size:13.5px; margin:0 0 22px; } .csa-btn{ display:inline-flex; align-items:center; gap:8px; border-radius:12px; padding:11px 18px; font-weight:650; font-size:13px; cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text); box-shadow:var(--shadow-xs); transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); } .csa-btn:hover{ border-color:var(--red); color:var(--text); transform:translateY(-1px); box-shadow:var(--shadow-sm); } .csa-btn:active{ transform:translateY(0) scale(.98); } .csa-btn-primary{ background:linear-gradient(135deg,var(--red),var(--red-dark)); border:none; color:#fff !important; box-shadow:0 10px 24px -10px var(--red-glow); } .csa-btn-primary:hover{ box-shadow:0 14px 30px -10px var(--red-glow); } .csa-btn-danger{ background:transparent; border-color:#ffd4d0; color:var(--red-dark); } .csa-btn-danger:hover{ background:var(--red-soft); } /* Botão "Abrir chamado" precisa ser impossível de não ver: pulso sutil + glow vermelho constante. */ @keyframes csaPulseGlow{ 0%,100%{ box-shadow:0 10px 24px -10px var(--red-glow), 0 0 0 0 var(--red-glow); } 50%{ box-shadow:0 10px 28px -8px var(--red-glow), 0 0 0 6px transparent; } } [data-open-novo-chamado], #csa-btn-novo-chamado{ animation:csaPulseGlow 2.6s ease-in-out infinite; font-weight:800; } [data-open-novo-chamado]:hover, #csa-btn-novo-chamado:hover{ animation-play-state:paused; } /* Depois de enviar, o botão de "Enviar chamado" vira uma confirmação clara e some da tela (o form fecha em seguida). */ .csa-btn-sent{ background:var(--green) !important; box-shadow:none !important; cursor:default; } .csa-btn:disabled, .csa-btn[disabled]{ opacity:.75; cursor:not-allowed; transform:none !important; } .csa-portal-brand{ display:flex; align-items:center; gap:12px; } .csa-portal-logo{ height:40px; max-width:160px; width:auto; object-fit:contain; border-radius:8px; } .csa-grid-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:22px; } .csa-stat{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-xs); transition:transform .25s var(--ease), box-shadow .25s var(--ease); } .csa-stat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); } .csa-stat .num{ font-size:26px; font-weight:800; letter-spacing:-.02em; } .csa-stat .name{ color:var(--text-dim); font-size:12px; margin-top:3px; } .csa-stat.late .num{ color:var(--red); } .csa-stat.late{ box-shadow:0 0 0 1px var(--red-soft), var(--shadow-xs); } .csa-panel{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:20px; margin-bottom:16px; box-shadow:var(--shadow-xs); } .csa-panel h3{ margin:0 0 14px; font-size:14px; color:var(--text); font-weight:700; } .csa-pill{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:.4px; } .csa-pill::before{ content:''; width:6px; height:6px; border-radius:50%; } .pri-baixa{ background:rgba(10,168,158,.10); color:var(--teal); } .pri-baixa::before{ background:var(--teal); } .pri-normal{ background:rgba(58,109,240,.10); color:var(--blue); } .pri-normal::before{ background:var(--blue); } .pri-alta{ background:rgba(255,159,10,.14); color:var(--amber); } .pri-alta::before{ background:var(--amber); } .pri-urgente{ background:rgba(255,106,85,.14); color:#e0563f; } .pri-urgente::before{ background:var(--coral); } .pri-emergência{ background:var(--red-soft); color:var(--red-dark); } .pri-emergência::before{ background:var(--red); } .csa-status-chip{ font-size:11px; padding:4px 10px; border-radius:8px; background:var(--surface-3); color:var(--text-dim); font-weight:600; } .csa-sla{ font-size:11px; padding:5px 10px; border-radius:8px; font-family:ui-monospace,Menlo,monospace; font-weight:600; } .csa-sla.ok{ background:rgba(31,168,88,.10); color:var(--green); } .csa-sla.atrasado{ background:var(--red-soft); color:var(--red-dark); } /* ---------- Tabelas + versão responsiva em cards ---------- */ .csa-table-wrap{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); overflow-x:auto; box-shadow:var(--shadow-xs); } .csa-table{ width:100%; border-collapse:collapse; font-size:13px; } .csa-table th{ text-align:left; padding:13px 16px; color:var(--text-faint); font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; border-bottom:1px solid var(--border-soft); white-space:nowrap; } .csa-table td{ padding:13px 16px; border-bottom:1px solid var(--border-soft); color:var(--text); } .csa-table tr:last-child td{ border-bottom:none; } .csa-table tbody tr{ cursor:pointer; transition:background .15s ease; } .csa-table tbody tr:hover{ background:var(--bg-alt); } .csa-progress{ height:6px; background:var(--surface-3); border-radius:6px; overflow:hidden; width:90px; } .csa-progress i{ display:block; height:100%; background:linear-gradient(90deg,var(--red),var(--coral)); transition:width .4s var(--ease); } @media(max-width:900px){ .csa-table thead{ display:none; } .csa-table, .csa-table tbody, .csa-table tr, .csa-table td{ display:block; width:100%; } .csa-table tr{ padding:12px 14px; border-bottom:1px solid var(--border-soft); } .csa-table td{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:6px 0; border:none; text-align:right; } .csa-table td::before{ content:attr(data-label); font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-faint); font-weight:700; text-align:left; } .csa-table td:empty::before{ content:none; } } .csa-filters{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:16px; } .csa-select, .csa-input, .csa-textarea{ background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:10px 13px; font-size:13px; transition:border-color .15s ease, box-shadow .15s ease; } .csa-select:focus, .csa-input:focus, .csa-textarea:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft); } .csa-input, .csa-textarea{ width:100%; } .csa-field{ margin-bottom:14px; } .csa-field label{ display:block; font-size:12px; font-weight:600; color:var(--text-dim); margin-bottom:6px; } /* ---------- Kanban ---------- */ .csa-kanban-board{ display:flex; gap:14px; overflow-x:auto; padding-bottom:16px; } .csa-kcol{ background:var(--bg-alt); border:1px solid var(--border-soft); border-radius:var(--radius); min-width:270px; max-width:270px; } .csa-kcol-head{ padding:13px 15px; display:flex; justify-content:space-between; border-bottom:1px solid var(--border-soft); font-size:12.5px; font-weight:700; } .csa-kcol-body{ padding:10px; display:flex; flex-direction:column; gap:10px; min-height:80px; max-height:65vh; overflow-y:auto; transition:background .15s ease; } .csa-kcol-body.dragover{ background:var(--red-soft); } .csa-kcard{ background:var(--surface); border:1px solid var(--border-soft); border-left:3px solid var(--blue); border-radius:12px; padding:13px 14px; cursor:grab; box-shadow:var(--shadow-xs); transition:transform .2s var(--ease), box-shadow .2s var(--ease); } .csa-kcard:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); } .csa-kcard.dragging{ opacity:.4; } .csa-kcard.late{ box-shadow:0 0 0 2px var(--red-soft); } .csa-kcard .top{ display:flex; justify-content:space-between; margin-bottom:8px; } .csa-kcard .id{ font-size:10px; color:var(--text-faint); } .csa-kcard .title{ font-size:13px; font-weight:650; margin-bottom:8px; } .csa-kcard .cat{ font-size:10.5px; color:var(--text-dim); margin-bottom:10px; } /* ---------- Modal / Overlay (opaco, nunca transparente) ---------- */ .csa-overlay{ position:fixed; inset:0; background:rgba(11,11,13,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); z-index:999999; display:none; align-items:center; justify-content:center; padding:20px; } .csa-overlay.open{ display:flex; animation:csaFade .2s ease; } .csa-modal{ background:#ffffff !important; opacity:1 !important; border:1px solid var(--border-soft); border-radius:var(--radius-lg); width:100%; max-width:620px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); isolation:isolate; animation:csaScaleIn .28s var(--ease); } .csa-modal-head{ display:flex; justify-content:space-between; align-items:center; padding:20px 22px; border-bottom:1px solid var(--border-soft); background:#fff; position:sticky; top:0; z-index:2; } .csa-modal-body{ padding:22px; background:#fff; } .csa-modal-foot{ display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--border-soft); background:#fff; position:sticky; bottom:0; } .csa-close{ background:var(--surface-3); border:1px solid var(--border); color:var(--text-dim); width:30px; height:30px; border-radius:9px; cursor:pointer; transition:all .15s ease; } .csa-close:hover{ background:var(--red-soft); color:var(--red-dark); border-color:transparent; } /* ---------- Drawer lateral ---------- */ .csa-drawer-overlay{ position:fixed; inset:0; background:rgba(11,11,13,.4); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); z-index:99998; display:none; } .csa-drawer-overlay.open{ display:block; animation:csaFade .2s ease; } .csa-drawer{ position:fixed; top:0; right:-560px; width:560px; max-width:94vw; height:100vh; background:#ffffff; border-left:1px solid var(--border-soft); z-index:99999; transition:right .35s var(--ease); display:flex; flex-direction:column; color:var(--text); box-shadow:-30px 0 60px -20px rgba(20,20,25,.2); } .csa-drawer.open{ right:0; } .csa-drawer-head{ padding:20px 22px; border-bottom:1px solid var(--border-soft); } .csa-drawer-tabs{ display:flex; gap:18px; padding:0 22px; border-bottom:1px solid var(--border-soft); overflow-x:auto; } .csa-dtab{ padding:12px 2px; font-size:12.5px; font-weight:650; color:var(--text-faint); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; transition:color .15s ease; } .csa-dtab.active{ color:var(--text); border-color:var(--red); } .csa-drawer-scroll{ flex:1; overflow-y:auto; padding:20px 22px; } .csa-dpane{ display:none; } .csa-dpane.active{ display:block; animation:csaFade .25s ease; } .csa-checklist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; } .csa-checklist li{ display:flex; align-items:center; gap:10px; background:var(--bg-alt); border:1px solid var(--border-soft); padding:11px 13px; border-radius:10px; } .csa-checklist input:checked + span{ text-decoration:line-through; color:var(--text-faint); } .csa-timeline{ list-style:none; margin:0; padding:0; } .csa-timeline li{ padding:0 0 18px 22px; position:relative; border-left:1px solid var(--border); margin-left:4px; } .csa-timeline li:last-child{ border-color:transparent; } .csa-timeline li::before{ content:''; position:absolute; left:-5px; top:2px; width:9px; height:9px; border-radius:50%; background:var(--red); } .csa-timeline time{ display:block; font-size:10.5px; color:var(--text-faint); } .csa-chat-box{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; max-height:340px; overflow-y:auto; } .csa-msg{ max-width:78%; padding:10px 13px; border-radius:14px; font-size:13px; } .csa-msg.them{ background:var(--bg-alt); align-self:flex-start; } .csa-msg.me{ background:linear-gradient(135deg,var(--red),var(--red-dark)); color:#fff; align-self:flex-end; } .csa-msg time{ display:block; font-size:9px; opacity:.65; margin-top:3px; } .csa-chat-input{ display:flex; gap:8px; border-top:1px solid var(--border-soft); padding-top:12px; } .csa-chat-input input[type=text]{ flex:1; background:var(--bg-alt); border:1px solid var(--border); border-radius:22px; padding:10px 16px; color:var(--text); } .csa-chat-send{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--red),var(--red-dark)); border:none; color:#fff; cursor:pointer; flex-shrink:0; transition:transform .15s var(--ease); } .csa-chat-send:hover{ transform:scale(1.08); } .csa-internal-note{ background:rgba(255,159,10,.08); border:1px dashed rgba(255,159,10,.35); border-radius:10px; padding:11px 13px; margin-bottom:9px; font-size:12.5px; color:#8a5a00; } .csa-toast-wrap{ position:fixed; bottom:96px; right:20px; z-index:9999999; display:flex; flex-direction:column; gap:9px; } .csa-toast{ background:#fff; border:1px solid var(--border-soft); border-left:3px solid var(--red); border-radius:12px; padding:12px 16px; min-width:250px; font-size:12.5px; color:var(--text); box-shadow:var(--shadow-lg); animation:csaFadeUp .3s var(--ease); } .csa-toast b{ display:block; margin-bottom:2px; } .csa-toast span{ color:var(--text-dim); font-size:11.5px; } .csa-stars{ font-size:28px; letter-spacing:5px; color:var(--surface-3); cursor:pointer; } .csa-stars .on{ color:var(--amber); } /* ========================================================================= DOCK (desktop) — navegação inferior fixa estilo macOS ========================================================================= */ .csa-dock-wrap{ position:fixed; left:0; right:0; bottom:18px; z-index:9000; display:flex; justify-content:center; pointer-events:none; } .csa-dock{ pointer-events:auto; display:flex; align-items:flex-end; gap:6px; padding:9px 12px; border-radius:24px; background:var(--glass-bg); border:1px solid var(--glass-border); -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%); box-shadow:var(--shadow-lg); } .csa-dock-item{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:52px; height:52px; border-radius:16px; text-decoration:none; color:var(--text); background:transparent; transition:transform .22s var(--ease), background .22s var(--ease); } .csa-dock-item .ico{ font-size:21px; line-height:1; transition:transform .22s var(--ease); } .csa-dock-item:hover{ transform:translateY(-8px) scale(1.12); background:var(--surface-3); } .csa-dock-item.active{ background:var(--red-soft); } .csa-dock-item.active .ico{ transform:scale(1.05); } .csa-dock-item.active::after{ content:''; position:absolute; bottom:4px; width:4px; height:4px; border-radius:50%; background:var(--red); } .csa-dock-tip{ position:absolute; bottom:64px; left:50%; transform:translateX(-50%) translateY(4px); background:var(--black); color:#fff; font-size:11px; font-weight:600; padding:5px 10px; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; } .csa-dock-item:hover .csa-dock-tip{ opacity:1; transform:translateX(-50%) translateY(0); } @media(max-width:900px){ .csa-dock-wrap{ display:none; } } /* ========================================================================= BOTTOM NAV (mobile) — navegação inferior tipo app ========================================================================= */ .csa-mobile-nav{ display:none; } @media(max-width:900px){ .csa-mobile-nav{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:9000; background:var(--glass-bg); -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%); border-top:1px solid var(--border-soft); padding:8px 6px calc(8px + env(safe-area-inset-bottom)); justify-content:space-around; box-shadow:0 -8px 30px -14px rgba(20,20,25,.15); } .csa-mobile-nav-item{ display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; padding:6px 2px; border-radius:12px; color:var(--text-faint); text-decoration:none; background:none; border:none; font-size:10px; font-weight:650; cursor:pointer; transition:color .18s ease, transform .18s ease; } .csa-mobile-nav-item .ico{ font-size:19px; line-height:1; transition:transform .18s ease; } .csa-mobile-nav-item:active{ transform:scale(.92); } .csa-mobile-nav-item.active{ color:var(--red); } .csa-mobile-nav-item.active .ico{ transform:translateY(-2px); } } @media(max-width:782px){ .csa-drawer{ width:100%; } .csa-grid-stats{ grid-template-columns:1fr 1fr; } } /* Empilha qualquer grid de duas/mais colunas em telas pequenas — nenhum componente fica lado a lado no mobile */ @media(max-width:760px){ .csa-wrap [style*="grid-template-columns"], .csa-portal [style*="grid-template-columns"]{ grid-template-columns:1fr !important; } } /* ========================================================================= RESPONSIVIDADE MOBILE — layout usando ~95% da largura da tela, bem colado nas bordas, sem desperdiçar espaço em telas pequenas. ========================================================================= */ @media(max-width:640px){ .csa-wrap{ margin:10px -12px -10px -14px; padding:14px 2.5% 130px; width:95vw; } .csa-portal{ padding:14px 2.5% 140px; width:100%; border-radius:14px; } .csa-h1{ font-size:clamp(18px,5vw,22px); } .csa-panel{ padding:16px 14px; border-radius:14px; } .csa-modal{ max-width:95vw; width:95vw; border-radius:16px; } .csa-modal-head, .csa-modal-foot{ padding:14px 16px; } .csa-modal-body{ padding:16px; } .csa-grid-stats{ grid-template-columns:1fr 1fr; gap:10px; } .csa-stat{ padding:14px; } .csa-stat .num{ font-size:22px; } .csa-portal-top{ flex-wrap:wrap; gap:10px; } .csa-portal-brand{ width:100%; } .csa-filters{ gap:6px; } .csa-filters .csa-select{ flex:1 1 auto; min-width:0; } .csa-kcol{ min-width:88vw; max-width:88vw; } .csa-toast-wrap{ left:2.5%; right:2.5%; bottom:78px; } .csa-toast{ min-width:0; width:100%; } } /* ---------- Mais vida: destaques coloridos por tipo de estatística (deixa o dashboard menos "cinza") ---------- */ .csa-stat.accent-blue{ box-shadow:0 0 0 1px rgba(58,109,240,.18), var(--shadow-xs); } .csa-stat.accent-blue .num{ color:var(--blue); } .csa-stat.accent-green{ box-shadow:0 0 0 1px rgba(31,168,88,.18), var(--shadow-xs); } .csa-stat.accent-green .num{ color:var(--green); } .csa-stat.accent-amber{ box-shadow:0 0 0 1px rgba(255,159,10,.2), var(--shadow-xs); } .csa-stat.accent-amber .num{ color:var(--amber); } .csa-stat.accent-teal{ box-shadow:0 0 0 1px rgba(10,168,158,.2), var(--shadow-xs); } .csa-stat.accent-teal .num{ color:var(--teal); } .csa-panel h3{ display:flex; align-items:center; gap:8px; } .csa-panel-icon{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px; background:var(--red-soft); font-size:13px; } /* Setor: etiqueta colorida usada em tabelas e cards para reforçar o roteamento automático */ .csa-setor-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:650; padding:4px 10px; border-radius:20px; background:var(--surface-3); color:var(--text-dim); } /* ========================================================================= GARANTIA: nenhum botão de enviar/confirmar pode ficar escondido — nem atrás do dock flutuante, nem cortado por overflow, nem transparente. ========================================================================= */ .csa-overlay{ z-index:2147483000 !important; } .csa-drawer-overlay{ z-index:2147482900 !important; } .csa-drawer{ z-index:2147482950 !important; } .csa-modal-foot, .csa-drawer .csa-drawer-scroll + *{ flex-shrink:0; } .csa-modal-foot{ min-height:64px; } .csa-modal-foot .csa-btn, .csa-form-actions .csa-btn, form button[type="submit"].csa-btn{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; } /* Qualquer form solto (fora de modal) recebe uma barra de ação fixa e sempre visível ao fim do formulário, nunca coberta pelo dock inferior. */ .csa-form-actions{ position:sticky; bottom:0; left:0; right:0; display:flex; justify-content:flex-end; gap:10px; padding:14px 0 4px; margin-top:8px; background:linear-gradient(180deg, transparent, var(--surface) 35%); } .csa-form-submit-sticky{ position:sticky; bottom:calc(18px + 56px + 14px); z-index:8500; margin-top:14px; box-shadow:0 12px 30px -10px var(--red-glow), 0 0 0 6px var(--surface); } @media(max-width:900px){ .csa-form-submit-sticky{ bottom:calc(8px + 60px + 10px); } } /* Barra de progresso da meta comercial */ .csa-meta-bar{ height:10px; background:var(--surface-3); border-radius:8px; overflow:hidden; } .csa-meta-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--green),var(--teal)); transition:width .5s var(--ease); } .csa-meta-bar.baixo i{ background:linear-gradient(90deg,var(--red),var(--coral)); } .csa-meta-bar.medio i{ background:linear-gradient(90deg,var(--amber),var(--coral)); }