/* Layout: app da funcionária em coluna única (celular); administrativo com barra lateral (computador). */
:root {
  --bg: #F3F4F9; --sup: #FFFFFF; --sup2: #F5F6FB; --sup3: #ECEEF6; --tinta: #11131F; --suave: #5C6078; --linha: #E2E4EF;
  --pri: #0BA89A; --pri-t: #FFFFFF; --pri-f: #DDF6F3;
  --ia: #6A4FF2; --ia-f: #ECE8FF;
  --ok: #138A55; --ok-f: #E0F4EA; --warn: #A6680B; --warn-f: #FCF1DC; --bad: #C8352B; --bad-f: #FCE6E3;
  --escuro: #0B0E1A; --escuro2: #141A2C; --escuro-t: #E8ECF7; --escuro-s: #8D96B3;
  --visor-t: #5EF2E2;
  --grad: linear-gradient(135deg, #2EE6D6 0%, #7B61FF 100%);
  --f-disp: "Sora", "Manrope", system-ui, sans-serif;
  --f-txt: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-num: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --raio: 18px; --sombra: 0 1px 2px rgb(17 19 31 / 5%), 0 8px 24px rgb(17 19 31 / 6%);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #090C17; --sup: #121729; --sup2: #171D33; --sup3: #1E2540; --tinta: #E9EDF8; --suave: #929AB7; --linha: #252D4A;
  --pri: #2EE6D6; --pri-t: #061114; --pri-f: #0E3236;
  --ia: #A08CFF; --ia-f: #241D4A;
  --ok: #4CD28F; --ok-f: #10301F; --warn: #F0B65A; --warn-f: #352710; --bad: #FF7466; --bad-f: #3A1714;
  --sombra: none; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #090C17; --sup: #121729; --sup2: #171D33; --sup3: #1E2540; --tinta: #E9EDF8; --suave: #929AB7; --linha: #252D4A;
  --pri: #2EE6D6; --pri-t: #061114; --pri-f: #0E3236;
  --ia: #A08CFF; --ia-f: #241D4A;
  --ok: #4CD28F; --ok-f: #10301F; --warn: #F0B65A; --warn-f: #352710; --bad: #FF7466; --bad-f: #3A1714;
  --sombra: none; color-scheme: dark; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tinta); font: 16px/1.5 var(--f-txt); min-height: 100vh; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--f-disp); line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -0.02em; font-weight: 700; }
h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
:focus-visible { outline: 3px solid var(--pri); outline-offset: 2px; }
.mono { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.sub { color: var(--suave); margin: 4px 0 0; }
.nota { color: var(--suave); font-size: .9rem; margin: 0; }
.vazio { color: var(--suave); text-align: center; padding: 18px; }

/* ---------- botões ---------- */
.btn { border: 1px solid transparent; border-radius: 14px; padding: 11px 18px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; text-decoration: none; transition: transform .08s, background .15s; }
.btn:active { transform: scale(.98); }
.btn.pri { background: var(--pri); color: var(--pri-t); }
.btn.sec { background: var(--sup2); border-color: var(--linha); color: var(--tinta); }
.btn.sec.on { background: var(--pri-f); border-color: var(--pri); color: var(--pri); }
.btn.ia { background: var(--ia-f); color: var(--ia); }
.btn.perigo { background: var(--bad-f); color: var(--bad); }
.btn.grande { min-height: 58px; font-size: 1.05rem; width: 100%; border-radius: 16px; }
.btn.grad { background: var(--grad); color: #071016; border: 0; }
.btn:disabled { opacity: .55; cursor: progress; }
.btn-link { background: none; border: 0; padding: 4px; color: var(--pri); font-weight: 700; cursor: pointer; }
.btn-link.perigo { color: var(--bad); }
.btn-ic { background: var(--sup2); border: 1px solid var(--linha); border-radius: 12px; width: 42px; height: 42px; cursor: pointer; font-size: 1.1rem; flex: none; display: grid; place-items: center; color: inherit; }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: .76rem; font-weight: 700; white-space: nowrap; line-height: 1.3; }
.chip.ok { background: var(--ok-f); color: var(--ok); } .chip.warn { background: var(--warn-f); color: var(--warn); }
.chip.bad { background: var(--bad-f); color: var(--bad); } .chip.pri { background: var(--pri-f); color: var(--pri); }
.chip.ia { background: var(--ia-f); color: var(--ia); }
.chip.neutro { background: var(--sup3); color: var(--suave); }
.chip.ao-vivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulso 1.6s infinite; }
.ia-dot { width: 7px; height: 7px; border-radius: 2px; background: currentColor; transform: rotate(45deg); flex: none; }
.giro { width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira .8s linear infinite; flex: none; }
@keyframes pulso { 50% { opacity: .25; } }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chip.ao-vivo::before, .giro { animation: none; } }

/* ---------- cartões e formulários ---------- */
.cartao { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cab-linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form label, label.campo { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: .88rem; }
input:not([type=radio]):not([type=checkbox]), select, textarea { border: 1px solid var(--linha); background: var(--sup2); border-radius: 12px; padding: 11px 13px; min-height: 48px; width: 100%; font-weight: 500; }
input:focus, select:focus, textarea:focus { border-color: var(--pri); outline: none; box-shadow: 0 0 0 3px var(--pri-f); }
.num-grande { font: 700 1.6rem var(--f-num) !important; letter-spacing: .02em; }
.erro { background: var(--bad-f); color: var(--bad); border-radius: 12px; padding: 10px 13px; margin: 0; font-weight: 700; }
.alerta { background: var(--warn-f); color: var(--warn); border-radius: 12px; padding: 10px 13px; margin: 0; }
.aviso-ia { background: var(--ia-f); color: var(--ia); border-radius: 12px; padding: 10px 13px; margin: 0; }
.check { flex-direction: row !important; align-items: center; }
.check input { width: 20px; height: 20px; }
.seg { border: 0; padding: 0; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.seg legend { font-weight: 700; font-size: .88rem; margin-bottom: 6px; padding: 0; }
.seg label { flex: 1; min-width: 74px; position: relative; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; text-align: center; padding: 11px 6px; border-radius: 12px; border: 1px solid var(--linha); background: var(--sup2); cursor: pointer; font-weight: 700; font-size: .92rem; }
.seg input:checked + span { background: var(--pri); color: var(--pri-t); border-color: var(--pri); }
.seg input:focus-visible + span { outline: 3px solid var(--pri); outline-offset: 2px; }

/* ---------- foto ---------- */
.foto-campo { position: relative; display: flex; gap: 12px; align-items: center; }
.foto-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; border: 2px dashed var(--linha); border-radius: 14px; padding: 14px; cursor: pointer; background: var(--sup2); min-height: 60px; font-weight: 700; font-size: .95rem; }
.foto-campo.tem .foto-btn { border-style: solid; border-color: var(--ok); color: var(--ok); background: var(--ok-f); }
.foto-campo.carregando .foto-btn { opacity: .6; }
.foto-campo input:focus-visible + .foto-btn { outline: 3px solid var(--pri); outline-offset: 2px; }
.ico-cam { width: 24px; height: 18px; border: 2.5px solid currentColor; border-radius: 6px; position: relative; flex: none; }
.ico-cam::after { content: ""; position: absolute; inset: 2.5px 6.5px; border: 2.5px solid currentColor; border-radius: 50%; }
.foto-prev { width: 66px; height: 66px; object-fit: cover; border-radius: 12px; border: 1px solid var(--linha); flex: none; }
.thumb { width: 52px; height: 52px; border-radius: 11px; border: 1px solid var(--linha); background: var(--sup3) center/cover no-repeat; cursor: zoom-in; flex: none; padding: 0; }
.thumb.sem { cursor: default; background-image: none !important; background: repeating-linear-gradient(45deg, var(--sup2) 0 6px, var(--linha) 6px 7px); }

/* ---------- visor do contador ---------- */
.visor { background: var(--escuro); border-radius: 16px; padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden;
  background-image: radial-gradient(120% 140% at 100% 0%, rgb(123 97 255 / 22%), transparent 55%), repeating-linear-gradient(0deg, rgb(255 255 255 / 2.5%) 0 1px, transparent 1px 3px); }
.visor-rot { color: var(--escuro-s); font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; }
.visor-num { font: 700 2.1rem/1.1 var(--f-num); color: var(--visor-t); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgb(94 242 226 / 40%); }
.visor .chip { align-self: flex-start; margin-top: 4px; }

/* ---------- conferência ---------- */
.conferencia { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linha); border-radius: 14px; overflow: hidden; border: 1px solid var(--linha); }
.conferencia > div { background: var(--sup2); padding: 11px 13px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.conferencia span { font-size: .7rem; color: var(--suave); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.conferencia b { font: 700 1.08rem var(--f-num); font-variant-numeric: tabular-nums; }
.conferencia small { color: var(--suave); font-size: .78rem; }
.conferencia .largo { grid-column: 1 / -1; }
.conferencia.ok .largo { background: var(--ok-f); } .conferencia.bad .largo { background: var(--bad-f); } .conferencia.warn .largo { background: var(--warn-f); }
b.ok, td.ok, .ok-t { color: var(--ok); } b.bad, td.bad, .bad-t { color: var(--bad); } b.warn, td.warn, .warn-t { color: var(--warn); } .ia-t { color: var(--ia); }

/* ---------- login ---------- */
.login-tela { min-height: 100vh; display: grid; place-items: center; padding-block: 24px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: radial-gradient(80% 60% at 20% 0%, rgb(46 230 214 / 14%), transparent 60%), radial-gradient(70% 60% at 100% 100%, rgb(123 97 255 / 16%), transparent 60%), var(--bg); }
.login-caixa { width: 100%; max-width: 410px; display: flex; flex-direction: column; gap: 18px; }
.login-marca { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.login-marca h1 { font-size: 1.8rem; }
.login-marca p { margin: 0; color: var(--suave); }
.lista-demo { display: grid; gap: 8px; }
.lista-demo .btn { justify-content: space-between; }
.lista-demo small { font-weight: 500; opacity: .75; }

/* ---------- toast, lightbox, modal ---------- */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--tinta); color: var(--bg); padding: 12px 18px; border-radius: 14px; z-index: 60; font-weight: 700; max-width: calc(100% - 32px); transition: opacity .3s; box-shadow: 0 10px 30px rgb(0 0 0 / 25%); }
.toast.bad { background: var(--bad); color: #fff; }
.toast.sai { opacity: 0; }
.lightbox { position: fixed; inset: 0; z-index: 70; background: rgb(4 6 12 / 92%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; }
.lightbox img { max-height: 80vh; max-width: 100%; border-radius: 12px; }
.lb-rodape { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; color: #E9EDF8; }
.modal { position: fixed; inset: 0; background: rgb(6 8 16 / 60%); z-index: 50; display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; backdrop-filter: blur(4px);
  padding: max(16px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
.modal-caixa { background: var(--sup); border-radius: 22px; padding: 22px; width: 100%; max-width: 980px; display: flex; flex-direction: column; gap: 18px; margin-block: 2vh; border: 1px solid var(--linha); }

/* ---------- tabelas ---------- */
.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabela th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); padding: 10px 12px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 10px 12px; border-bottom: 1px solid var(--linha); white-space: nowrap; vertical-align: middle; }
.tabela td small { color: var(--suave); }
.tabela .n { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tfoot td { font-weight: 800; border-bottom: 0; background: var(--sup2); }
.tabela.clicavel tbody tr { cursor: pointer; }
.tabela.clicavel tbody tr:hover { background: var(--sup2); }
.tabela .quebra { white-space: normal; min-width: 220px; }

/* =================== APP DA FUNCIONÁRIA (celular) =================== */
.app { min-height: 100vh; }
body:has(.app)::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
.app-topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; align-items: center; gap: 12px; padding-block: 12px; max-width: 560px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); }
.app-topo-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.app-topo-txt b { font-family: var(--f-disp); }
.app-topo-txt small { color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-corpo { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; padding-block: 6px calc(40px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.app-ola h1 { font-size: 1.7rem; }
.app-ola .sub::first-letter { text-transform: uppercase; }
.rotulo { margin: 6px 0 -4px; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--suave); font-weight: 800; }
.app-exp h1 { font-size: 1.35rem; }
.passo { display: flex; align-items: center; gap: 10px; margin-bottom: -6px; }
.passo-n { width: 26px; height: 26px; border-radius: 50%; background: var(--grad); color: #071016; display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex: none; }
.totais { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tot { background: var(--sup); border: 1px solid var(--linha); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; border-top: 3px solid var(--linha); }
.tot span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--suave); }
.tot b { font: 700 1.15rem var(--f-num); }
.tot small { color: var(--suave); font-size: .78rem; }
.tot.pix { border-top-color: #2EC4B6; } .tot.credito { border-top-color: #7B61FF; } .tot.debito { border-top-color: #F08A3C; }
.tot.total { background: var(--escuro); border-color: var(--escuro); border-top-color: var(--visor-t); color: var(--escuro-t); }
.tot.total span, .tot.total small { color: var(--escuro-s); } .tot.total b { color: var(--visor-t); }
.forma { display: inline-block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 7px; }
.forma.pix { background: rgb(46 196 182 / 16%); color: #12998C; } .forma.credito { background: rgb(123 97 255 / 16%); color: #6A4FF2; }
.forma.debito { background: rgb(240 138 60 / 18%); color: #C3611A; } .forma.cartao { background: var(--sup3); color: var(--suave); }
.vendas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vendas li { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 14px; background: var(--sup2); }
.v-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.v-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v-obs { margin: 0; font-size: .82rem; color: var(--bad); }
.bv { min-height: 86px; color: #fff; font-size: 1rem; border-radius: 16px; flex-direction: column; gap: 4px; padding: 10px 6px; }
.bv small { font-weight: 600; font-size: .72rem; opacity: .85; }
.bv .ico-cam { border-color: #fff; }
.bv.pix { background: #12A898; } .bv.credito { background: #6A4FF2; } .bv.debito { background: #E0782A; }
.bv.on { outline: 3px solid var(--tinta); outline-offset: 2px; }
.grande-pix { width: 100%; min-height: 74px; flex-direction: row; gap: 12px; font-size: 1.1rem; }
.grande-pix small { display: block; }
.aviso-cartao { background: var(--sup2); border-radius: 12px; padding: 10px 12px; }
.folha-inline { border-top: 1px solid var(--linha); padding-top: 14px; scroll-margin-top: 80px; }
#area-enc .folha-inline { background: var(--sup); border: 1px solid var(--pri); border-radius: var(--raio); padding: 18px; }
.atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.atalhos .btn { padding: 10px 4px; }
.app-fim { align-items: center; text-align: center; }
.resumo { display: grid; margin: 0; width: 100%; text-align: left; }
.resumo div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.resumo dt { color: var(--suave); } .resumo dd { margin: 0; font: 700 1rem var(--f-num); }
.hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hist li { gap: 8px; }
.hist-n { display: flex; gap: 14px; flex-wrap: wrap; font-size: .9rem; }

/* =================== ADMINISTRATIVO (computador) =================== */
.adm { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.adm-lado { background: var(--escuro); color: var(--escuro-t); display: flex; flex-direction: column; gap: 22px; padding: 22px 14px; position: sticky; top: 0; height: 100vh; }
.adm-marca { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.adm-marca b { display: block; font-family: var(--f-disp); font-size: 1.05rem; }
.adm-marca small { color: var(--escuro-s); }
.adm-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.adm-item { background: none; border: 0; color: var(--escuro-s); text-align: left; padding: 11px 12px; border-radius: 12px; cursor: pointer; font-weight: 700; }
.adm-item:hover { background: var(--escuro2); color: var(--escuro-t); }
.adm-item.on { background: var(--escuro2); color: #fff; box-shadow: inset 3px 0 0 #2EE6D6; }
.adm-quem { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 0 8px; color: var(--escuro-s); font-size: .9rem; }
.adm-quem .btn-link { color: #7CEFE3; padding: 0; }
.adm-corpo { padding-block: 26px 60px; padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 18px; min-width: 0; max-width: 1400px; }
.adm-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.adm-cab h1 { font-size: 1.7rem; }
.adm-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.filtro { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; }
.filtro .campo { flex: 1 1 150px; font-size: .78rem; color: var(--suave); }
.presets { display: flex; gap: 6px; flex-wrap: wrap; flex: 2 1 300px; }
.presets .btn { flex: 1; min-height: 48px; padding: 8px 10px; }
.filtro2 { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filtro2 select { flex: 0 1 260px; width: auto; }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.kpi { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--sombra); }
.kpi span { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--suave); font-weight: 800; }
.kpi b { font: 700 1.6rem var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi small { color: var(--suave); }
.kpi.destaque { background: var(--escuro); border-color: var(--escuro); color: var(--escuro-t); background-image: radial-gradient(120% 140% at 100% 0%, rgb(123 97 255 / 28%), transparent 55%); }
.kpi.destaque b { color: var(--visor-t); } .kpi.destaque span, .kpi.destaque small { color: var(--escuro-s); }
.kpi.ia b { color: var(--ia); } .kpi.bad b { color: var(--bad); } .kpi.warn b { color: var(--warn); } .kpi.ok b { color: var(--ok); }
.kpi.bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--linha)); }
.faixa-vivo { display: flex; gap: 10px; flex-wrap: wrap; }
.vivo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--ok-f); color: var(--tinta); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); border-radius: 14px; padding: 10px 14px; cursor: pointer; text-align: left; }
.duas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.duas.largo-esq { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); }
.alertas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.alertas li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 6px; border-top: 1px solid var(--linha); cursor: pointer; border-radius: 10px; }
.alertas li:hover { background: var(--sup2); }
.alertas li p { margin: 2px 0 0; font-size: .86rem; }
.alertas .seta { font-size: 1.4rem; color: var(--suave); }
.alertas .vazio { cursor: default; justify-content: center; }
.legenda { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: .82rem; color: var(--suave); margin: 0; }
.legenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: -6px; }
.legenda .lg-linha { height: 3px; width: 14px; background: var(--tinta); }
.graf { overflow-x: auto; }
.graf svg { display: block; }
.g-grade { stroke: var(--linha); stroke-width: 1; }
.g-txt { fill: var(--suave); font: 11px var(--f-txt); }
.g-res { stroke: var(--tinta); stroke-width: 2.5; } .g-res.dif { stroke: var(--bad); stroke-width: 3.5; }
.cartao.sem-pad { padding: 0; overflow: hidden; }
.vazio-grande { align-items: flex-start; padding: 30px; }
.rel-tit { font-size: 1.4rem; margin-top: 8px; }
.rel-resumo { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .rel-resumo { grid-template-columns: repeat(4, 1fr); } }
.rel-alertas { background: var(--bad-f); border-radius: 14px; padding: 14px 16px; }
.rel-alertas ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.modal-caixa section h3 { margin-bottom: 10px; }
.rel-relogios { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rel-rel { display: flex; gap: 12px; align-items: flex-start; background: var(--sup2); border-radius: 14px; padding: 10px; }
.rel-rel .thumb.grande { width: 90px; height: 110px; aspect-ratio: auto; }
.rel-rel > div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.rel-rel b { font-size: 1.3rem; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.galeria figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.galeria figcaption { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; font-size: .82rem; }
.galeria figcaption small { color: var(--suave); }
.thumb.grande { width: 100%; height: auto; aspect-ratio: 3 / 4; max-width: 100%; border-radius: 14px; }
.editar summary { cursor: pointer; font-weight: 800; color: var(--pri); }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grade2 .largo { grid-column: 1 / -1; }
#f-edt { margin-top: 12px; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; border-top: 1px solid var(--linha); padding-top: 16px; }
.acoes-esq { display: flex; gap: 10px; flex-wrap: wrap; }
.cel { min-height: 40px !important; padding: 6px 10px !important; width: 130px !important; text-align: right; font-family: var(--f-num) !important; }
.equipe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.equipe li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0; border-top: 1px solid var(--linha); }
.equipe li.bloq { opacity: .6; }
.pessoa { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pessoa > div { display: flex; flex-direction: column; min-width: 0; }
.pessoa small { color: var(--suave); }
.avatar { width: 40px; height: 40px; border-radius: 12px; background: var(--grad); color: #071016; display: grid; place-items: center; font-weight: 800; flex: none; }
.eq-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.eq-acoes select { width: auto; min-height: 46px; }
.nova-senha { display: flex; gap: 8px; width: 100%; }
.maqs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.regra { border: 1px solid var(--linha); border-radius: 14px; padding: 14px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.regra legend { font-weight: 800; padding: 0 6px; }
@media (max-width: 900px) {
  .adm { grid-template-columns: minmax(0, 1fr); }
  .adm-lado, .adm-nav { min-width: 0; }
  .adm-lado { position: sticky; top: 0; height: auto; z-index: 5; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  .adm-marca small, .adm-quem span { display: none; }
  .adm-quem { flex-direction: row; margin-left: auto; padding: 0; }
  .adm-nav { flex-direction: row; overflow-x: auto; order: 3; flex-basis: 100%; scrollbar-width: none; }
  .adm-item { white-space: nowrap; padding: 8px 12px; }
  .adm-item.on { box-shadow: inset 0 -3px 0 #2EE6D6; }
  .adm-corpo { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-top: 18px; }
  .duas.largo-esq { grid-template-columns: 1fr; }
  .grade2 { grid-template-columns: 1fr; }
}
.oc-bts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.oc-trava { background: var(--bad-f); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); flex-direction: column; min-height: 72px; }
.oc-trava .ico-cam { border-color: currentColor; }
.ocorr .oc-bts .btn.sec { min-height: 72px; }
.ocs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ocs:empty { display: none; }
.ocs li { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 14px; background: var(--sup2); }
.ocs .nota { margin: 0; }
.rel-ocs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ocorr .oc-trava { flex-direction: row; min-height: 64px; width: 100%; }
.ocs li.oc-total { justify-content: space-between; align-items: center; background: var(--warn-f); color: var(--warn); font-weight: 700; }
.ops { display: flex; flex-direction: column; gap: 12px; }
.op { display: flex; align-items: center; gap: 16px; text-align: left; background: var(--sup); border: 1px solid var(--linha); border-radius: 20px; padding: 18px; cursor: pointer; color: var(--tinta); box-shadow: var(--sombra); transition: transform .08s, border-color .15s; }
.op:hover { border-color: var(--pri); }
.op:active { transform: scale(.98); }
.op-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.op-txt b { font-family: var(--f-disp); font-size: 1.25rem; }
.op-txt small { color: var(--suave); }
.op .seta { font-size: 1.8rem; color: var(--suave); }
.op-ico { display: grid; place-items: center; }
.op-1 .logo { filter: hue-rotate(60deg); }
.login-marca .btn-link { padding: 0; }

/* =================== REFINAMENTOS DE DESIGN · TEMA =================== */
.ico { width: 22px; height: 22px; flex: none; display: block; }
.btn-tema { color: var(--suave); }
.btn-tema:hover { color: var(--tinta); }
.login-tela { position: relative; }
.login-tema { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }
.sel-tema { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--sup2); border: 1px solid var(--linha); }
.sel-tema button { border: 0; background: none; color: var(--suave); width: 34px; height: 30px; border-radius: 9px; cursor: pointer; display: grid; place-items: center; }
.sel-tema button .ico { width: 18px; height: 18px; }
.sel-tema button.on { background: var(--sup); color: var(--pri); box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }
.adm-quem .sel-tema { background: var(--escuro2); border-color: #26304A; margin-bottom: 6px; }
.adm-quem .sel-tema button { color: var(--escuro-s); }
.adm-quem .sel-tema button.on { background: #26304A; color: #7CEFE3; box-shadow: none; }

/* cabeçalho do app com borda sutil */
.app-topo { border-bottom: 1px solid color-mix(in srgb, var(--linha) 70%, transparent); }
.app-topo-txt b { font-size: 1.02rem; letter-spacing: -.01em; }

/* botões grandes de ação (Pix e problema no óculos) */
.grande-pix, .ocorr .oc-trava { width: 100%; min-height: 72px; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 14px 16px; text-align: left; border-radius: 18px; }
.grande-pix .ico, .oc-trava .ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: rgb(255 255 255 / 18%); }
.oc-trava .ico { background: color-mix(in srgb, var(--bad) 14%, transparent); }
.bv-txt { display: flex; flex-direction: column; gap: 2px; }
.bv-txt b { font-size: 1.05rem; }
.bv-txt small { font-weight: 600; font-size: .8rem; opacity: .85; }
.bv.pix { background: linear-gradient(135deg, #12B3A2, #0E9488); box-shadow: 0 8px 20px rgb(18 168 152 / 28%); }
.foto-btn .ico { width: 24px; height: 24px; }

/* cartões e superfícies */
.cartao { border-radius: 20px; }
.cartao h2 { letter-spacing: -.015em; }
.tot { border-radius: 18px; }
.visor { border: 1px solid rgb(255 255 255 / 6%); }
.op-ico .logo { border-radius: 14px; }
.login-caixa .cartao { box-shadow: 0 10px 40px rgb(17 19 31 / 8%); }
:root[data-theme="dark"] .login-caixa .cartao { box-shadow: none; }

/* tema claro: fundo levemente texturizado, sombras mais nítidas */
body { background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--pri) 7%, transparent), transparent 60%); background-attachment: fixed; }
.kpi { border-radius: 20px; }
.tabela tbody tr { transition: background .12s; }
.adm-cab h1 { letter-spacing: -.025em; }
.filtro, .kpi, .cartao { transition: background .2s, border-color .2s; }
@media (prefers-reduced-motion: reduce) { .filtro, .kpi, .cartao, .tabela tbody tr { transition: none; } }
.adm-lado { border-right: 1px solid #1C2338; }
.kpi.destaque { border-color: color-mix(in srgb, #5EF2E2 28%, transparent); box-shadow: 0 10px 30px rgb(46 230 214 / 10%); }
.tot.total { border-color: color-mix(in srgb, #5EF2E2 22%, transparent); }

/* =================== ÍCONES DAS OPERAÇÕES =================== */
.ico-maq { display: block; flex: none; border-radius: 22%; object-fit: cover; background: #05070D; box-shadow: 0 0 0 2px var(--cor-maq, transparent), 0 6px 18px rgb(0 0 0 / 18%); }
.ico-maq.paraglider { --cor-maq: #F37A1F; }
.ico-maq.vr360 { --cor-maq: #22D3EE; }
.maq-nome { display: flex; align-items: center; gap: 12px; min-width: 0; }
.maq-cel { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.maq-cel .ico-maq { box-shadow: 0 0 0 1.5px var(--cor-maq); }
.op { padding: 14px 18px 14px 14px; border-width: 2px; }
.op-paraglider { border-color: color-mix(in srgb, #F37A1F 45%, var(--linha)); background: linear-gradient(100deg, color-mix(in srgb, #F37A1F 12%, var(--sup)), var(--sup) 60%); }
.op-vr360 { border-color: color-mix(in srgb, #22D3EE 45%, var(--linha)); background: linear-gradient(100deg, color-mix(in srgb, #22D3EE 12%, var(--sup)), var(--sup) 60%); }
.op-paraglider .op-txt b { color: #E8690F; } .op-vr360 .op-txt b { color: #0EA5C4; }
:root[data-theme="dark"] .op-paraglider .op-txt b { color: #FF9A4D; } :root[data-theme="dark"] .op-vr360 .op-txt b { color: #5BE3F5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .op-paraglider .op-txt b { color: #FF9A4D; } :root:not([data-theme="light"]) .op-vr360 .op-txt b { color: #5BE3F5; } }
.app-maq.maq-paraglider { border-top: 4px solid #F37A1F; } .app-maq.maq-vr360 { border-top: 4px solid #22D3EE; }
.login-marca .ico-maq { border-radius: 28px; box-shadow: 0 0 0 3px var(--cor-maq), 0 14px 40px color-mix(in srgb, var(--cor-maq) 35%, transparent); }
.app-topo .ico-maq { border-radius: 12px; }
.vivo .ico-maq { border-radius: 8px; }
.esc-op { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.esc-op legend { font-weight: 700; font-size: .88rem; margin-bottom: 6px; padding: 0; }
.esc-op-item { position: relative; display: flex !important; flex-direction: column !important; align-items: center; gap: 8px !important; padding: 14px 8px; border: 2px solid var(--linha); border-radius: 16px; cursor: pointer; background: var(--sup2); text-align: center; }
.esc-op-item input { position: absolute; opacity: 0; }
.esc-op-item.op-paraglider:has(input:checked) { border-color: #F37A1F; background: color-mix(in srgb, #F37A1F 12%, var(--sup)); }
.esc-op-item.op-vr360:has(input:checked) { border-color: #22D3EE; background: color-mix(in srgb, #22D3EE 12%, var(--sup)); }
.esc-op-item:has(input:focus-visible) { outline: 3px solid var(--pri); outline-offset: 2px; }
.bk-acoes { display: flex; gap: 8px; align-items: center; }
.bk-acoes .btn { min-height: 38px; padding: 6px 12px; }
.lista-info { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; color: var(--suave); font-size: .92rem; }
.lista-info b { color: var(--tinta); }
.bk-grade { display: flex; flex-direction: column-reverse; gap: 16px; }
.bk-grade > .cartao:last-child .lista-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 24px; }
.btn-admin { align-self: center; display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--linha); color: var(--suave); border-radius: 99px; padding: 8px 16px; font-weight: 700; font-size: .88rem; cursor: pointer; }
.btn-admin:hover { color: var(--tinta); border-color: var(--suave); }
.btn-admin .ico { width: 18px; height: 18px; }
.adm-quem [data-ir-app] { font-size: .85rem; }
.btn-voltar { color: var(--tinta); }
.btn-voltar .ico { width: 20px; height: 20px; }
.login-voltar { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); }
.adm-tit { display: flex; align-items: center; gap: 12px; }

/* ---- cartão venda a venda · remoção com motivo · ao vivo ---- */
.totais { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tot.cartao { border-top-color: #7B61FF; }
.bvs-cartao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bvs-cartao .bv { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 64px; padding: 12px 14px; text-align: left; border-radius: 18px; }
.bvs-cartao .ico { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: rgb(255 255 255 / 18%); flex: none; }
.bvs-cartao .bv-txt b { font-size: 1rem; } .bvs-cartao .bv-txt small { font-size: .74rem; }
.bv.credito { background: linear-gradient(135deg, #7B61FF, #5B3FE6); box-shadow: 0 8px 20px rgb(106 79 242 / 25%); }
.bv.debito { background: linear-gradient(135deg, #F08A3C, #D96A1E); box-shadow: 0 8px 20px rgb(224 120 42 / 25%); }
.v-remover { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 10px; border-radius: 12px; background: var(--sup2); }
.v-remover input { width: 100%; }
.invalido { outline: 2px solid var(--bad); }
.removida { opacity: .62; } .removida .mono, .removida b { text-decoration: line-through; }
.chip.rem { background: var(--bad-f); color: var(--bad); }

.av-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 16px; }
.av-exp { display: flex; flex-direction: column; gap: 14px; }
.av-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.av-cab h2 { margin: 0; } .av-cab .sub { margin: 0; }
.av-cab .chip { margin-left: auto; }
.av-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.av-nums div { background: var(--sup2); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.av-nums span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--suave); }
.av-nums b { font: 700 1.05rem var(--f-num); }
.av-linha { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 560px; overflow: auto; }
.av-linha li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: var(--sup2); }
.av-linha li .thumb { width: 58px; height: 58px; }
.av-linha .v-linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.av-linha li.removida { background: var(--bad-f); opacity: 1; }
.av-linha li.removida .thumb { opacity: .6; }
.av-aviso { border-radius: 12px; padding: 10px 12px; background: var(--bad-f); color: var(--bad); font-weight: 600; }
.av-vazio { text-align: center; padding: 40px 16px; }
@media (max-width: 420px) { .totais { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tot.total { grid-column: 1 / -1; } }

/* ---- status dos comprovantes · seleção de dias · impressão ---- */
.chip.st-espera, .chip.st-completo, .chip.st-removido { font-weight: 800; letter-spacing: .06em; font-size: .68rem; }
.chip.st-espera { background: var(--warn-f); color: var(--warn); }
.chip.st-completo { background: var(--ok-f); color: var(--ok); }
.chip.st-removido { background: var(--bad-f); color: var(--bad); }
.kpi.st-k-espera { border-top: 3px solid var(--warn); } .kpi.st-k-espera b { color: var(--warn); }
.kpi.st-k-completo { border-top: 3px solid var(--ok); } .kpi.st-k-completo b { color: var(--ok); }
.kpi.st-k-removido { border-top: 3px solid var(--bad); } .kpi.st-k-removido b { color: var(--bad); }
.av-nums small { font-size: .72rem; }
.dias-sel h3 { margin: 0; }
.dias-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dia-chip { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--linha); background: var(--sup2); cursor: pointer; user-select: none; opacity: .55; }
.dia-chip input { position: absolute; opacity: 0; pointer-events: none; }
.dia-chip b { font: 700 .95rem var(--f-num); } .dia-chip small { font-size: .7rem; color: var(--suave); }
.dia-chip.on { opacity: 1; border-color: var(--pri, #7B61FF); background: color-mix(in srgb, var(--pri, #7B61FF) 12%, var(--sup)); }
.dia-chip:focus-within { outline: 2px solid var(--pri, #7B61FF); outline-offset: 2px; }
tr.removida td { opacity: .7; } tr.removida td .chip, tr.removida td .nota { opacity: 1; }
tr[data-exp] { cursor: pointer; }

#impressao { display: none; }
@media print {
  body.imprimindo > *:not(#impressao) { display: none !important; }
  body.imprimindo { background: #fff !important; color: #111 !important; }
  body.imprimindo #impressao { display: block; font: 11px/1.4 system-ui, sans-serif; color: #111; }
  #impressao .imp-cab { display: flex; gap: 12px; align-items: flex-start; border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 12px; }
  #impressao .imp-cab div { flex: 1; } #impressao h1 { font-size: 18px; margin: 0 0 2px; } #impressao h2 { font-size: 13px; margin: 16px 0 6px; }
  #impressao .imp-cab p { margin: 0; color: #444; }
  #impressao .imp-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
  #impressao .imp-kpis div { border: 1px solid #bbb; border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; }
  #impressao .imp-kpis span { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: #555; } #impressao .imp-kpis b { font-size: 14px; }
  #impressao table { width: 100%; border-collapse: collapse; } #impressao th, #impressao td { border-bottom: 1px solid #ddd; padding: 4px 5px; text-align: left; }
  #impressao th { background: #f1f1f1; font-size: 10px; } #impressao tr.removida td { color: #a33; text-decoration: line-through; }
  #impressao tr { page-break-inside: avoid; }
  @page { margin: 12mm; }
}

/* ---- botão sair ---- */
.btn-sair { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); background: var(--bad-f); color: var(--bad); font-weight: 800; font-size: .9rem; cursor: pointer; white-space: nowrap; }
.btn-sair .ico { width: 18px; height: 18px; }
.btn-sair:hover { filter: brightness(.97); }
.btn-sair.centro { align-self: center; margin: 4px auto 0; display: flex; }
@media (max-width: 380px) { .app-topo .btn-sair span { display: none; } .app-topo .btn-sair { padding: 8px 10px; } }