/* ============================================================ SIGEC v2.88 — TEMA MONDAY (referência: monday.com) Claro, arejado e amigável: branco sobre #F6F7FB, texto #323338, primária #6161FF, sistema multicolorido de status, Figtree, cantos 8px, sombras suaves. Reconstrução completa do tema. ============================================================ */ :root{ /* Tokens monday */ --m-primary: #6161FF; --m-primary-hover: #5151D9; --m-primary-tint: rgba(97,97,255,.10); --m-bg: #F6F7FB; --m-surface: #FFFFFF; --m-surface-2: #F5F6F8; --m-text: #323338; --m-muted: #676879; --m-faint: #9699A6; --m-border: #E6E9EF; --m-border-2: #C3C6D4; --m-green: #00C875; --m-green-deep: #007A4D; --m-orange: #FDAB3D; --m-orange-deep: #9C5F00; --m-red: #E2445C; --m-red-deep: #C22740; --m-blue: #579BFC; --m-blue-deep: #1F6FD6; --m-purple: #A25DDC; --m-purple-deep: #7E3EB8; --m-shadow: 0 4px 14px rgba(29,33,57,.08); --m-shadow-lift: 0 8px 24px rgba(29,33,57,.12); --m-font: "Figtree", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --m-r: 8px; --m-ease: cubic-bezier(.25,.6,.3,1); /* Remapeamento das variáveis originais do sistema */ --blue: var(--m-primary); --dark: #292F4C; --bg: var(--m-bg); --card: var(--m-surface); --border: var(--m-border); --text: var(--m-text); --muted: var(--m-muted); --green: var(--m-green-deep); --orange: var(--m-orange-deep); --red: var(--m-red-deep); --purple: var(--m-purple-deep); } /* ---------- Base ---------- */ body{ background: var(--m-bg); color: var(--m-text); font-family: var(--m-font); -webkit-font-smoothing: antialiased; } button{ font-family: var(--m-font); font-weight: 600; border-radius: var(--m-r); } h1,h2,h3{ font-family: var(--m-font); font-weight: 700; letter-spacing: -.01em; color: var(--m-text); } :focus-visible{ outline: 2px solid var(--m-primary); outline-offset: 2px; } ::selection{ background: rgba(97,97,255,.18); } /* ---------- Neutralização do azul antigo (#1769ff) e heróis navy ---------- */ .login,.verify-hero,.blue,.login-left,.mobile-head-modern,.clear-notifications-btn,.admin-hero,.provider-hero,.premium-title-icon,.premium-table-wrap::before, .table::before, .provider-admin-table::before,.mobile-head-modern, .admin-hero, .provider-hero, .logistics-hero, .commercial-hero,.primary, button.primary, .login-cta, .premium-login-cta,.notif-bell, .provider-top-actions .notif-bell, .provider-admin-top .notif-bell,.report-hero{ background: linear-gradient(135deg, #6161FF 0%, #5034FF 100%) !important; color: #fff !important; box-shadow: var(--m-shadow) !important; border: none !important; } .timeline-dot,.provider-menu-btn,.desktop-menu-fab,.desktop-drawer-nav button.active,.provider-admin-brand .logo,.provider-admin-menu-btn,.premium-option-check,.premium-sector-tile:hover .tile-arrow,.report-metric:before{ background: var(--m-primary) !important; background-image: none !important; } .login-badge.light,.area-elegant.active,.area-icon,.login-tag,.area-clean.active,.selected-badge,.drawer-user,.drawer-nav button.active,.hero-kicker,.icon-blue,.drawer-user strong,.premium-svg--generico,.quote-stage-cards button:hover, .quote-stage-cards button.active,.area-mobile-card.active,.selected-access,.premium-status-badge,.modalbox.smart-box-form input:focus, .modalbox.smart-box-form select:focus, .modalbox.smart-box-form textarea:focus,.premium-select-control:hover, .premium-select-control:focus,.premium-select-chevron,.premium-select-option.selected,.premium-sector-tile .tile-icon, .premium-login-modal-icon,.premium-login-modal-body input:focus,.login-demo-btn:hover,.quote-release-modal .provider-check:has(input:checked), .quote-release-modal-fixed .provider-check:has(input:checked),.report-count{ color: var(--m-primary) !important; } .area-elegant.active,.area-clean.active,.quote-stage-cards button:hover, .quote-stage-cards button.active,.area-mobile-card.active,.modalbox.smart-box-form input:focus, .modalbox.smart-box-form select:focus, .modalbox.smart-box-form textarea:focus,.premium-select-control:hover, .premium-select-control:focus,.premium-select-option.selected,.premium-login-modal-body input:focus,.login-demo-btn:hover,.quote-release-modal .provider-check:has(input:checked), .quote-release-modal-fixed .provider-check:has(input:checked){ border-color: var(--m-primary) !important; } /* ---------- Botões monday ---------- */ .primary.primary{ background: var(--m-primary) !important; color: #fff !important; background-image: none !important; box-shadow: none !important; } .primary.primary:hover{ background: var(--m-primary-hover) !important; } .ghost.ghost{ background: #fff !important; background-image: none !important; color: var(--m-text) !important; border: 1px solid var(--m-border-2) !important; box-shadow: none !important; } .ghost.ghost:hover{ background: var(--m-surface-2) !important; } .danger.danger{ background: #fff !important; background-image: none !important; color: var(--m-red-deep) !important; border: 1px solid var(--m-red) !important; box-shadow: none !important; } .danger.danger:hover{ background: rgba(226,68,92,.08) !important; } .ok.ok{ background: var(--m-green-deep) !important; color:#fff !important; } .warn.warn{ background: var(--m-orange-deep) !important; color:#fff !important; } /* ---------- Chips de status: sólidos multicoloridos (assinatura monday), em tons que passam WCAG 4.5 com texto branco ---------- */ .vazia.vazia.vazia{ background: #00854D !important; color:#fff !important; border:none !important; background-image:none !important; } .carregada.carregada.carregada{ background: #9C5F00 !important; color:#fff !important; border:none !important; background-image:none !important; } .manutencao.manutencao.manutencao{ background: #C22740 !important; color:#fff !important; border:none !important; background-image:none !important; } .retornada.retornada.retornada{ background: #7E3EB8 !important; color:#fff !important; border:none !important; background-image:none !important; } .em_uso.em_uso.em_uso, .badge.em_uso.em_uso{ background: #1F6FD6 !important; color:#fff !important; border:none !important; background-image:none !important; } .sim.sim.sim{ background: #00854D !important; color:#fff !important; border:none !important; background-image:none !important; } .nao.nao.nao{ background: #E6E9EF !important; color:#50535E !important; border:none !important; background-image:none !important; } .quote-badge.pendente.pendente{ background:#9C5F00 !important; color:#fff !important; border:none !important; } .quote-badge.aprovado.aprovado{ background:#00854D !important; color:#fff !important; border:none !important; } .quote-badge.recusado.recusado{ background:#C22740 !important; color:#fff !important; border:none !important; } .badge, .quote-badge{ font-weight: 600 !important; border-radius: 4px !important; letter-spacing:.01em; } /* ---------- Cards e superfícies ---------- */ .card, .search-card, .modalbox, .item, .notification-item, .smart-alert-panel, .admin-card{ background: #fff !important; background-image: none !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-r) !important; box-shadow: var(--m-shadow) !important; } .cards{ gap: 12px !important; } .cards .card{ padding: 18px 20px !important; transition: box-shadow .2s var(--m-ease), transform .2s var(--m-ease); } .cards .card:hover{ box-shadow: var(--m-shadow-lift) !important; transform: translateY(-2px); } .cards .card h3{ margin:0 0 6px !important; font-size:13px !important; font-weight:600 !important; color: var(--m-muted) !important; text-transform:none; letter-spacing:0; } .cards .card .big{ font-size:32px !important; font-weight:700 !important; color: var(--m-text) !important; line-height:1; } .cards .card:nth-child(1) .big{ color: var(--m-primary) !important; } .cards .card:nth-child(2) .big{ color: var(--m-green-deep) !important; } .cards .card:nth-child(3) .big{ color: var(--m-orange-deep) !important; } .cards .card:nth-child(4) .big{ color: var(--m-red-deep) !important; } .cards .card:nth-child(5) .big{ color: var(--m-blue-deep) !important; } /* ---------- Inputs ---------- */ input, select, textarea{ background: #fff !important; border: 1px solid var(--m-border-2) !important; color: var(--m-text) !important; border-radius: var(--m-r) !important; } input::placeholder, textarea::placeholder{ color: var(--m-faint) !important; } input:focus, select:focus, textarea:focus{ outline: none !important; border-color: var(--m-primary) !important; box-shadow: 0 0 0 3px rgba(97,97,255,.18) !important; } input:disabled, select:disabled, .locked-field.locked-field{ background: var(--m-surface-2) !important; color: var(--m-faint) !important; } /* ---------- Sidebar / drawers: claro monday ---------- */ .side, .app-drawer.app-drawer, #desktopDrawer.desktop-drawer, #providerDrawer.provider-drawer, #patioDrawer.patio-drawer{ background: #fff !important; background-image: none !important; border-right: 1px solid var(--m-border) !important; color: var(--m-text) !important; box-shadow: none !important; } .side button, .drawer-nav button{ color: var(--m-muted) !important; background: transparent !important; background-image:none !important; border: none !important; box-shadow: none !important; font-weight: 500 !important; } .side button:hover, .drawer-nav button:hover{ background: var(--m-surface-2) !important; color: var(--m-text) !important; } .side button.active, .drawer-nav button.active{ background: var(--m-primary-tint) !important; color: var(--m-primary) !important; font-weight: 600 !important; } .drawer-user.drawer-user{ background: var(--m-surface-2) !important; border: 1px solid var(--m-border) !important; color: var(--m-muted) !important; border-radius: var(--m-r) !important; } .drawer-user strong{ color: var(--m-text) !important; } .drawer-head h3, .brand h2{ color: var(--m-text) !important; } .brand small, .drawer-head small{ color: var(--m-muted) !important; } .menu-exit-btn.menu-exit-btn{ color: var(--m-red-deep) !important; background:#fff !important; border:1px solid var(--m-border) !important; } .menu-exit-btn.menu-exit-btn:hover{ background: rgba(226,68,92,.08) !important; } .logo.logo{ background: var(--m-primary-tint) !important; background-image:none !important; border: none !important; color: var(--m-primary) !important; border-radius: 10px !important; } .drawer-fab, .provider-menu-btn.provider-menu-btn, .desktop-menu-fab{ background: var(--m-primary) !important; background-image:none !important; border: none !important; box-shadow: var(--m-shadow-lift) !important; } /* ---------- Ícones ---------- */ .drawer-nav button .si, .side button .si{ color: var(--m-muted); } .drawer-nav button.active .si, .side button.active .si{ color: var(--m-primary); } .menu-exit-btn .si{ color: var(--m-red-deep) !important; } /* ---------- Tabelas ---------- */ table{ background:#fff; } th, thead th{ color: var(--m-muted) !important; font-size: 13px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; background: #fff !important; background-image: none !important; border-bottom: 1px solid var(--m-border-2) !important; } td{ border-color: var(--m-border) !important; color: var(--m-text); } tr:hover td{ background: var(--m-surface-2); } .premium-table-wrap, .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; background:#fff; border-radius: var(--m-r); border:1px solid var(--m-border); } /* ---------- Sino ---------- */ .notif-bell, .notif-bell.notif-bell{ position: relative !important; width: 40px !important; height: 40px !important; padding: 0 !important; display: grid !important; place-items: center !important; border-radius: var(--m-r) !important; background: #fff !important; background-image: none !important; border: 1px solid var(--m-border-2) !important; color: var(--m-text) !important; box-shadow: none !important; } .notif-bell .bell-icon{ display:grid; place-items:center; line-height:0; width:auto; height:auto; } .notif-bell svg{ display:block; color: var(--m-text) !important; stroke: currentColor !important; } .notif-bell svg *{ stroke: currentColor !important; } /* dentro dos heros navy: botão translúcido claro + ícone branco (visível sobre navy) */ .patio-header .notif-bell, .provider-hero .notif-bell, .admin-hero .notif-bell, .quotes-hero .notif-bell, .verify-hero .notif-bell, .provider-admin-top .notif-bell{ background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.30) !important; color: #fff !important; } .patio-header .notif-bell:hover, .provider-hero .notif-bell:hover, .admin-hero .notif-bell:hover, .quotes-hero .notif-bell:hover, .verify-hero .notif-bell:hover{ background: rgba(255,255,255,.22) !important; } .patio-header .notif-bell svg, .provider-hero .notif-bell svg, .admin-hero .notif-bell svg, .quotes-hero .notif-bell svg, .verify-hero .notif-bell svg, .provider-admin-top .notif-bell svg{ color:#fff !important; } .patio-header .notif-bell b, .provider-hero .notif-bell b, .admin-hero .notif-bell b, .verify-hero .notif-bell b{ border-color: #131C4A !important; } .notif-bell b, .notif-bell.notif-bell b{ position:absolute !important; top:-6px; right:-6px; left:auto; bottom:auto; min-width:18px; height:18px; padding:0 4px; display:none; place-items:center; border-radius:9px; font-size:10px; font-weight:700; background: var(--m-red) !important; color:#fff !important; border:2px solid #fff; } .notif-bell b.show{ display:grid !important; } /* ---------- Heróis internos (texto branco garantido) ---------- */ .patio-header, .verify-hero, .admin-hero, .quotes-hero, .provider-hero.provider-hero{ background: radial-gradient(420px 200px at 4% 0%, rgba(97,97,255,.55), transparent 62%), radial-gradient(360px 220px at 100% 120%, rgba(162,93,220,.32), transparent 60%), linear-gradient(120deg, #0B1437 0%, #131C4A 100%) !important; border: none !important; border-radius: 14px !important; color: #fff !important; box-shadow: var(--m-shadow) !important; } .patio-header h1, .patio-header p, .admin-hero h1, .admin-hero p, .provider-hero h1, .provider-hero p, .verify-hero *, .quotes-hero h1, .quotes-hero p{ color:#fff !important; } .patio-header .project-pill, .session-pill, .provider-hero span{ background: rgba(255,255,255,.16) !important; color:#fff !important; border: 1px solid rgba(255,255,255,.28) !important; border-radius:999px; font-weight:600 !important; } .patio-header .notif-bell, .provider-hero .notif-bell, .admin-hero .notif-bell{ background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.35) !important; color:#fff !important; } .header-count{ border-left:1px solid rgba(255,255,255,.3); } .header-count strong, .header-count span{ color:#fff !important; } /* ---------- Modais / notas / toast ---------- */ .modal{ background: rgba(41,47,76,.45) !important; backdrop-filter: blur(2px); } .modalbox.smart-box-form > .top, .smart-box-form.logistica-form .top, .commercial-form .top{ background: radial-gradient(340px 160px at 4% 0%, rgba(97,97,255,.55), transparent 62%), linear-gradient(120deg, #0B1437, #131C4A) !important; background-image: radial-gradient(340px 160px at 4% 0%, rgba(97,97,255,.55), transparent 62%), linear-gradient(120deg, #0B1437, #131C4A) !important; border: none !important; color:#fff !important; box-shadow:none !important; } .modalbox.smart-box-form > .top h2, .modalbox.smart-box-form > .top p{ color:#fff !important; } .commercial-note, .rule-note, .form-hint{ background: rgba(97,97,255,.07) !important; border: 1px solid rgba(97,97,255,.25) !important; color: var(--m-muted) !important; border-radius: var(--m-r) !important; } #toast, .toast{ background: #292F4C !important; color:#fff !important; border:none !important; border-radius: var(--m-r) !important; box-shadow: var(--m-shadow-lift) !important; } *::-webkit-scrollbar{ width:10px; height:10px; } *::-webkit-scrollbar-track{ background: var(--m-bg); } *::-webkit-scrollbar-thumb{ background: #C3C6D4; border-radius:8px; border:2px solid var(--m-bg); } /* ---------- Selects premium ---------- */ .premium-select-control{ background:#fff !important; border:1px solid var(--m-border-2) !important; color:var(--m-text) !important; } .premium-select-icon.premium-select-icon, .premium-select-head-icon.premium-select-head-icon{ background: var(--m-primary-tint) !important; background-image:none !important; color: var(--m-primary) !important; border:none !important; } .premium-option-check{ color: var(--m-primary) !important; } /* ------------------------------------------------------------ Sistema de ícones SVG (substitui todos os emojis) ------------------------------------------------------------ */ .si{ display: inline-block; vertical-align: -3px; flex: 0 0 auto; } button > .si:first-child{ margin-right: 4px; } .drawer-nav button, .desktop-drawer-nav button, .provider-drawer .drawer-nav button{ display: flex; align-items: center; gap: 10px; } .drawer-nav button .si, .desktop-drawer-nav button .si{ vertical-align: middle; margin-right: 0; } .logo .si, .pm-brand-mark .si{ display: block; vertical-align: 0; } .pm-ico .si{ display: block; } .action-btn span .si, .photo-btn span .si{ vertical-align: -3px; } .premium-option-check .si{ vertical-align: -2px; } .duplicate-icon .si{ display: block; margin: 0 auto; } .photo-add-icon .si, .photo-choice-icon .si, .upload-preview-empty-icon .si{ display: inline-block; vertical-align: middle; } .commercial-note .si, .rule-note .si{ vertical-align: -2px; margin-right: 2px; } /* ============================================================ LOGIN — hero navy monday (faixa escura + cartão claro elevado) Direção: menos texto, mais respiro; fundo navy vivo como as seções da monday.com; setores com cor sólida; CTA sólido. ============================================================ */ .pm-login{ position: relative; min-height: 100vh; min-height: 100dvh; background: #0B1437; color: #fff; overflow: hidden; display: flex; flex-direction: column; font-family: var(--m-font); } /* fundo navy com brilhos coloridos suaves (assinatura monday) */ .pm-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(680px 460px at 6% 4%, rgba(97,97,255,.42), transparent 60%), radial-gradient(560px 420px at 98% 8%, rgba(0,200,117,.20), transparent 60%), radial-gradient(620px 500px at 88% 100%, rgba(253,171,61,.20), transparent 58%), radial-gradient(520px 420px at 0% 100%, rgba(162,93,220,.24), transparent 58%); } .pm-bg-canvas{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity 1.4s var(--m-ease); } .pm-bg-canvas.on{ opacity:.30; } .pm-nav{ position: relative; z-index: 2; display:flex; align-items:center; justify-content:space-between; padding: 18px clamp(20px,4.5vw,56px); border-bottom: 1px solid rgba(255,255,255,.10); } .pm-brand{ display:flex; align-items:center; gap:12px; } .pm-brand-mark{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background: var(--m-primary); color:#fff; } .pm-brand-name{ display:flex; flex-direction:column; line-height:1.15; } .pm-brand-name strong{ font-size:16px; font-weight:700; letter-spacing:.02em; color:#fff; } .pm-brand-name small{ font-size:12px; color:rgba(255,255,255,.62); } .pm-nav-right{ display:flex; align-items:center; gap:14px; } .pm-status{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:rgba(255,255,255,.80); padding:8px 14px; border:1px solid rgba(255,255,255,.16); border-radius:999px; } .pm-status i{ width:8px; height:8px; border-radius:50%; background:var(--m-green); box-shadow:0 0 0 3px rgba(0,200,117,.22); } .pm-version{ font-size:12px; color:rgba(255,255,255,.45); font-weight:600; } .pm-main{ position:relative; z-index:1; flex:1; display:grid; grid-template-columns: minmax(0,1fr) minmax(360px,440px); gap: clamp(32px,5vw,90px); align-items:center; padding: clamp(32px,7vh,72px) clamp(20px,4.5vw,56px); max-width:1320px; width:100%; margin:0 auto; } .pm-copy{ min-width:0; } .pm-title{ font-family: var(--m-font); font-weight: 800; font-size: clamp(40px,6vw,76px); line-height:1.02; letter-spacing:-.03em; color:#fff; margin:0 0 20px; } .pm-title .pm-line{ display:block; overflow:hidden; } .pm-title .pm-line > span{ display:inline-block; } .pm-title em{ font-style:normal; color:#8F8FFF; } .pm-sub{ font-size:19px; line-height:1.5; color:rgba(255,255,255,.72); margin:0; max-width:38ch; } /* cartão de login claro elevado sobre o navy */ .pm-card{ background:#fff; border:none; border-radius:16px; box-shadow: 0 24px 60px rgba(0,0,0,.34); padding: clamp(24px,2.4vw,32px); width:100%; min-width:0; color:var(--m-text); } .pm-card::before{ content:none; } .pm-card h2{ font-size:22px; font-weight:700; margin:0 0 18px; color:var(--m-text); } .pm-sectors{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:20px; } .pm-sector{ display:flex; align-items:center; gap:10px; padding:11px 13px; min-width:0; background:#fff; border:1.5px solid var(--m-border); border-radius:var(--m-r); color:var(--m-text); font-size:13px; font-weight:600; cursor:pointer; text-align:left; transition: border-color .18s var(--m-ease), background .18s var(--m-ease), transform .18s var(--m-ease); } .pm-sector:hover{ transform:translateY(-1px); } .pm-sector .pm-ico{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex:0 0 auto; color:#fff; } .pm-sector:last-child:nth-child(odd){ grid-column:1 / -1; } /* setores em cor sólida (destaque pontual) */ .pm-sector.sector-patio .pm-ico{ background:#00C875; } .pm-sector.sector-logistica .pm-ico{ background:#579BFC; } .pm-sector.sector-comercial .pm-ico{ background:#FDAB3D; } .pm-sector.sector-prestador .pm-ico{ background:#A25DDC; } .pm-sector.sector-admin .pm-ico{ background:var(--m-primary); } .pm-sector.sector-patio.active{ border-color:#00C875; background:rgba(0,200,117,.09); } .pm-sector.sector-logistica.active{ border-color:#579BFC; background:rgba(87,155,252,.10); } .pm-sector.sector-comercial.active{ border-color:#FDAB3D; background:rgba(253,171,61,.12); } .pm-sector.sector-prestador.active{ border-color:#A25DDC; background:rgba(162,93,220,.10); } .pm-sector.sector-admin.active{ border-color:var(--m-primary); background:var(--m-primary-tint); } .pm-field{ display:block; margin-bottom:14px; } .pm-field span{ display:block; font-size:13px; font-weight:600; color:var(--m-text); margin-bottom:6px; } .pm-login .pm-card input#login, .pm-login .pm-card input#senha{ width:100%; box-sizing:border-box; background:#fff !important; border:1.5px solid var(--m-border-2) !important; border-radius:var(--m-r) !important; color:var(--m-text) !important; font-size:15px; font-family:var(--m-font); padding:13px 14px; } .pm-login .pm-card input:focus{ border-color:var(--m-primary) !important; box-shadow:0 0 0 3px rgba(97,97,255,.18) !important; } .pm-login .login-cta{ width:100%; margin-top:4px; background: var(--m-primary); color:#fff; border:none; border-radius:10px; padding:15px 18px; font-size:15px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px; transition: background .18s var(--m-ease), transform .15s var(--m-ease); } .pm-login .login-cta:hover{ background: var(--m-primary-hover); } .pm-login .login-cta:active{ transform: scale(.985); } .pm-login .login-cta .pm-arrow{ display:inline-grid; place-items:center; transition: transform .18s var(--m-ease); } .pm-login .login-cta:hover .pm-arrow{ transform: translateX(3px); } .pm-card .sigec-login-message{ margin:0 0 14px; padding:10px 12px; border-radius:var(--m-r); font-size:13px; line-height:1.5; border:1px solid var(--m-border); } .pm-card .sigec-login-message.error{ border-color:var(--m-red); color:var(--m-red-deep); background:rgba(226,68,92,.07); } .pm-card .sigec-login-message.info{ color:var(--m-muted); } .pm-card .sigec-login-message.success{ border-color:var(--m-green); color:var(--m-green-deep); background:rgba(0,200,117,.08); } .pm-foot{ position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; padding:16px clamp(20px,4.5vw,56px); border-top:1px solid rgba(255,255,255,.10); font-size:12px; font-weight:500; color:rgba(255,255,255,.45); } /* entrada (fallback CSS; GSAP assume quando online) */ .pm-reveal{ opacity:0; transform:translateY(16px); } .pm-login.pm-css-anim .pm-reveal{ animation: pm-in .8s var(--m-ease) forwards; animation-delay: calc(var(--pm-i,0) * 80ms); } @keyframes pm-in{ to{ opacity:1; transform:translateY(0); } } @media (prefers-reduced-motion: reduce){ .pm-reveal{ opacity:1 !important; transform:none !important; animation:none !important; } .pm-bg-canvas{ display:none; } } @media (max-width:1024px){ .pm-main{ grid-template-columns:minmax(0,1fr); gap:34px; padding-top:34px; align-items:start; } .pm-copy{ text-align:left; } .pm-card{ justify-self:stretch; max-width:520px; margin:0; } .pm-title{ max-width:none; } } @media (max-width:640px){ .pm-nav{ padding:14px 18px; } .pm-status{ display:none; } .pm-main{ padding:26px 18px 34px; gap:26px; } .pm-title{ font-size:40px; } .pm-sub{ font-size:16px; } .pm-card{ padding:22px 18px; } .pm-foot{ flex-direction:column; gap:6px; text-align:center; } } /* ============================================================ PRESTADOR — layout (tema claro) + correção do grid blowout ============================================================ */ .provider-main, .provider-main.provider-main{ max-width:1120px !important; width:100%; margin:0 auto !important; padding:24px clamp(16px,3vw,40px) 48px !important; display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:18px !important; align-content:start; } .provider-main > *{ min-width:0; } .provider-hero.provider-hero{ border-radius:14px !important; padding:clamp(22px,3.4vw,36px) !important; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; position:relative; } .provider-hero h1{ font-size:clamp(24px,3.4vw,36px) !important; font-weight:700 !important; margin:12px 0 8px !important; } .provider-hero p{ font-weight:400 !important; font-size:14px !important; max-width:52ch; line-height:1.65; opacity:.92; } .provider-stats, .provider-stats.provider-stats{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:12px !important; } .provider-stats button{ background:#fff !important; background-image:none !important; border:1px solid var(--m-border) !important; border-radius:var(--m-r) !important; padding:16px 18px !important; text-align:left; cursor:pointer; display:grid; gap:8px; min-width:0; box-shadow: var(--m-shadow) !important; transition: box-shadow .2s var(--m-ease), transform .2s var(--m-ease); } .provider-stats button:hover{ box-shadow: var(--m-shadow-lift) !important; transform:translateY(-2px); background:#fff !important; } .provider-stats small{ font-size:13px !important; font-weight:600; color:var(--m-muted) !important; text-transform:none; letter-spacing:0; } .provider-stats strong{ font-size:30px !important; font-weight:700 !important; color:var(--m-text) !important; line-height:1; font-variant-numeric:tabular-nums; } .provider-stats button:nth-child(1) strong{ color: var(--m-orange-deep) !important; } .provider-stats button:nth-child(2) strong{ color: var(--m-blue-deep) !important; } .provider-stats button:nth-child(3) strong{ color: var(--m-green-deep) !important; } .provider-stats button:nth-child(4) strong{ color: var(--m-red-deep) !important; } .provider-block-title{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:4px; } .provider-block-title h2{ font-size:21px !important; font-weight:700 !important; margin:0 !important; } .provider-card-list{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) !important; gap:14px !important; } .provider-empty, .provider-empty.provider-empty{ grid-column:1 / -1; display:grid; justify-items:center; gap:10px; text-align:center; padding:44px 24px !important; background:#fff !important; border:1px dashed var(--m-border-2) !important; border-radius:12px !important; color:var(--m-muted) !important; } .provider-empty .pe-icon{ width:52px; height:52px; display:grid; place-items:center; border-radius:12px; background: var(--m-primary-tint); color: var(--m-primary); } .provider-empty strong{ font-size:17px; font-weight:700; color:var(--m-text); } .provider-empty p{ margin:0; max-width:46ch; font-size:13px; line-height:1.7; color:var(--m-muted); } @media (max-width:700px){ .provider-stats, .provider-stats.provider-stats{ grid-template-columns:repeat(2,1fr) !important; } .provider-stats strong{ font-size:26px !important; } .provider-hero, .provider-hero.provider-hero{ flex-direction:column !important; padding-top:20px !important; } .provider-hero .notif-bell{ position:absolute !important; top:14px; right:14px; } .provider-hero h1{ font-size:24px !important; padding-right:52px; } .provider-empty p{ max-width:100%; } } /* ---------- Ajustes de contraste (auditoria WCAG) ---------- */ :root{ --m-muted: #5E6069; } .side button.active, .drawer-nav button.active{ color: #4B4BD6 !important; } .drawer-nav button.active .si, .side button.active .si{ color: #4B4BD6; } .drawer-user.drawer-user, .drawer-user.drawer-user span{ color: #595B69 !important; } .recent-empty.recent-empty, .quick-modern small, .mobile-card-modern small, .patio-list-empty, .timeline-empty{ color: var(--m-muted) !important; } /* ---------- Contraste: rodada final ---------- */ /* Sair (drawers mobile): mesmo padrão dos desktops — branco com vermelho acessível */ .patio-drawer .drawer-nav button:last-child, .provider-drawer .drawer-nav button:last-child{ background: #fff !important; background-image: none !important; color: var(--m-red-deep) !important; border: 1px solid var(--m-border) !important; } .patio-drawer .drawer-nav button:last-child .si, .provider-drawer .drawer-nav button:last-child .si{ color: var(--m-red-deep); } /* Pills sobre heróis primários: pill branca com texto primário (padrão monday) */ .patio-header .project-pill, .session-pill, .provider-hero span{ background: #fff !important; color: #4B4BD6 !important; border: none !important; font-weight: 700 !important; } /* Labels sobre gradiente primário: branco pleno */ .header-count span, .hero-panel span, .quotes-hero .eyebrow, .admin-hero .eyebrow, .verify-hero small, .verify-hero span, .patio-header small{ color: #fff !important; } /* Rótulo do excluir */ .action-btn.action-delete b{ color: var(--m-red-deep) !important; } /* ---------- Contraste: chips translúcidos sobre heróis → chips sólidos ---------- */ .patio-header .header-count, .header-count{ background: #fff !important; background-image: none !important; border: none !important; border-radius: 8px; padding: 10px 14px; } .header-count strong{ color: #4B4BD6 !important; } .header-count span{ color: #595B69 !important; } .eyebrow{ background: #fff !important; background-image: none !important; color: #4B4BD6 !important; font-weight: 700 !important; border: none !important; border-radius: 999px; } .action-btn.action-delete{ background: #fff !important; background-image: none !important; border: 1px solid var(--m-red) !important; } .action-btn.action-delete b, .action-btn.action-delete span{ color: var(--m-red-deep) !important; } .quotes-hero .eyebrow, .admin-hero .eyebrow{ background:#fff !important; color:#4B4BD6 !important; } /* ============================================================ v2.88.2 — Correções: sino visível + filtros da página Caixas ============================================================ */ /* ============================================================ FILTROS DE CAIXAS — barra limpa (corrige atropelamento) Um campo de busca largo + selects que quebram em linhas com largura mínima confortável. Vence as regras de @media de alta especificidade do style.css. ============================================================ */ .filters, .filters.filters, .desktop .filters, .desktop.desktop-mobile-ready .filters, .desktop-mobile-ready .filters{ display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 12px !important; margin: 16px 0 !important; align-items: start !important; width: 100% !important; max-width: 100% !important; } .filters > *{ min-width: 0 !important; max-width: 100% !important; } /* o