:root {
  --navy: #0a1150;
  --navy-2: #151f78;
  --amarelo: #f9d70b;
  --sol: #ff4b12;
  --ciano: #4ef5f2;
  --fundo: #f3f4fa;
  --borda: #dfe1ee;
  --texto: #232640;
  --suave: #6b6f8d;
  --livre: #3fb35a;
  --ocupada: #e5484d;
  --limpeza: #f5a623;
  --manut: #3b82c4;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: "Segoe UI", Roboto, Arial, sans-serif; color: var(--texto); font-size: 14px; background: #fff; }
button { font: inherit; }

.app { display: flex; height: 100vh; height: 100dvh; }

/* ---------- menu lateral ---------- */
.menu { width: 224px; background: var(--navy); color: #fff; flex: none; overflow-y: auto; transition: transform .2s; }
.menu-brand { padding: 14px 18px 8px; }
.menu-brand img { width: 100%; max-width: 150px; display: block; margin: 0 auto; border-radius: 10px; }
.menu-group { padding: 16px 18px 6px; color: var(--amarelo); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.menu-item { display: block; padding: 10px 18px 10px 22px; cursor: pointer; color: #dfe2ff; text-decoration: none; border-left: 4px solid transparent; }
.menu-item:hover { background: #ffffff14; }
.menu-item.active { border-left-color: var(--amarelo); color: #fff; font-weight: 600; background: #ffffff1f; }
.menu-item.soon { color: #8a90c4; cursor: default; }
.menu-item.soon:hover { background: none; }
.menu [hidden] { display: none; }
.scrim { position: fixed; inset: 0; background: #0008; z-index: 20; }
.scrim[hidden] { display: none; }

/* ---------- área principal ---------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 58px; background: #fff; border-bottom: 3px solid var(--amarelo); flex: none; }
.topbar h1 { color: var(--navy); font-weight: 600; font-size: 20px; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.quem { color: var(--suave); white-space: nowrap; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); display: grid; place-items: center; font-weight: 700; color: var(--amarelo); flex: none; }
.burger { display: none; background: none; border: 0; font-size: 24px; color: var(--navy); cursor: pointer; padding: 4px 6px; }

.view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.view[hidden] { display: none; }
.mapa-wrap { flex: 1; display: flex; min-height: 0; }
.filtros { width: 240px; background: var(--fundo); padding: 10px 14px; overflow-y: auto; flex: none; border-right: 1px solid var(--borda); }
.data-caixa { color: var(--suave); padding: 4px 0 6px; }
.filtros h3 { color: var(--navy); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 6px; border-bottom: 1px solid var(--borda); padding-bottom: 4px; }
.filtros label { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; }
.filtros input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--navy); }
.limpar { margin-top: 16px; width: 100%; }
.dot { width: 11px; height: 11px; border-radius: 50%; border: 3px solid currentColor; display: inline-block; flex: none; }
.sq { width: 12px; height: 12px; border-radius: 2px; display: inline-block; flex: none; }

/* grade de portas: ocupa toda a largura disponível, qualquer tela */
.grade { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); align-content: start; gap: 14px 4px; padding: 16px 12px; overflow-y: auto; background: #fff; }
.uh { text-align: center; cursor: pointer; padding: 8px 0 6px; border-radius: 8px; user-select: none; }
.uh:hover, .uh.sel { background: var(--fundo); }
.uh svg { width: 38px; height: 58px; }
.uh .num { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 4px; color: var(--navy); font-weight: 700; font-size: 13px; }
.uh.dim { opacity: .15; }

.rodape { min-height: 46px; background: var(--fundo); border-top: 1px solid var(--borda); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 16px; flex: none; }
.rodape-btns { display: flex; gap: 8px; }
.btn-icon { border: 1px solid var(--navy); color: var(--navy); background: #fff; border-radius: 6px; padding: 5px 12px; cursor: pointer; }
.btn-icon:hover { background: var(--navy); color: #fff; }
#btn-filtros { display: none; }
#totais { font-weight: 600; color: var(--navy); }

/* ---------- botões ---------- */
.btn { border: 1px solid transparent; border-radius: 6px; padding: 8px 16px; cursor: pointer; font-weight: 500; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); }
.btn-outline { background: #fff; border-color: var(--navy); color: var(--navy); }
.btn-ghost { background: none; border-color: var(--borda); color: var(--navy); padding: 6px 12px; }
.btn-danger { background: #fff; border-color: #d9534f; color: #d9534f; }

/* ---------- popover da porta ---------- */
.pop { position: fixed; z-index: 30; width: 250px; background: #fff; border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 6px 24px #0a115040; }
.pop[hidden] { display: none; }
.pop-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-weight: 700; font-size: 15px; color: var(--navy); border-bottom: 1px solid var(--borda); }
.pop-i { width: 24px; height: 24px; border: 1.5px solid var(--navy); border-radius: 4px; display: grid; place-items: center; font-size: 13px; flex: none; }
.pop-row { display: flex; gap: 10px; align-items: center; padding: 7px 12px; color: #444; border-bottom: 1px solid #f0f0f5; }
.pop-row .ic { width: 20px; text-align: center; color: var(--suave); }
.pop-row span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-main { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 20px); margin: 10px; padding: 12px; border: 0; border-radius: 4px; color: #fff; font-weight: 600; font-size: 15px; cursor: pointer; }
.pop-main.livre { background: var(--livre); }
.pop-main.ocupada { background: var(--ocupada); }
.pop-main.limpeza { background: var(--limpeza); }
.pop-main.manutencao { background: var(--manut); }
.pop-tools { display: flex; gap: 6px; padding: 0 10px 10px; }
.pop-tools .sp { flex: 1; }
.pop-tool { width: 34px; height: 30px; border: 1.5px solid var(--navy); color: var(--navy); background: #fff; border-radius: 4px; cursor: pointer; font-size: 15px; }
.pop-tool:hover { background: var(--navy); color: #fff; }

/* ---------- modal ---------- */
.modal-bg { position: fixed; inset: 0; background: #0a115080; display: grid; place-items: center; z-index: 40; padding: 12px; }
.modal-bg[hidden] { display: none; }
.modal { background: #fff; border-radius: 10px; padding: 20px; width: min(460px, 100%); max-height: 92vh; max-height: 92dvh; overflow-y: auto; }
.modal h2 { margin: 0 0 12px; color: var(--navy); font-weight: 600; font-size: 19px; }
.modal p { color: var(--suave); line-height: 1.5; }
.modal label, .login-card label { display: block; margin: 12px 0; color: #4a4e6a; font-size: 13px; }
.modal input, .modal select, .modal textarea, .login-card input { display: block; width: 100%; padding: 9px; margin-top: 4px; border: 1px solid #c9ccdf; border-radius: 6px; font: inherit; font-size: 14px; }
.modal textarea { min-height: 80px; resize: vertical; }
.modal input:focus, .modal select:focus, .modal textarea:focus, .login-card input:focus { outline: 2px solid var(--amarelo); border-color: var(--navy); }
.modal .acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.dois { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hist-item { padding: 8px 0; border-bottom: 1px solid #eee; font-size: 13px; }
.hist-item small { color: var(--suave); display: block; }
.erro { color: #d9534f; min-height: 18px; margin: 4px 0; font-size: 13px; }

/* ---------- administração ---------- */
.admin { padding: 16px; overflow: auto; }
.admin table { border-collapse: collapse; width: 100%; max-width: 900px; }
.admin th, .admin td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.admin th { color: var(--navy); font-weight: 600; }
.admin .barra { margin-bottom: 12px; }

/* ---------- login ---------- */
.login-body { background: var(--navy); min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login-card { background: #fff; padding: 24px 28px 28px; border-radius: 12px; width: min(360px, 100%); border-top: 5px solid var(--amarelo); }
.login-logo { display: block; width: 160px; height: 160px; margin: 0 auto 8px; border-radius: 14px; }
.login-card .btn { width: 100%; margin-top: 6px; }

/* ---------- responsivo ---------- */
@media (max-width: 1024px) {
  .menu { position: fixed; inset: 0 auto 0 0; z-index: 25; transform: translateX(-100%); }
  .menu.open { transform: none; }
  .burger { display: block; }
}
@media (max-width: 820px) {
  .mapa-wrap { flex-direction: column; }
  .filtros { display: none; width: 100%; max-height: 45%; border-right: 0; border-bottom: 1px solid var(--borda); }
  .filtros.open { display: block; }
  #btn-filtros { display: inline-block; }
  .quem { display: none; }
  .grade { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); padding: 12px 6px; }
  /* popover vira "gaveta" na parte de baixo da tela */
  .pop { position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; width: 100%; border-radius: 14px 14px 0 0; padding-bottom: env(safe-area-inset-bottom); }
}
@media (max-width: 480px) {
  .rodape-btns .btn-icon span { display: none; }
  .btn-ghost { padding: 6px 9px; }
  .dois { grid-template-columns: 1fr; }
}
@media (min-width: 1700px) {
  .grade { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .uh svg { width: 46px; height: 70px; }
  body { font-size: 15px; }
}

/* ---------- cadastro de pessoas ---------- */
.pessoas { overflow-y: auto; padding: 16px; }
.plista-barra { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.plista-barra input { flex: 1; min-width: 200px; max-width: 460px; padding: 9px 12px; border: 1px solid #c9ccdf; border-radius: 6px; font: inherit; }
.plista-tabela { overflow-x: auto; }
.plista-tabela table { border-collapse: collapse; width: 100%; max-width: 1000px; }
.plista-tabela th, .plista-tabela td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.plista-tabela th { color: var(--navy); font-weight: 600; }
.plista-tabela tbody tr { cursor: pointer; }
.plista-tabela tbody tr:hover { background: var(--fundo); }
.plista-tabela .vazio { color: var(--suave); text-align: center; padding: 28px; cursor: default; }

.pform { display: flex; gap: 0; align-items: flex-start; max-width: 1100px; }
.ptabs { width: 150px; flex: none; border: 1px solid var(--borda); border-right: 0; border-radius: 6px 0 0 6px; overflow: hidden; }
.ptab { display: block; width: 100%; text-align: left; padding: 10px 14px; background: var(--fundo); border: 0; border-bottom: 1px solid var(--borda); color: var(--suave); cursor: pointer; border-left: 3px solid transparent; }
.ptab[hidden] { display: none; }
.ptab.on { background: #fff; color: var(--navy); font-weight: 600; border-left-color: var(--amarelo); }
.ppainel { flex: 1; min-width: 0; border: 1px solid var(--borda); border-radius: 0 6px 6px 6px; padding: 16px 20px 20px; }
.ppainel [hidden] { display: none; }
.pform fieldset { border: 1px solid var(--borda); border-radius: 6px; margin: 14px 0; padding: 8px 16px 14px; }
.pform legend { padding: 0 8px; color: var(--navy); font-weight: 600; }
.frow { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 12px; align-items: center; margin: 9px 0; max-width: 780px; }
.frow > label { text-align: right; color: #4a4e6a; font-size: 13px; }
.frow > label b { color: var(--sol); margin-left: 1px; }
.frow input:not([type=checkbox]):not([type=radio]), .frow select { width: 100%; padding: 9px; border: 1px solid #c9ccdf; border-radius: 6px; font: inherit; background: #fff; }
.frow input:focus, .frow select:focus { outline: 2px solid var(--amarelo); border-color: var(--navy); }
.frow input:disabled, .frow input:read-only:not([type=checkbox]) { background: #f1f2f8; color: #666; }
.frow .chk, .atribs label, .radios label { display: flex; align-items: center; gap: 7px; cursor: pointer; text-align: left; }
.atribs { display: flex; gap: 28px; flex-wrap: wrap; padding: 4px 4px 2px; }
.radios { display: flex; gap: 18px; flex-wrap: wrap; padding: 6px 0; }
.pform input[type=checkbox], .pform input[type=radio] { width: 17px; height: 17px; accent-color: var(--navy); }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--navy); }
.aviso { font-size: 13px; color: #b45309; }
.aviso.ok { color: var(--suave); }
.pacoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--borda); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 11px 20px; border-radius: 8px; border-left: 5px solid var(--amarelo); z-index: 60; box-shadow: 0 4px 16px #0a115055; }

@media (max-width: 820px) {
  .pform { flex-direction: column; }
  .ptabs { width: 100%; display: flex; border-right: 1px solid var(--borda); border-bottom: 0; border-radius: 6px 6px 0 0; }
  .ptab { width: auto; flex: 1; text-align: center; border-bottom: 3px solid transparent; border-left: 0; }
  .ptab.on { border-bottom-color: var(--amarelo); border-left: 0; }
  .ppainel { width: 100%; border-radius: 0 0 6px 6px; padding: 10px 12px 16px; }
  .frow { grid-template-columns: 1fr; }
  .frow > label { text-align: left; }
  .frow > label:empty { display: none; }
  .pform fieldset { padding: 4px 10px 10px; }
}

/* ---------- importação ---------- */
.modal.largo { width: min(980px, 100%); }
.importar .imap { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 14px; }
.importar .chk { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.importar .chk input { width: 17px; height: 17px; margin: 0; display: inline-block; }
.ipreview { overflow-x: auto; border: 1px solid var(--borda); border-radius: 6px; margin: 8px 0; }
.ipreview table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.ipreview th, .ipreview td { padding: 6px 8px; border-bottom: 1px solid #eee; text-align: left; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.ipreview th { background: var(--fundo); color: var(--navy); }
.iprog { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.iprog[hidden] { display: none; }
.iprog-barra { flex: 1; height: 10px; background: var(--fundo); border-radius: 6px; overflow: hidden; }
.iprog-barra div { height: 100%; width: 0; background: var(--amarelo); transition: width .2s; }
.ires { line-height: 1.9; padding-left: 20px; }
.tag { background: #fff3c4; color: #8a6d00; border-radius: 10px; padding: 1px 8px; font-size: 11.5px; margin-left: 4px; }
.iaviso { background: #fff8db; border-left: 4px solid var(--amarelo); padding: 10px 12px; border-radius: 4px; margin: 10px 0; color: #5c4a00; line-height: 1.5; }

/* importação: botões sempre visíveis, mesmo com a janela rolando */
.importar .acoes { position: sticky; bottom: -20px; background: #fff; margin: 12px -20px -20px; padding: 12px 20px; border-top: 1px solid var(--borda); z-index: 1; }
.importar .imap { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 14px; }
.importar .imap label { margin: 6px 0; }
.importar .imap select { padding: 6px; }
.ipreview { max-height: 150px; overflow: auto; }

/* ---------- lista de pessoas: filtros, letras e paginação ---------- */
.plista-filtros { display: flex; gap: 12px 16px; flex-wrap: wrap; align-items: end; margin-bottom: 10px; }
.plista-filtros label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--suave); }
.plista-filtros select { padding: 7px 8px; border: 1px solid #c9ccdf; border-radius: 6px; font: inherit; font-size: 13px; color: var(--texto); background: #fff; }
.letras { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.letras button { min-width: 30px; padding: 5px 7px; border: 1px solid var(--borda); background: #fff; color: var(--navy); border-radius: 5px; cursor: pointer; font-size: 12.5px; }
.letras button:hover { background: var(--fundo); }
.letras button.on { background: var(--navy); color: var(--amarelo); border-color: var(--navy); font-weight: 600; }
.plista-tabela th.ord { cursor: pointer; user-select: none; }
.plista-tabela th.ord:hover { background: var(--fundo); }
.plista-tabela th.ord::after { content: attr(data-seta); margin-left: 5px; font-size: 10px; color: var(--sol); }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0 20px; max-width: 1000px; }
.pager-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pager-nav button { min-width: 34px; height: 32px; border: 1px solid var(--navy); background: #fff; color: var(--navy); border-radius: 6px; cursor: pointer; font-size: 16px; }
.pager-nav button:hover:not(:disabled) { background: var(--navy); color: #fff; }
.pager-nav button:disabled { opacity: .35; cursor: default; }
.pager-nav input { width: 64px; padding: 5px; border: 1px solid #c9ccdf; border-radius: 6px; text-align: center; font: inherit; }

/* ---------- walk-in ---------- */
.walkin { overflow-y: auto; padding: 16px; }
.wk { max-width: 1000px; }
.wk-card { border: 1px solid var(--borda); border-radius: 8px; padding: 14px 18px; margin-bottom: 14px; background: #fff; }
.wk-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.wk-cab h3 { margin: 0; color: var(--navy); font-size: 16px; }
.wk-moeda { color: var(--suave); font-size: 13px; }
.wk-linha { display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; padding: 8px 0; }
.wk-linha + .wk-linha { border-top: 1px solid #f0f0f5; }
.wk-rot { width: 90px; color: #4a4e6a; font-size: 13px; text-align: right; flex: none; }
.wk-rot b, .wk-campo b { color: var(--sol); }
.wk-campo { display: flex; align-items: center; gap: 10px; color: #4a4e6a; font-size: 13px; }
.wk-par { display: inline-flex; gap: 8px; }
.wk-par input { padding: 8px; border: 1px solid #c9ccdf; border-radius: 6px; font: inherit; background: #fff; }
.wk-par input[type=time] { width: 100px; }
.wk-par input:disabled { background: #f1f2f8; color: #666; }
.wk-disp { margin-left: auto; }
.wk-uh { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--navy); }
.wk-uh small { color: var(--suave); font-size: 12.5px; }
.wk-titular { flex: 1; min-width: 260px; max-width: 640px; }
.wk-escolhido { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border: 1px solid var(--borda); border-radius: 6px; padding: 8px 12px; background: var(--fundo); }
.wk-escolhido small { display: block; color: var(--suave); }

.busca { position: relative; }
.busca input { width: 100%; padding: 9px 10px; border: 1px solid #c9ccdf; border-radius: 6px; font: inherit; }
.busca input:focus { outline: 2px solid var(--amarelo); border-color: var(--navy); }
.busca-lista { position: absolute; left: 0; right: 0; top: 100%; z-index: 35; background: #fff; border: 1px solid var(--borda); border-radius: 6px; margin-top: 3px; box-shadow: 0 6px 20px #0a115030; max-height: 320px; overflow-y: auto; }
.busca-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f0f0f5; }
.busca-item:hover { background: var(--fundo); }
.busca-item small { display: block; color: var(--suave); }
.busca-vazio { padding: 12px; color: var(--suave); }

.wk-tab { width: 100%; border-collapse: collapse; }
.wk-tab td, .wk-tab th { padding: 7px 8px; border-bottom: 1px solid #f0f0f5; text-align: left; vertical-align: middle; }
.wk-tab th { color: var(--navy); font-weight: 600; }
.wk-tab .dir { text-align: right; }
.wk-pax { margin-top: 10px; color: #4a4e6a; }
.vazio { color: var(--suave); padding: 16px 4px; }
.tag-azul { background: #dfe6ff; color: var(--navy); }
.wk-dia { max-width: 460px; }
.wk-val { display: inline-flex; align-items: center; gap: 8px; }
.wk-val input { width: 150px; padding: 8px 10px; border: 1px solid #c9ccdf; border-radius: 6px; font: inherit; text-align: right; }
.wk-val input:focus { outline: 2px solid var(--amarelo); border-color: var(--navy); }
.wk-rep { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--manut); color: #fff; cursor: pointer; font-size: 15px; }
.wk-rep:hover { background: var(--navy); }
.wk-total { max-width: 460px; display: flex; justify-content: space-between; padding: 12px 8px 4px; color: #4a4e6a; font-size: 15px; }
.wk-total b { color: var(--navy); }
.wk-acoes { display: flex; justify-content: flex-end; gap: 10px; padding: 4px 0 24px; }

.disp-grupo { border-bottom: 1px solid var(--borda); padding: 10px 0; }
.disp-tipo { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #4a4e6a; margin-bottom: 8px; }
.disp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-width: 84px; padding: 6px 10px; border: 2px solid transparent; border-radius: 4px; color: #fff; font-weight: 700; cursor: pointer; }
.chip.livre { background: var(--livre); }
.chip.limpeza { background: var(--limpeza); }
.chip:hover { filter: brightness(.92); }
.chip.atual { border-color: var(--navy); }
.disp-legenda { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--suave); font-size: 12.5px; }

@media (max-width: 820px) {
  .walkin { padding: 10px; }
  .wk-rot { width: auto; text-align: left; }
  .wk-disp { margin-left: 0; width: 100%; }
  .wk-campo { flex-direction: column; align-items: flex-start; gap: 4px; }
  .wk-titular { min-width: 0; width: 100%; }
}
/* dentro de janelas (modal) a lista de resultados entra no fluxo da página, senão a rolagem do modal a corta */
.modal .busca-lista { position: static; box-shadow: none; max-height: 260px; }

/* ---------- extrato da conta e fechamento ---------- */
.ex, .fc { max-width: 1000px; }
.ex-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.ex-dados { margin: 0; display: grid; gap: 4px; }
.ex-dados > div { display: flex; gap: 8px; }
.ex-dados dt { color: var(--suave); min-width: 76px; text-align: right; }
.ex-dados dd { margin: 0; font-weight: 500; color: var(--navy); }
.btn-icone { width: 38px; height: 34px; border: 1.5px solid var(--navy); background: #fff; color: var(--navy); border-radius: 6px; cursor: pointer; font-size: 17px; flex: none; }
.btn-icone:hover { background: var(--navy); color: #fff; }
.ex-rolagem { overflow-x: auto; }
.ex-tab .dir, .wk-tab .dir { text-align: right; }
.ex-tab tr.estornado td { color: #999; }
.ex-tab tr.estornado td:nth-child(4) { text-decoration: line-through; }
.ex-soma { display: flex; justify-content: flex-end; gap: 24px; padding: 10px 8px 2px; color: #4a4e6a; }
.ex-soma b { min-width: 100px; text-align: right; color: var(--navy); }
.ex-nota { margin: 6px 8px 0; font-size: 12.5px; }
.suave { color: var(--suave); }
.ex-total { display: flex; align-items: baseline; justify-content: flex-end; gap: 18px; padding: 14px 18px; border: 1px solid var(--borda); border-radius: 8px; margin-bottom: 14px; background: var(--fundo); font-size: 16px; }
.ex-total b { font-size: 24px; }
.ex-total small { font-size: 13px; }
.ex-total.devendo b, .ex-total.devendo small { color: var(--ocupada); }
.ex-total.credito b, .ex-total.credito small { color: #1a7f37; }
.ex-total.quite b, .ex-total.quite small { color: var(--navy); }
.obr { color: var(--sol); }

.fc-uh { color: var(--navy); font-weight: 600; font-size: 17px; margin: 0 0 12px; }
.fc-cab { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; line-height: 1.7; margin-bottom: 8px; }
.verde { color: #1a7f37; margin-right: 6px; }
.fc-datas { white-space: nowrap; }
.fc-pessoa { display: flex; align-items: center; gap: 14px; margin: 8px 0 14px; max-width: 640px; }
.fc-pessoa select { flex: 1; padding: 8px; border: 1px solid #c9ccdf; border-radius: 6px; font: inherit; }
.fc-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.forma-btn { width: 100%; padding: 9px 10px; border: 1.5px solid var(--navy); color: var(--navy); background: #fff; border-radius: 6px; cursor: pointer; text-align: left; font: inherit; }
.forma-btn:hover:not(:disabled) { background: var(--navy); color: #fff; }
.forma-btn:disabled { opacity: .45; cursor: default; }
.fc-valor { width: 130px; padding: 8px; border: 1px solid #c9ccdf; border-radius: 6px; text-align: right; font: inherit; }
.fc-resumo .sub td { background: var(--fundo); }
.lixo { border: 1px solid var(--borda); background: #fff; border-radius: 4px; cursor: pointer; margin-left: 6px; }
.fc-obs { display: block; margin: 14px 0 4px; color: #4a4e6a; font-size: 13px; }
.fc-obs textarea { display: block; width: 100%; min-height: 70px; margin-top: 4px; padding: 8px; border: 1px solid #c9ccdf; border-radius: 6px; font: inherit; }
.wk-motivo { flex: 1; min-width: 260px; max-width: 640px; min-height: 64px; padding: 8px; border: 1px solid #c9ccdf; border-radius: 6px; font: inherit; }
.wk-trava { margin-left: 4px; font-size: 14px; }
.wk-card .btn[disabled] { opacity: .5; cursor: default; }

@media (max-width: 820px) {
  .fc-colunas { grid-template-columns: 1fr; }
  .ex-dados > div { flex-direction: column; gap: 0; }
  .ex-dados dt { text-align: left; }
  .wk-acoes { flex-wrap: wrap; }
}
.wk-linha[hidden] { display: none; }

.plista-tabela .dir { text-align: right; }
.pform fieldset .chk { display: flex; align-items: center; gap: 8px; margin: 10px 0; cursor: pointer; }
#i-status { padding: 9px; border: 1px solid #c9ccdf; border-radius: 6px; font: inherit; background: #fff; }

/* lançamento de comandas */
.cmd-conta { border: 1px solid var(--borda); border-radius: 6px; padding: 10px 14px; margin-bottom: 12px; color: #1a7f37; font-weight: 600; }
.cmd-conta b { color: var(--navy); margin-right: 8px; }
.cmd-topo { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; background: var(--fundo); padding: 12px 14px; border-radius: 6px; }
.cmd-topo > b { color: var(--navy); align-self: center; }
.cmd-topo label { display: grid; gap: 4px; margin: 0; font-size: 13px; }
.cmd-topo select, .cmd-topo input { padding: 8px; border: 1px solid #c9ccdf; border-radius: 6px; font: inherit; min-width: 90px; }
.cmd-topo select { min-width: 220px; }
.cmd-rolagem { overflow-x: auto; margin-top: 10px; }
.cmd-tab { width: 100%; border-collapse: collapse; }
.cmd-tab th { text-align: left; font-size: 13px; color: var(--navy); padding: 6px 4px; }
.cmd-tab td { padding: 5px 4px; }
.cmd-tab .dir { text-align: right; white-space: nowrap; }
.cmd-tab .cm-item { width: 100%; min-width: 220px; padding: 8px; border: 1px solid #c9ccdf; border-radius: 6px; font: inherit; }
.cmd-tab .cm-item:disabled { background: #f1f2f8; }
.cm-qtd { display: inline-flex; align-items: center; border: 1px solid #c9ccdf; border-radius: 6px; overflow: hidden; }
.cm-qtd button { border: 0; background: #f1f2f8; width: 30px; height: 34px; cursor: pointer; font-size: 16px; color: var(--navy); }
.cm-qtd input { width: 52px; border: 0; text-align: center; font: inherit; padding: 6px 2px; -moz-appearance: textfield; }
.btn-lixo { border: 0; background: none; cursor: pointer; font-size: 16px; }
.cmd-novo { text-align: right; margin: 8px 0; }
.cmd-total { display: flex; justify-content: space-around; gap: 16px; flex-wrap: wrap; background: var(--fundo); padding: 12px; border-radius: 6px; }
.cmd-total b { color: #1a7f37; font-size: 18px; margin-left: 4px; }

/* seta laranja: UH ocupada com check-out hoje (ou atrasado) */
.uh { position: relative; }
.uh .seta { position: absolute; top: 24px; left: calc(50% + 21px); width: 18px; height: 18px; }
.uh .seta svg { width: 18px; height: 18px; }

/* extrato: subtotais por PDV e linhas de estorno */
.ex-pdvs { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 8px 8px 0; color: #4a4e6a; font-size: 13px; }
.ex-pdvs div { display: flex; gap: 24px; }
.ex-pdvs b { min-width: 100px; text-align: right; color: var(--navy); font-weight: 600; }
.ex-tab tr.item-estorno td { color: #b3261e; }

/* lista de itens da comanda (rolagem + filtro) */
.cm-combo { position: relative; }
.cm-combo .cm-item { padding-right: 32px; }
.cm-seta { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 30px; border: 0; border-left: 1px solid #c9ccdf; background: #f1f2f8; border-radius: 0 5px 5px 0; cursor: pointer; color: var(--navy); font-size: 15px; }
.cm-painel { position: fixed; z-index: 1000; background: #fff; border: 1px solid #c9ccdf; border-radius: 6px; box-shadow: 0 6px 20px rgba(10, 17, 80, .2); overflow-y: scroll; }
.cm-painel[hidden] { display: none; }
.cm-op { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid #f1f2f8; display: flex; justify-content: space-between; gap: 10px; }
.cm-op small { color: var(--suave); white-space: nowrap; }
.cm-op:hover, .cm-op.on { background: #fff6bf; }
.cm-vazio { padding: 12px; color: var(--suave); }
.cm-painel::-webkit-scrollbar { width: 12px; }
.cm-painel::-webkit-scrollbar-thumb { background: #b9bdd6; border-radius: 6px; border: 2px solid #fff; }

/* caixa */
.menu-item.alerta::after { content: '●'; color: var(--amarelo); margin-left: 8px; font-size: 12px; }
.cx-aviso { background: #fff6bf; border: 1px solid #e6cf3a; border-radius: 6px; padding: 10px 14px; margin-bottom: 12px; color: #5c4b00; }
.cx-aviso.cx-fechado { background: #eef0fa; border-color: #c9ccdf; color: var(--navy); }
.cx-cab { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 18px; color: #3a6fb0; margin: 4px 0 14px; }
.cx-cab b { font-weight: 500; }
.cx-sp { margin-left: 18px; }
.cx-tab { width: 100%; border-collapse: collapse; border: 1px solid var(--borda); margin-bottom: 14px; }
.cx-tab th, .cx-tab td { padding: 7px 10px; border-bottom: 1px solid #eceef7; }
.cx-tab thead tr:nth-child(2) th { background: #d9eef6; text-align: left; }
.cx-tab thead .dir { text-align: right; }
.cx-tab .cx-grupos th { text-align: center; border-top: 3px solid #bbb; }
.cx-tab .g-ent { border-top-color: #4caf50; }
.cx-tab .g-sai { border-top-color: #e5484d; }
.cx-tab .g-sal { border-top-color: #3b82c4; }
.cx-tab td.forma { text-align: right; color: var(--suave); }
.cx-tab td.dir { text-align: right; }
.cx-tab tr.tot td { font-weight: 700; background: #fafbff; }
.cx-tab tr.geral td.cx-real { color: #2f6db5; }
.cx-tit { color: var(--navy); margin: 18px 0 4px; }
.cx-lista tr[data-id] { cursor: pointer; }
.cx-lista tr[data-id]:hover { background: #fff6bf; }
.cx-botoes { margin-top: 16px; flex-wrap: wrap; }
.cx-tab thead tr:nth-child(2) th.dir { text-align: right; }
.cm-valin { width: 96px; padding: 7px; border: 2px solid var(--amarelo); border-radius: 6px; font: inherit; text-align: right; }

/* nome da UH comprido: quebra em linhas centralizadas, sem encostar na UH do lado */
.uh { min-width: 0; }
.uh .num { display: block; text-align: center; line-height: 1.25; padding: 0 3px; overflow-wrap: anywhere; word-break: break-word; }
.uh .num .dot { display: inline-block; vertical-align: middle; margin-right: 5px; }
.uh .num.longo { font-size: 11px; }