/* ============ TEMAS (tokens) ============ */ [data-theme="nord"] { --canvas:#222834; --surface:#2a313f; --surface-2:#2f3747; --border:#3b4252; --text:#d8dee9; --text-emph:#eceff4; --muted:#94a0b4; --accent:#88c0d0; --accent-2:#5e81ac; --on-accent:#1b2531; --danger:#bf616a; --success:#a3be8c; --warning:#ebcb8b; --info:#cda3d4; } [data-theme="amber"] { --canvas:#0f0d0a; --surface:#181410; --surface-2:#211b13; --border:#2d2619; --text:#e4ddd0; --text-emph:#ffffff; --muted:#9d927e; --accent:#f0a830; --accent-2:#c47b22; --on-accent:#231905; --danger:#e2554a; --success:#6ee7b7; --warning:#f0c060; --info:#c9a0dc; } :root { --mono: 'SFMono-Regular', ui-monospace, 'Cascadia Code', Consolas, monospace; --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--canvas); color: var(--text); font-family: var(--sans); font-size: 14px; } .muted { color: var(--muted); } .num { font-family: var(--mono); } code { font-family: var(--mono); color: var(--accent); } h1 { font-size: 20px; color: var(--text-emph); margin: 0 0 4px; } a { color: inherit; } /* ============ LAYOUT ============ */ /* O fundo geral vem daqui (não do body): o data-theme vive no .app, então o --canvas segue o tema selecionado. O tem data-theme fixo "nord", então o body ficaria sempre no canvas Nord. */ .app { display: flex; height: 100vh; overflow: hidden; background: var(--canvas); } .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* Fundo pegboard (a "bancada do maker"): furinhos em CSS puro só na área de CONTEÚDO — o topo e a sidebar ficam limpos (antes ficava no .app e vazava atrás dos botões do topo/ghost). Duas camadas de radial-gradient num grid de 24px: o furo (sombra escura, p/ cima) + o lábio/rim claro (token --border, p/ baixo) = bevel. background-attachment padrão (scroll): o padrão fica fixo enquanto o conteúdo rola. */ .content { flex: 1; overflow: auto; padding: 22px; background-image: radial-gradient(circle at 50% 56%, color-mix(in srgb, var(--border) 55%, transparent) 0 2px, transparent 2.6px), radial-gradient(circle at 50% 46%, rgba(0, 0, 0, .28) 0 1.8px, transparent 2.4px); background-size: 24px 24px; } /* ============ SCROLLBARS NO TEMA ============ */ /* Barras discretas e no tema (Nord/Amber) em TODA área rolável — sidebar (.navwrap), conteúdo, drawers, diálogos, tabelas, textareas. Polegar em tom de --muted (translúcido) que clareia no hover; trilho transparente (mostra o fundo do container). Cobre WebKit/Blink (::-webkit-scrollbar) e o padrão. */ * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 38%, transparent); border-radius: 8px; } *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 65%, transparent); } *::-webkit-scrollbar-corner { background: transparent; } /* ============ TOP BAR ============ */ .top { height: 56px; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 22px; gap: 14px; flex-shrink: 0; } .top h1 { font-size: 16px; font-weight: 700; color: var(--text-emph); margin: 0; } .top .crumb { color: var(--muted); font-size: 12px; } .top .sp { flex: 1; } .search { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; color: var(--text); width: 200px; font-size: 13px; } .search::placeholder { color: var(--muted); } .btn { background: var(--accent); color: var(--on-accent); border: none; padding: 8px 14px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-block; } .btn:hover { filter: brightness(1.06); } .btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); } /* ============ SIDEBAR ============ */ .side { width: 210px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 14px 10px; flex-shrink: 0; overflow-y: auto; min-height: 0; } .side > * { flex-shrink: 0; } .brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; } .logo { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--on-accent); font-weight: 800; font-family: var(--mono); font-size: 18px; } .brand .nm { font-weight: 800; color: var(--text-emph); font-size: 16px; } .brand .tg { font-size: 10px; color: var(--muted); } .navgrp { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); padding: 14px 10px 6px; } .nav { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--text); cursor: pointer; font-size: 13.5px; font-weight: 500; text-decoration: none; } .nav .ic { width: 18px; text-align: center; opacity: .8; } .nav:hover { background: var(--surface-2); } .nav.active { background: var(--surface-2); color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); font-weight: 600; } .nav .badge { margin-left: auto; font-family: var(--mono); font-size: 10px; background: var(--danger); color: #fff; border-radius: 20px; padding: 1px 6px; } .side .foot { margin-top: auto; border-top: 1px solid var(--border); padding-top: 10px; } .userchip { display: flex; align-items: center; gap: 10px; padding: 8px; text-decoration: none; border-radius: 8px; } .userchip:hover { background: var(--surface-2); } .uava { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; color: var(--on-accent); font-weight: 800; font-family: var(--mono); font-size: 14px; flex-shrink: 0; } .uinfo { line-height: 1.2; min-width: 0; } .uinfo .un { font-weight: 700; color: var(--text-emph); font-size: 13px; } .uinfo .ur { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .userchip .ic { margin-left: auto; } /* Sou Maker: CHIP de ação com identidade própria (spec 6, Etapa B) — não se confunde com o perfil. Tokens dos dois temas (usa as variáveis de tema, então Nord/Amber saem de graça). */ .soumaker { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--text-emph); text-decoration: none; cursor: pointer; position: relative; } .soumaker:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: var(--accent); } .soumaker.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); } .soumaker .smic { width: 30px; height: 30px; border-radius: 8px; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .soumaker .smt { font-weight: 700; font-size: 12.5px; line-height: 1.2; } .soumaker .smd { font-size: 10.5px; color: var(--muted); margin-top: 1px; } .footdiv { height: 1px; background: var(--border); margin: 10px 2px; } .footrow { display: flex; gap: 6px; margin-top: 4px; } .footrow .nav { flex: 1; justify-content: center; font-size: 12px; padding: 7px 6px; } /* ============ KPI CARDS ============ */ .grid { display: grid; gap: 14px; } .kpicards { grid-template-columns: repeat(5, 1fr); margin-bottom: 20px; } .cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; } .kpi, .card-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; } .kpi .l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; } .kpi .v { font-family: var(--mono); font-size: 25px; font-weight: 700; color: var(--text-emph); margin-top: 6px; } .kpi .d { font-size: 11px; margin-top: 4px; } .up { color: var(--success); } .down { color: var(--danger); } .neu { color: var(--muted); } .kpi.alert .v { color: var(--danger); } .kpi.warn .v { color: var(--warning); } .kpi.clk { cursor: pointer; } .kpi.clk:hover { border-color: var(--accent); } /* dashboard: herói do lucro + esteira do funil */ .hero { border-left: 3px solid var(--success); margin-bottom: 14px; } .hero.clk { cursor: pointer; } .hero.clk:hover { border-color: var(--accent); } .hero .hl { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); } .hero .hv { font-family: var(--mono); font-size: 40px; font-weight: 800; line-height: 1.1; margin: 4px 0; } .hero .hv.pos { color: var(--success); } .hero .hv.neg { color: var(--danger); } .hero .hsub { font-size: 13px; color: var(--text); } .hero .hcompose { font-size: 12px; color: var(--muted); margin-top: 8px; font-family: var(--mono); } .esteira { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .esteira .et { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; flex: 1; min-width: 110px; } .esteira .et.clk { cursor: pointer; } .esteira .et.clk:hover { border-color: var(--accent); } .esteira .etv { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--text-emph); } .esteira .etl { font-size: 11px; color: var(--muted); margin-top: 2px; } .esteira .etar { color: var(--muted); font-size: 16px; } /* evolução: receita + lucro por mês, mesma régua, ambos rotulados e com valor */ .evorow { display: grid; grid-template-columns: 62px 1fr; gap: 12px; align-items: center; margin-bottom: 14px; } .evomes { color: var(--muted); font-size: 12px; font-weight: 600; } .evobars { display: flex; flex-direction: column; gap: 6px; } .evobar { display: grid; grid-template-columns: 58px 1fr 92px; gap: 8px; align-items: center; } .evolbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; } .evoval { font-family: var(--mono); font-size: 12px; text-align: right; color: var(--text-emph); } /* agenda: dias e itens */ .agdia { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .agdia:last-child { border-bottom: none; } .agdia.hoje { background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 8px; } .agdata { font-size: 13px; color: var(--muted); padding-top: 2px; } .agitens { display: flex; flex-direction: column; gap: 5px; } .agitem { display: flex; align-items: center; gap: 8px; font-size: 13px; } .agitem .link { background: none; border: none; padding: 0; font-size: 13px; } /* especificações da OP (produção): destaque do que o cliente pediu */ .opspecs { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 2px; } .opspec { font-size: 12px; color: var(--muted); } .opspec .k { text-transform: none; } .opspec b { color: var(--text-emph); font-size: 13px; } .specbox { background: var(--surface); border: 1px solid var(--accent); border-radius: 10px; padding: 12px 14px; } .specbig { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--border); } .specbig:last-child { border-bottom: none; } .specbig .k { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); } .specbig .v { font-size: 20px; font-weight: 700; color: var(--text-emph); } /* ficha de produção imprimível (uma página por OP) */ .ficha { max-width: 720px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 28px 32px; } .ficha .fh { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--text-emph); padding-bottom: 8px; } .ficha .fcod { font-size: 26px; font-weight: 800; color: var(--text-emph); } .ficha .fqtd { font-size: 18px; font-weight: 700; } .ficha .fprod { font-size: 22px; font-weight: 600; margin: 12px 0 6px; color: var(--text-emph); } .ficha .fmeta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: 13px; } .ficha .fsec { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 18px 0 8px; } .ficha .fspecs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .ficha .fspec { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; } .ficha .fspec .fk { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); } .ficha .fspec .fv { font-size: 24px; font-weight: 800; color: var(--text-emph); } .ficha .frow { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); } .ficha .ffoot { margin-top: 22px; font-size: 11px; color: var(--muted); text-align: center; } @media print { .side, .top, .toasts, .ficha-noprint, .scrim, .drawer, .dialog, .tour-scrim, .tour-spot, .tour-balloon, .rc-faixa, .rc-scrim, .rc-card { display: none !important; } .app, .main, .content { display: block !important; height: auto !important; overflow: visible !important; padding: 0 !important; } body, .app { background: #fff !important; } .ficha { border: none; border-radius: 0; max-width: 100%; background: #fff; padding: 0; } .ficha .fcod, .ficha .fprod, .ficha .fspec .fv, .ficha .fqtd, .ficha .frow b { color: #000 !important; } .ficha .fh { border-bottom-color: #000; } .ficha .fspec { border-color: #999; } } /* ============ PANEL ============ */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; } .panel h3 { font-size: 13px; color: var(--text-emph); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; } .panel h3 .tag { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 400; } .twocol { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; } /* ============ TABLE ============ */ table { width: 100%; border-collapse: collapse; font-size: 13px; } th { text-align: left; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; padding: 8px 10px; border-bottom: 1px solid var(--border); font-weight: 600; } td { padding: 10px; border-bottom: 1px solid var(--border); color: var(--text); } tr:last-child td { border-bottom: none; } tr.clk { cursor: pointer; } tr.clk:hover td { background: var(--surface-2); } .r { text-align: right; } .c { text-align: center; } th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } th.sortable:hover { color: var(--text); } th.sortable .car { color: var(--accent); margin-left: 3px; } /* Comparação "Venda em canal" (Calculadora + editor de produto): todos os canais abertos e alinhados para comparar de relance. Padding enxuto porque vive na coluna estreita do resumo (~430px). */ .canaissim td, .canaissim th { padding: 8px 6px; vertical-align: top; } .canaissim td:first-child, .canaissim th:first-child { padding-left: 2px; } .canaissim td:last-child, .canaissim th:last-child { padding-right: 2px; } .canaissim .cn { font-weight: 600; color: var(--text-emph); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .canaissim .cn .pill { font-size: 10px; padding: 1px 7px; } .canaissim .sub { font-size: 11px; color: var(--muted); margin-top: 2px; } .canaissim .v { font-family: var(--mono); font-weight: 700; font-size: 12.5px; color: var(--text-emph); white-space: nowrap; } .canaissim .mg { font-family: var(--mono); font-size: 12px; color: var(--text); white-space: nowrap; } .canaissim tr.best td { background: color-mix(in srgb, var(--success) 7%, transparent); } /* ============ LISTAS (busca + filtros + paginação) ============ */ .listbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .listbar .search { width: 240px; } .listbar select { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; color: var(--text); font-size: 13px; font-family: var(--sans); } .pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 12px; font-size: 12.5px; color: var(--muted); } .pager .btn { padding: 4px 12px; font-size: 15px; line-height: 1; } .pager .btn:disabled { opacity: .4; cursor: default; } .pager select { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; color: var(--text); font-size: 12.5px; font-family: var(--sans); } /* ============ PILLS ============ */ .pill { font-size: 11px; padding: 2px 9px; border-radius: 20px; font-weight: 600; display: inline-block; } .pill.ok { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); } .pill.dg { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); } .pill.wn { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); } .pill.ac { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .pill.mut { background: var(--surface-2); color: var(--muted); } .pill.ig { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info); } /* ============ KANBAN ============ */ .board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; } .col { width: 280px; flex-shrink: 0; scroll-snap-align: start; border-radius: 11px; transition: background .12s, outline-color .12s; outline: 2px dashed transparent; outline-offset: -3px; } .col.dragover, .col-strip.dragover { background: color-mix(in srgb, var(--accent) 10%, transparent); outline-color: var(--accent); } .colhead { display: flex; align-items: center; gap: 8px; padding: 6px 4px 10px; position: sticky; top: 0; background: var(--canvas); z-index: 2; } .col-toggle { margin-left: 6px; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); cursor: pointer; width: 20px; height: 20px; line-height: 1; font-size: 15px; padding: 0; } .col-toggle:hover { border-color: var(--accent); color: var(--accent); } /* coluna retraída: tira fina, alvo de drop, clique expande */ .col-strip { width: 42px; flex-shrink: 0; scroll-snap-align: start; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 10px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: background .12s, outline-color .12s; outline: 2px dashed transparent; outline-offset: -3px; } .col-strip:hover { border-color: var(--accent); } .col-strip .strip-ct { font-family: var(--mono); font-size: 12px; color: var(--muted); } .col-strip .strip-nm { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 700; font-size: 12px; color: var(--text-emph); white-space: nowrap; } .card[draggable="true"] { cursor: grab; } .card.done { opacity: .7; } .card.faded { opacity: .55; } .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .colhead .nm { font-weight: 700; color: var(--text-emph); font-size: 13px; } .colhead .ct { font-family: var(--mono); font-size: 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 1px 8px; margin-left: auto; } .cards { display: flex; flex-direction: column; gap: 9px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 11px; cursor: pointer; } .card:hover { border-color: var(--accent); } .card .r1 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; } .card .pid { font-family: var(--mono); font-size: 11px; color: var(--accent); } .card .val { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--text-emph); } .card .cli { font-weight: 600; color: var(--text-emph); font-size: 13.5px; } .card .desc { color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.35; } .card .foot { display: flex; align-items: center; gap: 7px; margin-top: 9px; flex-wrap: wrap; } .prazo { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); } .prazo.late { color: var(--danger); font-weight: 700; } .prazo.near { color: var(--warning); } .bar { height: 7px; border-radius: 5px; background: var(--surface-2); overflow: hidden; margin-top: 6px; } .bar > i { display: block; height: 100%; border-radius: 5px; } .progress { display: flex; align-items: center; gap: 8px; } .progress .pnum { font-size: 11px; color: var(--muted); width: 60px; text-align: right; font-family: var(--mono); } /* ============ DRAWER ============ */ .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40; } .drawer { position: fixed; top: 0; right: 0; width: 540px; max-width: 92vw; height: 100%; background: var(--canvas); border-left: 1px solid var(--border); z-index: 50; overflow-y: auto; padding: 22px; box-shadow: -8px 0 30px rgba(0,0,0,.3); } .drawer .x { position: absolute; top: 16px; right: 18px; cursor: pointer; color: var(--muted); font-size: 20px; background: none; border: none; } .dh { font-size: 18px; font-weight: 700; color: var(--text-emph); } .dsub { color: var(--muted); font-size: 13px; margin-top: 2px; margin-bottom: 18px; } .kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; } .kv .box { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 10px; } .kv .l { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); } .kv .v { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--text-emph); margin-top: 3px; } .sech { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; } .specrow { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .specrow .k { color: var(--muted); } .link { color: var(--accent); cursor: pointer; text-decoration: none; } .link:hover { text-decoration: underline; } .note { font-size: 11.5px; color: var(--muted); background: var(--surface); border: 1px dashed var(--border); border-radius: 8px; padding: 8px 10px; margin-top: 8px; } /* ============ FORMS ============ */ /* PISO de estilo: todo input/select/textarea nasce no tema, mesmo sem wrapper. Sem isto, um controle que não caísse em .field/.bomrow/.orc-fil/.search renderizava com o default do browser (fundo branco, Arial, borda nativa) no meio de campos estilizados. O `:where()` contribui especificidade ZERO, então o seletor inteiro vale (0,0,1) e NUNCA vence `.field input` (0,1,1), `.bomrow input`, `.orc-fil input`, `.search` ou `.pager select` — as regras de contexto seguem mandando, independente da ordem no arquivo. É por isso que este piso é seguro. Sem `width`: largura é decisão do contexto (o .field é quem estica para 100%). Fora da lista os tipos que ficariam ruins com padding/fundo: checkbox, radio, file, range e color renderizam nativos. */ input:where(:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color])), select, textarea { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; color: var(--text); font-size: 13px; font-family: var(--sans); } input:where(:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color])):focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); } /* Checkbox/radio nunca herdam largura/padding de linha compacta (.bomrow input estica o quadradinho). */ label.check input[type=checkbox], label.check input[type=radio], .bomrow input[type=checkbox], .bomrow input[type=radio], .bomvar input[type=checkbox], .bomvar input[type=radio] { width: auto; padding: 0; } .field { margin-bottom: 14px; } .field > label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 6px; } /* Vale solto também: `label.check` aparece fora de .field (linhas .bomvar do painel de ficha e do de tempos), onde antes ficava sem flex/gap e com o tamanho errado. */ label.check { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: normal; font-size: 13px; color: var(--text); cursor: pointer; } .field > label.check { margin-bottom: 0; } .field > label.check input { width: auto; } .field input, .field select, .field textarea { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; color: var(--text); font-size: 13px; font-family: var(--sans); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .opts { display: flex; gap: 8px; } .opt { flex: 1; border: 1px solid var(--border); border-radius: 9px; padding: 10px; cursor: pointer; background: var(--surface); } .opt .ot { font-weight: 600; color: var(--text-emph); font-size: 13px; } .opt .od { font-size: 11px; color: var(--muted); margin-top: 2px; } .opt.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .opt.sel .ot { color: var(--accent); } .hide { display: none !important; } /* picker (campo de busca com lupa) */ .picker { position: relative; display: flex; gap: 6px; } .picker > input { flex: 1; } .pk-lupa { flex: 0 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0 11px; color: var(--text); cursor: pointer; font-size: 14px; } .pk-lupa:hover { border-color: var(--accent); } .pk-add { color: var(--accent); font-weight: 700; font-size: 17px; line-height: 1; } .criar-row td { border-top: 1px solid var(--border); color: var(--accent); font-weight: 600; } /* z-index 35: dentro do EditorShell o cabeçalho sticky está em 30 — com o valor antigo (5) o dropdown de um Picker perto do topo passava POR BAIXO do cabeçalho. Não colide com nada: quando o modal da lupa abre, o próprio Picker fecha o dropdown. */ .pk-drop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 35; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; max-height: 260px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.25); } .pk-opt { padding: 8px 11px; cursor: pointer; font-size: 13px; color: var(--text); } .pk-opt:hover { background: var(--surface-2); } .pk-opt.criar { color: var(--accent); font-weight: 600; border-top: 1px solid var(--border); } .dfoot { display: flex; gap: 10px; margin-top: 22px; border-top: 1px solid var(--border); padding-top: 16px; } .dfoot .btn { flex: 1; text-align: center; } /* mini-form de criação inline (Picker → cria e seleciona sem sair do drawer) */ .inline-novo { background: var(--surface); border: 1px dashed var(--accent); border-radius: 9px; padding: 11px; margin-top: 8px; } .inline-novo .ttl { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); margin-bottom: 8px; } /* ============ TOAST ============ */ .toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: 380px; } .toast { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 9px; padding: 11px 13px; box-shadow: 0 8px 24px rgba(0,0,0,.3); animation: toastin .18s ease-out; } .toast .tmsg { font-size: 13px; color: var(--text); flex: 1; } .toast-act { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border: none; border-radius: 7px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: var(--sans); } .toast-act:hover { filter: brightness(1.1); } .toast-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0 2px; } @keyframes toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ============ DIALOGO (modal central de fluxo) ============ */ .dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 55; width: 440px; max-width: 92vw; background: var(--canvas); border: 1px solid var(--border); border-radius: 12px; padding: 22px; box-shadow: 0 12px 40px rgba(0,0,0,.4); } .dialog .dg-title { font-size: 16px; font-weight: 700; color: var(--text-emph); margin-bottom: 8px; } .dialog .dg-body { font-size: 13.5px; color: var(--text); line-height: 1.5; margin-bottom: 18px; } .dialog .dg-acts { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } /* ============ RECONEXÃO DO CIRCUITO ============ */ /* Marcação em Components/Shared/ReconnectUi.razor; cliques em wwwroot/js/reconexao.js. TUDO nasce escondido: só as classes que o Blazor liga em #components-reconnect-modal (components-reconnect-show/retrying/paused/failed/rejected) revelam cada bloco. Fica dentro do .app → herda os tokens do tema escolhido (Nord/Amber). */ .rc { display: contents; } /* container sem caixa própria: não vira flex item do .app */ .rc-faixa, .rc-scrim, .rc-card, .rc-msg, .rc .rc-vis-show, .rc .rc-vis-retrying, .rc .rc-vis-failed, .rc .rc-vis-rejected { display: none; } /* --- faixa (queda curta: avisa, não bloqueia) --- */ #components-reconnect-modal.components-reconnect-show .rc-faixa, #components-reconnect-modal.components-reconnect-retrying .rc-faixa, #components-reconnect-modal.components-reconnect-paused .rc-faixa { display: flex; } #components-reconnect-modal.components-reconnect-show .rc-vis-show, #components-reconnect-modal.components-reconnect-paused .rc-vis-show, #components-reconnect-modal.components-reconnect-retrying .rc-vis-retrying { display: inline; } .rc-faixa { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1300; align-items: center; gap: 10px; max-width: calc(100vw - 24px); background: var(--surface); color: var(--text); font-size: 13px; border: 1px solid var(--border); border-left: 3px solid var(--warning); border-radius: 9px; padding: 9px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.35); animation: toastin .18s ease-out; } .rc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); flex: 0 0 auto; animation: rcpulse 1.1s ease-in-out infinite; } .rc-cont { color: var(--muted); font-family: var(--mono); font-size: 11.5px; } .rc-act { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border: none; border-radius: 7px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: var(--sans); } .rc-act:hover { filter: brightness(1.1); } .rc-act[disabled] { opacity: .55; cursor: default; } @keyframes rcpulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } /* --- cartão (tentativas esgotadas ou sessão morta: aí sim bloqueia) --- */ #components-reconnect-modal.components-reconnect-failed .rc-scrim, #components-reconnect-modal.components-reconnect-rejected .rc-scrim { display: block; } #components-reconnect-modal.components-reconnect-failed .rc-card, #components-reconnect-modal.components-reconnect-rejected .rc-card { display: block; } #components-reconnect-modal.components-reconnect-failed .rc-vis-failed, #components-reconnect-modal.components-reconnect-rejected .rc-vis-rejected { display: block; } .rc-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1300; } .rc-card { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1301; width: 440px; max-width: 92vw; background: var(--canvas); border: 1px solid var(--border); border-top: 3px solid var(--danger); border-radius: 12px; padding: 22px; box-shadow: 0 12px 40px rgba(0,0,0,.5); text-align: center; } .rc-ico { font-size: 26px; color: var(--danger); line-height: 1; margin-bottom: 10px; } .rc-card .rc-titulo { font-size: 16px; font-weight: 700; color: var(--text-emph); margin-bottom: 8px; } .rc-card .rc-body { font-size: 13.5px; color: var(--text); line-height: 1.55; margin: 0 0 18px; } .rc-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .rc-acts .btn[disabled] { opacity: .55; cursor: default; } @media (max-width: 700px) { .rc-faixa { left: 8px; right: 8px; transform: none; max-width: none; } } /* segment toggle (board/lista) */ .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 14px; } .seg button { background: transparent; color: var(--muted); border: none; padding: 7px 18px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: var(--sans); } .seg button.on { background: var(--surface-2); color: var(--accent); } /* theme + cost + chips (perfil / produto) */ .themecards { display: flex; gap: 10px; } .themecard { flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 12px; cursor: pointer; background: var(--surface); } .themecard.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .swatches { display: flex; gap: 5px; margin-bottom: 8px; } .sw { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(255,255,255,.1); } .themecard .tn { font-weight: 600; color: var(--text-emph); font-size: 13px; } .themecard .td { font-size: 11px; color: var(--muted); } .costbox { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-top: 4px; } .costline { display: flex; justify-content: space-between; font-size: 12.5px; padding: 4px 0; } .costline .v { font-family: var(--mono); } .costline.tot { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; font-weight: 700; color: var(--text-emph); } .chiptog { display: flex; flex-wrap: wrap; gap: 7px; } .ctag { font-size: 12px; padding: 5px 11px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; } .ctag.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .bomrow { display: grid; grid-template-columns: 1fr 70px 80px 24px; gap: 8px; align-items: center; margin-bottom: 8px; } .bomrow select, .bomrow input { padding: 7px 8px; font-size: 12.5px; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; color: var(--text); } /* Linha auxiliar abaixo de uma .bomrow ("filamento escolhido no pedido" + papel, itens na mesa, opções do campo de especificação). Não tinha regra NENHUMA no CSS — nem layout, nem input: os campos saíam crus e desalinhados logo abaixo de campos estilizados. Estilo compacto, no molde da .bomrow. */ .bomvar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -2px 0 8px; } .bomvar > input, .bomvar > select { padding: 7px 8px; font-size: 12.5px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-family: var(--sans); } .bomsub { font-family: var(--mono); font-size: 12px; color: var(--text); text-align: right; white-space: nowrap; } .bomdel { cursor: pointer; color: var(--muted); text-align: center; font-size: 15px; background: none; border: none; } .bomdel:hover { color: var(--danger); } /* Botão "adicionar linha": pertence à lista logo acima, por isso ocupa a largura toda (afordância clara de ação — antes era um link de texto que se confundia com o conteúdo). */ .addrow { display: block; width: 100%; margin-top: 10px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--accent); background: none; border: 1px dashed var(--border); border-radius: 8px; cursor: pointer; text-align: center; transition: border-color .12s ease, background .12s ease, transform .07s ease; } .addrow:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } .addrow:active { transform: scale(.995); } /* Variante para cabeçalhos/toolbars: continua botão, mas inline e do tamanho do conteúdo. */ .addrow.compacta { display: inline-flex; align-items: center; width: auto; margin: 0; padding: 4px 10px; border-radius: 20px; text-align: left; } .addinline { display: flex; gap: 8px; margin-top: 12px; } .addinline input, .addinline select { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; color: var(--text); font-size: 13px; font-family: var(--sans); } .addinline select { flex: 0 0 auto; } .addinline .btn { flex: 0 0 auto; } .text-danger { color: var(--danger); } .text-success { color: var(--success); } /* ============ HELP TIP (glossário inline, 11c-1) ============ */ .htip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--border); color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1; cursor: help; margin-left: 5px; vertical-align: middle; user-select: none; flex: 0 0 auto; } .htip:hover, .htip:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; } .htip-pop { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(260px, 78vw); background: var(--canvas); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 70; opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none; text-align: left; white-space: normal; font-family: var(--sans); } .htip.baixo .htip-pop { bottom: auto; top: calc(100% + 8px); } .htip:hover .htip-pop, .htip:focus .htip-pop { opacity: 1; visibility: visible; } .htip-t { display: block; font-size: 12px; font-weight: 700; color: var(--text-emph); margin-bottom: 4px; } .htip-x { display: block; font-size: 11.5px; color: var(--text); line-height: 1.5; font-weight: 400; letter-spacing: normal; text-transform: none; } /* ============ EMPTY STATE (11c-1) ============ */ .empty { text-align: center; padding: 38px 20px; } .empty-ic { font-size: 30px; line-height: 1; opacity: .45; margin-bottom: 10px; } .empty-t { font-size: 15px; font-weight: 700; color: var(--text-emph); margin-bottom: 5px; } .empty-x { font-size: 12.5px; color: var(--muted); line-height: 1.5; max-width: 340px; margin: 0 auto 14px; text-transform: none; letter-spacing: normal; } .empty .btn { text-decoration: none; } td .empty { padding: 30px 20px; } /* ============ AUTH (login) ============ */ .authwrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--canvas); padding: 20px; } .authcard { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 26px; } .authbrand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; } .authbrand .nm { font-weight: 800; color: var(--text-emph); font-size: 18px; } .authbrand .tg { font-size: 10.5px; color: var(--muted); } .authtitle { font-size: 16px; color: var(--text-emph); margin: 0 0 16px; } .autherr { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); border: 1px solid var(--danger); border-radius: 8px; padding: 9px 11px; font-size: 12.5px; margin-bottom: 14px; } .validation-message { color: var(--danger); font-size: 11.5px; display: block; margin-top: 4px; } /* ============ TOUR GUIADO (11c-3) ============ */ .tour-scrim { position: fixed; inset: 0; z-index: 1200; background: transparent; } .tour-spot { position: fixed; z-index: 1201; border-radius: 10px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(9,12,20,.62), 0 0 0 2px var(--accent); transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease; } .tour-balloon { position: fixed; z-index: 1202; width: 300px; max-width: calc(100vw - 16px); background: var(--canvas); border: 1px solid var(--border); border-radius: 12px; padding: 15px 16px; box-shadow: 0 14px 44px rgba(0,0,0,.45); animation: toastin .18s ease-out; } .tour-tit { font-size: 14.5px; font-weight: 700; color: var(--text-emph); margin-bottom: 5px; } .tour-txt { font-size: 12.5px; color: var(--text); line-height: 1.5; } .tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; } .tour-prog { font-size: 11px; color: var(--muted); white-space: nowrap; } .tour-btns { display: flex; gap: 6px; } .tour-btns .btn { padding: 6px 12px; font-size: 12.5px; } /* ============ AÇÃO SOB LATÊNCIA (Camadas 0/1 — ANALISE-UX-LATENCIA) ============ */ /* Spinner único; currentColor adapta ao contexto (on-accent no .btn cheio, --text no ghost, --accent no link). */ .spin { display: inline-block; box-sizing: border-box; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .6s linear infinite; } .spin.sm { width: 9px; height: 9px; border-width: 1.5px; margin-right: 4px; vertical-align: -1px; } .spin.md { width: 13px; height: 13px; } .spin.lg { width: 26px; height: 26px; border-width: 3px; color: var(--accent); } @keyframes spin { to { transform: rotate(360deg); } } .btn-inner { display: inline-flex; align-items: center; gap: 6px; justify-content: center; } .btn:disabled { cursor: default; } .btn:disabled:not(.busy) { opacity: .5; filter: none; } /* desabilitado por domínio: esmaecido */ .btn.busy { opacity: 1; cursor: progress; } /* ocupado: cheio + spinner (não parece "morto") */ .link.busy { pointer-events: none; opacity: .6; } /* Camada 1 — resposta imediata ao clique (CSS puro, antes do round-trip do servidor). */ .btn { transition: transform .07s ease, filter .12s ease; } .btn:active:not(:disabled) { transform: scale(.97); filter: brightness(.94); } .link { transition: opacity .1s ease; } .link:active { opacity: .5; } .card { transition: transform .07s ease, border-color .12s ease; } .card:active { transform: scale(.985); } .seg button { transition: transform .07s ease; } .seg button:active { transform: scale(.96); } @media (prefers-reduced-motion: reduce) { .spin, .spin.sm, .spin.md, .spin.lg { animation: none; opacity: .55; } /* fade estático, sem giro */ .btn:active:not(:disabled), .card:active, .seg button:active { transform: none; } .btn, .card, .seg button, .link { transition: none; } } /* ============ MENU RECOLHÍVEL (POC docs/poc-menu-recolhivel.html) ============ */ /* Estado no atributo data-menu do (fora do Blazor): aplicado sem flash pelo script inline do App.razor e alternado por bancadaMenu (JS). overflow:visible no .side p/ o PINO escapar; os itens rolam na .navwrap. */ .side { overflow: visible; position: relative; z-index: 50; transition: width .18s ease; } /* Região rolável dos itens — brand (acima) e foot (abaixo) ficam fixos. Sem isto o menu alto estourava a viewport e cortava os itens de baixo em telas menores (o scroll voltou; o pino segue escapando pelo .side). */ .navwrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; } .nav { position: relative; width: 100%; text-align: left; background: none; border: none; font-family: inherit; } .nav .lbl { white-space: nowrap; } .nav.calc { color: var(--accent); font-weight: 600; } .nav:active { transform: scale(.97); } /* Botão de recolher na borda direita (fundo de acento, salta aos olhos). Seta por CSS conforme o estado. */ .pin { position: absolute; right: -13px; top: 44px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 2px solid var(--canvas); color: var(--on-accent); cursor: pointer; z-index: 60; padding: 0; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.5); transition: transform .12s ease, filter .12s ease; } .pin::after { content: "«"; font-size: 13px; font-weight: 800; } html[data-menu="mini"] .pin::after { content: "»"; } .pin:hover { transform: scale(1.12); filter: brightness(1.08); } .pin:active { transform: scale(.95); } /* Flyout — nome do item à direita, só no modo recolhido. Aparência aqui; a POSIÇÃO vem do JS (position:fixed, bancadaFlyout em masks.js) p/ escapar o clip do overflow da .navwrap. */ .nav .fly, .userchip .fly { display: none; position: fixed; z-index: 99; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-emph); padding: 5px 11px; border-radius: 7px; font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.45); pointer-events: none; } .nav .fly .grp, .userchip .fly .grp { display: block; font-size: 9.5px; font-weight: 400; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; } .nav .fly::before, .userchip .fly::before { content: ""; position: absolute; left: -5px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 8px; height: 8px; background: var(--surface-2); border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* ---- Recolhido (preferência do usuário, via cookie → atributo no ) ---- */ html[data-menu="mini"] .side { width: 58px; padding: 14px 7px; } html[data-menu="mini"] .side .brandtxt { display: none; } html[data-menu="mini"] .side .navgrp { padding: 10px 0 4px; text-indent: -9999px; border-top: 1px solid var(--border); margin: 6px 6px 0; overflow: hidden; } html[data-menu="mini"] .side .nav { justify-content: center; padding: 8px 0; gap: 0; } html[data-menu="mini"] .side .nav .lbl { display: none; } html[data-menu="mini"] .side .uinfo { display: none; } html[data-menu="mini"] .side .userchip { justify-content: center; padding: 6px 0; } /* Sou Maker chip + rodapé recolhidos: só o ícone (o flyout/title cobre o resto). */ html[data-menu="mini"] .side .soumaker { justify-content: center; padding: 7px 0; gap: 0; } html[data-menu="mini"] .side .soumaker .smtxt { display: none; } html[data-menu="mini"] .side .footrow { flex-direction: column; } /* ---- Responsivo: abaixo de 900px recolhe sozinho e some o pino (independe da preferência) ---- */ @media (max-width: 900px) { .side { width: 58px; padding: 14px 7px; } .side .brandtxt { display: none; } .side .navgrp { padding: 10px 0 4px; text-indent: -9999px; border-top: 1px solid var(--border); margin: 6px 6px 0; overflow: hidden; } .side .nav { justify-content: center; padding: 8px 0; gap: 0; } .side .nav .lbl { display: none; } .side .uinfo { display: none; } .side .userchip { justify-content: center; padding: 6px 0; } .side .soumaker { justify-content: center; padding: 7px 0; gap: 0; } .side .soumaker .smtxt { display: none; } .side .footrow { flex-direction: column; } .pin { display: none; } } @media (prefers-reduced-motion: reduce) { .side { transition: none; } /* recolher/expandir vira instantâneo */ .nav:active, .pin:hover, .pin:active { transform: none; } } /* ===== Orçamento híbrido (item avulso + G-code) — usa os tokens de tema do app ===== */ .orc-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; } .orc-ihead { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .orc-ihead .t { font-weight: 700; color: var(--text-emph); font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Remover item do card. Classe própria (.rm) de propósito: `.drawer .x` é o botão de FECHAR a drawer e carrega position:absolute no canto — um ✕ com class="x" aqui escapava do card e ficava sobreposto ao de fechar, fazendo o clique apagar o item sem querer. position:static reforça o isolamento. */ .orc-ihead .rm { position: static; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 2px 6px; border-radius: 6px; } .orc-ihead .rm:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); } .orc-ibody { padding: 12px; } .orc-ifoot { display: flex; align-items: center; gap: 14px; padding: 9px 12px; border-top: 1px dashed var(--border); flex-wrap: wrap; } .orc-ifoot .m { font-size: 11px; color: var(--muted); } .orc-ifoot .m b { font-family: var(--mono); font-size: 13px; color: var(--text-emph); font-weight: 700; margin-left: 4px; } .orc-ifoot .sp { flex: 1; } .orc-fil { display: grid; grid-template-columns: 1fr 82px 78px 24px; gap: 8px; align-items: center; margin-bottom: 6px; } .orc-fil input, .orc-fil select { padding: 6px 8px; font-size: 12.5px; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; color: var(--text); } .orc-fil .c { font-family: var(--mono); font-size: 12px; color: var(--text); text-align: right; white-space: nowrap; } .orc-fil .rm { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; } .orc-fil .rm:hover { color: var(--danger); } .orc-drop { border: 1.5px dashed var(--border); border-radius: 10px; padding: 16px; text-align: center; color: var(--muted); font-size: 12.5px; margin-bottom: 8px; } .orc-gsum { border: 1px solid var(--info); background: color-mix(in srgb, var(--info) 8%, transparent); border-radius: 9px; padding: 8px 11px; margin-bottom: 8px; font-size: 12px; } .orc-bar { height: 8px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin: 6px 0 2px; } .orc-bar i { display: block; height: 100%; border-radius: 6px; } .orc-conv { border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; margin-bottom: 11px; } .orc-conv .cn { font-weight: 700; color: var(--text-emph); font-size: 12.5px; margin-bottom: 6px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; } .orc-radio { display: flex; gap: 8px; align-items: flex-start; padding: 6px 3px; cursor: pointer; border-radius: 7px; } .orc-radio:hover { background: var(--surface-2); } .orc-radio .rt { font-size: 12px; color: var(--text); font-weight: 600; } .orc-radio .rd { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.4; } /* ============ EDITOR SHELL (formulário complexo: 2 colunas + resumo vivo) ============ Padrão para formulário com DECISÃO ESTRUTURAL ou mais de ~10 campos (ver ANALISE-FORMULARIOS-UX.md). Drawer = consultar e agir; editor = compor. Empilhamento: a .side (sidebar) está em z-index 50, então o scrim do editor PRECISA passar disso — o .scrim comum (40) deixaria o menu por cima. Picker (40/50) e Dialogo (40/55) renderizam DENTRO do .editor e por isso sobem junto; o Toast (60) e o tour (1200+) continuam acima, como devem. ⚠ NUNCA colocar transform/filter/backdrop-filter/will-change/contain no .editor.sobreposto: qualquer um deles torna o .editor o containing block dos position:fixed filhos e prende o drawer do Picker e o Dialogo dentro da caixa rolável. */ .editor-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 52; } .editor { max-width: 1280px; margin: 0 auto; padding: 10px 10px 40px; } .editor.sobreposto { position: fixed; inset: 3vh 2.5vw; z-index: 53; overflow: auto; background: var(--canvas); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.45); } /* Cabeçalho fixo: as ações moram aqui, não no fim do scroll. */ .ehead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 0 14px; top: 0; background: var(--canvas); z-index: 30; border-bottom: 1px solid var(--border); margin-bottom: 16px; } .editor.sobreposto .ehead { top: -18px; padding-top: 22px; margin-top: -18px; } .ehead h2 { font-size: 18px; color: var(--text-emph); } .ehead .cod { font-family: var(--mono); color: var(--accent); font-weight: 700; font-size: 15px; } .ehead .meta { color: var(--muted); font-size: 12.5px; } .ehead .sp { flex: 1; } /* Fechar o editor. Item de flex NORMAL, no fim do cabeçalho — de propósito NÃO é position:absolute: foi assim que o ✕ do drawer acabou empilhado sobre o ✕ de remover item do card (ver .rm mais acima). */ .ehead .fechar { background: none; border: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 7px; flex: 0 0 auto; } .ehead .fechar:hover { color: var(--text-emph); background: var(--surface-2); } .cols { display: grid; grid-template-columns: 1.65fr 1fr; gap: 16px; align-items: start; } .stick { position: sticky; top: 68px; } /* Seção recolhível: o raro (Referências, Variantes) nasce fechado, com resumo no título. .cbody usa display:none — os filhos ficam no DOM, então o estado dos inputs sobrevive. */ .collap > h3 { margin-bottom: 0; cursor: pointer; user-select: none; } .collap > h3 .cnt { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: auto; } .collap > h3 .chev { color: var(--muted); font-size: 11px; transition: transform .15s; margin-left: 8px; } .collap.open > h3 .chev { transform: rotate(90deg); } .collap .cbody { display: none; margin-top: 12px; } .collap.open .cbody { display: block; } /* Campos em linha. ESCOPADOS sob .editor de propósito: .frow já é usada pela ficha de produção impressa (.ficha .frow) e .sub pela página pública do pedido — regra global aqui quebraria as duas. */ .editor .frow { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .editor .fld { display: flex; flex-direction: column; gap: 4px; } .editor .fld > label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; display: flex; align-items: center; gap: 5px; } /* CORREÇÃO (22/07): este comentário dizia que um seletor de elemento nu venceria `.field input` em todo o app. É FALSO — `input` é (0,0,1) e `.field input` é (0,1,1); a regra de contexto ganha sempre, qualquer que seja a ordem. Foi essa premissa errada que deixou o app sem piso de estilo e fez controles sem wrapper renderizarem com o default do browser. O piso agora existe no topo da seção FORMS; este bloco continua valendo por ser mais específico (tom --canvas em vez de --surface). */ /* DESCENDENTE, não filho: o Picker renderiza `.picker > input`, então com `>` o input dele ficava de fora e saía com o tom da regra base (--surface) ao lado de vizinhos em --canvas. É o mesmo combinador que `.field input` já usava. Seguro porque a guarda de checkbox/radio está no topo. */ .editor .fld input, .editor .fld select, .editor .fld textarea { background: var(--canvas); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; color: var(--text); font-size: 13px; font-family: var(--sans); } .editor .fld input:focus, .editor .fld select:focus, .editor .fld textarea:focus { outline: none; border-color: var(--accent); } .editor .fld input[disabled], .editor .fld select[disabled] { opacity: .45; cursor: not-allowed; } .editor .w-lg { width: 100%; } .editor .w-md { width: 220px; } .editor .w-sm { width: 110px; } .editor .w-xs { width: 84px; } .editor .sub { font-size: 11px; color: var(--muted); line-height: 1.5; } /* Seletor de tipo: reusa .opts/.opt (já usados em Clientes e Pedidos). Só o tom do selecionado é novo. */ .editor .opts { grid-template-columns: repeat(3, 1fr); } .editor .opt.sel { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); } .editor .opt .ot { display: flex; align-items: center; gap: 7px; } .editor .opt.sel .ot { color: var(--accent); } /* Resumo vivo (coluna direita). */ .sumrow { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 13px; } .sumrow + .sumrow { border-top: 1px dashed var(--border); } .sumrow .l { color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sumrow .v { font-family: var(--mono); font-weight: 700; color: var(--text-emph); white-space: nowrap; } .sumrow.big .v { font-size: 19px; } .sumrow.big .l { color: var(--text); font-weight: 600; } /* Aviso colorido. O .note existente é a versão neutra tracejada; esta carrega intenção. */ .notebox { border-radius: 10px; padding: 10px 12px; font-size: 12px; margin-top: 10px; line-height: 1.55; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); } .notebox b { color: var(--text-emph); } .notebox.ac { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, transparent); } .notebox.ig { border-color: color-mix(in srgb, var(--info) 45%, var(--border)); background: color-mix(in srgb, var(--info) 7%, transparent); } .notebox.wn { border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); background: color-mix(in srgb, var(--warning) 8%, transparent); color: var(--warning); } .notebox.wn b { color: var(--warning); } /* Banner "pré-voo" do motor de preço (spec-precheck-motor). Card com borda-esquerda accent; amarela quando só há avisos (nenhuma pendência ⛔ essencial). Some sozinho — o componente nem renderiza sem pendência. */ .precheck { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; } .precheck.avisos { border-left-color: var(--warning); } .precheck h4 { font-size: 13px; color: var(--text-emph); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .precheck h4 .tag { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 400; } .pc-item { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; } .pc-item + .pc-item { border-top: 1px dashed var(--border); } .pc-ico { flex: 0 0 auto; font-size: 14px; line-height: 1.4; } .pc-tt { font-weight: 600; font-size: 13px; } .pc-sub { font-weight: 400; font-size: 11.5px; color: var(--muted); } .pc-why { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 2px; } /* Chips dos índices de venda (imposto/reserva/…) — toggle % sobre o preço na calculadora (IndicesChips). */ .chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; } .chip { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 99px; padding: 5px 12px; font-size: 12px; cursor: pointer; user-select: none; } .chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .chip.on { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); } .chip b { font-family: var(--mono); font-weight: 600; } /* Margem bruta × líquida lado a lado quando há índices (ResumoCmv / SimulacaoCanal). */ .mgpair { display: flex; gap: 10px; margin-top: 8px; } .mgpair .mgbox { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; } .mgpair .mgbox .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); } .mgpair .mgbox .n { font-family: var(--mono); font-size: 16px; font-weight: 700; margin-top: 2px; } .mgpair .mgbox .n.success { color: var(--success); } .mgpair .mgbox .n.warning { color: var(--warning); } .mgpair .mgbox .n.danger { color: var(--danger); } /* Imagem compacta nos dados básicos. */ .imgrow { display: flex; gap: 12px; align-items: center; } .thumb { width: 72px; height: 72px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; overflow: hidden; } .thumb img { width: 100%; height: 100%; object-fit: cover; } /* 900px é o breakpoint do app (onde a sidebar recolhe sozinha) — o protótipo usava 980, mas dois cortes a 80px de distância produziriam um degrau visual. */ @media (max-width: 900px) { .cols { grid-template-columns: 1fr; } .stick { position: static; } .editor.sobreposto { inset: 0; border-radius: 0; border: none; } .editor.sobreposto .ehead { top: 0; margin-top: 0; padding-top: 14px; } .editor .opts { grid-template-columns: 1fr; } } /* Linha de histórico no resumo do editor (simulações salvas da Calculadora). */ .hrow { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px dashed var(--border); font-size: 12.5px; border-radius: 6px; } .hrow:last-child { border-bottom: none; } .hrow:hover { background: var(--surface-2); } .hrow.on { background: color-mix(in srgb, var(--accent) 9%, transparent); } .hrow .hn { flex: 1; min-width: 0; color: var(--text-emph); font-weight: 600; cursor: pointer; } .hrow .hd { color: var(--muted); font-size: 11px; font-family: var(--mono); white-space: nowrap; } /* Configurações — hub de cards + breadcrumb das subpáginas (Modelo C). Nomes próprios (.confcard) para não colidir com o .card do board. Grid auto-fill empilha sozinho no mobile. */ .confhub { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .confcard { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px; cursor: pointer; transition: border-color .12s, transform .12s; text-decoration: none; display: block; } .confcard:hover { border-color: var(--accent); transform: translateY(-1px); } .confcard .ci { font-size: 22px; margin-bottom: 10px; } .confcard h4 { font-size: 14px; color: var(--text-emph); margin-bottom: 5px; } .confcard p { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; } .confcard .cm { font-size: 11px; color: var(--muted); font-family: var(--mono); } .crumbbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 13px; } .crumbbar .bk { color: var(--accent); font-weight: 600; text-decoration: none; } .crumbbar .sep { color: var(--muted); } .crumbbar b { color: var(--text-emph); } /* Estoque/Financeiro robustez — abas, ledger transparente e drawer type-aware. .seg/.ct = contador no chip da aba; tr.est = movimento estornado (esmaecido, riscado); tr.out = compra com custo unitário fora da curva (outlier); .clr = limpar filtros; .itemtbl = tabela compacta de itens da nota; .kv .l/.v já existem no reset acima. */ .seg .ct { font-family: var(--mono); font-size: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 0 6px; margin-left: 6px; } tr.est td { opacity: .5; } tr.est td.desc { text-decoration: line-through; } tr.out td { background: color-mix(in srgb, var(--danger) 9%, transparent); } .listbar .clr { margin-left: auto; color: var(--accent); cursor: pointer; font-weight: 600; background: none; border: none; font-size: 12px; } .itemtbl { width: 100%; border-collapse: collapse; } .itemtbl th { font-size: 10px; padding: 6px 8px; } .itemtbl td { padding: 8px; font-size: 12.5px; } .itemtbl .mini { font-size: 11px; } /* ============ MANUAL DO MAKER (/ajuda hub + capítulos) ============ */ /* Componentes em Components/Shared/Manual/*. Prefixo mnl-. Só apresentação — sem estado, sem query. Tokens do tema (accent/success/warning) mantêm o manual coerente em Nord e Amber. */ .mnl-lead { font-size: 15px; color: var(--muted); line-height: 1.6; margin: 4px 0 18px; max-width: 720px; } /* hub — busca + grupos + cards */ .mnl-busca { margin: 10px 0 6px; } .mnl-busca input { width: 100%; max-width: 430px; } .mnl-grupo { margin-top: 24px; } .mnl-grupo-t { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .mnl-grupo-t::after { content: ""; flex: 1; height: 1px; background: var(--border); } .mnl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .mnl-card { border: 1px solid var(--border); border-radius: 11px; background: var(--surface); padding: 14px 16px; cursor: pointer; text-decoration: none; color: var(--text); display: block; transition: border-color .15s; } .mnl-card:hover { border-color: var(--accent); } .mnl-card b { display: block; color: var(--text-emph); font-size: 13.5px; margin-bottom: 4px; } .mnl-card p { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.5; } .mnl-selos { margin-top: 9px; display: flex; gap: 6px; } .mnl-selo { font-size: 9.5px; font-weight: 700; border-radius: 10px; padding: 2px 8px; letter-spacing: .4px; } .mnl-selo.min { background: var(--border); color: var(--muted); font-family: var(--mono); } .mnl-selo.video { background: var(--warning); color: #231905; } @media (max-width: 900px) { .mnl-cards { grid-template-columns: 1fr; } } /* capítulo — breadcrumb + navegação */ .mnl-crumb { font-size: 12.5px; color: var(--muted); margin-bottom: 2px; } .mnl-crumb a { color: var(--muted); text-decoration: none; cursor: pointer; } .mnl-crumb a:hover { color: var(--accent); } .mnl-crumb b { color: var(--text); } .mnl-cap h2 { font-size: 18px; color: var(--text-emph); margin: 34px 0 12px; } .mnl-cap h3 { font-size: 15px; color: var(--text-emph); margin: 26px 0 10px; } .mnl-cap p { line-height: 1.65; margin: 0 0 13px; font-size: 14px; } .mnl-prox-ant { display: flex; justify-content: space-between; gap: 14px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border); } .mnl-prox-ant a { flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; text-decoration: none; font-size: 12.5px; color: var(--muted); } .mnl-prox-ant a b { display: block; color: var(--accent); font-size: 13.5px; margin-top: 2px; } .mnl-prox-ant a:hover { border-color: var(--accent); } .mnl-prox-ant a.d { text-align: right; } /* caixa CONCEITO */ .mnl-conceito { border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; background: var(--surface); padding: 16px 20px; margin: 16px 0; } .mnl-conceito .r { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .mnl-conceito p:last-child { margin-bottom: 0; } /* callout (dica / atenção / regra de ouro) */ .mnl-callout { border-radius: 10px; padding: 13px 17px 13px 44px; margin: 15px 0; font-size: 13px; line-height: 1.6; position: relative; border: 1px solid var(--border); background: var(--surface); } .mnl-callout::before { position: absolute; left: 14px; top: 12px; font-size: 15px; } .mnl-callout.dica { border-left: 4px solid var(--success); } .mnl-callout.dica::before { content: "💡"; } .mnl-callout.atencao { border-left: 4px solid var(--warning); } .mnl-callout.atencao::before { content: "⚠️"; } .mnl-callout.regra { border-left: 4px solid var(--accent); } .mnl-callout.regra::before { content: "📌"; } .mnl-callout b { color: var(--text-emph); } /* passos numerados com linha vertical */ .mnl-passos { counter-reset: p; margin: 18px 0; } .mnl-passo { display: flex; gap: 15px; position: relative; padding-bottom: 20px; } .mnl-passo:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; width: 2px; background: var(--border); } .mnl-passo .n { counter-increment: p; flex-shrink: 0; width: 31px; height: 31px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--mono); font-size: 13px; z-index: 1; } .mnl-passo .n::before { content: counter(p); } .mnl-passo h4 { font-size: 14px; color: var(--text-emph); margin: 3px 0 4px; } .mnl-passo p { font-size: 13px; margin: 0; line-height: 1.55; } .mnl-ir { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--accent); text-decoration: none; border: 1px solid var(--border); border-radius: 8px; padding: 5px 12px; } .mnl-ir:hover { border-color: var(--accent); } .mnl-ir::after { content: "↗"; } /* mapa em raias (MapaProcesso) */ .mnl-mapa { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 16px 18px; margin: 18px 0; overflow-x: auto; } .mnl-mapa .tm { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .mnl-lane { display: flex; align-items: center; margin: 8px 0; min-width: 760px; } .mnl-lane .rl { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); border-right: 2px solid var(--border); padding: 4px 2px; margin-right: 12px; min-height: 52px; text-align: center; flex-shrink: 0; } .mnl-no { border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface-2); padding: 7px 12px; font-size: 11.5px; font-weight: 600; color: var(--text-emph); text-align: center; flex-shrink: 0; min-width: 88px; opacity: .55; } .mnl-no small { display: block; font-weight: 400; font-size: 9.5px; color: var(--muted); margin-top: 1px; } .mnl-no.aqui { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .mnl-no.aqui::after { content: "você está aqui"; display: block; font-size: 8.5px; color: var(--accent); font-weight: 700; letter-spacing: .6px; margin-top: 2px; text-transform: uppercase; } .mnl-seta { flex-shrink: 0; width: 28px; height: 2px; background: var(--border); position: relative; margin: 0 2px; } .mnl-seta::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: var(--border); } /* vídeo (embed 16:9) */ .mnl-video { border: 1px solid var(--border); border-radius: 11px; background: var(--surface); margin: 16px 0 22px; overflow: hidden; } .mnl-video .frame { position: relative; width: 100%; aspect-ratio: 16 / 9; } .mnl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .mnl-video .leg { font-size: 12px; color: var(--muted); padding: 8px 14px; } /* tabela "quem liga com quê" (capítulo vínculos) */ .mnl-tabela { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; } .mnl-tabela th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); } .mnl-tabela td { padding: 9px 10px; border-bottom: 1px solid var(--border); line-height: 1.5; vertical-align: top; } .mnl-tabela td b { color: var(--text-emph); } /* ============ MOBILE M1 — fundação touch ============ */ /* Contrato de breakpoints (spec docs/spec-mobile-m1-fundacao-touch.md, 31/07/2026): ≤640px = TELEFONE — tab bar inferior + folha "Mais", drawer→bottom sheet, header compacto, tabela→card. 641–900px = TABLET/estreito — sidebar mini + flyout de HOVER (comportamento ATUAL; NÃO mexer). >900px = DESKTOP — intocável. Todo o CSS mobile desta spec vive NESTE bloco no fim do arquivo (minimiza conflito com os estilos do manual, mnl-*). A densidade de toque fica em @media(pointer:coarse) — vale em QUALQUER largura (telefone, tablet, laptop com tela sensível), independente do corte de layout: no mouse (pointer:fine) nada muda. */ /* ---- Densidade de toque (qualquer ponteiro grosso) ------------------------------------------------- */ @media (pointer: coarse) { /* Inputs ≥16px matam o zoom automático que o iOS aplica ao focar controle com fonte <16px. Os seletores de CONTEXTO (.field/.bomrow/.editor .fld/… até especificidade (0,2,1)) vencem a guarda :where() do reset (0,0,1) — por isso repetimos cada contexto aqui; senão o input estilizado ficaria em 13/12,5px e o zoom voltaria. Estilo da casa (ver reset em FORMS): especificidade, não !important. */ input:where(:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color])), select, textarea, .field input, .field select, .field textarea, .bomrow input, .bomrow select, .bomvar > input, .bomvar > select, .orc-fil input, .orc-fil select, .addinline input, .addinline select, .editor .fld input, .editor .fld select, .editor .fld textarea, .pager select, .search, .listbar select, .listbar input { font-size: 16px; } /* Alvos de toque ≥44px via PADDING (min-height), nunca por font-size. */ .btn, .seg button, .pager .btn, .addrow, .bomdel, .drawer .x { min-height: 44px; } .drawer .x { min-width: 44px; } label.check { min-height: 44px; } /* a LINHA inteira vira alvo; o quadradinho segue pequeno */ } /* ---- Etapa 3: tab bar + folha "Mais". Base = ESCONDIDA; só o telefone (≤640px) liga. ---------------- */ .tabbar, .tabscrim, .tabsheet { display: none; } @keyframes m1-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes m1-scrim-in { from { opacity: 0; } to { opacity: 1; } } /* ---- ≤640px: TELEFONE ------------------------------------------------------------------------------- */ @media (max-width: 640px) { /* Reserva a faixa da tab bar no rodapé do conteúdo, com safe-area do iOS. */ .content { padding: 7px 7px calc(80px + env(safe-area-inset-bottom, 0px)); } /* A sidebar cede lugar à tab bar (entre 641–900px a sidebar mini continua — NÃO mexer). */ .side { display: none; } /* Tab bar fixa no rodapé. z-index 30: o scrim do drawer (40) a cobre quando um drawer abre. */ .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(64px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--border); } .tabbar .tab { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); text-decoration: none; font-size: 9.5px; font-weight: 600; font-family: var(--sans); background: none; border: none; cursor: pointer; } .tabbar .tab .i { font-size: 19px; line-height: 1; } .tabbar .tab.active, .tabbar .tab.on { color: var(--accent); } .tabbar .tab.active .i, .tabbar .tab.on .i { transform: translateY(-1px); } .tabbar .tab .tabbadge { position: absolute; top: 9px; left: calc(50% + 9px); width: 7px; height: 7px; border-radius: 50%; background: var(--danger); } /* Folha "Mais" — bottom sheet (mesmo padrão da Etapa 4). scrim/sheet acima da tab bar. */ .tabscrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 48; animation: m1-scrim-in .18s ease; } .tabsheet { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 49; max-height: 88%; overflow-y: auto; background: var(--canvas); border: 1px solid var(--border); border-bottom: none; border-radius: 20px 20px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); animation: m1-sheet-up .22s ease; } .tabsheet .alca { width: 44px; height: 5px; border-radius: 3px; background: var(--border); margin: 4px auto 8px; flex-shrink: 0; } .tabsheet .navgrp { padding: 12px 6px 4px; } .maisitem { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 8px; border-radius: 10px; color: var(--text); text-decoration: none; text-align: left; background: none; border: none; cursor: pointer; font-family: var(--sans); font-size: 14.5px; font-weight: 500; } .maisitem:active { background: var(--surface-2); } .maisitem.active { color: var(--accent); background: var(--surface-2); } .maisitem .ic { width: 24px; text-align: center; flex-shrink: 0; opacity: .85; } .maisitem .ml { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .maisitem .ml small { font-size: 11px; color: var(--muted); font-weight: 400; } .maisitem .badge { margin-left: auto; font-family: var(--mono); font-size: 10px; background: var(--danger); color: #fff; border-radius: 20px; padding: 1px 6px; } .maisitem.sm .ic { color: var(--accent); } .maisform { margin: 0; width: 100%; } .maisdiv { border-top: 1px solid var(--border); margin: 8px 0; } .maisfechar { width: 100%; min-height: 48px; margin-top: 6px; background: transparent; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--sans); } } /* ---- Etapa 4: drawer → bottom sheet · Etapa 5: header compacto (telefone) -------------------------- */ @media (max-width: 640px) { /* Etapa 4 — o MESMO .drawer (mesmos usos, só CSS) vira folha de baixo: full-width, colado no rodapé, cantos arredondados em cima, alça visual, safe-area no fundo. O .scrim (z40) fica inalterado. */ .drawer { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; height: auto; max-height: 92%; border-left: none; border-top: 1px solid var(--border); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.3); padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px)); animation: m1-sheet-up .22s ease; } .drawer::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--border); margin: -8px auto 12px; } .drawer .x { top: 12px; right: 12px; } /* alvo ≥44px já vem do bloco pointer:coarse */ /* Etapa 4b — editor sobreposto (já full-screen ≤900px): o ehead já tem flex-wrap; a meta some no telefone para não competir com título + ação primária + ✕. */ .editor.sobreposto .ehead .meta { display: none; } /* Etapa 5 — header compacto: título + PrimaryAction; crumb some; altura menor. O mecanismo HeaderState / botão plano do MainLayout NÃO muda. */ .top { height: 48px; padding: 0 14px; } .top .crumb { display: none; } } /* ---- Etapa 6: tabela → card (Variante A, fallback genérico). Só ≤640px: com a classe inerte no desktop, `table.stack` = tabela normal (mesmas regras globais de `table`), diff zero. Variante B (card curado por tela) é M2, fora desta spec. Piloto: Lista da Produção. -------------------------- */ @media (max-width: 640px) { table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; } table.stack thead { display: none; } table.stack tr { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; padding: 6px 0; } table.stack td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 14px; border: none; font-size: 13px; } table.stack td::before { content: attr(data-label); color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; flex-shrink: 0; } /* Célula de ações (quando a tabela tiver): sem rótulo, ações embaixo com wrap. */ table.stack td.acoes { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; flex-wrap: wrap; justify-content: flex-start; } table.stack td.acoes::before { display: none; } } @media (prefers-reduced-motion: reduce) { .tabsheet, .tabscrim, .drawer { animation: none; } /* sem slide/fade dos sheets */ } /* ============ MOBILE M2 — fluxos do maker ============ */ /* Etapa 1 — board carrossel + "mover para ▸". Só ≤640px (ou classes inertes no desktop): o drag do board segue intacto >640px. */ .mv { display: none; } /* chip "mover para ▸" — só no telefone; no desktop o caminho é o drag */ @media (max-width: 640px) { .board { scroll-snap-type: x mandatory; } /* uma coluna por vez (era proximity) */ .col { width: 86vw; } /* a próxima coluna espia na borda */ .mv { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 20px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: var(--sans); } .mv:active { border-color: var(--accent); color: var(--accent); } } /* StatusSheet ("mover para ▸") — é um drawer/sheet: vale em qualquer largura (vira folha ≤640px pela M1). */ .ss-lista { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; } .ss-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 12px; font-size: 14.5px; font-weight: 600; cursor: pointer; font-family: var(--sans); text-align: left; } .ss-item:active { border-color: var(--accent); } .ss-item .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .ss-item .ss-nm { flex: 1; } .ss-item.atual { opacity: .55; cursor: default; } .ss-item .ss-aqui { font-size: 11px; color: var(--muted); font-weight: 400; } .ss-extra { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 12px; } .acao-perigo { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 14px; background: transparent; border: 1px solid var(--border); border-radius: 12px; color: var(--danger); font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--sans); text-align: left; } .acao-perigo:active { border-color: var(--danger); } /* Etapa 2 — conclusão de OP no toque: o rodapé do drawer empilha full-width no telefone (o botão "Concluir e congelar CMV" fica largo; o ✕/Cancelar acima). Os inputmode=decimal vão no markup. */ @media (max-width: 640px) { .dfoot { flex-direction: column; } .dfoot > * { width: 100%; } } /* Etapa 3 — Calculadora Variante T: strip de resultado sticky + acordeão; ações secundárias no "⋯". */ .mstrip { display: none; } /* strip só ≤640px */ .acoes-full { display: contents; } /* desktop: os botões seguem itens de flex do ehead (com gap) */ .acoes-mais { display: none; } /* "⋯" só no telefone */ @media (max-width: 640px) { .mstrip { display: block; position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; } .mstrip-bar { display: flex; align-items: stretch; cursor: pointer; } .mstrip-cell { flex: 1; padding: 8px 4px; text-align: center; border-left: 1px solid var(--border); } .mstrip-cell:first-child { border-left: none; } .mstrip-cell .l { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); } .mstrip-cell .v { font-family: var(--mono); font-size: 13.5px; font-weight: 700; color: var(--text-emph); margin-top: 2px; } .mstrip-cell .v.success { color: var(--success); } .mstrip-cell .v.warning { color: var(--warning); } .mstrip-cell .v.danger { color: var(--danger); } .mstrip-chev { display: flex; align-items: center; padding: 0 8px; color: var(--muted); font-size: 12px; } .mstrip-body { border-top: 1px solid var(--border); padding: 10px 12px; max-height: 62vh; overflow-y: auto; } .cols.com-strip .stick { display: none; } /* o resumo vive no acordeão do strip */ .acoes-full { display: none; } .acoes-mais { display: inline-flex; align-items: center; } } /* Etapa 4 — Visão do dia: Agenda cabe em 390px; "✓ concluir" ≥44px no telefone; widgets top-5 + "ver tudo". */ .agnavbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .agnav-titulo { cursor: default; min-width: 170px; } /* estável no desktop (era min-width inline) */ .wmais { font-size: 12px; color: var(--accent); cursor: pointer; font-weight: 600; padding: 7px 2px 2px; } .wmais:hover { text-decoration: underline; } @media (max-width: 640px) { .agnavbar .seg { flex: 1 1 100%; } /* cada seg na sua linha — não estoura */ .agnav-titulo { min-width: 0; flex: 1; text-align: center; } .agconcluir { min-height: 44px; display: inline-flex; align-items: center; } } /* ============ MOBILE M3 — PWA + herança ============ */ /* Etapa 3 — KPIs do dashboard no telefone: 2×2 + exceção (.kpi.alert) em linha cheia no topo. !important no .kpicards porque TODO uso tem grid-template-columns INLINE (Home repeat 3; Financeiro/Funil/Imobilizado repeat 4) que venceria a regra normal — é a única forma de responsivizar sem editar 5 páginas. `order:-1` põe a exceção no topo SEM reordenar o markup (desktop intocado). Só ≤640px. Tabelas do dashboard ficam para uso real (fora desta spec). */ @media (max-width: 640px) { .kpicards { grid-template-columns: 1fr 1fr !important; } .cards-grid { grid-template-columns: 1fr 1fr; } .kpicards .kpi.alert { grid-column: 1 / -1; order: -1; } } /* Ficha (Calculadora/produto) no telefone: cada linha quebra em DUAS — o seletor (Picker + lupa) em cima, largura total; quantidade, preço e ✕ embaixo. Só ≤640px e só nas linhas .bomficha: as .bomrow com grid INLINE (conclusão de OP, variação) e o desktop ficam intocados. */ @media (max-width: 640px) { .bomficha { grid-template-columns: 1fr auto auto; } .bomficha > :first-child { grid-column: 1 / -1; } }