/* Layout Âmbar — tokens e componentes do protótipo (Modelo C). Arquivo NOVO: não substitui nem edita o tailwind.css que serve o sistema atual. Só as telas que estendem ambar/base.html carregam este CSS. */ :root{ --bg:#F6F5F1; --surface:#FFFFFF; --surface-2:#EFEDE7; --surface-3:#FBFAF7; --line:#E4E1D9; --line-2:#CFCBC0; --ink:#1A1A17; --ink-2:#4E4E48; --ink-3:#83837A; --sig:#E3A800; --sig-2:#C79300; --sig-soft:#FBEFCC; --sig-on:#221B00; --ok:#1F7048; --ok-soft:#E0EFE7; --warn:#93600A; --warn-soft:#F8EDD5; --crit:#AC2A1D; --crit-soft:#F9E3E0; --info:#2C5578; --info-soft:#E3EBF2; --r:14px; --r-sm:9px; --shadow:0 1px 2px rgba(26,26,23,.04), 0 14px 34px -20px rgba(26,26,23,.28); --shadow-h:0 2px 6px rgba(26,26,23,.07), 0 22px 46px -22px rgba(26,26,23,.38); color-scheme:light; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#121210; --surface:#1A1A17; --surface-2:#23231F; --surface-3:#161614; --line:#2B2B26; --line-2:#3C3C35; --ink:#F0EFEA; --ink-2:#AEADA4; --ink-3:#82817A; --sig:#F2C238; --sig-2:#FFD65F; --sig-soft:#332809; --sig-on:#211900; --ok:#56BE83; --ok-soft:#12301F; --warn:#DDA943; --warn-soft:#32250C; --crit:#EE8378; --crit-soft:#3A1B17; --info:#7FAAD4; --info-soft:#15222E; --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -20px rgba(0,0,0,.85); --shadow-h:0 2px 6px rgba(0,0,0,.6), 0 22px 46px -22px rgba(0,0,0,.95); color-scheme:dark; } } :root[data-theme="dark"]{ --bg:#121210; --surface:#1A1A17; --surface-2:#23231F; --surface-3:#161614; --line:#2B2B26; --line-2:#3C3C35; --ink:#F0EFEA; --ink-2:#AEADA4; --ink-3:#82817A; --sig:#F2C238; --sig-2:#FFD65F; --sig-soft:#332809; --sig-on:#211900; --ok:#56BE83; --ok-soft:#12301F; --warn:#DDA943; --warn-soft:#32250C; --crit:#EE8378; --crit-soft:#3A1B17; --info:#7FAAD4; --info-soft:#15222E; --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -20px rgba(0,0,0,.85); --shadow-h:0 2px 6px rgba(0,0,0,.6), 0 22px 46px -22px rgba(0,0,0,.95); color-scheme:dark; } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45; font-family:Onest,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input,select{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--sig);outline-offset:2px;border-radius:6px} .mono{font-family:"Azeret Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums} .tnum{font-variant-numeric:tabular-nums} h1,h2,h3{margin:0;letter-spacing:-.02em} /* ---------------- shell ---------------- */ .shell{display:grid;grid-template-columns:62px 1fr;min-height:100vh} .rail{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column; align-items:center;gap:5px;padding:14px 0;position:sticky;top:0;height:100vh;z-index:20; overflow-y:auto;overflow-x:hidden;scrollbar-width:thin} .rail::-webkit-scrollbar{width:6px} .rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px} .rl-topo{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:8px;width:100%} .rl-mark{width:32px;height:32px;border-radius:9px;background:var(--ink);color:var(--bg); display:grid;place-items:center;font-weight:700;font-size:13px;letter-spacing:-.03em;flex:0 0 32px} .rl-alt{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--ink-3)} .rl-alt:hover{background:var(--surface-2);color:var(--ink)} .rl-alt svg{width:15px;height:15px;transition:transform .16s} .rl-secao{display:none} .rl{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--ink-3);position:relative} .rl .rot{display:none} .rl:hover{background:var(--surface-2);color:var(--ink)} .rl.on{background:var(--ink);color:var(--bg)} .rl svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .rl .bd{position:absolute;top:6px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--crit); border:2px solid var(--surface)} .rl.on .bd{border-color:var(--ink)} .rail .sp{margin-top:auto} /* fixed, como o painel do grupo: a barra rola, e com overflow um balao absolute ficava cortado na borda dela -- era por isso que modulo sem submenu (Atendimento, Documentos Fiscais) nao mostrava o nome. O topo vem do JS, no hover. */ .tip{position:fixed;left:56px;background:var(--ink);color:var(--bg);font-size:11.5px;font-weight:600; padding:4px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .14s;z-index:30} .rl:hover .tip{opacity:1} /* ---------- submenu da barra ---------- Grupo do menu: o ícone continua abrindo a tela principal, e a lista das telas do grupo abre ao lado. Com submenu, o balãozinho do nome não aparece -- quem nomeia o grupo é o título do painel. */ /* largura inteira da barra de propósito: o ícone ocupava só o meio dela e sobrava um vão de 7px até o painel, que abre em left:56px. Ao atravessar esse vão o ponteiro não estava sobre nenhum dos dois e o painel fechava antes de o mouse chegar nele. */ .grp{position:relative;display:flex;justify-content:center;width:100%} .grp:hover .tip, .grp.on .tip{opacity:0} /* fixed, não absolute: a barra rola quando não cabe, e painel absolute seria cortado pelo overflow dela. O topo vem do JS, no hover. */ .sub{position:fixed;left:56px;top:0;min-width:212px;max-height:88vh;overflow-y:auto; background:var(--surface);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow-h);padding:7px;display:none;z-index:40} .grp:hover .sub, .grp:focus-within .sub, .grp.aberto .sub{display:block} /* Sem mouse nao existe "passar por cima": o toque deixa um :hover grudado que abria e fechava o painel sozinho. Ali quem manda e' o toque, que põe a classe .aberto (ver base.html). */ @media (hover: none){ .grp:hover .sub, .grp:focus-within .sub{display:none} .grp.aberto .sub{display:block} } .sub .ttl{display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase; color:var(--ink-3);font-weight:600;padding:4px 9px 7px} .sub a{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px; font-size:13px;color:var(--ink-2);white-space:nowrap} .sub a:hover{background:var(--surface-2);color:var(--ink)} .sub a.on{background:var(--surface-2);color:var(--ink);font-weight:600} .sub a .n{margin-left:auto;background:var(--crit);color:#fff;font-size:10.5px;font-weight:700; border-radius:999px;padding:1px 6px;min-width:18px;text-align:center} .sub .div{height:1px;background:var(--line);margin:5px 4px} /* ---------- barra expandida ---------- Mesma marcação da recolhida: a seta do topo troca a largura e liga os rótulos que já vêm no HTML. O balãozinho some, porque o nome passa a estar escrito ao lado do ícone. */ .shell.aberto{grid-template-columns:216px 1fr} .shell.aberto .rail{align-items:stretch;padding:14px 10px} .shell.aberto .rl-topo{flex-direction:row;align-items:center;padding:0 4px} .shell.aberto .rl-alt{margin-left:auto} .shell.aberto .rl-alt svg{transform:rotate(180deg)} .shell.aberto .rl{width:100%;height:36px;display:flex;align-items:center;gap:10px;padding:0 10px} .shell.aberto .rl .rot{display:block;font-size:13px;font-weight:500;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .shell.aberto .rl.on .rot{font-weight:600} .shell.aberto .rl svg{flex:0 0 19px} .shell.aberto .rl .bd{position:static;margin-left:auto;border:0;width:8px;height:8px} .shell.aberto .tip{display:none} .shell.aberto .grp{display:block} .shell.aberto .sub{left:210px} .shell.aberto .rl-secao{display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase; color:var(--ink-3);font-weight:600;padding:10px 10px 4px} .main{min-width:0;display:flex;flex-direction:column} .top{display:flex;align-items:center;gap:12px;padding:14px 24px;position:sticky;top:0;z-index:15; background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px)} .bc{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3);font-weight:500;min-width:0} .bc b{color:var(--ink);font-weight:600} /* quem está logado, no canto da barra de cima */ .usr{display:flex;align-items:center;gap:9px;min-width:0;padding-left:12px; border-left:1px solid var(--line)} .usr .sq{flex:0 0 29px;font-weight:600} .usr .bd2{min-width:0} .usr b{display:block;font-size:12.5px;font-weight:600;line-height:1.25; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px} .usr small{display:block;font-size:11px;color:var(--ink-3);line-height:1.25} @media (max-width:680px){ .usr .bd2{display:none} } .k-open{display:flex;align-items:center;gap:9px;margin-left:auto;background:var(--surface); border:1px solid var(--line);border-radius:10px;padding:8px 11px;color:var(--ink-3);font-size:13px;min-width:210px} .k-open:hover{border-color:var(--line-2);color:var(--ink-2)} .k-open kbd{margin-left:auto;font-family:"Azeret Mono",monospace;font-size:10px;border:1px solid var(--line-2); border-radius:4px;padding:1px 5px} .ic{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center; color:var(--ink-2);background:var(--surface);flex:0 0 auto} .ic:hover{border-color:var(--line-2);color:var(--ink)} .uav{width:34px;height:34px;border-radius:50%;background:var(--sig-soft);color:var(--warn);display:grid; place-items:center;font-weight:700;font-size:12px;flex:0 0 auto;position:relative} .umenu{position:absolute;top:44px;right:0;background:var(--surface);border:1px solid var(--line); border-radius:12px;box-shadow:var(--shadow-h);padding:6px;min-width:186px;display:none;z-index:40;text-align:left} .umenu.on{display:block} .umenu b{display:block;padding:8px 10px 4px;font-size:12.5px} .umenu small{display:block;padding:0 10px 8px;font-size:11.5px;color:var(--ink-3);border-bottom:1px solid var(--line); margin-bottom:5px} .umenu button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:8px;font-size:13px;color:var(--ink-2)} .umenu button:hover{background:var(--surface-2);color:var(--ink)} .view{padding:4px 24px 48px;display:flex;flex-direction:column;gap:16px;flex:1;min-width:0} .phead{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap} .phead h1{font-size:25px;letter-spacing:-.03em;font-weight:600} .phead p{margin:4px 0 0;color:var(--ink-3);font-size:13px} .phead .r{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap} /* ---------------- atoms ---------------- */ .btn{border:1px solid var(--line);border-radius:9px;padding:8px 13px;font-size:13px;font-weight:600; color:var(--ink-2);background:var(--surface);display:inline-flex;align-items:center;gap:7px} .btn:hover{border-color:var(--line-2);color:var(--ink)} .btn.s{background:var(--sig);border-color:var(--sig);color:var(--sig-on)} .btn.s:hover{background:var(--sig-2);border-color:var(--sig-2);color:var(--sig-on)} .btn.d{background:var(--ink);border-color:var(--ink);color:var(--bg)} .btn.sm{padding:5px 10px;font-size:12px;border-radius:7px} .btn:disabled{opacity:.45;cursor:not-allowed} .c{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 17px; display:flex;flex-direction:column;gap:13px;min-width:0} .c.pad0{padding:0;overflow:hidden} .c-hd{display:flex;align-items:baseline;gap:10px} .c-hd h2{font-size:13px;font-weight:600} .c-hd .t{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-weight:500} .sec-hd{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px; background:var(--surface-3)} .sec-hd h2{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:600} /* o !important é contra .stat span, que faz do rótulo do cartão um bloco em caixa alta -- um selo dentro do cartão herdava isso e esticava */ .bg{display:inline-flex !important;align-items:center;gap:5px;border-radius:20px;padding:3px 9px; font-size:11.5px;font-weight:600;white-space:nowrap;letter-spacing:0;text-transform:none} a.bg{cursor:pointer;transition:filter .12s} a.bg:hover{filter:brightness(.94)} .bg.ok{background:var(--ok-soft);color:var(--ok)} .bg.warn{background:var(--warn-soft);color:var(--warn)} .bg.crit{background:var(--crit-soft);color:var(--crit)} .bg.info{background:var(--info-soft);color:var(--info)} .bg.mut{background:var(--surface-2);color:var(--ink-3)} .bg i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block} .segs{display:inline-flex;background:var(--surface-2);border-radius:9px;padding:3px;gap:2px} .sg{padding:6px 12px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--ink-3)} .sg.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)} .fld{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line); border-radius:9px;padding:7px 11px;min-width:0} .fld:focus-within{border-color:var(--sig)} .fld input,.fld select{border:0;background:none;outline:0;width:100%;font-size:13px;min-width:0} .tbs{display:flex;gap:16px;border-bottom:1px solid var(--line);overflow-x:auto} .tb{padding:10px 0;font-size:13.5px;font-weight:500;color:var(--ink-3);border-bottom:2px solid transparent; margin-bottom:-1px;white-space:nowrap} .tb:hover{color:var(--ink)} .tb.on{color:var(--ink);border-bottom-color:var(--sig);font-weight:600} /* tables */ .tw{overflow-x:auto} table{border-collapse:collapse;width:100%;min-width:760px} th{text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:600; padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface-3);white-space:nowrap} td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13px} tbody tr:last-child td{border-bottom:0} tbody tr.clk{cursor:pointer} tbody tr.clk:hover td{background:var(--surface-3)} tbody tr.selr td{background:var(--sig-soft)} td.r,th.r{text-align:right} .chk{width:15px;height:15px;border:1.6px solid var(--line-2);border-radius:4px;display:grid;place-items:center; color:transparent;flex:0 0 15px} .chk.on{background:var(--ink);border-color:var(--ink);color:var(--bg)} .ent{display:flex;align-items:center;gap:10px;min-width:0} .sq{width:29px;height:29px;border-radius:8px;background:var(--surface-2);color:var(--ink-2);display:grid; place-items:center;font-size:10.5px;font-weight:700;flex:0 0 29px} .ent b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ent small{display:block;color:var(--ink-3);font-size:11.5px} .bulk{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--ink);color:var(--bg); font-size:13px;font-weight:500;flex-wrap:wrap} .bulk .btn{background:transparent;border-color:color-mix(in srgb,var(--bg) 30%,transparent);color:var(--bg)} .bulk .btn:hover{background:color-mix(in srgb,var(--bg) 12%,transparent);border-color:var(--bg);color:var(--bg)} /* lists / misc */ .lst{display:flex;flex-direction:column;gap:2px} .li{display:flex;gap:10px;align-items:center;padding:9px 8px;border-radius:9px;text-align:left;width:100%} .li:hover{background:var(--surface-2)} .li .bd2{min-width:0;flex:1} .li b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .li small{display:block;color:var(--ink-3);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .li .rt{font-size:11.5px;color:var(--ink-3);white-space:nowrap;font-family:"Azeret Mono",monospace} .meter{display:flex;flex-direction:column;gap:7px} .meter .r{display:flex;align-items:center;gap:10px;font-size:12.5px} .meter .nm{width:96px;flex:0 0 96px;color:var(--ink-2);font-weight:500} .meter .tr{flex:1;height:7px;border-radius:5px;background:var(--surface-2);overflow:hidden} .meter .tr i{display:block;height:100%;border-radius:5px;background:var(--ink)} .meter .tr i.s{background:var(--sig)} .meter .tr i.c{background:var(--crit)} .meter .vv{width:54px;text-align:right;font-size:11.5px;color:var(--ink-3);font-family:"Azeret Mono",monospace} .kv{display:grid;grid-template-columns:180px 1fr} .kv>div{padding:10px 16px;border-bottom:1px solid var(--line);font-size:13px} .kv>div:nth-child(odd){color:var(--ink-3);background:var(--surface-3)} .kv>div:nth-last-child(-n+2){border-bottom:0} .tl{list-style:none;margin:0;padding:14px 16px 14px 32px;position:relative} .tl:before{content:"";position:absolute;left:21px;top:20px;bottom:20px;width:1px;background:var(--line)} .tl li{position:relative;padding-bottom:13px} .tl li:last-child{padding-bottom:0} .tl li:before{content:"";position:absolute;left:-16px;top:4px;width:9px;height:9px;border-radius:50%; background:var(--surface);border:2px solid var(--line-2)} .tl li.ok:before{border-color:var(--ok)} .tl li.crit:before{border-color:var(--crit)} .tl li.warn:before{border-color:var(--warn)} .tl b{display:block;font-size:13px;font-weight:600} .tl small{color:var(--ink-3);font-size:11.5px;font-family:"Azeret Mono",monospace} .note{display:flex;gap:10px;padding:13px 15px;background:var(--sig-soft);border-radius:var(--r-sm); font-size:13px;color:var(--ink-2);line-height:1.55} .note svg{flex:0 0 17px;margin-top:1px;stroke:var(--warn);fill:none;stroke-width:1.7;stroke-linecap:round} .empty{padding:46px 20px;text-align:center;color:var(--ink-3);font-size:13px} /* grids */ .g2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px} .s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5} .s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8} .c.hero{background:var(--ink);color:var(--bg);border-color:var(--ink)} .c.hero .c-hd h2,.c.hero .c-hd .t{color:color-mix(in srgb,var(--bg) 70%,transparent)} .hv{font-size:44px;font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums} .hsub{font-size:12.5px;color:color-mix(in srgb,var(--bg) 66%,transparent);margin:6px 0 0} .hsplit{display:flex;gap:18px;flex-wrap:wrap;padding-top:11px;margin-top:auto; border-top:1px solid color-mix(in srgb,var(--bg) 16%,transparent)} .hsplit span{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600; color:color-mix(in srgb,var(--bg) 55%,transparent)} .hsplit b{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums} .hsplit b.s{color:var(--sig)} .stat span{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600} .stat b{font-size:23px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:block;margin-top:4px} .stat small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px} /* chart */ .chart{display:flex;align-items:flex-end;gap:10px;height:128px;padding-top:20px} .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;align-items:center;height:100%} .col .pair{display:flex;align-items:flex-end;gap:4px;width:100%;height:100%} .col .stack{border-radius:6px 6px 3px 3px;background:var(--sig);position:relative;flex:1} .col .stack.alt{background:var(--ink-3);opacity:.5} .col .stack em{position:absolute;top:-19px;left:50%;transform:translateX(-50%);font-style:normal;font-size:11px; font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums} .col .lb{font-size:11px;color:var(--ink-3);font-weight:600;text-align:center} .legend{display:flex;gap:14px;font-size:11.5px;color:var(--ink-3);flex-wrap:wrap} .legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px} /* calendar */ /* minmax(0,1fr) e nao 1fr: com 1fr a coluna nao encolhe abaixo do conteudo do dia, e num celular as sete somavam mais que o cartao -- o calendario vazava para fora da tela */ .cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px} .cal .dw{font-size:10px;text-align:center;color:var(--ink-3);font-weight:600;padding-bottom:3px} .day{aspect-ratio:1;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3px;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums} .day.has{background:var(--surface-2);font-weight:600;color:var(--ink)} .day.has:hover{background:var(--sig-soft)} .day.sel{background:var(--sig);color:var(--sig-on);font-weight:700} .day.today{box-shadow:inset 0 0 0 1.5px var(--ink-3)} .day .m{width:4px;height:4px;border-radius:50%;background:var(--crit)} .day.sel .m{background:var(--sig-on)} .day.void{visibility:hidden} .ob{display:flex;gap:9px;align-items:flex-start;font-size:12.5px} .ob .d{width:3px;align-self:stretch;border-radius:3px;background:var(--warn);flex:0 0 3px} .ob .d.crit{background:var(--crit)} .ob .d.ok{background:var(--ok)} .ob b{display:block;font-weight:600} .ob small{color:var(--ink-3);font-size:11.5px} .ob .q{margin-left:auto;font-size:11px;color:var(--ink-3);font-family:"Azeret Mono",monospace;white-space:nowrap} /* toggles */ .tg{width:38px;height:22px;border-radius:20px;background:var(--line-2);position:relative;flex:0 0 38px; transition:background .16s} .tg:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff; transition:transform .16s;box-shadow:0 1px 2px rgba(0,0,0,.25)} .tg.on{background:var(--sig)} .tg.on:after{transform:translateX(16px)} .rowset{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line)} .rowset:last-child{border-bottom:0} .rowset .bd2{flex:1;min-width:0} .rowset b{display:block;font-size:13.5px;font-weight:600} .rowset small{color:var(--ink-3);font-size:12px} /* palette + toast + login */ .ov{position:fixed;inset:0;background:rgba(20,20,16,.44);display:none;z-index:80;padding:12vh 16px 16px} .ov.on{display:block} .pal{max-width:520px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:14px; box-shadow:var(--shadow-h);overflow:hidden} .pal-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)} .pal-in input{border:0;background:none;outline:0;width:100%;font-size:15px} .pal-l{max-height:330px;overflow-y:auto;padding:6px} .pcmd{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;width:100%;text-align:left} .pcmd:hover,.pcmd.k{background:var(--surface-2)} .pcmd .g{width:26px;height:26px;border-radius:7px;background:var(--sig-soft);color:var(--warn);display:grid; place-items:center;font-size:12px;font-weight:700;flex:0 0 26px} .pcmd b{font-size:13.5px;font-weight:500} .pcmd small{margin-left:auto;font-size:11px;color:var(--ink-3);font-family:"Azeret Mono",monospace} .pal-f{padding:9px 14px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-3);background:var(--surface-3)} .toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--ink);color:var(--bg); padding:11px 16px;border-radius:11px;font-size:13px;font-weight:500;box-shadow:var(--shadow-h);z-index:90; opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;display:flex;align-items:center;gap:9px; max-width:92vw} .toast.on{opacity:1;transform:translate(-50%,0)} .toast i{width:7px;height:7px;border-radius:50%;background:var(--sig);flex:0 0 7px} .login{position:fixed;inset:0;z-index:70;background:var(--bg);display:none; grid-template-columns:1fr 1fr;overflow:auto} .login.on{display:grid} .lg-art{background:var(--ink);color:var(--bg);padding:44px;display:flex;flex-direction:column;gap:22px} .lg-art .mk{width:38px;height:38px;border-radius:11px;background:var(--sig);color:var(--sig-on);display:grid; place-items:center;font-weight:700;font-size:15px} .lg-art h2{font-size:30px;letter-spacing:-.035em;font-weight:600;max-width:14ch;line-height:1.12} .lg-art p{margin:0;color:color-mix(in srgb,var(--bg) 62%,transparent);font-size:14px;max-width:38ch;line-height:1.6} .lg-art ul{margin:auto 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:13px; color:color-mix(in srgb,var(--bg) 74%,transparent)} .lg-art li{display:flex;gap:9px;align-items:center} .lg-art li em{font-style:normal;color:var(--sig);font-weight:700} .lg-form{display:flex;align-items:center;justify-content:center;padding:40px 24px} .lg-box{width:100%;max-width:344px;display:flex;flex-direction:column;gap:14px} .lg-box h3{font-size:20px;font-weight:600;letter-spacing:-.025em} .lg-box label{font-size:12px;font-weight:600;color:var(--ink-2);display:block;margin-bottom:5px} .lg-box .fld{padding:10px 12px} .lg-box .row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-3)} .lg-box .row a{margin-left:auto;color:var(--ink-2);font-weight:600;text-decoration:none} .lg-box .btn{justify-content:center;padding:11px} @media (max-width:1150px){ .s3,.s4,.s5,.s6,.s7,.s8{grid-column:span 6} .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} } @media (max-width:820px){ .login{grid-template-columns:1fr} .lg-art{padding:28px 20px;gap:16px} .lg-art ul{margin-top:6px} } @media (max-width:700px){ .shell{grid-template-columns:52px 1fr} /* A barra aberta nao pode dividir a tela do celular com o conteudo: 216px de menu num aparelho de 375px nao sobra nada. Aqui ela vira gaveta, POR CIMA da tela -- a coluna do grid continua com os 52px dos icones, entao o conteudo nao pula quando ela abre e fecha. */ .shell.aberto{grid-template-columns:52px 1fr} .shell.aberto .rail{position:fixed;top:0;left:0;bottom:0;width:min(276px,86vw); align-items:stretch;padding:14px 10px;overflow-y:auto;z-index:60; box-shadow:var(--shadow-h)} .shell.aberto::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.45); z-index:55} .shell.aberto .rl{width:100%;height:38px;display:flex;align-items:center;gap:10px; padding:0 10px;justify-content:flex-start} .shell.aberto .rl .rot{display:block;font-size:13.5px;font-weight:500;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .shell.aberto .rl .bd{position:static;margin-left:auto;border:0;width:8px;height:8px} .shell.aberto .tip{display:none} /* o submenu deixa de ser painel flutuante e vira lista, logo abaixo do modulo: no toque nao ha como "passar por cima" para abri-lo, e quem abre a gaveta quer ver tudo o que existe de uma vez */ .shell.aberto .grp{display:block;width:100%} .shell.aberto .sub{position:static;display:block;min-width:0;max-height:none; background:none;border:0;border-radius:0;box-shadow:none;padding:0 0 4px 22px; overflow:visible} .shell.aberto .sub .ttl{display:none} .shell.aberto .sub a{padding:6px 10px;font-size:12.5px} /* o modulo encabeca a propria lista: sem isto ele saia mais apagado que os itens abaixo dele, e a leitura ficava de tras para frente. Vale tambem para o modulo sem submenu, senao ele parece desligado ao lado dos outros */ .shell.aberto .grp>a.rl .rot, .shell.aberto .rail>a.rl .rot{font-weight:600;color:var(--ink)} .shell.aberto .sub .div{margin:4px 10px} .shell.aberto .rl-topo{flex-direction:row;align-items:center;padding:0 4px} .shell.aberto .rl-alt{margin-left:auto} .shell.aberto .rl-alt svg{transform:rotate(180deg)} .shell.aberto .rl-secao{display:block} .top{padding:12px 16px} .view{padding:0 16px 40px} .s3,.s4,.s5,.s6,.s7,.s8{grid-column:span 12} .bento{gap:12px} .g2,.g3,.g4{grid-template-columns:1fr} .k-open{min-width:0;flex:1} .k-open kbd{display:none} .kv{grid-template-columns:1fr} .kv>div:nth-child(odd){padding-bottom:2px;border-bottom:0} .hv{font-size:36px} /* o que empurrava a tela para os lados era sempre a mesma dupla: o campo de busca, que as telas pedem com min-width de ~300px por estilo embutido, e a fileira de filtros, que é inline-flex e não quebra. O !important é contra o style="" do elemento -- de fora não há outro jeito de vencê-lo. */ .fld{min-width:0 !important} .phead{gap:10px} .phead h1{font-size:21px} .phead .r{width:100%;margin-left:0} .segs{max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .segs::-webkit-scrollbar{display:none} .sg{flex:0 0 auto;white-space:nowrap} /* na barra de cima sobra o icone: o nome do botao nao cabe */ .so-largo{display:none} } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ---------- ajustes de integração com o HubTax ---------- Os ícones do sistema vêm do macro icon() do _icons.html, num SVG 20x20 com a classe .icon-inline e sem tamanho fixo -- solto dentro de .fld ele inflava até a altura da linha. Aqui eles ganham tamanho por contexto. */ .icon-inline{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor; stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .rl .icon-inline{width:19px;height:19px;flex:0 0 19px;stroke-width:1.6} .btn .icon-inline{width:15px;height:15px;flex:0 0 15px} .fld .icon-inline{color:var(--ink-3)} /* dinheiro e documento nunca quebram linha no meio */ td.mono,td.r{white-space:nowrap} .ent small{white-space:nowrap} /* a coluna de ações fica colada na direita mesmo com a tabela rolando */ td.r .btn{vertical-align:middle} /* ---------- janela flutuante ---------- Painel que abre sobre a tela em vez de empurrar o conteudo para baixo. Reaproveita o .ov do prototipo (o mesmo fundo escurecido da busca rapida). */ .ov{display:none} .ov.on{display:grid;place-items:start center;overflow-y:auto} .modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow-h);width:min(560px,100%);display:flex;flex-direction:column; gap:13px;padding:17px 18px;margin-bottom:16px} .modal-hd{display:flex;align-items:baseline;gap:10px} .modal-hd h2{font-size:14px;font-weight:600} .modal-hd .t{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-weight:500} .modal-ft{display:flex;gap:8px;padding-top:12px;border-top:1px solid var(--line)} /* ---------- links ---------- O protótipo usava