/* Visual de sistema de balcão: barra de título colorida por módulo, menu branco, cartões brancos sobre cinza,
   blocos sólidos no mapa de suítes e cobrança escura com dourado. */
:root {
  --fundo: #eceef1; --sup: #ffffff; --sup2: #f4f5f7; --sup3: #e6e9ed; --borda: #dce0e5; --texto: #23272d; --mudo: #6b7280;
  --barra: #2b2f35; --acento: #b3261e; --acento-t: #ffffff; --acento-suave: #fbe9e7;
  --ok: #2e7d32; --erro: #c62828; --info: #1d5fc4;
  --livre: #2f9e41; --ocupada: #d32f2f; --limpeza: #c9a227; --limpando: #17a2a4; --faxina: #ef7d1a; --manutencao: #9ea3a8; --vistoria: #1f6fd6; --reservada: #b0177d; --bloqueada: #5f656c;
  --g-verde: #43a047; --g-vermelho: #e53935; --g-roxo: #8e44ad; --g-azul: #1e88e5; --g-cinza: #a3a7ad; --g-amarelo: #f2b705; --g-laranja: #fb8c00; --g-ciano: #26a69a; --g-rosa: #ec7aa8;
  --serie0: #a3a7ad; --serie1: var(--acento);
  --raio: 6px; --sombra: 0 1px 2px rgba(16, 24, 40, .07), 0 1px 6px rgba(16, 24, 40, .04);
  color-scheme: light;
}
body { --serie1: var(--acento); --acento-suave: color-mix(in srgb, var(--acento) 12%, var(--sup)); }
body[data-mod="limpeza"] { --barra: #00594f; --acento: #00897b; --acento-suave: #e0f2f1; }
body[data-mod="gerencial"] { --barra: #1b5e20; --acento: #2e7d32; --acento-suave: #e8f5e9; }
body[data-mod="financas"] { --barra: #0d2a5c; --acento: #1d4fa0; --acento-suave: #e3ecfa; }
body[data-mod="cadastros"] { --barra: #37474f; --acento: #455a64; --acento-suave: #eceff1; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #14161a; --sup: #1e2126; --sup2: #25292f; --sup3: #2e3239; --borda: #363b43; --texto: #e6e8eb; --mudo: #9aa0a8;
    --acento-suave: color-mix(in srgb, var(--acento) 22%, var(--sup));
    --ok: #66bb6a; --erro: #ef5350; --info: #64a0f0;
    --livre: #34a853; --ocupada: #e04141; --limpeza: #c29b22; --limpando: #1aa9ab; --manutencao: #7d838a; --bloqueada: #50565d;
    --sombra: 0 1px 2px rgba(0, 0, 0, .45); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #14161a; --sup: #1e2126; --sup2: #25292f; --sup3: #2e3239; --borda: #363b43; --texto: #e6e8eb; --mudo: #9aa0a8;
  --acento-suave: color-mix(in srgb, var(--acento) 22%, var(--sup));
  --ok: #66bb6a; --erro: #ef5350; --info: #64a0f0;
  --livre: #34a853; --ocupada: #e04141; --limpeza: #c29b22; --limpando: #1aa9ab; --manutencao: #7d838a; --bloqueada: #50565d;
  --sombra: 0 1px 2px rgba(0, 0, 0, .45); color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fundo); color: var(--texto); font: 13.5px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5 { margin: 0 0 .6em; line-height: 1.25; }
h2 { font-size: 1.2rem; font-weight: 600; } h3 { font-size: .95rem; font-weight: 600; } h4 { font-size: .85rem; } h5 { font-size: .8rem; margin: 0 0 6px; }
a { color: var(--acento); }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { background: var(--sup2); border: 1px solid var(--borda); border-radius: 4px; padding: 6px 8px; min-width: 0; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; background: var(--sup); }
label { display: flex; flex-direction: column; gap: 3px; font-size: .8rem; color: var(--mudo); margin-bottom: 10px; flex: 1; }
label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--texto); font-size: .9rem; flex: none; }
label.check input { width: auto; accent-color: var(--acento); }
code { background: var(--sup2); padding: 1px 4px; border-radius: 4px; }
.maiusc { text-transform: uppercase; }
.mudo { color: var(--mudo); } .pequeno { font-size: .8rem; }
.positivo { color: var(--ok); } .negativo { color: var(--erro); }
.vazio { color: var(--mudo); text-align: center; padding: 18px; }
.vazio.grande { font-size: 1.2rem; padding: 60px 0; }
.espaco { flex: 1; }
[hidden] { display: none !important; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--sup); border: 1px solid var(--borda); border-radius: 4px; padding: 6px 12px; cursor: pointer; white-space: nowrap; font-size: .9rem; }
.btn:hover { background: var(--sup2); }
.btn.primario { background: var(--acento); border-color: var(--acento); color: var(--acento-t); font-weight: 600; }
.btn.primario:hover { filter: brightness(1.08); }
.btn.perigo { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 45%, var(--borda)); }
.btn.fantasma { background: transparent; border-color: transparent; }
.btn.grande { padding: 11px 16px; font-size: 1rem; width: 100%; }
.btn:disabled { opacity: .5; cursor: wait; }
.mini { background: transparent; border: 1px solid var(--borda); border-radius: 4px; padding: 1px 7px; cursor: pointer; color: var(--mudo); }
.mini:hover { color: var(--texto); }
.ic-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--borda); border-radius: 4px; background: var(--sup); color: var(--texto); cursor: pointer; flex: none; }
.ic-btn:hover { background: var(--sup2); }

/* barra de título (cor do módulo) */
#topo { display: flex; align-items: center; gap: 14px; height: 34px; padding: 0 12px; background: var(--barra); color: #fff; position: sticky; top: 0; z-index: 6; }
.marca { display: flex; align-items: center; gap: 8px; font-size: .82rem; white-space: nowrap; }
.marca b { font-weight: 600; }
#mod-nome { opacity: .75; display: none; } #mod-nome::before { content: "·"; margin-right: 8px; }
.marca.grande { font-size: 1.3rem; justify-content: center; margin-bottom: 16px; color: var(--texto); }
.marca.grande b { font-weight: 700; }
.logo { width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(135deg, #e53935, #8e24aa); position: relative; flex: none; }
.marca.grande .logo { width: 30px; height: 30px; border-radius: 8px; }
.logo::after { content: ""; position: absolute; inset: 24% 30% 20%; border: 2px solid #fff; border-bottom: 0; border-radius: 40% 40% 0 0; }
#modulos { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
#modulos a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: rgba(255, 255, 255, .72); padding: 4px 10px; border-radius: 4px; white-space: nowrap; font-size: .82rem; }
#modulos a .ic { width: 15px; height: 15px; }
#modulos a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
#modulos a.ativo { background: rgba(255, 255, 255, .18); color: #fff; font-weight: 600; }
.topo-dir { display: flex; align-items: center; gap: 8px; }
.sync { font-size: .75rem; padding: 2px 9px; border-radius: 99px; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; white-space: nowrap; }
.sync::before { content: "●"; margin-right: 6px; }
.sync.ok::before { color: #7ee08a; } .sync.off::before { color: #ffc95c; } .sync.erro { background: #c62828; } .sync.indo::before { color: #8cc4ff; }
.usuario-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; color: #fff; cursor: pointer; font-size: .82rem; padding: 4px 6px; border-radius: 4px; }
.usuario-btn:hover { background: rgba(255, 255, 255, .1); }
.usuario-btn .ic { width: 16px; height: 16px; }

/* barra de menu (abas) */
#menu-barra { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 10px; background: var(--sup); border-bottom: 1px solid var(--borda); position: sticky; top: 34px; z-index: 5; }
#menu-barra > .ic-btn { border: 0; background: transparent; }
#abas { display: flex; flex: 1; overflow-x: auto; scrollbar-width: thin; align-self: stretch; }
#abas a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--texto); padding: 0 12px; white-space: nowrap; border-bottom: 2px solid transparent; font-size: .88rem; }
#abas a:hover { background: var(--sup2); }
#abas a.ativo { border-color: var(--acento); font-weight: 600; }
.contador { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 4px; font-size: .7rem; font-weight: 700; color: #fff; background: var(--mudo); line-height: 1; }
.contador.vermelho { background: #d32f2f; } .contador.roxo { background: #8e24aa; } .contador.verde { background: #2e7d32; } .contador.amarelo { background: #b88f12; } .contador.laranja { background: #ef6c00; }
#aba-rotulo { font-size: .66rem; text-transform: uppercase; letter-spacing: .6px; color: var(--mudo); background: var(--sup3); padding: 2px 10px; border-radius: 4px; white-space: nowrap; }
.motel-nome { display: flex; align-items: center; gap: 6px; font-size: .95rem; white-space: nowrap; padding: 0 4px; }
.motel-nome .ic { width: 16px; height: 16px; color: var(--mudo); }
.motel-nome b { font-weight: 500; }

main { padding: 14px 16px 44px; max-width: 1760px; margin: 0 auto; }

/* rodapé de status */
#rodape { position: fixed; left: 0; right: 0; bottom: 0; height: 28px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--sup); border-top: 1px solid var(--borda); font-size: .78rem; z-index: 5; }
#rodape b { font-weight: 600; } #rodape em { font-style: normal; color: var(--ocupada); margin-right: 8px; }
#rodape .relogio { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
#rodape .relogio small { font-size: .68rem; color: var(--mudo); }

/* blocos */
.cartao { background: var(--sup); border: 1px solid color-mix(in srgb, var(--borda) 70%, transparent); border-radius: var(--raio); padding: 12px 14px; box-shadow: var(--sombra); margin-bottom: 12px; min-width: 0; }
.cartao > h3 { font-size: .9rem; margin-bottom: 8px; }
.cartao .sub-h { display: block; font-size: .72rem; color: var(--mudo); margin: -6px 0 8px; }
.cartao.estreito { max-width: 640px; }
.cartao.clicavel { cursor: pointer; } .cartao.clicavel:hover { border-color: var(--acento); }
.grade2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.grade3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.grade-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.barra input, .barra select { width: auto; flex: 0 1 220px; }
.barra label { flex-direction: row; align-items: center; margin: 0; flex: none; }
.barra h3 { margin: 0; text-transform: uppercase; font-size: .85rem; min-width: 170px; text-align: center; }
.linha2 { display: flex; gap: 10px; flex-wrap: wrap; }
.linha2 > label { min-width: 140px; }
.linha2.compacta > label { min-width: 110px; }
.faixa { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; background: var(--sup); border: 1px solid var(--borda); font-size: .82rem; cursor: default; }
button.chip { cursor: pointer; }
.chip i { width: 9px; height: 9px; border-radius: 2px; background: var(--c); }
.chip.ok { border-color: var(--ok); color: var(--ok); }
.chip.alerta { border-color: var(--erro); color: var(--erro); font-weight: 600; }
.chip.ativo { background: var(--acento); color: var(--acento-t); border-color: var(--acento); }
.alerta-linha { display: block; background: color-mix(in srgb, var(--limpeza) 14%, var(--sup)); border: 1px solid color-mix(in srgb, var(--limpeza) 45%, var(--borda)); padding: 7px 11px; border-radius: 4px; margin-bottom: 8px; color: var(--texto); text-decoration: none; }
.alerta-linha.forte { background: color-mix(in srgb, var(--reservada) 15%, var(--sup)); border-color: var(--reservada); font-weight: 600; }
.segmentos { display: inline-flex; border: 1px solid var(--borda); border-radius: 4px; overflow: hidden; background: var(--sup); }
.segmentos button { background: transparent; border: 0; padding: 5px 11px; cursor: pointer; border-right: 1px solid var(--borda); font-size: .8rem; text-transform: uppercase; letter-spacing: .3px; color: var(--mudo); }
.segmentos button:last-child { border-right: 0; }
.segmentos button.ativo { background: var(--acento); color: var(--acento-t); font-weight: 600; }
.badge { font-size: .72rem; padding: 2px 8px; border-radius: 4px; background: var(--sup3); vertical-align: middle; font-weight: 600; }
.badge[class*="st-"] { background: var(--c); color: #fff; }
.placa { font-family: ui-monospace, Consolas, monospace; background: var(--sup2); border: 1px solid var(--borda); border-radius: 3px; padding: 0 5px; font-size: .85em; letter-spacing: .5px; }

/* cores de status */
.st-livre { --c: var(--livre); } .st-ocupada { --c: var(--ocupada); } .st-limpeza { --c: var(--limpeza); } .st-limpando { --c: var(--limpando); }
.st-faxina { --c: var(--faxina); } .st-manutencao { --c: var(--manutencao); } .st-vistoria { --c: var(--vistoria); } .st-reservada { --c: var(--reservada); } .st-bloqueada { --c: var(--bloqueada); }

/* ---------- recepção: mapa de suítes ---------- */
.recepcao-tela { display: grid; grid-template-columns: 236px minmax(0, 1fr) 196px; margin: -14px -16px 0; min-height: calc(100vh - 34px - 43px - 28px - 58px); }
.painel-lateral { background: var(--sup); padding: 12px; min-width: 0; }
.painel-lateral.lembretes { border-right: 1px solid var(--borda); }
.painel-lateral.info { border-left: 1px solid var(--borda); font-size: .8rem; }
.painel-lateral header { display: flex; align-items: center; justify-content: space-between; }
.painel-lateral header h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.painel-lateral.info header h3 { font-size: .9rem; }
.painel-lateral h4 { font-size: .74rem; font-weight: 600; margin: 14px 0 6px; }
.l-acoes { display: flex; gap: 6px; margin: 10px 0; }
.l-acoes .ic { width: 15px; height: 15px; }
.lembrete { display: block; width: 100%; text-align: left; border: 1px solid var(--borda); background: var(--sup2); border-radius: 4px; padding: 7px 8px; margin-bottom: 8px; cursor: pointer; color: var(--texto); }
.lembrete.sel { outline: 2px solid var(--acento); outline-offset: -1px; }
.lembrete.sistema { cursor: default; border-left: 3px solid var(--limpeza); }
.lembrete.sistema.quente { border-left-color: var(--reservada); }
.lembrete.sistema.alerta { border-left-color: var(--ocupada); cursor: pointer; }
.l-topo { display: flex; align-items: center; gap: 6px; font-size: .76rem; }
.l-topo > span:last-child { margin-left: auto; color: var(--mudo); white-space: nowrap; }
.l-topo b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-suite { background: var(--sup3); border: 1px solid var(--borda); padding: 0 4px; border-radius: 3px; font-weight: 700; font-size: .72rem; }
.l-texto { display: block; font-size: .84rem; font-weight: 600; text-transform: uppercase; margin-top: 3px; line-height: 1.3; }
.alarme { display: block; text-align: center; background: var(--sup); border: 1px solid var(--borda); border-radius: 3px; font-size: .72rem; margin-top: 6px; padding: 2px; }
.alarme.vencido { color: #fff; background: var(--ocupada); border-color: var(--ocupada); }
.mapa-centro { padding: 6px 20px 20px; min-width: 0; }
.grupo-titulo { font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; margin: 14px 0 6px; }
.mapa { display: grid; grid-template-columns: repeat(auto-fill, 88px); gap: 4px 12px; }
.suite { display: flex; flex-direction: column; align-items: stretch; background: transparent; border: 0; padding: 18px 0 0; cursor: pointer; position: relative; color: var(--texto); text-align: center; }
.suite .marcas { position: absolute; top: 2px; left: 2px; display: flex; gap: 2px; }
.suite .marcas i { font-style: normal; display: grid; place-items: center; min-width: 14px; height: 14px; padding: 0 2px; font-size: .58rem; font-weight: 800; color: #fff; border-radius: 2px; background: var(--mudo); }
.m-roxo { background: #8e24aa !important; } .m-laranja { background: #ef6c00 !important; } .m-azul { background: #1565c0 !important; } .m-preto { background: #212121 !important; } .m-cinza { background: #8d9399 !important; }
.suite .bloco { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 50px; background: var(--c); color: #fff; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 -3px 0 rgba(0, 0, 0, .12); transition: filter .12s, transform .12s; }
.suite .num { font-size: 1.45rem; font-weight: 700; line-height: 1; letter-spacing: .3px; }
.suite .cat { font-size: .6rem; opacity: .95; max-width: 100%; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.suite .tempo { font-size: .95rem; color: var(--mudo); margin-top: 2px; font-variant-numeric: tabular-nums; }
.suite:hover .bloco { filter: brightness(1.1); transform: translateY(-1px); }
.suite:focus-visible { outline: none; } .suite:focus-visible .bloco { outline: 2px solid var(--texto); outline-offset: 2px; }
.suite.quase .bloco { outline: 2px solid var(--limpeza); outline-offset: 1px; }
.suite.estourou .tempo { color: var(--reservada); font-weight: 700; }
.suite.estourou .bloco { animation: pulso 1.6s infinite; }
@keyframes pulso { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ocupada) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .suite.estourou .bloco { animation: none; } }
.mapa.pequeno { grid-template-columns: repeat(auto-fill, 88px); margin-bottom: 12px; }
.mapa.pequeno .suite { padding-top: 0; }
.quadradinhos { display: flex; flex-wrap: wrap; gap: 3px; }
.quadradinho { width: 27px; height: 20px; padding: 0; border: 0; border-radius: 2px; background: var(--c); color: #fff; font-size: .68rem; font-weight: 700; cursor: pointer; }
.mini-dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; margin: 0; }
.mini-dl dt { color: var(--mudo); } .mini-dl dd { margin: 0; text-align: right; font-weight: 600; }
.barra-status { position: sticky; bottom: 28px; z-index: 4; display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; padding: 8px; margin: 0 -16px; background: var(--sup); border-top: 1px solid var(--borda); }
.barra-status > span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 62px; height: 40px; padding: 0 4px; background: var(--c); color: #fff; border-radius: 3px; line-height: 1.1; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.barra-status > span.escuro { background: color-mix(in srgb, var(--c) 62%, #000); }
.barra-status > span.sep { min-width: 14px; background: none; box-shadow: none; }
.barra-status b { font-size: .9rem; } .barra-status small { font-size: .6rem; }

/* janela de check-in */
.modal.sem-padding { padding: 0; }
.janela-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px 4px; }
.janela-topo h2 { margin: 0; font-size: 1.1rem; }
.janela-topo p { margin: 2px 0 0; color: var(--mudo); font-size: .8rem; }
.janela-topo .ic-btn { border: 0; }
.janela-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; padding: 0 18px 8px; }
.janela-form h4, .janela-info h4 { font-size: .8rem; font-weight: 700; margin: 12px 0 6px; }
.janela-info { background: var(--sup2); border-radius: 4px; padding: 2px 12px 12px; margin-top: 10px; align-self: start; }
.freq { background: var(--sup); border: 1px solid var(--borda); border-radius: 4px; padding: 8px; margin-bottom: 8px; }
.freq > div { display: flex; justify-content: space-around; text-align: center; }
.freq span { display: flex; flex-direction: column; font-size: .72rem; color: var(--mudo); }
.freq b { font-size: 1rem; color: var(--texto); }
.ult-entradas { list-style: none; margin: 0; padding: 0; }
.ult-entradas li { display: flex; gap: 14px; background: var(--sup); border: 1px solid var(--borda); border-radius: 4px; padding: 5px 8px; margin-bottom: 4px; font-size: .78rem; }
.radios { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 6px; }
.radios label.check { font-size: .82rem; }
.janela-rodape { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--borda); background: var(--sup2); border-radius: 0 0 8px 8px; }

/* entrada: períodos */
.periodos { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 6px; margin-bottom: 8px; }
.periodo { margin: 0; color: var(--texto); }
.periodo input { position: absolute; opacity: 0; width: 1px; }
.periodo span { display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: 4px; padding: 7px 9px; cursor: pointer; background: var(--sup); }
.periodo small { color: var(--mudo); font-size: .72rem; }
.periodo em { font-style: normal; font-size: 1rem; font-weight: 700; margin-top: 2px; }
.periodo input:checked + span { border-color: var(--acento); background: var(--acento-suave); box-shadow: inset 0 0 0 1px var(--acento); }
.periodo input:focus-visible + span { outline: 2px solid var(--acento); }
.placa-alerta { background: var(--erro); color: #fff; padding: 8px 12px; border-radius: 4px; font-weight: 700; margin-bottom: 10px; }

/* comanda */
.comanda { display: flex; flex-direction: column; max-height: 88vh; }
.com-topo { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--borda); }
.com-topo h2 { margin-bottom: 2px; }
.com-topo p { margin: 0; font-size: .82rem; }
.com-corpo { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; overflow: auto; padding-top: 12px; }
.com-produtos { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; max-height: 46vh; overflow: auto; align-content: start; }
.produto { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 9px; border: 1px solid var(--borda); border-radius: 4px; background: var(--sup2); cursor: pointer; text-align: left; }
.produto:hover { border-color: var(--acento); }
.produto b { font-size: .82rem; font-weight: 600; } .produto span { font-weight: 700; } .produto small { color: var(--mudo); font-size: .72rem; }
.produto.sem small { color: var(--erro); }
.totais { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin: 10px 0; }
.totais dt { color: var(--mudo); } .totais dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.totais .grande { font-size: 1.15rem; font-weight: 700; color: var(--texto); }
.pag-linha { display: flex; gap: 8px; margin-bottom: 8px; }
.pag-linha select { flex: 0 0 130px; }
.troco { font-size: 1.05rem; margin: 6px 0; }
.troco.falta { color: var(--erro); }

/* cobrança (fechamento da conta, visual do autoatendimento) */
.modal.escuro { --ouro: #e3a72a; --cob-sup: #142035; --cob-sup2: #1b2a44; --cob-linha: #22324d; --cob-mudo: #8fa1bc;
  background: #0d1625; color: #e9edf4; border-color: #1c2a40; max-width: 920px; }
.escuro .ic-btn { background: transparent; border-color: #2a3a55; color: #e9edf4; }
.cob-topo { display: flex; align-items: center; gap: 12px; }
.cob-icone { display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid var(--ouro); border-radius: 50%; color: var(--ouro); flex: none; }
.cob-topo h2 { margin: 0; font-size: 1.45rem; font-weight: 600; color: #fff; }
.cob-topo p { margin: 0; color: var(--cob-mudo); font-size: .8rem; }
.cob-suite { display: flex; align-items: baseline; gap: 10px; padding: 6px 16px; border-radius: 6px; color: #fff; background: linear-gradient(180deg, #c9961c, #8a6510); border: 1px solid #d9a93a; text-transform: uppercase; font-size: .72rem; font-weight: 700; }
.cob-suite b { font-size: 1.45rem; font-weight: 600; }
.cob-tempos { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--cob-sup); border-radius: 8px; padding: 10px 16px; margin: 14px 0; }
.cob-tempos > span { display: flex; align-items: center; gap: 10px; }
.cob-tempos > span + span { border-left: 1px solid var(--cob-linha); padding-left: 16px; }
.cob-tempos .ic { color: var(--ouro); width: 20px; height: 20px; }
.cob-tempos small { display: block; font-size: .66rem; color: var(--cob-mudo); }
.cob-tempos b { font-size: .95rem; color: #fff; font-weight: 600; }
.cob-corpo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cob-cartao { display: flex; flex-direction: column; background: var(--cob-sup); border-radius: 10px; padding: 14px 16px; min-height: 270px; }
.cob-cartao h3 { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 500; color: #fff; margin: 0 0 10px; }
.cob-cartao h3 i, .cob-itens i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 5px; background: #2a2618; color: var(--ouro); flex: none; }
.cob-cartao h3 .ic, .cob-itens .ic { width: 15px; height: 15px; }
.cob-cab { display: flex; justify-content: space-between; background: var(--cob-sup2); border-radius: 4px; padding: 6px 10px; font-size: .7rem; color: var(--cob-mudo); }
.cob-itens { list-style: none; margin: 4px 0 0; padding: 0; max-height: 240px; overflow: auto; }
.cob-itens li { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--cob-linha); font-size: .84rem; }
.cob-itens i { width: 22px; height: 22px; background: var(--cob-sup2); color: #c9d3e2; }
.cob-itens span { flex: 1; } .cob-itens b { color: var(--ouro); font-weight: 600; white-space: nowrap; }
.cob-itens .vazio { color: var(--cob-mudo); justify-content: center; border: 0; }
.cob-resumo { display: grid; grid-template-columns: 1fr auto; gap: 14px 10px; margin: 6px 0 14px; font-size: .9rem; }
.cob-resumo dt { display: flex; align-items: center; gap: 10px; }
.cob-resumo dt .ic { width: 16px; height: 16px; color: #9fb0c8; }
.cob-resumo small { color: var(--cob-mudo); font-size: .72rem; }
.cob-resumo dd { margin: 0; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.cob-total { margin-top: auto; text-align: center; padding: 10px; border-radius: 8px; background: linear-gradient(180deg, #a77a14, #6f5009); border: 1px solid #c89a2a; }
.cob-total small { display: block; color: #f6d77a; font-size: .9rem; }
.cob-total b { font-size: 1.65rem; color: #ffe08a; font-weight: 600; }
.cob-pagar { margin: 16px -18px -18px; padding: 16px 18px 18px; background: #0a111d; border-top: 1px solid #172338; border-radius: 0 0 14px 14px; text-align: center; }
.cob-pagar > p { margin: 0 0 12px; font-size: 1rem; color: #fff; }
.cob-formas { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.cob-formas button { display: inline-flex; align-items: center; gap: 10px; min-width: 132px; justify-content: center; background: #111c2d; border: 1px solid #24344f; color: #fff; padding: 11px 20px; border-radius: 6px; font-size: 1rem; cursor: pointer; }
.cob-formas button:hover { border-color: #3a4f72; }
.cob-formas button.ativo { border-color: var(--ouro); color: var(--ouro); box-shadow: inset 0 0 0 1px var(--ouro); }
.cob-detalhe { max-width: 600px; margin: 14px auto 0; text-align: left; }
.escuro input, .escuro select { background: #111c2d; border-color: #24344f; color: #fff; }
.escuro label { color: var(--cob-mudo); }
.escuro .btn { background: #142035; border-color: #2a3a55; color: #e9edf4; }
.escuro .btn.primario { background: linear-gradient(180deg, #e3a72a, #b8820f); border-color: #e3a72a; color: #1d1404; font-weight: 700; }
.escuro .troco { color: #fff; } .escuro .troco.falta { color: #ff8a80; }
.escuro .acoes { justify-content: center; }

/* tabelas */
.tabela { width: 100%; border-collapse: collapse; background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; margin-bottom: 12px; font-variant-numeric: tabular-nums; font-size: .85rem; }
.cartao .tabela { border: 0; margin: 0; }
.tabela th, .tabela td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela th { font-size: .7rem; text-transform: uppercase; letter-spacing: .3px; color: var(--mudo); font-weight: 600; background: var(--sup2); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--sup2) 55%, var(--sup)); }
.tabela tfoot td { background: var(--sup2); font-weight: 600; }
.tabela .n { text-align: right; white-space: nowrap; }
.tabela tr.clicavel { cursor: pointer; } .tabela tr.clicavel:hover td { background: var(--acento-suave); }
.tabela tr.riscado td:not(:last-child) { text-decoration: line-through; color: var(--mudo); }
.tabela tr.atrasado td:first-child { color: var(--erro); font-weight: 600; }
.tabela tr.mudo td { color: var(--mudo); }
.tabela td input, .tabela td select { padding: 4px 7px; }
.tabela.dre tr.total td { font-weight: 700; background: var(--sup2); }
.tabela.dre tr.sub td:first-child { color: var(--mudo); }
.tabela.dre tr.grande td { font-size: 1.05rem; }
.valor-ed { width: 110px; text-align: right; }
.barrinha { height: 4px; background: var(--sup3); border-radius: 2px; margin-top: 3px; min-width: 60px; }
.barrinha i { display: block; height: 100%; background: var(--acento); border-radius: 2px; }
.barrinha.estouro i { background: var(--erro); }
.abc { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 700; font-size: .75rem; color: #fff; }
.abc-A { background: var(--g-vermelho); } .abc-B { background: var(--g-verde); } .abc-C { background: var(--g-azul); }
.lista { list-style: none; padding: 0; margin: 0; }
.lista li { padding: 6px 0; border-bottom: 1px solid var(--borda); }
.lista li:last-child { border-bottom: 0; }
.rolagem { overflow-x: auto; }

/* indicadores */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-bottom: 12px; }
.kpi { background: var(--sup); border: 1px solid color-mix(in srgb, var(--borda) 70%, transparent); border-radius: var(--raio); padding: 9px 12px; display: flex; flex-direction: column; gap: 1px; box-shadow: var(--sombra); position: relative; }
.kpi span { font-size: .66rem; color: var(--mudo); text-transform: uppercase; letter-spacing: .3px; font-weight: 600; }
.kpi b { font-size: 1.15rem; font-variant-numeric: tabular-nums; text-align: center; margin-top: 4px; }
.kpi small { font-size: .72rem; text-align: center; }
.kpi .tend { position: absolute; top: 8px; right: 10px; font-size: .66rem; }
.numero { font-size: 1.6rem; font-weight: 700; margin: 0 0 4px; }
.numero small { font-size: .85rem; font-weight: 400; color: var(--mudo); }
.periodo-sel input[type=date] { flex: 0 0 auto; }
.grafico { width: 100%; height: auto; display: block; overflow: visible; }
.grafico .eixo { stroke: var(--borda); }
.grafico .grade-linha { stroke: var(--borda); stroke-dasharray: 2 3; stroke-width: .6; }
.grafico .serie0 { fill: var(--serie0); } .grafico .serie1 { fill: var(--serie1); }
.grafico rect.neg { fill: var(--erro); }
.grafico .rotulo { fill: var(--mudo); font-size: 11px; text-anchor: middle; }
.grafico .rotulo-y { fill: var(--mudo); font-size: 10px; text-anchor: end; }
.grafico.area .rotulo-y { font-size: 8px; } .grafico .rotulo-x { fill: var(--mudo); font-size: 7.5px; text-anchor: end; }
.grafico .linha-serie { fill: none; stroke: var(--acento); stroke-width: 2.5; }
.grafico .ponto { fill: var(--acento); }
.legenda { display: flex; gap: 16px; font-size: .76rem; color: var(--mudo); margin-bottom: 4px; flex-wrap: wrap; }
.legenda.centro { justify-content: center; }
.legenda i { display: inline-block; width: 22px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.legenda i.serie0 { background: var(--serie0); } .legenda i.serie1 { background: var(--serie1); }
.legenda-pilulas { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 10px; font-size: .68rem; color: var(--mudo); margin-bottom: 6px; }
.legenda-pilulas i { display: inline-block; width: 18px; height: 8px; border-radius: 3px; margin-right: 4px; vertical-align: 0; }
.rosca { display: block; width: 116px; height: 116px; margin: 0 auto; }

/* mapa de calor (verde = vazio, vermelho = cheio) */
.calor { border-collapse: separate; border-spacing: 2px; font-size: .7rem; width: 100%; min-width: 640px; }
.calor th { color: var(--mudo); font-weight: 500; padding: 2px; }
.calor td { text-align: center; padding: 6px 0; border-radius: 2px; color: #1f2a14; font-weight: 600; background: hsl(calc(120 - var(--v) * 120) 72% 52%); }
.calor td.sem { background: var(--sup2); }

/* medidores em anel */
.anel { position: relative; display: inline-grid; place-items: center; width: var(--tam); height: var(--tam); flex: none; }
.anel svg { width: 100%; height: 100%; }
.anel circle { fill: none; stroke-width: 3.6; }
.anel .anel-fundo { stroke: var(--sup3); }
.anel .anel-valor { stroke-linecap: round; }
.anel b { position: absolute; font-size: .62rem; font-weight: 700; }

/* gerencial: principal */
.ger-topo { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 12px; }
.motel-card { background: var(--sup); border-radius: var(--raio); box-shadow: var(--sombra); padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--borda) 70%, transparent); }
.motel-card h4 { display: flex; justify-content: space-between; font-size: .72rem; text-transform: uppercase; margin: 0 0 8px; color: var(--mudo); font-weight: 700; }
.aneis { display: flex; justify-content: space-around; margin-bottom: 8px; }
.nums { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; text-align: center; }
.nums span { display: flex; flex-direction: column; font-size: .64rem; color: var(--mudo); line-height: 1.2; }
.nums b { font-size: .86rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.ger-grade { display: grid; grid-template-columns: 280px minmax(0, 1fr) 340px; gap: 12px; align-items: start; }
.ger-grade > div { min-width: 0; }
.cartao h4.titulo { font-size: .74rem; text-transform: uppercase; font-weight: 700; margin: 0 0 8px; display: flex; justify-content: space-between; align-items: center; }
.cx-linhas { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 6px; text-align: center; }
.cx-linhas span { display: flex; flex-direction: column; font-size: .64rem; color: var(--mudo); }
.cx-linhas b { font-size: .82rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.cx-total { text-align: right; font-size: 1.1rem; font-weight: 700; margin-top: 8px; }
.centro-txt { text-align: center; }
.mini-mapa { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 3px; }
.mm { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 32px; background: var(--c); color: #fff; border-radius: 2px; font-weight: 700; font-size: .78rem; line-height: 1; }
.mm small { font-size: .52rem; font-weight: 500; margin-top: 2px; opacity: .9; }
.mm-rodape { display: flex; justify-content: flex-end; gap: 14px; font-size: .74rem; margin-top: 8px; color: var(--mudo); }
.ind-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ind-grade .kpi b { font-size: 1rem; }
.nps-bloco { display: flex; gap: 14px; align-items: center; }
.nps-num { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: 76px; background: #20c020; color: #fff; border-radius: 4px; flex: none; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.nps-num.medio { background: #e8b400; } .nps-num.ruim { background: #e53935; }
.nps-num b { font-size: 1.7rem; line-height: 1; } .nps-num small { font-size: .7rem; }
.nps-linhas { flex: 1; display: grid; grid-template-columns: auto 1fr auto; gap: 6px 8px; align-items: center; font-size: .84rem; }
.nps-linhas .ic { width: 17px; height: 17px; }
.nps-linhas .p { color: #20a020; } .nps-linhas .n { color: #d4a000; } .nps-linhas .d { color: #e53935; }
.nps-linhas em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }

/* ferramentas dos relatórios (Ações · Por · Gráfico · Data) */
.ferramentas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 22px; margin-bottom: 12px; background: var(--sup); border-radius: var(--raio); padding: 8px 12px; box-shadow: var(--sombra); }
.ferramentas .f { display: flex; flex-direction: column; gap: 3px; }
.ferramentas .f > small { font-size: .62rem; text-transform: uppercase; color: var(--mudo); font-weight: 700; letter-spacing: .4px; }
.ferramentas .f > div { display: flex; align-items: center; gap: 6px; }
.ferramentas .ic-btn { border: 0; background: transparent; }
.navega { display: inline-flex; align-items: center; gap: 4px; }
.navega b { min-width: 120px; text-align: center; text-transform: uppercase; font-size: .82rem; }
.navega button { background: transparent; border: 0; cursor: pointer; font-size: 1.1rem; color: var(--texto); padding: 2px 8px; }
.ferramentas input { width: auto; }
.resumo-ab { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.resumo-ab dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 0; font-size: .82rem; }
.resumo-ab dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* mapa de reservas (linha do tempo) */
.linha-tempo { overflow: auto; max-height: calc(100vh - 230px); background: var(--sup); border-radius: var(--raio); box-shadow: var(--sombra); }
.linha-tempo table { border-collapse: collapse; font-size: .72rem; min-width: 100%; }
.linha-tempo th, .linha-tempo td { border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda); padding: 2px 3px; vertical-align: top; }
.linha-tempo thead th { position: sticky; top: 0; background: var(--sup); z-index: 2; font-weight: 600; white-space: nowrap; color: var(--mudo); padding: 6px 4px; }
.linha-tempo thead th.hoje { color: var(--acento); }
.linha-tempo thead th:first-child { left: 0; z-index: 3; }
.linha-tempo tbody th { position: sticky; left: 0; background: var(--sup); z-index: 1; text-align: left; min-width: 54px; font-weight: 600; }
.linha-tempo td { min-width: 96px; height: 30px; }
.linha-tempo td.hoje { background: var(--acento-suave); }
.linha-tempo tr.faixa-cat th, .linha-tempo tr.faixa-cat td { background: linear-gradient(90deg, #6b83b5, #9b6fcf); color: #fff; height: 18px; padding: 1px 6px; border-color: transparent; text-transform: uppercase; font-size: .66rem; }
.res-bloco { display: block; width: 100%; text-align: left; border: 0; border-radius: 3px; padding: 2px 5px; margin: 1px 0; font-size: .68rem; background: #c2185b; color: #fff; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 3px 0 0 rgba(0, 0, 0, .2); }
.res-bloco.st-chegou { background: #43a047; } .res-bloco.st-cancelada, .res-bloco.st-nao_veio { background: #9e9e9e; text-decoration: line-through; }
.res-bloco.sem-suite { background: #e67e22; }

/* mapa de status (ocupação por hora, barras empilhadas) */
.status-dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.status-dias h4 { text-transform: uppercase; font-size: .74rem; margin: 0 0 6px; }

/* calendário */
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendario > b { text-align: center; color: var(--mudo); font-size: .8rem; padding: 4px; }
.calendario .dia { background: var(--sup); border: 1px solid var(--borda); border-radius: 4px; min-height: 86px; padding: 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.calendario .dia.hoje { border-color: var(--acento); }
.calendario .dia > span { font-size: .78rem; color: var(--mudo); }
.res { font-size: .72rem; text-align: left; border: 0; border-radius: 3px; padding: 2px 4px; cursor: pointer; background: color-mix(in srgb, var(--reservada) 22%, var(--sup)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res.st-cancelada, .res.st-nao_veio { text-decoration: line-through; opacity: .6; }
.res.st-chegou { background: color-mix(in srgb, var(--livre) 22%, var(--sup)); }

/* finanças: principal */
.fin-tela { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 12px; align-items: start; }
.destaques { background: var(--sup2); border-radius: var(--raio); padding: 10px; border: 1px solid var(--borda); }
.destaques > h3 { font-size: .85rem; margin: 2px 2px 10px; }
.dest-card { display: flex; gap: 10px; align-items: flex-start; background: var(--sup); border: 1px solid var(--borda); border-radius: 6px; padding: 9px 10px; margin-bottom: 8px; box-shadow: var(--sombra); text-decoration: none; color: var(--texto); }
.dest-card .dest-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: color-mix(in srgb, var(--c) 16%, var(--sup)); color: var(--c); flex: none; }
.dest-card .ic { width: 16px; height: 16px; }
.dest-card div { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.dest-card div > span { font-size: .78rem; font-weight: 700; color: var(--c); }
.dest-card b { font-size: .9rem; color: var(--c); }
.dest-card small { font-size: .68rem; color: var(--mudo); }
.dest-card.vermelho { --c: #d32f2f; } .dest-card.verde { --c: #2e7d32; }
.atividades { list-style: none; margin: 0; padding: 0; }
.atividades li { background: var(--sup); border-left: 3px solid var(--acento); border-radius: 3px; padding: 6px 8px; margin-bottom: 6px; font-size: .74rem; box-shadow: var(--sombra); }
.atividades li span { display: flex; justify-content: space-between; color: var(--mudo); font-size: .68rem; }
.fin-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fin-grade .cartao { margin: 0; }
.span2 { grid-column: span 2; }
.dre-mini { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: .78rem; margin: 0; }
.dre-mini dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dre-mini .verde { color: #2e7d32; } .dre-mini .vermelho { color: #d32f2f; } .dre-mini .forte { font-weight: 700; }
.top-lista { list-style: none; margin: 0; padding: 0; font-size: .78rem; }
.top-lista li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--borda); }
.top-lista li b { color: #d32f2f; font-variant-numeric: tabular-nums; white-space: nowrap; }
.top-lista li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.abc-card { background: var(--sup); border-radius: var(--raio); box-shadow: var(--sombra); border-top: 3px solid var(--c); overflow: hidden; }
.abc-card h4 { margin: 0; padding: 6px; text-align: center; color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--sup)); font-size: 1rem; }
.abc-card dl { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; margin: 0; padding: 10px 12px; font-size: .78rem; }
.abc-card dt { color: var(--mudo); text-transform: uppercase; font-size: .66rem; }
.abc-card dd { margin: 0; text-align: right; font-weight: 600; }
.abc-card.A { --c: var(--g-vermelho); } .abc-card.B { --c: var(--g-verde); } .abc-card.C { --c: var(--g-azul); }

/* limpeza */
.fila-limpeza { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cartao.limpeza { border-left: 6px solid var(--c); }
.cartao.limpeza .lt { display: flex; align-items: baseline; gap: 10px; }
.cartao.limpeza .num { font-size: 2.1rem; font-weight: 700; }

/* categorias */
.linha-per, .linha-aj { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; flex-wrap: wrap; }
.linha-per input[name=pm] { width: 90px; flex: none; } .linha-per input[name=pp] { width: 110px; flex: none; }
.linha-per input[name=pn] { flex: 1; width: auto; }
.linha-aj input[name=an] { flex: 1 1 160px; width: auto; } .linha-aj input[type=time] { width: 110px; flex: none; } .linha-aj input[name=apct] { width: 80px; flex: none; }
.dias { display: flex; gap: 2px; }
.dias label { flex-direction: column; align-items: center; margin: 0; font-size: .7rem; gap: 0; }
.dias input { width: auto; }

/* modal */
.modal-fundo { position: fixed; inset: 0; background: rgba(8, 10, 16, .5); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; }
.modal { background: var(--sup); border: 1px solid var(--borda); border-radius: 8px; padding: 18px; width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.modal.largo { max-width: 1080px; }
.acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }

/* avisos */
#avisos { position: fixed; bottom: 40px; right: 16px; display: flex; flex-direction: column; gap: 6px; z-index: 30; width: min(380px, calc(100vw - 32px)); }
.aviso { background: #263238; color: #fff; padding: 10px 14px; border-radius: 4px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); transition: opacity .4s; border-left: 4px solid #43a047; }
.aviso.erro { background: #b71c1c; border-left-color: #ff8a80; } .aviso.info { background: #b3261e; border-left-color: #ffcdd2; }
.aviso.sai { opacity: 0; }

/* login */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: linear-gradient(160deg, #2b2f35, #14161a); }
.login .cartao { width: 100%; max-width: 380px; padding: 28px; }

@media (max-width: 1560px) { #aba-rotulo { display: none; } }
@media (max-width: 1280px) {
  .ger-grade { grid-template-columns: 260px minmax(0, 1fr); }
  .ger-grade > div:last-child { grid-column: 1 / -1; }
  .ger-grade > div:last-child .ind-grade { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .fin-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .recepcao-tela { grid-template-columns: 220px minmax(0, 1fr); }
  .painel-lateral.info { display: none; }
}
@media (max-width: 860px) {
  .janela-corpo { grid-template-columns: 1fr; }
  .fin-tela { grid-template-columns: 1fr; }
  .ger-grade { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 14px; }
  #topo { height: 30px; }
  #topo .marca b, #mod-nome::before, .usuario-btn span { display: none; }
  #mod-nome { display: inline; }
  .topo-dir { margin-left: auto; }
  #modulos { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; background: var(--sup); border-top: 1px solid var(--borda); justify-content: space-around; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); gap: 0; }
  #modulos a { flex-direction: column; gap: 2px; color: var(--mudo); font-size: .68rem; padding: 4px 6px; flex: 1; }
  #modulos a .ic { width: 22px; height: 22px; }
  #modulos a.ativo { background: transparent; color: var(--acento); }
  #modulos a:hover { background: transparent; }
  #menu-barra { top: 30px; flex-wrap: wrap; padding: 0 6px; }
  #abas { order: 3; flex-basis: 100%; border-top: 1px solid var(--borda); }
  #abas a { padding: 10px 12px; }
  #aba-rotulo { display: none; }
  .motel-nome { margin: 0 auto; transform: translateX(-15px); }
  #rodape { display: none; }
  main { padding: 12px 16px 84px; }
  .recepcao-tela { grid-template-columns: 1fr; margin: -12px -16px 0; min-height: 0; }
  .painel-lateral.lembretes { border-right: 0; border-bottom: 1px solid var(--borda); }
  .lembretes .l-lista { display: flex; gap: 8px; overflow-x: auto; }
  .lembretes .lembrete { flex: 0 0 220px; margin: 0; }
  .mapa-centro { padding: 4px 16px 16px; }
  .mapa { grid-template-columns: repeat(auto-fill, 74px); gap: 2px 10px; }
  .suite .bloco { height: 46px; }
  .barra-status { bottom: 58px; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
  .barra-status > span { min-width: 56px; }
  .com-corpo, .cob-corpo { grid-template-columns: 1fr; }
  .cob-topo { flex-wrap: wrap; }
  .cob-topo .espaco { display: none; }
  .cob-cartao { min-height: 0; }
  .cob-tempos { grid-template-columns: 1fr; gap: 8px; }
  .cob-tempos > span + span { border-left: 0; padding-left: 0; }
  .cob-formas button { min-width: 0; flex: 1 1 40%; padding: 10px; }
  .tabela { display: block; overflow-x: auto; white-space: nowrap; }
  .calendario .dia { min-height: 60px; }
  .fin-grade { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .abc-cards { grid-template-columns: 1fr; }
  .ferramentas { gap: 8px 14px; }
  #avisos { bottom: 72px; left: 16px; right: 16px; width: auto; }
}

@media print {
  #topo, #menu-barra, #rodape, .barra, .periodo-sel, .ferramentas, #avisos, .barra-status { display: none !important; }
  body { background: #fff; color: #000; }
  .cartao, .kpi, .tabela { box-shadow: none; border-color: #ccc; }
}