/* ============================================================ inCadencia — Design System Tokens, componentes e utilitários. Mobile-first. ============================================================ */ /* ---------- 1. Tokens ---------- */ :root{ /* Cor de marca */ --brand-50:#eef2ff; --brand-100:#e0e7ff; --brand-200:#c7d2fe; --brand-400:#818cf8; --brand-500:#6366f1; --brand-600:#4f46e5; --brand-700:#4338ca; /* Neutros */ --ink-900:#0f172a; --ink-800:#1e293b; --ink-700:#334155; --ink-500:#64748b; --ink-400:#94a3b8; --ink-300:#cbd5e1; --ink-200:#e2e8f0; --ink-100:#f1f5f9; --ink-50:#f8fafc; --surface:#ffffff; --bg:#f6f7fb; /* Semânticas */ --ok-500:#10b981; --ok-50:#ecfdf5; --warn-500:#f59e0b; --warn-50:#fffbeb; --danger-500:#ef4444; --danger-50:#fef2f2; --info-500:#0ea5e9; --info-50:#f0f9ff; /* Tipografia */ --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.9375rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.25rem; /* Espaçamentos */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; /* Raio e sombra */ --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px; --shadow-sm:0 1px 2px rgba(15,23,42,.06); --shadow-md:0 4px 16px rgba(15,23,42,.07); --shadow-lg:0 12px 40px rgba(15,23,42,.10); --ring:0 0 0 3px var(--brand-100); --transition:.18s cubic-bezier(.4,0,.2,1); --sidebar-w:248px; } /* ---------- 1b. Modo escuro (data-theme="dark" no ) ---------- */ html[data-theme="dark"]{ color-scheme:dark; --brand-50:#26264d; --brand-100:#312e81; --brand-200:#3d3a96; --brand-400:#a5b4fc; --brand-500:#818cf8; --brand-600:#6d78f6; --brand-700:#a5b4fc; --ink-900:#f1f5f9; --ink-800:#e2e8f0; --ink-700:#cbd5e1; --ink-500:#94a3b8; --ink-400:#7c8ba1; --ink-300:#475569; --ink-200:#2e3c52; --ink-100:#243147; --ink-50:#1b2740; --surface:#141f36; --bg:#0b1120; --ok-50:#0a2b1e; --warn-50:#2b2008; --danger-50:#2d1214; --info-50:#0a2537; --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 4px 16px rgba(0,0,0,.40); --shadow-lg:0 12px 40px rgba(0,0,0,.50); --ring:0 0 0 3px #312e81; } html[data-theme="dark"] ::selection{background:#3730a3} html[data-theme="dark"] img{opacity:.94} /* alterna o ícone do botão de tema */ html:not([data-theme="dark"]) .theme-when-dark{display:none} html[data-theme="dark"] .theme-when-light{display:none} /* ---------- 2. Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ font-family:var(--font);font-size:var(--fs-base);color:var(--ink-800); background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none} input,select,textarea{font-family:inherit;font-size:var(--fs-base)} /* Ícones acompanham o texto na mesma linha (nunca empilhados em cima). */ svg{display:inline-block;vertical-align:-0.18em;flex-shrink:0} ::selection{background:var(--brand-200)} /* ---------- 3. Layout shell ---------- */ .app{display:flex;min-height:100vh} .sidebar{ width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--ink-200); display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:40; transform:translateX(-100%);transition:transform var(--transition); } .sidebar.open{transform:translateX(0)} .main{flex:1;min-width:0;display:flex;flex-direction:column;width:100%} .content{padding:var(--sp-5);max-width:1240px;margin:0 auto;width:100%} .scrim{position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:39;opacity:0; pointer-events:none;transition:opacity var(--transition)} .scrim.show{opacity:1;pointer-events:auto} @media(min-width:1024px){ .sidebar{transform:translateX(0)} .main{margin-left:var(--sidebar-w)} .scrim{display:none} .content{padding:var(--sp-8) var(--sp-10)} } /* ---------- 4. Brand & nav ---------- */ .brand{display:flex;align-items:center;gap:10px;padding:var(--sp-5) var(--sp-5) var(--sp-4)} .brand-mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center; background:linear-gradient(135deg,var(--brand-500),var(--brand-700));color:#fff;box-shadow:var(--shadow-sm)} .brand-name{font-weight:700;font-size:var(--fs-lg);letter-spacing:-.02em;color:var(--ink-900)} .brand-sub{font-size:var(--fs-xs);color:var(--ink-400);margin-top:-2px} .nav{padding:var(--sp-2) var(--sp-3);display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto} .nav-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em; color:var(--ink-400);font-weight:600;padding:var(--sp-4) var(--sp-3) var(--sp-1)} .nav-item{display:flex;align-items:center;gap:11px;padding:10px var(--sp-3);border-radius:var(--r-md); color:var(--ink-600,#475569);font-weight:500;font-size:var(--fs-base);transition:var(--transition)} .nav-item:hover{background:var(--ink-100);color:var(--ink-900)} .nav-item.active{background:var(--brand-50);color:var(--brand-700);font-weight:600} .nav-item.active svg{color:var(--brand-600)} .nav-item svg{color:var(--ink-400)} /* Scrollbar discreto: some quando parado, aparece suave ao interagir. */ .nav{scrollbar-width:thin;scrollbar-color:transparent transparent} .nav:hover{scrollbar-color:var(--ink-200) transparent} .nav::-webkit-scrollbar{width:8px} .nav::-webkit-scrollbar-track{background:transparent} .nav::-webkit-scrollbar-thumb{background:transparent;border-radius:8px;border:2px solid transparent;background-clip:padding-box;transition:background .2s} .nav:hover::-webkit-scrollbar-thumb{background:var(--ink-200);background-clip:padding-box} .nav::-webkit-scrollbar-thumb:hover{background:var(--ink-300)} /* Grupo expansível (ex.: Painéis) */ .nav-group{display:flex;flex-direction:column} .nav-group-toggle{cursor:pointer;border:0;background:none;width:100%;font-family:inherit;font-size:var(--fs-base)} .nav-caret{margin-left:auto;display:inline-flex;transition:transform .18s ease} .nav-group.open>.nav-group-toggle .nav-caret{transform:rotate(180deg)} .nav-group-toggle.has-active{color:var(--brand-700);font-weight:600} .nav-group-toggle.has-active>svg:first-child{color:var(--brand-600)} .nav-sub{display:none;flex-direction:column;gap:2px;margin:2px 0 4px 16px;padding-left:8px;border-left:1px solid var(--ink-200)} .nav-group.open>.nav-sub{display:flex} .nav-sub .nav-item{padding:8px var(--sp-3);font-size:.86rem} /* Personalização do menu (reordenar + ocultar) */ .nav-sec{display:flex;flex-direction:column;gap:2px} .nav-hidden{display:none} .nav-custom-bar{margin-top:auto;padding-top:12px;display:flex;flex-direction:column;gap:2px} .nav-custom-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px var(--sp-3);border:0;background:none; color:var(--ink-400);font-family:inherit;font-size:.8rem;font-weight:600;cursor:pointer;border-radius:var(--r-md);transition:var(--transition)} .nav-custom-btn:hover{background:var(--ink-100);color:var(--ink-700)} .nav-custom-reset{font-size:.74rem;color:var(--brand-600);text-align:center;text-decoration:none;padding:3px} .nav-custom-reset:hover{text-decoration:underline} .nav-eye{display:none} .nav-editing .nav-eye{display:inline-flex;align-items:center;justify-content:center;margin-left:auto; color:var(--ink-400);width:26px;height:26px;border-radius:7px;flex:none} .nav-editing .nav-eye:hover{background:var(--ink-200);color:var(--ink-800)} .nav-editing .nav-sec{outline:1px dashed var(--ink-200);outline-offset:3px;border-radius:var(--r-md)} .nav-editing .nav-item[draggable]{cursor:grab} .nav-editing .nav-item.active{background:none;color:var(--ink-600);font-weight:500} .nav-editing .nav-item.active svg{color:var(--ink-400)} .nav-editing .nav-hidden{display:flex;opacity:.5} .nav-editing .nav-group.nav-hidden{display:flex} .nav-editing .nav-hidden .nav-eye{color:var(--danger-500)} .nav-dragging{opacity:.45;background:var(--brand-50)} /* ---------- Date picker próprio ---------- */ .dp-input{cursor:pointer} .dp-pop{position:fixed;z-index:80;display:none;width:270px;background:var(--surface); border:1px solid var(--ink-200);border-radius:14px;box-shadow:var(--shadow-lg);padding:12px; opacity:0;transform:translateY(-4px);transition:opacity .14s,transform .14s} .dp-pop.show{display:block;opacity:1;transform:translateY(0)} .dp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px} .dp-title{font-weight:700;color:var(--ink-900);font-size:.9rem} .dp-nav{width:30px;height:30px;border-radius:9px;border:1px solid var(--ink-200);background:var(--surface); cursor:pointer;color:var(--ink-600);flex:none;font-size:1.1rem;line-height:1;display:flex;align-items:center;justify-content:center;font-family:inherit} .dp-nav:hover{background:var(--ink-100);color:var(--ink-900)} .dp-week{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px} .dp-week span{text-align:center;font-size:.7rem;font-weight:700;color:var(--ink-400);padding:4px 0} .dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .dp-day{aspect-ratio:1;border:0;background:none;border-radius:9px;cursor:pointer;font-family:inherit; font-size:.82rem;color:var(--ink-700);display:flex;align-items:center;justify-content:center;transition:background .1s} .dp-day.is-blank{visibility:hidden;cursor:default} .dp-day:hover:not(.is-dis):not(.is-blank){background:var(--brand-50);color:var(--brand-700)} .dp-day.is-today{font-weight:800;color:var(--brand-600)} .dp-day.is-sel{background:var(--brand-600);color:#fff;font-weight:700} .dp-day.is-sel:hover{background:var(--brand-600);color:#fff} .dp-day.is-dis{color:var(--ink-300);cursor:not-allowed;opacity:.55} .dp-foot{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--ink-100)} .dp-link{border:0;background:none;color:var(--brand-600);font-weight:600;font-size:.8rem;cursor:pointer;font-family:inherit;padding:4px 8px;border-radius:7px} .dp-link:hover{background:var(--brand-50)} /* ---------- Central de Ajuda & Suporte ---------- */ .help-list{display:flex;flex-direction:column;gap:6px} .help-item{border:1px solid var(--ink-200);border-radius:var(--r-md);overflow:hidden;background:var(--surface)} .help-item>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;cursor:pointer;font-weight:600;color:var(--ink-800);list-style:none} .help-item>summary::-webkit-details-marker{display:none} .help-item>summary>svg{color:var(--ink-400);flex:none;transition:transform .18s} .help-item[open]>summary{border-bottom:1px solid var(--ink-100)} .help-item[open]>summary>svg{transform:rotate(180deg)} .help-item .help-body{padding:12px 14px;color:var(--ink-600);font-size:.9rem;line-height:1.6} .help-center>summary{list-style:none;cursor:pointer} .help-center>summary::-webkit-details-marker{display:none} .help-center-head{display:flex;align-items:center;justify-content:space-between;gap:12px} .help-center-caret{transition:transform .18s;color:var(--ink-400)} .help-center[open]>summary .help-center-caret{transform:rotate(180deg)} .help-center-body{margin-top:22px} .help-searchbox{display:flex;align-items:center;gap:8px;padding:11px 14px;border:1px solid var(--ink-200);border-radius:var(--r-md);color:var(--ink-400);margin-bottom:14px} .help-searchbox input{border:0;outline:0;flex:1;background:none;color:var(--ink-900);font-size:.92rem;font-family:inherit} .help-eyebrow{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-400);margin:4px 0 8px} .help-eyebrow svg{color:var(--brand-500)} .thread{display:flex;flex-direction:column;gap:12px} .msg{border-radius:var(--r-md);padding:10px 14px;max-width:88%;border:1px solid var(--ink-200)} .msg-user{background:var(--ink-50);align-self:flex-start;border-top-left-radius:4px} .msg-agent{background:var(--brand-50);border-color:var(--brand-100);align-self:flex-end;border-top-right-radius:4px} .msg-internal{background:var(--warn-50);border-color:var(--warn-500);align-self:stretch;max-width:100%} .msg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px} .msg-who{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.82rem;color:var(--ink-800)} .msg-who svg{color:var(--ink-400);flex:none} .msg-time{font-size:.72rem;color:var(--ink-400);white-space:nowrap;flex:none} .msg-body{color:var(--ink-700);font-size:.9rem;line-height:1.55;white-space:pre-wrap;word-break:break-word} .desk-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start} @media(min-width:900px){.desk-grid{grid-template-columns:1fr 300px}} .desk-side{display:flex;flex-direction:column;gap:12px} /* Banner de modo suporte (acesso cross-tenant) */ .support-strip{display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,#b91c1c,#dc2626);color:#fff; padding:11px 16px;border-radius:12px;margin-bottom:18px;box-shadow:0 6px 18px rgba(185,28,28,.28);font-size:.9rem} .support-strip .support-ico{display:flex;flex:none} .support-strip strong{font-weight:800} .support-exit{background:#fff;color:#b91c1c;font-weight:700;white-space:nowrap;border:0} .support-exit:hover{background:#fee2e2} .nav-foot{padding:var(--sp-3);border-top:1px solid var(--ink-200)} .user-chip{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r-md)} .user-chip:hover{background:var(--ink-100)} .avatar{width:36px;height:36px;border-radius:var(--r-full);display:grid;place-items:center; background:var(--brand-100);color:var(--brand-700);font-weight:600;font-size:var(--fs-sm);flex-shrink:0} .avatar.lg{width:48px;height:48px;font-size:var(--fs-md)} .user-meta{min-width:0} .user-name{font-weight:600;font-size:var(--fs-sm);color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .user-role{font-size:var(--fs-xs);color:var(--ink-400)} /* ---------- 5. Topbar ---------- */ .topbar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5); background:var(--surface);border-bottom:1px solid var(--ink-200);position:sticky;top:0;z-index:30} .topbar h1{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.02em;color:var(--ink-900)} .icon-btn{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center; color:var(--ink-500);transition:var(--transition)} .icon-btn:hover{background:var(--ink-100);color:var(--ink-900)} .menu-toggle{display:grid} @media(min-width:1024px){.menu-toggle{display:none}} .topbar-spacer{flex:1} /* ---------- 6. Tipografia utilitária ---------- */ .h-hero{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.03em;color:var(--ink-900)} .h-section{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.02em;color:var(--ink-900)} .eyebrow{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em; font-weight:700;color:var(--ink-400)} .muted{color:var(--ink-500)} .text-sm{font-size:var(--fs-sm)} .text-xs{font-size:var(--fs-xs)} /* ---------- 7. Cards ---------- */ .card{background:var(--surface);border:1px solid var(--ink-200);border-radius:var(--r-lg); box-shadow:var(--shadow-sm)} .card-pad{padding:var(--sp-5)} .card-hover{transition:var(--transition)} .card-hover:hover{box-shadow:var(--shadow-md);border-color:var(--ink-300);transform:translateY(-1px)} .grid{display:grid;gap:var(--sp-4)} .grid-kpi{grid-template-columns:repeat(2,1fr)} .grid-2{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr} @media(min-width:680px){.grid-kpi{grid-template-columns:repeat(4,1fr)}.grid-2{grid-template-columns:1fr 1fr}} @media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}} /* ---------- 8. KPI ---------- */ .kpi{padding:var(--sp-5);display:flex;flex-direction:column;gap:6px} .kpi-ico{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;margin-bottom:6px} .kpi-val{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.03em;color:var(--ink-900);line-height:1} .kpi-label{font-size:var(--fs-sm);color:var(--ink-500)} .kpi-trend{display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-xs);font-weight:600} .t-up{color:var(--ok-500)} .t-down{color:var(--danger-500)} /* ---------- 9. Botões ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:10px 18px;border-radius:var(--r-md);font-weight:600;font-size:var(--fs-base); transition:var(--transition);white-space:nowrap;line-height:1} .btn:active{transform:scale(.98)} .btn-primary{background:var(--brand-600);color:#fff;box-shadow:var(--shadow-sm)} .btn-primary:hover{background:var(--brand-700)} .btn-ghost{background:var(--ink-100);color:var(--ink-700)} .btn-ghost:hover{background:var(--ink-200)} .btn-ok{background:var(--ok-500);color:#fff} .btn-ok:hover{filter:brightness(.95)} .btn-danger{background:var(--danger-50);color:var(--danger-500)} .btn-danger:hover{background:#fee2e2} .btn-lg{padding:14px 24px;font-size:var(--fs-md);border-radius:var(--r-lg)} .btn-block{width:100%} .btn-icon{padding:10px} .btn-sm{padding:7px 12px;font-size:var(--fs-sm);border-radius:var(--r-md);gap:6px} #refreshBtn.spin svg{animation:cadspin .8s linear infinite} @keyframes cadspin{to{transform:rotate(360deg)}} /* ---------- 10. Badges / chips ---------- */ .badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-full); font-size:var(--fs-xs);font-weight:600;line-height:1.5} .badge-ok{background:var(--ok-50);color:#047857} .badge-warn{background:var(--warn-50);color:#b45309} .badge-danger{background:var(--danger-50);color:#b91c1c} .badge-info{background:var(--info-50);color:#0369a1} .badge-neutral{background:var(--ink-100);color:var(--ink-600,#475569)} .dot{width:8px;height:8px;border-radius:var(--r-full);flex-shrink:0} .dot-ok{background:var(--ok-500)} .dot-warn{background:var(--warn-500)} .dot-danger{background:var(--danger-500)} .dot-neutral{background:var(--ink-400)} .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-full); background:var(--ink-100);color:var(--ink-600,#475569);font-size:var(--fs-sm);font-weight:500} .chip-active{background:var(--brand-600);color:#fff} /* ---------- 11. Progress ---------- */ .progress{height:8px;border-radius:var(--r-full);background:var(--ink-200);overflow:hidden} .progress>span{display:block;height:100%;border-radius:var(--r-full); background:linear-gradient(90deg,var(--brand-500),var(--brand-600));transition:width .6s ease} .progress.ok>span{background:linear-gradient(90deg,var(--ok-500),#059669)} /* ---------- 12. Forms ---------- */ .field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-4)} .label{font-size:var(--fs-sm);font-weight:600;color:var(--ink-700)} .hint{font-size:var(--fs-xs);color:var(--ink-400)} /* Descrição do campo sob demanda (info-button ao lado do rótulo) */ .hint-info{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;margin-left:6px; vertical-align:-0.18em;padding:0;border:0;border-radius:50%;cursor:pointer; background:var(--brand-50);color:var(--brand-600);transition:var(--transition)} .hint-info:hover{background:var(--brand-100)} .hint-info.open{background:var(--brand-600);color:#fff} .hint-collapsible{margin-top:2px;padding:8px 11px;background:var(--ink-50);border:1px solid var(--ink-100); border-radius:var(--r-md);line-height:1.5} .hint-collapsible[hidden]{display:none!important} .input,.select,.textarea{width:100%;padding:11px 14px;border:1px solid var(--ink-300); border-radius:var(--r-md);background:var(--surface);color:var(--ink-900);transition:var(--transition)} .input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--brand-500);box-shadow:var(--ring)} .textarea{resize:vertical;min-height:90px} .input-row{display:flex;gap:var(--sp-3);flex-wrap:wrap} .input-row>*{flex:1;min-width:140px} /* ---- Multi-select estilizado (setores / empresas) ---- */ .select[multiple]{padding:6px;background-image:none;overflow-y:auto} .select[multiple] option{ padding:9px 12px;margin:2px 0;border-radius:var(--r-sm,8px); color:var(--ink-800);cursor:pointer;transition:var(--transition)} .select[multiple] option:hover{background:var(--brand-50)} .select[multiple] option:checked{ /* truque do box-shadow inset força a cor da opção marcada no Chrome */ box-shadow:0 0 0 100px var(--brand-600) inset; color:#fff;font-weight:600} .select[multiple] option:checked::before{content:"✓ "} /* ---- Barra de filtro com controles de mesma altura ---- */ .control-h{height:42px} .filter-bar .input,.filter-bar .btn{height:42px;display:flex;align-items:center} .filter-bar .input{padding-top:0;padding-bottom:0} /* ---- Aviso de empresa desativada (banner global) ---- */ .warn-strip{display:flex;align-items:center;gap:12px;flex-wrap:wrap; background:var(--danger-50);border:1px solid #fecaca;border-left:4px solid var(--danger-500); color:#7f1d1d;border-radius:12px;padding:12px 16px;margin-bottom:18px;font-size:.9rem} .warn-strip .warn-ico{color:var(--danger-500);display:flex} .warn-strip strong{color:#991b1b} /* ---- Busca + paginação de listagens ---- */ .list-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px} .list-toolbar .list-search{flex:1;min-width:200px} .list-toolbar .list-meta{white-space:nowrap} .list-toolbar .list-size{display:flex;align-items:center;gap:6px} .list-toolbar .list-size select{width:auto;padding:7px 10px} .list-pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:16px} .list-page{min-width:36px;height:36px;border:1px solid var(--ink-200);background:var(--surface);color:var(--ink-700); border-radius:var(--r-md);cursor:pointer;font-weight:600;font-size:.85rem;padding:0 8px} .list-page:hover:not(:disabled){border-color:var(--brand-400);color:var(--brand-600)} .list-page.cur{background:var(--brand-600);border-color:var(--brand-600);color:#fff} .list-page:disabled{opacity:.4;cursor:not-allowed} .list-ellipsis{display:grid;place-items:center;min-width:24px;color:var(--ink-400)} /* ---- Multiseleção em popup (chips + busca) ---- */ .ms-native{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} .ms-box{position:relative;border:1px solid var(--ink-300);border-radius:var(--r-md);padding:8px;background:var(--surface)} .ms-box .ms-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:24px} .ms-add{margin-top:8px;border:1px dashed var(--brand-300);background:var(--brand-50);color:var(--brand-700); border-radius:999px;padding:5px 14px;font-size:.82rem;font-weight:600;cursor:pointer} .ms-add:hover{background:var(--brand-100)} .ms-pop{position:absolute;left:0;right:0;top:100%;margin-top:6px;z-index:40;background:var(--surface); border:1px solid var(--ink-200);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:8px} .ms-pop .ms-search{margin-bottom:6px} .ms-list{max-height:220px;overflow:auto} .ms-opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:.9rem} .ms-opt:hover{background:var(--brand-50)} .ms-opt.sel{color:var(--brand-700);font-weight:600} .ms-check{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--ink-300);display:grid;place-items:center;font-size:.7rem;color:#fff;flex-shrink:0} .ms-opt.sel .ms-check{background:var(--brand-600);border-color:var(--brand-600)} /* ---- Campo de upload estilizado (clique ou arraste) ---- */ .filefield{display:inline-flex;align-items:center;gap:12px;cursor:pointer;max-width:100%; border:1.5px dashed var(--ink-300);border-radius:var(--r-md);padding:11px 16px;background:var(--surface);transition:var(--transition)} .filefield:hover{border-color:var(--brand-400);background:var(--brand-50)} .filefield.drag{border-color:var(--brand-500);background:var(--brand-50);box-shadow:var(--ring)} .filefield.has{border-style:solid;border-color:var(--brand-300);background:var(--brand-50)} .filefield-native{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} .filefield-ico{color:var(--brand-600);display:flex;flex-shrink:0} .filefield-text strong{color:var(--ink-800);font-weight:600;font-size:.9rem;line-height:1.2} .filefield-name{color:var(--ink-400);font-size:.78rem;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;vertical-align:bottom} .filefield.has .filefield-name{color:var(--ok-500);font-weight:600} /* ---- Seletor de pessoas (typeahead + chips) ---- */ .people-picker{position:relative} .people-picker .pp-results{position:absolute;left:0;right:0;top:46px;z-index:30;background:var(--surface); border:1px solid var(--ink-200);border-radius:var(--r-md);box-shadow:var(--shadow-lg);max-height:240px;overflow:auto} .people-picker .pp-opt{padding:9px 12px;cursor:pointer;font-size:.9rem;border-bottom:1px solid var(--ink-100)} .people-picker .pp-opt:last-child{border-bottom:none} .people-picker .pp-opt:hover{background:var(--brand-50)} .people-picker .pp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .pp-chip{display:inline-flex;align-items:center;gap:6px;background:var(--brand-50);color:var(--brand-700); border:1px solid var(--brand-100);border-radius:999px;padding:5px 6px 5px 12px;font-size:.85rem;font-weight:600} .pp-chip .pp-x{border:none;background:rgba(99,102,241,.15);color:var(--brand-700);width:20px;height:20px; border-radius:50%;cursor:pointer;line-height:1;font-size:1rem} .pp-chip .pp-x:hover{background:var(--danger-50);color:var(--danger-500)} /* ---- Etiqueta "Inativa" destacada no card de empresa ---- */ .card.is-off{opacity:.92;border-color:#fecaca;background:repeating-linear-gradient(135deg,transparent,transparent 10px,rgba(239,68,68,.03) 10px,rgba(239,68,68,.03) 20px)} .badge-off{background:var(--danger-50);color:var(--danger-500);border:1px solid #fecaca;font-weight:700} /* Toggle */ .toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3); padding:12px 14px;border:1px solid var(--ink-200);border-radius:var(--r-md);cursor:pointer;transition:var(--transition)} .toggle:hover{border-color:var(--ink-300)} .toggle input{display:none} .switch{width:42px;height:24px;border-radius:var(--r-full);background:var(--ink-300); position:relative;transition:var(--transition);flex-shrink:0} .switch::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px; border-radius:var(--r-full);background:#fff;box-shadow:var(--shadow-sm);transition:var(--transition)} .toggle input:checked+.switch{background:var(--brand-600)} .toggle input:checked+.switch::after{transform:translateX(18px)} /* Segmented (chips selecionáveis) */ .seg{display:flex;flex-wrap:wrap;gap:8px} .seg label{padding:8px 14px;border:1px solid var(--ink-300);border-radius:var(--r-full); font-size:var(--fs-sm);font-weight:600;color:var(--ink-600,#475569);cursor:pointer;transition:var(--transition)} .seg input{display:none} .seg input:checked+span,.seg label:has(input:checked){border-color:var(--brand-600); background:var(--brand-50);color:var(--brand-700)} /* ---------- 13. Activity row (linha operacional) ---------- */ .timeline{display:flex;flex-direction:column;gap:var(--sp-3)} .time-rail{display:flex;gap:var(--sp-4)} .time-mark{width:54px;flex-shrink:0;text-align:right;padding-top:18px} .time-mark .hh{font-weight:700;color:var(--ink-900);font-size:var(--fs-base)} .act{flex:1;display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5); background:var(--surface);border:1px solid var(--ink-200);border-radius:var(--r-lg); box-shadow:var(--shadow-sm);transition:var(--transition);position:relative;overflow:hidden} .act::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ink-200)} .act:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)} .act.is-done::before{background:var(--ok-500)} .act.is-progress::before{background:var(--warn-500)} .act.is-late::before{background:var(--danger-500)} .act.is-notdone::before{background:var(--danger-500)} .act.is-done{opacity:.72} .act-ico{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;flex-shrink:0} .act-body{flex:1;min-width:0} .act-title{font-weight:600;color:var(--ink-900);font-size:var(--fs-md);letter-spacing:-.01em} .act.is-done .act-title{text-decoration:line-through;color:var(--ink-500)} .act-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px;font-size:var(--fs-xs);color:var(--ink-400)} .act-meta span{display:inline-flex;align-items:center;gap:4px} .act-actions{display:flex;align-items:center;gap:8px;flex-shrink:0} .act-check{width:42px;height:42px;border-radius:var(--r-full);border:2px solid var(--ink-300); display:grid;place-items:center;color:transparent;transition:var(--transition)} .act-check:hover{border-color:var(--ok-500);color:var(--ink-300)} .act.is-done .act-check{background:var(--ok-500);border-color:var(--ok-500);color:#fff} /* ---------- 14. Attention banner ---------- */ .attention{background:linear-gradient(135deg,var(--surface),var(--warn-50));border:1px solid var(--warn-500); border-radius:var(--r-lg);padding:var(--sp-5);display:flex;gap:var(--sp-4);align-items:flex-start} html[data-theme="dark"] .attention{border-color:var(--warn-500)} .attention .a-ico{width:44px;height:44px;border-radius:var(--r-md);background:var(--surface); display:grid;place-items:center;color:var(--warn-500);box-shadow:var(--shadow-sm);flex-shrink:0} /* ---------- 15. Greeting / hero ---------- */ .hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-6)} .hero-stats{display:flex;gap:var(--sp-5);flex-wrap:wrap} .hero-stat{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-700)} .ring{position:relative;width:128px;height:128px} .ring svg{transform:rotate(-90deg)} .ring-label{position:absolute;inset:0;display:grid;place-items:center;flex-direction:column;text-align:center} .ring-pct{font-size:var(--fs-2xl);font-weight:800;color:var(--ink-900);line-height:1} /* ---------- 16. Ranking / lists ---------- */ .rank{display:flex;align-items:center;gap:var(--sp-3);padding:12px 0;border-bottom:1px solid var(--ink-100)} .rank:last-child{border-bottom:none} .rank-pos{width:26px;height:26px;border-radius:var(--r-full);background:var(--ink-100); display:grid;place-items:center;font-size:var(--fs-xs);font-weight:700;color:var(--ink-500)} .rank-pos.top{background:var(--brand-600);color:#fff} .rank-name{flex:1;font-weight:600;color:var(--ink-800);font-size:var(--fs-sm)} /* ---------- 17. Heatmap ---------- */ .heat{display:grid;gap:4px;overflow-x:auto} .heat-row{display:grid;grid-template-columns:96px repeat(7,1fr);gap:4px;align-items:center} .heat-cell{aspect-ratio:1;border-radius:6px;min-width:24px;display:grid;place-items:center; font-size:10px;font-weight:600;color:#fff} .heat-name{font-size:var(--fs-xs);font-weight:600;color:var(--ink-600,#475569);white-space:nowrap} .heat-head{font-size:10px;color:var(--ink-400);text-align:center;font-weight:600} /* ---------- 18. Insights ---------- */ .insight{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);margin-bottom:8px} .insight.positive{background:var(--ok-50)} .insight.positive .i-ico{color:var(--ok-500)} .insight.alert{background:var(--danger-50)} .insight.alert .i-ico{color:var(--danger-500)} .insight.warn{background:var(--warn-50)} .insight.warn .i-ico{color:var(--warn-500)} .insight.neutral{background:var(--ink-100)} .insight.neutral .i-ico{color:var(--ink-500)} .insight p{font-size:var(--fs-sm);color:var(--ink-700);font-weight:500} /* ---------- 19. Table ---------- */ .table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--ink-200)} table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm);background:var(--surface)} .tbl th{text-align:left;padding:12px 16px;font-size:var(--fs-xs);text-transform:uppercase; letter-spacing:.05em;color:var(--ink-400);font-weight:700;border-bottom:1px solid var(--ink-200);white-space:nowrap} .tbl td{padding:14px 16px;border-bottom:1px solid var(--ink-100);color:var(--ink-700)} .tbl tr:last-child td{border-bottom:none} .tbl tr:hover td{background:var(--ink-50)} /* No celular, tabelas largas (ex.: Central de Operações) rolam por dentro do próprio bloco em vez de empurrar a página inteira (scroll lateral). */ @media(max-width:680px){ .tbl{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch} /* Trava qualquer sobra de largura na área de conteúdo (evita scroll lateral no celular). 'clip' não cria contêiner de rolagem — não afeta a rolagem vertical nem elementos sticky/fixed. */ .main{overflow-x:clip} } /* ---------- 20. Modal & sheet ---------- */ .modal-back{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:60;display:flex; align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:var(--transition)} .modal-back.show{opacity:1;pointer-events:auto} .sheet{background:var(--surface);width:100%;max-width:560px;border-radius:var(--r-xl) var(--r-xl) 0 0; max-height:92vh;overflow-y:auto;transform:translateY(20px);transition:transform var(--transition)} .modal-back.show .sheet{transform:translateY(0)} .sheet-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-5); border-bottom:1px solid var(--ink-200);position:sticky;top:0;background:var(--surface);z-index:2} .sheet-body{padding:var(--sp-5)} .sheet-foot{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--ink-200);display:flex;gap:10px; position:sticky;bottom:0;background:var(--surface)} @media(min-width:680px){ .modal-back{align-items:center} .sheet{border-radius:var(--r-xl)} } /* ---------- 21. Toast ---------- */ .toasts{position:fixed;top:var(--sp-5);right:var(--sp-5);z-index:80;display:flex;flex-direction:column;gap:10px} .toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-md); background:var(--ink-900);color:#fff;box-shadow:var(--shadow-lg);font-size:var(--fs-sm);font-weight:500; animation:toastIn .3s ease;max-width:360px} .toast.ok{background:#065f46} .toast.err{background:#991b1b} @keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}} /* ---------- 22. Auth ---------- */ /* Duas faixas: o card centralizado no espaço livre e a assinatura no rodapé. Com um filho só (ex.: tela de MFA) a segunda faixa fica sem altura e o card continua centralizado como antes. */ .auth-wrap{min-height:100vh;display:grid;grid-template-rows:1fr auto;justify-items:center; align-items:center;gap:var(--sp-5);padding:var(--sp-5); background:radial-gradient(1200px 600px at 70% -10%,var(--brand-100),transparent),var(--bg)} .auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--ink-200); border-radius:var(--r-xl);box-shadow:var(--shadow-lg);padding:var(--sp-8)} .auth-brand{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:var(--sp-6)} .auth-legal{margin:0;text-align:center;color:var(--ink-400);font-size:.72rem;line-height:1.7; max-width:520px;text-wrap:balance} /* ---------- 23. Signature pad ---------- */ .sigpad{border:2px dashed var(--ink-300);border-radius:var(--r-md);background:var(--ink-50);width:100%;touch-action:none} /* ---------- 24. Utils ---------- */ .flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between} .gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px} .mt-1{margin-top:4px} .mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px} .mt-5{margin-top:20px} .mt-6{margin-top:24px} .mt-8{margin-top:32px} .mt-10{margin-top:40px} .mb-1{margin-bottom:4px} .mb-2{margin-bottom:8px} .mb-3{margin-bottom:12px} .mb-4{margin-bottom:16px} .mb-5{margin-bottom:20px} .mb-6{margin-bottom:24px} .mb-8{margin-bottom:32px} .mb-10{margin-bottom:40px} .flex-wrap{flex-wrap:wrap} .flex-1{flex:1} .w-full{width:100%} .hidden{display:none!important} .fade-in{animation:fadeIn .35s ease} @keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} .empty{text-align:center;padding:var(--sp-12) var(--sp-5);color:var(--ink-400)} .empty svg{margin:0 auto var(--sp-3);color:var(--ink-300)} /* ---------- 25. Live (tempo real) ---------- */ @keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}100%{opacity:1;transform:scale(1)}} .kpi-val span{transition:color .3s} .flash-up{animation:flashUp .8s ease} @keyframes flashUp{0%{color:var(--ok-500)}100%{color:inherit}} /* ---------- 26. Seletor visual de ícones ---------- */ .ipick{position:relative;display:inline-block} .ipick-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 10px; border:1px solid var(--ink-300);border-radius:var(--r-md);background:var(--surface);cursor:pointer;min-width:62px;color:var(--ink-700)} .ipick-btn:hover{border-color:var(--brand-500)} .ipick-pop{position:absolute;z-index:50;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--ink-200); border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:8px;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:236px} .ipick-pop.hidden{display:none} .ipick-opt{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;color:var(--ink-500); cursor:pointer;border:1px solid transparent;transition:var(--transition)} .ipick-opt:hover{background:var(--ink-100);color:var(--ink-800)} .ipick-opt.sel{background:var(--brand-50);color:var(--brand-600);border-color:var(--brand-200)} /* ---------- 27. Select com busca (searchable) ---------- */ .ssel{position:relative;display:inline-block;max-width:100%} .ssel-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:210px;max-width:100%;cursor:pointer;text-align:left} /* O menu nasce ancorado à ESQUERDA e ocupa toda a largura do campo (ergonomia + mobile-first). min-width garante usabilidade quando o botão é estreito. */ .ssel-pop{position:absolute;z-index:50;top:calc(100% + 6px);left:0;width:100%;min-width:min(240px,90vw);background:var(--surface); border:1px solid var(--ink-200);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:8px} .ssel-pop.hidden{display:none} .ssel-search{margin-bottom:8px} .ssel-list{max-height:260px;overflow-y:auto} /* ---------- 27b. Scrollbar estilizada em áreas roláveis internas ---------- Regra do design system: nenhuma área rolável interna com scrollbar nativa crua. Usa tokens (coerente no modo escuro via --ink-*). */ .ssel-list,.combo-menu,.pp-results,.msel-list,.table-wrap,.modal-body,.oc-panel-body, .mdx-drawer-body,.ipick-grid,.drawer-body{scrollbar-width:thin;scrollbar-color:var(--ink-200) transparent} .ssel-list::-webkit-scrollbar,.combo-menu::-webkit-scrollbar,.pp-results::-webkit-scrollbar, .msel-list::-webkit-scrollbar,.table-wrap::-webkit-scrollbar,.modal-body::-webkit-scrollbar, .oc-panel-body::-webkit-scrollbar,.mdx-drawer-body::-webkit-scrollbar, .ipick-grid::-webkit-scrollbar,.drawer-body::-webkit-scrollbar{width:8px;height:8px} .ssel-list::-webkit-scrollbar-track,.combo-menu::-webkit-scrollbar-track,.pp-results::-webkit-scrollbar-track, .msel-list::-webkit-scrollbar-track,.table-wrap::-webkit-scrollbar-track,.modal-body::-webkit-scrollbar-track, .oc-panel-body::-webkit-scrollbar-track,.mdx-drawer-body::-webkit-scrollbar-track, .ipick-grid::-webkit-scrollbar-track,.drawer-body::-webkit-scrollbar-track{background:transparent} .ssel-list::-webkit-scrollbar-thumb,.combo-menu::-webkit-scrollbar-thumb,.pp-results::-webkit-scrollbar-thumb, .msel-list::-webkit-scrollbar-thumb,.table-wrap::-webkit-scrollbar-thumb,.modal-body::-webkit-scrollbar-thumb, .oc-panel-body::-webkit-scrollbar-thumb,.mdx-drawer-body::-webkit-scrollbar-thumb, .ipick-grid::-webkit-scrollbar-thumb,.drawer-body::-webkit-scrollbar-thumb{ background:var(--ink-200);border-radius:8px;border:2px solid transparent;background-clip:padding-box} .ssel-list::-webkit-scrollbar-thumb:hover,.combo-menu::-webkit-scrollbar-thumb:hover, .pp-results::-webkit-scrollbar-thumb:hover,.msel-list::-webkit-scrollbar-thumb:hover, .table-wrap::-webkit-scrollbar-thumb:hover,.modal-body::-webkit-scrollbar-thumb:hover, .oc-panel-body::-webkit-scrollbar-thumb:hover,.mdx-drawer-body::-webkit-scrollbar-thumb:hover, .ipick-grid::-webkit-scrollbar-thumb:hover,.drawer-body::-webkit-scrollbar-thumb:hover{background:var(--ink-300);background-clip:padding-box} .ssel-opt{padding:9px 10px;border-radius:8px;cursor:pointer;font-size:.9rem;color:var(--ink-700); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ssel-opt:hover{background:var(--ink-100)} .ssel-opt.sel{background:var(--brand-50);color:var(--brand-600);font-weight:600} /* ---------- 27c. Navegação suave entre páginas ---------- View Transitions (cross-document): o navegador anima a troca de página e o sidebar/topbar — visualmente idênticos em todas as telas — ficam ESTÁTICOS (têm snapshot próprio, sem animação). Navegadores sem suporte (ex.: Firefox) simplesmente navegam normal. Complementa o nav.js (troca parcial real). */ @view-transition{navigation:auto} .sidebar{view-transition-name:mc-sidebar} .topbar{view-transition-name:mc-topbar} ::view-transition-old(root),::view-transition-new(root){animation-duration:.15s} ::view-transition-old(mc-sidebar),::view-transition-new(mc-sidebar), ::view-transition-old(mc-topbar),::view-transition-new(mc-topbar){animation:none} @media (prefers-reduced-motion: reduce){ ::view-transition-old(root),::view-transition-new(root){animation:none} } /* Barra fina de progresso do nav.js */ .nav-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--brand-500);z-index:2000; transition:width .25s ease;border-radius:0 3px 3px 0;pointer-events:none} .nav-progress.run{width:70%} .nav-progress.done{transition:width .12s ease,opacity .3s ease .12s;width:100%;opacity:0} /* ---------- 27d. Botão flutuante de salvar (guarda de alterações) ---------- */ .save-fab{position:fixed;right:18px;bottom:18px;z-index:900;display:inline-flex;align-items:center;gap:8px; padding:13px 20px;border:0;border-radius:14px;background:var(--brand-600);color:#fff;font:inherit;font-weight:700; font-size:.92rem;cursor:pointer;box-shadow:0 12px 30px rgba(79,70,229,.4); /* CTA único: em repouso o form já tem o botão "Salvar alterações" no fim. O flutuante só aparece quando existe alteração pendente (evita 2 botões). */ opacity:0;pointer-events:none;transform:translateY(8px); transition:opacity .2s,transform .2s;-webkit-tap-highlight-color:transparent} .save-fab svg{flex:none} .save-fab.dirty{opacity:1;pointer-events:auto;transform:translateY(0)} .save-fab.dirty:hover{filter:brightness(1.06)} .save-fab.dirty::after{content:"";position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%; background:var(--warn-500,#f59e0b);border:2px solid var(--surface)} @media(max-width:680px){.save-fab{right:14px;bottom:14px;padding:12px 17px}} /* Pop-up de sair sem salvar: 3 opções na mesma linha, mesmo tamanho e fonte, com destaque decrescente (Continuar editando > Salvar e sair > Sair sem salvar). */ .guard-actions{display:flex;gap:8px;margin-top:6px} .guard-btn{flex:1;min-width:0;padding:11px 8px;border:1px solid transparent;border-radius:11px; font-family:inherit;font-size:.82rem;font-weight:700;line-height:1.2;text-align:center;cursor:pointer; transition:filter .15s,background .15s} .guard-btn:hover{filter:brightness(.96)} .guard-keep{background:var(--brand-600);color:#fff} /* mais destaque */ .guard-save{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-200)} /* médio */ .guard-leave{background:transparent;color:var(--ink-500);border-color:var(--ink-200)} /* menos destaque */ @media(max-width:420px){.guard-btn{font-size:.78rem;padding:10px 6px}} /* ---------- 27d. Responsividade fina (telas estreitas) ---------- Garante que o sistema "encaixe" em qualquer aparelho: timeline empilha o horário sobre o card, grids de 2 colunas viram 1, e espaçamentos encolhem. */ @media(max-width:860px){ /* Grids declarados inline nas views (ex.: formulário + lista) empilham. */ .grid:not(.grid-kpi):not(.grid-2):not(.grid-3){grid-template-columns:1fr!important} .desk-grid{grid-template-columns:1fr!important} } @media(max-width:520px){ .content{padding:var(--sp-4) var(--sp-3)} .card-pad{padding:var(--sp-4)} /* Timeline da Minha Central: horário vira rótulo acima do card. */ .time-rail{flex-direction:column;gap:6px} .time-mark{width:auto;text-align:left;padding-top:0} .time-mark .hh{font-size:var(--fs-xs);color:var(--ink-500)} .act{padding:12px;gap:10px} .act-ico{width:36px;height:36px} .act-title{font-size:var(--fs-base)} .act-actions .act-check{width:38px;height:38px} /* Hero: saudação e anel de progresso empilhados e centrados. */ .h-hero{font-size:1.45rem} .ring{margin:0 auto} /* Cadastro rápido compacto (input + botão cabem na linha). */ .quick-add{padding:8px 10px;gap:8px} .quick-add-input{min-width:0} .quick-add .btn{padding:8px 10px;font-size:.78rem;white-space:nowrap} /* Toasts ocupam a largura da tela, sem vazar. */ .toasts{left:var(--sp-3);right:var(--sp-3)} .toast{max-width:none;width:100%} /* Date picker nunca ultrapassa a borda. */ .dp-pop{max-width:calc(100vw - 16px)} /* Botões em linha quebram em vez de estourar. */ .hero .btn,.card .flex>.btn{white-space:normal} /* Formulários de upload (Importação em Massa etc.): campo e botão empilham. */ .card form.flex{flex-wrap:wrap} .filefield{width:100%} .card form.flex>.btn{width:100%;justify-content:center} } /* ---------- Filtros retráteis (recolhidos por padrão) ---------- */ .filter-collapsible .filter-toggle{cursor:pointer;user-select:none} .filter-caret{display:inline-flex;align-items:center;transition:transform .18s ease;color:var(--ink-400)} .filter-collapsible:not(.collapsed) .filter-caret{transform:rotate(180deg)} .filter-collapsible.collapsed>*:not(.filter-toggle){display:none!important} .filter-collapsible.collapsed{padding-top:12px;padding-bottom:12px} .filter-toggle:hover{color:var(--brand-600)} /* ---------- 27e. Impressão / exportar em PDF ---------- Esconde a "moldura" do app (sidebar, topo, botões flutuantes) e imprime só o conteúdo. O usuário escolhe "Salvar como PDF" no diálogo de impressão. */ @media print{ .sidebar,.topbar,.scrim,.save-fab,.toasts,.support-strip,.menu-toggle{display:none!important} .app,.main{display:block!important} .main{margin:0!important} .content{padding:0!important} body{background:#fff!important} a[href]::after{content:none!important} .card{box-shadow:none!important;border-color:#e2e8f0!important;break-inside:avoid} } /* ---------- Tooltip flutuante reutilizável (qualquer elemento com data-tip) ---------- */ [data-tip]{position:relative} [data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px); transform:translateX(-50%);background:#1e293b;color:#f1f5f9;font-size:.72rem;font-weight:600;line-height:1.3; padding:6px 10px;border-radius:8px;white-space:nowrap;max-width:240px;white-space:normal;width:max-content; box-shadow:0 6px 20px rgba(2,6,23,.35);z-index:60;pointer-events:none} [data-tip]:hover::before,[data-tip]:focus-visible::before{content:'';position:absolute;left:50%;bottom:calc(100% + 3px); transform:translateX(-50%);border:5px solid transparent;border-top-color:#1e293b;z-index:60;pointer-events:none} .pill-ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%; background:var(--brand-50);color:var(--brand-600);cursor:help;flex:none} .ssel-empty{padding:10px;color:var(--ink-400);font-size:.85rem;text-align:center}