/* /ai-workspace.css */ /* Philippe: widgets independentes, controles de vidro e geometria compartilhada. */ :root { --ws-ink:var(--label,#323200); --ws-secondary:var(--label3,#9C8D80); --ws-material:color-mix(in srgb,var(--surface,#FFFFFF) 88%,transparent); --ws-control:color-mix(in srgb,var(--surface2,#F7F3EE) 88%,transparent); --ws-soft:color-mix(in srgb,var(--surface2,#F7F3EE) 7.5%,transparent); --ws-shadow:0 12px 38px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent),0 2px 8px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 7%,transparent); --ws-accent:var(--verde,#11994A); --ws-radius:26px; --ws-top:94px; } body.dark { --ws-ink:var(--label,#323200); --ws-secondary:var(--surface,#FFFFFF); --ws-material:color-mix(in srgb,var(--label,#323200) 93%,transparent); --ws-control:color-mix(in srgb,var(--surface2,#F7F3EE) 90%,transparent); --ws-soft:color-mix(in srgb,var(--surface2,#F7F3EE) 9%,transparent); --ws-shadow:0 14px 42px color-mix(in srgb,var(--page,#F7F5F1) 28%,transparent); --ws-accent:var(--verde,#11994A); } body.ai-workspace-on { padding-top:0; } body.ai-workspace-on main,body.ai-workspace-on .top { transform:none!important; } body.ai-workspace-on .top { top:10px; } body.ai-workspace-on::after { opacity:.3;filter:blur(22px);animation:none; } body.ai-workspace-on .aiframe { display:none!important; } /* 1.26.0: o desfoque só entra quando há cards. Ativar (só o ícone) e falar (o campo) deixam a tela nítida. */ body.ai-workspace-on[data-hub-aiz="cheia"]:is(#hub-esp.hub-esp.hub-esp,*) main { filter:blur(7px) saturate(.8); } body.ai-workspace-on[data-hub-aiz="vazia"]:is(#hub-esp.hub-esp,*) main { filter:none; } /* 1.27.0: janela sob o Cérebro (diagnóstico, calibração) também desfoca o fundo, mesmo sem cards. */ body.ai-workspace-on[data-hub-dialogo~="sob-cerebro"]:is(dialog.hub-esp,*) main { filter:blur(7px) saturate(.8); } body.ai-workspace-on .top .right { max-width:100%; } #aiz.ws-root { position:fixed;inset:var(--ws-top) 24px calc(18px + var(--ws-viewport-inset,0px));width:auto;max-width:none;max-height:none;margin:0;padding:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;z-index:1260;overflow:visible;animation:none;color:var(--ws-ink);pointer-events:none; } #aiz.ws-root.hidden { display:none!important; } #aiz.ws-root > * { min-width:0;min-height:0; } #aiz.ws-root.ws-empty { grid-template-rows:auto;align-content:start;top:calc(var(--ws-top) + 12px); } #aiz.ws-root .ws-board { display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;min-height:0;pointer-events:none; } #aiz.ws-root.ws-empty .ws-board { display:none; } .ws-toolbar { display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:40px;pointer-events:auto; } .ws-topic { display:flex;align-items:center;gap:9px;min-width:0;padding:8px 15px;background:var(--ws-control);border-radius:24px;box-shadow:var(--ws-shadow);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);font-size:var(--f-subhead,0.9375rem); } .ws-topic strong { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw; } .ws-topic i { width:7px;height:7px;background:var(--ws-accent);border-radius:50%;flex:none; } .ws-toolbar-actions,.ws-pager { display:flex;align-items:center;gap:6px;flex:none; } .ws-pager span { min-width:45px;text-align:center;font-size:calc(0.8125rem * var(--dt));color:var(--ws-secondary); } .ws-grid { display:grid;grid-template-columns:repeat(var(--ws-cols,2),minmax(0,1fr));grid-template-rows:repeat(var(--ws-rows,1),minmax(0,1fr));gap:16px;min-height:0;align-items:stretch;pointer-events:none; } .ws-widget { display:flex;flex-direction:column;min-width:0;min-height:0;max-height:100%;margin:0;padding:20px;border:0!important;border-radius:var(--ws-radius);background:var(--ws-material);color:var(--ws-ink);box-shadow:var(--ws-shadow)!important;backdrop-filter:blur(30px) saturate(135%);-webkit-backdrop-filter:blur(30px) saturate(135%);overflow:hidden;pointer-events:auto;isolation:isolate; } .ws-widget[aria-current=true] .ws-widget-title::before { content:"";display:inline-block;width:7px;height:7px;margin-right:8px;vertical-align:middle;border-radius:50%;background:var(--ws-accent); } .ws-widget-header { display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;flex:none; } .ws-widget-heading { min-width:0;flex:1; } .ws-eyebrow { font-size:max(0.6875rem, calc(0.6875rem * var(--dt)));line-height:1.4;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--ws-secondary);margin-bottom:4px; } .ws-widget-title { font-size:clamp(1.125rem,1.5vw,1.5rem);font-weight:750;line-height:1.2;letter-spacing:-.025em;margin:0;overflow-wrap:anywhere; } .ws-widget-tools { display:flex;gap:3px;flex:none; } .ws-widget-body { min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--label3,#9C8D80) 28%,transparent) transparent; } .ws-widget-body:focus-visible { outline:2px solid var(--ws-accent);outline-offset:-3px;border-radius:12px; } .ws-widget p { margin:0 0 12px;line-height:1.5;font-size:var(--f-body,1.0625rem);overflow-wrap:anywhere; } .ws-widget .ws-notice { font-size:max(0.6875rem, calc(0.75rem * var(--dt)));color:var(--ws-secondary);margin:12px 0 0;line-height:1.45; } .ws-widget-footer { margin-top:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:none; } .ws-btn { appearance:none;border:0!important;outline:none;box-shadow:var(--ws-shadow);background:var(--ws-control);color:var(--ws-ink);border-radius:24px;padding:9px 14px;min-height:36px;font-family:inherit;font-size:var(--f-subhead,0.9375rem);font-weight:600;line-height:1.2;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);white-space:normal; } @media (hover:hover){.ws-btn:hover{ filter:brightness(.97); }} .ws-btn:active { transform:scale(.97); } .ws-btn:disabled { opacity:.45;cursor:default; } .ws-btn.ws-icon { width:34px;height:34px;min-height:34px;padding:8px;flex:none;box-shadow:none;background:var(--ws-soft); } .ws-btn svg { width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none; } .ws-btn.ws-primary { background:color-mix(in srgb,var(--verde,#11994A) 80%,var(--label,#323200));color:var(--acao-txt,#FFFFFF); } body.dark .ws-btn.ws-primary { background:var(--verde,#11994A);color:var(--label,#323200); } .ws-btn:focus-visible,.ws-controls button:focus-visible,.ws-widget select:focus-visible,.ws-widget input:focus-visible { outline:2px solid var(--ws-accent)!important;outline-offset:3px; } .ws-controls { display:grid;justify-items:center;gap:12px;min-width:0;pointer-events:none; } .ws-controls > * { pointer-events:auto; } #aiz.ws-root .aisug { width:100%;display:flex;justify-content:center;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:2px 0;max-height:none;min-height:0;overflow:visible!important; } #aiz.ws-root .aisug .pill { display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0;min-height:38px;margin:0;padding:8px 14px;border:0!important;box-shadow:var(--ws-shadow)!important;border-radius:26px;color:var(--ws-ink);background:var(--ws-control);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);font-size:var(--f-subhead,0.9375rem);line-height:1.2;white-space:normal;text-align:left;overflow-wrap:anywhere; } #aiz.ws-root .aisug .pill .si { display:grid;place-items:center;width:24px;height:24px;min-width:24px;border-radius:8px;background:var(--ws-soft);color:var(--ws-accent); } #aiz.ws-root .aisug .pill svg { width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8; } .ws-composer { display:flex;align-items:center;gap:10px;width:min(720px,100%);pointer-events:auto;min-width:0; } .ws-composer .ws-input { display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:54px;padding:6px 8px 6px 14px;border:0!important;outline:none!important;border-radius:32px;background:var(--ws-control)!important;box-shadow:var(--ws-shadow)!important;backdrop-filter:blur(32px) saturate(145%);-webkit-backdrop-filter:blur(32px) saturate(145%); } .ws-composer .ws-input::before,.ws-composer .ws-input::after { content:none!important;display:none!important; } .ws-composer .ws-input:focus-within { box-shadow:0 12px 40px color-mix(in srgb,var(--d-laranja,#F57A1C) 19%,transparent)!important; } .ws-composer #aiinput { font-family:inherit;font-size:var(--f-body,1.0625rem);color:var(--ws-ink)!important;background:transparent!important;box-shadow:none!important;border:0!important;outline:none!important;min-width:0;min-height:32px;width:100%;flex:1;padding:0; } .ws-composer #aiinput::placeholder { color:var(--ws-secondary)!important;opacity:1; } .ws-composer .aiorb2 { flex:none;width:26px;height:26px; } .ws-composer .ws-close { background:var(--ws-control);width:36px;height:36px; } /* A busca participa do fluxo para nunca encobrir controles quando a barra quebra. */ .ws-filters { display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 12px; } .ws-filters button,.ws-filters select,.ws-filters input { font-family:inherit;font-size:max(0.6875rem, calc(0.75rem * var(--dt)));line-height:1.3;padding:7px 10px;border:0;border-radius:16px;min-height:32px;max-width:100%;background:var(--ws-soft);color:var(--ws-ink); } .ws-filters button { cursor:pointer; } .ws-filters button[aria-pressed=true] { background:var(--ws-accent);color:var(--acao-txt,#FFFFFF); } body.dark .ws-filters button[aria-pressed=true] { color:var(--label,#323200); } .ws-filter-detail { display:flex;flex-wrap:wrap;gap:8px;width:100%;padding-top:5px; } .ws-filter-detail label { display:flex;align-items:center;gap:5px;font-size:max(0.6875rem, calc(0.75rem * var(--dt)));color:var(--ws-secondary); } .ws-comparison-controls { display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;padding:8px 0 0; } /* Aproveita a linha de filtros quando os dois periodos cabem lado a lado. */ .ws-widget:has(.ws-comparison-pair) .ws-comparison-controls { width:auto;padding-top:0; } .ws-comparison-controls > label { display:flex;align-items:center;gap:6px;font-size:max(0.6875rem, calc(0.75rem * var(--dt)));color:var(--ws-secondary); } .ws-presentation { display:flex;gap:4px;flex-wrap:wrap; } .ws-comparison-context { margin:0 0 14px;font-size:calc(0.8125rem * var(--dt));font-weight:650;line-height:1.5; } .ws-comparison-context > span { font-weight:400;color:var(--ws-secondary); } .ws-comparison-context p { margin:8px 0;font-size:calc(0.8125rem * var(--dt)); } .ws-comparison-pair { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px;align-items:start;padding:3px; } .ws-comparison-card { display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:center;min-width:0;padding:16px;border-radius:20px;background:var(--ws-control);box-shadow:0 3px 14px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 8%,transparent); } .ws-comparison-card > :not(h3):not(.ws-comparison-date) { grid-column:1/-1; } .ws-comparison-card h3 { font-size:calc(1.0625rem * var(--dt));line-height:1.3;margin:0; } .ws-comparison-date { color:var(--ws-secondary);font-size:calc(0.8125rem * var(--dt));margin:0; } .ws-comparison-card .ws-metrics { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:8px; } .ws-comparison-card .ws-metric strong { font-size:calc(1.5rem * var(--dt)); } .ws-comparison-card .ws-chart { height:190px;margin:8px 0; } .ws-comparison-card .ws-chart-legend { margin:4px 0; } .ws-comparison-card .ws-chart-legend button { min-height:44px; } .ws-comparison-card .ws-chart-readout { margin:2px 0; } .ws-comparison-card > .ws-notice { margin-top:6px; } /* O indicador principal compartilha o cabecalho, preservando legenda e leitura do grafico. */ .ws-comparison-card:has(> .ws-metrics > .ws-metric:only-child) > h3 { grid-column:1;grid-row:1; } .ws-comparison-card:has(> .ws-metrics > .ws-metric:only-child) > .ws-comparison-date { grid-column:1;grid-row:2; } .ws-comparison-card:has(> .ws-metrics > .ws-metric:only-child) > .ws-metrics { grid-column:2;grid-row:1/3;grid-template-columns:minmax(0,1fr);margin:0;text-align:right; } .ws-comparison-card:has(> .ws-metrics > .ws-metric:only-child) > .ws-notice { grid-row:3; } .ws-secondary-metrics { margin:12px 0; } .ws-secondary-metrics > summary { cursor:pointer;min-height:36px;line-height:1.4;font-size:calc(0.8125rem * var(--dt));font-weight:600; } .ws-secondary-metrics > summary:focus-visible { outline:2px solid var(--ws-accent);outline-offset:3px; } .ws-secondary-metrics[open] > summary { margin-bottom:10px; } .ws-widget:has(.ws-comparison-pair) { max-width:none; } .ws-grid:has(.ws-comparison-pair):has(> .ws-widget:only-child) { max-width:1300px; } .ws-report-items details { padding:10px 0;border-bottom:1px solid var(--ws-soft); } .ws-report-items summary { cursor:pointer;min-height:36px;line-height:1.4;font-size:calc(0.875rem * var(--dt));overflow-wrap:anywhere; } .ws-report-items summary:focus-visible { outline:2px solid var(--ws-accent);outline-offset:3px; } .ws-fixed-unit { font-size:max(0.6875rem, calc(0.75rem * var(--dt)));color:var(--ws-secondary); } @media(max-width:760px) { .ws-comparison-pair { grid-template-columns:minmax(0,1fr);gap:12px; }.ws-comparison-card { padding:14px; }.ws-presentation button { min-height:40px; } } .ws-metrics { display:grid;grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:14px 18px;margin-bottom:16px; } .ws-metric { min-width:0; } .ws-metric span { display:block;font-size:max(0.6875rem, calc(0.75rem * var(--dt)));color:var(--ws-secondary);line-height:1.35; } .ws-metric strong { display:block;font-size:clamp(1.4375rem,2.15vw,2.125rem);line-height:1.2;font-weight:750;letter-spacing:-.04em;margin:3px 0;overflow-wrap:anywhere; } .ws-metric small { font-size:max(0.6875rem, calc(0.6875rem * var(--dt)));color:var(--ws-secondary); } .ws-chart { position:relative;min-height:180px;height:220px;margin:12px 0; } .ws-chart canvas { width:100%!important;height:100%!important; } .ws-chart-readout { font-size:max(0.6875rem, calc(0.75rem * var(--dt)));color:var(--ws-secondary);min-height:18px;margin:5px 0; } .ws-chart-legend { display:flex;gap:10px;flex-wrap:wrap;margin:8px 0; } .ws-chart-legend button { background:var(--ws-soft);border:0;border-radius:16px;padding:6px 9px;color:var(--ws-ink);font:inherit;font-size:max(0.6875rem, calc(0.75rem * var(--dt)));cursor:pointer; } .ws-chart-legend i { display:inline-block;height:7px;width:7px;margin-right:6px;background:var(--series);border-radius:50%; } .ws-table-wrap { max-width:100%;overflow:auto; } .ws-table { width:100%;border-collapse:collapse;text-align:left;font-size:max(0.6875rem, calc(0.75rem * var(--dt)));line-height:1.4; } .ws-table th { color:var(--ws-secondary);font-weight:600; } .ws-table td,.ws-table th { padding:9px 8px 9px 0;border:0;vertical-align:top; } .ws-table tbody tr:nth-child(2n) { background:var(--ws-soft); } .ws-orders { display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;align-items:start; } .ws-order { min-width:0;cursor:pointer;border-radius:18px;padding:0; } .ws-order .e { border:0!important;box-shadow:none!important;background:var(--ws-soft)!important;backdrop-filter:none!important;margin:0;width:auto;min-width:0;max-width:100%; } .ws-order .e .waitcover,.ws-order .e .waitlbl { display:none!important; } .ws-order .e .chk { display:none!important; } .ws-order:focus-visible { outline:2px solid var(--ws-accent);outline-offset:2px; } .ws-order-items { margin:9px 2px 0;font-size:calc(0.8125rem * var(--dt));font-weight:600;line-height:1.4; } .ws-order-column { display:flex;flex-direction:column;gap:10px; } .ws-order-column h3 { font-size:calc(0.875rem * var(--dt));margin:0; } .ws-recipe { display:grid;grid-template-columns:1fr;gap:12px; } .ws-recipe-head { display:flex;align-items:center;justify-content:space-between;gap:12px; } .ws-recipe-size { font-size:calc(0.8125rem * var(--dt));color:var(--ws-secondary); } .ws-ingredients { display:grid;grid-template-columns:1fr;gap:2px; } .ws-ingredient { display:flex;justify-content:space-between;gap:16px;padding:9px 10px;border-radius:10px;font-size:calc(0.875rem * var(--dt));line-height:1.35; } .ws-ingredient:nth-child(2n) { background:var(--ws-soft); } .ws-ingredient b { white-space:nowrap; } .ws-ingredient em { font-size:max(0.6875rem, calc(0.6875rem * var(--dt)));display:block;color:var(--ws-secondary);font-style:normal; } .ws-rich > .pmini,.ws-rich > .psteps,.ws-rich > .pexpand { background:transparent!important;border:0!important;box-shadow:none!important;max-height:none!important;width:auto!important;margin:0!important;padding:0!important; } .ws-rich .psteps ol { margin:0;padding-left:22px; } .ws-rich .psteps li { padding:5px 0;font-size:calc(0.875rem * var(--dt));line-height:1.4; } .ws-rich .pcard,.ws-rich .prich-chart,.ws-rich .rc { background:transparent!important;border:0!important;box-shadow:none!important;max-height:none!important;width:auto!important; } .ws-rich .pacts { display:flex;flex-wrap:wrap;gap:8px; } .ws-rich .btn { border:0!important;border-radius:20px; } .ws-widget .ws-empty-state { padding:20px 4px;color:var(--ws-secondary);font-size:calc(0.9375rem * var(--dt));line-height:1.5; } .ws-widget .ws-source { margin-top:12px;font-size:max(0.6875rem, calc(0.6875rem * var(--dt)));color:var(--ws-secondary); } .ws-loading { display:flex;align-items:center;gap:8px;color:var(--ws-secondary); } .ws-loading i { width:6px;height:6px;border-radius:50%;background:currentColor;animation:ws-pulse 1s ease-in-out infinite alternate; } .ws-loading i:nth-child(2) { animation-delay:.2s; } .ws-loading i:nth-child(3) { animation-delay:.4s; } @keyframes ws-pulse { to {opacity:.25;} } /* A resposta curta acompanha a busca, sem ocupar a area dos pedidos. */ #aiz.ws-root.ws-message-mode { grid-template-rows:minmax(0,1fr) auto;align-content:stretch; } #aiz.ws-root.ws-message-mode .ws-board { align-self:center; } #aiz.ws-root.ws-message-mode .ws-board { height:auto;max-height:min(52dvh,480px); } #aiz.ws-root.ws-message-mode .ws-widget-body { flex:0 1 auto; } #aiz.ws-root.ws-inline-mode .ws-board { height:auto;max-height:none;display:block; } #aiz.ws-root.ws-inline-mode .ws-toolbar { display:none; } #aiz.ws-root.ws-inline-mode .ws-grid { display:block;width:min(820px,100%);margin:auto; } .ws-bubble { display:flex;align-items:center;gap:12px;width:fit-content;max-width:100%;min-height:48px;margin:auto;padding:9px 12px 9px 18px;border:0;border-radius:24px;background:var(--ws-material);color:var(--ws-ink);box-shadow:var(--ws-shadow);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);pointer-events:auto; } .ws-bubble-copy { min-width:0; } .ws-bubble-copy p { margin:0;font-size:var(--f-body,1.0625rem);line-height:1.4;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .ws-bubble-actions { display:flex;align-items:center;gap:8px;flex:none; } .ws-bubble-actions:empty { display:none; } .ws-bubble .ws-widget-footer { margin:0; } .ws-bubble .ws-btn { min-height:36px;box-shadow:none;background:var(--ws-soft);font-size:calc(0.875rem * var(--dt)); } #aiz.ws-root.ws-support-mode .ws-grid { align-items:start; } #aiz.ws-root.ws-support-mode .ws-widget { height:auto; } #aiz.ws-root.ws-support-mode.ws-single-result .ws-toolbar { display:none; } #aiz.ws-root.ws-support-mode.ws-single-result .ws-board { grid-template-rows:minmax(0,1fr);gap:0; } .ws-voice-label { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; } .ws-mic-icon { display:grid;place-items:center; } @media (max-width:760px) { #aiz.ws-root { left:12px;right:12px;bottom:calc(12px + var(--ws-viewport-inset,0px));gap:10px; } .ws-grid { gap:10px; } .ws-widget { padding:16px;border-radius:22px; } .ws-toolbar { gap:5px;flex-wrap:wrap; } .ws-topic { padding:7px 11px;flex:1; } .ws-topic strong { max-width:54vw;font-size:calc(0.8125rem * var(--dt)); } .ws-toolbar-actions { margin-left:auto; } .ws-toolbar-actions .ws-clear-label { display:none; } #aiz.ws-root .aisug { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px; } #aiz.ws-root .aisug .pill { min-height:40px;padding:7px 10px;font-size:max(0.6875rem, calc(0.75rem * var(--dt))); } .ws-composer .ws-input { min-height:48px;padding-left:10px; } .ws-composer #aiinput { font-size:calc(0.875rem * var(--dt)); } .ws-widget-title { font-size:calc(1.25rem * var(--dt)); } .ws-metrics { gap:10px;grid-template-columns:repeat(2,minmax(0,1fr)); } .ws-metric strong { font-size:calc(1.625rem * var(--dt)); } .ws-btn { min-height:40px; } .ws-orders { grid-template-columns:1fr; } .ws-bubble { gap:8px;padding:9px 10px 9px 13px;border-radius:20px;flex-wrap:wrap; } .ws-bubble-copy { flex:1 1 180px; } .ws-bubble-copy p { font-size:calc(0.9375rem * var(--dt)); } .ws-bubble-actions { margin-left:auto;max-width:100%;flex-wrap:wrap; } .ws-bubble .ws-btn { min-height:40px; } } @media (pointer:coarse) { .ws-btn,.ws-filters button,.ws-filters select,.ws-filters input { min-height:44px; }.ws-btn.ws-icon { min-width:44px;min-height:44px; } } @media (max-width:460px) { } @media (prefers-reduced-motion:reduce) { .ws-root *,.ws-composer * { animation:none!important;transition:none!important; } } @media (prefers-reduced-transparency:reduce),(prefers-contrast:more) { :root { --ws-material:var(--surface,#FFFFFF);--ws-control:var(--surface2,#F7F3EE);--ws-secondary:var(--label,#323200); } body.dark { --ws-material:var(--label,#323200);--ws-control:var(--surface2,#F7F3EE);--ws-secondary:var(--surface,#FFFFFF); } .ws-widget,.ws-btn,.ws-topic,.ws-input,#aiz.ws-root .pill { backdrop-filter:none!important;-webkit-backdrop-filter:none!important; } } /* O compositor permanece no centro; a animacao antiga escalava a translacao. */ #ws-composer-home { width:min(720px,100%); } #ws-composer-home .ws-composer { width:100%; } .ws-grid:has(> .ws-widget:only-child) { grid-template-columns:minmax(0,1fr);width:100%;max-width:900px;justify-self:center; } .ws-filters button { display:inline-flex;align-items:center;justify-content:center;gap:5px; } .ws-filters svg { width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8; } @media (min-width:980px) { .ws-ingredients { grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px; } } .ws-order-detail { max-width:none;margin:auto; } .ws-order-detail .e { border:0!important;box-shadow:none!important;background:var(--ws-soft)!important; } .ws-detail-actions { display:flex;flex-wrap:wrap;gap:8px;margin-top:16px; } .ws-metrics { grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); } .ws-metric strong { font-size:clamp(1.4375rem,2vw,1.875rem);white-space:nowrap;overflow-wrap:normal; } @media (pointer:coarse) { .ws-composer .ws-close { width:44px;height:44px;min-width:44px;min-height:44px; } } /* Mesma folga acima e abaixo das sugestoes no KDS. */ /* Fichas usam sua altura natural e distribuem ingredientes pela largura. */ #aiz.ws-root.ws-recipe-mode{max-height:none;grid-template-rows:auto;gap:0} #aiz.ws-root.ws-recipe-mode .ws-board{height:auto;max-height:none;grid-template-rows:auto auto} #aiz.ws-root.ws-recipe-mode .ws-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;max-width:1100px} #aiz.ws-root.ws-recipe-mode .ws-widget{height:auto;max-height:none;overflow:visible} #aiz.ws-root.ws-recipe-mode .ws-widget-body{flex:none;overflow:visible;max-height:none} #aiz.ws-root.ws-recipe-mode.ws-single-result .ws-toolbar{display:none} #aiz.ws-root.ws-recipe-mode.ws-single-result .ws-board{gap:0} #aiz.ws-root.ws-recipe-mode .ws-ingredients{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:4px 12px} #aiz.ws-root.ws-recipe-mode .ws-ingredient{font-size:var(--f-subhead,0.9375rem);line-height:1.35;padding:6px 8px;gap:12px} #aiz.ws-root.ws-recipe-mode .ws-ingredient em{font-size:max(0.6875rem, calc(0.75rem * var(--dt)))} #aiz.ws-root.ws-rich-mode{top:var(--ws-rich-top,var(--ws-top));bottom:calc(18px + var(--ws-viewport-inset,0px));max-height:none;grid-template-rows:minmax(0,1fr) auto;align-content:stretch} #aiz.ws-root.ws-rich-mode .ws-board{align-self:center;justify-self:center;width:min(1000px,100%);height:auto;max-height:100%;grid-template-rows:auto minmax(0,1fr)} #aiz.ws-root.ws-rich-mode .ws-grid{grid-template-rows:minmax(0,1fr);max-height:100%} #aiz.ws-root.ws-rich-mode .ws-widget{height:auto;max-height:100%} #aiz.ws-root.ws-rich-mode .ws-widget-body{flex:0 1 auto} #aiz.ws-root.ws-rich-mode.ws-single-result .ws-toolbar{display:none} #aiz.ws-root.ws-rich-mode.ws-single-result .ws-board{grid-template-rows:minmax(0,1fr);gap:0} .ws-recipe-photo{display:block;width:min(200px,100%);height:140px;object-fit:cover;border-radius:16px;margin:0 auto} /* 1.74.0 (Philippe, 03/10/2026, desempenho): a coluna dos filhos vinha de `.ws-recipe:has(.ws-recipe-photo)>:not(...)`. Um `:has()` seguido de um seletor sem classe custava o estilo da tela inteira a cada mexida no sistema todo (docs/DESEMPENHO-2026-10-03.md). Agora a receita com foto guarda a coluna numa variável e os filhos leem dela; sem foto vale `auto`, que é o valor de sempre. O resultado na tela é o mesmo. */ .ws-recipe:has(.ws-recipe-photo){grid-template-columns:minmax(140px,200px) minmax(0,1fr);column-gap:20px;align-items:start;--ws-recipe-coluna:2} .ws-recipe:has(.ws-recipe-photo)>.ws-recipe-photo{grid-column:1;grid-row:1/span 3} .ws-recipe.ws-recipe>:not(.ws-recipe-photo){grid-column:var(--ws-recipe-coluna,auto)} @media(max-width:760px){ .ws-recipe:has(.ws-recipe-photo){grid-template-columns:88px minmax(0,1fr);gap:8px 12px;--ws-recipe-coluna:1/-1} .ws-recipe:has(.ws-recipe-photo)>.ws-recipe-photo{grid-column:1;grid-row:1;width:88px;height:66px;border-radius:12px} .ws-recipe:has(.ws-recipe-photo)>.ws-recipe-head{grid-column:2;grid-row:1;min-height:66px;flex-wrap:wrap;gap:6px} .ws-recipe-head .ws-filters{margin-bottom:0} } #aiz.ws-root.ws-recipe-mode .ws-recipe-head{flex-wrap:wrap;gap:8px} #aiz.ws-root.ws-recipe-mode .ws-recipe-head .ws-filters{margin:0} #aiz.ws-root.ws-recipe-mode .ws-recipe-head button{min-height:44px} .ws-recipe-paging{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:calc(0.8125rem * var(--dt));text-align:center} .ws-recipe-paging button{min-height:44px;padding:8px;flex:none}.ws-recipe-paging svg{width:16px} /* Consultas de pedidos ocupam apenas o espaco do conteudo. */ #aiz.ws-root.ws-order-mode:not(.ws-rich-mode) .ws-board{align-self:center;width:100%;height:auto;max-height:100%;grid-template-rows:auto minmax(0,1fr)} #aiz.ws-root.ws-order-mode:not(.ws-rich-mode) .ws-grid{grid-template-rows:minmax(0,1fr);max-height:100%} #aiz.ws-root.ws-order-mode .ws-widget-body{flex:0 1 auto} #aiz.ws-root.ws-order-mode.ws-single-result:not(.ws-rich-mode) .ws-board{width:min(720px,100%);justify-self:center} .ws-order-detail{color:var(--ws-ink);min-width:0} .ws-order-detail .oh{padding:0 0 12px;gap:12px;flex-wrap:wrap} .ws-order-detail .orow{padding:8px 0;gap:10px;flex-wrap:wrap} .ws-order-detail .ocols{padding:12px 0;gap:20px} .ws-order-detail .oinfo{padding:12px 0;font-size:var(--f-subhead,0.9375rem);overflow-wrap:anywhere} .ws-order-detail .oinfo>div{padding:3px 0} .ws-order-detail .oacts{padding:12px 0 0;gap:8px;justify-content:flex-start;flex-wrap:wrap} .ws-order-detail .oacts .btn{white-space:normal;min-height:40px} .ws-order-detail .ws-detail-focus{background:var(--ws-soft);border-radius:16px;box-shadow:inset 3px 0 var(--ws-accent);padding:12px} @media(max-width:760px){.ws-order-detail .ocols{grid-template-columns:minmax(0,1fr)}.ws-order-detail .oh .n{font-size:calc(1.625rem * var(--dt))}.ws-order-detail .oacts .btn{flex:1 1 135px}} .ws-order-detail .ws-detail-columns{grid-template-columns:1.1fr 1fr .85fr;align-items:start;gap:18px;margin-top:8px;padding:4px 0} .ws-order-detail .ws-detail-columns .oinfo{border:0;margin:0;padding:0} .ws-order-detail .ws-detail-timeline .tli{padding-bottom:12px;font-size:calc(0.8125rem * var(--dt))} .ws-order-detail .ws-detail-timeline .tlh{font-size:calc(0.875rem * var(--dt));margin-bottom:8px} .ws-order-actions .oacts{display:flex;width:100%;gap:8px;flex-wrap:wrap;margin:0;padding:0;justify-content:flex-start} .ws-order-actions .btn{min-height:40px;white-space:normal} .ws-widget:has(.ws-order-detail) .ws-widget-title{display:none} @media(max-width:980px){.ws-order-detail .ws-detail-columns{grid-template-columns:1fr 1fr}.ws-order-detail .ws-detail-timeline{grid-column:1/-1}.ws-order-detail .ws-detail-timeline .tl{display:grid;grid-template-columns:1fr 1fr}} @media(max-width:580px){.ws-order-detail .ws-detail-columns{grid-template-columns:minmax(0,1fr)}.ws-order-detail .ws-detail-timeline .tl{grid-template-columns:minmax(0,1fr)}.ws-order-actions .btn{flex:1 1 135px}} /* /on-demand.css */ .hub-on-demand{color:var(--label,#2A1C12);background:var(--surface2,#F7F3EE);border:1px solid var(--sep,color-mix(in srgb,var(--label,#2A1C12) 13%,transparent));border-radius:24px;padding:0;width:min(820px,calc(100vw - 24px));max-height:calc(100dvh - 24px);box-shadow:0 24px 80px color-mix(in srgb,light-dark(var(--label,#2A1C12),var(--page,#F7F5F1)) 30%,transparent)} .hub-on-demand[open]{display:flex;flex-direction:column}.hub-on-demand::backdrop{background:color-mix(in srgb,var(--label,#2A1C12) 45%,transparent);backdrop-filter:blur(6px)} .hub-on-demand header,.hub-on-demand footer{flex:none;padding:18px 22px;background:var(--surface,#FFFFFF);border-bottom:1px solid var(--sep,color-mix(in srgb,var(--label,#2A1C12) 13%,transparent))}.hub-on-demand header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.hub-on-demand header h2{font-size:calc(1.625rem * var(--dt));margin:4px 0 0;font-weight:750}.hub-on-demand header p{margin:6px 0 0}.hub-on-demand .od-eyebrow{font-size:calc(0.8125rem * var(--dt));color:var(--label2,#6B5A4C)} .hub-on-demand .od-body{overflow:auto;overscroll-behavior:contain;padding:18px 22px;min-height:0}.hub-on-demand footer{border-top:1px solid var(--sep,color-mix(in srgb,var(--label,#2A1C12) 13%,transparent));border-bottom:0}.hub-on-demand footer>div{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.hub-on-demand footer p:empty{display:none}.hub-on-demand section{margin:16px 0;padding-top:12px;border-top:1px solid var(--sep,color-mix(in srgb,var(--label,#2A1C12) 13%,transparent))}.hub-on-demand h3{font-size:calc(1.125rem * var(--dt));margin:0 0 10px} .hub-on-demand label{display:flex;flex-direction:column;gap:6px;font-size:calc(0.875rem * var(--dt));min-width:0}.hub-on-demand input,.hub-on-demand select{font:inherit;color:inherit;background:var(--surface,#FFFFFF);border:1px solid var(--sep,color-mix(in srgb,var(--label,#2A1C12) 13%,transparent));border-radius:12px;min-height:44px;padding:10px;box-sizing:border-box;width:100%;min-width:0}.hub-on-demand .od-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hub-on-demand .od-item{display:grid;grid-template-columns:2fr .8fr 1fr 1fr;gap:10px;margin:12px 0}.hub-on-demand .od-hint{font-size:calc(0.875rem * var(--dt));color:var(--label2,#6B5A4C);line-height:1.45}.hub-on-demand .od-warning{font-size:calc(0.9375rem * var(--dt));background:color-mix(in srgb,var(--d-ambar,#C27A00) 15%,transparent);padding:12px;border-radius:12px;line-height:1.4}.hub-on-demand .od-price strong{display:block;font-size:calc(2.375rem * var(--dt));margin:10px 0}.hub-on-demand .od-price{border:0;background:var(--surface,#FFFFFF);border-radius:18px;padding:18px}.hub-on-demand .od-delivery{border:1px solid var(--sep,color-mix(in srgb,var(--label,#2A1C12) 13%,transparent));border-radius:16px;padding:14px;margin:10px 0}.hub-on-demand .od-delivery>div:first-child{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}.hub-on-demand .od-delivery small{display:block;margin-bottom:10px}.hub-on-demand .od-delivery .btn{margin:6px 8px 0 0}.hub-on-demand .od-cancel-form{display:grid;gap:10px;margin-top:14px}.hub-on-demand .btn{min-height:44px;white-space:normal}.hub-on-demand button:focus-visible,.hub-on-demand input:focus-visible,.hub-on-demand select:focus-visible,.hub-on-demand a:focus-visible{outline:3px solid var(--acao,#1F5FD0);outline-offset:2px} @media(max-width:600px){.hub-on-demand header,.hub-on-demand footer,.hub-on-demand .od-body{padding:14px}.hub-on-demand header h2{font-size:calc(1.4375rem * var(--dt))}.hub-on-demand .od-item{grid-template-columns:1fr 1fr}.hub-on-demand .od-item label:first-child{grid-column:1/-1}.hub-on-demand .od-fields{grid-template-columns:1fr}.hub-on-demand footer>div{display:grid;grid-template-columns:1fr 1fr}.hub-on-demand footer .primary{grid-column:1/-1}} .hub-on-demand header .icon{color:var(--label,#2A1C12);background:var(--fill,color-mix(in srgb,var(--label,#2A1C12) 8%,transparent));width:44px;height:44px;flex:none;border-radius:50%;border:0;font-size:calc(1.5625rem * var(--dt))}.hub-on-demand .od-item>[data-od-remove-item]{grid-column:1/-1;justify-self:start} .hub-on-demand .od-origin{display:grid;gap:6px;background:var(--surface,#FFFFFF);padding:14px 16px;border-radius:16px}.hub-on-demand .od-origin b{font-size:calc(1.125rem * var(--dt))}.hub-on-demand .od-origin span{font-size:calc(0.875rem * var(--dt));color:var(--label2,#6B5A4C)} /* 1.50.0: troca de endereço e código de coleta na ficha da entrega */ .hub-on-demand .od-address-change,.hub-on-demand .od-pickup{margin:10px 0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--label,#2A1C12) 6%,transparent)} .hub-on-demand .od-address-change.od-warning,.hub-on-demand .od-pickup.od-warning{background:color-mix(in srgb,var(--queda,#E21D3C) 10%,transparent);border-left:4px solid var(--queda,#E21D3C)} .hub-on-demand .od-address-change p,.hub-on-demand .od-pickup p{margin:4px 0;font-size:calc(0.875rem * var(--dt))} .hub-on-demand .od-address-actions,.hub-on-demand .od-pickup-form{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .hub-on-demand .od-pickup-form input{flex:1 1 140px;min-width:0;font-size:calc(1.25rem * var(--dt));letter-spacing:.12em;text-align:center;font-variant-numeric:tabular-nums} .hub-on-demand .od-hint.od-ok{color:var(--pronto,var(--d-verdeagua-t,#006F5D));font-weight:600} /* 1.68.0: provedores do sob demanda (99Food aguardando API) */ .hub-on-demand .od-provedores{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0} .hub-on-demand .od-prov{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border-radius:999px;font-size:calc(0.8125rem * var(--dt));font-weight:600} .hub-on-demand .od-prov.on{background:var(--label,#2A1C12);color:var(--surface,#FFFFFF)} .hub-on-demand .od-prov.off{background:var(--fill,color-mix(in srgb,var(--label,#2A1C12) 8%,transparent));color:var(--label2,#6B5A4C);font-weight:500} /* 1.73.5: código de coleta do pedido (delivery.pickupCode) na ficha da entrega */ .hub-on-demand .od-pickup-code{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:10px 0 0;font-size:calc(.875rem * var(--dt))} .hub-on-demand .od-pickup-code b{font-size:calc(1.375rem * var(--dt));letter-spacing:.12em;font-variant-numeric:tabular-nums} .hub-on-demand .od-pickup-code small{flex:1 0 100%;color:var(--label2,#6B5A4C);font-size:calc(.8125rem * var(--dt))} /* AU-XK-SD-01: folha v17; chave desligada conserva a geometria original. */ .hub-on-demand.od-v2{--label:#323200;--label2:#686654;--surface:#fff;--surface2:#f7f5f1;--sep:#deddd5;--dt:1;color:var(--label);margin:0 0 0 auto;inset:0 0 0 auto;width:min(500px,100vw);height:100dvh;max-height:100dvh;border-radius:24px 0 0 24px;box-sizing:border-box;overflow:hidden;animation:od-folha-entrar .22s ease-out} [data-theme=dark] .hub-on-demand.od-v2{--label:#f5efe8;--label2:#c8c0b6;--surface:#221f1c;--surface2:#141210;--sep:#49443e;color-scheme:dark} .hub-on-demand.od-v2 *{box-sizing:border-box;min-width:0;overflow-wrap:anywhere} .hub-on-demand.od-v2 header,.hub-on-demand.od-v2 footer{background:var(--surface);backdrop-filter:none} .hub-on-demand.od-v2 header h2{font-size:24px;letter-spacing:-.025em} .hub-on-demand.od-v2 .od-body{flex:1;scrollbar-gutter:stable;padding-bottom:24px} .hub-on-demand.od-v2 .od-eyebrow{color:var(--d-coral-t,#b92d40);font-weight:700} .hub-on-demand.od-v2 .od-prov.on{background:color-mix(in srgb,var(--d-coral,#f24a5e) 12%,var(--surface));color:var(--d-coral-t,#b92d40)} .hub-on-demand.od-v2 .od-prov.off{background:color-mix(in srgb,var(--d-amarelo,#f2b000) 15%,var(--surface));color:var(--label)} [data-theme=dark] .hub-on-demand.od-v2 .od-eyebrow,[data-theme=dark] .hub-on-demand.od-v2 .od-prov.on{color:var(--d-coral-t,#ff8f9d)} .hub-on-demand.od-v2 .od-price{border:1px solid var(--sep);box-shadow:0 4px 16px #00000008} .hub-on-demand.od-v2 .od-price strong{font-size:36px;letter-spacing:-.04em;font-variant-numeric:tabular-nums} .hub-on-demand.od-v2 [data-od-prazo]{font-variant-numeric:tabular-nums;font-weight:650} .hub-on-demand.od-v2 .btn{border:1px solid var(--sep);border-radius:14px;padding:10px 14px;color:var(--label);background:var(--surface);font:inherit;cursor:pointer} .hub-on-demand.od-v2 .btn.primary{background:var(--acao,#1f5fd0);border-color:transparent;color:#fff;font-weight:700} .hub-on-demand.od-v2 .btn:disabled{opacity:.5;cursor:default} .hub-on-demand.od-v2 footer{padding-bottom:max(16px,env(safe-area-inset-bottom));max-height:44dvh;overflow:auto} .hub-on-demand.od-v2 footer>div{display:grid;grid-template-columns:1fr 1fr} .hub-on-demand.od-v2 footer .primary{grid-column:1/-1;grid-row:1} .hub-on-demand.od-v2 .od-item{grid-template-columns:1fr 1fr} .hub-on-demand.od-v2 .od-item label:first-child{grid-column:1/-1} .hub-on-demand.od-v2.od-no-fio{width:100%;height:auto;max-height:none;border-radius:20px;animation:none} @keyframes od-folha-entrar{from{transform:translateX(32px);opacity:0}to{transform:translateX(0);opacity:1}} @media(max-width:600px){.hub-on-demand.od-v2:not(.od-no-fio){inset:auto 0 0;margin:0;width:100%;height:92dvh;max-height:92dvh;border-radius:24px 24px 0 0;animation-name:od-folha-subir}.hub-on-demand.od-v2 .od-fields{grid-template-columns:1fr}.hub-on-demand.od-v2 header{padding-top:20px}.hub-on-demand.od-v2 header:before{content:'';position:absolute;top:7px;left:calc(50% - 18px);width:36px;height:4px;background:var(--sep);border-radius:4px}} @keyframes od-folha-subir{from{transform:translateY(32px);opacity:0}to{transform:translateY(0);opacity:1}} @media(prefers-reduced-motion:reduce){.hub-on-demand.od-v2{animation:none!important;scroll-behavior:auto}} .hub-on-demand.od-v2{max-width:100vw} .hub-on-demand.od-v2 header .icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;display:block;margin:auto} /* AU-XK-SD-02: contraste inteiro, sem faixa desfocada na folha aprovada. */ .hub-on-demand.od-v2::backdrop{backdrop-filter:none} /* /ifood-gestao.css */ /* 1.67.0: Loja no iFood (web/ifood-gestao.js). Mesma linguagem visual do Sob Demanda (on-demand.css). */ /* 1.74.0 (Philippe, 04/10/2026, quinta fase, ramo janelas): conteúdo primeiro (B4, B6 e B7). A moldura da janela (o nome e o Fechar em cima, a faixa de cartões, a barra de baixo) é a da casa: web/hub-janela.css. Saíram daqui o cabeçalho com o seletor de loja, a fileira de abas, o corpo que rolava e o rodapé das últimas chamadas. Aqui fica só o miolo dos cartões. */ .hub-ifood-gestao .ifg-rolagem{overflow-x:auto} .hub-ifood-gestao .hj-faixa.hcar-pc>.ifg-largo{flex-basis:min(100%,calc(var(--hcar-w,24rem) * 1.5))} .hub-ifood-gestao .ifg-pausas,.hub-ifood-gestao .ifg-avals{list-style:none;margin:0;padding:0} .hub-ifood-gestao .ifg-pausas li,.hub-ifood-gestao .ifg-avals li{padding:.625rem 0;border-bottom:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .hub-ifood-gestao .ifg-pausas p,.hub-ifood-gestao .ifg-avals p{margin:0 0 .375rem} .hub-ifood-gestao .ifg-sub{margin-top:1rem} .hub-ifood-gestao h3{margin:0 0 10px;font-size:calc(1.125rem * var(--dt))} .hub-ifood-gestao h4{margin:0 0 8px;font-size:calc(1.0625rem * var(--dt))} .hub-ifood-gestao h5{margin:0 0 8px;font-size:calc(0.9375rem * var(--dt))} .hub-ifood-gestao small,.hub-ifood-gestao .ifg-dica{color:var(--label2,#6B5A4C);font-size:calc(0.8125rem * var(--dt))} .hub-ifood-gestao code{font-size:.86em;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));padding:1px 5px;border-radius:6px;word-break:break-all} .hub-ifood-gestao .ifg-titulo{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px} .hub-ifood-gestao .ifg-titulo h3{margin:0} .hub-ifood-gestao label{display:flex;flex-direction:column;gap:5px;font-size:calc(0.875rem * var(--dt));min-width:0} .hub-ifood-gestao input,.hub-ifood-gestao select,.hub-ifood-gestao textarea{font:inherit;color:inherit;background:var(--surface,#FFFFFF);border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:12px;min-height:44px;padding:9px 10px;box-sizing:border-box;width:100%;min-width:0} .hub-ifood-gestao input[type=checkbox]{width:22px;height:22px;min-height:0} .hub-ifood-gestao input[type=time]{width:auto} .hub-ifood-gestao .ifg-check{flex-direction:row;align-items:center;gap:8px} .hub-ifood-gestao .ifg-linha{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:8px 0} .hub-ifood-gestao .ifg-linha label{flex:1 1 200px}.hub-ifood-gestao .ifg-linha label.larga{flex:3 1 320px} .hub-ifood-gestao .ifg-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:10px;align-items:end;margin:8px 0} .hub-ifood-gestao .ifg-acoes,.hub-ifood-gestao .ifg-acoes-mini{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .hub-ifood-gestao .btn{min-height:44px;white-space:normal} .hub-ifood-gestao .ifg-aviso{padding:10px 14px;border-radius:12px;margin:10px 0;font-size:calc(0.9375rem * var(--dt));line-height:1.4} .hub-ifood-gestao .ifg-info{background:color-mix(in srgb,var(--acao,#1F5FD0) 9%,transparent)} .hub-ifood-gestao .ifg-ok{background:color-mix(in srgb,var(--verde,#11994A) 13%,transparent)} .hub-ifood-gestao .ifg-erro{background:color-mix(in srgb,var(--queda,#E21D3C) 13%,transparent);border-left:4px solid var(--queda,#E21D3C)} .hub-ifood-gestao .ifg-loja-atual{margin:0 0 .625rem;font-size:calc(0.875rem * var(--dt));color:var(--label2,#6B5A4C)} .hub-ifood-gestao .ifg-tabela{width:100%;border-collapse:collapse;font-size:calc(0.875rem * var(--dt))} .hub-ifood-gestao .ifg-tabela th,.hub-ifood-gestao .ifg-tabela td{text-align:left;padding:8px;border-bottom:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));vertical-align:top} .hub-ifood-gestao .ifg-tabela tr.sel td{background:color-mix(in srgb,var(--acao,#1F5FD0) 7%,transparent)} .hub-ifood-gestao .ifg-dl{display:grid;grid-template-columns:minmax(140px,max-content) 1fr;gap:6px 16px;margin:0;font-size:calc(0.875rem * var(--dt))} .hub-ifood-gestao .ifg-dl dt{color:var(--label2,#6B5A4C)}.hub-ifood-gestao .ifg-dl dd{margin:0;word-break:break-word} .hub-ifood-gestao .ifg-status{border-radius:14px;padding:10px 14px;margin:8px 0;border-left:5px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));background:var(--surface2,#F7F3EE)} .hub-ifood-gestao .ifg-status.ok{border-left-color:var(--pronto,var(--verde,#11994A))}.hub-ifood-gestao .ifg-status.atencao{border-left-color:var(--d-ambar,#C27A00)}.hub-ifood-gestao .ifg-status.falha{border-left-color:var(--queda,#E21D3C)} .hub-ifood-gestao .ifg-status p{margin:3px 0}.hub-ifood-gestao .ifg-status ul{margin:6px 0 0 18px;padding:0;font-size:calc(0.875rem * var(--dt))} .hub-ifood-gestao .ifg-semana{display:grid;gap:8px} .hub-ifood-gestao .ifg-dia{display:grid;grid-template-columns:100px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .hub-ifood-gestao .ifg-dia>div{display:flex;flex-wrap:wrap;gap:8px} .hub-ifood-gestao .ifg-turno{display:inline-flex;align-items:center;gap:6px;background:var(--surface2,#F7F3EE);padding:4px 6px;border-radius:12px} .hub-ifood-gestao .ifg-fechado{color:var(--label2,#6B5A4C);font-style:italic} .hub-ifood-gestao .ifg-lista{margin:0;padding-left:18px;line-height:1.6} .hub-ifood-gestao .ifg-item{display:grid;grid-template-columns:4rem 1fr;gap:.75rem;padding:10px 0;border-bottom:1px dashed var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .hub-ifood-gestao .ifg-item p{margin:2px 0} .hub-ifood-gestao .ifg-mini{width:4rem;height:4rem;object-fit:cover;border-radius:12px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));display:flex;align-items:center;justify-content:center;font-size:var(--f-caption1);color:var(--label2,#6B5A4C)} .hub-ifood-gestao .ifg-comp .ifg-mini{width:48px;height:48px} .hub-ifood-gestao .ifg-grupo{margin:10px 0 0;padding:8px 12px;border-radius:12px;background:var(--surface2,#F7F3EE)} .hub-ifood-gestao .ifg-comp{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:6px 0} .hub-ifood-gestao .ifg-comp>span{flex:1 1 240px} .hub-ifood-gestao .ifg-comp>span.ifg-mini{flex:none} .hub-ifood-gestao .ifg-selo{display:inline-block;font-size:var(--f-caption1);font-weight:650;padding:2px 8px;border-radius:999px} .hub-ifood-gestao .ifg-selo.ok{background:color-mix(in srgb,var(--verde,#11994A) 16%,transparent);color:var(--d-verdeagua-t,#006F5D)}.hub-ifood-gestao .ifg-selo.pausado{background:color-mix(in srgb,var(--d-ifood) 14%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .hub-ifood-gestao .ifg-editor{margin:10px 0;padding:12px;border:2px solid var(--acao,#1F5FD0);border-radius:14px;background:var(--surface,#FFFFFF)} .hub-ifood-gestao .ifg-comp-novo{border-top:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));margin-top:8px;padding-top:6px} .hub-ifood-gestao .ifg-foto input{padding:7px} .hub-ifood-gestao .ifg-foto small.ok{color:var(--d-verdeagua-t,#006F5D)} .hub-ifood-gestao .ifg-ultimas{list-style:none;margin:0;padding:0;font-size:calc(0.8125rem * var(--dt));font-variant-numeric:tabular-nums} .hub-ifood-gestao .ifg-ultimas li{padding:2px 0}.hub-ifood-gestao .ifg-ultimas li.ok span{color:var(--d-verdeagua-t,#006F5D)}.hub-ifood-gestao .ifg-ultimas li.falha span{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .hub-ifood-gestao .ifg-chamada{border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:12px;padding:8px 12px;margin:6px 0;font-size:calc(0.875rem * var(--dt))} .hub-ifood-gestao .ifg-chamada summary{cursor:pointer;list-style:revert}.hub-ifood-gestao .ifg-chamada.ok summary span{color:var(--d-verdeagua-t,#006F5D)}.hub-ifood-gestao .ifg-chamada.falha summary span{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .hub-ifood-gestao pre{white-space:pre-wrap;word-break:break-all;background:var(--surface2,#F7F3EE);padding:8px;border-radius:10px;font-size:var(--f-caption1);max-height:320px;overflow:auto} .hub-ifood-gestao .ifg-resposta{margin-top:12px} .hub-ifood-gestao button:focus-visible,.hub-ifood-gestao input:focus-visible,.hub-ifood-gestao select:focus-visible,.hub-ifood-gestao textarea:focus-visible,.hub-ifood-gestao a:focus-visible{outline:3px solid var(--acao,#1F5FD0);outline-offset:2px} @media(max-width:700px){.hub-ifood-gestao .ifg-dia{grid-template-columns:1fr}.hub-ifood-gestao .ifg-dl{grid-template-columns:1fr}} /* /ifood-analytics.css */ /* 1.73.0: iFood Analytics (web/ifood-analytics.js). Mesma linguagem visual da Loja no iFood (ifood-gestao.css). */ /* 1.74.0 (Philippe, 04/10/2026, quinta fase, ramo janelas): conteúdo primeiro (B4, B6 e B7). A moldura da janela (o nome e o Fechar em cima, a faixa de cartões, a barra de baixo) é a da casa: web/hub-janela.css. Saíram daqui o cabeçalho de três linhas, a faixa de filtros, a fileira de abas e o corpo que rolava. Aqui fica só o miolo dos cartões. */ .hub-ifood-analytics .ifa-id{font-variant-numeric:tabular-nums} .hub-ifood-analytics .hj-cartao .ifa-id{margin:0 0 .625rem;font-size:calc(0.875rem * var(--dt,1))} .hub-ifood-analytics .ifa-bloco+.ifa-bloco{margin-top:1rem;padding-top:.875rem;border-top:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .hub-ifood-analytics .ifa-consultar{width:100%;margin:0 0 .5rem} .hub-ifood-analytics .ifa-datas{display:grid;grid-template-columns:1fr 1fr;gap:.625rem} .hub-ifood-analytics label{display:flex;flex-direction:column;gap:5px;font-size:calc(0.875rem * var(--dt,1));min-width:0} .hub-ifood-analytics input,.hub-ifood-analytics select,.hub-ifood-analytics textarea{font:inherit;color:inherit;background:var(--surface,#FFFFFF);border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:12px;min-height:44px;padding:9px 10px;box-sizing:border-box;width:100%;min-width:0} .hub-ifood-analytics textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:calc(0.8125rem * var(--dt,1))} .hub-ifood-analytics input[type=checkbox]{width:22px;height:22px;min-height:0} .hub-ifood-analytics .btn{min-height:44px;white-space:normal} .hub-ifood-analytics small,.hub-ifood-analytics .ifa-dica{color:var(--label2,#6B5A4C);font-size:calc(0.8125rem * var(--dt,1));font-weight:400} .hub-ifood-analytics code{font-size:.86em;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));padding:1px 5px;border-radius:6px;overflow-wrap:anywhere} .hub-ifood-analytics .ifa-aviso{padding:10px 14px;border-radius:12px;margin:10px 0;font-size:calc(0.9375rem * var(--dt,1));line-height:1.4} .hub-ifood-analytics .ifa-info{background:color-mix(in srgb,var(--acao,#1F5FD0) 9%,transparent)} .hub-ifood-analytics .ifa-ok{background:color-mix(in srgb,var(--verde,#11994A) 13%,transparent)} .hub-ifood-analytics .ifa-erro{background:color-mix(in srgb,var(--queda,#E21D3C) 13%,transparent);border-left:4px solid var(--queda,#E21D3C)} .hub-ifood-analytics .ifa-erro-txt{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .hub-ifood-analytics .ifa-periodo p{margin:6px 0;font-size:calc(0.9375rem * var(--dt,1))} .hub-ifood-analytics .ifa-selo{display:inline-block;font-size:var(--f-caption1);font-weight:650;padding:2px 8px;border-radius:999px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} .hub-ifood-analytics .ifa-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.625rem;margin:.75rem 0 0} .hub-ifood-analytics .ifa-kpi{border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:.875rem;padding:.75rem .875rem;display:flex;flex-direction:column;gap:.25rem;min-width:0} .hub-ifood-analytics .ifa-kpi>span{font-size:calc(0.875rem * var(--dt,1));color:var(--label2,#6B5A4C)} .hub-ifood-analytics .ifa-kpi>b{font-size:calc(1.5rem * var(--dt,1));font-weight:750;font-variant-numeric:tabular-nums;line-height:1.15;overflow-wrap:anywhere} .hub-ifood-analytics .ifa-kpis-menor .ifa-kpi>b{font-size:calc(1.1875rem * var(--dt,1))} .hub-ifood-analytics .ifa-kpi small{line-height:1.35} /* o cartão largo (uma tabela de várias colunas) pede mais largura na faixa do computador */ .hub-ifood-analytics .hj-faixa.hcar-pc>.ifa-largo{flex-basis:min(100%,calc(var(--hcar-w,24rem) * 1.5))} .hub-ifood-analytics h3{margin:0 0 10px;font-size:calc(1.0625rem * var(--dt,1))} .hub-ifood-analytics .ifa-titulo{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px} .hub-ifood-analytics .ifa-titulo h3{margin:0} .hub-ifood-analytics .ifa-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* barras de uma cor: 4 px de canto na ponta do dado, trilho recessivo */ .hub-ifood-analytics .ifa-barras{width:100%;border-collapse:separate;border-spacing:0 2px;font-size:calc(0.875rem * var(--dt,1));table-layout:fixed} .hub-ifood-analytics .ifa-barras th{text-align:left;font-weight:500;width:38%;padding:5px 8px 5px 0;overflow-wrap:break-word;hyphens:auto} .hub-ifood-analytics .ifa-barras td{padding:5px 0 5px 8px} .hub-ifood-analytics .ifa-barras .ifa-num{width:54px;text-align:right;font-variant-numeric:tabular-nums} .hub-ifood-analytics .ifa-trilho{width:auto} .hub-ifood-analytics .ifa-barras-valor .ifa-num{width:104px} .hub-ifood-analytics .ifa-trilho i{display:block;height:14px;background:var(--acao,#1F5FD0);border-radius:0 4px 4px 0;min-width:2px} .hub-ifood-analytics .ifa-barras tr:hover th,.hub-ifood-analytics .ifa-barras tr:hover td{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} /* colunas por dia */ .hub-ifood-analytics .ifa-colunas{display:flex;align-items:flex-end;gap:2px;height:min(15rem,38dvh);padding:2.25rem 0 0;margin-bottom:1.625rem;border-bottom:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .hub-ifood-analytics .ifa-col{position:relative;flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;outline:none} .hub-ifood-analytics .ifa-col i{display:block;width:70%;min-width:3px;max-width:44px;background:var(--acao,#1F5FD0);border-radius:4px 4px 0 0} .hub-ifood-analytics .ifa-col em{position:absolute;bottom:-22px;font-style:normal;font-size:var(--f-caption2);color:var(--label2,#6B5A4C);white-space:nowrap} .hub-ifood-analytics .ifa-col .ifa-dado{position:absolute;top:-26px;left:50%;transform:translateX(-50%);display:none;background:var(--label,#323200);color:var(--surface,#FFFFFF);font-size:var(--f-caption1);padding:4px 8px;border-radius:8px;white-space:nowrap;z-index:2;text-align:center;line-height:1.3} .hub-ifood-analytics .ifa-col:hover .ifa-dado,.hub-ifood-analytics .ifa-col:focus .ifa-dado{display:block} .hub-ifood-analytics .ifa-col:hover i,.hub-ifood-analytics .ifa-col:focus i{filter:brightness(.85)} .hub-ifood-analytics .ifa-tabela{width:100%;border-collapse:collapse;font-size:calc(0.875rem * var(--dt,1))} .hub-ifood-analytics .ifa-tabela th,.hub-ifood-analytics .ifa-tabela td{text-align:left;padding:8px;border-bottom:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));vertical-align:top} .hub-ifood-analytics .ifa-tabela .ifa-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .hub-ifood-analytics .ifa-rolagem{overflow-x:auto} .hub-ifood-analytics .ifa-leituras{margin:0;padding-left:18px;line-height:1.5;font-size:calc(0.9375rem * var(--dt,1))} .hub-ifood-analytics .ifa-leituras li{margin:4px 0} .hub-ifood-analytics .ifa-leituras li.alerta b{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .hub-ifood-analytics .ifa-leituras li.atencao b{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} .hub-ifood-analytics .ifa-fonte{font-size:calc(0.8125rem * var(--dt,1));color:var(--label2,#6B5A4C);margin:14px 0 0} .hub-ifood-analytics .ifa-campos{display:flex;flex-wrap:wrap;gap:8px 16px} .hub-ifood-analytics .ifa-check{flex-direction:row;align-items:center;gap:8px} .hub-ifood-analytics .ifa-linha{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:10px} .hub-ifood-analytics .ifa-linha label{flex:0 1 240px} .hub-ifood-analytics .ifa-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .hub-ifood-analytics .ifa-dl{display:grid;grid-template-columns:minmax(160px,max-content) 1fr;gap:6px 16px;margin:0;font-size:calc(0.875rem * var(--dt,1))} .hub-ifood-analytics .ifa-dl dt{color:var(--label2,#6B5A4C)}.hub-ifood-analytics .ifa-dl dd{margin:0;overflow-wrap:anywhere} .hub-ifood-analytics .ifa-chamada{border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:12px;padding:8px 12px;margin:6px 0;font-size:calc(0.875rem * var(--dt,1))} .hub-ifood-analytics .ifa-chamada summary{cursor:pointer;list-style:revert} .hub-ifood-analytics .ifa-chamada.ok summary span{color:var(--d-verdeagua-t,#006F5D)}.hub-ifood-analytics .ifa-chamada.falha summary span{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .hub-ifood-analytics pre{white-space:pre-wrap;word-break:break-all;background:var(--surface2,#F7F3EE);padding:8px;border-radius:10px;font-size:var(--f-caption1);max-height:320px;overflow:auto} .hub-ifood-analytics button:focus-visible,.hub-ifood-analytics input:focus-visible,.hub-ifood-analytics select:focus-visible,.hub-ifood-analytics textarea:focus-visible,.hub-ifood-analytics summary:focus-visible,.hub-ifood-analytics .ifa-col:focus-visible{outline:3px solid var(--acao,#1F5FD0);outline-offset:2px} @media (forced-colors:active){.hub-ifood-analytics .ifa-trilho i,.hub-ifood-analytics .ifa-col i{background:CanvasText}} @media(max-width:700px){.hub-ifood-analytics .ifa-dl{grid-template-columns:1fr}.hub-ifood-analytics .ifa-barras th{width:42%}.hub-ifood-analytics .hj-sub .ifa-id{display:none}.hub-ifood-analytics .ifa-kpi>b{font-size:calc(1.3125rem * var(--dt,1))}} /* cartão do Dashboard */ .ifa-cartao .dt .btn{margin-left:auto;min-height:36px;font-size:calc(0.8125rem * var(--dt,1))} .ifa-cartao .dt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px} /* /cancelar-parte.css */ /* 1.68.0: Cancelar parte do pedido (web/cancelar-parte.js). Mesma linguagem visual do Sob Demanda (on-demand.css). */ .hub-cancelar-parte{color:var(--label,#2A1C12);background:var(--surface2,#F7F3EE);border:1px solid var(--sep,color-mix(in srgb,var(--label,#2A1C12) 13%,transparent));border-radius:24px;padding:0;width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 24px);box-shadow:0 24px 80px color-mix(in srgb,light-dark(var(--label,#2A1C12),var(--page,#F7F5F1)) 30%,transparent)} .hub-cancelar-parte[open]{display:flex;flex-direction:column} .hub-cancelar-parte::backdrop{background:color-mix(in srgb,var(--label,#2A1C12) 45%,transparent);backdrop-filter:blur(6px)} .hub-cancelar-parte header,.hub-cancelar-parte footer{flex:none;display:flex;gap:12px;align-items:center;padding:16px 20px;background:var(--surface,#FFFFFF)} .hub-cancelar-parte header{justify-content:space-between;border-bottom:1px solid var(--sep,color-mix(in srgb,var(--label,#2A1C12) 13%,transparent))} .hub-cancelar-parte footer{justify-content:flex-end;flex-wrap:wrap;border-top:1px solid var(--sep,color-mix(in srgb,var(--label,#2A1C12) 13%,transparent))} .hub-cancelar-parte h2{margin:2px 0 0;font-size:calc(1.375rem * var(--dt));font-weight:750} .hub-cancelar-parte .cp-sobre{margin:0;font-size:calc(0.8125rem * var(--dt));color:var(--label2,#6B5A4C)} .hub-cancelar-parte header .icon{color:var(--label,#2A1C12);background:var(--fill,color-mix(in srgb,var(--label,#2A1C12) 8%,transparent));width:44px;height:44px;flex:none;border-radius:50%;border:0;font-size:calc(1.5625rem * var(--dt));cursor:pointer} .hub-cancelar-parte .cp-corpo{flex:1;overflow:auto;overscroll-behavior:contain;padding:14px 20px;min-height:0} .hub-cancelar-parte .cp-dica{margin:0 0 10px;font-size:calc(0.875rem * var(--dt));color:var(--label2,#6B5A4C);line-height:1.4} .hub-cancelar-parte .cp-aviso{margin:0;padding:12px 14px;border-radius:14px;background:var(--surface,#FFFFFF);font-size:calc(0.9375rem * var(--dt));line-height:1.45} .hub-cancelar-parte .cp-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px} .hub-cancelar-parte .cp-linha{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--surface,#FFFFFF)} .hub-cancelar-parte .cp-linha.cp-feita{opacity:.6} .hub-cancelar-parte .cp-nome{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:calc(0.9375rem * var(--dt))} .hub-cancelar-parte .cp-nome span{font-size:calc(0.8125rem * var(--dt));color:var(--label2,#6B5A4C)} .hub-cancelar-parte .cp-nome .cp-ja{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#2A1C12))} /* 1.72.0: a cor do sistema é para preenchimento; texto usa a tinta */ .hub-cancelar-parte .cp-qtd{display:inline-flex;align-items:center;gap:6px} .hub-cancelar-parte .cp-qtd button{width:44px;height:44px;border-radius:50%;border:0;background:var(--fill,color-mix(in srgb,var(--label,#2A1C12) 8%,transparent));color:inherit;font-size:calc(1.375rem * var(--dt));cursor:pointer} .hub-cancelar-parte .cp-qtd button:disabled{opacity:.35;cursor:default} .hub-cancelar-parte .cp-qtd output{min-width:2ch;text-align:center;font-size:calc(1.125rem * var(--dt));font-weight:700;font-variant-numeric:tabular-nums} .hub-cancelar-parte .cp-pausa{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:calc(0.875rem * var(--dt))} .hub-cancelar-parte .cp-pausa input{width:22px;height:22px} .hub-cancelar-parte .cp-motivo{display:flex;flex-direction:column;gap:5px;margin-top:12px;font-size:calc(0.875rem * var(--dt))} .hub-cancelar-parte .cp-motivo input{font:inherit;color:inherit;background:var(--surface,#FFFFFF);border:1px solid var(--sep,color-mix(in srgb,var(--label,#2A1C12) 13%,transparent));border-radius:12px;min-height:44px;padding:9px 10px;box-sizing:border-box;width:100%} .hub-cancelar-parte .cp-resultado{margin-top:12px;padding:12px 14px;border-radius:14px;font-size:calc(0.9375rem * var(--dt));line-height:1.45} .hub-cancelar-parte .cp-resultado.ok{background:color-mix(in srgb,var(--verde,#11994A) 13%,transparent)} .hub-cancelar-parte .cp-resultado.erro{background:color-mix(in srgb,var(--queda,#E21D3C) 13%,transparent);border-left:4px solid var(--queda,#E21D3C)} .hub-cancelar-parte .cp-resultado ul{margin:6px 0 0 18px;padding:0;font-size:var(--f-caption1)} .hub-cancelar-parte .btn{min-height:44px} .hub-cancelar-parte button:focus-visible,.hub-cancelar-parte input:focus-visible{outline:3px solid var(--acao,#1F5FD0);outline-offset:2px} @media(max-width:600px){.hub-cancelar-parte header,.hub-cancelar-parte footer,.hub-cancelar-parte .cp-corpo{padding:12px}.hub-cancelar-parte .cp-linha{grid-template-columns:1fr}} /* AU-XK-FICHA-01: folha do pedido v17. O render legado e suas ações não mudam. */ html #omodal.modal:has(#oc .ficha-v2){padding:12px;align-items:stretch;justify-content:flex-end} html #omodal #oc:has(.ficha-v2){width:460px;max-width:100%;height:100%;max-height:100%;padding:0;overflow:hidden;border-radius:26px;background:var(--ficha-vidro);color:var(--ficha-texto)} #oc:has(.ficha-v2),.ficha-v2-folha{--ficha-texto:#323200;--ficha-sub:#6B5A4C;--ficha-card:#fff;--ficha-fundo:#F7F3EE;--ficha-vidro:rgba(250,248,245,.96);--ficha-acao:#1F5FD0;--ficha-queda:#B92D40} :is([data-theme=dark],[data-tema=escuro],body.dark) #oc:has(.ficha-v2),:is([data-theme=dark],[data-tema=escuro],body.dark) .ficha-v2-folha{--ficha-texto:#F5EFE8;--ficha-sub:#CBBFB3;--ficha-card:#221F1C;--ficha-fundo:#2A2622;--ficha-vidro:rgba(34,30,27,.97);--ficha-acao:#3D8BFF;--ficha-queda:#FF8F9D} .ficha-v2{height:100%;display:flex;flex-direction:column;font-size:calc(1rem * var(--dt,1));line-height:1.4;isolation:isolate} .ficha-v2 *{box-sizing:border-box;min-width:0} #oc .ficha-cab{flex:none;display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;margin:0;background:transparent;border:0;position:relative;top:auto} #oc .ficha-cab .n{font-size:24px;color:var(--ficha-texto)} #oc .ficha-cab .tot{font-size:14px;margin-left:auto} #oc .ficha-cab .x{position:static;margin-left:auto;width:44px;height:44px;flex:none;border-radius:50%;color:var(--ficha-texto);background:var(--ficha-fundo)} #oc .ficha-cab .fiscal-oh{display:none} .ficha-corpo{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 16px 16px;display:flex;flex-direction:column;gap:12px;scrollbar-gutter:stable} #oc .ficha-v2 .orow{display:flex;flex-wrap:wrap;gap:6px;margin:0;font-size:14px;color:var(--ficha-sub)} #oc .ficha-v2 .orow>b{font-size:14px;color:var(--ficha-texto);white-space:normal;overflow-wrap:anywhere} .ficha-bloco{flex:none;background:var(--ficha-card);padding:12px 13px;border-radius:16px;overflow-wrap:anywhere} .ficha-bloco h3{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ficha-sub);margin:0 0 8px;font-weight:720} .ficha-bloco>div+div{margin-top:6px} #oc .ficha-v2 .drv,#oc .ficha-v2 .steps{margin:0} #oc .ficha-v2 .flav,#oc .ficha-v2 .fl{font-size:28px;white-space:normal} #oc .ficha-v2 .tl{padding:0;background:transparent} #oc .ficha-v2 .tlh{font-size:14px;margin:8px 0} #oc .ficha-v2 .tli{font-size:14px;padding-bottom:10px} #oc .ficha-v2 .oinfo{flex:none;margin:0;padding:12px 13px;border-radius:16px;background:var(--ficha-card);font-size:14px;overflow-wrap:anywhere} #oc .ficha-v2 .pickup{color:var(--ficha-sub);background:var(--ficha-fundo)} #oc .ficha-v2 .pickup.alerta{color:var(--ficha-queda);background:color-mix(in srgb,var(--d-coral,#F24A5E) 12%,var(--ficha-card))} #oc .ficha-v2 .extrato{border-radius:16px;background:var(--ficha-card);padding:12px 13px} #oc .ficha-v2 .xl{gap:10px;align-items:flex-start;flex-wrap:wrap} #oc .ficha-v2 .xl>span{flex:1 1 180px;overflow-wrap:anywhere} #oc .ficha-v2 .xl>b{white-space:nowrap} .ficha-acoes{flex:none;display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px 16px;max-height:40%;overflow:auto;background:var(--ficha-vidro)} #oc .ficha-v2 .btn,.ficha-v2-folha .btn{min-height:44px;height:auto;padding:10px 12px;border-radius:12px;white-space:normal;overflow-wrap:anywhere;background:var(--ficha-fundo);color:var(--ficha-texto);font-size:14px} #oc .ficha-v2 .btn.primary{background:var(--ficha-acao);color:#fff;flex:1} #oc .ficha-v2 .btn.danger{color:var(--ficha-queda)} #oc .ficha-v2 button:focus-visible{outline:3px solid var(--ficha-acao);outline-offset:2px} .ficha-v2-folha.hub-cancelar-parte{margin:12px 12px 12px auto;width:460px;height:calc(100dvh - 24px);max-height:none;border-radius:26px;background:var(--ficha-vidro);color:var(--ficha-texto)} .ficha-v2-folha.hub-cancelar-parte header,.ficha-v2-folha.hub-cancelar-parte footer{background:transparent} .ficha-v2-folha .cp-linha{background:var(--ficha-card);overflow-wrap:anywhere} .ficha-v2-folha .cp-qtd{flex-wrap:wrap} @media(max-width:600px){ html #omodal.modal:has(#oc .ficha-v2){padding:0;align-items:flex-end} html #omodal #oc:has(.ficha-v2){width:100%;height:88dvh;max-height:100dvh;border-radius:26px 26px 0 0} .ficha-acoes{padding-bottom:max(12px,env(safe-area-inset-bottom))} .ficha-v2-folha.hub-cancelar-parte{margin:auto 0 0;width:100%;max-width:100%;height:88dvh;border-radius:26px 26px 0 0} .ficha-v2-folha .cp-linha{grid-template-columns:minmax(0,1fr)} } @media(prefers-reduced-motion:reduce){.ficha-v2,.ficha-v2-folha,.ficha-v2 *{animation:none!important;transition:none!important;scroll-behavior:auto!important}} #oc .ficha-acoes>.btn{flex:0 1 auto;max-width:100%;min-width:44px;line-height:1.35} #oc .ficha-acoes>.btn.primary{flex:1 1 220px} #oc .ficha-v2 .stpill,#oc .ficha-v2 .cnt{background:var(--ficha-fundo);color:var(--ficha-texto)} #oc .ficha-v2 .cnt.bv{background:color-mix(in srgb,var(--ficha-acao) 12%,var(--ficha-card));color:var(--ficha-acao)} /* A alça pertence ao cabeçalho; não pode empurrar o rodapé para fora da folha. */ html #omodal #oc:has(.ficha-v2)::before{display:none} html #omodal #oc .ficha-cab .x{width:44px;height:44px;min-width:44px;min-height:44px} /* Negociação e reembolso usam o mesmo motor, com prazo e respostas fixos. */ #acao-card-fundo.ficha-v2-folha{padding:12px;align-items:stretch;justify-content:flex-end} #acao-card-fundo.ficha-v2-folha #acao-card{width:460px;max-width:100%;height:100%;max-height:100%;border-radius:26px;background:var(--ficha-vidro);color:var(--ficha-texto)} #acao-card-fundo.ficha-v2-folha .ac-corpo{overflow-wrap:anywhere;background:var(--ficha-card)} #acao-card-fundo.ficha-v2-folha .btn{min-height:44px;white-space:normal} @media(max-width:600px){#acao-card-fundo.ficha-v2-folha{padding:0;align-items:flex-end}#acao-card-fundo.ficha-v2-folha #acao-card{width:100%;height:88dvh;border-radius:26px 26px 0 0}} /* O tamanho da folha é fixo: a composição interna não precisa relayoutar a página de trás. */ html #omodal #oc:has(.ficha-v2){contain:layout style paint} #oc .ficha-v2 .cod99-num,#oc .ficha-v2 .pickup b,#oc .ficha-v2 .cd2{font-size:16px} /* Folhas com tamanho definido: a mudança interna não recalcula o quadro de pedidos. */ .ficha-v2-folha.hub-cancelar-parte,#acao-card-fundo.ficha-v2-folha #acao-card{contain:layout style paint} /* A folha fixa não pode acompanhar a rolagem programática do body da casca. */ html body[data-hub-ficha="v2"]:is(#hub-esp.hub-esp,*){overflow:clip} /* Pedido entregue: cancelar fica visível e apagado, com a frase curta ao lado (web/pedido-inteiro.js). */ .ficha-acoes>[data-entregue="1"]{opacity:.5;cursor:not-allowed} .ficha-acoes>.ficha-cancelar-aviso{flex:1 1 100%;font-size:12.5px;line-height:1.35;color:var(--muted,#6b6b6b)} /* /philippe-orb.css */ /* Identidade original do Philippe. O arquivo PNG permanece intacto e local. */ .philippe-brain{position:relative;display:inline-block;flex:none;width:40px;height:44px;isolation:isolate;pointer-events:none;transform-origin:50% 50%} .philippe-brain img,.top .brand .philippe-brain img{display:block;width:100%;height:100%;object-fit:contain;opacity:1;transform:none;filter:none;animation:none;transition:none} /* 1.74.0 (Philippe, 03/10/2026, desempenho): a corrente (um SVG animado, com filtro de brilho) ficava com opacidade zero mas VISÍVEL para o navegador, que seguia animando e pintando a imagem a cada quadro: no Dashboard e no Financeiro parados eram 100 recálculos de estilo e 50 pinturas por segundo sem nada mudar na tela. Com visibility:hidden a animação do SVG para; ela só volta quando o Cérebro está ligado (body.ai-on), que é quando a corrente aparece. */ .philippe-brain::after{content:"";position:absolute;inset:0;background:url("/assets/philippe-brain-current.svg") center/contain no-repeat;opacity:0;visibility:hidden;pointer-events:none} body.ai-on .philippe-brain img,body.ai-on .top .brand .philippe-brain img{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--d-amarelo,#F2B000) 90%,transparent)) drop-shadow(0 0 5px color-mix(in srgb,var(--d-laranja,#F57A1C) 42%,transparent))} #aibtn>.philippe-brain{display:none;position:absolute;left:50%;top:50%;margin:-22px 0 0 -20px} body.ai-on #aibtn>.philippe-brain{display:block} body.ai-on .top .brand .philippe-brain img{opacity:1;transform:none;animation:none} .ws-composer .ws-brain{display:none;width:30px;height:34px;margin-left:2px} body.ai-kds .ws-composer .ws-brain{display:inline-block} body.ai-on .philippe-brain{animation:philippe-brain-breathe 3.6s ease-in-out infinite} body.ai-on .philippe-brain::after{visibility:visible;animation:philippe-brain-energy 3.6s ease-in-out infinite} @keyframes philippe-brain-breathe{0%,100%{transform:scale(.98)}50%{transform:scale(1.025)}} /* A corrente percorre os sulcos no SVG local; o PNG original nao se altera. */ @keyframes philippe-brain-energy{0%,100%{opacity:.7}50%{opacity:1}} @media(prefers-reduced-motion:reduce){.philippe-brain,.philippe-brain::after,body.ai-on .philippe-brain,body.ai-on .philippe-brain::after{animation:none!important;transform:none}.philippe-brain::after{background-image:none;opacity:0}} /* /ai-menu.css */ /* O item e o retorno da acao precedem os controles de consulta. */ .ai-menu{display:flex;flex-direction:column;gap:12px;min-height:0;color:var(--ws-ink,var(--label,#323200))} .ai-menu-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .ai-menu-filters label{display:flex;flex-direction:column;gap:4px;font-size:calc(0.8125rem * var(--dt));font-weight:600;min-width:0} .ai-menu-filters select{min-width:0;width:100%;min-height:44px;border:0;border-radius:10px;padding:8px;color:inherit;background:var(--ws-soft,color-mix(in srgb,var(--label3,#9C8D80) 10%,transparent));font:inherit} .ai-menu-summary,.ai-menu-source,.ai-menu-composition{margin:0;line-height:1.4} .ai-menu .ai-menu-summary{font-size:calc(0.875rem * var(--dt));font-weight:550;margin:0} .ai-menu-batch{display:flex;flex-wrap:wrap;gap:8px} .ai-menu button{min-height:44px;border:0;border-radius:12px;padding:8px 12px;background:var(--ws-soft,color-mix(in srgb,var(--label3,#9C8D80) 10%,transparent));color:inherit;font:inherit;font-weight:600;cursor:pointer} .ai-menu button:disabled{opacity:.65;cursor:wait} .ai-menu-list{display:flex;flex-direction:column;gap:10px;overflow:auto;overscroll-behavior:contain;min-height:0;max-height:420px} .ai-menu-item{border:0;border-radius:16px;padding:14px;background:var(--ws-soft,color-mix(in srgb,var(--label3,#9C8D80) 7.5%,transparent))} .ai-menu-item h4{font-size:calc(1.125rem * var(--dt));line-height:1.25;margin:0;font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere} .ai-menu-item-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;flex-wrap:wrap} .ai-menu-unit{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0} .ai-menu-unit>div{min-width:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center} .ai-menu-unit strong{font-size:calc(0.875rem * var(--dt))} .ai-menu-state{font-size:calc(0.8125rem * var(--dt));font-weight:650;border-radius:8px;padding:4px 7px;background:var(--surface,#FFFFFF)} .ai-menu-state.is-paused{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))}.ai-menu-state.is-active{color:var(--d-verdeagua-t,#006F5D)} .ai-menu-unit small{display:block;flex-basis:100%;font-size:calc(0.8125rem * var(--dt));line-height:1.4;overflow-wrap:anywhere} .ai-menu-source,.ai-menu-composition{font-size:calc(0.8125rem * var(--dt))!important;color:var(--ws-secondary,var(--label2,#6B5A4C))} .ai-menu button:focus-visible,.ai-menu select:focus-visible,.ai-menu summary:focus-visible{outline:3px solid var(--acao,#1F5FD0);outline-offset:2px} .ai-menu-filterbox{flex-shrink:0}.ai-menu-filterbox summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:calc(0.875rem * var(--dt));font-weight:600;color:var(--ws-secondary,var(--label2,#6B5A4C))} .ai-menu-filterbox summary:before{content:"›";margin-right:8px;font-size:calc(1.25rem * var(--dt))}.ai-menu-filterbox[open] summary:before{transform:rotate(90deg)} .ai-menu-fixed-unit{display:flex;flex-direction:column;gap:4px;font-size:calc(0.8125rem * var(--dt))}.ai-menu-fixed-unit strong{font-size:calc(0.9375rem * var(--dt));min-height:44px;display:flex;align-items:center} .ai-menu-history{font-size:max(0.6875rem, calc(0.75rem * var(--dt)))!important;line-height:1.4;margin:4px 0!important;color:var(--ws-secondary,var(--label2,#6B5A4C))} .ai-menu-operation{display:flex;align-items:center;gap:12px;color:var(--ws-accent,var(--d-verdeagua-t,#006F5D));padding:4px 0} .ai-menu-operation>svg,.ai-menu-spinner{box-sizing:border-box;width:30px;height:30px;flex:none}.ai-menu-operation>svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ai-menu-operation>div{display:flex;flex-direction:column;gap:4px}.ai-menu-operation strong{font-size:calc(1.125rem * var(--dt));line-height:1.3;font-weight:700}.ai-menu-operation span:not(.ai-menu-spinner){font-size:calc(0.8125rem * var(--dt));color:var(--ws-secondary,var(--label2,#6B5A4C))} .ai-menu-operation.is-error{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}.ai-menu-spinner{border-radius:50%;border:3px solid color-mix(in srgb,currentColor 20%,transparent);border-top-color:currentColor;animation:menu-progress .85s linear infinite} .ai-menu.has-operation .ai-menu-list{order:initial;max-height:none;flex-shrink:0;overflow:visible} .ai-menu.has-operation .ai-menu-item.is-target{padding:14px 16px;border-radius:18px}.ai-menu.has-operation .ai-menu-item h4{font-size:clamp(1.375rem,2vw,1.75rem)} .ai-menu.is-single.has-operation .ai-menu-item{background:none;padding:4px 0}.ai-menu.is-single.has-operation .ai-menu-item h4{font-size:clamp(1.625rem,2.4vw,2.125rem)} .ai-menu.has-operation .ai-menu-filterbox{padding-top:4px}.ai-menu-progress{font-size:calc(0.8125rem * var(--dt));font-weight:650;color:var(--ws-secondary,var(--label2,#6B5A4C))} .ai-menu.is-compact{gap:8px}.ai-menu.is-compact .ai-menu-list{max-height:none;overflow:visible;flex-shrink:0}.ai-menu.is-compact .ai-menu-item{padding:10px}.ai-menu.is-compact .ai-menu-unit{padding:4px 0} .ws-widget:has(.ai-menu.has-operation){align-self:start}.ws-widget:has(.ai-menu.has-operation) .ws-widget-body{flex:0 1 auto} body.dark .ai-menu-state{background:var(--surface2,#F7F3EE)}body.dark .ai-menu-state.is-paused{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))}body.dark .ai-menu-state.is-active{color:var(--d-verdeagua-t,#006F5D)}body.dark .ai-menu-operation.is-error{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} @keyframes menu-progress{to{transform:rotate(360deg)}} @media(max-width:460px){.ai-menu-filters{gap:6px}.ai-menu-unit{gap:8px}.ai-menu-item{padding:10px}.ai-menu button{font-size:calc(0.875rem * var(--dt))}.ai-menu-batch button{flex:1}.ai-menu-unit button{flex-shrink:0}} @media(prefers-reduced-motion:reduce){.ai-menu-spinner{animation:none}} /* /store-status.css */ /* Controles funcionais de situação e etapas. Conteúdo dos pedidos permanece opaco. */ #unitlabel{gap:7px;min-height:44px;cursor:pointer;max-width:100%} .ss-header-state{font-size:var(--f-caption2);color:var(--label2,#6B5A4C);font-weight:500} #unitlabel .ss-led-open{background:var(--verde,#11994A)} #unitlabel .ss-led-paused,#unitlabel .ss-led-restricted{background:var(--queda,#E21D3C)} #unitlabel .ss-led-mixed,#unitlabel .ss-led-pending{background:var(--d-ambar,#C27A00)} #unitlabel .ss-led-unknown,#unitlabel .ss-led-not_configured{background:var(--label3,#9C8D80)} .store-status-popover{position:fixed;z-index:1400;top:72px;left:16px;width:min(430px,calc(100vw - 32px));max-height:calc(100dvh - 90px);overflow:auto;border:0;border-radius:24px;padding:20px;box-shadow:var(--shadow);color:var(--label,#2A1C12)} .ss-pop-head,.ss-unit-head{display:flex;align-items:center;justify-content:space-between;gap:12px} .ss-pop-head h2{margin:0;font-size:var(--f-title3)} .ss-pop-head button{width:44px;height:44px;flex-shrink:0} .ss-source{font-size:var(--f-caption1);line-height:1.45;color:var(--label2,#6B5A4C);margin:8px 0 16px} .ss-unit{padding:14px 0;border-top:1px solid var(--sep,color-mix(in srgb,var(--label,#2A1C12) 13%,transparent))} .ss-unit-head{flex-wrap:wrap;gap:6px} .ss-unit h3{font-size:var(--f-headline);margin:0} .ss-badge{font-size:var(--f-caption1);font-weight:600;display:inline-flex;gap:6px;align-items:center} .ss-badge i{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:var(--label3,#9C8D80)} .ss-open i{background:var(--verde,#11994A)}.ss-paused i,.ss-restricted i{background:var(--queda,#E21D3C)}.ss-mixed i,.ss-pending i{background:var(--d-ambar,#C27A00)} .ss-detail,.ss-feedback,.ss-error,.ss-empty{font-size:var(--f-subhead);line-height:1.45;margin:8px 0 0} .ss-detail{color:var(--label2,#6B5A4C)}.ss-error{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#2A1C12))} .ss-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.ss-actions:empty{display:none} .ss-actions .btn{min-height:44px;white-space:normal} .ss-actions button:disabled{opacity:.6;cursor:wait} .store-status-card button:focus-visible,#kstate-control button:focus-visible,#unitlabel:focus-visible{outline:3px solid var(--acao,#1F5FD0);outline-offset:3px} #kstate-control{position:relative;display:flex;align-items:center;flex-shrink:0;min-width:0} #kstate-trigger{border:0;border-radius:14px;min-height:44px;padding:9px 12px;display:inline-flex;align-items:center;gap:8px;color:var(--label,#2A1C12);font:inherit;font-size:var(--f-subhead);cursor:pointer;white-space:nowrap} #kstate-trigger svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #kstate-trigger b{font-size:var(--f-caption1);color:var(--label2,#6B5A4C)} #kstate-control #ktabs{display:none} #kstate-control.expanded #ktabs{position:absolute;display:flex;left:100%;top:0;margin-left:6px;z-index:60;max-width:calc(100vw - 210px);overflow-x:auto;box-shadow:var(--shadow);border:0;min-height:44px} #kstate-control #ktabs button{min-width:44px;min-height:44px;flex-shrink:0} #kstate-control #ktabs button.on{display:none} @media(max-width:700px){.ss-header-state{display:none}.store-status-popover{top:66px}#kstate-trigger{gap:6px;padding:8px 10px}#kstate-control.expanded #ktabs{max-width:calc(100vw - 180px)}} @media(prefers-reduced-motion:reduce){.store-status-popover,#kstate-control *{animation:none!important;transition:none!important}} body.view-kds #curview{display:none} /* 1.62.0: vidro grosso do sistema (tokens em index.html, bloco apple-vidro-1620); o escuro vem do token */ .store-status-popover.glass{background:var(--vidro-grosso,color-mix(in srgb,var(--surface,#FFFFFF) 80%,transparent));backdrop-filter:blur(var(--vidro-desfoque,24px)) saturate(var(--vidro-saturacao,180%));-webkit-backdrop-filter:blur(var(--vidro-desfoque,24px)) saturate(var(--vidro-saturacao,180%))} .store-status-popover .ss-source{color:var(--label,#2A1C12);opacity:.82} /* A unidade ocupa o cabecalho. As plataformas aparecem dentro do controle. */ /* 1.70.0 (auditoria, 29/09/2026): a "respiração" da bolinha verde animava box-shadow sem parar. Box-shadow não anda na placa de vídeo: eram 60 recálculos de estilo e pinturas por segundo em toda tela onde a bolinha aparece (celular e monitor de toque das lojas), com a tela parada, medido pelo tools/auditoria/desempenho.py. O mesmo halo agora é um ::after que só muda a opacidade, que o navegador anima fora da thread da tela. Mesmo desenho, mesmo ritmo. */ #unitlabel .ss-led-open{position:relative} #unitlabel .ss-led-open::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:color-mix(in srgb,var(--verde,#11994A) 13%,transparent);opacity:0;pointer-events:none;animation:store-open-breathe 2.6s ease-in-out infinite} @keyframes store-open-breathe{50%{opacity:1}} .ss-unit[hidden]{display:none!important} .ss-unit-switch{display:flex;gap:4px;padding:4px;margin-top:14px;background:var(--fill,color-mix(in srgb,var(--label,#2A1C12) 8%,transparent));border-radius:16px} .ss-unit-switch button{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;min-width:0;min-height:44px;padding:8px;border:0;border-radius:12px;background:none;color:inherit;font:inherit;font-size:var(--f-subhead);font-weight:600;cursor:pointer} .ss-unit-switch button[aria-pressed=true]{background:var(--surface,#FFFFFF);box-shadow:0 1px 3px color-mix(in srgb,light-dark(var(--label,#2A1C12),var(--page,#F7F5F1)) 14%,transparent)} body.dark .ss-unit-switch button[aria-pressed=true]{background:var(--sys-gray4)} .ss-platforms{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px} .ss-platform{padding:14px;border-radius:16px;background:var(--fill,color-mix(in srgb,var(--label,#2A1C12) 8%,transparent))} .ss-platform-line{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:var(--f-headline);font-weight:650} .ss-platform-line>span{min-width:0;overflow-wrap:anywhere}.ss-platform-line b{font-weight:500} .ss-platform-dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--label3,#9C8D80);display:inline-block} .ss-dot-open{background:var(--verde,#11994A)}.ss-dot-paused,.ss-dot-restricted{background:var(--queda,#E21D3C)}.ss-dot-pending,.ss-dot-mixed{background:var(--d-ambar,#C27A00)} .ss-platform-detail{margin-top:7px}.ss-platform-detail small{font-size:var(--f-caption1);line-height:1.45;color:var(--label2,#6B5A4C)} .ss-platform .ss-actions .btn{width:100%;justify-content:center} .ss-unit-switch button:focus-visible{outline:3px solid var(--acao,#1F5FD0);outline-offset:2px} @media(prefers-reduced-motion:reduce){#unitlabel .ss-led-open,#unitlabel .ss-led-open::after{animation:none}} /* 1.63.3: 99Food sempre online, uma linha por loja da 99Food (web/store-status.js vigiaBody) */ .ss-vigia{margin-top:8px} .ss-vigia-lista{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px} .ss-vigia-loja{display:flex;gap:8px;align-items:flex-start;font-size:var(--f-footnote,calc(0.8125rem * var(--dt,1)))} .ss-vigia-loja .ss-platform-dot{margin-top:5px} .ss-vigia-loja small{display:block;color:var(--label2,#6B5A4C);font-size:var(--f-caption1,calc(0.75rem * var(--dt,1)))} /* 1.74.0: a escolha de como contar cada loja do iFood (automático, sempre, nunca) respira abaixo do texto da loja */ .ss-vigia-loja .ss-reasons{margin-top:8px} /* 1.68.1: pausar e reabrir a unidade pelo card da situação (web/store-status.js, unitActions) */ .ss-unit-actions{margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid var(--sep,color-mix(in srgb,var(--label,#2A1C12) 13%,transparent))} /* 1.74.0: a confirmação do fechar geral (e, na tela sem servidor, a da pausa antiga) */ .ss-unit-actions .ss-pause-q{margin:0 0 8px} .ss-reasons{display:flex;flex-wrap:wrap;gap:6px} .ss-reasons button{min-height:44px;padding:6px 12px;border-radius:999px;border:1px solid var(--sep,color-mix(in srgb,var(--label,#2A1C12) 13%,transparent));background:var(--surface,#FFFFFF);color:inherit;font:inherit;font-size:var(--f-subhead);cursor:pointer} .ss-reasons button[aria-checked=true]{background:var(--label,#2A1C12);color:var(--surface,#FFFFFF);border-color:transparent;font-weight:600} .ss-reasons button:focus-visible,.ss-unit-actions .btn:focus-visible{outline:3px solid var(--acao,#1F5FD0);outline-offset:2px} /* 1.74.0 (Philippe, 05/10/2026, quinta rodada, L1 a L4): A PEÇA DOS CANAIS (web/store-status.js, canaisHTML), a mesma na Situação das lojas e na tela de Integrações. Uma lista agrupada por unidade, no desenho das listas do iPhone: a linha geral (a loja e Fechar loja ou Abrir loja, botão cheio) e uma linha por canal (iFood, 99Food, Site próprio) com a situação à esquerda e a ação em texto à direita. Conteúdo, então sólido (nada de vidro); linhas de 44 px, que são o próprio alvo do toque (as duas unidades cabem juntas num cartão de celular); a cor diz a ação (tinta vermelha fecha, tinta azul abre) e o texto diz o estado; o rótulo quebra em duas linhas quando o texto está em 130% ou a tela tem 320 px, sem rolagem lateral. */ .ssc{display:grid;gap:10px;margin:14px 0 2px;min-width:0;--ssc-fecha:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#2A1C12));--ssc-abre:var(--acao,#1F5FD0)} /* no escuro a tinta vermelha do sistema fica em 4,3:1 sobre o grupo (3,7:1 no botão cheio): mais clara, passa de 4,5:1 */ body.dark .ssc{--ssc-fecha:color-mix(in srgb,var(--queda,#E21D3C) 45%,var(--label,#2A1C12))} .ssc-unidade{min-width:0;padding:0 14px;border-radius:16px;background:var(--fill,color-mix(in srgb,var(--label,#2A1C12) 8%,transparent))} .ssc-linha{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;min-width:0} .ssc-linha+.ssc-linha{border-top:1px solid var(--sep,color-mix(in srgb,var(--label,#2A1C12) 13%,transparent))} .ssc-geral{min-height:52px} .ssc-nome{display:grid;gap:1px;min-width:0;padding:4px 0} .ssc-nome b{font-size:var(--f-subhead);font-weight:600;line-height:1.25;overflow-wrap:anywhere} .ssc-geral .ssc-nome b{font-size:var(--f-headline);font-weight:700} .ssc-nome small{display:flex;align-items:center;gap:6px;font-size:var(--f-caption1);line-height:1.3;color:var(--label2,#6B5A4C)} .ssc-nome small.ssc-motivo{display:block;overflow-wrap:anywhere} .ssc-nome small.ss-error,.ssc-resumo.ss-error{color:var(--ssc-fecha)} .ssc-p-aberto{background:var(--verde,#11994A)}.ssc-p-fechado,.ssc-p-falha{background:var(--queda,#E21D3C)}.ssc-p-parte,.ssc-p-fechando,.ssc-p-abrindo{background:var(--d-ambar,#C27A00)} .ssc-botao{flex:none;max-width:62%;min-height:44px;margin:0;padding:6px 0 6px 10px;border:0;background:none;color:var(--ssc-abre);font:inherit;font-size:var(--f-subhead);font-weight:600;line-height:1.2;text-align:right;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .12s ease-out} .ssc-botao.ssc-fechar{color:var(--ssc-fecha)} .ssc-botao:active:not(:disabled),.ssc-geral-botao:active:not(:disabled){opacity:.55} .ssc-botao:disabled,.ssc .ssc-geral-botao:disabled{opacity:.5;cursor:default} .ssc .ssc-geral-botao{flex:none;min-height:44px;padding:8px 16px;border:0;border-radius:999px;box-shadow:none;font-size:var(--f-subhead);font-weight:600;white-space:nowrap} .ssc .ssc-geral-botao.danger,body.dark .ssc .ssc-geral-botao.danger{background:color-mix(in srgb,var(--queda,#E21D3C) 15%,transparent);color:var(--ssc-fecha)} .ssc .ssc-geral-botao.primary,body.dark .ssc .ssc-geral-botao.primary{background:var(--acao,#1F5FD0);color:var(--label,#2A1C12)} /* 1.74.0 (segunda fase, L6): com parte da loja fechada a linha geral tem os dois botões (Fechar loja e Abrir loja). Onde não cabem ao lado do nome (320 px, texto em 130%) descem juntos para a linha de baixo, inteiros, com os mesmos 44 px. */ .ssc-geral-dois{flex-wrap:wrap;row-gap:0} .ssc-geral-acoes{display:flex;flex:none;gap:8px;margin-left:auto;padding:4px 0} .ssc .ssc-geral-acoes .ssc-geral-botao{padding:8px 12px} .ssc-geral-dois .ssc-nome{padding:8px 0 4px} .ssc-resumo{margin:0;padding:10px 0 12px;border-top:1px solid var(--sep,color-mix(in srgb,var(--label,#2A1C12) 13%,transparent));font-size:var(--f-caption1);line-height:1.4;color:var(--label2,#6B5A4C)} .ssc-confirma{padding:14px} .ssc-confirma .ss-unit-actions{margin:0;padding:0;border:0} .ssc-confirma .ss-pause-q{margin:0 0 10px;color:var(--label,#2A1C12)} .ssc-confirma .btn.danger,body.dark .ssc-confirma .btn.danger{color:var(--ssc-fecha)} .ssc-botao:focus-visible,.ssc-geral-botao:focus-visible{outline:3px solid var(--acao,#1F5FD0);outline-offset:2px;border-radius:8px} /* 1.74.0 (segunda fase, L3): a peça dentro de um cartão das Configurações (o cartão Lojas da seção Integrações e o da Saúde das integrações): o cartão já dá o respiro em volta */ .ssc-em-cartao{min-width:0} .ssc-em-cartao .ssc{margin:0} /* 1.74.0 (segunda fase, L3): O DESENHO COMPACTO, para celular baixo (320 x 568, 360 x 640, 375 x 667). A lista de quatro linhas por unidade pede 384 px. No cartão das Configurações dessas telas há de 291 a 397 px livres: em 320 x 568 a segunda unidade ficava atrás do "Ver tudo", e em 375 x 667 bastava um aviso a mais para ela ir para lá. Na Situação das lojas, em 320 x 568, cabia aberta e deixava de caber depois de um fechar geral (o resultado e os avisos somam 88 px por unidade). Aqui cada unidade vira a linha geral (o nome, a situação e o botão geral) e, embaixo, os três canais lado a lado, cada um com o nome, a situação e o seu botão. O botão continua com 44 px de altura e a largura da coluna; o rótulo é o mesmo ("Fechar só o iFood"), em duas linhas. As duas unidades e os 8 botões ficam à vista, sem cortar e sem rolar. O aviso "Só no Hub" fica curto (o resto da frase não cabe numa coluna de 70 px) e, com parte fechada, o nome e a situação da unidade vão numa linha só, com os dois botões gerais embaixo, dividindo a largura. É o mesmo desenho na Situação das lojas e nos cartões: no mesmo aparelho a peça é sempre igual. */ @media (max-height:700px) and (max-width:760px){ .settings-car>.settings-panel[data-cfg-lojas]{padding:12px 16px} .settings-car>.settings-panel[data-cfg-lojas]>h2{margin-bottom:12px} [data-cfg-lojas]>.settings-note{display:none} .ssc{gap:4px} .ssc-unidade:not(.ssc-confirma){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0 12px} .ssc-geral,.ssc-resumo{grid-column:1/-1} .ssc-geral{min-height:44px;padding:2px 0} .ssc-geral-dois{padding:0} .ssc-geral-dois .ssc-nome{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;padding:6px 0 0} .ssc-geral-acoes{flex:1 1 100%;padding:2px 0 4px} .ssc-geral-acoes .ssc-geral-botao{flex:1} .ssc-linha:not(.ssc-geral){flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:4px 0 0 8px} .ssc-geral+.ssc-linha{padding-left:0} .ssc-linha:not(.ssc-geral)+.ssc-linha:not(.ssc-geral){border-left:1px solid var(--sep,color-mix(in srgb,var(--label,#2A1C12) 13%,transparent))} .ssc-linha:not(.ssc-geral) .ssc-nome{padding:0} .ssc-botao{max-width:none;margin-top:auto;padding:4px 4px 4px 0;font-size:var(--f-caption1);text-align:left} .ssc-longo{display:none} } /* 1.74.0 (segunda fase, L6): a faixa da Cozinha e da Expedição com parte dos canais fechada (platBanner, em web/index.html): a frase curta e o botão na mesma linha, para o aviso ocupar pouco no celular */ .banner.ss-faixa-canal{flex-wrap:nowrap} .banner.ss-faixa-canal>span{flex:1 1 auto;min-width:0} .banner.ss-faixa-canal>.btn{flex:none} @media(prefers-reduced-motion:reduce){.ssc-botao,.ssc-geral-botao{transition:none}} @media(forced-colors:active){.ssc-unidade{border:1px solid CanvasText}.ssc-botao{color:LinkText}} /* AU-XK-LOJAS-01: visual da operação nova, com retorno integral pela chave. */ .store-status-popover[data-ss-v2]{box-sizing:border-box;width:min(480px,calc(100vw - 24px));border-radius:26px;padding:20px;color:var(--label,#323200);background:var(--vidro-grosso,var(--surface,#fff));animation:ss-v2-entrada .22s ease-out} .ss-v2{--ss-texto:var(--label,#323200);color:var(--ss-texto)} .ss-v2 .ss-v2-unidade{display:block;border-radius:20px;background:var(--surface,#fff);padding:16px;margin:12px 0;min-width:0} .ss-v2-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}.ss-v2-cab h3{margin:0;font-size:var(--f-headline,calc(18px * var(--dt,1)))}.ss-v2-unidade[data-ss-unidade=cn] h3::before,.ss-v2-unidade[data-ss-unidade=gu] h3::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;background:var(--d-roxo,#9B30FF)}.ss-v2-unidade[data-ss-unidade=gu] h3::before{background:var(--d-ciano,#18B4D8)} .ss-v2-canal{display:flex;align-items:center;gap:9px;padding:12px 0;border-bottom:1px solid var(--sep);min-width:0}.ss-v2-canal>div{flex:1;min-width:0}.ss-v2-canal b,.ss-v2-canal span:not(.ss-v2-marca),.ss-v2-canal small{display:block;overflow-wrap:anywhere;line-height:1.4}.ss-v2-canal small{font-size:var(--f-caption1,calc(12px * var(--dt,1)));color:var(--label2,#6B5A4C)}.ss-v2-canal .ssc-botao{max-width:42%;font-size:var(--f-footnote,calc(13px * var(--dt,1)));padding-left:4px;white-space:normal;overflow-wrap:anywhere}.ss-v2-marca{width:9px;height:9px;border-radius:50%;background:var(--ss-canal);flex:none} .ss-v2 details{margin-top:12px;font-size:var(--f-footnote,calc(13px * var(--dt,1)))}.ss-v2 summary{min-height:44px;display:flex;align-items:center;cursor:pointer}.ss-v2 .ss-actions button{white-space:normal;max-width:100%;font-size:var(--f-subhead,calc(14px * var(--dt,1)))}.ss-v2 .ss-actions .primary{background:var(--acao,#1F5FD0);color:#fff}.ss-v2 .ss-actions{gap:8px} .ss-v2-horario{display:grid;gap:10px;padding-top:12px}.ss-v2-horario p{margin:0;line-height:1.45;font-size:var(--f-subhead,calc(14px * var(--dt,1)))}.ss-v2-horario label{display:grid;gap:6px}.ss-v2-horario input{box-sizing:border-box;width:100%;min-height:44px;border:1px solid var(--sep);border-radius:12px;padding:8px 12px;background:var(--surface);color:inherit;font:inherit}.ss-v2-horario small{color:var(--label2);line-height:1.4}.ss-v2-unidade .ss-unit-actions{border:0} .ss-v2-antiga>.banner:has([data-store-status-open]){display:none}.ss-v2-faixa{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-radius:16px;background:var(--surface2,#F7F3EE);padding:6px 10px;margin:6px 0;font-size:var(--f-footnote,calc(13px * var(--dt,1)));color:var(--label,#323200)}.ss-v2-faixa>span{flex:1;min-width:120px;overflow-wrap:anywhere}.ss-v2-faixa .btn{min-height:44px;font-size:var(--f-caption1,calc(12px * var(--dt,1)));padding:6px 10px;white-space:normal}.ss-v2-faixa.ss-paused,.ss-v2-faixa.ss-restricted{background:color-mix(in srgb,var(--queda) 10%,var(--surface))} @keyframes ss-v2-entrada{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} @media(max-width:760px){.store-status-popover[data-ss-v2]{left:8px!important;right:8px!important;bottom:8px!important;top:auto!important;width:auto;max-height:90dvh!important;padding:16px}.ss-v2 .ss-v2-unidade{padding:12px}.ss-v2-cab h3{font-size:var(--f-headline,calc(17px * var(--dt,1)))}.ss-v2-canal{gap:7px}.ss-v2-canal b{font-size:var(--f-subhead,calc(14px * var(--dt,1)))}.ss-v2 .ss-badge{font-size:var(--f-caption1,calc(12px * var(--dt,1)))}.ss-v2-faixa>span{min-width:90px}} @media(prefers-reduced-motion:reduce){.store-status-popover[data-ss-v2]{animation:none;transition:none}} .store-status-popover[data-ss-v2]{contain:layout style;left:auto!important;right:16px;top:16px!important;max-height:calc(100dvh - 32px)!important} @media(max-width:760px){.store-status-popover[data-ss-v2]{left:8px!important;right:8px;top:auto!important;max-height:90dvh!important}} /* A casca global oculta header.top para a gestão; os mesmos controles continuam acessíveis. */ .ss-v2-acessos{display:none}html.cg-ativa .ss-v2-acessos{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:4px 12px;min-height:48px}.ss-v2-acessos button{min-width:44px;min-height:44px}.ss-v2-acessos svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.ss-v2-acessos [data-hub-exp-wifi-slot]{display:flex} /* A barra integrada já oferece Lojas e Wi-Fi. O acesso anterior é reserva para a casca sem essa barra e não deve ficar por baixo de seus botões. */ html.hub-exp-v2 .ss-v2-acessos{display:none} /* A regra da barra tem o id do host. A reserva antiga deve continuar oculta com a mesma precedência, sem apagar avisos de outros assuntos. */ html.hub-exp-v2 #alerts.ss-v2-antiga>.banner:has([data-store-status-open]), html.hub-exp-v2 #banners.ss-v2-antiga>.banner:has([data-store-status-open]){display:none} /* /acoes-cliente.css */ /* 1.61.7: faixa vermelha fixa e card de resposta das ações do cliente (web/acoes-cliente.js). */ #acao-faixa{position:fixed;top:0;left:0;right:0;z-index:1250;min-height:48px;display:flex;align-items:center;gap:10px;padding:6px 12px;background:var(--queda,#E21D3C);color:var(--acao-txt,#FFFFFF);box-shadow:0 4px 18px color-mix(in srgb,var(--queda,#E21D3C) 35%,transparent);font-size:calc(0.875rem * var(--dt,1))} #acao-faixa[hidden]{display:none} #acao-faixa .af-icone{flex:none;width:26px;height:26px;border-radius:50%;background:var(--surface,#FFFFFF);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200));font-weight:800;display:grid;place-items:center} #acao-faixa .af-textos{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} #acao-faixa .af-item{all:unset;cursor:pointer;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3} #acao-faixa .af-item span{font-weight:500} #acao-faixa .af-item em{font-style:normal;font-weight:700;margin-left:4px;font-variant-numeric:tabular-nums} #acao-faixa .af-mais{font-weight:700} #acao-faixa .af-responder{flex:none;border:0;border-radius:999px;background:var(--surface,#FFFFFF);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200));font-weight:700;padding:9px 16px;font-size:inherit;cursor:pointer} body.tem-acao-cliente{padding-top:56px} body.tem-acao-cliente .top{top:58px} /* AU-PAL-C (26/10/2026): com a casca ativa (web/casca-global.css zera o padding do body com !important), a faixa fixa cobria o topo do conteúdo: os títulos das colunas da Expedição e o primeiro card do KDS, no celular e no computador. O conteúdo agora reserva a altura medida da faixa (--acao-faixa-h, web/acoes-cliente.js). No app nativo a reserva continua no body (regras abaixo), por isso ele fica fora desta. */ html.cg-ativa:not(.app-nativo) body.tem-acao-cliente main{padding-top:calc(env(safe-area-inset-top,0px) + var(--acao-faixa-h,56px) + 12px)!important} html.app-nativo #acao-faixa{top:var(--topo-app);left:10px;right:10px;border-radius:16px} html.app-nativo body.tem-acao-cliente{padding-top:calc(var(--topo-app) + 60px)!important} html.app-nativo body.tem-acao-cliente[data-hub-view="exp"]:is(#hub-vista,*) main{top:calc(var(--topo-app) + 60px)} #acao-card-fundo{position:fixed;inset:0;z-index:1400;background:color-mix(in srgb,var(--label,#323200) 45%,transparent);display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))} #acao-card-fundo[hidden]{display:none} /* 1.62.1: o card é uma coluna: topo e prazo fixos, corpo que rola por dentro e rodapé fixo com os botões. Antes o card inteiro rolava e, no iPhone, os botões (no fim) ficavam atrás da barra de abas nativa. */ #acao-card{width:min(560px,100%);max-height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--page,#F7F5F1);color:var(--label,#323200);border-radius:20px;box-shadow:0 20px 60px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 35%,transparent);border-top:6px solid var(--queda,#E21D3C);box-sizing:border-box} #acao-card>.ac-topo,#acao-card>.ac-prazo{flex:none} /* no app: 1.72.0 (auditoria de design 1720) as peças nativas somem com o card aberto (web/folha.js esconde a barra para toda folha registrada), então o card é a folha de baixo, como no navegador do celular: começa abaixo da barra de status (--folha-topo, web/folha.css) e os botões do rodapé ficam acima do indicador de início */ html.app-nativo #acao-card-fundo{align-items:flex-end;padding:var(--folha-topo,calc(env(safe-area-inset-top) + 10px)) 0 0} html.app-nativo #acao-card{width:100%;border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)} /* no app a faixa vermelha fica logo abaixo dos botões do topo, exatamente onde o card começa: com o card aberto ela sai de cena */ html.app-nativo body[data-hub-acao-card]:is(#hub-esp,*) #acao-faixa{visibility:hidden} html.app-ios body.tem-acao-cliente[data-hub-acao-card]:is(#hub-esp,*) .toasts{top:calc(var(--topo-app) + 4px)} /* os avisos (senha errada, escolha uma resposta) aparecem por cima do véu do card, não atrás dele */ body.acao-card-aberto .toasts{z-index:1450!important} body.dark #acao-card{background:var(--surface2,#F7F3EE);color:var(--label,#323200)} #acao-card .ac-topo{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 6px} #acao-card .ac-topo>div{flex:1;min-width:0} #acao-card h2{margin:0;font-size:calc(1.1875rem * var(--dt,1))} #acao-card .ac-x{border:0;background:transparent;font-size:calc(1.75rem * var(--dt,1));line-height:1;color:var(--label2,#6B5A4C);cursor:pointer;padding:0 4px} #acao-card .ac-sub{color:var(--label2,#6B5A4C);margin:2px 0 0;font-size:calc(0.8125rem * var(--dt,1))} #acao-card .ac-prazo{margin:6px 18px 0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--queda,#E21D3C) 10%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200));font-size:calc(0.875rem * var(--dt,1))} #acao-card .ac-prazo b{font-variant-numeric:tabular-nums} #acao-card .ac-corpo{padding:10px 18px 18px;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;position:relative} #acao-card .ac-msg{font-size:calc(1rem * var(--dt,1));margin:4px 0 10px} #acao-card .ac-fotos .foto-mini{width:116px;height:130px} #acao-card .ac-laudo{border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:12px;padding:10px 12px;margin:8px 0;font-size:calc(0.875rem * var(--dt,1))} #acao-card .ac-laudo p{margin:6px 0 0} #acao-card .ac-fatos{font-size:calc(0.8125rem * var(--dt,1));color:var(--label2,#6B5A4C)} #acao-card .ac-alerta{background:color-mix(in srgb,var(--d-ambar,#C27A00) 14%,transparent);border-radius:10px;padding:8px 10px;font-size:calc(0.8125rem * var(--dt,1))} #acao-card .ac-h3{font-size:calc(0.9375rem * var(--dt,1));margin:14px 0 8px} #acao-card .ac-presets{display:flex;flex-direction:column;gap:8px} #acao-card .ac-preset{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:12px;padding:10px 12px;cursor:pointer;font-size:calc(0.875rem * var(--dt,1));line-height:1.35} #acao-card .ac-preset:has(input:checked){border-color:var(--queda,#E21D3C);background:color-mix(in srgb,var(--queda,#E21D3C) 6%,transparent)} #acao-card .ac-preset.cerebro b{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} #acao-card .ac-preset input{margin-top:3px;flex:none} #acao-card .ac-preset span{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0} #acao-card .ac-preset textarea,#acao-card #ac-pin,#acao-card #ac-valor{width:100%;box-sizing:border-box;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:10px;padding:10px;font:inherit;background:transparent;color:inherit} #acao-card .ac-acoes{flex:none;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin:0;padding:12px 18px 16px;border-top:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));background:inherit;border-radius:0 0 20px 20px} #acao-card .ac-acoes .btn{min-height:44px} html.app-nativo #acao-card .ac-acoes{padding:12px 14px 14px} html.app-nativo #acao-card .ac-acoes .btn{flex:1 1 auto} #acao-card .ac-acoes .btn.is-loading{opacity:.75} #acao-card .ac-carregando{padding:30px 18px;text-align:center;color:var(--label2,#6B5A4C)} body.acao-card-aberto{overflow:hidden} /* ---------- 1.62.1: miniaturas das fotos do cliente (card de ação, ficha do pedido) ---------- */ .fotos-cliente{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;margin:8px 0 10px;-webkit-overflow-scrolling:touch} .fotos-cliente .foto-mini{flex:none;position:relative;display:block;width:104px;height:104px;padding:0;margin:0;border:0;border-radius:12px;overflow:hidden;cursor:zoom-in;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));box-shadow:inset 0 0 0 1px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent));font:inherit;color:inherit;transition:transform var(--dur-rapida,.12s),opacity var(--dur-rapida,.12s);-webkit-tap-highlight-color:transparent} .fotos-cliente .foto-mini img{display:block;width:100%;height:100%;object-fit:cover;border:0;border-radius:0;background:transparent} .fotos-cliente .foto-mini:active{transform:scale(.96);opacity:.8} .fotos-cliente .foto-mini:focus-visible{outline:3px solid var(--acao,#1F5FD0);outline-offset:2px} .fotos-cliente .foto-mini.carregando::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2px solid color-mix(in srgb,var(--label,#323200) 25%,transparent);border-top-color:var(--label2,#6B5A4C);animation:hf-gira .8s linear infinite} .fotos-cliente .foto-mini.falhou::after{content:"Foto indisponível. Toque para tentar de novo.";position:absolute;inset:0;display:grid;place-items:center;padding:8px;text-align:center;font-size:var(--f-caption1,0.75rem);line-height:1.25;color:var(--label2,#6B5A4C)} /* ---------- 1.62.1: VISUALIZADOR DE FOTOS (window.HubFotos) ---------- Vidro escuro em tela cheia, por cima de tudo (a ficha, o card de ação e, no app, os botões nativos, que somem enquanto ele está aberto). A foto aparece inteira; a barra de cima tem o contador e o X de 44 px. */ .hub-fotos{position:fixed;inset:0;z-index:2400;color:var(--acao-txt,#FFFFFF);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:contain} .hub-fotos[hidden]{display:none} .hub-fotos .hf-fundo{position:absolute;inset:0;background:color-mix(in srgb,var(--label,#323200) 82%,transparent);-webkit-backdrop-filter:blur(30px) saturate(140%);backdrop-filter:blur(30px) saturate(140%);opacity:0;transition:opacity .22s var(--curva-padrao,ease)} .hub-fotos.aberto .hf-fundo{opacity:1} .hub-fotos .hf-palco{position:absolute;inset:0;opacity:0;transform:scale(.94);transition:transform .3s var(--curva-mola,cubic-bezier(.2,1.25,.35,1)),opacity .2s linear} .hub-fotos.aberto .hf-palco{opacity:1;transform:none} .hub-fotos.saindo .hf-palco{transition:transform .26s var(--curva-padrao,ease),opacity .2s linear} .hub-fotos.arrastando .hf-palco,.hub-fotos.arrastando .hf-fundo{transition:none} .hub-fotos .hf-trilho{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .hub-fotos .hf-trilho::-webkit-scrollbar{display:none} .hub-fotos .hf-trilho.ampliando{overflow:hidden} .hub-fotos .hf-foto{flex:0 0 100%;width:100%;height:100%;margin:0;position:relative;scroll-snap-align:center;scroll-snap-stop:always;overflow:hidden} .hub-fotos .hf-zoom{box-sizing:border-box;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:calc(var(--app-status,0px) + 60px) 10px calc(env(safe-area-inset-bottom) + 64px)} .hub-fotos .hf-zoom img{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;-webkit-user-drag:none} .hub-fotos .hf-zoom img:not([src]){visibility:hidden} .hub-fotos .hf-foto.ampliada{overflow:auto;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch} .hub-fotos .hf-foto.ampliada .hf-zoom{width:max-content;height:max-content;min-width:100%;min-height:100%;padding:0} .hub-fotos .hf-foto.ampliada .hf-zoom img{max-width:none;max-height:none;border-radius:0} .hub-fotos .hf-girando{display:none;position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:3px solid color-mix(in srgb,var(--label,#323200) 22%,transparent);border-top-color:var(--label3,#9C8D80);animation:hf-gira .8s linear infinite} .hub-fotos .hf-foto.carregando .hf-girando{display:block} .hub-fotos .hf-erro{position:absolute;left:24px;right:24px;top:50%;transform:translateY(-50%);text-align:center;font-size:var(--f-body,1.0625rem);line-height:1.4;color:color-mix(in srgb,var(--acao-txt,#FFFFFF) 86%,transparent)} .hub-fotos .hf-erro[hidden]{display:none} @keyframes hf-gira{to{transform:rotate(360deg)}} .hub-fotos .hf-barra{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:center;min-height:44px;padding:calc(var(--app-status,0px) + 8px) 12px 8px;pointer-events:none;opacity:0;transition:opacity .2s linear} .hub-fotos.aberto .hf-barra{opacity:1} .hub-fotos.ampliando .hf-barra,.hub-fotos.arrastando .hf-barra,.hub-fotos.ampliando .hf-dica,.hub-fotos.arrastando .hf-dica{opacity:0} .hub-fotos .hf-contador{padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--surface,#FFFFFF) 14%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 22%,transparent);font-weight:600;font-size:var(--f-subhead,0.9375rem);font-variant-numeric:tabular-nums} .hub-fotos.uma .hf-contador{visibility:hidden} .hub-fotos .hf-x{position:absolute;right:12px;top:calc(var(--app-status,0px) + 8px);pointer-events:auto;width:44px;height:44px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;color:var(--acao-txt,#FFFFFF);cursor:pointer;background:color-mix(in srgb,var(--surface,#FFFFFF) 16%,transparent);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);box-shadow:inset 0 1px 0 color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 30%,transparent),0 4px 14px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 25%,transparent);transition:transform var(--dur-rapida,.12s),background-color var(--dur-rapida,.12s)} .hub-fotos .hf-x svg,.hub-fotos .hf-seta svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .hub-fotos .hf-x:active,.hub-fotos .hf-seta:not(:disabled):active{transform:scale(.92);background:color-mix(in srgb,var(--surface,#FFFFFF) 28%,transparent)} .hub-fotos .hf-x:focus-visible,.hub-fotos .hf-seta:focus-visible{outline:3px solid var(--label3,#9C8D80);outline-offset:3px} .hub-fotos .hf-seta{position:absolute;top:50%;margin-top:-26px;width:52px;height:52px;border-radius:50%;border:0;padding:0;display:none;place-items:center;color:var(--acao-txt,#FFFFFF);cursor:pointer;background:color-mix(in srgb,var(--surface,#FFFFFF) 16%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 30%,transparent);transition:transform var(--dur-rapida,.12s),opacity .2s} .hub-fotos .hf-seta:disabled{opacity:.3;cursor:default} .hub-fotos .hf-ant{left:16px} .hub-fotos .hf-prox{right:16px} @media (hover:hover) and (pointer:fine){.hub-fotos:not(.uma) .hf-seta{display:grid}} .hub-fotos .hf-dica{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom) + 16px);margin:0;text-align:center;font-size:var(--f-footnote,0.8125rem);color:color-mix(in srgb,var(--acao-txt,#FFFFFF) 72%,transparent);pointer-events:none;opacity:0;transition:opacity .2s linear} .hub-fotos.aberto .hf-dica{opacity:1} .hub-fotos .hf-dica-mouse{display:none} @media (hover:hover) and (pointer:fine){.hub-fotos .hf-dica-toque{display:none}.hub-fotos .hf-dica-mouse{display:inline}} html.fotos-abertas,html.fotos-abertas body{overflow:hidden} @media (prefers-reduced-transparency:reduce){.hub-fotos .hf-fundo{background:var(--label,#323200);-webkit-backdrop-filter:none;backdrop-filter:none}} /* 1.68.2: assumir o chamado. Quem assumiu vê a própria tratativa (e pode devolver); os outros veem o comunicado. */ #acao-faixa.so-tratativa{background:color-mix(in srgb,var(--surface,#FFFFFF) 20%,var(--d-ambar,#C27A00));color:light-dark(var(--label,#323200),var(--page,#F7F5F1))} #acao-faixa .af-dono{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--surface,#FFFFFF) 22%,transparent);font-weight:600;font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))))} #acao-card>.ac-tratativa{flex:none} #acao-card .ac-tratativa{margin:8px 18px 0;padding:10px 12px;border-radius:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:calc(0.875rem * var(--dt,1));line-height:1.35} #acao-card .ac-tratativa p{margin:0;flex:1 1 220px} #acao-card .ac-tratativa.meu{background:color-mix(in srgb,var(--verde,#11994A) 13%,transparent)} #acao-card .ac-tratativa.ocupado,#acao-card .ac-tratativa.expirou,#acao-card .ac-tratativa.prazo{background:color-mix(in srgb,var(--d-ambar,#C27A00) 18%,transparent)} #acao-card .ac-tratativa.ocupado{display:block} #acao-card .ac-tratativa.ocupado b{display:block;margin-bottom:2px} #acao-card .ac-link{border:0;background:transparent;color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200));font-weight:600;text-decoration:underline;cursor:pointer;padding:4px 2px;font-size:inherit} body.dark #acao-card .ac-link{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} /* /ai-support.css */ /* Ilustracoes locais, um passo por vez, com botoes junto da pergunta. */ .support-step { display:grid;grid-template-columns:minmax(150px,.7fr) minmax(220px,1.3fr);align-items:center;gap:20px;color:var(--ws-ink); } .support-art { min-width:0;text-align:center; } .support-art svg { display:block;width:100%;max-height:200px;overflow:visible; } .support-art > span { display:block;font-size:max(0.6875rem, calc(0.6875rem * var(--dt)));color:var(--ws-secondary);line-height:1.3;margin-top:3px; } .support-step-label { font-size:max(0.6875rem, calc(0.75rem * var(--dt)));font-weight:650;color:var(--ws-secondary);margin-bottom:5px; } .support-copy h3 { font-size:calc(1.3125rem * var(--dt));line-height:1.2;margin:0 0 9px;letter-spacing:-.025em; } .support-copy p { margin:0 0 10px!important;line-height:1.45;font-size:calc(1rem * var(--dt))!important; } .support-copy small { display:block;line-height:1.4;color:var(--ws-secondary);margin-bottom:10px; } .support-question { display:block;font-size:calc(1rem * var(--dt));line-height:1.35;margin:10px 0; } .support-actions { display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px; } .support-actions .ws-btn { min-height:44px; } .support-progress { display:flex;gap:9px;align-items:center;font-size:calc(0.875rem * var(--dt));color:var(--ws-secondary);margin:10px 0; } .support-progress i { width:17px;height:17px;border:2px solid var(--ws-soft);border-top-color:var(--ws-accent);border-radius:50%;animation:support-spin .9s linear infinite; } .support-focus { animation:support-focus 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center; } .is-working .support-receipt { animation:support-paper 1.7s ease-in-out infinite; } .is-working .support-network-line,.is-working .support-router-leds { animation:support-focus 1.2s ease-in-out infinite; } .is-done .support-focus { animation:none; } @keyframes support-spin { to {transform:rotate(360deg)} } @keyframes support-focus { 50% {opacity:.48} } @keyframes support-paper { 0% {transform:translate(9px,-25px);opacity:.35} 60%,100% {transform:translate(0,0);opacity:1} } @media(max-width:640px) { .support-step {grid-template-columns:90px minmax(0,1fr);gap:10px}.support-art svg {max-height:105px}.support-art>span {font-size:max(0.6875rem, calc(0.625rem * var(--dt)))}.support-copy h3 {font-size:calc(1.125rem * var(--dt))}.support-copy p {font-size:calc(0.9375rem * var(--dt))!important}.support-actions {gap:6px}.support-actions .ws-btn {padding:9px 11px;font-size:calc(0.8125rem * var(--dt))} } @media(prefers-reduced-motion:reduce) { .support-step *, .support-step *::before {animation:none!important;transition:none!important}.support-progress i {border-color:var(--ws-accent);border-style:dotted} } /* A ajuda ativa ocupa o centro disponivel. Os outros cards continuam no paginador. */ #aiz.ws-root.ws-support-active.ws-support-mode { top:var(--ws-support-top);bottom:calc(18px + var(--ws-viewport-inset,0px));max-height:none;grid-template-rows:minmax(0,1fr) auto;align-content:stretch; } #aiz.ws-root.ws-support-active.ws-support-mode .ws-board { align-self:center;justify-self:center;width:min(900px,100%);height:auto;max-height:100%;grid-template-rows:auto minmax(0,1fr); } #aiz.ws-root.ws-support-active.ws-support-mode .ws-grid { grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);width:100%;max-height:100%; } #aiz.ws-root.ws-support-active.ws-support-mode .ws-support-widget { width:100%;height:auto;max-height:100%; } #aiz.ws-root.ws-support-active.ws-support-mode .ws-widget-body { flex:0 1 auto;overflow:auto; } #aiz.ws-root.ws-support-active.ws-support-mode.ws-single-result .ws-board { grid-template-rows:minmax(0,1fr); } #aiz.ws-root.ws-support-active.ws-support-mode .support-art svg { max-height:220px; } #aiz.ws-root.ws-support-active.ws-support-mode .support-copy h3 { font-size:calc(1.375rem * var(--dt)); } #aiz.ws-root.ws-support-active.ws-support-mode .support-copy p { font-size:calc(1rem * var(--dt))!important; } @media(max-width:640px) { #aiz.ws-root.ws-support-active.ws-support-mode { left:12px;right:12px;bottom:calc(12px + var(--ws-viewport-inset,0px)); } #aiz.ws-root.ws-support-active.ws-support-mode .support-step { grid-template-columns:minmax(0,1fr);gap:8px; } #aiz.ws-root.ws-support-active.ws-support-mode .support-art svg { height:105px;max-height:105px; } #aiz.ws-root.ws-support-active.ws-support-mode .support-copy h3 { font-size:calc(1.25rem * var(--dt)); } } @media(max-height:600px) { #aiz.ws-root.ws-support-active.ws-support-mode .support-art { display:none; }#aiz.ws-root.ws-support-active.ws-support-mode .support-step { grid-template-columns:minmax(0,1fr); } } /* 1.27.0: botões dos cards de suporte sempre legíveis (o desativado continua lido; só a repetição da operação em curso é bloqueada). */ .support-actions .ws-btn{background:color-mix(in srgb,var(--label,#323200) 8%,transparent);color:var(--label,#323200);font-weight:600} .support-actions .ws-btn.ws-primary{background:color-mix(in srgb,var(--verde,#11994A) 80%,var(--label,#323200));color:var(--acao-txt,#FFFFFF)} .support-actions .ws-btn:disabled{opacity:.75} body.dark .support-actions .ws-btn{background:color-mix(in srgb,var(--surface,#FFFFFF) 12%,transparent);color:var(--label,#323200)} .support-area .support-led{animation:support-led 1.6s ease-in-out infinite} .is-working .support-area .support-network-line{animation:support-dash .8s linear infinite} @keyframes support-led{0%,100%{opacity:1}50%{opacity:.35}} @keyframes support-dash{to{stroke-dashoffset:-16}} @media(prefers-reduced-motion:reduce){.support-area .support-led,.is-working .support-area .support-network-line{animation:none}} /* /login.css */ /* Entrada: marca e conteudo livres; material apenas nos controles de acesso. */ #start{ --login-bg:var(--page,#F7F5F1);--login-ink:var(--label,#323200);--login-sub:var(--label2,#6B5A4C);--login-control:color-mix(in srgb,var(--surface2,#F7F3EE) 78%,transparent);--login-well:color-mix(in srgb,var(--surface2,#F7F3EE) 6.5%,transparent);--login-active:var(--surface,#FFFFFF);--login-error:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200));--login-focus:var(--acao,#1F5FD0);--login-field-active:var(--surface,#FFFFFF); z-index:2000;box-sizing:border-box;overflow:auto;overscroll-behavior:contain;align-items:flex-start; padding:max(28px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); /* 1.74.0 (Philippe, 05/10/2026; N4 e N5 da quinta rodada): a entrada tem o MESMO fundo do resto do Hub, o off-white liso do token --page (web/index.html). Saíram as duas manchas (areia em cima, verde embaixo), no claro e no escuro. */ background:var(--login-bg); backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--login-ink); } body.dark #start{--login-ink:var(--label,#323200);--login-sub:var(--label,#323200);--login-control:color-mix(in srgb,var(--surface2,#F7F3EE) 86%,transparent);--login-well:color-mix(in srgb,var(--surface2,#F7F3EE) 6.5%,transparent);--login-active:var(--label3,#9C8D80);--login-error:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200));--login-focus:var(--acao,#1F5FD0);--login-field-active:var(--label,#323200)} #start .card{box-sizing:border-box;width:100%;max-width:420px;padding:0;margin:auto;text-align:left;border:0!important;border-radius:0;background:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} #start .card::before,#start .card::after{display:none} #start .login-brand{text-align:center;margin-bottom:10px} #start .llogo{width:auto;max-width:100%;height:56px;margin:0 auto 16px;object-fit:contain} #start .login-night{display:none}body.dark #start .login-day{display:none}body.dark #start .login-night{display:block} #start h1{margin:0 0 8px;font-size:1.875rem;line-height:1.15;font-weight:700;letter-spacing:-.035em;color:var(--login-ink)} #start .login-brand p{margin:0;font-size:.9375rem;line-height:1.45;color:var(--login-sub)} #start .roles.big{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0} #start .roles.big .unitbtn{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) 20px;gap:16px;align-items:center;justify-content:initial;text-align:left;min-height:92px;padding:20px;border:0!important;border-radius:20px;color:var(--login-ink);background:var(--login-control);box-shadow:0 5px 18px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 6.5%,transparent);backdrop-filter:blur(var(--vidro-desfoque,24px)) saturate(var(--vidro-saturacao,180%));-webkit-backdrop-filter:blur(var(--vidro-desfoque,24px)) saturate(var(--vidro-saturacao,180%));transition:background-color .16s ease,transform .16s ease} @media (hover:hover){#start .roles.big .unitbtn:hover{transform:none;background:var(--login-active)}} #start .roles.big .unitbtn:active{transform:scale(.985)} #start .roles.big .unitbtn i{display:grid;place-items:center;width:44px;height:44px;margin:0;border-radius:13px;background:var(--login-well);box-shadow:none;color:var(--login-ink)} #start .unitbtn i svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} #start .unitbtn .unitcopy{min-width:0;display:block} #start .roles.big .unitbtn b{display:block;font-size:1.25rem;font-weight:650;line-height:1.2;letter-spacing:-.02em;color:var(--login-ink)} #start .roles.big .unitbtn .unitcopy>span{display:block;margin-top:5px;font-size:.875rem;font-weight:400;line-height:1.3;color:var(--login-sub)} #start .unit-next{width:18px;height:18px;fill:none;stroke:var(--login-sub);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #start .login-management{margin-top:26px} #start .login-management-title{margin:0 0 10px;text-align:center;font-size:.8125rem;line-height:1.4;font-weight:500;color:var(--login-sub)} #start .glinks{display:flex;gap:4px;padding:4px;border-radius:15px;background:var(--login-well)} #start .gestorlink{min-width:0;flex:1;min-height:44px;padding:10px 12px;border:0!important;border-radius:11px;background:transparent;box-shadow:none;color:var(--login-ink);opacity:1;font-size:.9375rem;line-height:1.3;font-weight:600;text-decoration:none;transition:background-color .16s ease,box-shadow .16s ease} #start .gestorlink.on{background:var(--login-active);color:var(--login-ink);box-shadow:0 2px 7px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 9%,transparent)} #start #loginpin{margin-top:20px} #start #lpinlabel{display:block;margin:0 0 8px;font-size:.9375rem;font-weight:600;line-height:1.4;color:var(--login-ink)} #start .login-pin-field{position:relative;isolation:isolate;margin-bottom:12px;border-radius:16px} #start .login-pin-field::before{content:"";position:absolute;inset:-3px;z-index:-1;border-radius:inherit;background:linear-gradient(115deg,color-mix(in srgb,var(--label3,#9C8D80) 80%,transparent),color-mix(in srgb,var(--label3,#9C8D80) 72%,transparent) 38%,color-mix(in srgb,var(--queda,#E21D3C) 68%,transparent) 75%,color-mix(in srgb,var(--label3,#9C8D80) 80%,transparent));filter:blur(8px);opacity:0;transition:opacity .2s ease;pointer-events:none} #start .login-pin-field:focus-within::before{opacity:.8;animation:login-field-glow 4s ease-in-out infinite} #start #lpin{box-sizing:border-box;width:100%;min-height:52px;margin:0;padding:13px 16px;border:0;border-radius:inherit;font:inherit;font-size:1.125rem;letter-spacing:.16em;line-height:1.35;text-align:left;background:var(--login-control);color:var(--login-ink);box-shadow:0 3px 12px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 7%,transparent);caret-color:var(--login-ink)} #start #lpin:focus{background:var(--login-field-active);box-shadow:0 3px 15px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 12%,transparent)} #start #lpin::placeholder{font-size:1rem;letter-spacing:0;color:var(--login-sub);opacity:1} #start #lpin[aria-invalid=true]{box-shadow:inset 0 0 0 2px var(--login-error)} #start #lenter{min-height:50px;width:100%;padding:12px 18px;border:0;border-radius:13px;background:color-mix(in srgb,var(--verde,#11994A) 80%,var(--label,#323200));color:var(--acao-txt,#FFFFFF);box-shadow:none;font-size:1rem;line-height:1.4;font-weight:650} #start .login-feedback{font-size:.9375rem;line-height:1.45;margin:14px 0 0;color:var(--login-sub)} #start .login-feedback:empty{display:none}#start .login-feedback.error{color:var(--login-error);font-weight:550} #start .login-feedback.loading{display:flex;align-items:center;justify-content:center;gap:9px} #start .login-feedback.loading::before{content:"";flex:none;width:15px;height:15px;border:2px solid color-mix(in srgb,var(--login-sub) 25%,transparent);border-top-color:var(--login-sub);border-radius:50%;animation:login-progress .8s linear infinite} #start .hint{font-size:.8125rem;line-height:1.5;color:var(--login-sub);text-align:center;margin:20px auto 0;max-width:35ch} #start button:disabled,#start input:disabled{cursor:wait;opacity:.7}#start button:disabled:active{transform:none} #start button:focus-visible{outline:3px solid var(--login-focus);outline-offset:4px} #start #lpin:focus-visible{outline:none} #start:focus{outline:none} @keyframes login-progress{to{transform:rotate(360deg)}} @keyframes login-field-glow{0%,100%{opacity:.8}50%{opacity:1}} @media(max-width:440px){#start{padding-left:20px;padding-right:20px}#start .llogo{height:48px}#start .roles.big .unitbtn{grid-template-columns:40px minmax(0,1fr) 18px;gap:12px;padding:16px;min-height:84px}#start .roles.big .unitbtn i{width:40px;height:40px}} @media(max-height:700px){#start .llogo{height:48px;margin-bottom:14px}#start .login-management{margin-top:20px}} @media(prefers-reduced-motion:reduce){#start *,#start *::before{animation:none!important;transition:none!important}#start .roles.big .unitbtn:active{transform:none}} @media(prefers-reduced-transparency:reduce),(prefers-contrast:more){#start{--login-control:var(--surface2,#F7F3EE);--login-sub:var(--label,#323200);--login-well:var(--surface2,#F7F3EE)}body.dark #start{--login-control:var(--surface2,#F7F3EE);--login-sub:var(--label,#323200);--login-well:var(--surface2,#F7F3EE)}#start .unitbtn{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}#start #lpin{box-shadow:inset 0 0 0 2px var(--login-sub)}} @media(forced-colors:active),(prefers-contrast:more){#start .login-pin-field::before{display:none}#start #lpin:focus-visible{outline:3px solid currentColor;outline-offset:4px}} #start .unitcopy,#start h1,#start .login-feedback{overflow-wrap:anywhere} #start .glinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))} /* /contas.css */ /* 1.64.0: ENTRADA COM E-MAIL E SENHA, MINHA CONTA E "ENTRAR COMO..." (web/contas.js). Mesma linguagem da entrada (web/login.css: --login-*) e do vidro do Hub (--glass-*, --r-*, --f-*). Alvos de 44 pt, botão que encolhe ao apertar, carregando com a frase do que está fazendo, verde quando deu certo, vermelho com o motivo quando não deu. Letra sempre pela escala do Hub (--f-* com --dt). */ /* ---------------------------------------------------------------- tela de entrada */ #start .login-contas{margin-top:6px} /* 1.74.0 (Philippe, 03/10/2026, desempenho): o lugar do formulário de e-mail fica reservado desde a primeira pintura. O web/contas.js só desenha o formulário quando a página termina de carregar; até lá o cartão da entrada aparecia curto e, quando o formulário chegava, o cartão inteiro pulava (as duas lojas desciam 125 px no celular). Medido no celular: o deslocamento de layout da entrada (CLS) cai de 0,126 para 0,012. A altura é a do passo "e-mail" (campo, botão, recado e a linha "ou, com a senha antiga"); se o formulário mudar de altura, o teste tests/desempenho-1740.test.js avisa. */ #start .login-contas:empty{min-height:14.6875rem} #start .conta-form{display:flex;flex-direction:column;gap:12px;margin:0} #start .conta-campo{display:flex;flex-direction:column;gap:6px;margin:0;font-size:var(--f-subhead,0.9375rem);font-weight:600;line-height:1.35;color:var(--login-ink)} #start .conta-campo input,#start .conta-senha-caixa{box-sizing:border-box;width:100%;min-height:52px;border-radius:16px;background:var(--login-control);box-shadow:0 3px 12px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 7%,transparent);color:var(--login-ink)} #start .conta-campo input{margin:0;padding:12px 16px;border:0;font:inherit;font-weight:500;font-size:var(--f-body,1.0625rem);caret-color:var(--login-ink)} #start .conta-campo input::placeholder{color:var(--login-sub);opacity:1;font-weight:400} #start .conta-campo input:focus{background:var(--login-field-active);box-shadow:0 3px 15px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 12%,transparent);outline:3px solid color-mix(in srgb,var(--login-focus) 55%,transparent);outline-offset:1px} #start .conta-campo input[aria-invalid=true]{box-shadow:inset 0 0 0 2px var(--login-error)} #start .conta-senha-caixa{display:flex;align-items:center;padding:0 4px 0 0} #start .conta-senha-caixa input{flex:1;min-width:0;min-height:52px;box-shadow:none;background:transparent} #start .conta-senha-caixa:focus-within{background:var(--login-field-active);outline:3px solid color-mix(in srgb,var(--login-focus) 55%,transparent);outline-offset:1px} #start .conta-senha-caixa input:focus{outline:none;box-shadow:none;background:transparent} .conta-ver{flex:none;min-width:44px;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--login-focus,var(--acao,#1F5FD0));font:inherit;font-size:var(--f-footnote,0.8125rem);font-weight:650;cursor:pointer} .conta-ver:active{transform:scale(.96);opacity:.8} #start .conta-chip{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 4px 4px 14px;border-radius:14px;background:var(--login-well)} #start .conta-chip-email{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--f-subhead,0.9375rem);font-weight:600} #start .conta-texto,.conta-folha .conta-texto{margin:0;font-size:var(--f-subhead,0.9375rem);line-height:var(--lh-subhead,1.25rem);color:var(--login-sub,var(--label2,#6B5A4C))} #start .conta-texto b{color:var(--login-ink)} #start .conta-dica,.conta-folha .conta-dica{margin:-4px 0 0;font-size:var(--f-footnote,0.8125rem);line-height:1.4;color:var(--login-sub,var(--label2,#6B5A4C))} #start .conta-divisor{display:flex;align-items:center;gap:12px;margin:26px 0 14px;font-size:var(--f-footnote,0.8125rem);font-weight:500;line-height:1.4;color:var(--login-sub);text-align:center} #start .conta-divisor::before,#start .conta-divisor::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--login-sub) 30%,transparent)} #start .login-antigo[hidden]{display:none} /* botões (entrada e folhas) */ .conta-btn{box-sizing:border-box;width:100%;min-height:50px;padding:12px 20px;border:0;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font:inherit;font-size:var(--f-callout,1rem);line-height:1.3;font-weight:650;cursor:pointer;background:var(--login-well,var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent)));color:var(--login-ink,var(--label,#323200));transition:transform .12s ease,opacity .12s ease,background-color .2s ease} .conta-btn.primario{background:color-mix(in srgb,var(--verde,#11994A) 80%,var(--label,#323200));color:var(--acao-txt,#FFFFFF)} .conta-btn:active:not(:disabled){transform:scale(.97);opacity:.88} .conta-btn.is-loading{opacity:.85;cursor:progress} .conta-btn.is-loading::before,.conta-opcao.is-loading::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:conta-gira .7s linear infinite} .conta-btn.is-ok,.conta-opcao.is-ok{background:color-mix(in srgb,var(--verde,#11994A) 80%,var(--label,#323200))!important;color:var(--acao-txt,#FFFFFF)!important} .conta-btn.is-ok::before{content:"✓";font-weight:800} .conta-btn.is-erro,.conta-opcao.is-erro{background:var(--queda,#E21D3C)!important;color:var(--acao-txt,#FFFFFF)!important;animation:conta-treme .32s} .conta-btn.perigo{background:color-mix(in srgb,var(--queda,#E21D3C) 14%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .conta-link{align-self:center;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--login-focus,var(--acao,#1F5FD0));font:inherit;font-size:var(--f-subhead,0.9375rem);font-weight:600;cursor:pointer} .conta-link:active{opacity:.6} [data-cadastro-pin]{min-width:0;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:16px;padding:16px} [data-cadastro-pin] legend{font-weight:750}[data-cadastro-pin] label{display:flex;flex-direction:column;gap:6px;margin:12px 0} .f65-selado [data-cadastro-pin] input,[data-cadastro-pin] input{min-height:56px;width:100%;box-sizing:border-box;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:12px;padding:10px 12px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label,#323200);font:inherit} [data-cadastro-pin] .pin-digitos{letter-spacing:.5em}[data-cadastro-erro]{font-size:var(--f-footnote,.875rem);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}[data-cadastro-erro]:empty{display:none} .cu-fio-conteudo .cu-peca [data-cadastro-pin] input{min-height:56px!important} .conta-link.discreto{color:var(--login-sub,var(--label2,#6B5A4C));font-weight:500;font-size:var(--f-footnote,0.8125rem)} .conta-recado{margin:0;min-height:0;font-size:var(--f-subhead,0.9375rem);line-height:1.4;font-weight:550} .conta-recado:empty{display:none} .conta-recado.erro{color:var(--login-error,color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200)))} .conta-recado.ok{color:var(--d-verdeagua-t,#006F5D)} .conta-recado.info{color:var(--login-sub,var(--label2,#6B5A4C))} .conta-lista{display:flex;flex-direction:column;gap:10px;margin:0 0 12px} .conta-opcao{box-sizing:border-box;width:100%;min-height:64px;display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:12px;align-items:center;padding:14px 18px;border:0;border-radius:18px;text-align:left;font:inherit;cursor:pointer;background:var(--login-control,var(--glass-bg,color-mix(in srgb,var(--surface,#FFFFFF) 72%,transparent)));color:var(--login-ink,var(--label,#323200));box-shadow:0 5px 18px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 6.5%,transparent);transition:transform .14s ease,background-color .16s ease} .conta-opcao:active{transform:scale(.985)} .conta-opcao b{display:block;font-size:var(--f-headline,1.0625rem);font-weight:650;line-height:1.25} .conta-opcao small{display:block;margin-top:3px;font-size:var(--f-footnote,0.8125rem);color:var(--login-sub,var(--label2,#6B5A4C))} .conta-opcao>span[aria-hidden]{font-size:var(--f-title3,1.25rem);color:var(--login-sub,var(--label2,#6B5A4C));text-align:right} .conta-lista.pessoas .conta-opcao{grid-template-columns:44px minmax(0,1fr) 20px} button:focus-visible.conta-btn,.conta-opcao:focus-visible,.conta-link:focus-visible,.conta-ver:focus-visible,.conta-x:focus-visible,.conta-linha:focus-visible{outline:3px solid var(--login-focus,var(--acao,#1F5FD0));outline-offset:3px} /* Dentro da entrada, a regra antiga ".start button" (botão azul grande) vale para todo botão: aqui cada botão volta ao seu desenho (mesma especificidade com #start, e este arquivo carrega antes; por isso o reforço). */ #start .conta-btn,#start .conta-link,#start .conta-ver,#start .conta-opcao{border:0;box-shadow:none;text-shadow:none;letter-spacing:normal} #start .conta-btn{width:100%;min-height:50px;padding:12px 20px;border-radius:13px;font-size:var(--f-callout,1rem);font-weight:650;background:var(--login-well);color:var(--login-ink)} #start .conta-btn.primario{background:color-mix(in srgb,var(--verde,#11994A) 80%,var(--label,#323200));color:var(--acao-txt,#FFFFFF)} #start .conta-link{width:auto;min-height:44px;padding:0 12px;border-radius:12px;background:transparent;color:var(--login-focus);font-size:var(--f-subhead,0.9375rem);font-weight:600} #start .conta-link.discreto{color:var(--login-sub);font-weight:500;font-size:var(--f-footnote,0.8125rem);text-decoration:underline;text-underline-offset:3px} #start .conta-ver{min-height:44px;padding:0 12px;border-radius:12px;background:transparent;color:var(--login-focus);font-size:var(--f-footnote,0.8125rem);font-weight:650} #start .conta-opcao{min-height:64px;padding:14px 18px;border-radius:18px;background:var(--login-control);color:var(--login-ink);font-size:inherit;font-weight:inherit;box-shadow:0 5px 18px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 6.5%,transparent)} #start .conta-recado{margin:0} /* ---------------------------------------------------------------- botão da pessoa no topo */ .top .conta-avatar{position:relative} .top .conta-avatar[hidden]{display:none} .conta-iniciais{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(145deg,var(--acao,#1F5FD0),var(--d-anil,#5B6CFF));color:var(--acao-txt,#FFFFFF);font-size:var(--f-footnote,0.8125rem);font-weight:750;letter-spacing:.02em} body.conta-pin .conta-iniciais{background:linear-gradient(145deg,var(--d-laranja,#F57A1C),var(--queda,#E21D3C))} /* 1.74.0 (Philippe, 03/10/2026): enquanto o dono não cria o acesso pessoal, o botão da conta leva um ponto laranja (o mesmo sinal de "tem coisa aqui" do microfone). O convite fica na folha Acesso, pelo menu da conta. */ .top .conta-avatar.conta-pede::after{content:"";position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;background:var(--d-ambar,#C27A00);box-shadow:0 0 0 2px var(--surface,#FFFFFF)} body.dark .top .conta-avatar.conta-pede::after{box-shadow:0 0 0 2px var(--surface,#FFFFFF)} /* 1.74.0, segunda rodada: no celular os botões da barra de cima têm 40 px de desenho. O aviso manda tocar no botão da pessoa, então a área de toque dele vai a 44 px (2 px invisíveis para cada lado), sem mudar o desenho da barra. */ .top .conta-avatar::before{content:"";position:absolute;inset:-2px;border-radius:50%} /* ---------------------------------------------------------------- folhas de vidro */ .conta-fundo{position:fixed;inset:0;z-index:2100;display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));background:color-mix(in srgb,var(--label,#323200) 28%,transparent);animation:conta-aparece .18s ease} .conta-folha{box-sizing:border-box;width:min(460px,100%);max-height:min(88vh,760px);overflow:auto;overscroll-behavior:contain;border-radius:var(--r-sheet,20px);padding:6px 20px 20px;background:var(--vidro-grosso,var(--glass-bg,color-mix(in srgb,var(--surface,#FFFFFF) 86%,transparent)));-webkit-backdrop-filter:blur(var(--glass-blur,24px)) saturate(180%);backdrop-filter:blur(var(--glass-blur,24px)) saturate(180%);border:1px solid var(--glass-border,color-mix(in srgb,var(--label,#323200) 88%,transparent));box-shadow:var(--glass-lift-alto,0 18px 46px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 22%,transparent));color:var(--label,#323200);animation:conta-entra .28s cubic-bezier(.2,.8,.2,1);--login-ink:var(--label,#323200);--login-sub:var(--label2,#6B5A4C);--login-control:var(--surface,#FFFFFF);--login-field-active:var(--surface,#FFFFFF);--login-well:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));--login-error:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200));--login-focus:var(--acao,#1F5FD0)} .conta-folha-topo{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;min-height:56px;margin:0 -20px 8px;padding:0 12px 0 20px;background:inherit;border-radius:var(--r-sheet,20px) var(--r-sheet,20px) 0 0} .conta-folha-topo h2{flex:1;margin:0;font-size:var(--f-title3,1.25rem);line-height:var(--lh-title3,1.5625rem);font-weight:700} .conta-x{flex:none;min-width:44px;min-height:44px;border:0;border-radius:var(--r-pill,999px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label2,#6B5A4C);font-size:var(--f-title2,1.375rem);line-height:1;cursor:pointer} .conta-x:active{transform:scale(.94)} .conta-folha-corpo{display:flex;flex-direction:column;gap:12px} .conta-folha .conta-form{display:flex;flex-direction:column;gap:12px} .conta-folha .conta-campo{display:flex;flex-direction:column;gap:6px;font-size:var(--f-subhead,0.9375rem);font-weight:600} .conta-folha .conta-campo input{box-sizing:border-box;width:100%;min-height:48px;padding:12px 16px;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:var(--r-ctl,12px);background:var(--surface,#FFFFFF);color:inherit;font:inherit;font-size:var(--f-body,1.0625rem);font-weight:500} .conta-folha .conta-campo input:focus-visible{outline:3px solid color-mix(in srgb,var(--acao,#1F5FD0) 45%,transparent);outline-offset:1px} .conta-folha .conta-pin-campo{letter-spacing:.4em;text-align:center;font-size:var(--f-title2,1.375rem)!important} .conta-quem{display:flex;align-items:center;gap:14px;padding:4px 0 6px} .conta-quem b{display:block;font-size:var(--f-headline,1.0625rem)} .conta-quem small{display:block;font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C);line-height:1.4} .conta-avatar-grande,.conta-avatar-medio{flex:none;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,var(--acao,#1F5FD0),var(--d-anil,#5B6CFF));color:var(--acao-txt,#FFFFFF);font-weight:750} .conta-avatar-grande{width:56px;height:56px;font-size:var(--f-title3,1.25rem)} .conta-avatar-medio{width:44px;height:44px;font-size:var(--f-subhead,0.9375rem)} .conta-linha{display:grid;grid-template-columns:minmax(0,1fr) 20px;align-items:center;gap:10px;width:100%;min-height:60px;padding:10px 14px;border:0;border-radius:var(--r-card,16px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:inherit;font:inherit;text-align:left;cursor:pointer} .conta-linha:active{transform:scale(.985)} .conta-linha b{display:block;font-size:var(--f-body,1.0625rem);font-weight:650} .conta-linha small{display:block;font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C)} .conta-grupo{border-radius:var(--r-card,16px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));padding:0 14px} .conta-grupo>summary{min-height:52px;display:flex;align-items:center;font-size:var(--f-body,1.0625rem);font-weight:650;cursor:pointer;list-style:none} .conta-grupo>summary::-webkit-details-marker{display:none} .conta-grupo>summary::after{content:"›";margin-left:auto;font-size:var(--f-title3,1.25rem);color:var(--label2,#6B5A4C);transition:transform .18s ease} .conta-grupo[open]>summary::after{transform:rotate(90deg)} .conta-grupo[open]{padding-bottom:14px} .conta-nota{margin:0;padding:10px 12px;border-radius:var(--r-ctl,12px);background:color-mix(in srgb,var(--d-ambar,#C27A00) 14%,transparent);font-size:var(--f-footnote,0.8125rem);line-height:1.45} /* 1.72.0 (auditoria de design 1720): no celular, as alturas das folhas do sistema (web/folha.css) */ @media (max-width:640px){.conta-fundo{align-items:flex-end;padding:0}.conta-folha{width:100%;max-height:var(--folha-grande,92vh);min-height:var(--folha-media,50vh);border-radius:var(--r-sheet,20px) var(--r-sheet,20px) 0 0;padding-bottom:var(--folha-base,max(20px,env(safe-area-inset-bottom)))}} /* 1.72.0 (auditoria de design 1720): no app a barra de abas some com a folha aberta (web/folha.js); a folha encosta embaixo, com os botões acima do indicador de início (web/folha.css, --folha-base) */ html.app-nativo .conta-fundo{padding-bottom:max(16px,env(safe-area-inset-bottom,0px))} body.dark .conta-fundo{background:color-mix(in srgb,var(--surface2,#F7F3EE) 45%,transparent)} body.dark .conta-folha .conta-campo input{background:var(--surface2,#F7F3EE);border-color:color-mix(in srgb,var(--label,#323200) 12%,transparent)} @media (prefers-reduced-transparency:reduce){.conta-folha{background:var(--surface,#FFFFFF);-webkit-backdrop-filter:none;backdrop-filter:none}body.dark .conta-folha{background:var(--surface,#FFFFFF)}} @media (prefers-reduced-motion:reduce){.conta-fundo,.conta-folha,.conta-btn.is-erro{animation:none}.conta-btn,.conta-opcao,.conta-linha{transition:none}} @keyframes conta-gira{to{transform:rotate(360deg)}} @keyframes conta-treme{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}} @keyframes conta-entra{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} @keyframes conta-aparece{from{opacity:0}to{opacity:1}} /* ---------------------------------------------------------------- telas que a pessoa não pode abrir */ body.sem-fin #seg [data-view="fin"],body.sem-fin .menudd [data-view="fin"], body.sem-ges #seg [data-view="ges"],body.sem-ges .menudd [data-view="ges"], body.sem-kds #seg [data-view="kds"],body.sem-kds .menudd [data-view="kds"], body.sem-exp #seg [data-view="exp"],body.sem-exp .menudd [data-view="exp"], body.sem-menu #seg [data-view="menu"],body.sem-menu .menudd [data-view="menu"], body.sem-rev #seg [data-view="rev"],body.sem-rev .menudd [data-view="rev"], body.sem-sys #seg [data-view="sys"],body.sem-sys .menudd [data-view="sys"], body.sem-cfg #seg [data-view="cfg"],body.sem-cfg .menudd [data-view="cfg"], body.sem-sim #seg [data-view="sim"],body.sem-sim .menudd [data-view="sim"], body.sem-neg #seg [data-view="neg"],body.sem-neg .menudd [data-view="neg"], body.sem-cer #seg [data-view="cer"],body.sem-cer .menudd [data-view="cer"]{display:none!important} /* /usuarios.css */ /* 1.64.0: USUÁRIOS E PERMISSÕES (web/usuarios.js). Folha de vidro grande no computador, tela cheia no celular; lista de pessoas, ficha com papel, lojas e chaves liga-desliga por área, convite e o registro de quem fez o quê. Tokens do Hub (--glass-*, --r-*, --f-*, --sys-*), alvos de 44 pt, estados de botão visíveis. */ body.usu-aberto{overflow:hidden} .usu-fundo{position:fixed;inset:0;z-index:2050;display:flex;align-items:center;justify-content:center;padding:24px;background:color-mix(in srgb,var(--label,#323200) 26%,transparent);animation:usu-aparece .18s ease} .usu-fundo[hidden]{display:none} .usu-painel{box-sizing:border-box;width:min(760px,100%);height:min(92vh,900px);display:flex;flex-direction:column;border-radius:var(--r-sheet,20px);background:var(--vidro-grosso,var(--glass-bg,color-mix(in srgb,var(--surface,#FFFFFF) 86%,transparent)));-webkit-backdrop-filter:blur(var(--glass-blur,24px)) saturate(180%);backdrop-filter:blur(var(--glass-blur,24px)) saturate(180%);border:1px solid var(--glass-border,color-mix(in srgb,var(--label,#323200) 88%,transparent));box-shadow:var(--glass-lift-alto,0 18px 46px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 22%,transparent));color:var(--label,#323200);overflow:hidden;animation:usu-entra .28s cubic-bezier(.2,.8,.2,1)} .usu-topo{flex:none;display:grid;grid-template-columns:minmax(88px,1fr) auto minmax(88px,1fr);align-items:center;gap:8px;min-height:60px;padding:0 12px;border-bottom:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .usu-topo h2{grid-column:2;margin:0;text-align:center;font-size:var(--f-headline,1.0625rem);line-height:1.25;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw} .usu-voltar{grid-column:1;justify-self:start;min-height:44px;padding:0 10px;border:0;border-radius:12px;background:transparent;color:var(--acao,#1F5FD0);font:inherit;font-size:var(--f-body,1.0625rem);font-weight:600;cursor:pointer} .usu-voltar[hidden]{display:none} .usu-x{grid-column:3;justify-self:end;min-width:44px;min-height:44px;border:0;border-radius:var(--r-pill,999px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label2,#6B5A4C);font-size:var(--f-title2,1.375rem);line-height:1;cursor:pointer} .usu-x:active,.usu-voltar:active{transform:scale(.94);opacity:.8} .usu-corpo{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px 20px 28px;display:flex;flex-direction:column;gap:14px} .usu-texto{margin:0;font-size:var(--f-subhead,0.9375rem);line-height:var(--lh-subhead,1.25rem);color:var(--label2,#6B5A4C)} .usu-dica{margin:0;font-size:var(--f-footnote,0.8125rem);line-height:1.45;color:var(--label2,#6B5A4C)} .usu-nota{margin:0;padding:10px 12px;border-radius:var(--r-ctl,12px);background:color-mix(in srgb,var(--acao,#1F5FD0) 10%,transparent);font-size:var(--f-footnote,0.8125rem);line-height:1.45} .usu-nota.perigo{background:color-mix(in srgb,var(--queda,#E21D3C) 12%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200));font-weight:600} .usu-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .usu-abas{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} .usu-abas button{flex:1;min-height:40px;border:0;border-radius:11px;background:transparent;color:var(--label,#323200);font:inherit;font-size:var(--f-subhead,0.9375rem);font-weight:600;cursor:pointer} .usu-abas button[aria-selected=true]{background:var(--surface,#FFFFFF);box-shadow:0 2px 7px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 10%,transparent)} .usu-barra{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .usu-busca{flex:1 1 220px;display:block} .usu-busca input,.usu-campo input{box-sizing:border-box;width:100%;min-height:44px;padding:10px 14px;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:var(--r-ctl,12px);background:var(--surface,#FFFFFF);color:inherit;font:inherit;font-size:var(--f-body,1.0625rem)} .usu-busca input:focus-visible,.usu-campo input:focus-visible{outline:3px solid color-mix(in srgb,var(--acao,#1F5FD0) 45%,transparent);outline-offset:1px} .usu-btn{box-sizing:border-box;min-height:44px;padding:12px 20px;border:0;border-radius:var(--r-ctl,12px);display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:var(--f-callout,1rem);font-weight:650;cursor:pointer;background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent));color:var(--label,#323200);transition:transform .12s ease,opacity .12s ease,background-color .2s ease} .usu-btn.primario{background:color-mix(in srgb,var(--verde,#11994A) 80%,var(--label,#323200));color:var(--acao-txt,#FFFFFF)} .usu-btn.perigo{background:color-mix(in srgb,var(--queda,#E21D3C) 14%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .usu-btn:active:not(:disabled){transform:scale(.97);opacity:.88} .usu-btn:disabled{opacity:.5;cursor:default} .usu-btn.is-loading{opacity:.85;cursor:progress} .usu-btn.is-loading::before,.usu-chave.is-loading::after{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:usu-gira .7s linear infinite} .usu-btn.is-ok{background:color-mix(in srgb,var(--verde,#11994A) 80%,var(--label,#323200))!important;color:var(--acao-txt,#FFFFFF)!important} .usu-btn.is-ok::before{content:"✓";font-weight:800} .usu-btn.is-erro{background:var(--queda,#E21D3C)!important;color:var(--acao-txt,#FFFFFF)!important;animation:usu-treme .32s} .usu-btn:focus-visible,.usu-pessoa:focus-visible,.usu-chave:focus-visible,.usu-abas button:focus-visible,.usu-papel:focus-within{outline:3px solid var(--acao,#1F5FD0);outline-offset:2px} .usu-recado{margin:0;font-size:var(--f-subhead,0.9375rem);font-weight:600;line-height:1.4} .usu-recado:empty{display:none} .usu-recado.erro{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .usu-recado.ok{color:var(--d-verdeagua-t,#006F5D)} .usu-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .usu-pessoa{box-sizing:border-box;width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) 16px;gap:12px;align-items:center;min-height:72px;padding:12px 14px;border:0;border-radius:var(--r-card,16px);background:var(--surface,#FFFFFF);box-shadow:0 2px 10px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 6%,transparent);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:transform .12s ease} .usu-pessoa:active{transform:scale(.99)} .usu-pessoa.desligada{opacity:.6} .usu-pessoa-txt{min-width:0;display:flex;flex-direction:column;gap:2px} .usu-pessoa-txt b{font-size:var(--f-body,1.0625rem);font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .usu-pessoa-txt small{font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .usu-seta{font-size:var(--f-title3,1.25rem);color:var(--label2,#6B5A4C)} .usu-avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,var(--acao,#1F5FD0),var(--d-anil,#5B6CFF));color:var(--acao-txt,#FFFFFF);font-weight:750;font-size:var(--f-subhead,0.9375rem)} .usu-avatar.grande{width:56px;height:56px;font-size:var(--f-title3,1.25rem);flex:none} .usu-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px} .usu-chips:empty{display:none} .usu-chip{display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border-radius:var(--r-pill,999px);background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent));font-size:var(--f-caption1,0.75rem);font-weight:700} .usu-chip.azul{background:color-mix(in srgb,var(--acao,#1F5FD0) 16%,transparent);color:var(--acao,#1F5FD0)} .usu-chip.laranja{background:color-mix(in srgb,var(--d-ambar,#C27A00) 18%,transparent);color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} .usu-chip.verde{background:color-mix(in srgb,var(--verde,#11994A) 18%,transparent);color:var(--d-verdeagua-t,#006F5D)} .usu-chip.cinza{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label2,#6B5A4C)} .usu-cartao{display:flex;align-items:center;gap:14px;padding:14px;border-radius:var(--r-card,16px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} .usu-cartao-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px} .usu-cartao-txt b{font-size:var(--f-body,1.0625rem)} .usu-cartao-txt small{font-size:var(--f-footnote,0.8125rem);line-height:1.45;color:var(--label2,#6B5A4C)} /* chave liga-desliga no desenho do iOS (51 x 31) */ .usu-chave{flex:none;position:relative;width:51px;height:31px;min-height:31px;margin:6px 0;padding:0;border:0;border-radius:16px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));cursor:pointer;transition:background-color .2s ease} .usu-chave::before{content:"";position:absolute;inset:-7px -2px} .usu-chave span{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--surface,#FFFFFF);box-shadow:0 3px 8px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 15%,transparent),0 1px 1px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 16%,transparent);transition:transform .2s cubic-bezier(.2,.8,.2,1)} .usu-chave[aria-checked=true]{background:var(--verde,#11994A)} .usu-chave[aria-checked=true] span{transform:translateX(20px)} .usu-chave:active span{width:31px} .usu-chave[aria-checked=true]:active span{transform:translateX(16px)} .usu-chave:disabled{opacity:.5;cursor:default} .usu-chave.is-loading span{opacity:.6} .usu-chave.is-loading::after{position:absolute;top:7px;left:17px} .usu-linha-chave{display:flex;align-items:center;gap:12px;min-height:52px;padding:4px 0;border-bottom:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .usu-linha-chave:last-child{border-bottom:0} .usu-linha-chave>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .usu-linha-chave b{font-size:var(--f-body,1.0625rem);font-weight:600} .usu-linha-chave small{font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C);line-height:1.4} .usu-dif{font-style:normal;color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200));font-weight:900} /* 1.72.0: texto com a tinta laranja (o laranja do sistema como letra não passa 3:1) */ .usu-form{display:flex;flex-direction:column;gap:14px} .usu-form.linha{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:10px} .usu-form.linha .usu-campo{flex:1 1 180px} .usu-form.linha .usu-recado{flex-basis:100%} .usu-campo{display:flex;flex-direction:column;gap:6px;font-size:var(--f-subhead,0.9375rem);font-weight:600} .usu-sem-borda{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:14px} .usu-form fieldset:not(.usu-sem-borda){margin:0;padding:12px 14px;border:0;border-radius:var(--r-card,16px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} .usu-form legend{float:left;width:100%;margin:0 0 8px;padding:0;font-size:var(--f-headline,1.0625rem);font-weight:700} .usu-form legend+*{clear:both} .usu-papeis{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px} .usu-papeis legend{grid-column:1/-1} .usu-papel{position:relative;display:flex;flex-direction:column;gap:3px;min-height:64px;padding:10px 12px 10px 38px;border-radius:var(--r-ctl,12px);background:var(--surface,#FFFFFF);cursor:pointer;transition:transform .12s ease,box-shadow .16s ease} .usu-papel:active{transform:scale(.98)} .usu-papel input{position:absolute;left:12px;top:13px;width:18px;height:18px;margin:0;accent-color:var(--acao,#1F5FD0)} .usu-papel b{font-size:var(--f-subhead,0.9375rem)} .usu-papel small{font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C);line-height:1.35} .usu-papel.on{box-shadow:inset 0 0 0 2px var(--acao,#1F5FD0)} .usu-grupo h4{margin:12px 0 2px;font-size:var(--f-footnote,0.8125rem);font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--label2,#6B5A4C)} .usu-mais{border-radius:var(--r-card,16px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));padding:0 14px} .usu-mais>summary{min-height:48px;display:flex;align-items:center;font-weight:650;cursor:pointer} .usu-mais .usu-areas{background:transparent;padding:0 0 12px} .usu-acoes{display:flex;flex-wrap:wrap;gap:10px} .usu-acoes .usu-btn{flex:1 1 180px} .usu-acoes.coluna{flex-direction:column} .usu-acoes.coluna .usu-btn{flex:none;width:100%} /* Salvar só gruda embaixo quando tem mudança para salvar (no convite, sempre); fundo sólido para o texto de trás não aparecer através do botão. */ .usu-acoes.fixo{margin:0} .usu-acoes.fixo.sujo,form[data-usu-form=convite] .usu-acoes.fixo{position:sticky;bottom:-28px;z-index:1;margin:0 -20px;padding:12px 20px 16px;background:linear-gradient(to top,var(--vidro-solido,var(--surface,#FFFFFF)) 72%,transparent)} .usu-ficha-topo{display:flex;align-items:center;gap:14px} .usu-ficha-topo b{display:block;font-size:var(--f-body,1.0625rem);word-break:break-all} .usu-ficha-topo small{display:block;font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C);line-height:1.45} .usu-link-caixa{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .usu-link-caixa[hidden]{display:none} .usu-link-caixa .usu-dica{flex-basis:100%} .usu-link-caixa input{flex:1 1 240px;min-height:44px;padding:0 12px;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:var(--r-ctl,12px);background:var(--surface,#FFFFFF);color:inherit;font:inherit;font-size:var(--f-footnote,0.8125rem)} .usu-resultado{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:12px 0} .usu-resultado h3{margin:0;font-size:var(--f-title2,1.375rem)} .usu-resultado .usu-link-caixa,.usu-resultado .usu-acoes{width:100%} .usu-ok{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--verde,#11994A) 80%,var(--label,#323200));color:var(--acao-txt,#FFFFFF);font-size:var(--f-title2,1.375rem);font-weight:800} .usu-historico h3{margin:4px 0 8px;font-size:var(--f-headline,1.0625rem)} .usu-registro{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .usu-registro li{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));font-size:var(--f-subhead,0.9375rem);line-height:1.4} .usu-registro li.negada span{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .usu-registro time{font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C);font-variant-numeric:tabular-nums} .usu-registro small{font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C)} .usu-registro .usu-mais-txt{display:block} .usu-vazio{display:flex;flex-direction:column;gap:12px;align-items:stretch;padding:24px 0} /* 1.74.0 (revisão G1): no cartão largo do computador o convite virava um botão verde de 1260 px de um lado ao outro; o bloco tem largura de leitura e o botão fica do tamanho do polegar e do olho */ .hcar-cartao .usu-vazio{max-width:34rem} @media (max-width:640px){ .usu-fundo{padding:0;align-items:stretch} .usu-painel{width:100%;height:100%;max-height:none;border-radius:0;padding-top:env(safe-area-inset-top)} .usu-topo{grid-template-columns:minmax(44px,auto) minmax(0,1fr) 44px;padding:0 8px} .usu-topo h2{max-width:none} .usu-corpo{padding:14px 16px calc(24px + env(safe-area-inset-bottom))} .usu-acoes.fixo.sujo,form[data-usu-form=convite] .usu-acoes.fixo{margin:0 -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom))} .usu-registro li{grid-template-columns:1fr;gap:2px} .usu-papeis{grid-template-columns:1fr} } /* 1.72.0 (auditoria de design 1720): no app as peças nativas somem com a folha aberta (web/folha.js). A folha começa abaixo da barra de status (web/folha.css, --folha-topo) e o fim da lista fica acima do indicador de início (--folha-base). */ html.app-nativo .usu-painel{padding-top:0} html.app-nativo .usu-corpo{padding-bottom:calc(var(--folha-base,env(safe-area-inset-bottom,0px)) + 8px)} body.dark .usu-fundo{background:color-mix(in srgb,var(--surface2,#F7F3EE) 45%,transparent)} body.dark .usu-pessoa,body.dark .usu-papel,body.dark .usu-abas button[aria-selected=true]{background:var(--surface2,#F7F3EE)} body.dark .usu-busca input,body.dark .usu-campo input,body.dark .usu-link-caixa input{background:var(--surface2,#F7F3EE);border-color:color-mix(in srgb,var(--label,#323200) 12%,transparent)} @media (prefers-reduced-transparency:reduce){.usu-painel{background:var(--surface,#FFFFFF);-webkit-backdrop-filter:none;backdrop-filter:none}body.dark .usu-painel{background:var(--surface,#FFFFFF)}} @media (prefers-reduced-motion:reduce){.usu-fundo,.usu-painel,.usu-btn.is-erro{animation:none}.usu-chave,.usu-chave span,.usu-btn,.usu-pessoa,.usu-papel{transition:none}} @keyframes usu-gira{to{transform:rotate(360deg)}} @keyframes usu-treme{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}} @keyframes usu-entra{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}} @keyframes usu-aparece{from{opacity:0}to{opacity:1}} /* 1.74.0 (Philippe, 03/10/2026), segunda rodada do carrossel: A FICHA E O CONVITE EM CARTÕES (web/usuarios.js, web/hub-carrossel.js). Cada assunto é um cartão da faixa (.usu-car > .usu-cartao-faixa); a faixa ocupa a altura que sobra na folha e cada cartão rola por dentro; o botão de salvar e o resumo ficam embaixo, fora da faixa, sempre à vista. Sem a peça do carrossel carregada, os cartões ficam um embaixo do outro e a folha rola, como antes. */ .usu-car{display:flex;flex-direction:column;gap:14px;min-width:0} .usu-form-faixa{flex:1 1 auto;min-height:0} .usu-corpo:has(.usu-car.hcar){overflow:hidden} .usu-car.hcar{flex:1 1 0;min-height:11rem} .usu-cartao-faixa{box-sizing:border-box;min-width:0;margin:0;padding:12px 14px;border:0;border-radius:var(--r-card,16px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));display:flex;flex-direction:column;gap:10px} .usu-car.hcar>.usu-cartao-faixa{min-height:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;overscroll-behavior-y:contain} .usu-cartao-faixa>*{flex:none} .usu-cartao-faixa>legend{float:left;width:100%;margin:0;padding:0;font-size:var(--f-headline,1.0625rem);font-weight:700} .usu-cartao-faixa>legend+*{clear:both} /* 04/10/2026 (a dupla checagem): o título do cartão do carrossel tem o mesmo tamanho em toda tela (o título 3 da casa) */ .usu-cartao-faixa>h3{margin:0;font-size:var(--f-headline,1.0625rem)} .hcar-expande>.usu-cartao-faixa.hcar-cartao:not(.hcar-grande)>h3{font-size:var(--f-title3,calc(1.25rem * var(--dt,1)));line-height:var(--lh-title3,1.25)} .usu-cartao-faixa .usu-grupo h4{margin:6px 0 2px} .usu-cartao-faixa:disabled{opacity:.72} .usu-quem .usu-cartao-txt{flex:none;gap:2px;padding-top:4px} /* o pé: o resumo do que vai ser gravado e o botão, sempre à vista */ .usu-acoes.fixo.usu-pe,form[data-usu-form=convite] .usu-acoes.fixo.usu-pe{position:static;margin:0;padding:0;background:none;flex-direction:column;flex-wrap:nowrap;gap:8px} .usu-pe .usu-btn{flex:none;width:100%} .usu-resumo{margin:0;font-size:var(--f-footnote,0.8125rem);line-height:1.35;color:var(--label2,#6B5A4C);text-align:center} body.dark .usu-cartao-faixa{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} @media (min-width:641px){ .usu-pe{align-items:center} .usu-pe .usu-btn{width:auto;min-width:16rem} } /* 1.74.0 (Philippe, 04/10/2026), conteúdo primeiro: USUÁRIOS E PERMISSÕES NA TELA (web/usuarios.js, st.naTela). Para o gestor a folha virou uma seção das Configurações: sem véu, sem o topo da folha e sem rolagem no corpo; os cartões têm o desenho dos cartões das outras seções e a altura da faixa. O salvar, o convidar e o voltar moram na barra de baixo. */ .usu-na-tela{min-width:0} .usu-na-tela .usu-topo{display:none} .usu-na-tela .usu-tela .usu-corpo{display:block;flex:none;padding:0;overflow:visible} .usu-na-tela .usu-car.hcar{flex:none;min-height:0} .usu-na-tela .usu-cartao-faixa,.usu-na-tela .usu-form fieldset.usu-cartao-faixa{padding:1.25rem;border-radius:1.5rem;background:var(--settings-surface,color-mix(in srgb,var(--surface,#FFFFFF) 74%,transparent));box-shadow:0 5px 22px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 6%,transparent)} body.dark .usu-na-tela .usu-cartao-faixa,body.dark .usu-na-tela .usu-form fieldset.usu-cartao-faixa{background:var(--settings-surface,color-mix(in srgb,var(--surface2,#F7F3EE) 90%,transparent))} .usu-na-tela .usu-pe-tela{margin:0} .usu-na-tela .usu-resumo{text-align:left} /* 1.74.0 (Philippe, 04/10/2026, quinta fase, ramo janelas; requisitos B1, B4, B6 e B7): A FOLHA NO MESMO DESENHO DA SEÇÃO. Quem cuida de pessoas sem ser gestor abre Usuários numa folha por cima da tela (web/usuarios.js). Ela tinha o voltar e o título em cima, as abas, as fichas dos cartões, cartões que rolavam por dentro e o pé com o botão de salvar. Agora é uma janela (web/hub-janela.js): em cima só o título e o Fechar; a faixa de cartões na altura que sobra, sem rolar (o que não cabe abre no cartão grande); e a barra de baixo dentro da folha. A altura do cartão vem desta coluna. O painel deixa de ser vidro (o conteúdo não é camada funcional; vidro fica na barra) e, sem o filtro, o cartão grande (position fixed) toma a tela inteira em vez de ficar preso dentro do painel. */ .usu-fundo .usu-painel{position:relative;background:var(--page,#F7F5F1);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:transparent} .usu-fundo .usu-topo{grid-template-columns:minmax(44px,1fr) auto minmax(44px,1fr);min-height:3.5rem;border-bottom:0} .usu-fundo .usu-corpo{overflow:hidden;gap:0;padding:.125rem 1rem calc(var(--bf-barra,4rem) + var(--bf-rodape,0px) + 1.75rem)} .usu-fundo .usu-form-faixa{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;gap:0} .usu-fundo .usu-car.hcar{flex:1 1 0;min-height:0} .usu-fundo .usu-painel .usu-car.hcar.hcar-tela:not(.hcar-agrupa)>.hcar-item{height:auto;max-height:none;align-self:stretch} .usu-fundo .usu-corpo .hcar-pe{flex:none} .usu-fundo .usu-cartao-faixa,.usu-fundo .usu-form fieldset.usu-cartao-faixa{padding:1rem} .usu-fundo .usu-pe-tela{margin:0} .usu-fundo .usu-resumo{text-align:left} @media (min-width:761px){.usu-fundo .usu-corpo{padding-bottom:calc(var(--bf-barra,4rem) + 1.5rem)}} /* /settings.css */ /* As preferências de apresentação são definidas em código. */ #cfgv{max-width:1160px;margin:0 auto;padding-bottom:32px;--settings-muted:var(--label2,#6B5A4C);--settings-surface:color-mix(in srgb,var(--surface,#FFFFFF) 74%,transparent);--settings-well:color-mix(in srgb,var(--surface2,#F7F3EE) 82%,transparent);--settings-ok:var(--d-verdeagua-t,#006F5D);--settings-error:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} #cfgv .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:10px 16px} .settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.settings-platforms{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}.settings-panel{padding:24px;margin:0 0 18px;border:0;border-radius:24px;background:var(--settings-surface);box-shadow:0 5px 22px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 6%,transparent);min-width:0}.settings-grid>.settings-panel{margin-bottom:0}.settings-grid{margin-bottom:20px}.settings-panel h2{font-size:calc(1.3125rem * var(--dt));font-weight:650;letter-spacing:-.02em;margin:0 0 20px}.settings-panel h2+.settings-note{margin-top:-8px} .settings-nav{display:flex;align-items:center;gap:18px;text-align:left;color:var(--label,#323200);cursor:pointer;min-height:116px}.settings-nav>span:nth-child(2){flex:1;min-width:0}.settings-nav b{display:block;font-size:calc(1.125rem * var(--dt))}.settings-nav small{display:block;font-size:calc(0.875rem * var(--dt));color:var(--settings-muted);line-height:1.5;margin-top:5px}.settings-symbol{font-size:calc(1.5625rem * var(--dt));width:42px;min-width:42px;height:42px;display:grid;place-items:center;border-radius:14px;color:var(--label,#323200);background:color-mix(in srgb,var(--label,#323200) 6.5%,transparent)} .settings-note{color:var(--settings-muted);font-size:calc(0.875rem * var(--dt));line-height:1.55;margin:14px 0}.settings-field{margin:0 0 18px}.settings-field>label{display:block;font-size:calc(0.875rem * var(--dt));font-weight:600;margin-bottom:9px;line-height:1.45}.settings-inputline{display:flex;gap:8px;align-items:center;min-width:0}.settings-inputline input{width:100%;min-width:0;box-sizing:border-box;min-height:48px;padding:12px 14px;background:var(--settings-well);border:0;border-radius:13px;box-shadow:0 2px 9px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 5.5%,transparent);font:inherit;font-size:calc(1rem * var(--dt));color:var(--label,#323200);text-overflow:ellipsis}.settings-inputline input::placeholder{color:var(--settings-muted);opacity:1;font-size:calc(0.875rem * var(--dt))}.settings-inputline input:focus-visible{outline:2px solid var(--settings-muted);outline-offset:3px;box-shadow:0 0 16px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent)}.settings-inputline input[aria-invalid=true]{box-shadow:0 0 0 1px var(--settings-error)}.settings-inputline input:disabled{opacity:.7} .settings-fieldfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;margin-top:4px}.settings-state{font-size:max(0.6875rem, calc(0.75rem * var(--dt)));color:var(--settings-muted);line-height:1.4;min-width:0;overflow-wrap:anywhere}.settings-state.saved{color:var(--settings-ok)}.settings-state.saved::before{content:"✓ ";}.settings-state.error{color:var(--settings-error)}.settings-state.saving{display:inline-flex;gap:7px;align-items:center}.settings-state.saving::before{content:"";width:12px;height:12px;flex:none;border:2px solid color-mix(in srgb,var(--label,#323200) 16%,transparent);border-top-color:currentColor;border-radius:50%;animation:settings-save .8s linear infinite}.settings-fieldactions{display:flex;flex-wrap:wrap;justify-content:flex-end}.settings-fieldactions button,.settings-remove,.settings-add{border:0;background:transparent;color:var(--label2,#6B5A4C);min-height:44px;padding:8px;font-size:calc(0.8125rem * var(--dt));cursor:pointer}.settings-remove{flex:none}.settings-add{width:100%;background:color-mix(in srgb,var(--label,#323200) 6%,transparent);border-radius:12px;font-weight:600;font-size:calc(0.875rem * var(--dt));margin-bottom:14px}.settings-add:disabled{opacity:.45;cursor:default}.settings-unit{display:flex;gap:4px;background:color-mix(in srgb,var(--label,#323200) 5.5%,transparent);border-radius:16px;padding:4px;width:fit-content;margin:0 auto 24px}.settings-unit button{border:0;min-height:44px;min-width:156px;padding:10px 20px;font:inherit;font-size:calc(0.9375rem * var(--dt));border-radius:12px;background:transparent;color:var(--label,#323200);cursor:pointer}.settings-unit button[aria-pressed=true]{background:var(--settings-well);box-shadow:0 2px 8px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 8%,transparent);font-weight:600}.settings-credentials summary{min-height:44px;display:list-item;align-content:center;font-size:calc(0.875rem * var(--dt));color:var(--settings-muted);cursor:pointer}.settings-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-bottom:10px}.settings-facts p{margin:0 0 15px;font-size:calc(0.875rem * var(--dt));line-height:1.5}.settings-facts b,.settings-facts span{display:block}.settings-facts span{margin-top:5px;color:var(--settings-muted)} body.dark #cfgv{--settings-muted:var(--label,#323200);--settings-surface:color-mix(in srgb,var(--surface,#FFFFFF) 90%,transparent);--settings-well:var(--surface2,#F7F3EE);--settings-ok:var(--d-verdeagua-t,#006F5D);--settings-error:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}body.dark .settings-fieldactions button,body.dark .settings-remove,body.dark .settings-add,body.dark .settings-symbol{color:var(--label,#323200)}body.dark .settings-symbol{background:var(--surface2,#F7F3EE)} @keyframes settings-save{to{transform:rotate(360deg)}} @media(max-width:1000px){.settings-platforms{grid-template-columns:1fr}.settings-platforms .settings-panel{max-width:none}.settings-facts{grid-template-columns:1fr}} @media(max-width:600px){.settings-grid{grid-template-columns:1fr}.settings-panel{padding:20px;border-radius:20px}.settings-unit{width:100%;box-sizing:border-box}.settings-unit button{min-width:0;flex:1;padding:10px}.settings-nav{min-height:110px}} @media(prefers-reduced-motion:reduce){.settings-state.saving::before{animation:none}} @media(prefers-reduced-transparency:reduce),(prefers-contrast:more){#cfgv{--settings-surface:var(--surface,#FFFFFF);--settings-well:var(--surface2,#F7F3EE)}body.dark #cfgv{--settings-surface:var(--surface,#FFFFFF);--settings-well:var(--surface2,#F7F3EE)}.settings-inputline input:focus-visible{outline:3px solid currentColor}} /* 1.28.0: modo por plataforma e chave de pedidos simulados */ .settings-mode{margin:6px 0 14px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--label,#323200) 12%,transparent)}.settings-mode .settings-unit,.settings-panel>.settings-unit{margin:6px 0 10px}.settings-mode .settings-note b{color:var(--label,#323200)} /* 1.42.0: painel do Widget do iFood. Os passos numerados existem porque quem preenche isto vai e volta entre duas telas do iFood, e a ordem importa: sem cadastro nao ha codigo, sem codigo nao ha chat. */ .settings-passos{margin:8px 0 14px;padding-left:20px;display:grid;gap:8px} .settings-passos li{line-height:1.45} .settings-passos li b{display:block} .settings-passos li span{display:block;opacity:.78;font-size:.92em} .settings-widgetsub{margin:14px 0 6px;font-size:.95em;opacity:.85} .settings-widgetloja{margin-bottom:6px} .settings-widgetlojanome{display:block;font-size:.88em;opacity:.7;margin-bottom:2px} .settings-toggle{padding:8px 14px;border-radius:10px;cursor:pointer;border:1px solid color-mix(in srgb,var(--label,#323200) 35%,transparent);background:transparent;color:inherit;font:inherit} .settings-toggle[aria-pressed="true"]{background:color-mix(in srgb,var(--verde,#11994A) 80%,var(--label,#323200));border-color:color-mix(in srgb,var(--verde,#11994A) 80%,var(--label,#323200));color:var(--acao-txt,#FFFFFF)} /* 1.44.0: o seletor de tamanho do texto. Seis opcoes nao cabem numa faixa segmentada de largura fixa, e cada botao mostra o proprio tamanho: quem escolhe ve a amostra antes de aplicar. */ .settings-texto{display:flex;flex-wrap:wrap;gap:8px;width:100%;box-sizing:border-box} .settings-texto button{display:inline-flex;align-items:baseline;gap:8px;flex:1 1 auto;min-width:130px;min-height:var(--tap,44px);justify-content:center} .settings-texto button span{font-weight:700;line-height:1} /* 1.47.0: Configurações > Celular e notificações */ .settings-celular-aparelho{display:flex;flex-direction:column;gap:8px} .settings-celular-niveis,.settings-celular-acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .settings-celular-niveis .settings-toggle{min-width:0} .settings-celular-novo{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:10px} .settings-celular-novo label{display:flex;flex-direction:column;gap:4px;font-size:calc(0.8125rem * var(--dt));color:var(--label2,#6B5A4C)} .settings-celular-novo input,.settings-celular-novo select{min-width:160px;min-height:40px;padding:6px 10px;border-radius:10px;border:1px solid var(--sep-opaque,var(--label3,#9C8D80));background:var(--bg-elev,var(--surface,#FFFFFF));color:inherit} .settings-celular-token{margin:10px 0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--verde,#11994A) 12%,transparent);border:1px solid color-mix(in srgb,var(--verde,#11994A) 35%,transparent)} .settings-celular-token .code{display:block;word-break:break-all;margin:6px 0 8px;user-select:all;-webkit-user-select:all} .settings-facts i{font-style:normal;opacity:.7} /* Suporte por computador, sem expor credenciais locais. */ .support-window{width:min(1100px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:28px;border-radius:28px}.support-head{display:flex;align-items:center;gap:12px}.support-head>div{flex:1}.support-head h1{margin:0}.support-head p{margin:8px 0}.support-devices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px}.support-devices label{display:grid;gap:6px;margin:12px 0}.support-devices select{width:100%;min-height:42px;border-radius:12px;padding:8px;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));font:inherit;background:var(--surface,#FFFFFF);color:inherit}.support-devices .acts{display:flex;flex-wrap:wrap;gap:8px}.support-modal{z-index:16000} .hd-print-review{display:flex;gap:14px;align-items:center;padding:14px;border-bottom:1px solid var(--label3,#9C8D80)}.hd-print-review input{width:22px;height:22px;flex-shrink:0}.hd-print-review span{overflow-wrap:anywhere} /* 1.60.8: áreas de toque independentes da escala da letra; campos nativos cabem no celular. */ #cfgv .settings-toggle{min-height:44px;min-width:44px} #cfgv input:not([type=checkbox]):not([type=radio]),#cfgv select{min-height:44px;min-width:0;max-width:100%;box-sizing:border-box} /* 1.72.0 (auditoria de design 1720): os ícones das linhas são traços no estilo dos SF Symbols (web/settings.js, ICONES_CFG), na cor do texto; os títulos das seções no Title 3 da Apple (21 px ficava fora da escala) */ .settings-symbol{font-size:var(--f-title3,1.25rem);color:var(--label,#323200)} .settings-symbol svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .settings-panel h2{font-size:var(--f-title3,1.25rem);line-height:var(--lh-title3,1.5625rem);font-weight:700} /* 1.74.0 (Philippe, 03/10/2026): AS CONFIGURAÇÕES EM CARROSSEL (web/hub-carrossel.js). A tela inicial em grupos: no celular cada grupo é uma página do carrossel; no computador cada grupo é uma fileira que rola para o lado. O cartão grande traz ícone, nome, uma linha do que resolve e o estado, quando há. Dentro das seções, cada painel é um cartão da faixa. */ .settings-home{margin:0 0 20px} .settings-grupo{min-width:0;margin:0 0 26px} .settings-grupo-cab{margin:0 0 12px} .settings-grupo-cab h2{margin:0;font-size:var(--f-title3,calc(1.25rem * var(--dt)));line-height:1.25;font-weight:700;letter-spacing:-.015em} .settings-grupo-cab p{margin:2px 0 0;color:var(--settings-muted);font-size:var(--f-footnote,max(.6875rem,calc(.8125rem * var(--dt))));line-height:1.4} .settings-grupo-itens{display:grid;gap:10px;min-width:0} .settings-grupo-itens>.settings-panel{margin:0} .settings-grupo-itens .settings-unit{width:100%;box-sizing:border-box} .settings-grupo-itens .settings-unit button{min-width:0;flex:1;padding:10px 8px} .settings-cartao{width:100%;font:inherit;-webkit-tap-highlight-color:transparent;transition:transform var(--dur-rapida,.12s) ease-out} .settings-cartao:active{transform:scale(var(--apertado-escala,.97))} .settings-cartao:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px} .settings-cartao-texto{display:block;min-width:0} .settings-cartao .settings-seta{color:var(--settings-muted);font-size:calc(1.25rem * var(--dt));line-height:1} .settings-estado{display:inline-block;max-width:100%;margin-top:8px;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--label,#323200) 7.5%,transparent);color:var(--label,#323200);font-style:normal;font-size:var(--f-caption1,max(.6875rem,calc(.75rem * var(--dt))));font-weight:600;line-height:1.35;overflow-wrap:anywhere;box-sizing:border-box} .settings-estado[hidden]{display:none} body.dark .settings-estado{background:color-mix(in srgb,var(--surface,#FFFFFF) 10%,transparent);color:var(--label,#323200)} .settings-cartao.hc-card-alerta .settings-estado{background:color-mix(in srgb,var(--d-ambar,#C27A00) 16%,transparent);color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} body.dark .settings-cartao.hc-card-alerta .settings-estado{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} /* celular: a página do grupo rola por dentro; os cartões ficam mais baixos para caberem cinco numa página. O vão entre as páginas é maior que a sangria da faixa, para o texto da página vizinha não aparecer cortado na beirada */ .settings-home.hcar-cel{--hcar-vao:2.5rem} .settings-home.hcar>.settings-grupo{margin:0;padding:2px 2px 12px} .settings-home.hcar-cel .settings-cartao{min-height:84px;padding:16px;gap:14px} /* computador (segunda rodada, 03/10/2026): a mesma faixa de grupos do celular, com vários grupos à vista. Cada grupo é uma coluna (o nome, a frase e os cartões dele, com os painéis soltos embaixo); a coluna tem a altura que sobra na tela e rola por dentro, e a página não rola. A primeira rodada punha uma fileira por grupo e os painéis soltos numa sétima fileira, "Ajustes rápidos": dava 1,8 tela em 1366 x 820. */ .settings-home.hcar-pc{--hcar-vao:1.25rem} .settings-home.hcar-pc .settings-cartao{min-height:88px;padding:14px 16px;gap:14px} .settings-home.hcar-pc .settings-estado{margin-top:6px} .settings-home.hcar-pc .settings-cartao b{font-size:var(--f-headline,calc(1.0625rem * var(--dt,1)))} .settings-home.hcar-pc .settings-cartao small{font-size:var(--f-footnote,max(.6875rem,calc(.8125rem * var(--dt,1))));line-height:1.4;margin-top:2px} .settings-home.hcar-pc .settings-grupo-itens>.settings-panel{padding:20px} .settings-home.hcar-pc .settings-grupo-itens>.settings-panel h2{font-size:var(--f-headline,calc(1.0625rem * var(--dt,1)));margin:0 0 12px} .settings-home.hcar-pc .settings-grupo-itens .settings-note{margin:10px 0} .settings-home.hcar-pc .settings-facts{grid-template-columns:1fr} /* dentro das seções: cada painel é um cartão da faixa (a margem de baixo era da pilha) */ .settings-car>.settings-panel,.fiscal-car>.settings-panel,.hc.hcar>.settings-panel{margin:0} .settings-car:not(.hcar)>.settings-panel,.fiscal-car:not(.hcar)>.settings-panel{margin:0 0 18px} #cfgv .hcar-tela>.settings-panel{scrollbar-width:thin} /* o cartão da faixa é mais estreito que a página: as listas de fatos ficam numa coluna só */ #cfgv .hcar-pc>.settings-panel .settings-facts{grid-template-columns:1fr} @media (prefers-reduced-motion:reduce){.settings-cartao{transition:none}} /* a seção em carrossel: a página não rola, e o respiro do fim da página some. 04/10/2026 (conteúdo primeiro, B1): o cabeçalho (título, frase, voltar e "Salvamento automático") saiu de cima dos cartões, e as regras dele saíram junto. */ #cfgv:has(.hcar-tela){padding-bottom:0} /* 1.74.0 (Philippe, 03/10/2026), SEGUNDA RODADA DO CARROSSEL NAS CONFIGURAÇÕES. "Você pode incluir esse tipo de design em todos os outros menus de configuração, onde a gente desce com cards para baixo." Acessos, Computador da loja, Contestações, Taxas dos contratos, Tamanho do texto e as Configurações do gerente também viraram faixas de cartões; a tela inicial do computador é a mesma faixa de grupos do celular. O que segue é só o que essas telas precisam a mais. */ /* os três cartões da comanda: o bloco que cada módulo monta já vinha com moldura e título próprios (cartão dentro de cartão). Na faixa, a moldura e o título são os do cartão da faixa, iguais aos dos outros cartões; os de dentro somem. A faixa de um item só que o espaço de trabalho monta dentro do bloco deixa de ser uma caixa de rolagem, para não segurar o arrasto da faixa de fora. */ #cfgv .settings-comanda .hvw-workspace .hvw-card,#cfgv .settings-comanda .hc-card{border:0;border-radius:0;background:transparent;box-shadow:none;padding:0;margin:0;cursor:default} #cfgv .settings-comanda .hvw-workspace .hvw-card:hover,#cfgv .settings-comanda .hvw-workspace .hvw-card:active{transform:none;box-shadow:none;border-color:transparent} #cfgv .settings-comanda .hvw-card-header,#cfgv .settings-comanda [data-print-content]>h3{display:none} #cfgv .settings-comanda .hvw-grid.hcar{overflow:visible!important;margin:0;padding:0;overscroll-behavior:auto;scroll-snap-type:none} /* Taxas dos contratos: os campos de cada aplicativo; quando os dois cartões cabem lado a lado (computador), em duas colunas */ .settings-campos{display:grid;grid-template-columns:minmax(0,1fr);gap:0 18px} #cfgv .hcar-pc.hcar-cabe>.settings-panel .settings-campos{grid-template-columns:repeat(2,minmax(0,1fr))} /* a recuperação de senha em Acessos (web/senha-recuperacao.js): os campos com o mesmo desenho dos outros campos da tela */ #cfgv .rec-lbl{font-size:calc(.875rem * var(--dt,1));font-weight:600;line-height:1.45;color:var(--label,#323200);margin:14px 0 8px} #cfgv .rec-in{display:block;width:100%;min-width:0;box-sizing:border-box;min-height:48px;padding:12px 14px;border:0;border-radius:13px;background:var(--settings-well);box-shadow:0 2px 9px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 5.5%,transparent);font:inherit;font-size:calc(1rem * var(--dt,1));color:var(--label,#323200);text-overflow:ellipsis} #cfgv .rec-in::placeholder{color:var(--settings-muted);opacity:1;font-size:calc(.875rem * var(--dt,1))} #cfgv .rec-in:focus-visible{outline:2px solid var(--settings-muted);outline-offset:3px} #cfgv .rec-recado{margin:14px 0 0;color:var(--settings-ok)} #cfgv .rec-recado.rec-recado-erro{color:var(--settings-error)} #cfgv .rec-pedido{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border:0;border-radius:14px;padding:12px 14px;margin:0 0 10px;background:color-mix(in srgb,var(--d-ambar,#C27A00) 12%,transparent)} #cfgv .rec-pedido b{display:block;font-size:calc(.9375rem * var(--dt,1))} #cfgv .rec-pedido span{font-size:var(--f-footnote,max(.6875rem,calc(.8125rem * var(--dt,1))));color:var(--settings-muted)} #cfgv .rec-pedido .oacts{margin:0} #cfgv .settings-panel>.oacts{margin-top:16px} /* Tamanho do texto no celular estreito (320 px): duas opções por linha, em vez de oito linhas */ @media(max-width:360px){.settings-texto button{min-width:104px;padding-left:8px;padding-right:8px}} #cfgv .rec-linha{display:grid;grid-template-columns:minmax(0,1fr) 6.5rem;gap:0 12px} /* o plano do contrato é a única lista de escolha entre os campos: o mesmo desenho dos outros campos, e a linha inteira do cartão */ #cfgv .settings-inputline select{width:100%;min-height:48px;padding:12px 14px;border:0;border-radius:13px;background-color:var(--settings-well);box-shadow:0 2px 9px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 5.5%,transparent);font:inherit;font-size:calc(1rem * var(--dt,1));color:var(--label,#323200);text-overflow:ellipsis} #cfgv .settings-inputline select:focus-visible{outline:2px solid var(--settings-muted);outline-offset:3px} .settings-campos>.settings-field:has(select){grid-column:1/-1} /* dentro dos cartões da faixa os campos e as listas de fatos ficam mais juntos: a linha de estado de cada campo (Salvo, Aguardando para salvar) continua com o lugar dela, só mais baixo, e mais cartões cabem na tela sem rolar por dentro */ .settings-car .settings-field{margin-bottom:6px} .settings-car .settings-fieldfoot{min-height:22px;margin-top:3px} .settings-car .settings-facts{gap:0 22px} .settings-car .settings-facts p{margin-bottom:12px} .settings-car .settings-tecnico+.settings-campos{margin-top:14px} /* 1.74.0 (Philippe, 04/10/2026): CONTEÚDO PRIMEIRO NAS CONFIGURAÇÕES (Parte B de docs/ESPECIFICACAO-CONTEUDO-PRIMEIRO-2026-10-04.md). "Os cards no carrossel são KING!" Acima dos cartões não fica nada (B1, B4): o título grande, a frase, o voltar, os seletores de loja e as fichas saíram (web/settings.js: o nome da seção vai para a pílula do topo; o resto, para a barra de baixo). A faixa usa a largura inteira da tela, como no Dashboard e nos Relatórios. O cartão não rola (B6): mostra o resumo e abre o cartão grande. */ #cfgv:has(.hcar-tela){max-width:none;margin-top:0;padding-top:0} /* o resumo do cartão: os valores de agora, um por linha (o formulário abre no cartão grande) */ .settings-resumo .settings-facts{grid-template-columns:1fr;gap:0} .settings-resumo .settings-facts p{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:2.75rem;box-sizing:border-box;margin:0;padding:.5rem 0;border-bottom:1px solid color-mix(in srgb,var(--label,#323200) 16%,transparent)} .settings-resumo .settings-facts p:last-child{border-bottom:0} .settings-resumo .settings-facts b{font-weight:500;color:var(--settings-muted);font-size:var(--f-subhead,calc(.9375rem * var(--dt,1)))} .settings-resumo .settings-facts span{font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere;font-size:var(--f-subhead,calc(.9375rem * var(--dt,1)))} /* de que loja é o cartão (a escolha da loja mora na barra de baixo) */ .settings-de-loja{margin-left:.375rem;font-size:var(--f-footnote,max(.6875rem,calc(.8125rem * var(--dt,1))));font-weight:600;color:var(--settings-muted);letter-spacing:0;white-space:nowrap} .settings-acoes{display:flex;flex-wrap:wrap;gap:.5rem} /* a tela inicial: o GRUPO é o cartão; as seções são mini cartões dentro dele e cabem sem rolar */ .settings-home.hcar>.settings-grupo{margin:0;padding:1.125rem;border-radius:1.5rem;background:var(--settings-surface);box-shadow:0 5px 22px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 6%,transparent);box-sizing:border-box} .settings-home .settings-grupo-cab{margin:0 .125rem .75rem} .settings-home .settings-grupo-itens{gap:.5rem} .settings-home .settings-cartao,.settings-home.hcar-cel .settings-cartao,.settings-home.hcar-pc .settings-cartao{min-height:3.5rem;margin:0;padding:.5rem .75rem;gap:.75rem;border-radius:1rem;background:var(--settings-well);box-shadow:none} .settings-home .settings-symbol{width:2.25rem;min-width:2.25rem;height:2.25rem;border-radius:.625rem} .settings-home .settings-cartao b{font-size:var(--f-headline,calc(1.0625rem * var(--dt,1)));line-height:1.25} .settings-home .settings-cartao small{margin-top:.0625rem;font-size:var(--f-footnote,max(.6875rem,calc(.8125rem * var(--dt,1))));line-height:1.35} .settings-home .settings-estado,.settings-home.hcar-pc .settings-estado{margin-top:.25rem} /* no cartão pequeno a linha do estado diz mais que a frase fixa; a frase volta no cartão grande. O :has() fica no próprio mini cartão e passa o valor por uma variável (docs/DESEMPENHO-2026-10-03.md: nada de etiqueta solta depois de :has()). */ .settings-home .settings-cartao:has(.settings-estado:not([hidden])){--cfg-frase:none} .settings-home .settings-cartao .settings-cartao-texto small{display:var(--cfg-frase,block)} .settings-home .settings-grupo.hcar-grande .settings-cartao{--cfg-frase:block} .settings-home .settings-grupo-itens>.settings-panel,.settings-home.hcar-pc .settings-grupo-itens>.settings-panel{margin:0;padding:.75rem;border-radius:1rem;background:var(--settings-well);box-shadow:none} .settings-home .settings-grupo-itens>.settings-panel h2,.settings-home.hcar-pc .settings-grupo-itens>.settings-panel h2{margin:0 0 .5rem;font-size:var(--f-headline,calc(1.0625rem * var(--dt,1)));line-height:1.25} .settings-home .settings-grupo-itens>.settings-panel .settings-unit{margin:0} /* 1.74.0 (Philippe, 04/10/2026, sexta fase, revisão final G1): no tema escuro o trilho do segmento, dentro do painel da tela inicial, tinha a cor do painel, e o escolhido ("Manual", "Desligado") também: só o negrito dizia qual estava ligado. O trilho fica mais fundo e o escolhido volta a aparecer, como nas seções. */ body.dark .settings-home .settings-grupo-itens>.settings-panel .settings-unit{background:color-mix(in srgb,var(--surface2,#F7F3EE) 26%,transparent)} .settings-home .settings-grupo-itens>.settings-panel .settings-note{margin:.5rem 0 0} .settings-home .settings-grupo-itens>.settings-panel .btn{width:100%;box-sizing:border-box} .settings-home .settings-acoes .btn{flex:1 1 9rem;width:auto} /* o tamanho do texto: um passo por toque, na própria tela inicial */ .settings-cartao-linha{display:flex;align-items:stretch;gap:.375rem;min-width:0} .settings-cartao-linha>.settings-cartao{flex:1;min-width:0} .settings-passo{display:flex;gap:.25rem;flex:none} .settings-passo button{display:grid;place-items:center;min-width:2.75rem;min-height:2.75rem;padding:0;border:0;border-radius:1rem;background:var(--settings-well);color:var(--label,#323200);font:inherit;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--dur-rapida,.12s) ease-out} .settings-passo button:active{transform:scale(var(--apertado-escala,.97))} .settings-passo button:disabled{opacity:.38;cursor:default} .settings-passo button:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px} .settings-passo button:first-child span{font-size:.8125rem} .settings-passo button:last-child span{font-size:1.3125rem} body.dark .settings-passo button{color:var(--label,#323200)} /* as folhas da barra de baixo: a busca e a lista das seções, e o ponto da situação na lista dos cartões */ .cfg-busca{display:block;width:100%;box-sizing:border-box;min-height:2.75rem;margin:0 0 .75rem;padding:.5rem .875rem;border:1px solid color-mix(in srgb,var(--label,#323200) 22%,transparent);border-radius:.875rem;background:color-mix(in srgb,var(--label3,#9C8D80) 8%,transparent);color:inherit;font:inherit;font-size:calc(1rem * var(--dt,1))} .cfg-busca:focus-visible{outline:.1875rem solid var(--bf-realce,var(--acao,#1F5FD0));outline-offset:.125rem} .cfg-secao{display:block;min-width:0} .cfg-secao b{display:block;font-weight:600} .cfg-secao small{display:block;font-size:max(.6875rem,calc(.8125rem * var(--dt,1)));font-weight:400;line-height:1.35;opacity:.72;overflow-wrap:anywhere} .cfg-luz{flex:none;width:.5625rem;height:.5625rem;border-radius:50%;background:var(--verde,#11994A)} .cfg-luz[data-hsi-situacao="parado"]{background:var(--queda,#E21D3C)} .cfg-luz[data-hsi-situacao="atencao"]{background:var(--d-ambar,#C27A00)} .cfg-luz[data-hsi-situacao="desligada"]{background:var(--label3,#9C8D80)} @media (prefers-reduced-motion:reduce){.settings-passo button{transition:none}} /* 04/10/2026 (a dupla checagem): a altura do cartão no computador e a posição dos pontos no toque saíram daqui e moram na peça (web/hub-carrossel.css): a mesma medida em toda tela */ /* a linha do resumo que leva ao campo: tocar abre o cartão grande com ele em foco */ .settings-resumo [data-cfg-editar]{cursor:pointer} .settings-resumo [data-cfg-editar]::after{content:"›";flex:none;margin-left:-.5rem;color:var(--settings-muted);font-weight:400} /* /menu-media.css */ /* Fotos, identificação do produto e código PDV do cardápio. 1.74.0 (04/10/2026): a linha antiga do item (.mi.menu-visual-row) saiu; o item é um mini cartão e o desenho dele mora em web/cardapio-cartoes.css. */ #menuv{--settings-muted:var(--label2,#6B5A4C);--settings-well:color-mix(in srgb,var(--surface2,#F7F3EE) 86%,transparent);--settings-ok:var(--d-verdeagua-t,#006F5D);--settings-error:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} #menuv .mi-photo{width:88px;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:14px} #menuv .mi-photo-space{width:88px;min-height:12px} #menuv .mi-main{min-width:0}#menuv .mi-name{overflow-wrap:anywhere} #menuv .mi-code{min-width:0}#menuv .mi-code .settings-field{margin:0} #menuv .mi-code .settings-field>label{font-size:calc(0.8125rem * var(--dt));margin-bottom:6px;color:var(--settings-muted)} #menuv .mi-code .settings-inputline input{min-height:44px;padding:9px 12px;font-size:calc(0.9375rem * var(--dt));border-radius:12px} #menuv .mi-code .settings-fieldfoot{min-height:18px;flex-wrap:wrap;margin-top:5px} #menuv .mi-code .settings-fieldactions{margin-left:auto} #menuv .mi-code-value{display:block;font-size:calc(0.875rem * var(--dt));overflow-wrap:anywhere;color:var(--settings-muted)} #menuv .mi-code-line{display:flex;align-items:center;gap:8px;min-height:44px} #menuv .mi-code-line code{font-size:calc(0.9375rem * var(--dt));letter-spacing:.025em;user-select:all;overflow-wrap:anywhere;flex:1} #menuv .mi-code-line button{width:44px;height:44px;flex:none;display:grid;place-items:center;border:0;border-radius:12px;color:inherit;background:var(--settings-well);cursor:pointer} #menuv .mi-code-line button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7} #menuv .mi-code-caption{display:block;font-size:max(0.6875rem, calc(0.75rem * var(--dt)));color:var(--settings-muted);min-height:18px} #menuv .mi-st{justify-self:end;display:flex;flex-direction:column;gap:6px} .ai-menu-item.has-photo .ai-menu-item-heading{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;align-items:center} .ai-menu-photo{width:92px;aspect-ratio:4/3;object-fit:cover;border-radius:14px} .ai-menu-item.has-photo .ai-menu-progress{grid-column:2} .rc .ph.has-original-photo{background:none;height:auto;max-height:none} .rc .ph.has-original-photo img{display:block;width:100%;height:auto;max-height:180px;object-fit:contain;border-radius:14px;margin:0 auto} body.dark #menuv{--settings-muted:var(--label,#323200);--settings-well:var(--surface2,#F7F3EE);--settings-ok:var(--d-verdeagua-t,#006F5D);--settings-error:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} @media(max-width:600px){.ai-menu-item.has-photo .ai-menu-item-heading{grid-template-columns:72px minmax(0,1fr)}.ai-menu-photo{width:72px}} @media(prefers-reduced-transparency:reduce),(prefers-contrast:more){#menuv{--settings-well:var(--surface2,#F7F3EE)}body.dark #menuv{--settings-well:var(--surface2,#F7F3EE)}} /* /operations.css */ /* Conferência dos itens e autorização acima dos resultados do assistente. */ #pmodal{z-index:2200;isolation:isolate} /* 1.30.4: a notificação fica ACIMA DE TUDO, sempre. Antes ela era 1000 e sumia atrás da janela de cancelamento (2200), do Cérebro (1260), do painel de filtros (1250), do login (2000) e da tela cheia do assistente (1400 e 1500). Aviso que a operação não vê é aviso que não existe: senha errada, pedido cancelado, ação recusada. O seletor por id vence qualquer regra de classe, inclusive as com !important, e o container continua sem capturar clique (pointer-events none), então não atrapalha nenhuma janela. */ #toasts{z-index:2147483000!important;pointer-events:none} #toasts .toast{pointer-events:auto} /* Texto informativo passa o toque; avisos com ação mantêm o alvo inteiro. */ #toasts > div.toast:not([role=button]):not([tabindex]):not(:has(button,a,input,select,textarea,[role=button],[tabindex])){pointer-events:none} #pmodal #pc{max-height:calc(100dvh - 32px);overflow:auto} #pc [data-pconfirm][disabled]{opacity:.65;cursor:progress} #view-exp .e:not(.mini){display:flex;flex-direction:column;align-self:stretch} #view-exp .e:not(.mini)>.acts{margin-top:auto;padding-top:12px;display:grid;grid-template-columns:88px 96px;justify-content:end;align-items:end;min-height:56px;gap:4px} #view-exp .e>.acts .lnk{min-height:44px;display:inline-flex;align-items:center;justify-content:center} #view-exp .e>.acts [data-cancel]{grid-column:1;grid-row:1} #view-exp .e>.acts [data-print]{grid-column:2;grid-row:1} #view-exp .e .items.sm .fl{font-size:var(--f-title2,calc(1.375rem * var(--dt)));line-height:1.2;font-weight:700;overflow-wrap:anywhere} #view-exp .e .items.sm .drink{font-size:calc(1.125rem * var(--dt));line-height:1.25} #view-exp .e .items.sm .pzh{font-size:calc(0.9375rem * var(--dt))} #view-exp .e .items.sm .comp,#view-exp .e .items.sm .obs{font-size:calc(1rem * var(--dt));line-height:1.3} .e.mini .driver-helmet{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px} .of-fields input[type=number]{width:100%;min-height:44px;border-radius:10px;padding:8px 10px;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));background:var(--surface,#FFFFFF);color:var(--label,#323200);font:inherit} @media(max-width:760px){#view-exp .e .items.sm .fl{font-size:var(--f-title3,calc(1.25rem * var(--dt)))}} /* O numero configurado e um limite; nunca comprime o card abaixo da conferencia. */ #view-exp .lane.c-pronto:not(.minilane) .col{grid-template-columns:repeat(auto-fit,minmax(min(100%,max(224px,calc((100% - (var(--prontoCols,2) - 1) * 12px) / var(--prontoCols,2)))),1fr))} @media(min-width:761px){ #view-exp .lane:not(.minilane){min-width:264px} /* Busca em tela larga (cards completos nas faixas laterais): o mínimo da faixa Pronto não pode somar com os das laterais além da tela, senão aparece rolagem lateral. */ #view-exp .lanes.full{grid-template-columns:minmax(264px,.75fr) minmax(520px,3.4fr) minmax(264px,.75fr) minmax(264px,.75fr)} #view-exp .lanes.full.five{grid-template-columns:minmax(264px,.75fr) minmax(500px,3fr) minmax(264px,.75fr) minmax(264px,.75fr) minmax(264px,.75fr)} } @media(max-width:760px){#view-exp .lane.c-pronto:not(.minilane) .col{grid-template-columns:minmax(0,1fr)}} /* Tres destinos de accion; a selecao tem seu proprio prazo de inatividade. */ #selbar{align-items:center;gap:8px 16px;padding:12px 16px} #selbar #selcount{font-size:calc(0.9375rem * var(--dt));margin-right:auto} .bulk-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap} #selbar .bulk-actions>*{font:inherit;min-height:44px;border-radius:12px;margin:0;box-sizing:border-box} #bulk-target{min-width:142px;padding:8px 32px 8px 12px;background-color:var(--surface,#FFFFFF);color:var(--label,#323200);border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} #bulk-selection-note{font-size:calc(0.8125rem * var(--dt));line-height:1.35} #bulk-selection-note:empty{display:none} @media(max-width:560px){#selbar{margin:10px 12px 0;padding:12px}#selbar #selcount{flex-basis:100%}.bulk-actions{display:grid;grid-template-columns:auto minmax(120px,1fr) auto;gap:6px;width:100%}#selbar .bulk-actions>*{font-size:calc(0.875rem * var(--dt));padding-left:8px;padding-right:8px;min-width:0}#bulk-target{width:100%}} /* Filtros em uma grade completa; o rodape nunca depende de rolagem. */ #order-filter-panel{top:50%;left:50%;right:auto;transform:translate(-50%,-50%);width:min(760px,calc(100vw - 24px));max-height:none;overflow:visible;padding:16px 20px;box-sizing:border-box} /* 1.72.0: 20 pt de margem (iPad e computador); no celular e no app é a folha de baixo (web/folha.css) */ #order-filter-panel .of-head{margin:0 0 12px;min-height:44px} #order-filter-panel .of-fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px} #order-filter-panel .of-fields label{font-size:calc(0.875rem * var(--dt));line-height:calc(1.125rem * var(--dt));min-width:0;gap:4px;align-content:start} #order-filter-panel select,#order-filter-panel input[type=number]{min-width:0;width:100%;height:44px;font-size:calc(0.875rem * var(--dt));padding:8px;box-sizing:border-box} #order-filter-panel .of-count-controls{display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:4px} #order-filter-panel fieldset{margin:10px 0 0;padding:0;border:0;min-width:0} #order-filter-panel legend{font-size:calc(0.875rem * var(--dt));font-weight:600;padding:0;margin-bottom:4px} #order-filter-panel fieldset label{margin:0;gap:8px;padding:4px 6px;box-sizing:border-box;font-size:calc(0.875rem * var(--dt));line-height:calc(1.125rem * var(--dt));min-height:44px;overflow-wrap:anywhere} #order-filter-panel fieldset input{flex-shrink:0;margin:0} #order-filter-panel .of-platforms{display:flex;gap:16px;flex-wrap:wrap} #order-filter-panel .of-platforms legend{float:left;align-self:center;margin:0 8px 0 0;padding-top:13px} #order-filter-panel .of-flavor-section p{font-size:calc(0.8125rem * var(--dt));line-height:calc(1.0625rem * var(--dt));margin:0 0 6px;color:var(--label2,#6B5A4C)} #order-filter-panel .of-flavors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 8px;max-height:none;overflow:visible} #order-filter-panel .of-flavors [hidden],#order-filter-panel .of-pages[hidden]{display:none} #order-filter-panel .of-pages{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px;font-size:calc(0.8125rem * var(--dt))} #order-filter-panel .of-foot{margin-top:12px;gap:8px} #order-filter-panel .of-foot .btn,#order-filter-panel .icon{min-height:44px;min-width:44px} #order-filter-panel .of-foot .btn{flex:1} @media(max-width:560px){#order-filter-panel{padding:12px}#order-filter-panel .of-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#order-filter-panel .of-flavors{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}#order-filter-panel .of-head{margin-bottom:8px}} .of-time-hint{font-size:max(0.6875rem, calc(0.75rem * var(--dt)));line-height:1.3;color:var(--label2,#6B5A4C);font-weight:400} /* 1.42.0: o quadro do chat do iFood (web/ifood-widget.js). Altura fixa porque o widget e de terceiro e nao avisa quanto espaco quer; 460px cabe uma conversa sem o painel virar uma tela inteira. */ .ifw-caixa{margin-top:10px;border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--label3,#9C8D80) 8%,transparent);min-height:460px} .ifw-quadro{width:100%;height:460px;border:0;display:block} .ifw-falta{padding:14px} .ifw-passos{margin:10px 0 12px;padding-left:20px;display:grid;gap:8px} .ifw-passos li b{display:block} .ifw-passos li span{display:block;opacity:.78;font-size:.92em} .ifw-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--canal-ifood-fundo);color:var(--pal-branco);font-size:max(0.6875rem, calc(0.625rem * var(--dt)));line-height:calc(1rem * var(--dt));text-align:center;font-weight:700} #ifwbtn{position:relative} /* /diagnostics.css */ /* Support stays visible while each diagnostic has its own readable card. */ .hub-diagnostic{--hd-ink:var(--label,#323200);--hd-secondary:var(--label3,#9C8D80);--hd-glass:color-mix(in srgb,var(--surface,#FFFFFF) 94%,transparent);--hd-soft:color-mix(in srgb,var(--surface2,#F7F3EE) 6.5%,transparent);--hd-green:var(--verde,#11994A);--hd-focus:var(--acao,#1F5FD0);box-sizing:border-box;width:min(1040px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:20px;border:0;border-radius:24px;background:var(--hd-glass);color:var(--hd-ink);font:0.9375rem/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:calc(0.9375rem * var(--dt));overflow:auto;box-shadow:0 18px 64px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 14.118%,transparent);backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2)} .hub-diagnostic::backdrop{background:color-mix(in srgb,var(--label,#323200) 30%,transparent);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)} .hub-diagnostic[open]:has(.hd-body){display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:12px;padding:8px;background:transparent;box-shadow:none;overflow:hidden;backdrop-filter:none;-webkit-backdrop-filter:none} .hub-diagnostic h2{font-size:calc(1.5rem * var(--dt));letter-spacing:-0.03125rem;line-height:1.2;margin:0}.hub-diagnostic h3{font-size:calc(1.3125rem * var(--dt));line-height:1.25;margin:0;letter-spacing:-0.021875rem}.hub-diagnostic h4{display:flex;align-items:center;gap:8px;font-size:calc(1rem * var(--dt));margin:0 0 10px}.hub-diagnostic p,.hub-diagnostic h3{overflow-wrap:anywhere}.hub-diagnostic p{margin:8px 0}.hub-diagnostic svg{width:24px;height:24px;flex:0 0 24px} .hub-diagnostic button{box-sizing:border-box;min-height:44px;min-width:44px;font:600 0.875rem/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:calc(0.875rem * var(--dt));color:var(--hd-ink);background:var(--hd-soft);border:0;border-radius:13px;padding:11px 15px;cursor:pointer;touch-action:manipulation}.hub-diagnostic button:disabled{opacity:.5;cursor:default}.hub-diagnostic button:focus-visible,.hub-diagnostic .hd-body:focus-visible{outline:3px solid var(--hd-focus);outline-offset:2px}.hub-diagnostic button:not(:disabled):active{filter:brightness(.94)} .hd-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.hd-head>[data-close]{font-size:calc(1.5625rem * var(--dt));font-weight:400;line-height:1;padding:8px}.hub-diagnostic .hd-eyebrow{color:var(--hd-secondary);font-size:calc(0.8125rem * var(--dt));font-weight:600;letter-spacing:0.009375rem;margin:0 0 4px}.hub-diagnostic:has(.hd-body)>.hd-head,.hub-diagnostic:has(.hd-body)>.hd-note,.hub-diagnostic:has(.hd-body)>.hd-actions,.hd-unit,.hd-limitations,.hd-loading{background:var(--hd-glass);border:0;border-radius:22px;box-shadow:0 5px 22px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 5.8824%,transparent);backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2)} .hub-diagnostic:has(.hd-body)>.hd-head{padding:16px 20px}.hd-note{padding:12px 16px;border-radius:15px;background:var(--hd-soft);overflow-wrap:anywhere}.hub-diagnostic:has(.hd-body)>.hd-note{margin:0;display:flex;align-items:center;gap:10px;min-height:44px;box-sizing:border-box;font-size:calc(0.875rem * var(--dt));padding:11px 18px}.hub-diagnostic:has(.hd-body)>.hd-note:before{content:"";width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:var(--hd-secondary);opacity:.75}.hub-diagnostic[data-busy="true"]>.hd-note:before{width:14px;height:14px;flex-basis:14px;border:2px solid var(--hd-soft);border-top-color:var(--hd-green);background:transparent;animation:hd-checking .85s linear infinite} .hub-diagnostic .hd-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:12px;min-height:0;max-height:calc(100dvh - 240px);padding:2px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;border-radius:22px}.hd-unit{min-width:0;padding:20px;display:flex;flex-direction:column;gap:0}.hd-card-head{display:flex;gap:12px;align-items:center;margin-bottom:4px}.hd-device{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:14px;background:var(--hd-soft);color:var(--hd-green)}.hd-card-head .hd-dot{margin-left:auto}.hd-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 10px;background:var(--label3,#9C8D80)}.hd-dot.good{background:var(--verde,#11994A)}.hd-dot.bad{background:var(--queda,#E21D3C)}.hd-message{font-size:calc(0.9375rem * var(--dt))}.hd-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}.hd-metrics>div{background:var(--hd-soft);border-radius:14px;padding:10px}.hd-metrics dt{font-size:calc(0.8125rem * var(--dt));color:var(--hd-secondary);line-height:1.3;min-height:34px}.hd-metrics dd{margin:3px 0 0;font-size:calc(1.6875rem * var(--dt));line-height:1.15;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-0.04375rem}.hd-source{font-size:calc(0.8125rem * var(--dt));color:var(--hd-secondary)}.hd-unit>.hd-recover{width:100%;margin-top:auto;background:var(--hd-green);color:var(--acao-txt,#FFFFFF)}.hd-unit>.hd-source:last-of-type{margin-bottom:14px}.hd-computer{grid-column:1/-1}.hd-hardware-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:16px}.hd-hardware{min-width:0}.hd-hardware p{font-size:calc(0.875rem * var(--dt))}.hd-hardware button{margin-top:6px}.hd-network{display:grid;gap:3px;margin:9px 0;font-size:calc(0.875rem * var(--dt));overflow-wrap:anywhere}.hd-network span{color:var(--hd-secondary)}.hd-limitations,.hd-loading{grid-column:1/-1;margin:0!important;padding:12px 18px} .hd-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.hub-diagnostic:has(.hd-body)>.hd-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin:0;padding:10px 12px}.hd-paging{display:flex;gap:8px;margin-right:auto}.hd-actions [data-refresh]{background:var(--hd-green);color:var(--acao-txt,#FFFFFF)}.hd-actions [data-page]{flex:0 0 auto} [data-theme="dark"] .hub-diagnostic,body.dark .hub-diagnostic{--hd-ink:var(--label,#323200);--hd-secondary:var(--surface,#FFFFFF);--hd-glass:color-mix(in srgb,var(--label,#323200) 96%,transparent);--hd-soft:color-mix(in srgb,var(--surface2,#F7F3EE) 9%,transparent);--hd-green:var(--verde,#11994A);--hd-focus:var(--acao,#1F5FD0)}.hub-diagnostic:focus{outline:none} @media(max-width:700px){.hub-diagnostic h2{font-size:calc(1.375rem * var(--dt))}.hub-diagnostic .hd-body{grid-template-columns:1fr}.hd-hardware-grid{gap:16px}.hd-unit{padding:18px}.hd-actions [data-close]{display:none}} @media(max-width:480px){.hub-diagnostic{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:18px}.hub-diagnostic[open]:has(.hd-body){padding:4px;gap:8px}.hub-diagnostic:has(.hd-body)>.hd-head{padding:14px 16px}.hub-diagnostic:has(.hd-body)>.hd-note{padding:10px 14px}.hub-diagnostic .hd-body{max-height:calc(100dvh - 310px);gap:8px}.hd-hardware-grid{grid-template-columns:1fr}.hub-diagnostic:has(.hd-body)>.hd-actions{display:grid;grid-template-columns:1fr 1fr;padding:8px;gap:6px}.hd-paging{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;margin:0}.hd-actions>button{min-width:0;padding-inline:9px}.hd-metrics>div{padding:10px 8px}} @keyframes hd-checking{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.hub-diagnostic *{animation:none!important;transition:none!important}} /* 1.27.0: janela de diagnóstico sob o Cérebro (não modal): abaixo do ícone, acima do sistema, fechável por voz. */ .hub-diagnostic.hd-under-brain{position:fixed;left:50%;transform:translateX(-50%);top:var(--ws-dialog-top,calc(var(--ws-top,10px) + 118px));margin:0;width:min(960px,calc(100vw - 40px));max-height:calc(100dvh - var(--ws-dialog-top,calc(var(--ws-top,10px) + 118px)) - 20px);z-index:1200;box-shadow:0 20px 60px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 28%,transparent);border-radius:22px} .hub-diagnostic.hd-under-brain .hd-body{max-height:calc(100dvh - var(--ws-dialog-top,calc(var(--ws-top,10px) + 118px)) - 200px)} /* 1.27.0: com a resposta transitória do Cérebro visível, a janela desce para não ficar coberta. */ .hub-diagnostic.hd-under-brain{transition:top .25s ease} /* Conferência é um formulário único, sem cartões soltos sobre o fundo. */ .hub-diagnostic.hub-print-resolution[open]:has(.hd-body){width:min(760px,calc(100vw - 24px));padding:22px;background:var(--hd-glass);box-shadow:0 18px 64px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 14.118%,transparent);grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:12px} .hub-diagnostic.hub-print-resolution>.hd-head,.hub-diagnostic.hub-print-resolution>.hd-actions{padding:0;background:transparent;box-shadow:none;backdrop-filter:none} .hub-diagnostic.hub-print-resolution>.hd-body{grid-template-columns:1fr;max-height:40dvh} .hub-print-resolution [data-status]{padding:12px 14px;border-radius:14px;background:var(--hd-soft)} /* /toolbars.css */ /* Uma medida para os controles das barras, incluindo o botao de menu. */ :root{--bar-control:44px;--bar-gap:8px;--bar-radius:12px} header.top{height:auto;min-height:64px;padding:10px 12px;column-gap:12px;row-gap:8px;align-items:center} header.top .left,header.top .right,header.top .ctxbtns,header.top .kdsbar{align-items:center;gap:var(--bar-gap)} header.top .icon,header.top .ctxbtns .icon{width:var(--bar-control);height:var(--bar-control);min-width:var(--bar-control);min-height:var(--bar-control);padding:0;flex:none} header.top #unitlabel,header.top #kstate-trigger,header.top .pstat.inbar .pst{height:var(--bar-control);min-height:var(--bar-control);display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border-radius:var(--bar-radius);line-height:1.2} header.top #unitlabel{max-width:200px;overflow:hidden;text-overflow:ellipsis} header.top #aibtn{min-height:var(--bar-control);padding:0 10px;align-items:center;justify-content:center} header.top .subseg{margin:0;padding-block:0;align-items:center;min-height:var(--bar-control)} header.top .subseg button{min-height:var(--bar-control);display:inline-flex;align-items:center;justify-content:center} .tools,.selbar,.dfilters,.drange,.mhead,.ws-toolbar,.ws-toolbar-actions,.ws-pager,.ws-filters{align-items:center;gap:var(--bar-gap)} .tools .btn,.tools .icon,.tools .search,.selbar .btn,.selbar select,.dfilters button,.dfilters select,.dfilters input,.drange input,.mhead .subseg button,.ws-toolbar button,.ws-filters button,.ws-filters select,.ws-filters input{min-height:var(--bar-control);box-sizing:border-box} .tools .icon,.ws-toolbar .ws-icon,.ws-widget-tools .ws-icon{width:var(--bar-control);min-width:var(--bar-control);height:var(--bar-control);min-height:var(--bar-control)} .ws-widget-footer .ws-btn,.ws-detail-actions .ws-btn{min-height:var(--bar-control)} .dfilters .subseg,.mhead .subseg{display:inline-flex;align-items:center;padding-block:0;min-height:var(--bar-control);flex-wrap:wrap} .dfilters .subseg button,.mhead .subseg button{display:inline-flex;align-items:center;justify-content:center} .ws-composer{align-items:center;gap:var(--bar-gap)} .ws-composer .ws-input{height:var(--bar-control);min-height:var(--bar-control);padding:0 0 0 12px;gap:8px;align-items:center} .ws-composer .ws-icon,.ws-composer .ws-close{width:var(--bar-control);height:var(--bar-control);min-width:var(--bar-control);min-height:var(--bar-control);padding:10px;flex:none} .ws-composer #aiinput{min-height:32px;line-height:1.25} body.ai-workspace-on.ai-kds .top.ws-compact{padding:10px 12px;gap:8px;min-height:112px} body.ai-workspace-on.ai-kds .top.ws-stacked{row-gap:8px} @media(max-width:1000px){ header.top:not(.ws-compact){display:flex;flex-wrap:wrap;gap:8px;min-height:64px} header.top:not(.ws-compact) .left{order:1;flex:1 1 auto;min-width:0;overflow:visible} header.top:not(.ws-compact) #aibtn{order:2;display:flex;flex:none} header.top:not(.ws-compact) .right{order:3;flex:1 1 100%;justify-content:flex-end;flex-wrap:wrap;margin-left:0} header.top .right,header.top .ctxbtns{gap:6px} body.ai-workspace-on.ai-kds header.top #aibtn{display:none} .dfilters,.drange,.tools,.selbar{flex-wrap:wrap} } @media(max-width:460px){ header.top{margin-left:8px;margin-right:8px;width:calc(100% - 16px);padding-inline:10px} header.top #unitlabel{max-width:172px;padding-inline:10px} header.top .left{gap:6px} header.top .curview{max-width:36vw} .ws-composer .ws-input{gap:5px;padding-left:8px} } @media(prefers-reduced-motion:reduce){header.top,header.top *,.ws-composer *{transition:none!important}} /* Escuta permanente tem estado visivel e o mesmo alvo dos controles da barra. */ #voice-wake{position:relative} #voice-wake[data-listening="true"]::after{content:"";position:absolute;right:5px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--verde,#11994A);box-shadow:0 0 7px color-mix(in srgb,var(--verde,#11994A) 43.922%,transparent);animation:voice-wake-pulse 2s ease-in-out infinite} #voice-wake[aria-pressed="false"]{opacity:.55} @keyframes voice-wake-pulse{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--verde,#11994A) 12.549%,transparent)}} @media(prefers-reduced-motion:reduce){#voice-wake[data-listening="true"]::after{animation:none}} #voice-wake[data-state="blocked"]::after{content:"";position:absolute;right:5px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--d-ambar,#C27A00)} /* A identidade de homologacao acompanha a tela sem cobrir pedidos ou botoes. */ .environment-title{display:contents}body[data-environment="staging"] .environment-title{display:flex;flex-direction:column;justify-content:center;min-width:0}.environment-label{font-size:max(0.6875rem, calc(0.75rem * var(--dt)));line-height:1.15;font-weight:700;color:var(--label,#2A1C12);padding:2px 0;white-space:normal;max-width:116px}.environment-label[hidden]{display:none}body[data-environment="staging"] .environment-label::before{content:"";display:inline-block;width:6px;height:6px;background:var(--d-ambar,#C27A00);border-radius:50%;margin-right:4px;vertical-align:1px} @media(max-width:480px){.environment-label{max-width:78px;font-size:max(0.6875rem, calc(0.75rem * var(--dt)))}.environment-title{flex-shrink:1}} /* /workspace-session.css */ /* Colecao de cards: foco detalhado ou grade central, sem laterais. */ #aiz.ws-root.ws-overview-mode,#aiz.ws-root.ws-tile-mode{position:fixed;inset:var(--ws-top,100px) 24px calc(18px + var(--ws-viewport-inset,0px));width:auto;max-width:none;height:auto;max-height:none;display:grid;grid-template-rows:minmax(0,1fr) auto;align-content:stretch;overflow:visible;transform:none;margin:0} #aiz.ws-root.ws-overview-mode .ws-board,#aiz.ws-root.ws-tile-mode .ws-board{width:100%;max-width:none;height:100%;max-height:100%;min-height:0;margin:auto;display:flex;flex-direction:column;justify-content:center;gap:14px} #aiz.ws-root .ws-toolbar{flex:none;width:100%;max-width:none;display:flex;flex-wrap:wrap;gap:10px} #aiz.ws-root.ws-overview-mode .ws-grid,#aiz.ws-root.ws-tile-mode .ws-grid{display:grid;grid-template-columns:repeat(var(--ws-grid-columns,4),minmax(0,1fr));grid-template-rows:repeat(var(--ws-grid-rows,1),minmax(0,1fr));gap:16px;align-items:stretch;align-self:center;width:min(var(--ws-grid-width,100%),100%);max-width:none;margin:auto;min-height:0} #aiz.ws-root.ws-overview-mode .ws-grid{height:auto;max-height:100%;flex:0 1 auto} #aiz.ws-root.ws-tile-mode .ws-grid{height:100%;max-height:var(--ws-card-room,650px);flex:1 1 auto} #aiz.ws-root.ws-overview-mode .ws-mini-card{position:relative;min-height:188px;max-height:280px;height:auto;padding:16px;gap:8px;border-radius:24px;text-align:left;cursor:pointer;overflow:hidden;box-sizing:border-box} .ws-mini-card .e.mini{width:100%;padding:0;margin:0;border:0!important;background:none!important;box-shadow:none!important;min-height:0;flex:none} .ws-mini-card .e.mini .mh{justify-content:flex-start}.ws-mini-card .e.mini .mh b{font-size:calc(1.625rem * var(--dt))} .ws-mini-card .e.mini .order-meta{font-size:calc(1rem * var(--dt));line-height:1.3}.ws-mini-card .e.mini .order-badges{font-size:calc(0.875rem * var(--dt))} .ws-mini-card .e.mini .ms{background:none;margin:5px 0;padding:0;font-size:calc(0.875rem * var(--dt));line-height:1.3;min-height:0;text-align:left} .ws-mini-status{color:var(--ws-accent);font-size:calc(0.875rem * var(--dt));font-weight:650;margin:0} .ws-mini-items{font-size:calc(1rem * var(--dt));line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ws-mini-card h2{font-size:calc(1.3125rem * var(--dt));line-height:1.25;margin:0}.ws-mini-card p{font-size:calc(0.9375rem * var(--dt));line-height:1.3;margin:0}.ws-mini-kind{font-size:calc(0.8125rem * var(--dt));color:var(--ws-secondary)} .ws-mini-card .ws-metrics{grid-template-columns:1fr 1fr;gap:8px;margin:5px 0}.ws-mini-card .ws-metric{padding:0;background:none}.ws-mini-card .ws-metric strong{font-size:calc(1.5rem * var(--dt))}.ws-mini-card .ws-metric span{font-size:calc(0.875rem * var(--dt))} .ws-mini-chart{display:flex;align-items:center;gap:8px;font-size:calc(0.875rem * var(--dt));color:var(--ws-secondary)}.ws-mini-chart svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6} .ws-context-controls{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;width:100%;pointer-events:auto}.ws-context-controls>.ws-btn{min-height:44px;font-size:calc(0.9375rem * var(--dt));padding:10px 14px} .ws-selection-count{font-size:calc(0.9375rem * var(--dt));color:var(--ws-secondary)}.ws-selection-indicator{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;background:var(--ws-soft);display:grid;place-items:center;z-index:3;pointer-events:none}.ws-selection-indicator svg{width:18px;height:18px;stroke:transparent;fill:none;stroke-width:2.4} .ws-selection-mode .ws-widget[aria-checked=true]{box-shadow:0 0 0 3px var(--ws-accent),var(--ws-shadow)!important}.ws-selection-mode .ws-widget[aria-checked=true]>.ws-selection-indicator{background:var(--ws-accent)}.ws-selection-mode .ws-widget[aria-checked=true]>.ws-selection-indicator svg{stroke:var(--label3,#9C8D80)}.ws-selection-mode .ws-widget{cursor:pointer}.ws-selection-mode .ws-widget>*:not(.ws-selection-indicator){pointer-events:none} #aiz.ws-root.ws-focus-mode:not(.ws-empty):not(.ws-inline-mode):not(.ws-recipe-mode) .ws-board{align-self:center;justify-self:center;width:min(1100px,100%);height:auto;max-height:100%;display:flex;flex-direction:column;gap:14px} #aiz.ws-root.ws-focus-mode:not(.ws-recipe-mode) .ws-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);width:100%;max-width:none;max-height:var(--ws-card-room,650px)} #aiz.ws-root.ws-focus-mode:not(.ws-recipe-mode) .ws-widget{height:auto;max-height:var(--ws-card-room,650px)} #aiz.ws-root .ws-detail-card{position:relative;min-height:0;padding:16px} .ws-detail-card .ws-widget-title{font-size:calc(1.4375rem * var(--dt))}.ws-detail-card .ws-widget-header{flex:none;gap:10px;margin-bottom:10px;padding:0}.ws-detail-card .ws-widget-tools{gap:5px} .ws-detail-card .ws-widget-body{min-height:0;flex:1 1 auto;overflow:hidden}.ws-detail-card .ws-order-detail{margin:0;width:100%;min-height:0}.ws-detail-card .ws-order-detail .oh{gap:8px;margin-bottom:8px}.ws-detail-card .ws-order-detail .oh .n{font-size:calc(1.75rem * var(--dt))}.ws-detail-card .ws-order-detail .oh .n svg{width:22px;height:22px} .ws-detail-card .ws-order-detail .orow{margin:0 0 10px;gap:7px;font-size:calc(0.9375rem * var(--dt))}.ws-detail-card .ws-order-detail .orow b{font-size:calc(1rem * var(--dt))}.ws-detail-card .ws-order-detail .ocols{gap:14px}.ws-detail-card .ws-order-detail .oinfo{font-size:calc(0.9375rem * var(--dt));line-height:1.35} .ws-detail-card .ws-detail-items .pn{font-size:calc(1.125rem * var(--dt))}.ws-detail-card .ws-detail-items .fl{font-size:calc(1.125rem * var(--dt));line-height:1.3}.ws-detail-card .ws-detail-items .pi{margin-bottom:10px}.ws-detail-card .ws-detail-items .drv{font-size:calc(0.9375rem * var(--dt));line-height:1.35} .ws-detail-card .ws-order-actions{flex:none;padding:0;margin-top:10px}.ws-detail-card .ws-order-actions .oacts{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:6px;margin:0}.ws-detail-card .ws-order-actions .btn{min-height:44px;font-size:calc(0.875rem * var(--dt));line-height:1.25;padding:8px 10px;flex:1 1 auto;white-space:normal} #aiz.ws-root.ws-tile-mode .ws-widget{height:100%;max-height:100%}#aiz.ws-root.ws-tile-mode .ws-detail-columns{grid-template-columns:1fr}.ws-search-empty{display:grid;justify-items:center;text-align:center;padding:24px 12px;gap:12px}.ws-search-empty>svg{width:48px;height:48px;stroke:var(--ws-accent);fill:none;stroke-width:1.4}.ws-search-empty h3,.ws-search-empty p{margin:0} .ws-content-pager{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;flex:none}.ws-content-pager .ws-icon{width:44px;height:44px;min-height:44px}.ws-content-pager span{font-size:calc(0.875rem * var(--dt));color:var(--ws-secondary);text-align:center}.ws-content-hidden{display:none!important}.ws-content-page{display:flow-root;min-width:0} #aiz.ws-root .ws-widget-body.ws-paged-body{overflow:hidden!important;flex:1;min-height:0}.ws-paged-body .ws-detail-columns,.ws-paged-body .ws-comparison-pair{grid-template-columns:1fr}.ws-paged-body .ws-chart{max-height:220px} @media(max-width:599px){#aiz.ws-root.ws-overview-mode,#aiz.ws-root.ws-tile-mode{left:16px;right:16px}.ws-context-controls>.ws-btn{flex:1;font-size:calc(0.875rem * var(--dt))}.ws-context-controls>.ws-btn svg{display:none}.ws-detail-card .ws-order-actions .btn{font-size:calc(0.875rem * var(--dt))}} /* A regra de pedidos anterior tinha maior especificidade e criava uma linha implicita. */ #aiz.ws-root.ws-order-mode.ws-tile-mode .ws-grid,#aiz.ws-root.ws-order-mode.ws-overview-mode .ws-grid{grid-template-rows:repeat(var(--ws-grid-rows,1),minmax(0,1fr))} #aiz.ws-root.ws-tile-mode .ws-widget-body{flex:1 1 0%;min-height:0} .ws-order-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:10px;flex:none}.ws-order-heading h2{font-size:calc(1.5625rem * var(--dt));line-height:1.2;margin:0}.ws-order-heading p{font-size:calc(0.9375rem * var(--dt));line-height:1.3;margin:4px 0 0}.ws-order-heading .ws-widget-tools{display:flex}.ws-order-heading .ws-icon{width:36px;height:36px;min-height:36px}.ws-order-heading .ws-mini-status{font-size:calc(0.875rem * var(--dt))} #aiz.ws-root.ws-tile-mode .ws-order-actions .oacts{flex-wrap:nowrap;gap:6px;justify-content:space-between}#aiz.ws-root.ws-tile-mode .ws-order-actions .btn{flex:0 1 44px;width:44px;height:44px;padding:10px;font-size:calc(0.875rem * var(--dt));min-width:40px}#aiz.ws-root.ws-tile-mode .ws-order-actions .btn svg{width:22px;height:22px;display:block;stroke:currentColor;fill:none;stroke-width:1.8}.ws-order-actions svg{vertical-align:middle} #aiz.ws-root .ws-context-controls{width:auto;margin-left:auto}.ws-order-heading h2{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.ws-order-heading h2 small{font-size:calc(0.875rem * var(--dt));line-height:1.3;color:var(--ws-accent);font-weight:600}.ws-detail-card .ws-detail-items .items{padding:0;gap:8px;border:0}.ws-detail-card .ws-detail-items .pz{padding:0}.ws-detail-card .ws-detail-items .pzh{font-size:calc(0.875rem * var(--dt));line-height:1.3;text-transform:none;letter-spacing:0;margin-bottom:4px}.ws-detail-card .ws-detail-items .obs,.ws-detail-card .ws-detail-items .comp{font-size:calc(0.875rem * var(--dt));line-height:1.3;padding:3px 8px;margin-top:4px}.ws-detail-card .ws-detail-items .drink{font-size:calc(1rem * var(--dt))}.ws-detail-card .ws-detail-items .combo{font-size:calc(0.875rem * var(--dt))} .ws-order-overview .pzh{display:inline;margin:0 5px 0 0}.ws-order-overview .pz{line-height:1.35}.ws-order-overview .fl{display:inline;padding:0;line-height:1.35;font-size:calc(1.125rem * var(--dt))}.ws-order-overview .fl:before{display:none}.ws-order-overview .fl+.fl:before{display:inline;position:static;content:" · ";background:none}.ws-order-overview .obs{margin:3px 0 0;padding:2px 6px}.ws-order-overview .drink{display:block;padding:2px 0;border:0;background:none;margin:0}.ws-order-overview .drink small{display:none}.ws-order-overview .combo{display:none}.ws-order-overview .ws-delivery-summary,.ws-order-overview .ws-address-summary{font-size:calc(0.9375rem * var(--dt));line-height:1.3;margin:6px 0 0}.ws-order-overview .items{gap:4px}.ws-content-page>.oinfo{border:0;padding:0}.ws-content-page>.ws-detail-timeline{padding:0}.ws-content-page>div{font-size:calc(0.9375rem * var(--dt));line-height:1.35;margin-bottom:6px} /* Filtros de comparação e fichas técnicas preservados. */ .ws-comparison-context{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0;font-size:calc(0.875rem * var(--dt))} .ws-filters>.ws-presentation{margin-left:auto} .ws-comparison-controls{flex-basis:100%} .ws-widget-body:has(>.ws-comparison-pair)>.ws-filters{margin-bottom:6px} .ws-widget-body:has(>.ws-comparison-pair)>.ws-comparison-context{margin:4px 0} .ws-comparison-context>span,.ws-reference-list>button{background:color-mix(in srgb,var(--label3,#9C8D80) 10%,transparent);border-radius:14px;padding:7px 10px} .ws-comparison-context>small{color:var(--ws-secondary,var(--label2,#6B5A4C))} .ws-reference-list{display:flex;gap:7px;flex-wrap:wrap;width:100%} .ws-reference-list button{min-height:44px;border:0;color:inherit;font:inherit;font-size:calc(0.8125rem * var(--dt));cursor:pointer} .ws-reference-list button:focus-visible{outline:2px solid var(--ws-accent,var(--verde,#11994A));outline-offset:2px} .ws-comparison-pair{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start} .ws-chart-legend{flex-wrap:wrap} .ws-recipe-portions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px} .ws-recipe-portions strong{font-size:calc(0.9375rem * var(--dt));background:color-mix(in srgb,var(--verde,#11994A) 7.0588%,transparent);color:var(--ws-ink,var(--label,#323200));border-radius:12px;padding:6px 10px} #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-grid{display:grid!important;grid-template-columns:repeat(var(--ws-recipe-count,2),minmax(0,1fr))!important;grid-auto-rows:auto;gap:16px;align-items:start;overflow:visible!important} #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-board{max-width:1600px;width:100%;height:auto;max-height:none;overflow:visible} #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-widget,#aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-widget-body{height:auto;max-height:none;overflow:visible!important;min-height:0} #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-widget-body{padding-top:10px} #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-widget-header{padding:18px 20px 0} #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-widget-title{font-size:calc(1.5rem * var(--dt))} #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-recipe-photo{max-height:90px;width:100%;object-fit:cover;float:none} #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-recipe-head{display:flex;flex-wrap:wrap;gap:6px} #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-ingredients{grid-template-columns:1fr;gap:0} #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-ingredient{padding:6px 0;min-height:30px;font-size:calc(1.125rem * var(--dt))} #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-notice{font-size:max(0.6875rem, calc(0.75rem * var(--dt)));margin-top:6px} #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-grid{max-width:none;max-height:none;height:auto} #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-recipe{display:block} #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-recipe-photo{height:85px;margin-bottom:8px} /* Fichas completas por pagina: preservar ingredientes e o menu em telas baixas. */ @media(max-height:900px),(max-width:1100px){ #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-widget{padding:12px} #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-widget-header{padding:0;margin-bottom:8px} #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-widget-body{padding-top:0} #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-recipe-photo{height:48px} #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-ingredient{font-size:calc(1rem * var(--dt));line-height:1.25;padding:3px 0;min-height:26px} } @media(min-width:780px){ #aiz.ws-root.ws-recipe-mode.ws-recipe-group.ws-recipe-page-single .ws-ingredients{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px} } @media(max-width:520px){ #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-board{gap:4px} #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-topic{padding:8px 10px} #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-topic strong{font-size:calc(0.875rem * var(--dt))} #aiz.ws-root.ws-recipe-mode.ws-recipe-group .ws-toolbar-actions{gap:4px} } #aiz.ws-root .ws-widget-body.ws-paged-body{overflow:hidden!important;flex:1;min-height:0} .ws-content-page{display:flow-root;min-width:0} .ws-content-page>.ws-metrics{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))} .ws-content-pager .ws-icon{width:44px;height:44px;min-height:44px} .ws-paged-body .ws-detail-columns,.ws-paged-body .ws-comparison-pair{grid-template-columns:1fr} .ws-paged-body .ws-chart{max-height:220px} #aiz.ws-root.ws-session-panel.ws-context-details .ws-history-card{min-height:184px;max-height:204px} .ws-history-extra{font-weight:600} /* Um grafico indivisivel conserva seus 190 px sem repetir a moldura vertical de cada fragmento. */ .ws-paged-body .ws-comparison-card:has(>.ws-chart){padding-top:0;padding-bottom:0} .ws-paged-body .ws-comparison-card>.ws-chart{margin-top:0;margin-bottom:0} /* Cards centrais desfocam a operacao; retornos curtos do KDS mantem os pedidos nitidos. */ /* ============================================================================ 1.23.0: três níveis de card (mini, médio e total), sem páginas nem rolagem lateral. Mini ocupa uma coluna lógica da grade; médio ocupa duas colunas e duas linhas, no lugar; total sobe numa camada própria, centralizado sobre a tela desfocada, com tudo. ============================================================================ */ #aiz.ws-root.ws-overview-mode .ws-grid,#aiz.ws-root.ws-tile-mode .ws-grid{grid-template-rows:none;grid-auto-rows:auto;grid-auto-flow:row dense;align-items:start;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;padding:2px 4px 6px;pointer-events:auto} #aiz.ws-root.ws-order-mode.ws-tile-mode .ws-grid,#aiz.ws-root.ws-order-mode.ws-overview-mode .ws-grid{grid-template-rows:none} #aiz.ws-root.ws-overview-mode .ws-grid{max-height:var(--ws-card-room,650px)} #aiz.ws-root.ws-tile-mode .ws-grid{grid-auto-rows:auto} #aiz.ws-root .ws-grid .ws-widget.ws-medium-card{position:relative;height:auto;max-height:calc(3 * 188px + 2 * 16px);padding:16px 16px 16px;align-self:stretch} #aiz.ws-root .ws-medium-card .ws-widget-body{overflow:hidden;flex:1 1 auto;min-height:0;cursor:zoom-in} /* Card médio de pedido: o detalhe restante (dados, pagamento, linha do tempo) em duas colunas para caber mais sem rolar. */ #aiz.ws-root .ws-grid .ws-medium-card .ws-order-rest .ws-detail-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start} /* A coluna da cozinha no restante conserva o entregador (fase, previsão, veículo): os itens já saíram para o resumo. */ #aiz.ws-root .ws-grid .ws-medium-card .ws-order-rest .ws-detail-items .items{display:none} #aiz.ws-root .ws-grid .ws-medium-card .ws-order-rest .oinfo{font-size:calc(0.875rem * var(--dt));line-height:1.3} #aiz.ws-root .ws-grid .ws-medium-card .ws-order-rest .tl{font-size:calc(0.8125rem * var(--dt))} #aiz.ws-root.ws-overview-mode .ws-grid .ws-widget.ws-mini-card{max-height:none;min-height:188px;height:max-content} /* Nada dentro do mini card encolhe para caber na linha mínima: a linha da grade cresce com o conteúdo (sabores completos). */ #aiz.ws-root.ws-overview-mode .ws-mini-card>*{flex:none} #aiz.ws-root.ws-overview-mode .ws-mini-items{-webkit-line-clamp:3} /* Ações do pedido no card médio: ícones de 44 px, como no modo de tela dividida. */ #aiz.ws-root .ws-medium-card .ws-order-actions{flex:none;margin-top:10px} #aiz.ws-root .ws-medium-card .ws-order-actions .oacts{display:flex;flex-wrap:nowrap;gap:6px;justify-content:space-between;margin:0} #aiz.ws-root .ws-medium-card .ws-order-actions .btn{flex:0 1 44px;width:44px;height:44px;min-height:44px;padding:10px;font-size:calc(0.875rem * var(--dt));min-width:40px} #aiz.ws-root .ws-medium-card .ws-order-actions .btn svg{width:22px;height:22px;display:block;stroke:currentColor;fill:none;stroke-width:1.8} #aiz.ws-root .ws-medium-card .ws-widget-body button,#aiz.ws-root .ws-medium-card .ws-widget-body canvas,#aiz.ws-root .ws-medium-card .ws-widget-body select,#aiz.ws-root .ws-medium-card .ws-widget-body input{cursor:auto} #aiz.ws-root .ws-medium-card .ws-chart{height:200px} #aiz.ws-root .ws-medium-card .ws-comparison-pair{grid-template-columns:repeat(2,minmax(0,1fr))} /* Degradê e botão "Ver tudo" quando o conteúdo não coube no card médio: nada é cortado em silêncio. */ .ws-widget.ws-overflowing .ws-widget-body{-webkit-mask-image:linear-gradient(to bottom,var(--label,#323200) calc(100% - 72px),transparent);mask-image:linear-gradient(to bottom,var(--label,#323200) calc(100% - 72px),transparent)} .ws-widget .ws-see-all{position:static;align-self:center;margin:-30px auto 6px;z-index:3;min-height:44px;padding:10px 16px;border-radius:22px;background:var(--ws-control);box-shadow:var(--ws-shadow);font-weight:650} .ws-widget .ws-see-all svg{width:18px;height:18px;margin-right:6px;stroke:currentColor;fill:none;stroke-width:1.8;vertical-align:-3px} /* Camada do card total */ .ws-full-layer{position:fixed;inset:0;z-index:1400;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));pointer-events:auto} .ws-full-backdrop{position:absolute;inset:0;background:color-mix(in srgb,var(--label,#323200) 38%,transparent);backdrop-filter:blur(16px) saturate(.9);-webkit-backdrop-filter:blur(16px) saturate(.9);cursor:zoom-out} body.dark .ws-full-backdrop{background:color-mix(in srgb,var(--surface2,#F7F3EE) 50%,transparent)} #aiz.ws-root #ws-full .ws-widget.ws-full-card{position:relative;z-index:1;width:min(1180px,calc(100vw - 32px));height:auto;max-height:calc(100vh - 32px - var(--ws-viewport-inset,0px));display:flex;flex-direction:column;padding:22px 26px 22px;border-radius:30px;box-shadow:0 30px 80px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 35%,transparent),0 4px 14px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 14%,transparent)!important;animation:ws-full-in .18s ease-out} @keyframes ws-full-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){#aiz.ws-root .ws-full-card{animation:none}} #aiz.ws-root .ws-full-card .ws-widget-header,#aiz.ws-root .ws-full-card .ws-order-heading{flex:none;margin-bottom:12px} #aiz.ws-root .ws-full-card .ws-widget-title{font-size:calc(1.625rem * var(--dt))} #aiz.ws-root .ws-full-card .ws-order-heading h2{font-size:calc(1.875rem * var(--dt))} #aiz.ws-root #ws-full .ws-full-card .ws-widget-body{flex:1 1 auto;min-height:0;overflow:auto;padding-right:4px;max-height:none} #aiz.ws-root .ws-full-card .ws-widget-footer{flex:none;margin-top:12px} #aiz.ws-root .ws-full-card .ws-detail-columns{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px;align-items:start} #aiz.ws-root .ws-full-card .ws-detail-items .fl{font-size:calc(1.25rem * var(--dt))} #aiz.ws-root .ws-full-card .ws-chart{height:min(34vh,320px);min-height:220px} /* Relatório no card total: indicadores no topo e gráficos em duas colunas, para caber tudo numa tela. */ #aiz.ws-root .ws-full-card .ws-widget-body:not(.ws-order-detail):not(:has(.ws-order-detail)):not(:has(.ws-recipe)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;align-content:start} #aiz.ws-root .ws-full-card .ws-widget-body>*{grid-column:1/-1;min-width:0} #aiz.ws-root .ws-full-card .ws-widget-body>.ws-chart-block{grid-column:auto} #aiz.ws-root .ws-full-card .ws-widget-body>.ws-chart-block.ws-single-chart{grid-column:1/-1} /* Um gráfico só e mais indicadores: gráfico à esquerda, indicadores à direita, tudo à vista. */ #aiz.ws-root .ws-full-card .ws-widget-body:has(>.ws-secondary-metrics)>.ws-chart-block.ws-single-chart{grid-column:auto} #aiz.ws-root .ws-full-card .ws-widget-body:has(>.ws-chart-block.ws-single-chart)>.ws-secondary-metrics{grid-column:auto;align-self:start} #aiz.ws-root .ws-full-card .ws-secondary-metrics summary{font-weight:700;margin-bottom:8px} #aiz.ws-root .ws-full-card .ws-secondary-metrics .ws-metrics{grid-template-columns:repeat(2,minmax(0,1fr))} #aiz.ws-root .ws-full-card .ws-comparison-card .ws-chart{height:min(30vh,280px)} #aiz.ws-root.ws-focus-mode .ws-grid .ws-widget.ws-medium-card{max-height:var(--ws-card-room,650px)} #aiz.ws-root .ws-full-card .ws-comparison-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} #aiz.ws-root .ws-full-card .ws-comparison-extra{display:block} #aiz.ws-root .ws-full-card .ws-metrics{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} #aiz.ws-root .ws-full-card .ws-metric strong{font-size:calc(1.75rem * var(--dt))} #aiz.ws-root .ws-full-card .ws-ingredients{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} #aiz.ws-root .ws-full-card .ws-order-actions .oacts{display:flex;flex-wrap:wrap;gap:8px} #aiz.ws-root .ws-full-card .ws-order-actions .btn{min-height:48px;font-size:calc(1rem * var(--dt));padding:10px 16px} body.ws-full-open #aiz.ws-root .ws-board,body.ws-full-open #aiz.ws-root .ws-composer-home{filter:blur(6px) saturate(.85);pointer-events:none} body.ws-full-open #aiz.ws-root #ws-full{filter:none} @media(max-width:900px){#aiz.ws-root .ws-full-card .ws-detail-columns{grid-template-columns:1fr}#aiz.ws-root .ws-full-card .ws-comparison-pair{grid-template-columns:1fr}#aiz.ws-root .ws-full-card{padding:16px}} /* Card médio compacto (mais de quatro ampliados): sem barra de filtros, indicadores em duas colunas, um gráfico. */ #aiz.ws-root .ws-medium-compact .ws-widget-title{font-size:calc(1.1875rem * var(--dt))} #aiz.ws-root .ws-medium-compact .ws-comparison-context{margin:4px 0 8px} #aiz.ws-root .ws-medium-compact .ws-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin-bottom:8px} #aiz.ws-root .ws-medium-compact .ws-metric strong{font-size:calc(1.375rem * var(--dt))} #aiz.ws-root .ws-medium-compact .ws-chart{height:160px;min-height:140px;margin:6px 0} #aiz.ws-root .ws-medium-compact .ws-chart-readout,#aiz.ws-root .ws-medium-compact .ws-source,#aiz.ws-root .ws-medium-compact .ws-secondary-metrics summary{display:none} #aiz.ws-root .ws-medium-compact .ws-secondary-metrics{display:block} #aiz.ws-root .ws-medium-compact .ws-widget-footer .ws-btn:not(.ws-see-all){min-height:40px;font-size:calc(0.875rem * var(--dt));padding:8px 12px} /* 1.23.0: sem páginas dentro do card, o card em foco (um só na tela) rola o corpo em vez de cortar. O médio da grade continua cortado com "Ver tudo". */ #aiz.ws-root .ws-grid .ws-detail-card:not(.ws-medium-card) .ws-widget-body{overflow:auto} /* 1.23.0: no celular os dois períodos de uma comparação ficam um sobre o outro (lado a lado os números ficavam cortados). */ @media(max-width:760px){#aiz.ws-root .ws-comparison-pair,#aiz.ws-root .ws-medium-card .ws-comparison-pair{grid-template-columns:minmax(0,1fr)}} /* ===== 1.24.0: performance. Liquid Glass só na camada funcional (campo de fala e chip do assunto). Cada card, botão e sugestão tinha o próprio backdrop-filter (dezenas de desfoques por quadro sobre um fundo já desfocado): era daí que vinha o lag. Os materiais ficam opacos o bastante para ler; o vidro fica no que flutua. ===== */ #aiz.ws-root .ws-widget,#aiz.ws-root .ws-btn,#aiz.ws-root .aisug .pill,#aiz.ws-root .ws-bubble,#aiz.ws-root .ws-order .e{backdrop-filter:none!important;-webkit-backdrop-filter:none!important} #aiz.ws-root .ws-widget{background:color-mix(in srgb,var(--surface,#FFFFFF) 97%,transparent)} body.dark #aiz.ws-root .ws-widget{background:color-mix(in srgb,var(--surface2,#F7F3EE) 97%,transparent)} #aiz.ws-root .ws-btn,#aiz.ws-root .aisug .pill{background:color-mix(in srgb,var(--surface,#FFFFFF) 96%,transparent)} body.dark #aiz.ws-root .ws-btn,body.dark #aiz.ws-root .aisug .pill{background:color-mix(in srgb,var(--surface2,#F7F3EE) 96%,transparent)} /* 1.27.0: botões legíveis dentro dos cards de suporte e da resposta transitória. A regra acima deixava o botão principal branco sobre branco ("apagado"). Principal verde com texto branco; secundário com fundo e borda visíveis. */ #aiz.ws-root .ws-btn{color:var(--label,#323200);font-weight:600;box-shadow:inset 0 0 0 1px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 18%,transparent)} #aiz.ws-root .support-actions .ws-btn{background:color-mix(in srgb,var(--label,#323200) 9%,transparent);min-height:44px;font-size:calc(0.9375rem * var(--dt))} #aiz.ws-root .ws-btn.ws-primary,#aiz.ws-root .support-actions .ws-btn.ws-primary{background:color-mix(in srgb,var(--verde,#11994A) 80%,var(--label,#323200));color:var(--acao-txt,#FFFFFF);box-shadow:none} #aiz.ws-root .ws-btn:disabled{opacity:.75} body.dark #aiz.ws-root .ws-btn{color:var(--label,#323200);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--page,#F7F5F1) 18%,transparent)} body.dark #aiz.ws-root .support-actions .ws-btn{background:color-mix(in srgb,var(--surface,#FFFFFF) 12%,transparent)} body.dark #aiz.ws-root .ws-btn.ws-primary,body.dark #aiz.ws-root .support-actions .ws-btn.ws-primary{background:var(--verde,#11994A);color:var(--label,#323200)} /* O card total não desfoca de novo o que já está desfocado: só escurece, e a grade atrás some por opacidade (barato). */ .ws-full-backdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:color-mix(in srgb,var(--label,#323200) 46%,transparent)} body.dark .ws-full-backdrop{background:color-mix(in srgb,var(--surface2,#F7F3EE) 58%,transparent)} #aiz.ws-root:has(#ws-full) #ws-grid,#aiz.ws-root:has(#ws-full) #ws-toolbar{opacity:.35;transition:opacity .18s ease} /* O fundo desfocado vira uma camada própria do compositor: o desfoque é recalculado só quando a tela de trás muda. */ body.ai-workspace-on main{will-change:filter;contain:paint} /* O brilho animado da moldura custa um desfoque por quadro; com o Cérebro em tela cheia ele fica parado. */ body.ai-workspace-on::after{animation:none;filter:blur(10px)} /* ===== 1.24.0: Cérebro em modo herói (fora do KDS). A barra de menu some; só o ícone sobe ao topo, centralizado, com as sugestões embaixo. Enquanto o operador fala ou escreve, as sugestões dão lugar ao campo de vidro com a transcrição e o ícone pulsa com o volume da voz (--voice-level). A tela inteira fica para os cards. ===== */ body.ws-hero-mode .top{display:none!important} body.ws-hero-mode #aiz.ws-root{inset:var(--ws-top) 20px calc(14px + var(--ws-viewport-inset,0px));grid-template-rows:auto auto minmax(0,1fr);gap:10px} body.ws-hero-mode #aiz.ws-root.ws-empty{grid-template-rows:auto auto;align-content:start;top:var(--ws-top)} body.ws-hero-mode #aiz.ws-root .ws-hero{order:0;display:flex;align-items:center;justify-content:center;position:relative;min-height:92px;pointer-events:none} body.ws-hero-mode #aiz.ws-root .ws-controls{order:1;gap:0;min-height:0} /* Ocioso, a linha do campo tem altura zero (o campo fica fora da tela, ainda focável); display:none o tornaria inacessível ao teclado. */ body.ws-hero-mode #aiz.ws-root:not(.ws-speaking) .ws-controls{padding:0;margin:0} body.ws-hero-mode #aiz.ws-root .ws-board{order:2} #aiz.ws-root .ws-hero{display:none} #aiz.ws-root .ws-hero>*{pointer-events:auto} .ws-hero-brain{appearance:none;border:0;background:transparent;padding:0;width:96px;height:96px;display:grid;place-items:center;position:relative;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent} /* 1.25.0: ícone sem contorno. A única sinalização é a animação enquanto capta a fala: o ícone cresce com o volume (--voice-level) e um brilho suave, como o orbe da Siri, respira atrás dele. Microfone desligado: ícone apagado. */ .ws-hero-brain{transform:scale(calc(1 + var(--voice-level,0) * .28));transition:transform .06s linear} .ws-hero-brain .philippe-brain{width:58px;height:64px;position:relative;z-index:1;transition:opacity .25s ease,filter .25s ease} .ws-hero-brain .philippe-brain img{filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--d-laranja,#F57A1C) 28%,transparent))} .ws-hero:not(.on) .ws-hero-brain .philippe-brain{opacity:.55;filter:grayscale(.7)} .ws-hero-glow{position:absolute;inset:-4px;border-radius:50%;opacity:0;pointer-events:none;transform:scale(.85);transition:opacity .3s ease,transform .1s linear;overflow:visible} .ws-hero-glow::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--d-laranja,#F57A1C) 95%,transparent),color-mix(in srgb,var(--queda,#E21D3C) 80%,transparent),color-mix(in srgb,var(--acao,#1F5FD0) 75%,transparent),color-mix(in srgb,var(--verde,#11994A) 70%,transparent),color-mix(in srgb,var(--d-laranja,#F57A1C) 95%,transparent));filter:blur(12px);animation:ws-hero-spin 3.6s linear infinite} .ws-hero.capturing .ws-hero-glow{opacity:calc(.6 + var(--voice-level,0) * .4);transform:scale(calc(1 + var(--voice-level,0) * .8))} .ws-hero[data-voice-state="error"] .ws-hero-glow{opacity:.7;transform:scale(1)} .ws-hero[data-voice-state="error"] .ws-hero-glow::before{background:radial-gradient(circle,color-mix(in srgb,var(--queda,#E21D3C) 60%,transparent) 0%,color-mix(in srgb,var(--queda,#E21D3C) 20%,transparent) 55%,transparent 72%);animation:none} @keyframes ws-hero-spin{to{transform:rotate(360deg)}} /* 1.26.0: o X do Cérebro é o botão mestre: fica acima de qualquer card (inclusive o card total) e fecha a sessão. O botão de escrever saiu. */ .ws-hero-close{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;right:0;z-index:1500} .ws-hero-close svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8} body.ws-hero-mode #aiz.ws-root .ws-hero{z-index:1500} /* 1.25.0: sem sugestões. Só o ícone; o campo aparece ao falar ou digitar. */ /* Ocioso: o campo fica fora da tela mas continua focável (teclado, leitores de tela e automação); qualquer tecla o traz de volta. */ body.ws-hero-mode #aiz.ws-root #ws-composer-home{width:min(720px,100%)} body.ws-hero-mode #aiz.ws-root:not(.ws-speaking) #ws-composer-home{position:absolute;left:-9999px;top:0;width:min(720px,100vw);opacity:0;pointer-events:none} body.ws-hero-mode #aiz.ws-root.ws-speaking #ws-composer-home{position:static;opacity:1;pointer-events:auto} /* Escrevendo: o campo em cima e as sugestões para o texto digitado logo abaixo. */ body.ws-hero-mode #aiz.ws-root .ws-controls #ws-composer-home{order:0} body.ws-hero-mode #aiz.ws-root .ws-composer .ws-close{display:none} /* 1.25.0: campo limpo, como o da Siri: só o texto da transcrição sobre vidro. Sem microfone, sem seta (Enter envia). */ body.ws-hero-mode #aiz.ws-root .ws-composer .ws-input{min-height:56px;padding:0 20px;font-size:calc(1.0625rem * var(--dt));background:color-mix(in srgb,var(--surface,#FFFFFF) 55%,transparent)!important;backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%);box-shadow:0 10px 30px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 14%,transparent),inset 0 0 0 1px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 55%,transparent)} body.ws-hero-mode #aiz.ws-root .ws-composer .ws-input:focus-within{box-shadow:0 12px 34px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 18%,transparent),inset 0 0 0 1px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 75%,transparent)} body.ws-hero-mode #aiz.ws-root .ws-composer .ws-input::after{display:none} .ws-composer .ws-voice-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} body.dark.ws-hero-mode #aiz.ws-root .ws-composer .ws-input{background:color-mix(in srgb,var(--surface2,#F7F3EE) 55%,transparent)!important} body.ws-hero-mode #aiz.ws-root .ws-composer .ws-brain{display:none} body.ws-hero-mode #aiz.ws-root .ws-composer input{font-size:calc(1.0625rem * var(--dt))} /* Modo herói: a grade usa a largura toda; os cards podem ir até a borda. */ body.ws-hero-mode #aiz.ws-root .ws-grid{max-width:none;width:100%} @media(max-width:600px){body.ws-hero-mode #aiz.ws-root{inset:var(--ws-top) 12px calc(10px + var(--ws-viewport-inset,0px))}.ws-hero-brain{width:84px;height:84px}.ws-hero-brain .philippe-brain{width:50px;height:56px}body.ws-hero-mode #aiz.ws-root .ws-hero{min-height:84px}} @media(prefers-reduced-motion:reduce){.ws-hero-glow::before{animation:none}.ws-hero-brain,.ws-hero-brain .philippe-brain,.ws-hero-glow{transition:none}} /* Modo herói: os cards começam logo abaixo das sugestões (o espaço sobra embaixo, não no meio) e a grade pode usar a altura toda. */ body.ws-hero-mode #aiz.ws-root.ws-overview-mode,body.ws-hero-mode #aiz.ws-root.ws-tile-mode{inset:var(--ws-top) 20px calc(14px + var(--ws-viewport-inset,0px));grid-template-rows:auto auto minmax(0,1fr)} body.ws-hero-mode #aiz.ws-root.ws-overview-mode .ws-board,body.ws-hero-mode #aiz.ws-root.ws-tile-mode .ws-board{justify-content:flex-start;margin:0;height:100%} body.ws-hero-mode #aiz.ws-root.ws-focus-mode:not(.ws-empty):not(.ws-inline-mode):not(.ws-recipe-mode):not(.ws-support-mode) .ws-board{align-self:start;width:min(1180px,100%)} body.ws-hero-mode #aiz.ws-root.ws-overview-mode .ws-grid{max-height:100%} /* ===== 1.25.0: celular, conteúdo primeiro. Os menus e filtros do Cérebro e os controles internos dos cards começam recolhidos; gráficos e informações ocupam a tela. Um toque em "mais" (⋯) abre os controles. ===== */ .ws-filters-more,.ws-toolbar-more{display:none} @media(max-width:600px){ .ws-filters-more,.ws-toolbar-more{display:inline-flex} #aiz.ws-root .ws-report-filters .ws-filters-more{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;justify-content:center;margin-left:auto} #aiz.ws-root .ws-filters .ws-filters-more svg,#aiz.ws-root .ws-toolbar-more svg{width:18px;height:18px;stroke-width:2.8;stroke-linecap:round} #aiz.ws-root .ws-report-filters:not(.ws-filters-open)>button:not([aria-pressed="true"]):not(.ws-filters-more){display:none} #aiz.ws-root .ws-report-filters:not(.ws-filters-open)>.ws-presentation,#aiz.ws-root .ws-report-filters:not(.ws-filters-open)>.ws-filter-detail,#aiz.ws-root .ws-report-filters:not(.ws-filters-open)>.ws-comparison-controls{display:none} #aiz.ws-root .ws-filters{gap:6px} /* O paginador (fichas ou cards) é navegação, não menu: continua visível. */ #aiz.ws-root .ws-toolbar:not(.ws-toolbar-open) .ws-toolbar-actions>*:not(.ws-toolbar-more):not(.ws-pager),#aiz.ws-root .ws-toolbar:not(.ws-toolbar-open) .ws-context-controls{display:none} #aiz.ws-root .ws-toolbar{flex-wrap:nowrap;gap:6px;min-height:44px} #aiz.ws-root .ws-toolbar.ws-toolbar-open{flex-wrap:wrap} #aiz.ws-root .ws-toolbar .ws-topic{min-width:0;flex:1 1 auto} #aiz.ws-root .ws-toolbar .ws-topic strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #aiz.ws-root .ws-toolbar-more{width:44px;min-width:44px;height:44px;min-height:44px;padding:0} } /* 1.25.0: ficha técnica em tela cheia (cozinha) no modo herói. As linhas da grade do #aiz não podem esticar a barra e a grade da ficha (a altura medida por fitRecipe é a do conteúdo). */ body.ws-hero-mode #aiz.ws-root.ws-recipe-mode .ws-board{align-self:start;align-content:start;height:auto;max-height:none} body.ws-hero-mode #aiz.ws-root.ws-recipe-mode{grid-template-rows:auto auto auto;align-content:start;overflow:hidden} /* 1.25.0: ajuda (suporte) no modo herói: o card fica centrado no espaço abaixo do ícone, em todas as telas. */ body.ws-hero-mode #aiz.ws-root.ws-support-active.ws-support-mode{top:var(--ws-top);grid-template-rows:auto auto minmax(0,1fr);align-content:stretch} body.ws-hero-mode #aiz.ws-root.ws-support-active.ws-support-mode .ws-board{align-self:center;justify-self:center;width:min(900px,100%)} /* 1.26.0: par agrupado sobe tremendo (mesma animação dos cards da Expedição e do KDS). */ #aiz.ws-root .ws-widget.ws-shake{animation:shake .5s ease-in-out 6} @media(prefers-reduced-motion:reduce){#aiz.ws-root .ws-widget.ws-shake{animation:none;outline:3px solid color-mix(in srgb,var(--d-ambar,#C27A00) 90%,transparent)}} /* ===== 1.27.0: resposta transitória. Frases do Cérebro (resposta, erro, pergunta de confirmação) não viram card: aparecem em vidro abaixo do ícone, com os botões Sim/Não e as ações, e somem sozinhas quando não há botão. ===== */ #aiz.ws-root .ws-reply{width:min(720px,100%);margin:0 auto;padding:14px 22px;border-radius:22px;background:color-mix(in srgb,var(--surface,#FFFFFF) 72%,transparent);backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%);box-shadow:0 10px 30px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 14%,transparent),inset 0 0 0 1px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 55%,transparent);color:var(--label,#323200);font-size:calc(1.0625rem * var(--dt));line-height:1.35;pointer-events:auto;text-align:center} #aiz.ws-root .ws-reply p{color:var(--label,#323200)} body.dark #aiz.ws-root .ws-reply p{color:var(--label,#323200)} body.dark #aiz.ws-root .ws-reply{background:color-mix(in srgb,var(--surface2,#F7F3EE) 72%,transparent);color:var(--label,#323200)} #aiz.ws-root .ws-reply p{margin:0} #aiz.ws-root .ws-reply .ws-reply-actions{display:flex;justify-content:center;gap:10px;margin-top:12px;flex-wrap:wrap} #aiz.ws-root .ws-reply .ws-btn{min-height:44px;padding:0 20px;font-size:calc(1rem * var(--dt))} #aiz.ws-root .ws-reply[hidden]{display:none} body.ws-hero-mode #aiz.ws-root:not(.ws-speaking) .ws-controls{padding:0;margin:0} body.ws-hero-mode #aiz.ws-root .ws-controls:has(.ws-reply:not([hidden])){gap:10px;padding-bottom:6px} /* /cerebro-learning.css */ .cl-dialog{width:min(1060px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:30px;color:var(--txt,var(--label,#323200));background:color-mix(in srgb,var(--surface,#FFFFFF) 96%,transparent);box-shadow:0 24px 100px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 25.882%,transparent);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);overflow:auto} .cl-dialog::backdrop{background:color-mix(in srgb,var(--label,#323200) 21.961%,transparent);backdrop-filter:blur(12px)} .cl-shell{padding:28px}.cl-dialog header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.cl-dialog h2{font-size:calc(1.625rem * var(--dt));line-height:1.25;margin:4px 0 8px}.cl-dialog h3{font-size:calc(1.0625rem * var(--dt));line-height:1.4;margin:5px 0;overflow-wrap:anywhere}.cl-dialog p{font-size:calc(0.9375rem * var(--dt));line-height:1.55;margin:8px 0}.cl-dialog small{font-size:calc(0.8125rem * var(--dt));line-height:1.5;color:var(--label2,#6B5A4C)}.cl-kind{font-size:max(0.6875rem, calc(0.75rem * var(--dt)));font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--label2,#6B5A4C)}.cl-explanation{max-width:78ch}.cl-dialog button{min-height:44px;min-width:44px;border:0;border-radius:15px;padding:10px 16px;background:var(--surface2,#F7F3EE);color:inherit;font:inherit;font-size:calc(0.875rem * var(--dt));font-weight:600;cursor:pointer}.cl-dialog button:disabled{opacity:.55;cursor:default}.cl-dialog button:focus-visible,.cl-dialog input:focus-visible,.cl-dialog select:focus-visible{outline:3px solid var(--d-verdeagua,#0FAE92);outline-offset:3px}.cl-dialog button[aria-pressed=true],.cl-dialog button[type=submit]{background:color-mix(in srgb,var(--verde,#11994A) 80%,var(--label,#323200));color:var(--acao-txt,#FFFFFF)}.cl-dialog nav,.cl-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 10px}.cl-entry{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px;border-radius:22px;background:color-mix(in srgb,var(--surface,#FFFFFF) 70.196%,transparent);margin:12px 0;box-shadow:0 5px 22px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 3.5294%,transparent)}.cl-entry>div{min-width:0}.cl-entry>button{flex-shrink:0}.cl-dialog [data-learning-notice]{min-height:24px;color:var(--label,#323200)}.cl-dialog .cl-error{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}.cl-empty{padding:30px 16px;text-align:center}.cl-dialog form{padding:22px;border-radius:24px;background:var(--surface2,#F7F3EE);margin:20px 0}.cl-dialog form[hidden]{display:none}.cl-dialog label{display:grid;gap:7px;font-size:calc(0.875rem * var(--dt));font-weight:600;margin:15px 0}.cl-dialog input,.cl-dialog select{box-sizing:border-box;width:100%;min-height:46px;padding:11px 14px;border:0;border-radius:14px;background:var(--surface,#FFFFFF);color:var(--label,#323200);font:inherit;font-size:calc(1rem * var(--dt))}.cl-dialog input[readonly]{background:var(--surface2,#F7F3EE)}.cl-dialog [data-learning-more]{display:block;margin:20px auto 0}.cl-dialog [hidden]{display:none!important} body.dark .cl-dialog,[data-theme=dark] .cl-dialog{background:color-mix(in srgb,var(--surface2,#F7F3EE) 97%,transparent);color:var(--label,#323200)}body.dark .cl-dialog small,body.dark .cl-kind,[data-theme=dark] .cl-dialog small,[data-theme=dark] .cl-kind{color:var(--label,#323200)}body.dark .cl-entry,[data-theme=dark] .cl-entry{background:color-mix(in srgb,var(--surface,#FFFFFF) 5.098%,transparent)}body.dark .cl-dialog button,body.dark .cl-dialog form,[data-theme=dark] .cl-dialog button,[data-theme=dark] .cl-dialog form{background:var(--surface2,#F7F3EE);color:var(--label,#323200)}body.dark .cl-dialog button[aria-pressed=true],body.dark .cl-dialog button[type=submit],[data-theme=dark] .cl-dialog button[aria-pressed=true],[data-theme=dark] .cl-dialog button[type=submit]{background:var(--verde,#11994A)}body.dark .cl-dialog [data-learning-notice],[data-theme=dark] .cl-dialog [data-learning-notice]{color:var(--d-verdeagua-t,#006F5D)}body.dark .cl-dialog .cl-error,[data-theme=dark] .cl-dialog .cl-error{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} @media(max-width:600px){.cl-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:24px}.cl-shell{padding:20px}.cl-dialog h2{font-size:calc(1.375rem * var(--dt))}.cl-entry{padding:16px;flex-direction:column;gap:12px}.cl-dialog form{padding:16px}.cl-dialog nav button{flex:1 1 auto}.cl-toolbar button{flex:1 1 auto}} @media(prefers-reduced-transparency:reduce){.cl-dialog{background:var(--surface,#FFFFFF);backdrop-filter:none}.cl-entry{background:var(--surface,#FFFFFF)}.cl-dialog::backdrop{backdrop-filter:none;background:color-mix(in srgb,var(--label,#323200) 78.824%,transparent)}} /* /aprovacoes.css */ /* 1.63.1 (onda B): SUPERFÍCIE DE APROVAÇÃO (web/aprovacoes.js). Cartão de vidro para a mudança preparada pela IA ou por um canal sem botão, o aviso "Feito" com Desfazer e a pílula de aprovações esperando. Mesmos tokens de vidro do Hub (--glass-bg, --glass-border, --glass-lift-alto, --r-sheet), alvos de 44 pt e estados de botão visíveis. */ #aprov-raiz{position:fixed;right:24px;bottom:24px;z-index:1350;width:min(420px,calc(100vw - 32px));display:flex;flex-direction:column;align-items:stretch;gap:10px;pointer-events:none} #aprov-raiz[hidden]{display:none} /* No Cérebro a aprovação ocupa sua própria linha, antes da conversa. A foto, a galeria e a barra continuam acessíveis, inclusive com a prévia aberta. */ .cu-unico-corpo>#aprov-raiz{position:relative;inset:auto;width:100%;max-height:32dvh;overflow:auto;overscroll-behavior:contain;flex:none;box-sizing:border-box;margin:8px 0;z-index:auto} .cu-unico-corpo>#aprov-raiz .aprov-acoes{position:sticky;bottom:0;padding:8px 0;background:var(--surface,#fff);z-index:1} #aprov-raiz>*{pointer-events:auto} .aprov-vidro{background:var(--glass-bg,rgba(255,255,255,.72));-webkit-backdrop-filter:blur(var(--glass-blur,24px)) saturate(180%);backdrop-filter:blur(var(--glass-blur,24px)) saturate(180%);border:1px solid var(--glass-border,rgba(255,255,255,.88));box-shadow:var(--glass-edge,inset 0 1px 0 rgba(255,255,255,.55)),var(--glass-lift-alto,0 18px 46px rgba(40,25,12,.2));color:var(--label,var(--text,#3A2A1E))} .aprov-card{border-radius:var(--r-sheet,20px);padding:14px 16px 14px} .aprov-card.entra{animation:aprov-entra .32s cubic-bezier(.2,.8,.2,1)} .aprov-card.saindo{animation:aprov-sai .22s ease-in forwards} @keyframes aprov-entra{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}} @keyframes aprov-sai{to{opacity:0;transform:translateY(12px) scale(.98)}} @media (prefers-reduced-motion:reduce){.aprov-card.entra,.aprov-card.saindo,.aprov-feito.entra{animation:none}} .aprov-topo{display:flex;align-items:center;gap:8px;min-height:32px} .aprov-selo{display:inline-flex;align-items:center;gap:6px;font-size:var(--f-footnote,0.8125rem);font-weight:700;color:var(--ink-blue,#1E6EF4);letter-spacing:.01em} .aprov-selo svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .aprov-conta{margin-left:auto;font-size:var(--f-footnote,0.8125rem);color:var(--label2,var(--sub,#8A7666));font-variant-numeric:tabular-nums} .aprov-nav{display:inline-flex;gap:2px} .aprov-nav button,.aprov-x{min-width:44px;min-height:44px;margin:-8px -8px -8px 0;border:0;border-radius:var(--r-pill,999px);background:transparent;color:var(--label2,var(--sub,#8A7666));font-size:calc(1.375rem * var(--dt,1));line-height:1;cursor:pointer;display:grid;place-items:center} .aprov-nav button{margin:-8px 0;font-size:calc(1.25rem * var(--dt,1))} .aprov-nav button:disabled{opacity:.3;cursor:default} .aprov-x:active,.aprov-nav button:active{background:var(--fill,rgba(90,65,45,.08))} .aprov-titulo{margin:6px 0 2px;font-size:var(--f-headline,1.0625rem);line-height:var(--lh-headline,1.375rem);font-weight:700} .aprov-quem{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--f-footnote,0.8125rem);color:var(--label2,var(--sub,#8A7666))} .aprov-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:var(--r-pill,999px);font-weight:700;font-size:var(--f-caption1,0.75rem);background:var(--fill2,rgba(90,65,45,.12));color:var(--label,#3A2A1E)} .aprov-chip.ia{background:color-mix(in srgb,var(--sys-indigo,#6155F5) 16%,transparent);color:var(--ink-indigo,#4B3FD1)} .aprov-chip.pessoa{background:color-mix(in srgb,var(--sys-green,#34C759) 18%,transparent);color:var(--ink-green,#1C7A36)} .aprov-de-para{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:8px;margin:12px 0 6px} .aprov-caixa{border-radius:var(--r-card,16px);padding:10px 12px;background:var(--fill,rgba(90,65,45,.08));min-width:0} .aprov-caixa small{display:block;font-size:var(--f-caption1,0.75rem);color:var(--label2,var(--sub,#8A7666));font-weight:600} .aprov-caixa b{display:block;font-size:var(--f-callout,1rem);line-height:1.25;overflow-wrap:anywhere} .aprov-caixa.depois{background:color-mix(in srgb,var(--sys-blue,#0088FF) 14%,transparent)} .aprov-caixa.depois b{color:var(--ink-blue,#1E6EF4)} .aprov-seta{align-self:center;color:var(--label3,#8A7666);font-size:calc(1.25rem * var(--dt,1))} .aprov-texto{margin:10px 0 4px;font-size:var(--f-subhead,0.9375rem);line-height:var(--lh-subhead,1.25rem)} .aprov-efeito{margin:4px 0 0;font-size:var(--f-footnote,0.8125rem);color:var(--label2,var(--sub,#8A7666))} .aprov-prazo{margin:10px 0 0;font-size:var(--f-footnote,0.8125rem);color:var(--label2,var(--sub,#8A7666));display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center} .aprov-prazo b{font-variant-numeric:tabular-nums;color:var(--label,#3A2A1E)} .aprov-barra{flex-basis:100%;height:4px;border-radius:4px;background:var(--fill2,rgba(90,65,45,.12));overflow:hidden} .aprov-barra i{display:block;height:100%;background:var(--sys-blue,#0088FF);border-radius:4px;transition:width 1s linear} .aprov-card.acabando .aprov-barra i{background:var(--sys-orange,#FF8D28)} .aprov-pin{display:flex;flex-direction:column;gap:6px;margin:12px 0 0;font-size:var(--f-footnote,0.8125rem);font-weight:600} .aprov-pin input{box-sizing:border-box;min-width:0;width:100%;min-height:44px;border-radius:var(--r-ctl,12px);border:1px solid var(--sep,rgba(58,42,30,.2));background:var(--surface,#fff);color:inherit;font:inherit;font-size:calc(1.25rem * var(--dt,1));letter-spacing:.3em;padding:0 12px;text-align:center} .aprov-pin input:focus-visible{outline:3px solid color-mix(in srgb,var(--sys-blue,#0088FF) 45%,transparent);outline-offset:1px} .aprov-pin.erro input{border-color:var(--sys-red,#FF383C);animation:aprov-treme .32s} @keyframes aprov-treme{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}} .aprov-status{min-height:0;margin:8px 0 0;font-size:var(--f-footnote,0.8125rem);font-weight:600} .aprov-status:empty{display:none} .aprov-status.erro{color:var(--ink-red,#B42318)} .aprov-status.ok{color:var(--ink-green,#1C7A36)} .aprov-status.info{color:var(--label2,#6B5A4C)} .aprov-acoes{display:flex;gap:10px;margin-top:14px} .aprov-acoes .btn{flex:1 1 0;min-height:44px;border-radius:var(--r-ctl,12px);font-weight:700;font-size:var(--f-callout,1rem);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:opacity .12s,transform .12s,background-color .2s} .aprov-acoes .btn:active:not(:disabled){transform:scale(.97);opacity:.85} .aprov-acoes .btn:disabled{opacity:.55;cursor:default} .aprov-acoes .btn[aria-busy="true"]::before,.aprov-feito .aprov-desfazer[aria-busy="true"]::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:aprov-gira .7s linear infinite} @keyframes aprov-gira{to{transform:rotate(360deg)}} .aprov-acoes .btn.aprovar.feito{background:var(--sys-green,#34C759);border-color:transparent;color:#fff} .aprov-acoes .btn.recusar{background:var(--fill,rgba(90,65,45,.08));color:var(--label,#3A2A1E)} .aprov-somente{margin:12px 0 0;font-size:var(--f-footnote,0.8125rem);color:var(--label2,var(--sub,#8A7666))} /* aviso "Feito" com Desfazer */ .aprov-feito{display:flex;align-items:center;gap:10px;border-radius:var(--r-pill,999px);padding:6px 6px 6px 14px;min-height:52px} .aprov-feito.entra{animation:aprov-entra .28s cubic-bezier(.2,.8,.2,1)} .aprov-feito .ok{flex:none;width:26px;height:26px;border-radius:50%;background:var(--sys-green,#34C759);color:#fff;display:grid;place-items:center;font-weight:800;font-size:calc(0.9375rem * var(--dt,1))} .aprov-feito .ok.erro{background:var(--sys-red,#FF383C)} .aprov-feito .txt{flex:1;min-width:0;font-size:var(--f-subhead,0.9375rem);font-weight:600;line-height:1.25} .aprov-feito .aprov-desfazer{flex:none;min-height:44px;border:0;border-radius:var(--r-pill,999px);padding:0 16px;background:var(--fill2,rgba(90,65,45,.12));color:var(--ink-blue,#1E6EF4);font-weight:700;font-size:var(--f-subhead,0.9375rem);display:inline-flex;align-items:center;gap:6px;cursor:pointer} .aprov-feito .aprov-desfazer b{font-variant-numeric:tabular-nums;font-weight:600;color:var(--label2,#6B5A4C)} .aprov-feito .aprov-x{margin:0} /* pílula "N aprovações esperando" (cartão fechado) */ .aprov-pilula{align-self:flex-end;min-height:44px;border-radius:var(--r-pill,999px);padding:0 16px;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:var(--f-subhead,0.9375rem);cursor:pointer;color:var(--ink-blue,#1E6EF4)} .aprov-pilula .n{min-width:22px;height:22px;border-radius:11px;background:var(--on-blue,#0062BD);color:#fff;display:grid;place-items:center;font-size:var(--f-footnote,0.8125rem);padding:0 6px} /* telas estreitas: folha de baixo, largura toda */ @media (max-width:640px){#aprov-raiz{left:12px;right:12px;width:auto;bottom:calc(env(safe-area-inset-bottom) + 12px)} .aprov-pilula{align-self:center}} /* TREM-PIN-TECLADO (item 3): Expedição e Cozinha têm a caixa do Cérebro no pé da tela, o mesmo lugar desta raiz. Com a caixa visível, aprovacoes.js mede a altura dela (--aprov-caixa) e marca a raiz: a faixa e o cartão nascem ACIMA da caixa, que continua inteira e tocável. Só posição; o cartão alto rola dentro dele. */ #aprov-raiz.aprov-sobre-caixa.aprov-sobre-caixa{bottom:calc(var(--aprov-caixa,0px) + 12px)} #aprov-raiz.aprov-sobre-caixa .aprov-card{max-height:calc(100dvh - var(--aprov-caixa,0px) - 36px);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box} /* AU-LEGADO: o menu ocupa a faixa direita. Aprovação continua visível e acionável ao lado da navegação, inclusive com seu cartão expandido. AU-LAPIDA-03 (G1b): aprovacoes.js marca o body com hub-menu36-aberto (sem :has() no body; mesma especificidade). */ html body.hub-menu36-aberto>#aprov-raiz{left:auto;right:calc(94px + env(safe-area-inset-right,0px) + 12px);width:min(420px,calc(100vw - 118px - env(safe-area-inset-right,0px)));max-height:calc(100dvh - 100px);overflow-y:auto;z-index:3} html body.hub-menu36-aberto>#aprov-raiz .aprov-pilula{max-width:100%;box-sizing:border-box;white-space:normal;text-align:start;padding-block:8px} @media(min-width:900px){html body.hub-menu36-aberto>#aprov-raiz{right:calc(104px + env(safe-area-inset-right,0px) + 12px);width:min(420px,calc(100vw - 128px - env(safe-area-inset-right,0px)))}} /* app do celular: acima da barra de abas nativa, fora dos botões do topo */ html.app-nativo #aprov-raiz{left:10px;right:10px;width:auto;bottom:calc(var(--rodape-app,56px) + 10px)} html.app-nativo .aprov-vidro{-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%)} /* 1.74.0 (Philippe, 04/10/2026): TELA COM A BARRA DE BAIXO (HubTela põe a .bf-tela dentro da tela ligada). O cartão de aprovação (PIN) e o recibo nascem no pé e ficavam por cima da barra, segurando os toques dela (no celular em toda a largura; entre 641 e 1100 px, por cima dos últimos itens). Agora nascem ACIMA da barra, em qualquer largura e também no app. Na Expedição e na Cozinha (sem barra) nada muda. */ /* AU-LAPIDA-03 (G1b): hub-tela.js marca o body com hub-bf-tela-on (sem :has() no body); a classe repetida mantém a especificidade do `body:has(.view.on .bf-tela)` de antes. */ body.hub-bf-tela-on.hub-bf-tela-on.hub-bf-tela-on #aprov-raiz{bottom:calc(var(--bf-rodape,env(safe-area-inset-bottom,0px)) + var(--bf-barra,4rem) + 1.25rem)} body.dark .aprov-pin input{background:var(--surface2,#2C2A27)} @media (prefers-reduced-transparency:reduce){.aprov-vidro{background:var(--surface,#fff);-webkit-backdrop-filter:none;backdrop-filter:none}} /* F01a: only the native v2 declared-terms preview has this marker. */ .aprov-card.aprov-financial-terms{max-height:calc(100dvh - 10rem);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;overflow-wrap:anywhere} .aprov-financial-terms .aprov-texto{max-height:35dvh;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;overflow-wrap:anywhere} .aprov-financial-terms .aprov-texto:focus-visible{outline:2px solid currentColor;outline-offset:2px} .aprov-financial-terms :is(.btn,.aprov-x,input){min-height:44px;min-width:44px} /* Conferencia nativa do Desfazer: mesmos controles, com espaco para previa e PIN. */ .aprov-feito.aprov-em-conferencia{display:grid;grid-template-columns:26px minmax(0,1fr) 44px;align-items:start;border-radius:var(--r-card,24px);padding:14px} .aprov-em-conferencia>.aprov-x{grid-column:3;grid-row:1} .aprov-desfazer-conferencia{grid-column:1/-1;grid-row:2;min-width:0} .aprov-desfazer-conferencia p{margin:0;overflow-wrap:anywhere} .aprov-desfazer-conferencia input{width:100%;min-width:0} #aprov-raiz .aprov-desfazer-conferencia .btn{width:100%;min-height:44px;margin-top:12px;border:0;border-radius:var(--r-ctl,12px);padding:10px 16px;background:var(--on-blue,#0062B8);color:#fff;font:inherit;font-weight:700;cursor:pointer} .aprov-desfazer-conferencia .btn:disabled{opacity:.5;cursor:wait} /* /auditoria.css */ /* 1.63.1 (onda B): tela "Auditoria" na aba Sistema (web/auditoria.js): o registro encadeado das ações (quem, canal, ação, antes e depois) e a conferência da corrente. Mesmo cartão de vidro das outras seções do Sistema. */ #auditoria-acoes .aud-cab{display:flex;flex-wrap:wrap;align-items:center;gap:8px} #auditoria-acoes .aud-cab .dt{flex:1 1 auto} #auditoria-acoes .aud-links{display:flex;flex-wrap:wrap;gap:8px} #auditoria-acoes .aud-links a,#auditoria-acoes .aud-links .btn{min-height:44px;display:inline-flex;align-items:center;gap:6px;text-decoration:none} #auditoria-acoes .aud-filtros{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 6px} #auditoria-acoes .aud-filtros select,#auditoria-acoes .aud-filtros input{min-height:44px;border-radius:var(--r-ctl,12px);border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));background:var(--surface,#FFFFFF);color:inherit;font:inherit;font-size:var(--f-subhead,0.9375rem);padding:0 12px} #auditoria-acoes .aud-filtros input{flex:1 1 200px;min-width:160px} #auditoria-acoes .aud-acao .aud-tec{display:block;margin-top:2px;font-size:var(--f-caption1,0.75rem);color:var(--label3,#9C8D80);overflow-wrap:anywhere} body.dark #auditoria-acoes .aud-filtros select,body.dark #auditoria-acoes .aud-filtros input{background:var(--surface2,#F7F3EE)} #auditoria-acoes .aud-corrente{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0;padding:10px 12px;border-radius:var(--r-card,16px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));font-size:var(--f-footnote,0.8125rem)} #auditoria-acoes .aud-corrente.ok{background:color-mix(in srgb,var(--verde,#11994A) 14%,transparent);color:var(--d-verdeagua-t,#006F5D)} #auditoria-acoes .aud-corrente.ruim{background:color-mix(in srgb,var(--queda,#E21D3C) 14%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} #auditoria-acoes .aud-corrente b{font-weight:700} #auditoria-acoes .aud-lista{display:flex;flex-direction:column;gap:6px;margin-top:8px} #auditoria-acoes .aud-linha{display:grid;grid-template-columns:92px minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.2fr);gap:4px 12px;align-items:start;padding:10px 12px;border-radius:var(--r-card,16px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));font-size:var(--f-footnote,0.8125rem);line-height:1.35} #auditoria-acoes .aud-quando{color:var(--label2,#6B5A4C);font-variant-numeric:tabular-nums} #auditoria-acoes .aud-quando b{display:block;color:var(--label,#323200);font-weight:600} #auditoria-acoes .aud-acao b{display:block;font-size:var(--f-subhead,0.9375rem);font-weight:600;color:var(--label,#323200)} #auditoria-acoes .aud-acao span{color:var(--label2,#6B5A4C);overflow-wrap:anywhere} #auditoria-acoes .aud-quem{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-start} #auditoria-acoes .aud-chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-weight:700;font-size:var(--f-caption1,0.75rem);background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent));white-space:nowrap} #auditoria-acoes .aud-chip.ia{background:color-mix(in srgb,var(--d-anil,#5B6CFF) 16%,transparent);color:var(--d-anil-t,#394DC8)} #auditoria-acoes .aud-chip.pessoa{background:color-mix(in srgb,var(--verde,#11994A) 16%,transparent);color:var(--d-verdeagua-t,#006F5D)} #auditoria-acoes .aud-chip.ev-aplicada,#auditoria-acoes .aud-chip.ev-aplicada_por_aprovacao,#auditoria-acoes .aud-chip.ev-desfeita,#auditoria-acoes .aud-chip.ev-aplicada_tela_antiga{background:color-mix(in srgb,var(--verde,#11994A) 18%,transparent);color:var(--d-verdeagua-t,#006F5D)} #auditoria-acoes .aud-chip.ev-preparada{background:color-mix(in srgb,var(--acao,#1F5FD0) 16%,transparent);color:var(--acao,#1F5FD0)} #auditoria-acoes .aud-chip.ev-negada,#auditoria-acoes .aud-chip.ev-erro{background:color-mix(in srgb,var(--queda,#E21D3C) 16%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} #auditoria-acoes .aud-chip.ev-recusada,#auditoria-acoes .aud-chip.ev-expirada,#auditoria-acoes .aud-chip.ev-substituida{background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent));color:var(--label2,#6B5A4C)} #auditoria-acoes .aud-chip.ev-encaminhada{background:color-mix(in srgb,var(--d-ambar,#C27A00) 18%,transparent);color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} #auditoria-acoes .aud-mudou{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;overflow-wrap:anywhere} #auditoria-acoes .aud-mudou .de{color:var(--label2,#6B5A4C);text-decoration:line-through;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)} #auditoria-acoes .aud-mudou .para{font-weight:600;color:var(--label,#323200)} #auditoria-acoes .aud-vazio,#auditoria-acoes .aud-carregando{padding:18px 6px;color:var(--label2,#6B5A4C);text-align:center} #auditoria-acoes .aud-mais{display:flex;justify-content:center;margin-top:8px} #auditoria-acoes .aud-mais .btn,#auditoria-acoes .aud-cab .btn{min-height:44px} #auditoria-acoes .btn[aria-busy="true"]{opacity:.7} @media (max-width:760px){ #auditoria-acoes .aud-linha{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"acao quando" "quem quem" "mudou mudou"} #auditoria-acoes .aud-quando{grid-area:quando;text-align:right} #auditoria-acoes .aud-acao{grid-area:acao} #auditoria-acoes .aud-quem{grid-area:quem} #auditoria-acoes .aud-mudou{grid-area:mudou} /* TREM-AJUSTES-CORR item 7: com base de 140px "Todas as unidades" saía cortado em 375; com 200px cada filtro ocupa a linha inteira no celular. */ #auditoria-acoes .aud-filtros select{flex:1 1 200px;min-width:0;max-width:100%} } /* /suporte.css */ /* 1.63.1 (onda B, B2): tela Suporte (web/suporte.js). Folha de vidro estilo Apple: no computador fica à direita, sobre a operação; no celular e no app ocupa a tela entre a barra de status e a borda de baixo (a barra de abas do app some enquanto a conversa está aberta). Usa os tokens do Hub (vidro grosso para texto denso, cores do sistema, --dt para o tamanho da letra) e respeita Reduzir Transparência, Aumentar Contraste e Reduzir Movimento. */ #suporte-raiz{position:fixed;inset:0;z-index:1300;pointer-events:none} #suporte-raiz[hidden]{display:none} /* .sr-only: o global do Hub (index.html, 10.2) */ #suporte-raiz .sup-veu{position:absolute;inset:0;background:var(--vidro-veu,color-mix(in srgb,var(--label,#323200) 22%,transparent));opacity:0;transition:opacity var(--dur-lenta,.32s) var(--curva-padrao,ease);pointer-events:auto} #suporte-raiz.aberto .sup-veu{opacity:1} #suporte-raiz .sup-painel{position:absolute;top:12px;right:12px;bottom:12px;width:min(480px,calc(100vw - 24px));display:flex;flex-direction:column;overflow:hidden;pointer-events:auto; background:var(--vidro-grosso,color-mix(in srgb,var(--surface,#FFFFFF) 86%,transparent));-webkit-backdrop-filter:blur(var(--vidro-desfoque,24px)) saturate(var(--vidro-saturacao,180%));backdrop-filter:blur(var(--vidro-desfoque,24px)) saturate(var(--vidro-saturacao,180%)); border-radius:var(--r-sheet,20px);box-shadow:var(--vidro-brilho),var(--vidro-sombra-alta,0 18px 46px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 20%,transparent));color:var(--label,#323200); transform:translateX(24px);opacity:0;transition:transform var(--dur-lenta,.32s) var(--curva-padrao,cubic-bezier(.2,.8,.2,1)),opacity var(--dur-media,.2s) ease} #suporte-raiz.aberto .sup-painel{transform:none;opacity:1} body.suporte-aberto{overflow:hidden} /* topo */ .sup-topo{flex:none;display:flex;align-items:flex-start;gap:4px;padding:14px 10px 10px 18px;border-bottom:.5px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .sup-titulos{flex:1;min-width:0} .sup-topo h2{margin:2px 0 0;font-size:calc(1.375rem * var(--dt,1));font-weight:700;letter-spacing:-.01em} .sup-sub{margin:3px 0 0;color:var(--label2,#6B5A4C);font-size:calc(0.8125rem * var(--dt,1));line-height:1.35} .sup-icone{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--label2,#6B5A4C);display:grid;place-items:center;cursor:pointer;transition:background var(--dur-rapida,.12s),transform var(--dur-rapida,.12s)} .sup-icone[hidden]{display:none} .sup-icone svg,.sup-mic svg,.sup-enviar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} @media (hover:hover){.sup-icone:hover{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))}} .sup-icone:active{transform:scale(var(--apertado-escala,.97));background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .sup-icone:focus-visible,.sup-botao:focus-visible,.sup-chip:focus-visible,.sup-mic:focus-visible,.sup-enviar:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px} /* conversa */ .sup-rolagem{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 14px 6px} .sup-lista{display:flex;flex-direction:column;gap:10px} .sup-msg{display:flex;flex-direction:column;max-width:88%;gap:4px} .sup-pessoa{align-self:flex-end;align-items:flex-end} .sup-assistente,.sup-humano,.sup-sistema{align-self:flex-start;align-items:flex-start} .sup-bolha{padding:10px 14px;border-radius:18px;font-size:calc(1rem * var(--dt,1));line-height:1.4;overflow-wrap:anywhere} .sup-bolha p{margin:0} .sup-bolha p+p{margin-top:6px} .sup-bolha ol{margin:4px 0 0;padding-left:22px} .sup-bolha li{margin:3px 0} .sup-pessoa .sup-bolha{background:var(--acao,#1F5FD0);color:var(--acao-txt,#FFFFFF);border-bottom-right-radius:6px} .sup-assistente .sup-bolha{background:var(--surface,#FFFFFF);box-shadow:inset 0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent));border-bottom-left-radius:6px} .sup-humano .sup-bolha{background:color-mix(in srgb,var(--verde,#11994A) 16%,var(--surface,#FFFFFF));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--verde,#11994A) 40%,transparent);border-bottom-left-radius:6px} .sup-quem{display:inline-flex;align-items:center;gap:6px;font-size:max(0.6875rem, calc(0.75rem * var(--dt,1)));font-weight:700;color:color-mix(in srgb,var(--d-verdeagua-t,#006F5D) 60%,var(--label,#323200))} .sup-quem svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2} .sup-hora{font-size:max(0.6875rem, calc(0.6875rem * var(--dt,1)));color:var(--label2,#6B5A4C);padding:0 6px} .sup-hora.falhou{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200));font-weight:600} .sup-pensando .sup-bolha{display:inline-flex;align-items:center;gap:10px;color:var(--label2,#6B5A4C)} .sup-pontos{display:inline-flex;gap:4px} .sup-pontos i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.35;animation:sup-ponto 1.2s infinite ease-in-out} .sup-pontos i:nth-child(2){animation-delay:.15s}.sup-pontos i:nth-child(3){animation-delay:.3s} @keyframes sup-ponto{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:.9;transform:translateY(-3px)}} /* vazio, sugestões e histórico */ .sup-vazio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:28px 12px} .sup-vazio h3{margin:6px 0 0;font-size:calc(1.25rem * var(--dt,1))} .sup-vazio p{margin:0;color:var(--label2,#6B5A4C);font-size:calc(0.9375rem * var(--dt,1));line-height:1.4;max-width:340px} .sup-marca{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--acao,#1F5FD0) 14%,transparent);color:var(--acao,#1F5FD0)} .sup-marca svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2} .sup-sugestoes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px} .sup-chip{min-height:44px;padding:0 16px;border-radius:var(--r-pill,999px);border:0;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label,#323200);font-weight:600;font-size:calc(0.9375rem * var(--dt,1));cursor:pointer;transition:transform var(--dur-rapida,.12s),background var(--dur-rapida,.12s)} @media (hover:hover){.sup-chip:hover{background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent))}} .sup-chip:active{transform:scale(var(--apertado-escala,.97));opacity:var(--apertado-opacidade,.6)} .sup-chip.mini{min-height:44px;min-width:44px;padding:0 12px;font-size:calc(0.8125rem * var(--dt,1))} /* 1.66.0: alvo de 44 px também no "Resolveu?" */ .sup-nota{display:flex;align-items:center;gap:6px;margin-top:2px;color:var(--label2,#6B5A4C);font-size:calc(0.8125rem * var(--dt,1))} .sup-roda{width:26px;height:26px;border-radius:50%;border:3px solid var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-top-color:var(--acao,#1F5FD0);animation:sup-gira .8s linear infinite} @keyframes sup-gira{to{transform:rotate(360deg)}} .sup-historico-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px} .sup-historico h3{margin:0;font-size:calc(1.0625rem * var(--dt,1))} .sup-historico ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .sup-historico li button{width:100%;min-height:52px;text-align:left;border:0;border-radius:var(--r-card,16px);background:var(--surface,#FFFFFF);box-shadow:inset 0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent));padding:10px 14px;display:flex;flex-direction:column;gap:2px;cursor:pointer} .sup-historico li button:active{transform:scale(var(--apertado-escala,.97))} .sup-historico li b{font-size:calc(0.9375rem * var(--dt,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .sup-historico li span{font-size:max(0.6875rem, calc(0.75rem * var(--dt,1)));color:var(--label2,#6B5A4C)} /* cartões dentro da conversa */ .sup-cartao{width:min(360px,78vw);box-sizing:border-box;border-radius:var(--r-card,16px);padding:12px 14px;background:var(--vidro-regular,color-mix(in srgb,var(--surface,#FFFFFF) 66%,transparent));box-shadow:var(--vidro-brilho),0 1px 2px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 6%,transparent),0 6px 18px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 10%,transparent);font-size:calc(0.875rem * var(--dt,1))} .sup-cartao p{margin:6px 0 0;line-height:1.35} .sup-cartao-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:8px} .sup-cartao-topo b{display:inline-flex;align-items:center;gap:6px;font-size:calc(0.9375rem * var(--dt,1))} .sup-cartao-topo b svg,.sup-selo svg,.sup-alerta svg,.sup-erro svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .sup-selo{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:max(0.6875rem, calc(0.75rem * var(--dt,1)));font-weight:700;padding:3px 9px;border-radius:var(--r-pill,999px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label2,#6B5A4C);text-align:right} .sup-mudanca{border-top:4px solid var(--d-ambar,#C27A00)} .sup-mudanca.estado-aplicada{border-top-color:var(--verde,#11994A)} .sup-mudanca.estado-aplicada .sup-selo{background:color-mix(in srgb,var(--verde,#11994A) 18%,transparent);color:color-mix(in srgb,var(--d-verdeagua-t,#006F5D) 55%,var(--label,#323200))} .sup-mudanca.estado-recusada,.sup-mudanca.estado-expirada,.sup-mudanca.estado-falhou,.sup-mudanca.estado-indisponivel,.sup-mudanca.estado-substituida{border-top-color:var(--sys-gray3,var(--label3,#9C8D80));opacity:.85} .sup-depara{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:10px} .sup-depara div{border-radius:12px;padding:8px 10px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));display:flex;flex-direction:column;gap:2px;min-width:0} .sup-depara div:last-child{background:color-mix(in srgb,var(--acao,#1F5FD0) 12%,transparent)} .sup-depara span{font-size:max(0.6875rem, calc(0.6875rem * var(--dt,1)));font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--label2,#6B5A4C)} .sup-depara b{font-size:calc(1.0625rem * var(--dt,1));overflow-wrap:anywhere} .sup-depara i{font-style:normal;color:var(--label2,#6B5A4C)} .sup-efeito,.sup-rodape{color:var(--label2,#6B5A4C);font-size:calc(0.8125rem * var(--dt,1))} .sup-alerta{display:flex;gap:6px;align-items:flex-start;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--d-ambar,#C27A00) 16%,transparent);color:var(--label,#323200)} .sup-acoes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:10px} .sup-botao{min-height:44px;padding:0 16px;border-radius:12px;border:0;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label,#323200);font-weight:600;font-size:calc(0.9375rem * var(--dt,1));cursor:pointer;transition:transform var(--dur-rapida,.12s),opacity var(--dur-rapida,.12s),background var(--dur-rapida,.12s)} .sup-botao.primario{background:var(--acao,#1F5FD0);color:var(--acao-txt,#FFFFFF);box-shadow:0 6px 16px color-mix(in srgb,var(--acao,#1F5FD0) 30%,transparent)} .sup-botao:active{transform:scale(var(--apertado-escala,.97));opacity:var(--apertado-opacidade,.6)} .sup-botao:disabled{opacity:var(--desligado-opacidade,.42);cursor:default;transform:none} .sup-botao.carregando{position:relative;opacity:.8} .sup-botao.erro{background:var(--queda,#E21D3C);color:var(--acao-txt,#FFFFFF)} .sup-pin{display:flex;flex-direction:column;gap:4px;flex:1 1 100%;font-size:max(0.6875rem, calc(0.75rem * var(--dt,1)));color:var(--label2,#6B5A4C)} .sup-pin input{min-height:44px;border-radius:12px;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));background:var(--surface,#FFFFFF);padding:0 12px;font-size:calc(1.125rem * var(--dt,1));letter-spacing:.3em} .sup-chamado{border-top:4px solid var(--d-anil,#5B6CFF)} .sup-chamado.respondido{border-top-color:var(--verde,#11994A)} .sup-selo.prioridade-alta{background:color-mix(in srgb,var(--queda,#E21D3C) 16%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .sup-tela{border-top:4px solid var(--acao,#1F5FD0)} .sup-aparelho.falhou{border-top:4px solid var(--queda,#E21D3C)} .sup-diag ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px} .sup-diag li{display:flex;gap:8px;align-items:flex-start;line-height:1.35} .sup-ponto{flex:none;width:10px;height:10px;border-radius:50%;margin-top:5px;background:var(--label3,#9C8D80)} .sup-ponto.verde{background:var(--verde,#11994A)}.sup-ponto.vermelho{background:var(--queda,#E21D3C)}.sup-ponto.amarelo{background:var(--d-ambar,#C27A00)} /* erro e aviso */ .sup-erro{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--queda,#E21D3C) 12%,transparent);color:var(--label,#323200);font-size:calc(0.875rem * var(--dt,1))} .sup-erro span{flex:1;min-width:160px} .sup-aviso{flex:none;margin:0 14px 6px;padding:8px 12px;border-radius:12px;background:color-mix(in srgb,var(--d-ambar,#C27A00) 16%,transparent);font-size:calc(0.8125rem * var(--dt,1))} /* campo de texto */ .sup-compor{flex:none;display:flex;align-items:flex-end;gap:8px;padding:10px 12px 12px;border-top:.5px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .sup-compor textarea{flex:1;min-height:44px;max-height:132px;resize:none;box-sizing:border-box;border:0;border-radius:22px;padding:11px 16px;background:var(--surface,#FFFFFF);box-shadow:inset 0 0 0 1px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent));color:var(--label,#323200);font:inherit;font-size:calc(1rem * var(--dt,1));line-height:1.35} .sup-compor textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--acao,#1F5FD0)} .sup-mic,.sup-enviar{flex:none;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;transition:transform var(--dur-rapida,.12s),opacity var(--dur-rapida,.12s),background var(--dur-rapida,.12s)} .sup-mic{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label,#323200)} .sup-mic[hidden]{display:none} .sup-mic.gravando{background:var(--queda,#E21D3C);color:var(--acao-txt,#FFFFFF);animation:sup-pulso 1.4s infinite} @keyframes sup-pulso{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--queda,#E21D3C) 45%,transparent)}100%{box-shadow:0 0 0 14px transparent}} .sup-enviar{background:var(--acao,#1F5FD0);color:var(--acao-txt,#FFFFFF)} .sup-enviar:disabled{opacity:var(--desligado-opacidade,.42);cursor:default} .sup-mic:active,.sup-enviar:not(:disabled):active{transform:scale(.92)} /* celular e app: folha em tela cheia, acima da área segura */ @media (max-width:640px){ #suporte-raiz .sup-painel{top:max(8px,env(safe-area-inset-top));left:0;right:0;bottom:0;width:auto;border-radius:var(--r-sheet,20px) var(--r-sheet,20px) 0 0;transform:translateY(40px)} .sup-compor{padding-bottom:max(12px,env(safe-area-inset-bottom))} .sup-cartao{width:min(360px,80vw)} } /* com a conversa aberta as peças nativas (barra de abas e botões do topo) somem (HubNativo.ocultarBarra): a folha começa logo abaixo da barra de status */ html.app-nativo #suporte-raiz .sup-painel{top:calc(var(--app-status,env(safe-area-inset-top)) + 8px);left:0;right:0;bottom:0;width:auto;border-radius:22px 22px 0 0;transform:translateY(40px)} html.app-nativo #suporte-raiz.aberto .sup-painel{transform:none} html.app-nativo .sup-compor{padding-bottom:max(12px,env(safe-area-inset-bottom))} /* Convivência com o cartão global de aprovação (web/aprovacoes.js, #aprov-raiz, canto de baixo à direita): com a conversa aberta, no computador ele fica à esquerda da folha (senão cobre o botão Enviar); no celular e no app, logo acima do campo de texto. */ @media (min-width:641px){body.suporte-aberto #aprov-raiz{right:calc(min(480px,100vw - 24px) + 28px)}} @media (max-width:640px){body.suporte-aberto #aprov-raiz{bottom:calc(env(safe-area-inset-bottom) + 84px)}} html.app-nativo body.suporte-aberto #aprov-raiz{bottom:calc(env(safe-area-inset-bottom) + 84px)} /* escuro, contraste, transparência, movimento */ body.dark .sup-assistente .sup-bolha,body.dark .sup-historico li button,body.dark .sup-compor textarea,body.dark .sup-pin input{background:var(--surface2,#F7F3EE)} body.dark .sup-cartao{box-shadow:var(--vidro-brilho),0 6px 18px color-mix(in srgb,var(--page,#F7F5F1) 40%,transparent)} @media (prefers-reduced-transparency:reduce){#suporte-raiz .sup-painel{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--vidro-solido,var(--surface,#FFFFFF))}.sup-cartao{background:var(--surface,#FFFFFF)}} @media (prefers-contrast:more){.sup-assistente .sup-bolha,.sup-cartao{box-shadow:inset 0 0 0 1.5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent))}} @media (prefers-reduced-motion:reduce){#suporte-raiz .sup-painel,#suporte-raiz .sup-veu{transition:none}.sup-pontos i,.sup-roda,.sup-mic.gravando{animation:none}} /* 1.66.0 (onda H): o Cérebro no lugar do microfone (a mesma esfera animada do Cérebro do sistema, .aiorb2 do index.html) */ #suporte-raiz .sup-cerebro{background:transparent;padding:0;overflow:visible} #suporte-raiz .sup-cerebro .aiorb2.grande{width:40px;height:40px} #suporte-raiz .sup-cerebro.gravando{background:transparent;animation:none} #suporte-raiz .sup-cerebro.gravando .aiorb2.grande{animation-duration:1.2s;box-shadow:0 0 0 2px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 35%,transparent),0 0 26px 8px color-mix(in srgb,var(--queda,#E21D3C) 55%,transparent)} #suporte-raiz .sup-marca-cerebro{flex:none;display:grid;place-items:center;width:34px;height:34px;margin-right:2px} #suporte-raiz .sup-marca-cerebro .aiorb2{width:30px;height:30px} /* 1.69.1: o ícone do Cérebro é o mesmo do sistema (o cérebro da marca, .philippe-brain do philippe-orb.css), e o Cérebro ouve DENTRO da janela do suporte: a fala aparece no campo daqui e nada do Cérebro acende por trás (barra, brilho, desfoque). */ #suporte-raiz .sup-cerebro .sup-cerebro-icone{width:34px;height:38px} #suporte-raiz .sup-marca-cerebro .philippe-brain{width:28px;height:31px} #suporte-raiz .sup-cerebro.gravando .sup-cerebro-icone img{animation:sup-cerebro-ouve 1.2s ease-in-out infinite;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--d-amarelo,#F2B000) 95%,transparent)) drop-shadow(0 0 8px color-mix(in srgb,var(--queda,#E21D3C) 55%,transparent))} @keyframes sup-cerebro-ouve{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}} #suporte-raiz.sup-ouvindo #sup-texto{box-shadow:0 0 0 2px var(--queda,#E21D3C) inset} body.cerebro-no-suporte #aiz,body.cerebro-no-suporte #aifloat,body.cerebro-no-suporte #aikdsbar,body.cerebro-no-suporte .aiframe,body.cerebro-no-suporte .siriorb{visibility:hidden!important;opacity:0!important} html:not(.app-nativo) body.cerebro-no-suporte.ai-on{padding-top:var(--topo-reserva)} /* o modo de conversa do Cérebro (ws-hero-mode) esconde o topo; ouvindo no Suporte, a tela por trás fica como estava */ html:not(.app-nativo) body.cerebro-no-suporte.ws-hero-mode header.top{display:grid!important} /* e o logo do topo não vira o cérebro aceso: quem mostra que está ouvindo é o microfone do Suporte */ body.cerebro-no-suporte.ai-on #aibtn>.philippe-brain{display:none!important} body.cerebro-no-suporte.ai-on .top .brand img.lday,body.cerebro-no-suporte.ai-on .top .brand img.lnight{opacity:1;transform:none;animation:none;filter:none} html:not(.app-nativo) body.cerebro-no-suporte.ai-on header.top>#aibtn{background:var(--topo-vidro,color-mix(in srgb,var(--surface,#FFFFFF) 62%,transparent));box-shadow:var(--vidro-brilho),0 1px 2px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 8%,transparent),0 4px 14px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 12%,transparent)} body.cerebro-no-suporte.ai-on main,body.cerebro-no-suporte.ai-on .top{transform:none!important;filter:none!important} body.cerebro-no-suporte.ai-on::before,body.cerebro-no-suporte.ai-on::after{opacity:0!important;visibility:hidden!important} @media (prefers-reduced-motion:reduce){#suporte-raiz .sup-cerebro.gravando .sup-cerebro-icone img{animation:none}} /* /atualizacoes.css */ /* 1.64.0: ATUALIZAÇÕES (web/atualizacoes.js). Painel de vidro do gestor, selo vermelho do iPhone e o cartão "O Hub foi atualizado". Tokens do Hub (vidro grosso para texto denso, cores do sistema, --dt para o tamanho da letra), com valor reserva em todo var() para o arquivo funcionar mesmo antes do bloco de vidro carregar. Respeita Reduzir Transparência, Aumentar Contraste e Reduzir Movimento. */ /* ---------- selo do iPhone: círculo vermelho #FF3B30, número branco, anel da cor do fundo ---------- */ .hub-selo{display:inline-grid;place-items:center;box-sizing:border-box;min-width:calc(20px * var(--dt,1));height:calc(20px * var(--dt,1));padding:0 6px;border-radius:999px;background:var(--queda,#E21D3C);color:var(--acao-txt,#FFFFFF);font-weight:700;font-size:max(0.6875rem, calc(0.75rem * var(--dt,1)));line-height:1;font-variant-numeric:tabular-nums;letter-spacing:0;box-shadow:0 0 0 2px var(--page,#F7F5F1);vertical-align:middle;margin-left:6px;animation:atu-selo-entra var(--dur-lenta,.32s) var(--curva-mola,cubic-bezier(.2,.8,.2,1))} @keyframes atu-selo-entra{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}} /* No programa do Windows, com versão nova para ESTE computador: o menu, a aba Configurações e o botão que abre as Configurações do programa ganham o selo (a classe vem de web/atualizacoes.js, pelo window.desktop). */ html.hub-atualizacao-nova #menubtn{position:relative} html.hub-atualizacao-nova #menubtn::after,html.hub-atualizacao-nova #seg button[data-view="cfg"]::after,html.hub-atualizacao-nova #menudd button[data-view="cfg"]::after,html.hub-atualizacao-nova [data-native-config]::after{ content:"1";display:inline-grid;place-items:center;box-sizing:border-box;min-width:calc(18px * var(--dt,1));height:calc(18px * var(--dt,1));padding:0 5px;border-radius:999px;background:var(--queda,#E21D3C);color:var(--acao-txt,#FFFFFF);font-weight:700;font-size:max(0.6875rem, calc(0.6875rem * var(--dt,1)));line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--page,#F7F5F1);margin-left:6px;vertical-align:middle} html.hub-atualizacao-nova #menubtn::after{position:absolute;top:2px;right:2px;margin:0;pointer-events:none} /* ---------- painel ---------- */ #atu-raiz{position:fixed;inset:0;z-index:1290;pointer-events:none} #atu-raiz[hidden]{display:none} #atu-raiz .atu-veu{position:absolute;inset:0;background:var(--vidro-veu,color-mix(in srgb,var(--label,#323200) 22%,transparent));opacity:0;transition:opacity var(--dur-lenta,.32s) var(--curva-padrao,ease);pointer-events:auto} #atu-raiz.aberto .atu-veu{opacity:1} #atu-raiz .atu-painel{position:absolute;top:12px;right:12px;bottom:12px;width:min(520px,calc(100vw - 24px));display:flex;flex-direction:column;overflow:hidden;pointer-events:auto; background:var(--vidro-grosso,color-mix(in srgb,var(--surface,#FFFFFF) 86%,transparent));-webkit-backdrop-filter:blur(var(--vidro-desfoque,24px)) saturate(var(--vidro-saturacao,180%));backdrop-filter:blur(var(--vidro-desfoque,24px)) saturate(var(--vidro-saturacao,180%)); border-radius:var(--r-sheet,20px);box-shadow:var(--vidro-brilho,inset 0 1px 0 color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 50%,transparent)),var(--vidro-sombra-alta,0 18px 46px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 20%,transparent));color:var(--label,#323200); transform:translateX(24px);opacity:0;transition:transform var(--dur-lenta,.32s) var(--curva-padrao,cubic-bezier(.2,.8,.2,1)),opacity var(--dur-media,.2s) ease} #atu-raiz.aberto .atu-painel{transform:none;opacity:1} body.atualizacoes-aberto{overflow:hidden} .atu-topo{flex:none;display:flex;align-items:flex-start;gap:4px;padding:14px 10px 10px 16px;border-bottom:.5px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .atu-titulos{flex:1;min-width:0} .atu-topo h2{margin:2px 0 0;font-size:calc(1.375rem * var(--dt,1));font-weight:700;letter-spacing:-.01em} .atu-sub{margin:3px 0 0;color:var(--label2,#6B5A4C);font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))));line-height:1.35} .atu-icone{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--label2,#6B5A4C);display:grid;place-items:center;cursor:pointer;transition:background var(--dur-rapida,.12s),transform var(--dur-rapida,.12s)} .atu-icone svg,.atu-botao svg,.atu-pc svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} @media (hover:hover){.atu-icone:hover{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))}} .atu-icone:active{transform:scale(var(--apertado-escala,.97));background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .atu-icone:focus-visible,.atu-botao:focus-visible,.atu-aviso-ok:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px} .atu-rolagem{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 14px 8px} .atu-cartao{padding:14px 16px;border-radius:var(--r-card,16px);background:var(--surface,#FFFFFF);box-shadow:inset 0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent));margin-bottom:14px} .atu-vazio b{display:block;font-size:calc(1rem * var(--dt,1))} .atu-vazio p{margin:6px 0 0;color:var(--label2,#6B5A4C);font-size:calc(0.9375rem * var(--dt,1));line-height:1.4} .atu-versao-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap} .atu-rotulo{display:block;color:var(--label2,#6B5A4C);font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))))} .atu-versao-topo strong{display:block;font-size:calc(1.75rem * var(--dt,1));font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .atu-data{color:var(--label2,#6B5A4C);font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))))} .atu-alerta{margin:10px 0 0;padding:8px 12px;border-radius:12px;background:color-mix(in srgb,var(--d-ambar,#C27A00) 16%,transparent);font-size:calc(0.875rem * var(--dt,1));line-height:1.4} .atu-novidades h3,.atu-aviso-cartao h3{margin:12px 0 2px;font-size:calc(1.0625rem * var(--dt,1));font-weight:600} .atu-resumo{margin:0 0 4px;font-size:calc(0.9375rem * var(--dt,1));line-height:1.4} .atu-novidades h4,.atu-aviso-novidades h4{margin:12px 0 4px;color:var(--label2,#6B5A4C);font-size:calc(0.875rem * var(--dt,1));font-weight:600} .atu-novidades ul,.atu-aviso-novidades ul{margin:0;padding-left:20px} .atu-novidades li,.atu-aviso-novidades li{margin:3px 0;font-size:calc(0.9375rem * var(--dt,1));line-height:1.4} .atu-detalhes{margin-top:6px} .atu-detalhes summary{display:flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;list-style:none;color:var(--acao,#1F5FD0);font-weight:600;font-size:calc(0.9375rem * var(--dt,1))} .atu-detalhes summary::-webkit-details-marker{display:none} .atu-detalhes summary::after{content:"›";font-size:calc(1.25rem * var(--dt,1));line-height:1;transition:transform var(--dur-rapida,.12s)} .atu-detalhes[open] summary::after{transform:rotate(90deg)} .atu-detalhes summary:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px;border-radius:8px} .atu-unidade{display:flex;align-items:center;gap:8px;margin:18px 4px 8px;font-size:calc(0.9375rem * var(--dt,1));font-weight:600;color:var(--label2,#6B5A4C);text-transform:none} .atu-unidade-conta{font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))));font-weight:600;color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .atu-lista{list-style:none;margin:0;padding:0;border-radius:var(--r-card,16px);background:var(--surface,#FFFFFF);box-shadow:inset 0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent));overflow:hidden} .atu-linha{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-top:.5px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .atu-linha:first-child{border-top:0} .atu-pc{position:relative;flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label2,#6B5A4C)} .atu-pc .hub-selo{position:absolute;top:-6px;right:-8px;margin:0;box-shadow:0 0 0 2px var(--surface,#FFFFFF)} .atu-pc-texto{flex:1;min-width:0} .atu-pc-nome{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:calc(1rem * var(--dt,1))} .atu-papel{padding:2px 8px;border-radius:999px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));font-weight:600;color:var(--label2,#6B5A4C)} .atu-pc-versao{margin-top:2px;color:var(--label2,#6B5A4C);font-size:calc(0.875rem * var(--dt,1));font-variant-numeric:tabular-nums} .atu-pc-como{margin-top:6px;font-size:calc(0.875rem * var(--dt,1));line-height:1.4} .atu-pc-extra{margin-top:4px;color:var(--label2,#6B5A4C);font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))));line-height:1.35} .atu-pc-status{flex:none;align-self:center} .atu-chip{display:inline-block;padding:4px 10px;border-radius:999px;font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))));font-weight:600;white-space:nowrap} .atu-chip.verde{background:color-mix(in srgb,var(--verde,#11994A) 16%,transparent);color:var(--d-verdeagua-t,#006F5D)} .atu-chip.vermelho{background:color-mix(in srgb,var(--queda,#E21D3C) 14%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .atu-chip.cinza{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label2,#6B5A4C)} .atu-como-instalar{margin:16px 4px 6px;color:var(--label2,#6B5A4C);font-size:calc(0.875rem * var(--dt,1));line-height:1.45} .atu-carregando{display:flex;align-items:center;gap:10px;padding:24px 8px;color:var(--label2,#6B5A4C);font-size:calc(0.9375rem * var(--dt,1))} .atu-spin{width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;display:inline-block;flex:none;animation:atu-gira .7s linear infinite} @keyframes atu-gira{to{transform:rotate(360deg)}} .atu-rodape{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px 14px;border-top:.5px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} @media (min-width:641px){.atu-topo{padding-left:20px}.atu-rodape{padding-left:20px;padding-right:20px}} /* 1.72.0: 20 pt de margem no iPad */ .atu-status{margin:0;flex:1;min-width:0;color:var(--label2,#6B5A4C);font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))));line-height:1.35} .atu-status[data-tipo=erro]{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200));font-weight:600} .atu-status[data-tipo=ok]{color:var(--d-verdeagua-t,#006F5D)} /* Botão com estado: apertado encolhe, carregando com a frase, verde ou vermelho no fim. */ .atu-botao{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:var(--r-pill,999px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label,#323200);font-weight:600;font-size:calc(0.9375rem * var(--dt,1));cursor:pointer;transition:transform var(--dur-rapida,.12s),background var(--dur-rapida,.12s),color var(--dur-rapida,.12s)} .atu-botao:active{transform:scale(var(--apertado-escala,.97));background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .atu-botao[data-estado=carregando]{cursor:progress} .atu-botao[data-estado=ok]{background:color-mix(in srgb,var(--verde,#11994A) 80%,var(--label,#323200));color:var(--acao-txt,#FFFFFF)} .atu-botao[data-estado=erro]{background:var(--queda,#E21D3C);color:var(--acao-txt,#FFFFFF)} /* ---------- cartão depois de reiniciar ---------- */ #atu-aviso{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:16px} #atu-aviso .atu-aviso-veu{position:absolute;inset:0;background:var(--vidro-veu,color-mix(in srgb,var(--label,#323200) 28%,transparent));opacity:0;transition:opacity var(--dur-lenta,.32s) ease} #atu-aviso.aberto .atu-aviso-veu{opacity:1} .atu-aviso-cartao{position:relative;box-sizing:border-box;width:min(520px,100%);max-height:calc(100vh - 32px);overflow-y:auto;padding:24px 24px 20px;border-radius:var(--r-sheet,24px);text-align:left;color:var(--label,#323200); background:var(--vidro-grosso,color-mix(in srgb,var(--surface,#FFFFFF) 86%,transparent));-webkit-backdrop-filter:blur(var(--vidro-desfoque,24px)) saturate(var(--vidro-saturacao,180%));backdrop-filter:blur(var(--vidro-desfoque,24px)) saturate(var(--vidro-saturacao,180%)); box-shadow:var(--vidro-brilho,inset 0 1px 0 color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 50%,transparent)),var(--vidro-sombra-alta,0 18px 46px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 22%,transparent));transform:scale(.94);opacity:0;transition:transform var(--dur-lenta,.32s) var(--curva-mola,cubic-bezier(.2,.8,.2,1)),opacity var(--dur-media,.2s) ease} #atu-aviso.aberto .atu-aviso-cartao{transform:none;opacity:1} .atu-aviso-marca{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin-bottom:10px;background:color-mix(in srgb,var(--verde,#11994A) 18%,transparent);color:var(--d-verdeagua-t,#006F5D);font-size:calc(1.625rem * var(--dt,1));font-weight:700} .atu-aviso-cartao h2{margin:0;font-size:calc(1.375rem * var(--dt,1));font-weight:700;letter-spacing:-.01em;line-height:1.2} .atu-aviso-texto{margin:8px 0 0;font-size:calc(1rem * var(--dt,1));line-height:1.45;color:var(--label,#323200)} .atu-aviso-novidades{margin-top:6px} .atu-aviso-ok{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;margin-top:20px;border:0;border-radius:14px;background:var(--acao,#1F5FD0);color:var(--acao-txt,#FFFFFF);font-weight:600;font-size:var(--f-headline,calc(1.0625rem * var(--dt,1)));cursor:pointer;transition:transform var(--dur-rapida,.12s),filter var(--dur-rapida,.12s)} .atu-aviso-ok:active{transform:scale(var(--apertado-escala,.97));filter:brightness(.9)} /* ---------- celular: a folha ocupa a tela ---------- */ @media (max-width:640px){#atu-raiz .atu-painel{top:0;right:0;bottom:0;width:100vw;border-radius:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}} @media (prefers-reduced-motion:reduce){#atu-raiz .atu-painel,.atu-aviso-cartao,.hub-selo,.atu-spin{transition:none;animation:none}} @media (prefers-reduced-transparency:reduce){#atu-raiz .atu-painel,.atu-aviso-cartao{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--vidro-solido,var(--surface,#FFFFFF))}} @media (prefers-contrast:more){.atu-lista,.atu-cartao,.atu-aviso-cartao{box-shadow:inset 0 0 0 1.5px light-dark(var(--label,#323200),var(--page,#F7F5F1))}} @media (forced-colors:active){.hub-selo,html.hub-atualizacao-nova #menubtn::after{forced-color-adjust:none}} /* 1.70.0 (auditoria): botão cheio com texto branco no tom --on-blue (o azul do sistema com branco dá 3,5:1) */ .atu-aviso-ok{background:var(--acao,#1F5FD0)} /* /negociacoes.css */ /* 1.64.1: NEGOCIAÇÕES E CANCELAMENTOS (web/negociacoes.js). Folha de vidro no padrão das telas da 1.64.0 (Atualizações, Usuários): tokens do Hub com valor reserva em todo var(), claro e escuro pelos mesmos tokens (body.dark), alvos de 44 px, foco visível. Computador largo (a partir de 1100 px): lista e ficha lado a lado. Mais estreito: a ficha desliza por cima da lista (a lista guarda a rolagem). iPhone (até 640 px): folha em tela cheia com a área segura. Respeita Reduzir Transparência, Aumentar Contraste e Reduzir Movimento. */ /* 1.64.3: A CENTRAL É UMA TELA DO HUB (#view-neg), em tela cheia, e a FICHA DO CASO é uma folha de 95% da altura (#neg-folha-raiz) que sobe com a mola do iOS e fecha só puxando para baixo (web/folha.js). A subida e a descida animam só transform (a folha) e opacity (o véu); will-change só enquanto anima (.animando) ou arrasta (inline). */ #neg-raiz.neg-tela{box-sizing:border-box;width:100%;padding:14px 18px 28px;color:var(--label,#323200)} #neg-raiz .neg-topo{padding:4px 0 12px;border-bottom:0} #neg-raiz .neg-topo h2{outline:none} /* os casos: uma coluna no celular, grade que usa a largura toda no computador */ #neg-raiz .neg-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:12px;align-items:start} #neg-raiz .neg-lista>.neg-vazio{grid-column:1/-1} @media (min-width:1100px){ #neg-raiz .neg-resumo{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr);gap:10px;align-items:stretch} #neg-raiz .neg-resumo>.neg-tiles{margin:0} #neg-raiz .neg-resumo>.neg-nota{grid-column:1/-1} #neg-raiz .neg-tiles.contas{grid-template-columns:repeat(5,minmax(0,1fr))} #neg-raiz .neg-filtros{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(260px,360px);gap:10px;align-items:start} #neg-raiz .neg-filtros>.neg-datas{grid-column:1/-1} } #neg-raiz .neg-abas{position:static;margin:0 0 12px;padding:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border:0} @media (min-width:900px){#neg-raiz .neg-abas{max-width:720px}} /* ---------- a ficha: folha de 95% ---------- */ #neg-folha-raiz{position:fixed;inset:0;z-index:1260} body.neg-folha-aberta{overflow:hidden} #neg-folha-raiz[hidden]{display:none} .neg-folha-veu{position:absolute;inset:0;background:color-mix(in srgb,var(--label,#323200) 46%,transparent);opacity:0;transition:opacity var(--dur-folha,.38s) ease} body.dark .neg-folha-veu{background:color-mix(in srgb,var(--surface2,#F7F3EE) 60%,transparent)} #neg-folha-raiz.aberta .neg-folha-veu{opacity:var(--veu,1)} .neg-folha{--folha-topo:max(5dvh, calc(var(--app-status,env(safe-area-inset-top,0px)) + 8px)); position:absolute;left:0;right:0;bottom:0;margin:0 auto;top:var(--folha-topo);width:min(1180px,100%);box-sizing:border-box; display:flex;flex-direction:column;overflow:hidden;border-radius:22px 22px 0 0; background:var(--vidro-solido,var(--surface,#FFFFFF));color:var(--label,#323200);box-shadow:0 -10px 44px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 22%,transparent); transform:translate3d(0,100%,0);transition:transform var(--dur-folha,.38s) var(--curva-folha,cubic-bezier(.32,.72,0,1)); touch-action:pan-y;-webkit-backface-visibility:hidden;backface-visibility:hidden} body.dark .neg-folha{background:var(--vidro-solido,var(--surface2,#F7F3EE))} #neg-folha-raiz.aberta .neg-folha{transform:translate3d(0,0,0)} #neg-folha-raiz.animando .neg-folha{will-change:transform} #neg-folha-raiz.animando .neg-folha-veu{will-change:opacity} #neg-folha-raiz.hub-folha-arrastando .neg-folha-veu{transition:none} .neg-folha-alca{flex:none;display:flex;justify-content:center;align-items:center;height:22px;cursor:grab;touch-action:none} .neg-folha-alca span{width:40px;height:5px;border-radius:3px;background:var(--folha-alca,color-mix(in srgb,var(--label,#323200) 30%,transparent))} .neg-folha .neg-ficha-topo{cursor:grab;user-select:none;-webkit-user-select:none;padding-top:2px} #neg-folha-raiz.hub-folha-arrastando .neg-folha-alca,#neg-folha-raiz.hub-folha-arrastando .neg-ficha-topo{cursor:grabbing} .neg-folha-conteudo{flex:1 1 auto;min-height:0;display:flex;flex-direction:column} .neg-folha .neg-ficha-corpo{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))} .neg-folha .neg-ficha-rodape{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))} /* o botão de fechar que só o leitor de tela anuncia (VoiceOver, TalkBack) e o teclado alcança; ninguém vê */ .neg-so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} /* folha larga: a conversa e o pedido lado a lado */ @media (min-width:1000px){ .neg-folha .neg-ficha-corpo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:22px;align-content:start} .neg-folha .neg-ficha-corpo>.neg-marca,.neg-folha .neg-ficha-corpo>.neg-faixa,.neg-folha .neg-ficha-corpo>.neg-carregando,.neg-folha .neg-ficha-corpo>.neg-vazio{grid-column:1/-1} } /* ---------- topo, rolagem, rodapé ---------- */ .neg-topo,.neg-ficha-topo{flex:none;display:flex;align-items:flex-start;gap:4px;padding:14px 8px 10px 18px;border-bottom:.5px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .neg-ficha-topo{padding-left:8px} .neg-titulos{flex:1;min-width:0} .neg-topo h2{margin:2px 0 0;font-size:calc(1.375rem * var(--dt,1));font-weight:700;letter-spacing:-.01em;line-height:1.2} .neg-ficha-topo h3{margin:2px 0 0;font-size:calc(1.1875rem * var(--dt,1));font-weight:700;letter-spacing:-.01em;line-height:1.25;outline:none} .neg-sub{margin:3px 0 0;color:var(--label2,#6B5A4C);font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))));line-height:1.35} .neg-icone{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--label2,#6B5A4C);display:grid;place-items:center;cursor:pointer;transition:background var(--dur-rapida,.12s),transform var(--dur-rapida,.12s)} .neg-icone svg,.neg-voltar svg,.neg-busca-icone svg,.neg-ficha-vazia svg,.neg-chip.icone svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} @media (hover:hover){.neg-icone:hover,.neg-voltar:hover{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))}} .neg-icone:active,.neg-voltar:active,.neg-botao:active,.neg-card-botao:active{transform:scale(var(--apertado-escala,.97))} .neg-icone.girando svg{animation:neg-gira .8s linear infinite} .neg-voltar{flex:none;display:inline-flex;align-items:center;gap:2px;min-height:44px;min-width:44px;padding:0 10px 0 4px;border:0;border-radius:var(--r-pill,999px);background:transparent;color:var(--acao,#1F5FD0);font-weight:600;font-size:calc(1rem * var(--dt,1));cursor:pointer} #neg-raiz button:focus-visible,#neg-raiz select:focus-visible,#neg-raiz input:focus-visible,#neg-raiz [tabindex]:focus-visible,#neg-folha-raiz button:focus-visible,#neg-folha-raiz [tabindex]:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px} .neg-rolagem,.neg-ficha-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:12px 14px 16px} .neg-ficha-rodape{flex:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;padding:10px 14px 14px;border-top:.5px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .neg-botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:0;border-radius:var(--r-pill,999px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label,#323200);font-weight:600;font-size:max(0.6875rem, calc(0.9375rem * var(--dt,1)));cursor:pointer;transition:transform var(--dur-rapida,.12s),filter var(--dur-rapida,.12s)} .neg-botao.primario{background:var(--queda,#E21D3C);color:var(--acao-txt,#FFFFFF)} @media (hover:hover){.neg-botao.primario:hover{filter:brightness(.95)}} /* ---------- avisos, resumo ---------- */ .neg-alerta{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--d-ambar,#C27A00) 16%,transparent);font-size:calc(0.875rem * var(--dt,1));line-height:1.4} .neg-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:8px} .neg-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:44px;padding:10px 12px;border:0;border-radius:var(--r-card,14px);background:var(--surface,#FFFFFF);box-shadow:inset 0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent));color:var(--label,#323200);text-align:left;font:inherit;min-width:0} button.neg-tile{cursor:pointer;transition:transform var(--dur-rapida,.12s)} button.neg-tile:active{transform:scale(var(--apertado-escala,.97))} .neg-tile-rotulo{font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))));font-weight:600;color:var(--label2,#6B5A4C)} .neg-tile strong{font-size:calc(1.5rem * var(--dt,1));font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15;max-width:100%;overflow-wrap:anywhere} .neg-tiles.dinheiro strong{font-size:calc(1.125rem * var(--dt,1))} .neg-tile-extra{font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));color:var(--label2,#6B5A4C);line-height:1.3} .neg-tile.laranja strong{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} .neg-tile.azul strong{color:var(--acao,#1F5FD0)} .neg-tile.vermelho strong{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .neg-tile.verde strong{color:var(--d-verdeagua-t,#006F5D)} /* 1.64.2: todo cartão é um filtro. Ligado: contorno e fundo na cor do cartão e um ponto no canto. */ .neg-tile{position:relative;--tile-cor:var(--label2,#6B5A4C)} .neg-tile.laranja{--tile-cor:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))}.neg-tile.azul{--tile-cor:var(--acao,#1F5FD0)}.neg-tile.vermelho,.neg-tile.contra{--tile-cor:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .neg-tile.tag-debito{--tile-cor:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}.neg-tile.tag-credito{--tile-cor:var(--d-verdeagua-t,#006F5D)} /* 1.72.0: vermelho e verde fixos davam 2,5 e 3:1 no escuro */.neg-tile.mantida{--tile-cor:var(--d-verdeagua-t,#006F5D)} .neg-tile.on{box-shadow:inset 0 0 0 2.5px var(--tile-cor);background:color-mix(in srgb,var(--tile-cor) 11%,var(--surface,#FFFFFF))} .neg-tile.on::after{content:"";position:absolute;top:9px;right:9px;width:9px;height:9px;border-radius:50%;background:var(--tile-cor)} .neg-tile:focus-visible{outline:3px solid var(--acao,#1F5FD0);outline-offset:2px} .neg-tiles.contas strong{font-size:calc(1.125rem * var(--dt,1));color:var(--tile-cor)} .neg-tiles.contas .neg-tile-rotulo{padding:1px 8px;border-radius:999px;margin-left:-2px;max-width:calc(100% - 12px)} /* 1.64.2: o nome da marca numa linha só (antes "Debitado da / loja" quebrava em duas no cartão estreito) */ .neg-tiles.contas{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} .neg-tiles.contas .neg-tile-rotulo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))))} /* 1.72.0 (auditoria de design 1720): "Crédito para a loja" era cortado com reticências (131 px de texto numa caixa de 128) no computador. A etiqueta tem 6 px de respiro, o cartão 10, e os dois grupos só ficam lado a lado a partir de 1400 px, com mais largura para os cinco cartões de resultado; abaixo disso cada grupo usa a largura toda. */ .neg-tiles.contas .neg-tile{padding-left:10px;padding-right:10px} .neg-tiles.contas .neg-tile-rotulo{padding:1px 6px;max-width:100%} @media (min-width:1100px) and (max-width:1399px){#neg-raiz .neg-resumo{grid-template-columns:minmax(0,1fr)}} @media (min-width:1400px){#neg-raiz .neg-resumo{grid-template-columns:minmax(0,5fr) minmax(0,9fr)}} .neg-tile.tag-debito .neg-tile-rotulo{background:var(--queda,#E21D3C);color:var(--acao-txt,#FFFFFF)} .neg-tile.tag-credito .neg-tile-rotulo{background:color-mix(in srgb,var(--verde,#11994A) 80%,var(--label,#323200));color:var(--acao-txt,#FFFFFF)} .neg-tile.mantida .neg-tile-rotulo{box-shadow:inset 0 0 0 1.5px var(--d-verdeagua-t,#006F5D);color:var(--d-verdeagua-t,#006F5D)} .neg-tile.contra .neg-tile-rotulo{background:color-mix(in srgb,var(--queda,#E21D3C) 10%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .neg-tile.cinza .neg-tile-rotulo{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} .neg-nota{margin:2px 2px 12px;color:var(--label2,#6B5A4C);font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));line-height:1.4} /* ---------- filtros ---------- */ .neg-filtros{display:flex;flex-direction:column;gap:8px;margin:6px 0 10px} .neg-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:2px;border-radius:12px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} .neg-seg button{min-height:44px;border:0;border-radius:10px;background:transparent;color:var(--label,#323200);font-weight:600;font-size:calc(0.875rem * var(--dt,1));cursor:pointer;padding:0 4px} .neg-seg button.on{background:var(--surface,#FFFFFF);box-shadow:0 1px 3px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 12%,transparent)} .neg-datas,.neg-selects{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px} .neg-mais{border-radius:12px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} .neg-mais summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;cursor:pointer;list-style:none;font-weight:600;font-size:calc(0.875rem * var(--dt,1))} .neg-mais summary::-webkit-details-marker{display:none} .neg-mais summary::after{content:"›";margin-left:4px;font-size:calc(1.25rem * var(--dt,1));line-height:1;transition:transform var(--dur-rapida,.12s);color:var(--label2,#6B5A4C)} .neg-mais[open] summary::after{transform:rotate(90deg)} .neg-mais-ativos{margin-left:auto;color:var(--label2,#6B5A4C);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .neg-mais .neg-selects{padding:0 10px 10px} @media (min-width:641px){.neg-mais .neg-selects{grid-template-columns:repeat(3,minmax(0,1fr))}.neg-mais .neg-campo select{font-size:calc(0.9375rem * var(--dt,1));padding:0 8px}} .neg-datas label,.neg-campo{display:flex;flex-direction:column;gap:3px;min-width:0} .neg-datas span,.neg-campo span{font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));font-weight:600;color:var(--label2,#6B5A4C)} .neg-datas input,.neg-campo select,.neg-busca input{box-sizing:border-box;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:var(--surface,#FFFFFF);box-shadow:inset 0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent));color:var(--label,#323200);font:inherit;font-size:max(1rem, calc(0.9375rem * var(--dt,1)))} .neg-busca{position:relative;display:block} .neg-busca-icone{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--label2,#6B5A4C);display:grid;pointer-events:none} .neg-busca-icone svg{width:18px;height:18px} .neg-busca input{padding-left:40px} /* ---------- abas (quatro colunas: cabem no iPhone sem rolar para o lado) ---------- */ .neg-abas{position:sticky;top:-12px;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:0 -14px 10px;padding:8px 14px;background:var(--vidro-grosso,color-mix(in srgb,var(--surface,#FFFFFF) 92%,transparent));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)} .neg-abas button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;min-height:48px;padding:4px 2px;border:0;border-radius:12px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label,#323200);font-weight:600;font-size:calc(0.8125rem * var(--dt,1));line-height:1.2;cursor:pointer} .neg-abas button span:first-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .neg-abas button.on{background:var(--label,#323200);color:var(--page,#F7F5F1)} .neg-aba-conta{font-variant-numeric:tabular-nums;font-size:calc(0.9375rem * var(--dt,1));font-weight:700} /* ---------- cartões ---------- */ .neg-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .neg-card{border-radius:var(--r-card,16px);background:var(--surface,#FFFFFF);box-shadow:inset 0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent));overflow:hidden} .neg-card.pendente{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--d-ambar,#C27A00) 70%,transparent)} .neg-card.selecionado{box-shadow:inset 0 0 0 2px var(--acao,#1F5FD0)} .neg-card-botao{display:flex;flex-direction:column;gap:5px;width:100%;min-height:44px;padding:12px 14px;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer;transition:transform var(--dur-rapida,.12s),background var(--dur-rapida,.12s)} @media (hover:hover){.neg-card-botao:hover{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))}} .neg-card-topo{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:calc(0.875rem * var(--dt,1))} .neg-card-topo time{margin-left:auto;color:var(--label2,#6B5A4C);font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))));font-variant-numeric:tabular-nums} .neg-loja{color:var(--label2,#6B5A4C)} .neg-plat{display:inline-block;padding:2px 8px;border-radius:6px;font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));font-weight:700;letter-spacing:.01em} .neg-plat.ifood{background:var(--canal-ifood-fundo);color:var(--pal-branco)} .neg-plat.nine{background:var(--d-n99);color:var(--on-yellow-text)} .neg-card-titulo{display:flex;align-items:baseline;gap:8px;font-weight:600;font-size:calc(1rem * var(--dt,1));line-height:1.3} .neg-valor{margin-left:auto;flex:none;font-variant-numeric:tabular-nums;font-size:max(0.6875rem, calc(0.9375rem * var(--dt,1)));color:var(--label2,#6B5A4C)} .neg-valor.perdido{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .neg-valor.defendido{color:var(--d-verdeagua-t,#006F5D)} .neg-card-msg{color:var(--label2,#6B5A4C);font-size:calc(0.9375rem * var(--dt,1));line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere} .neg-card-cliente{color:var(--label2,#6B5A4C);font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))))} .neg-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px} .neg-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))));font-weight:600;line-height:1.3;max-width:100%;overflow-wrap:anywhere} .neg-chip.icone svg{width:15px;height:15px} .neg-chip b{font-variant-numeric:tabular-nums} .neg-chip.laranja{background:color-mix(in srgb,var(--d-ambar,#C27A00) 18%,transparent);color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} .neg-chip.verde{background:color-mix(in srgb,var(--verde,#11994A) 16%,transparent);color:var(--d-verdeagua-t,#006F5D)} .neg-chip.vermelho{background:color-mix(in srgb,var(--queda,#E21D3C) 16%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .neg-chip.vermelho-claro{background:color-mix(in srgb,var(--queda,#E21D3C) 9%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} body.dark .neg-chip.vermelho-claro{color:color-mix(in srgb,var(--queda,#E21D3C) 55%,var(--label,#323200))} /* 1.72.0: 4,1:1 no escuro */ .neg-chip.azul{background:color-mix(in srgb,var(--acao,#1F5FD0) 14%,transparent);color:var(--acao,#1F5FD0)} .neg-chip.roxo{background:color-mix(in srgb,var(--d-roxo,#9B30FF) 14%,transparent);color:color-mix(in srgb,var(--d-roxo-t,#7D20CB) 72%,var(--label,#323200))} .neg-chip.amarelo{background:color-mix(in srgb,var(--d-amarelo,#F2B000) 26%,transparent);color:var(--ink-yellow,var(--d-amarelo-t,#805A00))} .neg-chip.cinza{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label2,#6B5A4C)} /* 1.64.2: as marcas do Philippe são as mais fortes da tela: cheias, com ícone e primeiro. Recusa mantida (nada debitado) tem só o contorno verde; contra a loja sem marca, o vermelho claro. */ .neg-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 11px 4px 7px;border-radius:999px;font-size:max(0.6875rem, calc(0.875rem * var(--dt,1)));font-weight:700;line-height:1.25;color:var(--acao-txt,#FFFFFF);max-width:100%;overflow-wrap:anywhere} .neg-tag svg,.neg-marca svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .neg-tag b{font-variant-numeric:tabular-nums;margin-left:3px;padding-left:7px;border-left:1px solid color-mix(in srgb,var(--label,#323200) 50%,transparent)} .neg-tag.credito,.neg-marca.credito{background:var(--verde,#11994A)} .neg-tag.debito,.neg-marca.debito{background:var(--queda,#E21D3C)} .neg-chip.mantida{background:transparent;box-shadow:inset 0 0 0 1.5px var(--d-verdeagua-t,#006F5D);color:var(--d-verdeagua-t,#006F5D)} .neg-chip.contra{background:color-mix(in srgb,var(--queda,#E21D3C) 9%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .neg-card.tag-credito{box-shadow:inset 5px 0 0 var(--verde,#11994A),inset 0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent))} .neg-card.tag-debito{box-shadow:inset 5px 0 0 var(--queda,#E21D3C),inset 0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent))} .neg-card.tag-credito.selecionado{box-shadow:inset 5px 0 0 var(--verde,#11994A),inset 0 0 0 2px var(--acao,#1F5FD0)} .neg-card.tag-debito.selecionado{box-shadow:inset 5px 0 0 var(--queda,#E21D3C),inset 0 0 0 2px var(--acao,#1F5FD0)} .neg-marca{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px;padding:12px 14px;border-radius:14px;color:var(--acao-txt,#FFFFFF)} .neg-marca svg{width:24px;height:24px;margin-top:1px} .neg-marca b{display:block;font-size:calc(1.0625rem * var(--dt,1));line-height:1.3;font-variant-numeric:tabular-nums} .neg-marca p{margin:3px 0 0;font-size:calc(0.875rem * var(--dt,1));line-height:1.4} .neg-card-acoes{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:0 14px 12px} .neg-vazio{padding:18px 8px;color:var(--label2,#6B5A4C);font-size:max(0.6875rem, calc(0.9375rem * var(--dt,1)));line-height:1.4} .neg-vazio b{display:block;color:var(--label,#323200);font-size:max(0.6875rem, calc(1rem * var(--dt,1)))} .neg-vazio p{margin:4px 0 0} .neg-vazio.erro b{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .neg-carregando{display:flex;align-items:center;gap:10px;padding:24px 8px;color:var(--label2,#6B5A4C);font-size:calc(0.9375rem * var(--dt,1))} .neg-spin{width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;display:inline-block;flex:none;animation:neg-gira .7s linear infinite} @keyframes neg-gira{to{transform:rotate(360deg)}} /* ---------- ficha ---------- */ .neg-ficha-vazia{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:40px;text-align:center;color:var(--label2,#6B5A4C);font-size:calc(0.9375rem * var(--dt,1));line-height:1.45} .neg-ficha-vazia svg{width:40px;height:40px} .neg-ficha-vazia p{max-width:34ch;margin:0} .neg-faixa{margin:0 0 14px;padding:10px 12px;border-radius:12px;font-size:calc(0.9375rem * var(--dt,1));line-height:1.4} .neg-faixa.pendente{background:color-mix(in srgb,var(--d-ambar,#C27A00) 16%,transparent)} .neg-faixa.verde{background:color-mix(in srgb,var(--verde,#11994A) 14%,transparent)} .neg-faixa.vermelho{background:color-mix(in srgb,var(--queda,#E21D3C) 13%,transparent)} .neg-faixa.cinza{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} .neg-faixa-notas{margin:6px 0 0;padding-left:18px;font-size:calc(0.875rem * var(--dt,1));line-height:1.4} .neg-faixa-notas li{margin:2px 0} .neg-secao{margin-bottom:18px} .neg-secao h4{margin:0 0 10px;font-size:calc(0.8125rem * var(--dt,1));font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--label2,#6B5A4C)} .neg-conversa{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .neg-msg{display:flex} .neg-msg .neg-bolha{box-sizing:border-box;max-width:min(88%,560px);padding:10px 12px;border-radius:16px;background:var(--surface,#FFFFFF);box-shadow:inset 0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent));min-width:0} .neg-msg.cliente .neg-bolha{border-top-left-radius:6px;background:var(--surface,#FFFFFF)} .neg-msg.ia .neg-bolha{border-top-left-radius:6px;background:color-mix(in srgb,var(--d-roxo,#9B30FF) 10%,var(--surface,#FFFFFF))} .neg-msg.loja{justify-content:flex-end} .neg-msg.loja .neg-bolha{border-top-right-radius:6px;background:color-mix(in srgb,var(--acao,#1F5FD0) 13%,var(--surface,#FFFFFF))} .neg-msg.plataforma,.neg-msg.cancelamento,.neg-msg.sistema{justify-content:center} .neg-msg.plataforma .neg-bolha{max-width:min(96%,620px);background:color-mix(in srgb,var(--d-amarelo,#F2B000) 14%,var(--surface,#FFFFFF))} .neg-msg.cancelamento .neg-bolha{max-width:min(96%,620px);background:color-mix(in srgb,var(--queda,#E21D3C) 11%,var(--surface,#FFFFFF))} .neg-msg.sistema .neg-bolha{max-width:min(96%,620px);background:transparent;box-shadow:none;border:1px dashed var(--label3,#9C8D80)} .neg-msg-topo{display:flex;align-items:center;gap:8px;margin-bottom:2px} .neg-msg-lado{font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--label2,#6B5A4C)} .neg-msg-topo time{margin-left:auto;color:var(--label2,#6B5A4C);font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));font-variant-numeric:tabular-nums} .neg-msg-titulo{display:block;font-size:calc(0.9375rem * var(--dt,1));line-height:1.35} .neg-msg-quem{display:block;margin-top:2px;color:var(--acao,#1F5FD0);font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))));font-weight:600} .neg-msg-texto,.neg-msg-texto2{margin:6px 0 0;font-size:calc(0.9375rem * var(--dt,1));line-height:1.45;overflow-wrap:anywhere;white-space:pre-line} .neg-msg-texto2{color:var(--label2,#6B5A4C);font-size:calc(0.875rem * var(--dt,1))} .neg-msg-detalhes{margin:8px 0 0;padding-left:18px;color:var(--label2,#6B5A4C);font-size:calc(0.875rem * var(--dt,1));line-height:1.4} .neg-msg-detalhes li{margin:2px 0} /* miniaturas: o botão [data-foto] vem de HubFotos.grade (web/acoes-cliente.js); aqui só o tamanho no balão */ .neg-bolha .fotos-cliente{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .neg-bolha .fotos-cliente .foto-mini{width:84px;height:84px;min-width:44px;min-height:44px} .neg-dados{margin:0;border-radius:var(--r-card,16px);background:var(--surface,#FFFFFF);box-shadow:inset 0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent));overflow:hidden} .neg-linha{display:grid;grid-template-columns:minmax(96px,30%) 1fr;gap:10px;padding:10px 14px;border-top:.5px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .neg-linha:first-child{border-top:0} .neg-linha dt{color:var(--label2,#6B5A4C);font-size:calc(0.875rem * var(--dt,1));font-weight:600} .neg-linha dd{margin:0;font-size:calc(0.9375rem * var(--dt,1));line-height:1.4;min-width:0;overflow-wrap:anywhere} .neg-leve{color:var(--label2,#6B5A4C)} .neg-itens{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .neg-itens li{display:flex;flex-direction:column} .neg-itens li span{color:var(--label2,#6B5A4C);font-size:calc(0.875rem * var(--dt,1))} .neg-itens .neg-obs{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200));font-weight:600} .neg-valores{display:flex;flex-wrap:wrap;gap:4px 14px;font-variant-numeric:tabular-nums} .neg-total{font-weight:700} .neg-horarios{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:4px 12px} .neg-horarios li{display:flex;flex-direction:column;font-size:calc(0.875rem * var(--dt,1))} .neg-horarios li span{color:var(--label2,#6B5A4C);font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))))} .neg-horarios time{font-variant-numeric:tabular-nums} /* 1.72.0 (pente fino): rótulo, número e nota de cada cartão na MESMA linha de base dos vizinhos. No celular "Pendentes agora" quebra em duas linhas e o 0 dele descia abaixo dos outros; com subgrid as três linhas do cartão são as da fileira */ .neg-tiles>.neg-tile{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:2px;align-content:start;justify-items:start} /* ---------- selo do item de menu ---------- */ #menudd [data-view="neg"] .neg-selo,#seg [data-view="neg"] .neg-selo{margin-left:6px} nav.gaveta [data-gvtela="neg"] .neg-selo{margin-left:auto;flex:none} /* ---------- celular ---------- */ @media (max-width:640px){ #neg-raiz.neg-tela{padding:10px 12px 20px} .neg-tiles{gap:6px} .neg-tile{padding:8px 12px} .neg-tile strong{font-size:var(--f-title3,calc(1.25rem * var(--dt,1)))} /* 1.72.0: 21 px ficava fora da escala da Apple */ .neg-tiles.dinheiro strong,.neg-tiles.contas strong{font-size:calc(0.9375rem * var(--dt,1))} .neg-linha{grid-template-columns:1fr;gap:2px} .neg-msg .neg-bolha{max-width:94%} .neg-ficha-rodape .neg-botao{flex:1 1 auto} } @media (prefers-reduced-motion:reduce){.neg-folha,.neg-folha-veu,.neg-spin,.neg-icone.girando svg{transition:none;animation:none}} @media (prefers-reduced-transparency:reduce){#neg-raiz .neg-painel,.neg-abas{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--vidro-solido,var(--surface,#FFFFFF))}} @media (prefers-contrast:more){.neg-card,.neg-tile,.neg-dados,.neg-msg .neg-bolha{box-shadow:inset 0 0 0 1.5px light-dark(var(--label,#323200),var(--page,#F7F5F1))}} @media (forced-colors:active){.neg-plat,.neg-chip,.neg-tag,.neg-marca,.neg-tile-rotulo{forced-color-adjust:none}.neg-tile.on{outline:3px solid Highlight}} /* ---------- 1.66.0 (onda G): computador pensado para o clique ---------- Philippe (28/09/2026): "Essa tela tbm tem que passar por uma revisão de design. Os botões e filtros não estão alinhados corretamente." Medido na 1.65.0 a 1440 px: o período tinha 52 px de altura (44 + o respiro de 4 em cima e embaixo), o "Loja, plataforma e resultado" 44 px fechado e 116 px aberto, a busca 44 px, e as abas 48 px em outra largura; nada começava nem terminava na mesma linha. Agora, a partir de 1100 px: - UMA linha de ferramentas: período (controle segmentado) | loja | plataforma | resultado | busca (encostada à direita); os filtros ficam à vista (o abre-e-fecha é o jeito do celular), cada um com o nome dentro do próprio controle; - todos os controles com a MESMA altura (--neg-ctl: 36 px com mouse, 44 px no toque), o mesmo raio e 10 px entre eles; - as abas (Todos, Pendentes, Respondidas, Cancelados) viram um controle segmentado da mesma altura e com o mesmo respiro de 4 px da 1.65.0, alinhado à esquerda, logo abaixo; - a ficha do caso ganha o X no canto superior direito (web/negociacoes.js; topo-vidro.css esconde no celular). */ #neg-raiz{--neg-ctl:36px;--neg-gap:10px} html.hub-toque #neg-raiz{--neg-ctl:44px} @media (min-width:1100px){ #neg-raiz .neg-filtros.neg-filtros-linha{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--neg-gap);margin:4px 0 12px} #neg-raiz .neg-filtros-linha>.neg-seg{flex:none;display:inline-grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(72px,auto);height:calc(var(--neg-ctl) + 2 * var(--seg-respiro,4px));min-height:0;box-sizing:border-box} #neg-raiz .neg-filtros-linha>.neg-seg button{min-height:0;height:var(--neg-ctl);padding:0 14px;font-size:var(--f-subhead,0.9375rem)} #neg-raiz .neg-filtros-linha>.neg-datas{flex:none;display:flex} #neg-raiz .neg-filtros-linha>.neg-datas>*{min-height:calc(var(--neg-ctl) + 2 * var(--seg-respiro,4px))} #neg-raiz .neg-selects-linha{display:flex;flex-wrap:nowrap;gap:var(--neg-gap);padding:0;align-items:center} #neg-raiz .neg-selects-linha .neg-campo{flex-direction:row;align-items:center;gap:0;height:calc(var(--neg-ctl) + 2 * var(--seg-respiro,4px));box-sizing:border-box;padding:0 4px 0 12px;border-radius:var(--seg-raio,14px); background:var(--surface,#FFFFFF);box-shadow:inset 0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent))} #neg-raiz .neg-selects-linha .neg-campo>span{flex:none;font-size:var(--f-footnote,0.8125rem);font-weight:600;color:var(--label2,#6B5A4C);white-space:nowrap} #neg-raiz .neg-selects-linha .neg-campo select{min-height:0;height:var(--neg-ctl);width:auto;min-width:0;max-width:200px;background:transparent;box-shadow:none;padding:0 6px;font-size:var(--f-subhead,0.9375rem);font-weight:600;cursor:pointer} #neg-raiz .neg-filtros-linha>.neg-busca{flex:1 1 220px;max-width:360px;margin-left:auto} #neg-raiz .neg-filtros-linha>.neg-busca input{min-height:0;height:calc(var(--neg-ctl) + 2 * var(--seg-respiro,4px));border-radius:var(--seg-raio,14px);font-size:var(--f-subhead,0.9375rem)} #neg-raiz .neg-abas{display:inline-grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(120px,auto);gap:var(--seg-respiro,4px);padding:var(--seg-respiro,4px);margin:0 0 14px;border-radius:var(--seg-raio,14px); background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));max-width:none} #neg-raiz .neg-abas button{flex-direction:row;gap:8px;min-height:0;height:var(--neg-ctl);padding:0 16px;border-radius:calc(var(--seg-raio,14px) - var(--seg-respiro,4px));background:transparent;font-size:var(--f-subhead,0.9375rem)} #neg-raiz .neg-abas button.on{background:var(--surface,#FFFFFF);color:var(--label,#323200);box-shadow:0 1px 3px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 12%,transparent)} body.dark #neg-raiz .neg-abas button.on{background:var(--surface2,#F7F3EE);box-shadow:0 1px 3px color-mix(in srgb,var(--page,#F7F5F1) 50%,transparent)} #neg-raiz .neg-aba-conta{font-size:var(--f-footnote,0.8125rem);min-width:22px;padding:1px 7px;border-radius:999px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));text-align:center;box-sizing:border-box} #neg-raiz .neg-abas button.on .neg-aba-conta{background:color-mix(in srgb,var(--label,#323200) 12%,transparent)} #neg-raiz .neg-topo{align-items:center} } /* mouse: hover nos controles da tela e nos cartões de resumo (no toque não há hover) */ html.hub-clique #neg-raiz .neg-seg button:not(.on):hover,html.hub-clique #neg-raiz .neg-abas button:not(.on):hover{background:color-mix(in srgb,var(--surface,#FFFFFF) 60%,transparent)} html.hub-clique #neg-raiz button.neg-tile:hover{box-shadow:inset 0 0 0 1px var(--tile-cor)} html.hub-clique #neg-raiz .neg-selects-linha .neg-campo:hover{box-shadow:inset 0 0 0 1px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent))} /* o X da ficha no computador: botão redondo de 32 px no canto superior direito, com hover; o cabeçalho continua puxável */ .neg-ficha-x{flex:none;width:32px;height:32px;margin:0 6px 0 auto;align-self:flex-start;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label,#323200);cursor:pointer} .neg-ficha-x svg{width:18px;height:18px} html.hub-clique .neg-ficha-x:hover{background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent))} html.hub-toque .neg-ficha-x{width:44px;height:44px} .neg-folha .neg-ficha-topo{padding-right:12px} /* no computador a alça não aparece (ela é o sinal de arrastar do toque); o cabeçalho continua puxável com o mouse, como extra */ html:not(.hub-folha-celular) .neg-folha-alca{height:10px} html:not(.hub-folha-celular) .neg-folha-alca span{display:none} /* 1.68.2: chamado em tratativa por outra pessoa */ .neg-tratativa{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200));font-weight:600} body.dark .neg-tratativa{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} /* /relatorios.css */ /* 1.65.0: TELA DE RELATÓRIOS (web/relatorios.js). Tokens do Hub com valor reserva em todo var(), claro e escuro pelos mesmos tokens (body.dark), alvos de 44 px, foco visível, vidro nas peças de controle e superfície sólida nos cartões dos números e dos gráficos (a paleta dos gráficos foi validada contra #FFFFFF e #22201E). Computador largo: lista de relatórios à esquerda e o relatório usando a largura toda (resumo, gráficos em duas colunas e depois o item por item; 1.66.0). iPhone: escolha do relatório num seletor nativo, área segura, lista vira cartões, gráficos um embaixo do outro. */ #view-rel{padding:0} .rel{--rel-bom:var(--verde,#11994A);--rel-ruim:var(--queda,#E21D3C);--rel-borda:var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;padding:0 16px 32px;color:var(--label,#323200);min-width:0} body.dark .rel{--rel-bom:var(--verde,#11994A);--rel-ruim:var(--queda,#E21D3C)} .rel.carregando .rel-main>section{opacity:.55;transition:opacity .2s} .rel button,.rel select,.rel input{font:inherit;color:inherit} .rel button:focus-visible,.rel select:focus-visible,.rel input:focus-visible,.rel [tabindex]:focus-visible,.rel summary:focus-visible,.rel-folha button:focus-visible,.rel-folha a:focus-visible,.rel-folha input:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px} .rel-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- lista dos relatórios ---------- 1.74.0 (Philippe, 04/10/2026, B1): a lista lateral saiu de cima dos cartões; as áreas e os relatórios aparecem na folha Relatório da barra de baixo (.rel-cel-nav), no celular e no computador. */ .rel-nav-area{margin-top:10px} .rel-nav-area h3{margin:0 8px 4px;font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--label2,#6B5A4C)} .rel-nav-item{display:flex;align-items:center;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:var(--r-ctl,12px);background:transparent;text-align:left;cursor:pointer;font-size:calc(0.90625rem * var(--dt,1));line-height:1.25;transition:background .12s} @media (hover:hover){.rel-nav-item:hover{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))}} .rel-nav-item.on{background:var(--acao,#1F5FD0);color:var(--acao-txt,#FFFFFF);font-weight:600} /* 1.72.0: o azul do sistema com letra branca dava 3,5:1 */ /* ---------- o cabeçalho do relatório, dentro do cartão Resumo ---------- */ .rel-main{min-width:0;display:flex;flex-direction:column;gap:14px} .rel-cabeca{display:flex;align-items:flex-start;gap:12px;justify-content:space-between} .rel-titulos{min-width:0} .rel-area{margin:0;font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))));font-weight:600;color:var(--label2,#6B5A4C)} .rel-cabeca h1{margin:2px 0 0;font-size:calc(1.25rem * var(--dt,1));font-weight:700;letter-spacing:-.01em;line-height:1.2;outline:none} /* 04/10/2026: é o título do cartão Resumo, não mais um título grande acima dos cartões */ .rel-sub{margin:4px 0 0;font-size:calc(0.875rem * var(--dt,1));font-weight:600} .rel-vs{font-weight:400;color:var(--label2,#6B5A4C)} .rel-desc{margin:4px 0 0;font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))));color:var(--label2,#6B5A4C);max-width:70ch} .rel-icone{width:44px;height:44px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:var(--glass-bg,color-mix(in srgb,var(--surface,#FFFFFF) 72%,transparent));box-shadow:var(--glass-shadow,0 8px 30px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 10%,transparent));cursor:pointer;color:var(--label2,#6B5A4C)} .rel-icone svg,.rel-botao svg,.rel-busca svg,.rel-opcao svg,.rel-delta svg,.rel-seta svg,.rel-linha-topo svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none} .rel-icone.girando svg{animation:rel-gira .8s linear infinite} @keyframes rel-gira{to{transform:rotate(360deg)}} .rel-botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:var(--r-pill,999px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));font-weight:600;cursor:pointer;font-size:calc(0.9375rem * var(--dt,1))} .rel-botao.primario{background:var(--acao,#1F5FD0);color:var(--acao-txt,#FFFFFF)} /* 1.72.0: o azul do sistema com letra branca dava 3,5:1 */ .rel-botao:disabled{opacity:.45;cursor:default} .rel-botao:active:not(:disabled),.rel-icone:active,.rel-chip:active,.rel-opcao:active{transform:scale(var(--apertado-escala,.97))} .rel-link{border:0;background:transparent;color:var(--acao,#1F5FD0);font-weight:600;cursor:pointer;min-height:44px;padding:0 6px} /* ---------- período e filtros (dentro das folhas da barra de baixo) ---------- */ /* o período é um trilho segmentado do Hub (respiro e raio pela regra única de web/index.html, 1.65.0) */ .rel-periodos{display:inline-flex;flex-wrap:wrap;align-self:flex-start;max-width:100%;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} .rel-chip{min-height:44px;padding:0 14px;border:0;background:transparent;color:var(--label2,#6B5A4C);cursor:pointer;font-weight:600;font-size:calc(0.875rem * var(--dt,1))} .rel-chip.on{background:var(--surface,#FFFFFF);color:var(--label,#323200);box-shadow:0 1px 3px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 16%,transparent)} body.dark .rel-chip.on{background:var(--surface2,#F7F3EE);box-shadow:0 1px 3px color-mix(in srgb,var(--page,#F7F5F1) 50%,transparent)} .rel-datas,.rel-selects{display:flex;flex-wrap:wrap;gap:10px} .rel-datas label{display:flex;flex-direction:column;gap:3px;font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));font-weight:600;color:var(--label2,#6B5A4C)} /* 1.70.2 (Philippe): filtros no padrão dos botões de menu da Apple: mais altos, cantos bem arredondados, fundo de preenchimento do sistema sem borda fina, rótulo pequeno em cima e o valor grande embaixo, seta própria. Rótulo e seletor ficam no fluxo para crescer juntos com texto ampliado. O label mantém a ativação do controle nativo. */ .rel-selects{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(13.125rem * var(--dt,1))),1fr));gap:10px} .rel-filtro{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;min-width:0;min-height:60px;border-radius:16px;background:var(--rel-fill);--rel-fill:color-mix(in srgb,var(--surface2,#F7F3EE) 12%,transparent)} body.dark .rel-filtro,html.dark .rel-filtro{--rel-fill:color-mix(in srgb,var(--surface2,#F7F3EE) 24%,transparent)} .rel-filtro>span{position:static;display:block;padding:9px 44px 0 16px;line-height:1.25;overflow-wrap:anywhere;pointer-events:none;font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));font-weight:600;letter-spacing:.01em;color:var(--label2,#6B5A4C)} .rel-filtro::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--label2,#6B5A4C);border-bottom:2px solid var(--label2,#6B5A4C);transform:rotate(45deg);pointer-events:none} .rel-filtro select{-webkit-appearance:none;appearance:none;display:block;width:100%;min-height:44px;margin:0;padding:4px 44px 8px 16px;border:0;border-radius:0 0 16px 16px;background:transparent;color:var(--label,#323200);font:inherit;font-size:calc(1.0625rem * var(--dt,1));font-weight:600;line-height:1.25;text-overflow:ellipsis;cursor:pointer;transition:background-color .2s,box-shadow .2s} @media (hover:hover){.rel-filtro select:hover{background:color-mix(in srgb,var(--label3,#9C8D80) 18%,transparent)}} .rel-filtro select:focus{outline:none} .rel-filtro select:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--acao,#1F5FD0) 28%,transparent)} @media (max-width:620px){ .dfilters[data-report-filters]{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(9.375rem * var(--dt,1))),1fr));width:100%;gap:8px} .dfilters[data-report-filters] .rel-filtro>span{padding:9px 32px 0 12px;line-height:1.25} .dfilters[data-report-filters] .rel-filtro select{min-height:44px;padding:4px 32px 8px 12px} .dfilters[data-report-filters] .rel-filtro::after{right:14px} } .rel-datas input{min-height:44px;padding:0 12px;border:.5px solid var(--rel-borda);border-radius:var(--r-ctl,12px);background:var(--surface,#FFFFFF);color:var(--label,#323200);font-size:calc(0.9375rem * var(--dt,1));min-width:160px;max-width:100%} .rel-avisos{display:flex;flex-direction:column;gap:6px} .rel-aviso,.rel-erro{margin:0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--d-ambar,#C27A00) 14%,transparent);font-size:calc(0.875rem * var(--dt,1));line-height:1.4} .rel-erro{background:color-mix(in srgb,var(--queda,#E21D3C) 14%,transparent)} /* ---------- resumo ---------- */ .rel-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px} .rel-tile{display:flex;flex-direction:column;gap:4px;padding:14px 14px 12px;border-radius:var(--r-card,16px);background:var(--surface,#FFFFFF);box-shadow:inset 0 0 0 .5px var(--rel-borda),0 1px 2px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 5%,transparent);min-width:0} .rel-tile-rotulo{font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))));color:var(--label2,#6B5A4C);font-weight:600} .rel-tile-valor{font-size:calc(1.625rem * var(--dt,1));font-weight:700;letter-spacing:-.02em;line-height:1.1;overflow-wrap:anywhere} .rel-tile-nota{font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));color:var(--label2,#6B5A4C)} .rel-delta{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));color:var(--label2,#6B5A4C)} .rel-delta svg{width:15px;height:15px} .rel-delta.bom b,.rel-delta.bom svg{color:var(--rel-bom)} .rel-delta.ruim b,.rel-delta.ruim svg{color:var(--rel-ruim)} .rel-antes{color:var(--label2,#6B5A4C)} /* ---------- item por item ---------- */ .rel-itens{padding:14px;border-radius:var(--r-card,16px);background:var(--surface,#FFFFFF);box-shadow:inset 0 0 0 .5px var(--rel-borda);min-width:0} .rel-itens-topo{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between} .rel-itens h2{margin:0;font-size:calc(1.125rem * var(--dt,1));font-weight:700} .rel-conta{font-weight:500;color:var(--label2,#6B5A4C);font-size:calc(0.875rem * var(--dt,1));margin-left:6px} /* 1.70.2 (Philippe): campo de busca do jeito da Apple. Um retângulo de cantos arredondados com o preenchimento do sistema, a lupa dentro, as etiquetas DENTRO do campo (como os tokens do campo de busca do iOS), sem contorno duplo: ao tocar, o fundo clareia e ganha um halo azul suave. Fica numa linha própria, abaixo do título da lista. */ .rel-busca{--rel-fill:color-mix(in srgb,var(--surface2,#F7F3EE) 12%,transparent);display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%;max-width:760px;box-sizing:border-box;min-height:48px;margin:12px 0 0;padding:8px 12px;border:1px solid transparent;border-radius:14px;background:var(--rel-fill);color:var(--label2,#6B5A4C);cursor:text;transition:background-color .2s,box-shadow .2s,border-color .2s} body.dark .rel-busca,html.dark .rel-busca{--rel-fill:color-mix(in srgb,var(--surface2,#F7F3EE) 24%,transparent)} .rel-busca:focus-within{background:var(--surface,#FFFFFF);border-color:color-mix(in srgb,var(--acao,#1F5FD0) 55%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--acao,#1F5FD0) 16%,transparent)} .rel-busca-lupa{display:inline-flex;align-items:center;justify-content:center;width:22px;height:34px;flex:none} .rel-busca-lupa svg{width:19px;height:19px} .rel-tokens{display:contents} .rel-busca input{-webkit-appearance:none;appearance:none;flex:1 1 160px;min-width:120px;min-height:34px;margin:0;padding:0 2px;border:0;background:transparent;outline:none;box-shadow:none;font:inherit;font-size:calc(1.0625rem * var(--dt,1));color:var(--label,#323200)} .rel-busca input:focus,.rel-busca input:focus-visible{outline:none;box-shadow:none} .rel-busca input::placeholder{color:var(--label2,#6B5A4C);opacity:1} .rel-busca input::-webkit-search-decoration,.rel-busca input::-webkit-search-results-decoration{-webkit-appearance:none} .rel-token{display:inline-flex;align-items:center;gap:5px;height:34px;max-width:100%;padding:0 9px 0 12px;border:0;border-radius:17px;background:color-mix(in srgb,var(--acao,#1F5FD0) 13%,transparent);color:var(--acao,#1F5FD0);font:inherit;font-size:calc(0.9375rem * var(--dt,1));font-weight:600;cursor:pointer;flex:none;transition:background-color .15s} .rel-token span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px} .rel-token svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;opacity:.8} @media (hover:hover){.rel-token:hover{background:color-mix(in srgb,var(--acao,#1F5FD0) 22%,transparent)}} body.dark .rel-token,html.dark .rel-token{background:color-mix(in srgb,var(--acao,#1F5FD0) 24%,transparent);color:var(--acao,#1F5FD0)} .rel-token:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--acao,#1F5FD0) 40%,transparent)} .rel-tag-limpar{display:inline-block;min-height:44px;margin:4px 0 0;padding:0 4px;border:0;background:transparent;color:var(--acao,#1F5FD0);font:inherit;font-size:calc(0.9375rem * var(--dt,1));font-weight:600;cursor:pointer} .rel-tag-limpar[hidden]{display:none} /* o "x" de limpar do campo no jeito do iOS: círculo cinza com o x branco */ .rel-busca input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin:0 2px 0 6px;border-radius:50%;background:var(--label2,#6B5A4C);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6 6l6 6M12 6l-6 6' stroke='currentColor' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/18px 18px no-repeat;cursor:pointer;opacity:.85} .rel-itens-lista{transition:opacity .15s} .rel-itens-lista>.rel-mostrando{margin-top:14px} .rel-itens-lista.buscando{opacity:.55} @media (pointer:coarse){.rel-token{height:38px;border-radius:19px}.rel-busca{min-height:52px}} .rel-mostrando{margin:8px 0 0;font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))));color:var(--label2,#6B5A4C)} .rel-tabela-caixa{margin-top:10px;overflow:auto;max-height:620px;border-radius:12px;box-shadow:inset 0 0 0 .5px var(--rel-borda)} .rel-tabela{width:100%;border-collapse:separate;border-spacing:0;font-size:calc(0.84375rem * var(--dt,1));font-variant-numeric:tabular-nums} .rel-tabela th{position:sticky;top:0;z-index:1;background:var(--surface2,#F7F3EE);text-align:left;font-weight:600;color:var(--label2,#6B5A4C);white-space:nowrap;border-bottom:.5px solid var(--rel-borda);padding:0} .rel-tabela th button{display:flex;align-items:center;gap:4px;width:100%;min-height:44px;padding:0 10px;border:0;background:transparent;cursor:pointer;font-weight:600;text-align:inherit;justify-content:inherit} .rel-tabela th.rel-num button{justify-content:flex-end} .rel-tabela th i{font-style:normal;min-width:10px} .rel-tabela td{height:44px;box-sizing:border-box;padding:9px 10px;border-bottom:.5px solid var(--rel-borda);white-space:nowrap;max-width:360px;overflow:hidden;text-overflow:ellipsis} .rel-tabela .rel-num{text-align:right} .rel-tabela tbody tr[data-rel-uid]{cursor:pointer} @media (hover:hover){.rel-tabela tbody tr[data-rel-uid]:hover td{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))}} .rel-tabela tfoot td{position:sticky;bottom:0;background:var(--surface2,#F7F3EE);font-weight:700;border-top:.5px solid var(--rel-borda)} .rel-seta{color:var(--label2,#6B5A4C);width:24px} .rel-cartoes{display:none;list-style:none;margin:10px 0 0;padding:0;gap:8px;flex-direction:column} .rel-linha{padding:12px;border-radius:12px;background:var(--surface2,#F7F3EE)} .rel-linha.abre{cursor:pointer} .rel-linha-topo{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:24px} .rel-linha dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;margin:8px 0 0} .rel-linha dt{font-size:var(--f-caption2,max(0.6875rem, calc(0.6875rem * var(--dt,1))));color:var(--label2,#6B5A4C)} .rel-linha dd{margin:0;font-size:calc(0.875rem * var(--dt,1));font-weight:600;overflow-wrap:anywhere} .rel-vazio-lista{margin:14px 0 4px;color:var(--label2,#6B5A4C)} .rel-paginas{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;flex-wrap:wrap} /* ---------- gráficos ---------- */ .rel-graficos{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:12px} .rel-grafico{margin:0;padding:14px;border-radius:var(--r-card,16px);background:var(--surface,#FFFFFF);box-shadow:inset 0 0 0 .5px var(--rel-borda);min-width:0} .rel-grafico figcaption{display:flex;flex-direction:column;gap:2px;margin-bottom:8px} .rel-grafico figcaption b{font-size:calc(0.9375rem * var(--dt,1))} .rel-grafico figcaption span{font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));color:var(--label2,#6B5A4C)} .rel-legenda{display:flex;flex-wrap:wrap;gap:6px 14px;list-style:none;margin:0 0 8px;padding:0;font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));color:var(--label2,#6B5A4C)} .rel-legenda li{display:inline-flex;align-items:center;gap:6px} .rel-legenda i.bloco{width:10px;height:10px;border-radius:3px;display:inline-block} .rel-legenda i.traco{width:16px;height:2px;border-radius:2px;display:inline-block} .rel-canvas{position:relative;width:100%} .rel-sem-grafico{margin:0;color:var(--label2,#6B5A4C);font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))))} .rel-numeros{margin-top:8px;font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))))} .rel-numeros summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--acao,#1F5FD0);font-weight:600} .rel-numeros-caixa{overflow-x:auto} .rel-numeros table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%} .rel-numeros th,.rel-numeros td{padding:5px 8px;border-bottom:.5px solid var(--rel-borda);text-align:right;white-space:nowrap} .rel-numeros th[scope=row],.rel-numeros thead th:first-child{text-align:left} .rel-fonte{margin:0;font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));color:var(--label2,#6B5A4C)} .rel-vazio,.rel-carregando{padding:28px 16px;text-align:center;color:var(--label2,#6B5A4C);display:flex;flex-direction:column;align-items:center;gap:10px} .rel-carregando{flex-direction:row;justify-content:center} /* 1.74.0 (Philippe, 04/10/2026, sexta fase, revisão final G1): com o catálogo dos relatórios ainda abrindo, ou com erro, o aviso era um texto solto sobre o fundo (o cartão de espera só existia depois de o catálogo chegar). É um cartão, com a moldura da casa, no lugar dos cartões, como o "Carregando" das telas de área. */ .rel>.rel-vazio,.rel>.rel-carregando{margin:0;border-radius:var(--r-sheet,1.25rem);background:var(--surface,#FFFFFF);box-shadow:inset 0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent)),0 1px 2px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 5%,transparent),0 6px 18px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 6%,transparent)} body.dark .rel>.rel-vazio,body.dark .rel>.rel-carregando{background:var(--surface,#FFFFFF);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--page,#F7F5F1) 16%,transparent),0 1px 2px color-mix(in srgb,var(--page,#F7F5F1) 30%,transparent),0 6px 18px color-mix(in srgb,var(--page,#F7F5F1) 32%,transparent)} .rel-giro{width:18px;height:18px;border-radius:50%;border:2px solid var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));border-top-color:var(--acao,#1F5FD0);animation:rel-gira .8s linear infinite} /* ---------- folhas (baixar, link, ficha) ---------- */ .rel-folha-fundo{position:fixed;inset:0;z-index:1400;background:var(--vidro-veu,color-mix(in srgb,var(--label,#323200) 22%,transparent));display:flex;align-items:center;justify-content:center;padding:16px} .rel-folha{width:min(520px,100%);max-height:calc(100vh - 32px);overflow-y:auto;border-radius:var(--r-sheet,20px);background:var(--glass-bg,color-mix(in srgb,var(--surface,#FFFFFF) 92%,transparent));-webkit-backdrop-filter:blur(var(--glass-blur,24px)) saturate(180%);backdrop-filter:blur(var(--glass-blur,24px)) saturate(180%);box-shadow:0 18px 46px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 24%,transparent);color:var(--label,#323200);padding:6px 20px 18px} /* 1.72.0: 20 pt de margem no iPad e no computador */ body.dark .rel-folha{background:color-mix(in srgb,var(--surface2,#F7F3EE) 94%,transparent)} .rel-folha-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px} .rel-folha-topo h2{margin:0;font-size:calc(1.25rem * var(--dt,1));font-weight:700} .rel-folha-topo .rel-icone{box-shadow:none;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} .rel-folha-sub{margin:6px 0 12px;font-size:calc(0.875rem * var(--dt,1));color:var(--label2,#6B5A4C);line-height:1.4} .rel-folha-nota{margin:12px 0 0;font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))));color:var(--label2,#6B5A4C)} .rel-folha-botoes{display:flex;flex-direction:column;gap:8px} .rel-opcao{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border:0;border-radius:14px;background:var(--surface,#FFFFFF);box-shadow:inset 0 0 0 .5px var(--rel-borda);text-align:left;cursor:pointer;color:inherit;text-decoration:none} .rel-opcao span{display:flex;flex-direction:column;gap:2px} .rel-opcao small{color:var(--label2,#6B5A4C);font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))))} .rel-opcao.ocupado{opacity:.6;pointer-events:none} .rel-check{display:flex;align-items:center;gap:10px;min-height:44px;margin-bottom:6px;font-weight:600} .rel-check input{width:22px;height:22px} .rel-check-nota{margin:0 0 10px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--d-ambar,#C27A00) 14%,transparent);font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))))} .rel-ficha{width:min(560px,100%)} .rel-ficha h3{margin:14px 0 6px;font-size:calc(0.875rem * var(--dt,1));color:var(--label2,#6B5A4C);text-transform:uppercase;letter-spacing:.04em} .rel-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:0} .rel-dl dt{font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));color:var(--label2,#6B5A4C)} .rel-dl dd{margin:0;font-weight:600;overflow-wrap:anywhere} .rel-lista{margin:0;padding-left:18px} /* ---------- larguras ---------- */ @media (max-width:759px){ .rel{padding:0 12px calc(28px + env(safe-area-inset-bottom,0px));gap:10px} .rel-desc{display:none} /* 1.69.1 (Philippe): no celular os períodos ficavam num trilho que rolava para o lado e escondia "Este mês", "Mês passado" e "Datas escolhidas". Agora é uma grade de três colunas, tudo à vista; "Datas escolhidas" ocupa a linha de baixo. */ .rel-periodos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-self:stretch;width:100%;box-sizing:border-box;overflow:visible} .rel-chip{min-width:0;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:calc(0.84375rem * var(--dt,1))} .rel-chip[data-rel-periodo="datas"]{grid-column:1/-1} .rel-selects{display:grid;grid-template-columns:minmax(0,1fr);gap:8px} .rel-filtro select{min-height:44px} .rel-datas input{width:100%;min-width:0} .rel-datas label{flex:1 1 140px} .rel-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .rel-tile{padding:12px} .rel-tile-valor{font-size:var(--f-title3,calc(1.25rem * var(--dt,1)))} .rel-tabela-caixa{display:none} .rel-cartoes{display:flex} .rel-busca{max-width:none} .rel-graficos{grid-template-columns:minmax(0,1fr)} .rel-folha-fundo{align-items:flex-end;padding:0} /* 1.72.0 (auditoria de design 1720): as alturas das folhas do sistema (web/folha.css): o diálogo tem o mínimo de uma folha média, a ficha é a folha grande de 95%; os botões ficam acima do indicador de início; a alça mostra que arrasta */ .rel-folha{width:100%;max-height:var(--folha-grande,92vh);min-height:var(--folha-media,50vh);box-sizing:border-box;padding-left:16px;padding-right:16px;border-radius:var(--r-sheet,20px) var(--r-sheet,20px) 0 0;padding-bottom:var(--folha-base,calc(18px + env(safe-area-inset-bottom,0px)))} .rel-folha.rel-ficha{height:var(--folha-grande,92vh)} .rel-folha::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:var(--folha-alca,color-mix(in srgb,var(--label,#323200) 30%,transparent));margin:4px auto 0} } /* no app, o corpo já tem a área segura de cima e a barra de abas embaixo (web/app-nativo.css); só o botão das lojas no topo pede espaço */ /* 1.70.0 (auditoria): em 375 px (iPhone SE e mini) o chip "Mês passado" virava "Mês passa…" (101 px de texto em 99). Um pouco menor só nessa largura, o suficiente para caber sem cortar. */ @media (max-width:389px){.rel-chip{font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));letter-spacing:-.01em}} @media (prefers-reduced-motion:reduce){.rel-icone.girando svg,.rel-giro{animation:none}} @media (prefers-reduced-transparency:reduce){.rel-folha{background:var(--surface,#FFFFFF);-webkit-backdrop-filter:none;backdrop-filter:none}} @media (forced-colors:active){.rel-chip.on,.rel-nav-item.on{outline:2px solid CanvasText}} /* ---------- impressão e PDF: só o relatório ---------- */ #rel-impressao{display:none} @media print{ body.rel-imprimindo > *:not(#rel-impressao){display:none!important} body.rel-imprimindo{background:var(--surface,#FFFFFF)!important} body.rel-imprimindo::before{display:none!important} #rel-impressao{display:block;color:var(--label,#323200);font:0.6875rem/1.35 system-ui,-apple-system,"Segoe UI",sans-serif} #rel-impressao h1{font-size:calc(1.125rem * var(--dt,1));margin:0 0 4px} #rel-impressao h2{font-size:calc(0.875rem * var(--dt,1));margin:14px 0 6px} #rel-impressao table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} #rel-impressao th,#rel-impressao td{border-bottom:1px solid var(--label3,#9C8D80);padding:3px 5px;text-align:left} #rel-impressao thead{display:table-header-group} #rel-impressao tr{break-inside:avoid} #rel-impressao .imp-resumo{width:auto;min-width:50%} #rel-impressao .imp-graficos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px} #rel-impressao figure{margin:0;break-inside:avoid} #rel-impressao figure img{width:100%} #rel-impressao .imp-fonte{color:var(--label2,#6B5A4C);margin-top:10px} #rel-impressao .imp-legenda{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:2px} #rel-impressao .imp-legenda i{display:inline-block;width:0;height:0;border:5px solid;border-radius:2px;margin-right:4px;vertical-align:middle} } /* conta pessoal sem a área "Painel e relatórios": a tela some do menu (a mesma regra de web/contas.css para as outras) */ body.sem-rel #seg [data-view="rel"],body.sem-rel .menudd [data-view="rel"]{display:none!important} /* Produto comercial: detalhe recolhido no cartão móvel, operação preservada. */ .rel-tabela-caixa:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:3px} .rel-row-details{border-top:.5px solid var(--rel-borda);margin-top:8px} .rel-row-details>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:var(--acao,#1F5FD0);font-size:calc(.875rem * var(--dt,1))} .rel-row-details>summary::before{content:"＋";margin-right:8px} .rel-row-details[open]>summary::before{content:"−"} .rel-row-details>summary:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px;border-radius:6px} /* Conferência da Frota: filtros centrais, mesma hierarquia do relatório. */ .rel-fleet-dialog{width:min(34rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);margin:auto;padding:0;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:28px;background:var(--surface,#FFFFFF);color:var(--label,#323200);box-shadow:0 24px 80px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 20%,transparent);font:inherit} .rel-fleet-dialog::backdrop{background:color-mix(in srgb,var(--label,#323200) 40%,transparent);backdrop-filter:blur(8px)} .rel-fleet-dialog form{display:flex;flex-direction:column;max-height:calc(100dvh - 2rem);margin:0} .rel-fleet-dialog .rel-folha-topo,.rel-fleet-actions{padding:22px 24px;flex:none} .rel-fleet-body{overflow:auto;overscroll-behavior:contain;min-height:0;padding:0 24px 8px} .rel-fleet-body p{font-size:var(--f-subhead,.9375rem);line-height:1.5;color:var(--label2,#6B5A4C)} .rel-fleet-hours{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0} .rel-fleet-dialog :is(input,select){min-width:0;width:100%;min-height:44px;border-radius:12px;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));padding:10px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label,#323200);font:inherit;box-sizing:border-box} .rel-fleet-actions{display:flex;justify-content:flex-end;gap:12px;border-top:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .rel-fleet-dialog .rel-fleet-feedback{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200));min-height:1.5em} .rel-fleet-filter{align-self:end;gap:12px}.rel-fleet-filter span{font-size:var(--f-footnote,.8125rem);color:var(--label2,#6B5A4C)} .rel-fleet-dialog :focus-visible{outline:3px solid var(--acao,#1F5FD0);outline-offset:3px} @media(max-width:380px){.rel-fleet-hours{grid-template-columns:1fr}.rel-fleet-actions,.rel-fleet-dialog .rel-folha-topo{padding:16px}.rel-fleet-body{padding-inline:16px}.rel-fleet-actions .rel-botao{flex:1;white-space:normal}} @media(prefers-reduced-motion:no-preference){.rel-fleet-dialog[open]{animation:rel-fleet-enter .2s ease-out}@keyframes rel-fleet-enter{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}} .rel-fleet-field{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0;align-content:start}.rel-fleet-field>span{font-size:var(--f-subhead,.9375rem);line-height:1.4;font-weight:600;color:var(--label,#323200)} .rel-fleet-explanation details{border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:18px;background:var(--surface,#FFFFFF);padding:0 16px}.rel-fleet-explanation summary{min-height:44px;display:list-item;align-content:center;cursor:pointer;font-weight:600;font-size:var(--f-subhead,.9375rem);line-height:1.4;padding-block:12px}.rel-fleet-explanation details p{font-size:var(--f-footnote,.8125rem);line-height:1.5;color:var(--label2,#6B5A4C);margin:0 0 14px}.rel-fleet-explanation summary:focus-visible{outline:3px solid var(--acao,#1F5FD0);outline-offset:3px} /* ---------- 1.74.0: celular, conteúdo primeiro (web/barra-folha.js + carrossel de Resumo, gráficos e Item por item) ---------- */ /* .rel-cel marca a tela montada no celular/app: as partes do relatório viram um carrossel, um cartão por tela. 04/10/2026: as fichas do topo saíram (B1): o período e os filtros estão na barra de baixo, e o rótulo do item diz o escolhido. */ .rel.rel-cel{padding-bottom:.25rem} .rel.rel-cel.rel-cel-rola{padding-bottom:calc(var(--bf-barra,4rem) + var(--bf-rodape,0px) + .5rem)} .rel.rel-cel .rel-main{gap:.625rem} .rel-carrossel{display:flex;gap:.75rem;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -.75rem;padding:0 .75rem;scroll-padding:0 .75rem;outline:none;touch-action:pan-x pan-y} .rel-carrossel::-webkit-scrollbar{display:none} .rel-carrossel:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:-3px;border-radius:1rem} .rel-slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;scroll-snap-stop:always;height:var(--rel-cel-altura,60vh);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column} .rel-slide>*{flex:none} .rel-slide>.rel-grafico{margin:0} /* 02/10 à noite: o gráfico inteiro na tela (Philippe): a figura ocupa o slide e o canvas fica com o que sobra depois do título, da legenda e do "Ver os números"; nada rola por dentro quando cabe */ .rel-slide>.rel-grafico{flex:1 1 auto;min-height:0;display:flex;flex-direction:column} .rel-slide>.rel-grafico>*{flex:none} .rel-slide>.rel-grafico>.rel-canvas{flex:1 1 0;min-height:7rem;height:auto!important} .rel-slide>.rel-grafico>.rel-numeros{margin-top:.5rem} /* a faixa do Cérebro sai do fluxo: vira o botão do Cérebro na barra de cima (web/avisos-topo.js), no celular e no computador */ .rel .hr-faixa{display:none} /* a espiada do carrossel (uma vez por abertura; nunca com "reduzir movimento") */ .rel-carrossel.rel-espiar>.rel-slide{animation:rel-espiada 1.1s cubic-bezier(.2,.8,.2,1) .15s both} @keyframes rel-espiada{0%{transform:none}38%{transform:translateX(-2.25rem)}100%{transform:none}} .rel-slide .rel-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} .rel-pontos{display:flex;justify-content:safe center;margin:.25rem 0 0;overflow-x:auto;scrollbar-width:none} .rel-pontos::-webkit-scrollbar{display:none} .rel-pontos button{flex:none;min-width:1.75rem;min-height:1.75rem;padding:.5rem .3125rem;border:0;background:transparent;display:grid;place-items:center;cursor:pointer} /* 04/10/2026 (a dupla checagem): a mesma cor dos pontos do HubCarrossel (web/hub-carrossel.css) */ .rel-pontos i{display:block;width:.375rem;height:.375rem;border-radius:.5rem;background:color-mix(in srgb,var(--label,#323200) 28%,transparent);transition:width .2s ease-out,background-color .2s ease-out} body.dark .rel-pontos i{background:color-mix(in srgb,var(--surface,#FFFFFF) 32%,transparent)} .rel-pontos button[aria-current="true"] i{width:1.25rem;background:var(--label,#323200)} /* no toque o ponto tem alvo de 44 px (web/interface-1740.css): a fileira avança 8 px sobre o respiro de baixo do cartão (os 10 px a mais desfazem o espaço entre as partes da coluna), e fora do cartão sobram 36 px (B4: no máximo 40) */ /* 04/10/2026 (a dupla checagem): em px, como na peça: o ponto é alvo de toque (44 px) e não cresce com o texto do aparelho */ html.hub-toque .rel.rel-cel .rel-pontos{position:relative;z-index:1;margin-top:-18px} html.hub-toque .rel.rel-cel .rel-pontos button{min-height:44px;height:44px;min-width:44px} /* a contagem "2 de 5: título" fica só para o leitor de tela: fora do cartão sobram os pontos (B4: no máximo 40 px) */ .rel-contagem{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* dentro das folhas da barra: a lista de relatórios, os períodos em grade e os seletores empilhados */ .rel-cel-nav .rel-nav-area:first-child{margin-top:0} .rel-cel-nav .rel-nav-item{font-size:calc(1rem * var(--dt,1))} .rel-cel-periodos .rel-periodos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;width:100%;background:transparent;padding:0} .rel-cel-periodos .rel-chip{min-height:2.75rem;padding:0 .5rem;border-radius:1rem;border:1px solid color-mix(in srgb,var(--label,#323200) 18%,transparent);background:color-mix(in srgb,var(--label3,#9C8D80) 8%,transparent);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:calc(.875rem * var(--dt,1))} .rel-cel-periodos .rel-chip.on{background:var(--bf-realce-fundo,var(--bf-realce,var(--acao,#1F5FD0)));border-color:var(--bf-realce-fundo,var(--bf-realce,var(--acao,#1F5FD0)));color:var(--acao-txt,#FFFFFF);box-shadow:none} /* D17: branco no azul do realce antigo dava 3,9:1 */ .rel-cel-periodos .rel-chip[data-rel-periodo="datas"]{grid-column:1/-1} .rel-cel-periodos .rel-datas{margin-top:.75rem} .rel-cel-selects{display:grid;gap:.75rem} @media (prefers-reduced-motion:reduce){.rel-carrossel{scroll-behavior:auto}.rel-pontos i{transition:none}.rel-carrossel.rel-espiar>.rel-slide{animation:none}} /* ---------- 1.74.0 (Philippe, 03/10/2026): computador, o relatório numa tela (.rel-pc) ---------- "Mostrar o gráfico por completo [...] sem precisar de rolar para baixo [...] só rolando para o lado." A tela empilhava resumo, gráficos e lista (2,1 telas em 1366x820). Agora as partes ficam numa faixa (.rel-faixa, web/hub-carrossel.js) na altura que sobra. 04/10/2026 (B1, B4 e B6): nada fica acima da faixa (o título abre o cartão Resumo; o período, os filtros e a lista de relatórios estão na barra de baixo) e nenhum cartão rola por dentro. Vale do tablet para cima; o celular continua com .rel-cel. Os seletores abaixo levam .rel-faixa.hcar para vencer web/hub-carrossel.css, que vem depois desta folha. */ .rel.rel-pc{padding-bottom:.75rem} .rel.rel-pc .rel-main{display:block} .rel.rel-pc .rel-sub,.rel.rel-pc .rel-desc{margin:0;line-height:1.4} /* a faixa: cada parte tem a altura que sobra da tela; a lista usa a largura toda */ .rel.rel-pc .rel-faixa.hcar>.rel-parte{display:flex;flex-direction:column;gap:.5rem} .rel.rel-pc .rel-faixa.hcar>.rel-parte>*{flex:none;min-width:0} .rel.rel-pc .rel-faixa.hcar.hcar-pc>.rel-parte-itens{flex-basis:100%} .rel.rel-pc .rel-faixa.hcar.hcar-pc>.rel-parte-larga{flex-basis:min(100%,calc(var(--hcar-w,26rem) * 1.5))} .rel.rel-pc .rel-faixa.hcar.hcar-pc>.rel-parte-cheia{flex-basis:calc(100% - 3.5rem)} .rel.rel-pc .rel-parte-resumo .rel-tiles{grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr))} /* o gráfico ocupa o cartão: o desenho fica com o que sobra depois do título, da legenda e do "Ver os números", e por isso aparece inteiro; --rel-min (web/relatorios.js) é o menor tamanho em que ainda se lê: abaixo disso o cartão rola */ .rel.rel-pc .rel-faixa.hcar>.rel-parte>.rel-grafico{flex:1 0 auto;min-height:100%;box-sizing:border-box;display:flex;flex-direction:column} .rel.rel-pc .rel-faixa.hcar>.rel-parte:has(>.rel-fonte)>.rel-grafico{min-height:0;flex:1 1 auto} .rel.rel-pc .rel-parte>.rel-grafico>*{flex:none} .rel.rel-pc .rel-parte>.rel-grafico>.rel-canvas{flex:1 1 0;min-height:var(--rel-min,10rem);max-height:var(--rel-max,none);height:auto!important} .rel.rel-pc .rel-parte>.rel-grafico>.rel-numeros{margin-top:.25rem} /* o Item por item: título e busca numa linha, a contagem, a tabela e as páginas. No cartão pequeno a tabela não rola: aparecem as linhas que cabem (o corte é do HubCarrossel) e "Ver tudo" abre o cartão grande, onde ela rola por dentro com o cabeçalho e o total presos */ .rel.rel-pc .rel-faixa.hcar>.rel-parte>.rel-itens{flex:none;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;padding:.75rem .875rem} .rel.rel-pc .rel-parte .rel-itens-topo{flex:none} .rel.rel-pc .rel-parte .rel-busca{flex:1 1 16rem;max-width:36rem;margin:0 0 0 auto;min-height:2.75rem;padding-top:.25rem;padding-bottom:.25rem} .rel.rel-pc .rel-parte .rel-tag-limpar{margin:0} .rel.rel-pc .rel-parte .rel-itens-lista{flex:1 1 100%;min-width:0;min-height:0!important} .rel.rel-pc .rel-parte .rel-itens-lista>.rel-mostrando{margin:0 0 .5rem} .rel.rel-pc .rel-parte .rel-tabela-caixa{margin:0} .rel.rel-pc .rel-parte .rel-paginas{margin:.5rem 0 0} .rel.rel-pc .rel-parte .rel-itens-lista:has(>.rel-vazio-lista) .rel-tabela-caixa{display:none} /* no cartão pequeno: sem rolagem e sem nada preso; no grande: a tabela rola por dentro, quase na altura da janela */ .rel .hcar-cartao:not(.hcar-grande) .rel-tabela-caixa{overflow:hidden;max-height:none} .rel .hcar-cartao:not(.hcar-grande) .rel-tabela :is(th,tfoot td){position:static} .rel .hcar-grande .rel-tabela-caixa{max-height:calc(100dvh - 15rem)} /* com o ponteiro fino (mouse) a linha da tabela pode ser mais baixa: cabem mais linhas na altura da tela */ html.hub-clique .rel.rel-pc .rel-parte .rel-tabela td{height:2.25rem;padding-top:.375rem;padding-bottom:.375rem} html.hub-clique .rel.rel-pc .rel-parte .rel-tabela th button{min-height:2.5rem} html.hub-clique .rel.rel-pc .rel-parte .rel-paginas .rel-botao{min-height:2.5rem} /* o botão Atualizar da fileira do topo gira enquanto o relatório carrega */ .ht-topo.girando svg{animation:rel-gira .8s linear infinite} @media (prefers-reduced-motion:reduce){.ht-topo.girando svg{animation:none}} /* o cartão grande de uma parte do relatório: a chapa tem o respiro e o canto que a parte (um bloco sem moldura) não tem */ .rel .hcar-grande{padding:1rem 1.125rem;border-radius:1.5rem} /* o Resumo é um cartão como os outros (antes os números ficavam soltos na página, embaixo do título grande): o cabeçalho, os avisos, os números e a nota da fonte */ .rel :is(.rel-parte-resumo,.rel-slide-resumo){padding:.875rem;border-radius:var(--r-card,16px);background:var(--surface,#FFFFFF);box-shadow:inset 0 0 0 .5px var(--rel-borda);box-sizing:border-box} .rel :is(.rel-parte-resumo,.rel-slide-resumo)>.rel-cab{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.75rem} .rel :is(.rel-parte-resumo,.rel-slide-resumo) .rel-tile{background:var(--surface2,#F7F3EE);box-shadow:none} .rel :is(.rel-parte-resumo,.rel-slide-resumo)>.rel-fonte{margin:.625rem 0 0} /* sem dados ainda (carregando, erro, datas por escolher): o cabeçalho abre o bloco de espera */ .rel-main>.rel-cab{display:flex;flex-direction:column;gap:.5rem;padding:.875rem 0 0} /* no celular o cartão da lista e o do gráfico ocupam a altura do cartão do carrossel (o conteúdo curto não deixa a moldura pela metade) */ .rel-slide-itens>.rel-itens{flex:1 1 auto;box-sizing:border-box} /* /fiscal.css */ /* 1.70.0 (Philippe, 28/09/2026): cupom fiscal (NFC-e) na tela (web/fiscal.js). O ícone da comandinha nos cards da expedição e na ficha, o selo "NFC-e 123", a folha do cupom e Configurações > Fiscal. Tokens do Hub, claro e escuro, alvos de 44 px e nada de rolagem lateral em 390 px. */ .fiscal-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none} .fiscal-btn{-webkit-tap-highlight-color:transparent;cursor:pointer;font:inherit} .fiscal-btn.tem{color:var(--d-verdeagua-t,#006F5D)} .fiscal-btn.pend{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} .fiscal-btn:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px} .fiscal-btn:active{transform:scale(var(--apertado-escala,.96))} /* card pequeno (faixas laterais): o mesmo tamanho das setas, com área de toque de 44 px */ .fiscal-sm{position:relative;display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--r-inner,9px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label2,#6B5A4C)} .fiscal-sm::after{content:"";position:absolute;inset:-6px} .e.mini .mf .fiscal-sm{margin-right:auto} /* card grande da expedição: terceira coluna das ações, ao lado do Reimprimir */ .fiscal-lnk{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0;color:var(--acao,#1F5FD0)} #view-exp .e>.acts [data-fiscal]{grid-column:3;grid-row:1} #view-exp .e:not(.mini)>.acts:has([data-fiscal]){grid-template-columns:minmax(0,88px) minmax(0,96px) 44px} .fiscal-lnk svg{width:22px;height:22px} /* ficha do pedido: botão com texto ao lado do fechar */ .fiscal-oh{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-radius:var(--r-pill,999px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label,#323200);font-size:var(--f-subhead,0.9375rem);font-weight:600;margin-left:auto} .oh .fiscal-oh+.x{margin-left:8px!important} /* o topo de vidro (topo-vidro.css) empurra o fechar com margin-left:auto e id; aqui ele fica ao lado do cupom */ .fiscal-oh svg{width:20px;height:20px} /* celular: o fechar continua no fim da primeira linha e o "Cupom fiscal" desce para a linha de baixo, com o texto */ @media (max-width:560px){.oh .fiscal-oh{order:10;margin-left:0}.oh .fiscal-oh+.x{margin-left:auto!important}} /* selo no card */ .badge.fiscal-selo{border:0;border-radius:8px;font-weight:600} .badge.fiscal-selo.ok{background:color-mix(in srgb,var(--verde,#11994A) 16%,transparent);color:var(--d-verdeagua-t,#006F5D)} .badge.fiscal-selo.pend{background:color-mix(in srgb,var(--d-ambar,#C27A00) 18%,transparent);color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} .badge.fiscal-selo.canc{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label2,#6B5A4C);text-decoration:line-through} .badge.fiscal-selo.erro{background:color-mix(in srgb,var(--queda,#E21D3C) 14%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} /* ------------------------------------------------------------ folha do cupom */ .fiscal-fundo{position:fixed;inset:0;z-index:2150;background:var(--vidro-veu,color-mix(in srgb,var(--label,#323200) 22%,transparent));display:flex;align-items:center;justify-content:center;padding:16px} .fiscal-folha{width:min(520px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;border-radius:var(--r-sheet,20px);background:var(--glass-bg,color-mix(in srgb,var(--surface,#FFFFFF) 94%,transparent));-webkit-backdrop-filter:blur(var(--glass-blur,24px)) saturate(180%);backdrop-filter:blur(var(--glass-blur,24px)) saturate(180%);box-shadow:0 18px 46px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 24%,transparent);color:var(--label,#323200);padding:8px 16px 18px;box-sizing:border-box} body.dark .fiscal-folha{background:color-mix(in srgb,var(--surface2,#F7F3EE) 96%,transparent)} .fiscal-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding-top:6px} .fiscal-topo h2{margin:6px 0 0;font-size:var(--f-title3,1.25rem);font-weight:700} .fiscal-sub{margin:4px 0 10px;font-size:var(--f-subhead,0.9375rem);color:var(--label2,#6B5A4C);line-height:1.4} .fiscal-x{width:44px;height:44px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label2,#6B5A4C);cursor:pointer} .fiscal-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round} .fiscal-corpo{display:flex;flex-direction:column;gap:12px;padding-bottom:4px} .fiscal-carregando,.fiscal-nota{margin:0;font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C);line-height:1.45} .fiscal-amb{margin:0;padding:8px 12px;border-radius:var(--r-inner,10px);background:color-mix(in srgb,var(--d-anil,#5B6CFF) 12%,transparent);color:var(--d-anil-t,#394DC8);font-size:var(--f-footnote,0.8125rem);font-weight:600} .fiscal-cartao{padding:14px;border-radius:var(--r-card,16px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} .fiscal-cartao b{font-size:var(--f-headline,1.0625rem)} .fiscal-cartao p{margin:6px 0 0;font-size:var(--f-subhead,0.9375rem);line-height:1.45;color:var(--label2,#6B5A4C)} .fiscal-cartao ul{margin:8px 0 0;padding-left:18px;font-size:var(--f-subhead,0.9375rem);color:var(--label2,#6B5A4C)} .fiscal-cartao.ok{background:color-mix(in srgb,var(--verde,#11994A) 12%,transparent)} .fiscal-cartao.pend{background:color-mix(in srgb,var(--d-ambar,#C27A00) 13%,transparent)} .fiscal-cartao.info{background:color-mix(in srgb,var(--acao,#1F5FD0) 10%,transparent)} .fiscal-num{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px} .fiscal-num span{font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C)} .fiscal-num .fiscal-estado{margin-left:auto;font-weight:700;color:var(--label,#323200)} .fiscal-valor{font-variant-numeric:tabular-nums;font-weight:600;color:var(--label,#323200)!important} .fiscal-chave{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--f-caption1,0.75rem)!important;letter-spacing:.02em;overflow-wrap:anywhere} .fiscal-botoes{display:flex;flex-wrap:wrap;gap:8px} .fiscal-botao{flex:1 1 150px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border:0;border-radius:var(--r-ctl,12px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:color-mix(in srgb,var(--acao,#1F5FD0) 70%,var(--label,#323200));font:inherit;font-size:var(--f-subhead,0.9375rem);font-weight:600;cursor:pointer;text-align:center} .fiscal-botao svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none} .fiscal-botao.primario{background:var(--acao,#1F5FD0);color:var(--acao-txt,#FFFFFF)} .fiscal-botao.perigo{background:var(--queda,#E21D3C);color:var(--acao-txt,#FFFFFF);width:100%;margin-top:10px} .fiscal-botao:disabled{opacity:.55;cursor:progress} .fiscal-botao:not(:disabled):active{transform:scale(var(--apertado-escala,.97))} .fiscal-botao:focus-visible,.fiscal-link:focus-visible,.fiscal-x:focus-visible,.fiscal-folha input:focus-visible,.fiscal-folha textarea:focus-visible,.fiscal-cancelar summary:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px} .fiscal-link{min-height:44px;padding:0 4px;border:0;background:none;color:var(--acao,#1F5FD0);font:inherit;font-size:var(--f-subhead,0.9375rem);font-weight:600;cursor:pointer;text-align:left} .fiscal-msg{margin:0;padding:10px 12px;border-radius:var(--r-inner,10px);font-size:var(--f-subhead,0.9375rem);line-height:1.4;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} .fiscal-msg.ok{background:color-mix(in srgb,var(--verde,#11994A) 15%,transparent);color:var(--d-verdeagua-t,#006F5D)} .fiscal-msg.erro{background:color-mix(in srgb,var(--queda,#E21D3C) 13%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .fiscal-msg.aviso{background:color-mix(in srgb,var(--d-ambar,#C27A00) 15%,transparent);color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} .fiscal-msg .fiscal-link{min-height:32px;color:inherit;text-decoration:underline} .fiscal-envio{display:flex;flex-direction:column;gap:10px;padding-top:4px;border-top:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .fiscal-envio h3{margin:10px 0 0;font-size:var(--f-headline,1.0625rem)} .fiscal-linha{display:flex;flex-direction:column;gap:6px} .fiscal-rotulo{font-size:var(--f-footnote,0.8125rem);font-weight:600;color:var(--label2,#6B5A4C)} .fiscal-campo{display:flex;gap:8px;min-width:0} .fiscal-campo input,.fiscal-url,.fiscal-cancelar textarea{flex:1 1 auto;min-width:0;min-height:44px;box-sizing:border-box;padding:10px 12px;border:0;border-radius:var(--r-ctl,12px);background:var(--surface,#FFFFFF);color:var(--label,#323200);font:inherit;font-size:max(1rem,calc(1rem * var(--dt,1)));box-shadow:inset 0 0 0 1px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent))} .fiscal-url{display:flex;align-items:center;font-size:var(--f-footnote,0.8125rem);overflow-wrap:anywhere;user-select:all;-webkit-user-select:all} .fiscal-campo .fiscal-botao{flex:0 0 auto} .fiscal-cancelar{border-top:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));padding-top:4px} .fiscal-cancelar summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200));font-weight:600;font-size:var(--f-subhead,0.9375rem)} .fiscal-cancelar textarea{width:100%;display:block;resize:vertical;margin-top:6px} .fiscal-ficha-linha{margin:0 0 8px;font-size:var(--f-subhead,0.9375rem)} .rel-fiscal .fiscal-botao{flex:0 1 auto} /* 1.70.1: bloco do cupom na ficha das Negociações, com o mesmo título das outras seções */ .neg-secao.rel-fiscal h3{margin:0 0 10px;font-size:calc(0.8125rem * var(--dt,1));font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--label2,#6B5A4C)} .fiscal-escolha{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .fiscal-escolha .fiscal-botao{flex:0 1 auto;min-height:44px} @media (max-width:640px){ .fiscal-fundo{align-items:flex-end;padding:0} /* 1.72.0 (auditoria de design 1720): as alturas das folhas do sistema (web/folha.css) e a alça */ .fiscal-folha{width:100%;max-height:var(--folha-grande,92dvh);min-height:var(--folha-media,50dvh);box-sizing:border-box;border-radius:var(--r-sheet,20px) var(--r-sheet,20px) 0 0;padding-bottom:var(--folha-base,calc(18px + env(safe-area-inset-bottom,0px)))} .fiscal-folha::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:var(--folha-alca,color-mix(in srgb,var(--label,#323200) 30%,transparent));margin:4px auto 0} .fiscal-campo .fiscal-botao{padding:10px 12px} } @media (prefers-reduced-motion:reduce){.fiscal-btn:active,.fiscal-botao:not(:disabled):active{transform:none}} @media (prefers-reduced-transparency:reduce){.fiscal-folha{background:var(--surface,#FFFFFF);-webkit-backdrop-filter:none;backdrop-filter:none}} /* ------------------------------------------------------------ Configurações > Fiscal */ .fiscal-cfg .settings-unit{margin:0 auto 18px} .fiscal-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px} .fiscal-grade.quatro{grid-template-columns:repeat(3,minmax(0,1fr))} .fiscal-campo-cfg.largo{grid-column:1/-1} .fiscal-campo-cfg select{width:100%;min-width:0;min-height:48px;box-sizing:border-box;padding:12px 14px;background:var(--settings-well,var(--surface,#FFFFFF));border:0;border-radius:13px;box-shadow:0 2px 9px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 5.5%,transparent);font:inherit;font-size:calc(1rem * var(--dt,1));color:var(--label,#323200)} .fiscal-dica{margin:6px 0 0;font-size:var(--f-footnote,0.8125rem);color:var(--settings-muted,var(--label2,#6B5A4C));line-height:1.4} .fiscal-chave-cfg{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:8px 0;cursor:pointer} .fiscal-chave-cfg input{position:absolute;opacity:0;width:1px;height:1px} .fiscal-chave-cfg .fiscal-trilho{flex:none;position:relative;width:51px;height:31px;border-radius:16px;background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent));transition:background .2s} .fiscal-chave-cfg .fiscal-trilho::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--surface,#FFFFFF);box-shadow:0 2px 6px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 18%,transparent);transition:transform .2s} .fiscal-chave-cfg input:checked+.fiscal-trilho{background:var(--verde,#11994A)} .fiscal-chave-cfg input:checked+.fiscal-trilho::after{transform:translateX(20px)} .fiscal-chave-cfg input:focus-visible+.fiscal-trilho{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px} .fiscal-chave-cfg b{display:block;font-size:calc(0.9375rem * var(--dt,1));font-weight:600} .fiscal-chave-cfg small{display:block;margin-top:2px;font-size:var(--f-footnote,0.8125rem);color:var(--settings-muted,var(--label2,#6B5A4C));line-height:1.4} .fiscal-chips{display:flex;flex-wrap:wrap;gap:8px} .fiscal-chip{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border-radius:var(--r-pill,999px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));font-size:var(--f-footnote,0.8125rem);font-weight:600} .fiscal-chip.ok{background:color-mix(in srgb,var(--verde,#11994A) 16%,transparent);color:var(--d-verdeagua-t,#006F5D)} .fiscal-chip.pend{background:color-mix(in srgb,var(--d-ambar,#C27A00) 18%,transparent);color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} .fiscal-chip.prod{background:color-mix(in srgb,var(--queda,#E21D3C) 14%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .fiscal-chip.homol{background:color-mix(in srgb,var(--d-anil,#5B6CFF) 13%,transparent);color:var(--d-anil-t,#394DC8)} .fiscal-pend{margin:12px 0 0;padding-left:18px;font-size:calc(0.875rem * var(--dt,1));color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} .fiscal-cfg .acts{margin-top:14px} .fiscal-cfg .btn{min-height:44px} .fiscal-h2{margin-top:26px!important} .fiscal-h3{margin:18px 0 10px;font-size:var(--f-headline,1.0625rem);font-weight:650} .fiscal-contador b{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} .fiscal-itens summary,.fiscal-cancelar summary{list-style:none} .fiscal-itens summary::-webkit-details-marker,.fiscal-cancelar summary::-webkit-details-marker{display:none} .fiscal-itens summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;font-size:calc(0.9375rem * var(--dt,1))} .fiscal-itens summary::before,.fiscal-cancelar summary::before{content:"›";display:inline-block;width:14px;font-size:calc(1.25rem * var(--dt,1));line-height:1;transition:transform .2s} .fiscal-itens[open]>summary::before,.fiscal-cancelar[open]>summary::before{transform:rotate(90deg)} .fiscal-rotulo-cfg{display:block;font-size:calc(0.875rem * var(--dt,1));font-weight:600;margin-bottom:9px;line-height:1.45} .fiscal-arquivo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:48px} .fiscal-arquivo input{position:absolute;width:1px;height:1px;opacity:0} .fiscal-arquivo .btn{display:inline-flex;align-items:center;min-height:44px;cursor:pointer} .fiscal-arquivo input:focus-visible+.btn{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px} .fiscal-arquivo span{font-size:calc(0.875rem * var(--dt,1));color:var(--settings-muted,var(--label2,#6B5A4C));overflow-wrap:anywhere;min-width:0} .fiscal-tabela{display:flex;flex-direction:column;gap:6px} .fiscal-item{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:0 12px;align-items:end;border-top:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));padding-top:8px} .fiscal-item>span{align-self:center;font-size:calc(0.875rem * var(--dt,1));font-weight:600;overflow-wrap:anywhere} .fiscal-item .settings-field{margin-bottom:8px} .fiscal-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .fiscal-lista li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));font-size:calc(0.875rem * var(--dt,1))} .fiscal-lista small{display:block;color:var(--settings-muted,var(--label2,#6B5A4C));margin-top:2px} @media (max-width:760px){.fiscal-grade,.fiscal-grade.quatro{grid-template-columns:minmax(0,1fr)}.fiscal-item{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fiscal-item>span{grid-column:1/-1}} @media (prefers-reduced-motion:reduce){.fiscal-chave-cfg .fiscal-trilho,.fiscal-chave-cfg .fiscal-trilho::after,.fiscal-itens summary::before,.fiscal-cancelar summary::before{transition:none}} /* 1.70.2: chave de ligar do WhatsApp da loja (Configurações > Fiscal) */ .fiscal-chave-linha{display:flex;align-items:center;gap:10px;min-height:44px;margin:6px 0;font-weight:600;cursor:pointer} .fiscal-chave-linha input{width:22px;height:22px;accent-color:var(--acao,#1F5FD0)} /* 1.74.0 (Philippe, 03/10/2026): Fiscal em carrossel (web/hub-carrossel.js). Os painéis são cartões da faixa .fiscal-car. 04/10/2026, conteúdo primeiro (B1, B2, B4): o seletor de loja e o botão de salvar saíram de cima e de baixo da faixa e moram na barra de baixo das Configurações (web/settings.js); as regras que os arrumavam em volta da faixa saíram junto. */ /* Mensal: dialog nativo, tokens do Fiscal e foco do navegador. */ .fiscal-mensal{border:0;margin:auto;max-width:calc(100vw - 32px)} .fiscal-mensal::backdrop{background:var(--vidro-veu,color-mix(in srgb,var(--label,#323200) 28%,transparent))} .fiscal-mensal .fiscal-grade{margin:12px 0} .fiscal-mensal form{display:grid;gap:12px} .fiscal-mensal input,.fiscal-mensal select{min-height:44px;width:100%;max-width:100%;font:inherit;box-sizing:border-box} .fiscal-mensal .settings-field{min-width:0} .fiscal-mensal select:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px} @media(prefers-reduced-motion:reduce){.fiscal-mensal *{transition:none!important;animation:none!important}} /* ---- V8 (10/10/2026): outro cupom para a mesma venda (só o gestor). Letra em rem com var(--dt) e piso de 11 px (.6875rem), para seguir o tamanho de texto do navegador; texto colorido só com --ink-*, alvos de 44 px, claro e escuro pelos tokens do tema. */ .fiscal-outro{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:var(--r-card,16px);background:color-mix(in srgb,var(--d-ambar,#C27A00) 12%,transparent);border-top:0} .fiscal-outro h3{margin:0;font-size:max(.6875rem,calc(1.0625rem * var(--dt,1)));font-weight:650;color:var(--label,#323200)} .fiscal-outro-aviso{margin:0;font-size:max(.6875rem,calc(.9375rem * var(--dt,1)));font-weight:650;line-height:1.4;color:var(--label,#323200)} .fiscal-outro .fiscal-nota{color:var(--label2,#6B5A4C)} .fiscal-outro textarea{width:100%;min-height:44px;box-sizing:border-box;display:block;resize:vertical;padding:10px 12px;border:0;border-radius:var(--r-ctl,12px);background:var(--surface,#FFFFFF);color:var(--label,#323200);font:inherit;font-size:max(.6875rem,calc(1.0625rem * var(--dt,1)))} .fiscal-outro-conta{margin:0;font-size:max(.6875rem,calc(.8125rem * var(--dt,1)));font-variant-numeric:tabular-nums;color:var(--label2,#6B5A4C)} .fiscal-outro-conf{display:flex;align-items:center;gap:10px;min-height:44px;font-size:max(.6875rem,calc(.9375rem * var(--dt,1)));color:var(--label,#323200);cursor:pointer} .fiscal-outro-conf input{width:22px;height:22px;flex:none;margin:0;accent-color:var(--acao,#1F5FD0)} .fiscal-outro .fiscal-botao{font-size:max(.6875rem,calc(.9375rem * var(--dt,1)))} .fiscal-outro .fiscal-msg{font-size:max(.6875rem,calc(.9375rem * var(--dt,1)))} .fiscal-outro .fiscal-botao:not(.primario){background:var(--surface,#FFFFFF);color:var(--label,#323200)} /* V8 (10/10/2026): liberar o número (mesma caixa da confirmação acima). PIN com letra grande e espaçada; o aviso do 539 com borda vermelha forte. */ .fiscal-outro .fiscal-pin{width:100%;min-height:44px;box-sizing:border-box;padding:10px 12px;border:0;border-radius:var(--r-ctl,12px);background:var(--surface,#FFFFFF);color:var(--label,#323200);font:inherit;font-size:max(.6875rem,calc(1.0625rem * var(--dt,1)));letter-spacing:.3em;font-variant-numeric:tabular-nums} .fiscal-outro .fiscal-pin:focus-visible{outline:var(--foco-largura) solid var(--acao,#1F5FD0);outline-offset:2px} .fiscal-outro h3:focus{outline:none} .fiscal-folha .fiscal-detalhe{margin:4px 0 0;font-size:max(.6875rem,calc(.75rem * var(--dt,1)));color:var(--label2,#6B5A4C);overflow-wrap:anywhere} .fiscal-outro .fiscal-aviso-forte{background:var(--surface,#FFFFFF);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200));font-weight:600;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--queda,#E21D3C) 55%,transparent)} /* texto do servidor com chave de 44 dígitos (motivo do 539, [chNFe:...]) quebra dentro do cartão, sem rolagem lateral */ .fiscal-folha .fiscal-cartao p,.fiscal-folha .fiscal-msg,.fiscal-folha .fiscal-nota{overflow-wrap:anywhere} /* V8 (11/10/2026): avisos da loja ("o cupom saiu agora" e "troque o cupom de contingência"). Fixos no canto, abaixo da folha do cupom; letra em rem, texto --label, alvos de 44 px; claro e escuro pelos tokens. */ .fiscal-fala{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .fiscal-avisos{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:2100;display:flex;flex-direction:column;gap:8px;width:min(420px,calc(100vw - 32px))} .fiscal-aviso{padding:12px 14px;border-radius:var(--r-card,16px);background:var(--surface,#FFFFFF);color:var(--label,#323200);box-shadow:0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent)),0 10px 30px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 18%,transparent)} .fiscal-aviso.saiu{box-shadow:inset 4px 0 0 var(--verde,#11994A),0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent)),0 10px 30px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 18%,transparent)} .fiscal-aviso.trocar{box-shadow:inset 4px 0 0 var(--d-ambar,#C27A00),0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent)),0 10px 30px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 18%,transparent)} .fiscal-aviso p{margin:0 0 10px;font-size:max(.6875rem,calc(.9375rem * var(--dt,1)));font-weight:600;line-height:1.4;overflow-wrap:anywhere} .fiscal-aviso-botoes{display:flex;flex-wrap:wrap;gap:8px} .fiscal-aviso-botoes .fiscal-botao{flex:1 1 auto;font-size:max(.6875rem,calc(.9375rem * var(--dt,1)))} /* AU-XK-FICHA-01: apenas a folha do cupom do pedido; configurações fiscais intactas. */ .fiscal-fundo.ficha-v2-folha{padding:12px;align-items:stretch;justify-content:flex-end} .fiscal-fundo.ficha-v2-folha .fiscal-folha{width:460px;max-width:100%;max-height:100%;height:100%;border-radius:26px;background:var(--ficha-vidro);color:var(--ficha-texto)} .fiscal-fundo.ficha-v2-folha .fiscal-topo{background:transparent;border:0;padding:16px} .fiscal-fundo.ficha-v2-folha .fiscal-corpo{padding:0 16px 16px;overflow-wrap:anywhere} .fiscal-fundo.ficha-v2-folha .fiscal-cartao{background:var(--ficha-card);border-radius:16px} .fiscal-fundo.ficha-v2-folha .fiscal-botoes{flex-wrap:wrap} .fiscal-fundo.ficha-v2-folha .fiscal-botao{min-height:44px;white-space:normal} @media(max-width:600px){.fiscal-fundo.ficha-v2-folha{padding:0;align-items:flex-end}.fiscal-fundo.ficha-v2-folha .fiscal-folha{width:100%;height:88dvh;border-radius:26px 26px 0 0}} /* Contenção só na folha do pedido, que já tem dimensões definidas. */ .fiscal-fundo.ficha-v2-folha .fiscal-folha{contain:layout style paint} /* /hub-coleta.css */ /* 1.74.0 (Philippe, 02/10/2026): Configurações > Coleta externa (web/hub-coleta.js). Tokens do Hub, claro e escuro, alvos de 44 px, texto que cresce com --dt e nada de rolagem lateral em 390 px. */ .hc{min-width:0} /* 1.74.0 (Philippe, 04/10/2026, sexta fase, revisão final G1): a raiz desta seção usa a classe .hc, que nas telas de área (web/hub-comercial.css) tem limite de 1280 px. Quando ela é a faixa de cartões das Configurações o limite cortava o terceiro cartão no meio da janela e deixava um terço da tela de 1920 px vazio: a faixa vai até a borda, como as outras. */ #view-cfg .hc.hcar{max-width:none} .hc code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:calc(.875rem * var(--dt,1));background:var(--settings-well,color-mix(in srgb,var(--label3,#9C8D80) 10%,transparent));padding:2px 6px;border-radius:7px;overflow-wrap:anywhere} .hc .hc-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px} .hc .hc-cab h2{margin:0} .hc .hc-cab+.settings-note{margin-top:0} .hc .settings-panel h2{margin:0 0 12px;font-size:var(--f-title3,calc(1.25rem * var(--dt,1)));line-height:var(--lh-title3,1.25)} /* 04/10/2026: o título do cartão no tamanho das outras seções (era 28 px) */ .hc .settings-panel h2+.settings-note,.hc .settings-panel h2+.hc-estado{margin-top:0} /* situação */ .hc-estado{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;padding:6px 12px 6px 8px;border-radius:999px;font-weight:600;font-size:calc(.875rem * var(--dt,1));background:var(--settings-well,color-mix(in srgb,var(--label3,#9C8D80) 10%,transparent))} .hc-estado i{width:10px;height:10px;border-radius:50%;background:var(--settings-muted,var(--label3,#9C8D80));flex:none} .hc-estado.hc-on i{background:var(--verde,#11994A);box-shadow:0 0 0 4px color-mix(in srgb,var(--verde,#11994A) 18%,transparent)} .hc-estado.hc-off{color:var(--settings-muted,var(--label2,#6B5A4C))} .hc-ok{margin:0;color:var(--settings-muted,var(--label2,#6B5A4C));font-size:calc(.875rem * var(--dt,1))} .hc-alertas{list-style:none;margin:0;padding:0;display:grid;gap:8px} .hc-alertas li{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--d-ambar,#C27A00) 14%,transparent);color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200));font-size:calc(.875rem * var(--dt,1));line-height:1.45} .hc-alertas b{display:block;font-weight:650} .hc-aviso{margin:12px 0 0;padding:10px 14px;border-radius:12px;font-size:calc(.875rem * var(--dt,1));line-height:1.45} .hc-aviso.ok{background:color-mix(in srgb,var(--verde,#11994A) 14%,transparent);color:var(--d-verdeagua-t,#006F5D)} .hc-aviso.erro{background:color-mix(in srgb,var(--queda,#E21D3C) 12%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} /* listas (locais e tokens) */ .hc-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px} .hc-lista>li{padding:14px 16px;border-radius:16px;background:var(--settings-well,color-mix(in srgb,var(--label3,#9C8D80) 8%,transparent));display:grid;gap:8px;min-width:0} .hc-lista>li.hc-inativo{opacity:.62} .hc-lista>li.hc-alerta{box-shadow:inset 3px 0 0 var(--d-ambar,#C27A00)} .hc-l1{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;min-width:0} .hc-l1 b{font-weight:650;font-size:calc(1rem * var(--dt,1));overflow-wrap:anywhere} .hc-onde,.hc-freq{color:var(--settings-muted,var(--label2,#6B5A4C));font-size:calc(.875rem * var(--dt,1))} .hc-freq{margin-left:auto} .hc-tipo{display:inline-block;padding:3px 9px;border-radius:999px;font-weight:600;font-size:max(.6875rem, calc(.75rem * var(--dt,1)));letter-spacing:.01em;background:color-mix(in srgb,var(--label3,#9C8D80) 14%,transparent);color:var(--label2,#6B5A4C)} .hc-tipo-avaliacoes{background:color-mix(in srgb,var(--d-amarelo,#F2B000) 28%,transparent);color:var(--d-amarelo-t,#805A00)} .hc-tipo-financeiro{background:color-mix(in srgb,var(--verde,#11994A) 18%,transparent);color:var(--d-verdeagua-t,#006F5D)} .hc-tipo-pesquisa{background:color-mix(in srgb,var(--acao,#1F5FD0) 14%,transparent);color:var(--acao,#1F5FD0)} .hc-tipo-ok{background:color-mix(in srgb,var(--verde,#11994A) 18%,transparent);color:var(--d-verdeagua-t,#006F5D)} .hc-tipo-off{background:color-mix(in srgb,var(--label3,#9C8D80) 14%,transparent);color:var(--settings-muted,var(--label2,#6B5A4C))} .hc-l2{display:grid;gap:2px;min-width:0;font-size:calc(.875rem * var(--dt,1));line-height:1.45} .hc-l2 a{color:var(--acao,#1F5FD0);text-decoration:none;overflow-wrap:anywhere} .hc-l2 a:hover{text-decoration:underline} .hc-l2 span{color:var(--label2,#6B5A4C)} .hc-l3{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--settings-muted,var(--label2,#6B5A4C));font-size:max(.6875rem, calc(.8125rem * var(--dt,1)));line-height:1.45} .hc-l3-alerta{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200));font-weight:600} .hc-acoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px} .hc-acoes .btn{min-height:44px} .hc-acoes .btn:last-child{margin-left:auto} .hc-confirma{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200));font-size:calc(.875rem * var(--dt,1));flex:1 1 100%} /* a chave Ativo, no feitio do iOS */ .hc-switch{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-size:calc(.875rem * var(--dt,1));font-weight:600} .hc .hc-switch input[type=checkbox]{appearance:none;-webkit-appearance:none;width:51px;height:31px;min-height:31px;max-height:31px;margin:0;border-radius:16px;background:color-mix(in srgb,var(--label3,#9C8D80) 32%,transparent);position:relative;transition:background .2s;flex:none;cursor:pointer} .hc-switch input::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--surface,#FFFFFF);box-shadow:0 3px 8px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 15%,transparent),0 1px 1px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 16%,transparent);transition:transform .25s cubic-bezier(.2,.8,.2,1)} .hc-switch input:checked{background:var(--verde,#11994A)} .hc-switch input:checked::after{transform:translateX(20px)} .hc-switch input:disabled{opacity:.5} .hc-switch input:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px} /* formulário do local */ .hc-form{margin:0 0 16px;padding:16px;border-radius:16px;background:var(--settings-well,color-mix(in srgb,var(--label3,#9C8D80) 8%,transparent))} .hc-form h3{margin:0 0 12px;font-size:calc(1.0625rem * var(--dt,1));font-weight:650} .hc-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .hc-campos label{display:grid;gap:6px;min-width:0} .hc-campos .hc-largo{grid-column:1/-1} .hc-campos span{font-size:calc(.8125rem * var(--dt,1));font-weight:600;color:var(--label2,#6B5A4C)} .hc-campos input,.hc-campos select{min-height:46px;padding:10px 12px;border:0;border-radius:12px;background:var(--settings-surface,var(--surface,#FFFFFF));font:inherit;font-size:calc(1rem * var(--dt,1));color:var(--label,#323200);box-shadow:0 1px 4px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 8%,transparent);min-width:0;width:100%;box-sizing:border-box} .hc-campos input:focus-visible,.hc-campos select:focus-visible,.hc-gerar input:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px} .hc-campos input[readonly]{color:var(--settings-muted,var(--label2,#6B5A4C))} .hc-botoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px} .hc-botoes .btn,.hc-gerar .btn{min-height:44px} /* tokens */ .hc-gerar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin:0 0 14px} .hc-gerar label{display:grid;gap:6px;flex:1 1 220px;min-width:0} .hc-gerar span{font-size:calc(.8125rem * var(--dt,1));font-weight:600;color:var(--label2,#6B5A4C)} .hc-gerar input{min-height:46px;padding:10px 12px;border:0;border-radius:12px;background:var(--settings-well,color-mix(in srgb,var(--label3,#9C8D80) 8%,transparent));font:inherit;font-size:calc(1rem * var(--dt,1));color:var(--label,#323200);min-width:0;width:100%;box-sizing:border-box} .hc-token-novo{margin:0 0 14px;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,var(--verde,#11994A) 12%,transparent);display:grid;gap:10px} .hc-token-novo b{font-size:calc(.875rem * var(--dt,1));line-height:1.45;color:var(--d-verdeagua-t,#006F5D)} .hc-token-novo code{display:block;padding:12px 14px;border-radius:12px;background:var(--settings-surface,var(--surface,#FFFFFF));font-size:calc(.9375rem * var(--dt,1));user-select:all;-webkit-user-select:all;line-height:1.5} .hc-token-novo .hc-botoes{margin-top:0} /* tabela do que chegou */ .hc-tabela{display:grid;gap:2px;font-size:calc(.875rem * var(--dt,1));min-width:0} .hc-tr{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2.2fr) repeat(4,minmax(0,1fr));gap:8px;align-items:center;padding:10px 12px;border-radius:10px} .hc-tr:nth-child(even){background:var(--settings-well,color-mix(in srgb,var(--label3,#9C8D80) 6%,transparent))} .hc-tr span{min-width:0;overflow-wrap:anywhere;text-align:right;font-variant-numeric:tabular-nums} .hc-tr span:first-child,.hc-tr .hc-td-local{text-align:left} .hc-contagens{display:contents} .hc-th{font-weight:650;color:var(--settings-muted,var(--label2,#6B5A4C));font-size:max(.6875rem, calc(.75rem * var(--dt,1)));text-transform:uppercase;letter-spacing:.04em} .hc-num-erro{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200));font-weight:650} /* recusas */ .hc-recusas{list-style:none;margin:0;padding:0;display:grid;gap:6px} .hc-recusas li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;padding:10px 12px;border-radius:12px;background:var(--settings-well,color-mix(in srgb,var(--label3,#9C8D80) 6%,transparent));font-size:calc(.875rem * var(--dt,1));line-height:1.45} .hc-rec-quando{color:var(--settings-muted,var(--label2,#6B5A4C));font-variant-numeric:tabular-nums} .hc-rec-local{overflow-wrap:anywhere;font-weight:600} .hc-rec-motivo{grid-column:1/-1;color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} /* rotas */ .hc-rotas{margin:0;display:grid;gap:4px 16px;grid-template-columns:minmax(0,1fr)} .hc-rotas dt{font-weight:600;font-size:calc(.875rem * var(--dt,1));margin-top:10px;color:var(--label2,#6B5A4C)} .hc-rotas dd{margin:0;font-size:calc(.875rem * var(--dt,1));line-height:1.55;overflow-wrap:anywhere} .hc-rotas dd code{display:inline-block;max-width:100%} /* cartão da tela inicial com local parado */ .settings-home .settings-panel.hc-card-alerta .settings-symbol{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} @media (max-width:600px){ .hc-campos{grid-template-columns:minmax(0,1fr)} /* no celular a tabela vira lista: dia e local na primeira linha, as contagens com rótulo na segunda */ .hc-th{display:none} .hc-tr{grid-template-columns:auto minmax(0,1fr);gap:4px 10px;padding:12px} .hc-tr span{text-align:left} .hc-tr .hc-td-local{font-weight:600} .hc-contagens{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:2px 12px;font-size:max(.6875rem, calc(.8125rem * var(--dt,1)));color:var(--settings-muted,var(--label2,#6B5A4C))} .hc-contagens span::before{content:attr(data-rotulo) " "} .hc-contagens .hc-num-erro{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .hc-freq{margin-left:0} .hc-acoes .btn:last-child{margin-left:0} } body.dark .hc-switch input::after{background:var(--surface,#FFFFFF)} body.dark .hc-campos input,body.dark .hc-campos select,body.dark .hc-token-novo code{background:color-mix(in srgb,var(--surface,#FFFFFF) 8%,transparent);color:var(--label,#323200)} body.dark .hc-tipo-avaliacoes{color:var(--d-amarelo-t,#805A00)} /* /integracoes-saude.css */ /* 1.74.0 (Philippe, 03/10/2026): Configurações > Saúde das integrações (web/integracoes-saude.js). A tela responde de bate-pronto se as conexões do Hub estão funcionando e mostra um cartão por conexão, em carrossel (web/hub-carrossel.js). Padrão Apple do projeto: o cartão é conteúdo e por isso é sólido (vidro só nas peças do carrossel, que são dele); a cor da situação entra como preenchimento e o texto usa a tinta (--ink-*); alvos de 44 px; texto em rem com --dt; claro e escuro pelos tokens; "reduzir movimento" sem pulso nem transição; nada de rolagem lateral em 320 px. Verde = funcionando, laranja = pede atenção, vermelho = parado, cinza = não configurado (que não é erro). */ .hsi{min-width:0} /* a cor de cada situação, uma vez só: ponto e ícone (cor), texto (tinta), fundo do selo e do ícone (fundo) e o halo */ .hsi-s-funcionando{--hsi-cor:var(--verde,#11994A);--hsi-tinta:var(--d-verdeagua-t,#006F5D);--hsi-fundo:color-mix(in srgb,var(--verde,#11994A) 15%,transparent);--hsi-halo:color-mix(in srgb,var(--verde,#11994A) 22%,transparent)} .hsi-s-atencao{--hsi-cor:var(--d-ambar,#C27A00);--hsi-tinta:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200));--hsi-fundo:color-mix(in srgb,var(--d-ambar,#C27A00) 17%,transparent);--hsi-halo:color-mix(in srgb,var(--d-ambar,#C27A00) 24%,transparent)} .hsi-s-parado{--hsi-cor:var(--queda,#E21D3C);--hsi-tinta:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200));--hsi-fundo:color-mix(in srgb,var(--queda,#E21D3C) 13%,transparent);--hsi-halo:color-mix(in srgb,var(--queda,#E21D3C) 20%,transparent)} .hsi-s-desligada{--hsi-cor:var(--label3,#9C8D80);--hsi-tinta:var(--settings-muted,var(--label2,#6B5A4C));--hsi-fundo:color-mix(in srgb,var(--surface,#FFFFFF) 13%,transparent);--hsi-halo:color-mix(in srgb,var(--label3,#9C8D80) 16%,transparent)} /* ---------- o topo: a resposta de bate-pronto ---------- */ /* 1.74.0 (04/10/2026), conteúdo primeiro (B1, B4): a resposta de bate-pronto deixou de ser uma faixa acima dos cartões e é o primeiro cartão (Resumo), com a situação de cada conexão numa lista; o Conferir agora mora na barra de baixo */ /* a altura de duas linhas de resposta mais a hora, para a lista de baixo não descer quando a frase é comprida */ .hsi-topo{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.25rem .875rem;margin:0;min-width:0;min-height:calc(4.75rem * var(--dt,1))} .hsi-lista{list-style:none;margin:0;padding:0;display:grid} .hsi-lista li{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:2.25rem;border-top:1px solid color-mix(in srgb,var(--label,#323200) 16%,transparent);font-size:var(--f-subhead,calc(.9375rem * var(--dt,1)));font-weight:600;min-width:0} .hsi-lista li>span:first-child{min-width:0;overflow-wrap:anywhere} .hsi-luz{width:.875rem;height:.875rem;margin:0 .1875rem;border-radius:50%;background:var(--hsi-cor);box-shadow:0 0 0 .3125rem var(--hsi-halo)} .hsi-topo-texto{display:grid;gap:.125rem;min-width:0} .hsi-veredito{font-size:var(--f-title3,calc(1.25rem * var(--dt,1)));line-height:1.2;font-weight:700;letter-spacing:-.012em;color:var(--hsi-tinta);overflow-wrap:anywhere} .hsi-s-desligada .hsi-veredito{color:var(--label,#323200)} .hsi-veredito span{font-weight:600;color:var(--settings-muted,var(--label2,#6B5A4C))} .hsi-quando{font-size:var(--f-footnote,max(.6875rem,calc(.8125rem * var(--dt,1))));line-height:1.35;color:var(--settings-muted,var(--label2,#6B5A4C));font-variant-numeric:tabular-nums} .hsi .btn{min-height:44px;transition:transform var(--dur-rapida,.12s) ease-out} /* o botão do passo que resolve é azul cheio no claro e no escuro (a regra do escuro para .btn apagava o azul) */ .hsi .btn.primary,body.dark .hsi .btn.primary{background:var(--acao,#1F5FD0);border-color:transparent;color:var(--label,#323200)} .hsi .btn.hsi-apertado:not(:disabled){transform:scale(var(--apertado-escala,.97))} /* ---------- a faixa e os cartões ---------- */ .hsi-faixa{min-width:0} /* sem a peça do carrossel (não deveria acontecer) os cartões ficam empilhados, nunca somem */ .hsi-faixa:not(.hcar){display:grid;gap:.875rem} /* no computador todos os cartões desta tela têm a mesma altura (a que sobra na tela, até 36rem) e rolam por dentro: o esqueleto e a lista pronta ocupam exatamente o mesmo lugar, e um cartão curto não vira coluna até o pé de uma tela alta */ /* 04/10/2026 (a dupla checagem): a altura do cartão no computador e a posição dos pontos no toque saíram daqui e moram na peça (web/hub-carrossel.css): a mesma medida em toda tela */ .hsi .hsi-cartao{margin:0;display:flex;flex-direction:column;gap:.875rem;padding:1.125rem;min-width:0} /* o cabeçalho: ícone, nome e selo na primeira linha; o que é a conexão por baixo, na largura toda (nome comprido não espreme a explicação) */ .hsi-cab{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"icone nome selo" "icone sobre sobre";align-items:center;gap:.125rem .75rem;min-width:0} .hsi-icone{grid-area:icone;align-self:start;width:2.75rem;height:2.75rem;border-radius:.875rem;display:grid;place-items:center;background:var(--hsi-fundo);color:var(--hsi-tinta)} .hsi-icone svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .hsi .hsi-cartao h2{grid-area:nome;margin:0;font-size:var(--f-headline,calc(1.0625rem * var(--dt,1)));line-height:1.25;font-weight:700;letter-spacing:-.01em;overflow-wrap:anywhere} .hsi-cab>.hsi-selo,.hsi-cab>.hsi-b-selo{grid-area:selo} .hsi-sobre{grid-area:sobre;align-self:start;margin:0;font-size:var(--f-footnote,max(.6875rem,calc(.8125rem * var(--dt,1))));line-height:1.4;color:var(--settings-muted,var(--label2,#6B5A4C))} .hsi-selo{flex:none;display:inline-flex;align-items:center;gap:.375rem;min-height:1.75rem;padding:.125rem .625rem .125rem .5rem;border-radius:999px;background:var(--hsi-fundo);color:var(--hsi-tinta);font-size:var(--f-footnote,max(.6875rem,calc(.8125rem * var(--dt,1))));font-weight:650;line-height:1.2;white-space:nowrap;box-sizing:border-box} .hsi-selo i{flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--hsi-cor)} .hsi-selo-p{min-height:1.5rem;font-size:var(--f-caption1,max(.6875rem,calc(.75rem * var(--dt,1))))} /* cada conexão do cartão: o que significa (a frase mais importante), desde quando, o que fazer e o botão */ .hsi-item{display:grid;gap:.625rem;min-width:0} .hsi-item+.hsi-item{padding-top:.875rem;border-top:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .hsi-item-cab{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .5rem;min-width:0} .hsi-item-cab h3{margin:0;font-size:var(--f-subhead,calc(.9375rem * var(--dt,1)));line-height:1.3;font-weight:650;overflow-wrap:anywhere} .hsi-significa{margin:0;font-size:var(--f-callout,calc(1rem * var(--dt,1)));line-height:1.4;font-weight:600;color:var(--label,#323200)} .hsi-fatos{margin:0;display:grid;gap:.5rem} .hsi-fatos>div{display:grid;gap:.0625rem;min-width:0} .hsi-fatos dt{font-size:var(--f-caption1,max(.6875rem,calc(.75rem * var(--dt,1))));line-height:1.3;font-weight:650;letter-spacing:.02em;color:var(--settings-muted,var(--label2,#6B5A4C))} .hsi-fatos dd{margin:0;font-size:var(--f-subhead,calc(.9375rem * var(--dt,1)));line-height:1.45;color:var(--label,#323200);overflow-wrap:anywhere} .hsi-sinal{color:var(--settings-muted,var(--label2,#6B5A4C))} .hsi-nota{margin:0;padding:.5rem .75rem;border-radius:.75rem;background:var(--settings-well,color-mix(in srgb,var(--label3,#9C8D80) 8%,transparent));font-size:var(--f-footnote,max(.6875rem,calc(.8125rem * var(--dt,1))));line-height:1.45;color:var(--label2,#6B5A4C)} .hsi-acoes{display:flex;flex-wrap:wrap;gap:.5rem} .hsi-tecnico{margin:0;font-size:var(--f-caption1,max(.6875rem,calc(.75rem * var(--dt,1))));line-height:1.4;color:var(--settings-muted,var(--label2,#6B5A4C));overflow-wrap:anywhere} .hsi-tecnico span{font-weight:650} /* erro ao carregar e sem permissão: um cartão só, com a mensagem e o botão */ .hsi-aviso{display:grid;gap:.5rem;justify-items:start} .hsi-aviso h2,.hsi-aviso .settings-note{margin:0} /* ---------- carregando: o esqueleto ocupa o lugar exato da tela pronta ---------- */ .hsi-barra{display:inline-block;height:.75em;border-radius:.375em;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));vertical-align:middle} .hsi-b30{width:30%}.hsi-b40{width:40%}.hsi-b70{width:70%}.hsi-b90{width:90%} .hsi-b-selo{width:5.5rem;height:1.75rem;border-radius:999px} .hsi-b-botao{width:9rem;height:44px;border-radius:.75rem} .hsi-esq .hsi-icone{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} .hsi-carregando .hsi-barra,.hsi-carregando .hsi-esq .hsi-icone{animation:hsi-pulso 1.2s ease-in-out infinite} /* as fichas ainda não têm nome: ficam como marcas neutras (nem a escura do cartão atual), sem toque */ .hsi-carregando .hcar-contagem{visibility:hidden} @keyframes hsi-pulso{50%{opacity:.45}} /* ---------- o cartão "Saúde das integrações" na tela inicial das Configurações ---------- */ .settings-cartao.hsi-card-alerta .settings-estado{background:color-mix(in srgb,var(--d-ambar,#C27A00) 16%,transparent);color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} .settings-home .settings-panel.hsi-card-alerta .settings-symbol{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} .settings-cartao.hsi-card-alerta.hsi-card-parado .settings-estado{background:color-mix(in srgb,var(--queda,#E21D3C) 14%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .settings-home .settings-panel.hsi-card-alerta.hsi-card-parado .settings-symbol{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} /* ---------- a tela em volta: com o carrossel a página não rola, então o cabeçalho encolhe ---------- */ @media (max-width:760px){ .hsi-veredito{font-size:var(--f-headline,calc(1.0625rem * var(--dt,1)))} .hsi-contagens{display:none} .hsi .hsi-cartao{padding:1rem} } @media (prefers-reduced-motion:reduce){ .hsi .btn{transition:none} .hsi .btn.hsi-apertado:not(:disabled){transform:none;opacity:var(--apertado-opacidade,.7)} .hsi-carregando .hsi-barra,.hsi-carregando .hsi-esq .hsi-icone{animation:none} } @media (prefers-contrast:more){ .hsi-selo{border:1px solid currentColor} .hsi .hsi-cartao{box-shadow:inset 0 0 0 1px light-dark(var(--label,#323200),var(--page,#F7F5F1))} } body.dark .hsi-s-desligada{--hsi-fundo:color-mix(in srgb,var(--surface,#FFFFFF) 10%,transparent);--hsi-halo:color-mix(in srgb,var(--surface,#FFFFFF) 12%,transparent)} /* 1.74.0 (Philippe, 05/10/2026, quinta rodada, L3): o cartão Lojas (abrir e fechar loja, geral e por canal). O desenho das linhas é o da peça dos canais (web/store-status.css, .ssc); aqui só o encaixe no cartão: ícone neutro (não é uma conexão com situação) e a peça sem a margem de cima que ela tem na Situação das lojas. */ .hsi-lojas .hsi-icone{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label2,#6B5A4C)} .hsi-lojas-peca{min-width:0} .hsi-lojas-peca .ssc{margin:0} /* 1.74.0 (segunda fase, L3): em celular baixo (320 x 568, 360 x 640, 375 x 667) a peça usa o desenho compacto (web/store-status.css) e o cabeçalho do cartão fica só com o título, como o cartão Lojas da seção Integrações: sem o ícone e sem a frase de baixo sobram 25 px de altura, o que falta para as duas unidades caberem com uma delas parte fechada e a outra fechada só no Hub */ @media (max-height:700px) and (max-width:760px){ .hsi .hsi-lojas{gap:.5rem} .hsi-lojas .hsi-cab{grid-template-columns:minmax(0,1fr);grid-template-areas:"nome"} .hsi-lojas .hsi-icone,.hsi-lojas .hsi-sobre{display:none} } /* O carregamento e o resultado reservam duas linhas de texto; conteúdo longo pode crescer. */ .hsi-topo .hsi-veredito,.hsi-topo .hsi-quando{min-block-size:2lh} /* /equipe.css */ /* 1.69.0: EQUIPE, PONTO E TAREFAS (web/equipe.js, web/ponto.js, web/tarefas.js). Tokens do Hub com valor reserva em todo var(), claro e escuro pelos mesmos tokens (body.dark), alvos de 44 px (o PIN e os nomes do ponto são maiores: é o computador da expedição, tocado de pé), foco visível e vidro só nas peças de controle (folhas e barra), com os cartões sólidos. Nenhuma rolagem lateral: a grade da escala vira "um dia por vez" no celular. */ /* ---------------------------------------------------------------- ponto (sobre a tela toda) */ #ponto-raiz{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))} #ponto-raiz[hidden]{display:none} body.ponto-aberto{overflow:hidden} .ponto-fundo,.tarefas-fundo{position:absolute;inset:0;background:color-mix(in srgb,var(--label,#323200) 42%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .ponto-folha{position:relative;width:min(760px,100%);max-height:100%;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-sheet,24px);background:var(--vidro-solido,var(--surface,#FFFFFF));color:var(--label,#323200);box-shadow:0 24px 70px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 35%,transparent)} body.dark .ponto-folha{background:var(--surface2,#F7F3EE);color:var(--label,#323200)} .ponto-topo,.tarefas-topo{display:flex;align-items:center;gap:12px;padding:14px 18px 10px;border-bottom:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .ponto-topo>div,.tarefas-topo>div{flex:1;min-width:0} .ponto-topo h2,.tarefas-topo h2{margin:0;font-size:calc(1.375rem * var(--dt,1));font-weight:700;letter-spacing:-.01em} .ponto-sub,.tarefas-sub{margin:2px 0 0;font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))));color:var(--label2,#6B5A4C)} .ponto-relogio{font-variant-numeric:tabular-nums;font-size:calc(1.375rem * var(--dt,1));font-weight:600;color:var(--label2,#6B5A4C)} .ponto-x{min-width:44px;min-height:44px;border:0;border-radius:999px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:inherit;font-size:calc(1.625rem * var(--dt,1));line-height:1;cursor:pointer} .ponto-corpo,.tarefas-corpo{overflow-y:auto;padding:16px 18px 20px;-webkit-overflow-scrolling:touch} .ponto-cam{display:flex;flex-direction:column;align-items:center;gap:12px} .ponto-video-caixa{position:relative;width:min(560px,100%);aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:var(--label,#323200)} .ponto-video-caixa video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block} .ponto-oval{position:absolute;left:50%;top:48%;width:44%;height:70%;transform:translate(-50%,-50%);border-radius:50%;border:3px solid color-mix(in srgb,var(--label,#323200) 85%,transparent);box-shadow:0 0 0 999px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 28%,transparent);pointer-events:none} .ponto-carregando{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px;background:color-mix(in srgb,var(--label,#323200) 72%,transparent);color:var(--acao-txt,#FFFFFF);text-align:center;font-size:var(--f-subhead,calc(0.9375rem * var(--dt,1)))} .ponto-carregando[hidden]{display:none} .ponto-msg{margin:0;min-height:1.4em;text-align:center;font-size:calc(1.375rem * var(--dt,1));font-weight:600} .ponto-grande{margin:0 0 12px;text-align:center;font-size:calc(1.375rem * var(--dt,1));font-weight:600;line-height:1.3} .ponto-sub2{margin:4px 0 0;text-align:center;font-size:var(--f-subhead,calc(0.9375rem * var(--dt,1)));color:var(--label2,#6B5A4C)} .ponto-aviso{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--d-ambar,#C27A00) 16%,transparent);font-size:var(--f-subhead,calc(0.9375rem * var(--dt,1)));line-height:1.4} .ponto-acoes{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px} .ponto-btn{min-height:44px;padding:10px 18px;border:0;border-radius:var(--r-ctl,12px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:inherit;font:inherit;font-size:var(--f-subhead,calc(0.9375rem * var(--dt,1)));font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px} .ponto-btn.primario{background:var(--acao,#1F5FD0);color:var(--acao-txt,#FFFFFF)} body.dark .ponto-btn.primario{background:var(--acao,#1F5FD0)} .ponto-btn:active,.ponto-nome:active,.ponto-tecla:active,.tf-btn:active{transform:scale(.97);opacity:var(--apertado-opacidade,.7)} /* O link herda a ação oficial da paleta nos dois temas, com a mesma reserva clara. */ .ponto-link{min-height:44px;border:0;background:transparent;color:var(--acao,#1F5FD0);font:inherit;font-size:var(--f-subhead,calc(0.9375rem * var(--dt,1)));cursor:pointer;text-decoration:underline} body.dark .ponto-link{color:var(--acao,#1F5FD0)} .ponto-nomes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px} /* 1.74.0 (Philippe, 05/10/2026; N4 da quinta rodada): --page virou o off-white do fundo da página. Os botões de nome, o campo, o item de tarefa e o cartão de tarefas da Cozinha são SUPERFÍCIES (brancas, por cima da folha e do fundo), e não fundo: passam a ler --surface. No escuro nada muda (cada um já tinha a cor própria). */ .ponto-nome{min-height:72px;padding:10px 12px;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:16px;background:var(--surface,#FFFFFF);color:inherit;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer} body.dark .ponto-nome{background:var(--surface2,#F7F3EE);border-color:color-mix(in srgb,var(--label,#323200) 12%,transparent)} .ponto-nome b{font-size:calc(1.1875rem * var(--dt,1))} .ponto-nome span{font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))));color:var(--label2,#6B5A4C)} .ponto-nome:disabled{opacity:var(--desligado-opacidade,.45);cursor:default} .ponto-confirma,.ponto-feito,.ponto-escolha,.ponto-teclado-caixa{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:8px 0} .ponto-escolha{align-items:stretch} .ponto-acao{margin:0;padding:6px 18px;border-radius:999px;font-weight:700;font-size:calc(1.0625rem * var(--dt,1));letter-spacing:.02em;text-transform:uppercase} .ponto-acao.entrada{background:color-mix(in srgb,var(--verde,#11994A) 16%,transparent);color:var(--d-verdeagua-t,#006F5D)} .ponto-acao.saida{background:color-mix(in srgb,var(--acao,#1F5FD0) 16%,transparent);color:var(--acao,#1F5FD0)} body.dark .ponto-acao.entrada{color:var(--d-verdeagua-t,#006F5D)} body.dark .ponto-acao.saida{color:var(--acao,#1F5FD0)} .ponto-quem{margin:4px 0 0;font-size:calc(2.5rem * var(--dt,1));font-weight:800;letter-spacing:-.02em;line-height:1.1} .ponto-conta{margin:8px 0 0;font-size:var(--f-subhead,calc(0.9375rem * var(--dt,1)));color:var(--label2,#6B5A4C)} .ponto-check{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--verde,#11994A)} .ponto-feito.saida .ponto-check{background:var(--acao,#1F5FD0)} .ponto-check svg{width:52px;height:52px;fill:none;stroke:var(--label3,#9C8D80);stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .ponto-teclado{display:grid;grid-template-columns:repeat(3,84px);gap:12px;justify-content:center;margin-top:6px} .ponto-tecla{height:72px;border:0;border-radius:18px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:inherit;font:inherit;font-size:calc(1.75rem * var(--dt,1));font-weight:600;cursor:pointer} .ponto-tecla.ok{background:var(--acao,#1F5FD0);color:var(--acao-txt,#FFFFFF);font-size:calc(1.25rem * var(--dt,1))} .ponto-pontos{display:flex;gap:14px;justify-content:center;margin:4px 0 8px} .ponto-pontos i{width:16px;height:16px;border-radius:50%;border:2px solid var(--label2,#6B5A4C)} .ponto-pontos i.on{background:var(--label,#323200);border-color:var(--label,#323200)} body.dark .ponto-pontos i.on{background:var(--surface2,#F7F3EE);border-color:var(--label3,#9C8D80)} .ponto-campo{min-height:48px;padding:10px 14px;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:12px;background:var(--surface,#FFFFFF);color:inherit;font:inherit;font-size:max(1rem,calc(1.1875rem * var(--dt,1)))} body.dark .ponto-campo{background:var(--surface2,#F7F3EE);border-color:color-mix(in srgb,var(--label,#323200) 16%,transparent)} .ponto-aviso-lgpd ul{margin:0 0 10px;padding-left:20px;text-align:left;font-size:var(--f-subhead,calc(0.9375rem * var(--dt,1)));line-height:1.45} .ponto-aceite{display:flex;align-items:center;gap:10px;justify-content:center;min-height:44px;font-size:calc(1.0625rem * var(--dt,1));font-weight:600} .ponto-aceite input{width:24px;height:24px} .ponto-poses{display:flex;gap:8px;list-style:none;margin:0;padding:0} .ponto-poses li{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))));font-weight:700} .ponto-poses li.agora{background:var(--acao,#1F5FD0);color:var(--acao-txt,#FFFFFF)} .ponto-poses li.feita{background:color-mix(in srgb,var(--verde,#11994A) 80%,var(--label,#323200));color:var(--acao-txt,#FFFFFF)} .ponto-roda{width:28px;height:28px;border-radius:50%;border:3px solid color-mix(in srgb,var(--label,#323200) 35%,transparent);border-top-color:var(--label3,#9C8D80);animation:ponto-gira .9s linear infinite;display:inline-block} .ponto-corpo .ponto-roda,.tarefas-corpo .ponto-roda{border-color:color-mix(in srgb,var(--label,#323200) 20%,transparent);border-top-color:var(--acao,#1F5FD0)} .ponto-roda.grande{width:48px;height:48px} @keyframes ponto-gira{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.ponto-roda{animation-duration:2.4s}} .ponto-folha button:focus-visible,.ponto-folha input:focus-visible,.tarefas-folha button:focus-visible,.kds-tarefas button:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px} @media (max-width:620px){.ponto-quem{font-size:calc(2rem * var(--dt,1))}.ponto-teclado{grid-template-columns:repeat(3,72px)}.ponto-tecla{height:64px}} /* ---------------------------------------------------------------- tarefas (folha e KDS parado) */ #tarefas-raiz{position:fixed;inset:0;z-index:1290;display:flex;align-items:flex-end;justify-content:center;padding:16px} #tarefas-raiz[hidden]{display:none} @media (min-width:760px){#tarefas-raiz{align-items:center}} .tarefas-folha{position:relative;width:min(720px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-sheet,24px);background:var(--vidro-solido,var(--surface,#FFFFFF));color:var(--label,#323200);box-shadow:0 24px 70px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 35%,transparent)} body.dark .tarefas-folha{background:var(--surface2,#F7F3EE);color:var(--label,#323200)} .tf-grupo h3{margin:10px 0 6px;font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));letter-spacing:.05em;text-transform:uppercase;color:var(--label2,#6B5A4C)} .tf-grupo h3 span{font-weight:400} .tf-grupo ul,.kds-tarefas ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .tf-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--surface,#FFFFFF);border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} body.dark .tf-item{background:var(--surface2,#F7F3EE);border-color:color-mix(in srgb,var(--label,#323200) 10%,transparent)} .tf-item.atrasada{border-color:var(--d-ambar,#C27A00);background:color-mix(in srgb,var(--d-ambar,#C27A00) 12%,transparent)} .tf-item.atrasada.critica{border-color:var(--queda,#E21D3C);background:color-mix(in srgb,var(--queda,#E21D3C) 12%,transparent)} .tf-texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .tf-texto b{font-size:var(--f-body,calc(1.0625rem * var(--dt,1)))} .tf-texto span,.tf-texto small{font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))));color:var(--label2,#6B5A4C)} .tf-texto .tf-critica{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--queda,#E21D3C);color:var(--acao-txt,#FFFFFF);font-style:normal;font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));font-weight:700;vertical-align:middle} .tf-btn{min-width:96px;min-height:48px;border:0;border-radius:14px;background:color-mix(in srgb,var(--verde,#11994A) 80%,var(--label,#323200));color:var(--acao-txt,#FFFFFF);font:inherit;font-size:var(--f-body,calc(1.0625rem * var(--dt,1)));font-weight:700;cursor:pointer} .tf-btn[data-tf-desfazer]{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:inherit} .tf-ok{font-size:calc(1.375rem * var(--dt,1));color:var(--d-verdeagua-t,#006F5D);font-weight:800;padding:0 10px} .tf-sistema{font-size:var(--f-footnote,max(0.6875rem, calc(0.8125rem * var(--dt,1))));color:var(--label2,#6B5A4C)} .tf-vazio{margin:18px 0;text-align:center;color:var(--label2,#6B5A4C);font-size:var(--f-subhead,calc(0.9375rem * var(--dt,1)))} .tf-livre{margin:0 0 10px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--verde,#11994A) 16%,transparent);color:var(--d-verdeagua-t,#006F5D);font-size:var(--f-subhead,calc(0.9375rem * var(--dt,1)));font-weight:600;line-height:1.35} .tf-escolha .ponto-grande{font-size:calc(1.25rem * var(--dt,1))} .kds-tarefas{margin:14px 20px 20px;padding:14px 16px;border-radius:20px;background:var(--surface,#FFFFFF);border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} body.dark .kds-tarefas{background:var(--surface2,#F7F3EE);border-color:color-mix(in srgb,var(--label,#323200) 10%,transparent)} .kds-tarefas h2{margin:0 0 10px;font-size:calc(1.1875rem * var(--dt,1));font-weight:700} .kds-tarefas .tf-item.grande{padding:16px 18px} .kds-tarefas .tf-item.grande .tf-texto b{font-size:calc(1.375rem * var(--dt,1))} .kds-tarefas .tf-item.grande .tf-btn{min-width:130px;min-height:64px;font-size:var(--f-title3,calc(1.25rem * var(--dt,1)))} .ctxbtns .icon.tarefas-atrasadas{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} .ctxbtns .nb.azul{background:var(--acao,#1F5FD0)} /* ---------------------------------------------------------------- tela Equipe (1.70.0) Pedido do Philippe (28/09/2026, noite): repaginar a tela da Equipe, "principalmente na versão do telefone", sem botão escondido, sem zoom preso, sem nada rolando para o lado, com arrastar e soltar e o Cérebro. Guia da Apple: - o conteúdo é sólido (cartões com --surface) e o vidro fica só no que controla (as abas grudadas no topo, a fita dos dias, a folha de ações); - alvos de 44 px no toque; texto pelos estilos do sistema (--f-*, que acompanham a escala de letra do Hub); - CAMPOS COM 16 PX OU MAIS SEMPRE: a escala de letra do Hub (Configurações > Aparência > Texto, --dt) deixava os campos da Equipe com 14,45 px e o iOS aproximava a página ao tocar num campo, sem voltar (o "zoom preso"); - touch-action: manipulation na tela e nas folhas (o toque duplo não aproxima; o pinçar continua); - nenhuma peça da Equipe usa transform: scale no toque (o "apertado" é só a opacidade); - animações curtas, desligadas com "reduzir movimento". */ #view-equ{padding:0;touch-action:manipulation;--eq-topo:var(--topo-reserva,62px);--eq-abas-h:44px} html.app-nativo #view-equ{--eq-topo:max(0px, calc(var(--topo-app,8px) - 6px))} @media (max-width:560px){#view-equ{--eq-abas-h:50px}} .eq{max-width:1280px;margin:0 auto;padding:2px 16px calc(40px + env(safe-area-inset-bottom,0px));box-sizing:border-box;color:var(--label,#323200);display:flex;flex-direction:column;gap:12px;min-width:0} .eq *{box-sizing:border-box} .eq-so-leitor{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .eq-ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .eq-redondo{min-width:44px;height:44px;padding:0 12px;border:0;border-radius:999px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label,#323200);font:inherit;font-size:var(--f-subhead,0.9375rem);font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;flex:none} .eq-redondo span{display:none} .eq-redondo.so-ic{width:44px;padding:0} .eq-redondo.peq{min-width:36px;width:36px;height:36px} html.hub-toque .eq-redondo.peq{min-width:44px;width:44px;height:44px} .eq-badge{position:absolute;top:3px;right:6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--queda,#E21D3C);color:var(--acao-txt,#FFFFFF);font-size:var(--f-caption2,0.6875rem);font-weight:700;line-height:1.125rem;text-align:center} /* Peça ao Cérebro */ .eq-cerebro{display:flex;flex-direction:column;gap:8px;min-width:0} .eq-cerebro-campo{display:flex;align-items:center;gap:8px;min-height:52px;padding:3px 3px 3px 12px;border-radius:26px;background:var(--surface,#FFFFFF);border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));transition:border-color var(--dur-rapida,.12s),box-shadow var(--dur-rapida,.12s)} .eq-cerebro-campo:focus-within{border-color:var(--acao,#1F5FD0);box-shadow:0 0 0 3px color-mix(in srgb,var(--acao,#1F5FD0) 22%,transparent)} .eq-cerebro-campo.ocupado .eq-cerebro-ic{animation:eq-pulso 1.2s ease-in-out infinite} @keyframes eq-pulso{50%{opacity:.4}} .eq-cerebro-ic{width:28px;height:28px;flex:none;object-fit:contain} .eq-cerebro-campo input{flex:1;min-width:0;min-height:44px;border:0;background:transparent;color:inherit;font:inherit;font-size:max(1rem,var(--f-body,1.0625rem))!important;outline:none;padding:0} .eq-cerebro-campo input::placeholder{color:var(--label2,#6B5A4C);text-overflow:ellipsis} .eq-cerebro-ir{width:44px;height:44px;flex:none;border:0;border-radius:999px;background:var(--acao,#1F5FD0);color:var(--acao-txt,#FFFFFF);display:grid;place-items:center;cursor:pointer} .eq-cerebro-ir:disabled{opacity:var(--desligado-opacidade,.42)} .eq-exemplos{display:flex;flex-wrap:wrap;gap:6px} .eq-exemplo{min-height:36px;padding:6px 12px;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:999px;background:var(--surface,#FFFFFF);color:var(--label,#323200);font:inherit;font-size:var(--f-footnote,0.8125rem);text-align:left;cursor:pointer;max-width:100%} html.hub-toque .eq-exemplo{min-height:44px} .eq-previa{padding:14px 16px;border-radius:var(--r-card,16px);background:color-mix(in srgb,var(--d-anil,#5B6CFF) 7%,var(--surface,#FFFFFF));border:1px solid color-mix(in srgb,var(--d-anil,#5B6CFF) 28%,transparent);display:flex;flex-direction:column;gap:10px;min-width:0} .eq-previa-topo{display:flex;align-items:flex-start;gap:8px;color:var(--label,#323200);font-size:var(--f-subhead,0.9375rem);line-height:1.35} .eq-previa-topo .eq-ic{color:var(--d-anil-t,#394DC8);margin-top:1px} .eq-previa-topo p{margin:0} .eq-previa-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:var(--f-subhead,0.9375rem);line-height:1.35} .eq-previa-lista li{overflow-wrap:anywhere} .eq-previa-lista .antes{color:var(--label2,#6B5A4C);text-decoration:line-through} .eq-previa-lista .depois{color:var(--d-verdeagua-t,#006F5D);font-weight:600} .eq-previa-lista .seta{width:14px;height:14px;vertical-align:-2px;color:var(--label2,#6B5A4C)} .eq-previa-lista small{color:var(--label2,#6B5A4C)} .eq-previa-aviso{margin:0;display:flex;gap:6px;align-items:flex-start;color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200));font-size:var(--f-footnote,0.8125rem)} .eq-previa-aviso .eq-ic{width:16px;height:16px;margin-top:1px} .eq-previa-acoes{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end} /* botões */ .eq-btn{min-height:44px;padding:0 16px;border:0;border-radius:var(--r-ctl,12px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label,#323200);font:inherit;font-size:var(--f-subhead,0.9375rem);font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap} .eq-btn .eq-ic{width:18px;height:18px} .eq-btn.primario{background:var(--acao,#1F5FD0);color:var(--acao-txt,#FFFFFF)} .eq-btn.perigo{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} body.dark .eq-btn.perigo{color:color-mix(in srgb,var(--queda,#E21D3C) 50%,var(--label,#323200))} /* 1.72.0: a tinta vermelha no preenchimento escuro dava 3,4:1 */ .eq-btn.largo{width:100%} .eq-btn.peq{min-height:36px;padding:0 12px;font-size:var(--f-footnote,0.8125rem)} html.hub-toque .eq-btn.peq{min-height:44px} .eq-btn:disabled{opacity:var(--desligado-opacidade,.42);cursor:default} .eq-btn:not(:disabled):active,.eq-redondo:active,.eq-exemplo:active,.eq-linha-botao:active,.eq-chip-pessoa:active,.eq-menu-op:active{opacity:var(--apertado-opacidade,.6)} html.hub-clique .eq-btn:not(:disabled):hover,html.hub-clique .eq-redondo:hover,html.hub-clique .eq-exemplo:hover{background:color-mix(in srgb,var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent)) 100%,var(--label,#323200) 6%)} html.hub-clique .eq-btn.primario:not(:disabled):hover{background:color-mix(in srgb,var(--acao,#1F5FD0) 88%,var(--label,#323200))} .eq button:focus-visible,.eq a:focus-visible,.eq input:focus-visible,.eq select:focus-visible,.eq summary:focus-visible,.eqs button:focus-visible,.eqs input:focus-visible,.eqs select:focus-visible,.eqs textarea:focus-visible,.eqs summary:focus-visible,#eq-desfazer button:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px} .eq-seg{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));max-width:100%;min-width:0} .eq-seg button{min-height:36px;min-width:0;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--label,#323200);font:inherit;font-size:var(--f-subhead,0.9375rem);font-weight:600;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto} html.hub-toque .eq-seg button{min-height:44px} .eq-seg button.on{background:var(--surface,#FFFFFF);box-shadow:0 1px 3px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 14%,transparent)} body.dark .eq-seg button.on{background:var(--surface2,#F7F3EE)} .eq-chave{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-size:var(--f-subhead,0.9375rem);font-weight:600} .eq-chave>input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none} .eq-chave-trilho{position:relative;flex:none;width:51px;height:31px;border-radius:999px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));transition:background-color var(--dur-media,.2s)} .eq-chave-trilho::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--surface,#FFFFFF);box-shadow:0 2px 5px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 22%,transparent);transition:transform var(--dur-media,.2s) var(--curva-padrao,ease)} .eq-chave>input:checked+.eq-chave-trilho{background:var(--verde,#11994A)} .eq-chave>input:checked+.eq-chave-trilho::after{transform:translateX(20px)} .eq-chave>input:focus-visible+.eq-chave-trilho{outline:3px solid var(--acao,#1F5FD0);outline-offset:2px} .eq-chave.largo{display:flex;width:100%;flex-direction:row-reverse;justify-content:space-between;font-weight:500} .eq-chave.largo>span:last-child{display:flex;flex-direction:column;gap:2px} .eq-chave small{font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C);font-weight:400} /* cartões, listas e selos */ .eq-conteudo{display:flex;flex-direction:column;gap:12px;min-width:0} .eq-cartao{padding:14px 16px;border-radius:var(--r-card,16px);background:var(--surface,#FFFFFF);border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));min-width:0} .eq-cartao-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px} .eq-cartao-cab>div{min-width:0} .eq-cartao-cab h2{margin:0;font-size:var(--f-title3,1.25rem);font-weight:700;letter-spacing:-.01em} .eq-leve{margin:2px 0 0;color:var(--label2,#6B5A4C);font-size:var(--f-footnote,0.8125rem);line-height:1.35} .eq-vazio{margin:8px 0;color:var(--label2,#6B5A4C);font-size:var(--f-subhead,0.9375rem)} .eq-vazio-grande{display:flex;flex-direction:column;align-items:flex-start;gap:10px} .eq-vazio-grande p{margin:0;font-size:var(--f-body,1.0625rem);color:var(--label2,#6B5A4C)} .eq-erro{margin:0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--queda,#E21D3C) 12%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200));font-size:var(--f-subhead,0.9375rem)} .eq-aviso{margin:0 0 10px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--d-ambar,#C27A00) 16%,transparent);font-size:var(--f-footnote,0.8125rem)} .eq-carregando{display:flex;align-items:center;gap:10px;padding:14px 4px;color:var(--label2,#6B5A4C);font-size:var(--f-subhead,0.9375rem)} .eq-roda{width:18px;height:18px;border-radius:50%;border:2.5px solid color-mix(in srgb,currentColor 22%,transparent);border-top-color:var(--acao,#1F5FD0);animation:ponto-gira .8s linear infinite;flex:none} .eq-lista{list-style:none;margin:0;padding:0} .eq-linha{display:flex;align-items:center;gap:12px;min-height:54px;padding:7px 0;border-top:.5px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));min-width:0} .eq-lista>.eq-linha:first-child{border-top:0} .eq-linha-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;overflow-wrap:anywhere} .eq-linha-txt>b{font-size:var(--f-body,1.0625rem);font-weight:600;line-height:1.25} .eq-linha-txt>span{font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C);line-height:1.3} .eq-linha-botao{min-height:44px;padding:4px 0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;justify-content:center} .eq-linha-lado{flex:0 1 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;max-width:58%} .eq-selos{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px} .eq-linha-lado .eq-redondo.so-ic{background:transparent;color:var(--label2,#6B5A4C)} html.hub-clique .eq-linha-lado .eq-redondo.so-ic:hover{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} .eq-linha.riscada .eq-linha-txt{opacity:.55;text-decoration:line-through} .eq-av{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--av,var(--label3,#9C8D80));color:var(--acao-txt,#FFFFFF);font-size:calc(0.8125rem * var(--dt,1));font-weight:700;letter-spacing:.02em} .eq-selo{display:inline-flex;align-items:center;min-height:24px;padding:2px 9px;border-radius:999px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label,#323200);font-size:var(--f-caption1,0.75rem);font-weight:600;white-space:nowrap} .eq-selo.verde{background:color-mix(in srgb,var(--verde,#11994A) 18%,transparent);color:var(--d-verdeagua-t,#006F5D)} .eq-selo.laranja{background:color-mix(in srgb,var(--d-ambar,#C27A00) 20%,transparent);color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} .eq-selo.vermelho{background:color-mix(in srgb,var(--queda,#E21D3C) 15%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .eq-selo.azul{background:color-mix(in srgb,var(--acao,#1F5FD0) 15%,transparent);color:var(--acao,#1F5FD0)} .eq-selo.indigo{background:color-mix(in srgb,var(--d-anil,#5B6CFF) 16%,transparent);color:var(--d-anil-t,#394DC8)} .eq-grupo{min-width:0} .eq-grupo h3,.eq-grupo summary h3{display:flex;align-items:center;gap:6px;margin:14px 0 2px;font-size:var(--f-footnote,0.8125rem);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--label2,#6B5A4C)} .eq-grupo h3 span{font-weight:500;color:var(--label2,#6B5A4C)} .eq-grupo.verde h3{color:var(--d-verdeagua-t,#006F5D)} .eq-grupo.laranja h3{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} .eq-grupo.vermelho h3{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .eq-grupo.azul h3{color:var(--acao,#1F5FD0)} .eq-mais{min-width:0} .eq-mais>summary{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-height:44px;cursor:pointer;list-style:none;font-size:var(--f-subhead,0.9375rem);font-weight:600;color:var(--acao,#1F5FD0)} .eq-mais>summary::-webkit-details-marker{display:none} .eq-mais>summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:auto;transition:transform var(--dur-media,.2s)} .eq-mais[open]>summary::after{transform:rotate(225deg)} .eq-mais>summary>span{font-weight:400;font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C)} .eq-mais>summary h3{margin:0} .eq-grupo.eq-mais>summary{color:inherit} /* aba Agora */ .eq-numeros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:8px 0 4px} .eq-numero{min-width:0;padding:10px 8px;border-radius:12px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));display:flex;flex-direction:column;align-items:flex-start;gap:2px} .eq-numero b{font-size:var(--f-title2,1.375rem);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1;white-space:nowrap} .eq-numero span{font-size:var(--f-caption1,0.75rem);color:var(--label2,#6B5A4C);line-height:1.2} .eq-numero.verde b{color:var(--d-verdeagua-t,#006F5D)} .eq-numero.laranja{background:color-mix(in srgb,var(--d-ambar,#C27A00) 14%,transparent)} .eq-numero.laranja b{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} .eq-numero.azul{background:color-mix(in srgb,var(--verde,#11994A) 14%,transparent)} .eq-numero.azul b{color:var(--d-verdeagua-t,#006F5D)} .eq-numero.indigo b{color:var(--d-anil-t,#394DC8)} .eq-barra-h{display:block;height:8px;margin-top:5px;border-radius:999px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));overflow:hidden} .eq-barra-h i{display:block;height:100%;border-radius:inherit;background:var(--acao,#1F5FD0)} .eq-barra-h.acima i{background:var(--queda,#E21D3C)} .eq-barra-h.verde{margin:4px 0 6px}.eq-barra-h.verde i{background:var(--verde,#11994A)} /* aba Escala */ .eq-avisos{display:flex;flex-wrap:wrap;gap:6px} .eq-aviso-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:0;border-radius:999px;font:inherit;font-size:var(--f-footnote,0.8125rem);font-weight:600;text-align:left;max-width:100%} button.eq-aviso-chip{cursor:pointer} html.hub-toque button.eq-aviso-chip{min-height:44px} .eq-aviso-chip .eq-ic{width:16px;height:16px} .eq-aviso-chip.laranja{background:color-mix(in srgb,var(--d-ambar,#C27A00) 18%,transparent);color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} .eq-aviso-chip.vermelho{background:color-mix(in srgb,var(--queda,#E21D3C) 14%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .eq-aviso-chip.indigo{background:color-mix(in srgb,var(--d-anil,#5B6CFF) 14%,transparent);color:var(--d-anil-t,#394DC8)} .eq-dica{margin:6px 2px 0;color:var(--label2,#6B5A4C);font-size:var(--f-footnote,0.8125rem)} /* pessoa no turno (a peça que se arrasta) */ .eq-chip-pessoa{display:flex;align-items:center;gap:6px;width:100%;min-width:0;min-height:36px;padding:4px 6px;border:0;border-radius:10px;background:color-mix(in srgb,var(--acao,#1F5FD0) 11%,var(--surface,#FFFFFF));color:var(--label,#323200);font:inherit;font-size:var(--f-footnote,0.8125rem);font-weight:600;text-align:left;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} .eq-chip-pessoa .eq-av{width:24px;height:24px;font-size:var(--f-caption2,0.6875rem)} .eq-chip-nome{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;overflow:hidden} .eq-chip-nome,.eq-chip-nome small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .eq-chip-nome small{font-size:var(--f-caption2,0.6875rem);font-weight:500;color:var(--label2,#6B5A4C)} .eq-chip-pessoa.dobra{background:color-mix(in srgb,var(--d-anil,#5B6CFF) 15%,var(--surface,#FFFFFF))} .eq-dobra{flex:none;font-style:normal;font-size:var(--f-caption2,0.6875rem);font-weight:800;color:var(--d-anil-t,#394DC8)} .eq-chip-pessoa.grande{min-height:54px;padding:6px 10px;border-radius:12px;font-size:var(--f-body,1.0625rem)} .eq-chip-pessoa.grande .eq-av{width:36px;height:36px;font-size:calc(0.8125rem * var(--dt,1))} .eq-chip-pessoa.grande .eq-chip-nome small{font-size:var(--f-footnote,0.8125rem)} .eq-mais-ic{flex:none;color:var(--label2,#6B5A4C);display:grid;place-items:center;width:28px} .eq-horas{flex:none;font-size:var(--f-caption1,0.75rem);font-weight:700;font-variant-numeric:tabular-nums;color:var(--label2,#6B5A4C)} .eq-horas.acima{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} [data-arrasta]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} /* computador: lista de pessoas ao lado e a grade da semana (dias em colunas, Dia e Noite em linhas) */ .eq-escala-larga{display:grid;grid-template-columns:230px minmax(0,1fr);gap:12px;align-items:start;min-width:0} .eq-painel{position:sticky;top:calc(var(--eq-topo) + var(--eq-abas-h) + 16px);max-height:calc(100dvh - var(--eq-topo) - var(--eq-abas-h) - 32px);overflow:auto;padding:12px;border-radius:var(--r-card,16px);background:var(--surface,#FFFFFF);border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .eq-painel header h2{margin:0;font-size:var(--f-headline,1.0625rem);font-weight:700} .eq-painel-lista{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px} .eq-painel .eq-chip-pessoa.grande{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));font-size:var(--f-subhead,0.9375rem);min-height:48px} .eq-grade-caixa{min-width:0} .eq-grade{display:grid;grid-template-columns:96px repeat(var(--dias,7),minmax(0,1fr));border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:var(--r-card,16px);background:var(--surface,#FFFFFF);overflow:hidden} .eq-grade-canto{border-bottom:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .eq-grade-dia{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-bottom:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-left:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));min-width:0} .eq-dia-botao{min-height:44px;width:100%;border:0;border-radius:10px;background:transparent;color:inherit;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer} .eq-dia-botao b{font-size:var(--f-subhead,0.9375rem)} .eq-dia-botao span{font-size:var(--f-caption1,0.75rem);color:var(--label2,#6B5A4C)} html.hub-clique .eq-dia-botao:hover{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} .eq-grade-dia.hoje .eq-dia-botao b,.eq-grade-dia.hoje .eq-dia-botao span{color:var(--acao,#1F5FD0)} .eq-grade-dia.passado{opacity:.6} .eq-mov{font-style:normal;font-size:var(--f-caption2,0.6875rem);font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} .eq-grade-faixa{display:flex;flex-direction:column;gap:2px;padding:10px 10px;border-top:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));background:var(--surface2,#F7F3EE)} .eq-grade-faixa b{font-size:var(--f-headline,1.0625rem)} .eq-grade-faixa span{font-size:var(--f-caption1,0.75rem);color:var(--label2,#6B5A4C)} .eq-celula{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0;min-height:128px;padding:6px 6px 42px;border-top:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-left:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));transition:background-color var(--dur-rapida,.12s)} .eq-celula.hoje{background:color-mix(in srgb,var(--acao,#1F5FD0) 5%,transparent)} .eq-celula.vazia:not(.passado){background:color-mix(in srgb,var(--d-ambar,#C27A00) 7%,transparent)} .eq-celula.passado{background:color-mix(in srgb,var(--label,#323200) 3%,transparent)} .eq-celula-hora{font-size:var(--f-caption2,0.6875rem);font-weight:700;color:var(--label2,#6B5A4C);text-transform:uppercase;letter-spacing:.03em} .eq-celula-vazia{display:flex;align-items:center;gap:4px;font-size:var(--f-caption1,0.75rem);font-weight:600;color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))} .eq-celula-vazia .eq-ic{width:14px;height:14px} .eq-celula-add{position:absolute;left:6px;right:6px;bottom:5px;height:32px;border:1px dashed var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:9px;background:transparent;color:var(--label2,#6B5A4C);display:grid;place-items:center;cursor:pointer;opacity:.55} .eq-celula-add .eq-ic{width:16px;height:16px} html.hub-clique .eq-celula:hover .eq-celula-add,.eq-celula-add:focus-visible{opacity:1} .eq-dia{padding-top:10px} .eq-faixa{padding:12px 0 14px;border-top:.5px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:4px;transition:background-color var(--dur-rapida,.12s)} .eq-faixa h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:0 0 8px;font-size:var(--f-headline,1.0625rem);font-weight:700} .eq-faixa h3 span{font-size:var(--f-footnote,0.8125rem);font-weight:500;color:var(--label2,#6B5A4C)} .eq-faixa-lista{display:flex;flex-direction:column;gap:6px} .eq-faixa-vazia{display:flex;align-items:flex-start;gap:6px;margin:0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--d-ambar,#C27A00) 12%,transparent);color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200));font-size:var(--f-subhead,0.9375rem);font-weight:600} .eq-faixa-vazia .eq-ic{margin-top:1px} .eq-faixa-add{margin-top:8px;width:100%;background:transparent;border:1.5px dashed var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));color:var(--acao,#1F5FD0)} .eq-faixa.folga .eq-linha-lado{max-width:none;flex-wrap:nowrap} .eq-faixa.folga .eq-linha{cursor:grab} /* arrastar: onde pode soltar acende; o item levantado tem sombra */ html.eq-arrastando,html.eq-arrastando *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important} html.eq-arrastando-turno .eq-celula,html.eq-arrastando-pessoa .eq-celula,html.eq-arrastando-turno .eq-faixa,html.eq-arrastando-pessoa .eq-faixa:not(.folga),html.eq-arrastando-modelo .eq-hoje,html.eq-arrastando-modelo .eq-reordena{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--acao,#1F5FD0) 35%,transparent)} .eq-alvo{background:color-mix(in srgb,var(--acao,#1F5FD0) 14%,transparent)!important;box-shadow:inset 0 0 0 2px var(--acao,#1F5FD0)!important} .eq-origem{opacity:.35} .eq-fantasma{position:fixed!important;left:0!important;top:0!important;z-index:2000;margin:0!important;pointer-events:none;border-radius:12px;box-shadow:0 18px 44px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 30%,transparent),0 2px 6px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 14%,transparent);opacity:.97;will-change:transform;list-style:none} li.eq-fantasma{display:flex;align-items:center;gap:12px;padding:6px 12px;background:var(--surface,#FFFFFF);border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .eq-insercao{height:4px;margin:2px 0;border-radius:2px;background:var(--acao,#1F5FD0);list-style:none;pointer-events:none} /* a tarefa arrastada no celular: uma pílula com o nome (o card inteiro tampava a bandeja) */ .eq-fantasma-pilula{display:flex;align-items:center;gap:8px;max-width:min(300px,80vw);min-height:48px;padding:0 16px;background:var(--surface,#FFFFFF);color:var(--label,#323200);border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:999px;font-size:var(--f-subhead,0.9375rem);font-weight:700;white-space:nowrap} .eq-fantasma-pilula span{overflow:hidden;text-overflow:ellipsis} .eq-fantasma-pilula .eq-ic{color:var(--acao,#1F5FD0)} /* o botão da Equipe não encolhe no toque (o "apertado" geral do Hub é scale(.94)): o retorno é a opacidade */ #view-equ button:not(:disabled):active,#view-equ .pressed,#eq-folha-raiz button:not(:disabled):active,#eq-folha-raiz .pressed{transform:none!important;filter:none!important} /* no celular a bandeja fica embaixo, perto do polegar, acima da barra do app */ #eq-bandeja{position:fixed;left:16px;right:16px;bottom:max(20px, calc(env(safe-area-inset-bottom,0px) + 12px));z-index:1990;min-height:72px;padding:10px 16px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:16px;border:2px dashed var(--acao,#1F5FD0);background:color-mix(in srgb,var(--acao,#1F5FD0) 12%,var(--surface,#FFFFFF));color:var(--acao,#1F5FD0);font-size:var(--f-subhead,0.9375rem);font-weight:700;text-align:center;box-shadow:0 10px 30px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 18%,transparent)} html.app-nativo #eq-bandeja{bottom:calc(var(--rodape-app,64px) + 12px)} #eq-bandeja.eq-alvo{background:color-mix(in srgb,var(--acao,#1F5FD0) 26%,var(--surface,#FFFFFF))!important} /* aba Tarefas */ .eq-solta-dica{display:none} html.eq-arrastando-modelo .eq-hoje .eq-solta-dica{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0 0;min-height:56px;border:2px dashed var(--acao,#1F5FD0);border-radius:12px;color:var(--acao,#1F5FD0);font-size:var(--f-subhead,0.9375rem);font-weight:600} .eq-check{width:44px;height:44px;flex:none;margin:-4px -4px -4px -6px;padding:0;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:transparent} .eq-check .eq-ic{width:26px;height:26px;padding:4px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--label3,#9C8D80);stroke-width:3} .eq-item.atrasada .eq-check .eq-ic{box-shadow:inset 0 0 0 2px var(--queda,#E21D3C)} .eq-item.agora .eq-check .eq-ic{box-shadow:inset 0 0 0 2px var(--acao,#1F5FD0)} .eq-check.feita .eq-ic,.eq-check.sistema .eq-ic{color:var(--acao-txt,#FFFFFF);background:color-mix(in srgb,var(--verde,#11994A) 80%,var(--label,#323200));box-shadow:none} .eq-check.sistema .eq-ic{background:var(--acao,#1F5FD0)} .eq-check:disabled{opacity:.4;cursor:default} html.hub-clique .eq-check:not(:disabled):not(.feita):hover .eq-ic{color:var(--label2,#6B5A4C)} .eq-item.feita .eq-linha-txt>b,.eq-item.feita_atrasada .eq-linha-txt>b{color:var(--label2,#6B5A4C);text-decoration:line-through;text-decoration-thickness:1px} .eq-modelo .eq-alca{flex:none;width:24px;height:44px;display:grid;place-items:center;color:var(--label2,#6B5A4C);cursor:grab;margin-left:-4px} .eq-modelo .eq-linha-botao{flex:1 1 auto} .eq-modelo.pausada .eq-linha-txt{opacity:.55} .eq-modelo{cursor:grab} .eq-reordena{min-height:10px;border-radius:10px;transition:background-color var(--dur-rapida,.12s)} .eq-hoje{transition:background-color var(--dur-rapida,.12s)} /* aba Pessoas */ .eq-busca{flex:1 1 220px;min-width:0} .eq-busca input,.eq-campo input,.eq-campo select,.eq-campo textarea,.eq-pordia input,.eq-marcar input{box-sizing:border-box;width:100%;min-width:0;min-height:48px;padding:10px 14px;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:12px;background:var(--surface,#FFFFFF);color:var(--label,#323200);font:inherit;font-size:max(1rem,var(--f-body,1.0625rem))!important;line-height:1.25} .eq-busca input{border-radius:12px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));border-color:transparent} .eq-pessoas{padding:4px 16px} .eq-pessoas .eq-linha-lado{flex-wrap:nowrap} .eq-status{width:30px;height:30px;display:grid;place-items:center;color:var(--label2,#6B5A4C)} .eq-status .eq-ic{width:19px;height:19px} .eq-status.ok{color:var(--d-verdeagua-t,#006F5D)} /* folhas (formulários e menus): Cancelar e Salvar no topo, sempre à vista; o corpo rola por baixo */ #eq-folha-raiz{position:fixed;inset:0;z-index:1285;touch-action:manipulation} #eq-folha-raiz[hidden]{display:none} html.eq-folha-aberta,html.eq-folha-aberta body{overscroll-behavior:none} .eqs-veu{position:absolute;inset:0;background:color-mix(in srgb,var(--label,#323200) 42%,transparent);opacity:0;transition:opacity .3s var(--curva-padrao,ease)} body.dark .eqs-veu{background:color-mix(in srgb,var(--surface2,#F7F3EE) 58%,transparent)} #eq-folha-raiz.aberta .eqs-veu{opacity:var(--veu,1)} #eq-folha-raiz.hub-folha-arrastando .eqs-veu{transition:none} .eqs{position:absolute;left:0;right:0;bottom:0;margin:0 auto;width:min(720px,100%);max-height:calc(100dvh - max(env(safe-area-inset-top,0px) + 12px, 4dvh));display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box; border-radius:22px 22px 0 0;background:var(--vidro-solido,var(--surface,#FFFFFF));color:var(--label,#323200);box-shadow:0 -10px 44px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 22%,transparent),var(--vidro-brilho,none);-webkit-backface-visibility:hidden;backface-visibility:hidden} html.app-ios .eqs{max-height:calc(100dvh - var(--app-status,0px) - 10px)} body.dark .eqs{background:var(--vidro-solido,var(--surface2,#F7F3EE))} .eqs-alca{flex:none;height:18px;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none} .eqs-alca span{width:40px;height:5px;border-radius:3px;background:var(--folha-alca,color-mix(in srgb,var(--label,#323200) 30%,transparent))} .eqs-topo{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;padding:0 6px 8px;border-bottom:.5px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .eqs-topo h2{margin:0;max-width:min(52vw,420px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:var(--f-headline,1.0625rem);font-weight:700;outline:none;cursor:grab} .eqs-cancelar,.eqs-salvar{min-height:44px;min-width:0;padding:0 10px;border:0;border-radius:10px;background:transparent;color:var(--acao,#1F5FD0);font:inherit;font-size:var(--f-body,1.0625rem);cursor:pointer;white-space:nowrap} .eqs-cancelar{justify-self:start} .eqs-salvar{justify-self:end;font-weight:700} .eqs-salvar:disabled{opacity:.4} .eqs-lugar{justify-self:end;width:44px} html.hub-clique .eqs-cancelar:hover,html.hub-clique .eqs-salvar:not(:disabled):hover{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} .eqs-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px 16px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px} @media (min-width:641px){.eqs-topo{padding-left:10px;padding-right:10px}.eqs-corpo{padding-left:20px;padding-right:20px}} /* 1.72.0: 20 pt de margem no iPad */ .eqs-corpo>.eq-leve{margin:0} @media (min-width:760px){ .eqs{top:0;bottom:0;margin:auto;height:fit-content;max-height:min(88dvh,900px);width:min(660px,calc(100% - 48px));border-radius:20px;box-shadow:0 24px 70px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 30%,transparent),var(--vidro-brilho,none)} .eqs.menu{width:min(460px,calc(100% - 48px))} .eqs-alca{height:10px} .eqs-alca span{display:none} .eqs-corpo{padding-bottom:20px} } @media (prefers-reduced-motion:reduce){.eqs-veu,.eq-chave-trilho,.eq-chave-trilho::after{transition:none}.eq-cerebro-campo.ocupado .eq-cerebro-ic{animation:none}} /* campos */ .eq-campos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:12px 14px;min-width:0} .eq-campo{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;padding:0;border:0} .eq-campo.largo{grid-column:1/-1} .eq-campo[hidden]{display:none} .eq-campo>span,.eq-campo>legend{padding:0;font-size:var(--f-footnote,0.8125rem);font-weight:600;color:var(--label2,#6B5A4C)} .eq-campo>span i{font-style:normal;color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .eq-campo small{font-size:var(--f-caption1,0.75rem);color:var(--label2,#6B5A4C);min-height:1em} .eq-campo textarea{min-height:76px;resize:vertical} .eq-campo select{-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px} .eq-campo input[type=time],.eq-campo input[type=date]{font-variant-numeric:tabular-nums} .eq-campo input.valido{border-color:var(--verde,#11994A)} .eq-campo input.invalido{border-color:var(--queda,#E21D3C)} .eq-campo input:focus,.eq-campo select:focus,.eq-campo textarea:focus,.eq-busca input:focus{outline:none;border-color:var(--acao,#1F5FD0);box-shadow:0 0 0 3px color-mix(in srgb,var(--acao,#1F5FD0) 22%,transparent)} body.dark .eq-campo input,body.dark .eq-campo select,body.dark .eq-campo textarea,body.dark .eq-pordia input{background:var(--surface2,#F7F3EE);border-color:color-mix(in srgb,var(--label,#323200) 14%,transparent)} .eq-linha-campos{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;grid-column:1/-1;min-width:0} .eq-linha-campos.tres{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)} .eq-linha-campos[hidden]{display:none} @media (max-width:560px){.eq-linha-campos.tres{grid-template-columns:1fr 1fr}.eq-linha-campos.tres>:first-child{grid-column:1/-1}} .eq-endereco{grid-column:1/-1;margin:-4px 0 0;font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C)} .eq-escolhas{gap:8px} .eq-escolhas[hidden]{display:none} .eq-escolhas-l{display:flex;flex-wrap:wrap;gap:6px} .eq-escolha{position:relative;display:inline-flex} .eq-escolha input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none} .eq-escolha span{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));background:var(--surface,#FFFFFF);font-size:var(--f-subhead,0.9375rem);font-weight:600;cursor:pointer;white-space:nowrap} html.hub-toque .eq-escolha span{min-height:44px} .eq-escolha.on span,.eq-escolha input:checked+span{background:var(--acao,#1F5FD0);border-color:var(--acao,#1F5FD0);color:var(--acao-txt,#FFFFFF)} .eq-escolha input:focus-visible+span{outline:3px solid var(--acao,#1F5FD0);outline-offset:2px} body.dark .eq-escolha span{background:var(--surface2,#F7F3EE);border-color:color-mix(in srgb,var(--label,#323200) 14%,transparent)} body.dark .eq-escolha.on span,body.dark .eq-escolha input:checked+span{background:var(--acao,#1F5FD0);border-color:var(--acao,#1F5FD0);color:var(--label,#323200)} /* no escuro os campos nativos (hora, data, lista) desenham o relógio e a seta claros */ body.dark .eq,body.dark .eqs{color-scheme:dark} .eq-escolhas-l.dias .eq-escolha span{min-width:52px;padding:0 10px} .eq-secao{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:.5px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))} .eq-secao h3{margin:0;font-size:var(--f-headline,1.0625rem);font-weight:700} .eqs-corpo>.eq-secao:first-child{border-top:0;padding-top:0} .eq-botoes{flex-direction:row;flex-wrap:wrap} .eq-botoes .eq-btn{flex:1 1 200px} .eq-turno-cfg{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:14px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} .eq-pordia{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:8px} .eq-pordia-l{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,1fr);gap:6px;align-items:center} .eq-pordia-l b{font-size:var(--f-subhead,0.9375rem)} .eq-semana-pessoa{display:flex;flex-direction:column;gap:8px} .eq-dia-linha{margin:0;padding:8px 0 0;border:0;border-top:.5px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));min-width:0} .eq-dia-linha legend{padding:0;float:left;width:100%;margin-bottom:6px;font-size:var(--f-subhead,0.9375rem);font-weight:700} .eq-marcar{margin:0} .eq-marcar-linha{display:flex;align-items:center;gap:12px;min-height:58px;padding:6px 0;cursor:pointer} .eq-marcar-linha input{position:absolute;opacity:0;width:1px;height:1px;min-height:0!important;padding:0!important} .eq-marca{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 2px var(--label3,#9C8D80);color:transparent} .eq-marca .eq-ic{width:18px;height:18px;stroke-width:3} .eq-marcar-linha input:checked~.eq-marca{background:var(--acao,#1F5FD0);box-shadow:none;color:var(--acao-txt,#FFFFFF)} .eq-marcar-linha input:focus-visible~.eq-marca{outline:3px solid var(--acao,#1F5FD0);outline-offset:2px} .eq-menu{display:flex;flex-direction:column;gap:6px} .eq-menu.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} .eq-menu-op{display:flex;align-items:center;gap:12px;min-height:54px;padding:8px 14px;border:0;border-radius:14px;background:var(--surface,#FFFFFF);color:var(--label,#323200);font:inherit;font-size:var(--f-body,1.0625rem);font-weight:600;text-align:left;cursor:pointer} body.dark .eq-menu-op{background:var(--surface2,#F7F3EE)} .eq-menu-op span{display:flex;flex-direction:column;gap:1px;min-width:0} .eq-menu-op small{font-size:var(--f-footnote,0.8125rem);font-weight:400;color:var(--label2,#6B5A4C)} .eq-menu-op .eq-ic{color:var(--acao,#1F5FD0)} .eq-menu-op.perigo{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} .eq-menu-op.perigo .eq-ic{color:currentColor} .eq-menu-op:disabled{opacity:.4;cursor:default} html.hub-clique .eq-menu-op:not(:disabled):hover{background:color-mix(in srgb,var(--surface,#FFFFFF) 90%,var(--label,#323200) 8%)} .eq-foto{display:flex;justify-content:center} .eq-foto img{max-width:100%;border-radius:14px} /* aviso com Desfazer (embaixo, acima da barra do app) */ #eq-desfazer{position:fixed;left:50%;bottom:calc(max(16px, env(safe-area-inset-bottom,0px) + 8px));z-index:1400;display:flex;align-items:center;gap:6px;width:max-content;max-width:calc(100vw - 32px);min-height:52px;padding:6px 6px 6px 18px;border-radius:18px;background:var(--vidro-grosso,color-mix(in srgb,var(--label,#323200) 92%,transparent));color:var(--label,#323200);font-size:var(--f-subhead,0.9375rem);font-weight:600; -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:var(--vidro-brilho,none),0 12px 36px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 22%,transparent);transform:translate(-50%,calc(100% + 40px));opacity:0;pointer-events:none;transition:transform .32s var(--curva-mola,cubic-bezier(.2,1.25,.35,1)),opacity .2s linear} #eq-desfazer.on{transform:translate(-50%,0);opacity:1;pointer-events:auto} #eq-desfazer.erro{box-shadow:var(--vidro-brilho,none),inset 4px 0 0 var(--queda,#E21D3C),0 12px 36px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 22%,transparent)} html.app-nativo #eq-desfazer{bottom:calc(var(--rodape-app,64px) + 12px)} #eq-desfazer>span{min-width:0;overflow-wrap:anywhere;line-height:1.3} #eq-desfazer button{flex:none;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--acao,#1F5FD0);font:inherit;font-weight:700;display:inline-flex;align-items:center;gap:6px;cursor:pointer} #eq-desfazer button.x{width:44px;padding:0;justify-content:center;color:var(--label2,#6B5A4C)} @media (prefers-reduced-motion:reduce){#eq-desfazer{transition:opacity .2s linear}} /* 1.70.0 (auditoria, 29/09/2026): fundo azul cheio com texto branco segue a regra de contraste do Hub (index.html, seção 7): o azul do sistema com branco dá 3,5:1; o tom --on-blue passa de 4,5:1 no claro e no escuro. Só a cor do fundo muda. */ .eq-btn.primario,.ponto-btn.primario,body.dark .ponto-btn.primario,.ponto-tecla.ok,.ponto-poses li.agora{background:var(--acao,#1F5FD0)} /* 1.72.0 (pente fino final): o campo "Peça ao Cérebro" da Equipe é a mesma cápsula do campo do Cérebro (52 pt, cantos de 26, enviar de 44 pt em --on-blue); e todo botão azul com letra branca da Equipe, do Ponto e das Tarefas usa --on-blue (o azul do sistema com letra branca dava 3,5:1) */ /* /recomendacoes.css */ /* 1.71.0 (Philippe, 29/09/2026): recomendações do Cérebro (web/recomendacoes.js). Tokens do Hub (--label, --fill, --sys-*); claro e escuro; a página nunca rola para o lado. 1.72.0 (Philippe: "a interface do cérebro tem que ser única"): no topo de cada tela de dados fica só uma ENTRADA de uma linha ("Cérebro: 3 recomendações para esta tela"), que abre o Cérebro único (web/cerebro.js) em "Para esta tela". Os cartões, o detalhe, as dispensadas e o aviso de Desfazer são desenhados aqui e moram DENTRO do Cérebro (.cu). Padrão Apple: texto colorido pelas tintas --ink-* (contraste AA no claro e no escuro), letra mínima de 11 pt, alvos de 44 pt, conteúdo em material sólido (vidro só no que flutua), "reduzir movimento". */ /* ------------------------------------------------------------------ a entrada de cada tela */ .hr-faixa{margin:0 0 16px;min-width:0;max-width:100%} .hr-faixa[hidden]{display:none} .hr-entrada{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 12px 8px 12px;border:0;border-radius:var(--r-card,16px);background:var(--surface,#FFFFFF);box-shadow:0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent)),0 1px 3px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 6%,transparent);color:var(--label,#323200);font:inherit;text-align:left;cursor:pointer;min-width:0;max-width:100%;transition:transform var(--dur-rapida,.12s) ease,background-color var(--dur-rapida,.12s) ease} body.dark .hr-entrada{background:var(--surface2,#F7F3EE);box-shadow:0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent))} .hr-entrada:active{transform:scale(var(--apertado-escala,.98))} @media (hover:hover){.hr-entrada:hover{background:color-mix(in srgb,var(--surface,#FFFFFF) 92%,var(--label,#323200))}body.dark .hr-entrada:hover{background:color-mix(in srgb,var(--surface2,#F7F3EE) 90%,var(--surface,#FFFFFF))}} .hr-entrada:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px} .hr-entrada .hr-cerebro.philippe-brain{flex:none;width:30px;height:33px} .hr-entrada-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .hr-entrada-txt strong{font-size:var(--f-subhead,0.9375rem);font-weight:600;letter-spacing:-.01em;line-height:1.3;overflow-wrap:anywhere} .hr-entrada-txt span{font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C);line-height:1.3;overflow-wrap:anywhere;display:var(--hr-entrada-sub,-webkit-box);-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden} /* 1.74.0 (desempenho): --hr-entrada-sub vale none na tela de faixa inteira com a entrada vazia (web/hub-carrossel.css); até duas linhas, como a linha de uma lista do iOS (sem reticências cortando no meio da frase) */ .hr-entrada .hr-seguir{flex:none;width:18px;height:18px;fill:none;stroke:var(--label3,#9C8D80);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .hr-faixa:not(.vazia):not(.carregando) .hr-entrada[data-prioridade="1"] .hr-entrada-txt strong::before{content:"";display:inline-block;width:8px;height:8px;margin:0 8px 1px 0;border-radius:50%;background:var(--d-ambar,#C27A00);vertical-align:middle} .hr-faixa.vazia .hr-entrada-txt strong{font-weight:500;color:var(--label2,#6B5A4C)} .hr-faixa.carregando .hr-entrada{cursor:progress} .hr-faixa.carregando .hr-entrada-txt span{animation:hr-pulsa 1.4s ease-in-out infinite} @keyframes hr-pulsa{50%{opacity:.45}} @keyframes hr-brilho{from{background-position:100% 0}to{background-position:0 0}} /* ------------------------------------------------------------------ os cartões (dentro do Cérebro) */ :is(.hr-folha,.cu) .hr-item{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;padding:14px 16px 10px;border-radius:var(--r-card,16px);background:var(--cu-cartao,var(--surface,#FFFFFF));box-shadow:0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent));transition:opacity .18s ease,transform .18s ease} :is(.hr-folha,.cu) .hr-item.clicavel{cursor:pointer} :is(.hr-folha,.cu) .hr-item.saindo{opacity:0;transform:scale(.97)} :is(.hr-faixa,.hr-folha,.cu) .hr-tag{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));line-height:1.35;font-weight:600;color:var(--label2,#6B5A4C);min-width:0;overflow-wrap:anywhere} /* 1.72.0 (pente fino): a etiqueta quebra a linha em vez de cortar com reticências ("Atenção: Gutierrez e Cidade No…") */ :is(.hr-faixa,.hr-folha,.cu) .hr-pont{flex:none;width:8px;height:8px;margin-top:calc(.675em - 4px);border-radius:50%;background:var(--acao,#1F5FD0)} :is(.hr-folha,.cu) :is(.hr-item,.hr-det)[data-prioridade="1"] .hr-pont{background:var(--d-ambar,#C27A00)} :is(.hr-folha,.cu) :is(.hr-item,.hr-det)[data-prioridade="3"] .hr-pont{background:var(--verde,#11994A)} :is(.hr-faixa,.hr-folha,.cu) .hr-tit{margin:0;font-size:var(--f-headline,1.0625rem);font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--label,#323200);overflow-wrap:anywhere} :is(.hr-faixa,.hr-folha,.cu) .hr-txt{margin:0;font-size:var(--f-subhead,0.9375rem);line-height:1.45;color:var(--label2,#6B5A4C);overflow-wrap:anywhere} :is(.hr-faixa,.hr-folha,.cu) .hr-fonte{margin:2px 0 0;font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));color:var(--label2,#6B5A4C);line-height:1.3;overflow-wrap:anywhere} :is(.hr-faixa,.hr-folha,.cu) .hr-botoes{display:flex;align-items:center;gap:8px;margin-top:4px;padding-top:6px;flex-wrap:wrap} /* botões: fundo neutro e texto na tinta (o azul do sistema como texto dava 2,7 a 3,5:1) */ :is(.hr-faixa,.hr-folha,.cu,.hr-aviso) :is(.hr-acao,.hr-mais,.hr-sala){display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--acao,#1F5FD0);font:inherit;font-size:var(--f-subhead,0.9375rem);font-weight:600;padding:0 16px;min-height:44px;cursor:pointer;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform var(--dur-rapida,.12s) ease,background-color var(--dur-rapida,.12s) ease} :is(.hr-folha,.cu) .hr-mais{background:var(--acao,#1F5FD0);color:var(--acao-txt,#FFFFFF)} :is(.hr-faixa,.hr-folha,.cu,.hr-aviso) :is(.hr-acao,.hr-mais,.hr-sala,.hr-dispensar,.hr-todas):active{transform:scale(var(--apertado-escala,.97))} @media (hover:hover){:is(.hr-folha,.cu,.hr-aviso) :is(.hr-acao,.hr-sala):hover{background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent))}:is(.hr-folha,.cu) .hr-mais:hover{filter:brightness(1.08)}} :is(.hr-faixa,.hr-folha,.cu) .hr-dispensar{border:0;background:transparent;color:var(--label2,#6B5A4C);font:inherit;font-size:var(--f-subhead,0.9375rem);font-weight:500;padding:0 12px;min-height:44px;border-radius:999px;cursor:pointer;margin-left:auto} :is(.hr-faixa,.hr-folha,.cu) .hr-dispensar:hover{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} :is(.hr-faixa,.hr-folha,.cu) .hr-todas{flex:none;border:0;background:transparent;color:var(--acao,#1F5FD0);font:inherit;font-size:var(--f-subhead,0.9375rem);font-weight:600;padding:0 10px;border-radius:var(--r-ctl,12px);cursor:pointer;min-height:44px} :is(.hr-faixa,.hr-folha,.cu) .hr-todas:hover{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} :is(.hr-faixa,.hr-folha,.cu,.hr-aviso) :is(.hr-acao,.hr-mais,.hr-sala,.hr-dispensar,.hr-todas,.hr-fechar):focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px} /* carregando: o espaço já reservado */ :is(.hr-folha,.cu) .hr-det-carregando{min-height:240px;border-radius:var(--r-card,16px);background:linear-gradient(100deg,var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent)) 30%,var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent)) 50%,var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent)) 70%) 0 0/300% 100%;animation:hr-brilho 1.4s ease-in-out infinite} :is(.hr-folha,.cu) .hr-folha-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .hr-folha-vazia{margin:12px 0;color:var(--label2,#6B5A4C)} :is(.hr-faixa,.hr-folha,.cu) .hr-ev{margin-top:4px} :is(.hr-faixa,.hr-folha,.cu) .hr-ev-per{margin:0 0 4px;font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));color:var(--label2,#6B5A4C)} :is(.hr-faixa,.hr-folha,.cu) .hr-ev ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 12px} :is(.hr-faixa,.hr-folha,.cu) .hr-ev li{display:flex;justify-content:space-between;gap:8px;font-size:var(--f-footnote,0.8125rem);border-bottom:.5px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));padding:4px 0;min-width:0} :is(.hr-faixa,.hr-folha,.cu) .hr-ev li span{color:var(--label2,#6B5A4C);min-width:0;overflow-wrap:anywhere} :is(.hr-faixa,.hr-folha,.cu) .hr-ev li b{font-weight:600;white-space:nowrap} :is(.hr-faixa,.hr-folha,.cu) .hr-ev li.hr-mercado{grid-column:1/-1;flex-wrap:wrap} :is(.hr-faixa,.hr-folha,.cu) .hr-ev li.hr-mercado em{flex-basis:100%;font-style:normal;font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));color:var(--label2,#6B5A4C)} /* toque: área mínima de 44 px */ html.hub-toque :is(.hr-faixa,.hr-folha,.cu) .hr-acao,html.hub-toque :is(.hr-faixa,.hr-folha,.cu) .hr-dispensar,html.hub-toque :is(.hr-faixa,.hr-folha,.cu) .hr-todas{min-height:44px} @media (max-width:759px){ :is(.hr-faixa,.hr-folha,.cu) .hr-ev ul{grid-template-columns:minmax(0,1fr)} :is(.hr-folha,.cu) .hr-botoes .hr-dispensar{margin-left:0} } @media (prefers-reduced-motion:reduce){ .hr-entrada,:is(.hr-folha,.cu) .hr-item{transition:none} .hr-faixa.carregando .hr-entrada-txt span,:is(.hr-folha,.cu) .hr-det-carregando{animation:none} } /* 1.72.0 (Philippe, 29/09/2026): tabela por unidade e rede, a lente crítica do iFood, dispensar e desfazer. Texto sempre nas cores de texto (--label*); a cor só marca (bolinha, borda). Letra mínima de 11 px. */ :is(.hr-faixa,.hr-folha,.cp,.cu) .hr-tab-rola{max-width:100%;overflow-x:auto;margin-top:4px;overscroll-behavior-x:contain} :is(.hr-faixa,.hr-folha,.cp,.cu) .hr-tab{border-collapse:collapse;width:100%;font-size:var(--f-footnote,0.8125rem);font-variant-numeric:tabular-nums} :is(.hr-faixa,.hr-folha,.cp,.cu) .hr-tab th,:is(.hr-faixa,.hr-folha,.cp,.cu) .hr-tab td{padding:8px;border-bottom:.5px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));text-align:right;white-space:nowrap} :is(.hr-faixa,.hr-folha,.cp,.cu) .hr-tab th[scope="row"]{text-align:left;font-weight:500;color:var(--label2,#6B5A4C);white-space:normal;min-width:110px} :is(.hr-faixa,.hr-folha,.cp,.cu) .hr-tab thead th{font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));font-weight:600;color:var(--label2,#6B5A4C)} :is(.hr-faixa,.hr-folha,.cp,.cu) .hr-tab .rede{font-weight:700;color:var(--label,#323200);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} :is(.hr-faixa,.hr-folha,.cp,.cu) .hr-tab td.pior{font-weight:700;box-shadow:inset 0 -2px 0 var(--d-ambar,#C27A00)} :is(.hr-faixa,.hr-folha,.cu) .hr-ev-merc{margin:6px 0 0;font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));color:var(--label2,#6B5A4C)} :is(.hr-faixa,.hr-folha,.cu) .hr-ev-merc em{font-style:normal;color:var(--label2,#6B5A4C)} :is(.hr-faixa,.hr-folha,.cp,.cu) .hr-crit-selos{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0} :is(.hr-faixa,.hr-folha,.cp,.cu) .hr-veredito,:is(.hr-faixa,.hr-folha,.cp,.cu) .hr-ganha,:is(.hr-faixa,.hr-folha,.cp,.cu) .hr-conf{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));font-weight:600;color:var(--label,#323200);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} :is(.hr-faixa,.hr-folha,.cp,.cu) .hr-veredito::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--label3,#9C8D80);flex:none} :is(.hr-faixa,.hr-folha,.cp,.cu) .hr-veredito.v-sim::before{background:var(--verde,#11994A)} :is(.hr-faixa,.hr-folha,.cp,.cu) .hr-veredito.v-parte::before{background:var(--d-ambar,#C27A00)} :is(.hr-faixa,.hr-folha,.cp,.cu) .hr-veredito.v-nao::before{background:var(--queda,#E21D3C)} :is(.hr-faixa,.hr-folha,.cp,.cu) .hr-ganha.g-plataforma{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--queda,#E21D3C) 35%,transparent)} :is(.hr-folha,.cp,.cu) .hr-critica{padding:12px 14px;border-radius:14px;background:var(--cu-cartao,var(--surface,#FFFFFF));box-shadow:inset 3px 0 0 var(--label3,#9C8D80),0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent));margin-bottom:8px} :is(.hr-folha,.cp,.cu) .hr-critica.v-sim{box-shadow:inset 3px 0 0 var(--verde,#11994A),0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent))} :is(.hr-folha,.cp,.cu) .hr-critica.v-parte{box-shadow:inset 3px 0 0 var(--d-ambar,#C27A00),0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent))} :is(.hr-folha,.cp,.cu) .hr-critica.v-nao{box-shadow:inset 3px 0 0 var(--queda,#E21D3C),0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent))} :is(.hr-folha,.cp,.cu) .hr-critica h3{margin:0 0 6px;font-size:var(--f-subhead,0.9375rem);font-weight:600} :is(.hr-folha,.cp,.cu) .hr-critica dl{margin:8px 0 0;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:4px 12px;font-size:var(--f-footnote,0.8125rem);line-height:1.45} :is(.hr-folha,.cp,.cu) .hr-critica dt{font-weight:600;color:var(--label2,#6B5A4C)} :is(.hr-folha,.cp,.cu) .hr-critica dd{margin:0;color:var(--label,#323200);overflow-wrap:anywhere} :is(.hr-faixa,.hr-folha,.cu) .hr-voltou{margin:0;font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));font-weight:600;color:var(--label2,#6B5A4C)} /* o aviso "dispensada por 7 dias. Desfazer" (fica por 12 segundos, anunciado ao leitor de tela): vidro, porque flutua */ .hr-aviso{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:1500;display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;max-width:min(640px,calc(100vw - 32px));padding:8px 8px 8px 16px;border-radius:22px;background:var(--vidro-grosso,color-mix(in srgb,var(--surface,#FFFFFF) 86%,transparent));-webkit-backdrop-filter:blur(var(--vidro-desfoque,24px)) saturate(var(--vidro-saturacao,180%));backdrop-filter:blur(var(--vidro-desfoque,24px)) saturate(var(--vidro-saturacao,180%));box-shadow:var(--vidro-brilho,none),var(--vidro-sombra-alta,0 12px 32px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 22%,transparent));color:var(--label,#323200);font-size:var(--f-footnote,0.8125rem)} .hr-aviso span{flex:1 1 220px;min-width:0;line-height:1.35} .hr-aviso button{min-height:44px} .hr-aviso .hr-dispensar{border:0;background:transparent;color:var(--label2,#6B5A4C);font:inherit;font-weight:500;padding:0 10px;border-radius:999px;cursor:pointer} .hr-aviso .hr-fechar{flex:none} /* 1.72.0 (pente fino): o X é o botão de fechar do sistema (.hub-x, index.html 10.4) */ .hr-aviso button:focus-visible{outline:2px solid var(--acao,#1F5FD0);outline-offset:2px} html.hub-toque .hr-aviso button{min-height:44px} html.cu-folha-aberta .hr-aviso{z-index:1500} @media (max-width:759px){ .hr-aviso{left:16px;right:16px;transform:none;max-width:none} :is(.hr-folha,.cp,.cu) .hr-critica dl{grid-template-columns:minmax(0,1fr)} } /* 1.74.0 (Philippe, 03/10/2026): o plano no cartão (impacto com a conta, prazo e como conferir), o veredito da Sala, as três respostas do ciclo de vida ("Já fiz", "Lembrar depois", "Não se aplica") e a prévia da ação de um toque. Tudo em cor sólida da superfície (conteúdo não é vidro); o aviso que flutua continua vidro (.hr-aviso). */ :is(.hr-folha,.cu) .hr-plano{list-style:none;margin:2px 0 0;padding:10px 12px;display:grid;gap:6px;border-radius:var(--r-ctl,12px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} :is(.hr-folha,.cu) .hr-plano li{display:grid;grid-template-columns:minmax(0,7.25em) minmax(0,1fr);gap:2px 10px;font-size:var(--f-footnote,0.8125rem);line-height:1.45;min-width:0} :is(.hr-folha,.cu) .hr-plano span{font-weight:600;color:var(--label2,#6B5A4C)} :is(.hr-folha,.cu) .hr-plano b{font-weight:500;color:var(--label,#323200);overflow-wrap:anywhere} :is(.hr-folha,.cu) .hr-sala-ver{margin:0;padding:8px 12px;border-radius:var(--r-ctl,12px);font-size:var(--f-footnote,0.8125rem);line-height:1.45;color:var(--label,#323200);box-shadow:inset 3px 0 0 var(--acao,#1F5FD0),0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent));overflow-wrap:anywhere} :is(.hr-folha,.cu) .hr-sala-ver.s-ok{box-shadow:inset 3px 0 0 var(--verde,#11994A),0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent))} :is(.hr-folha,.cu) .hr-sala-ver.s-teste{box-shadow:inset 3px 0 0 var(--d-ambar,#C27A00),0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent))} :is(.hr-folha,.cu) .hr-sala-ver.s-nao{box-shadow:inset 3px 0 0 var(--queda,#E21D3C),0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent))} :is(.hr-folha,.cu) .hr-sala-ver b{font-weight:600} :is(.hr-folha,.cu) .hr-sala-ver .hr-conf{color:var(--label2,#6B5A4C);margin-left:6px} :is(.hr-folha,.cu) .hr-sala-alt{display:block;margin-top:4px;color:var(--label2,#6B5A4C)} :is(.hr-folha,.cu) .hr-rel{margin:0;font-size:var(--f-footnote,0.8125rem);line-height:1.45;color:var(--label2,#6B5A4C);overflow-wrap:anywhere} :is(.hr-folha,.cu) .hr-rel .hr-todas{min-height:44px;text-align:left;white-space:normal} :is(.hr-folha,.cu) .hr-ciclo{display:flex;align-items:center;flex-wrap:wrap;gap:0 2px;margin-left:auto;min-width:0} :is(.hr-folha,.cu) .hr-ciclo .hr-dispensar{margin-left:0;padding:0 10px} :is(.hr-folha,.cu) .hr-ciclo .hr-feito{color:var(--acao,#1F5FD0);font-weight:600} :is(.hr-folha,.cu) .hr-det-plano .hr-plano{margin-top:6px} :is(.hr-folha,.cu) .hr-det-plano .hr-sala-ver{margin-top:8px} .hr-aviso.hr-previa span{flex:1 1 260px} .hr-aviso.hr-previa b{font-weight:600} body.dark :is(.hr-folha,.cu) .hr-plano{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))} @media (max-width:759px){ :is(.hr-folha,.cu) .hr-plano li{grid-template-columns:minmax(0,1fr)} :is(.hr-folha,.cu) .hr-ciclo{margin-left:0;width:100%} } @media (prefers-reduced-motion:reduce){ .hr-aviso.hr-previa{transition:none} }