:root{
  --accent:#0f5c63; --accent-contraste:#fff;
  --fundo:#f6f4ef; --painel:#fff; --texto:#1d2a2c; --suave:#5d6b6e; --borda:#d9d6cc;
  --pago:#2f8f5b; --parcial:#d99a1c; --pousada:#3a7bd5; --gratis:#7b5cc9; --pendente:#8a9a9e; --conflito:#c0392b;
  --hoje:#fff4cf; --fds:#f0ede5; --ocupado:#e3dfd3;
  --fonte-titulo:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --fonte:"Figtree","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --accent:#4fb3bd; --accent-contraste:#06272b;
    --fundo:#14191a; --painel:#1c2324; --texto:#e8eeee; --suave:#9fb0b2; --borda:#33403f;
    --hoje:#4a4020; --fds:#222b2c; --ocupado:#2b3333;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--fundo);color:var(--texto);font-family:var(--fonte);font-size:15px}
header{background:var(--accent);color:var(--accent-contraste);padding:8px 14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
h1{font-family:var(--fonte-titulo);font-size:1.25rem;margin:0}
nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center;justify-content:flex-end;flex:1 1 auto}
header nav button{font-size:.8rem;padding:5px 8px;white-space:nowrap}
header .marca h1{white-space:nowrap}
button,.btn,select,input,textarea{font:inherit}
button,.btn{cursor:pointer;border:1px solid var(--borda);background:var(--painel);color:var(--texto);padding:7px 12px;border-radius:8px;text-decoration:none;display:inline-block}
button:hover,.btn:hover{border-color:var(--accent)}
button.primario{background:var(--accent);color:var(--accent-contraste);border-color:var(--accent);font-weight:600}
header button{background:transparent;color:var(--accent-contraste);border-color:rgba(255,255,255,.45)}
header button.ativo{background:var(--accent-contraste);color:var(--accent)}
.quem{font-size:.78rem;opacity:.9;align-self:center;margin:0 2px;white-space:nowrap}
header button.novo{background:var(--accent-contraste);color:var(--accent);font-weight:600}
main{padding:12px 16px}
.barra{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.barra .esp{flex:1}
input,select,textarea{border:1px solid var(--borda);background:var(--painel);color:var(--texto);border-radius:8px;padding:7px 9px;max-width:100%}
.aba{display:none}.aba.ativa{display:block}
.legenda{display:flex;flex-wrap:wrap;gap:12px;font-size:.85rem;color:var(--suave);margin:8px 0}
.legenda i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:-1px}
/* Mapa */
.mapa-wrap{overflow-x:auto;border:1px solid var(--borda);border-radius:10px;background:var(--painel)}
.mapa{--w:40px;min-width:max-content}
.linha{display:flex;border-bottom:1px solid var(--borda);height:34px}
.linha.cab{height:46px;background:var(--fundo)}
.lab{position:sticky;left:0;z-index:3;flex:0 0 84px;background:var(--painel);border-right:1px solid var(--borda);padding:0 8px;display:flex;align-items:center;font-weight:600;font-size:.88rem}
.linha.cab .lab{background:var(--fundo)}
.celulas{position:relative;display:flex}
.d{flex:0 0 var(--w);width:var(--w);border-right:1px solid var(--borda);text-align:center;font-size:.78rem;display:flex;flex-direction:column;justify-content:center;color:var(--suave);cursor:pointer}
.linha.cab .d{cursor:default}
.d b{color:var(--texto);font-size:.9rem}
.d.fds{background:var(--fds)}
.d.hoje{background:var(--hoje)}
.linha.ocup .d{background:repeating-linear-gradient(45deg,var(--ocupado),var(--ocupado) 6px,transparent 6px,transparent 12px);cursor:not-allowed}
.rotulo-ocup{position:absolute;left:8px;top:0;height:100%;display:flex;align-items:center;font-size:.75rem;font-weight:700;letter-spacing:.08em;color:var(--suave);pointer-events:none}
.barra-res{position:absolute;top:4px;bottom:4px;border-radius:7px;color:#fff;font-size:.78rem;font-weight:600;padding:0 6px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;z-index:2;border:0;text-align:left}
.barra-res.pago{background:var(--pago)}.barra-res.parcial{background:var(--parcial)}.barra-res.pousada{background:var(--pousada)}
.barra-res.gratis{background:var(--gratis)}.barra-res.pendente{background:var(--pendente)}.barra-res.conflito{background:var(--conflito)}
.linha.rod{height:30px;background:var(--fundo)}
.linha.rod .lab{background:var(--fundo);font-weight:500;font-size:.78rem;color:var(--suave)}
.linha.rod .d{cursor:default;color:var(--texto);font-weight:600;font-size:.85rem}
/* Tabelas */
table{width:100%;border-collapse:collapse;background:var(--painel);border:1px solid var(--borda);border-radius:10px;overflow:hidden}
th,td{padding:8px 10px;border-bottom:1px solid var(--borda);text-align:left;vertical-align:top;font-size:.9rem}
th{background:var(--fundo);font-family:var(--fonte-titulo)}
.tabela-wrap{overflow-x:auto}
.pilula{display:inline-block;padding:1px 8px;border-radius:99px;color:#fff;font-size:.75rem;font-weight:600}
.pilula.pago{background:var(--pago)}.pilula.parcial{background:var(--parcial)}.pilula.pousada{background:var(--pousada)}.pilula.gratis{background:var(--gratis)}.pilula.pendente{background:var(--pendente)}
.item-busca{background:var(--painel);border:1px solid var(--borda);border-radius:10px;padding:10px 12px;margin-bottom:8px;cursor:pointer;display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between}
.item-busca:hover{border-color:var(--accent)}
.suave{color:var(--suave)}
.faixa-aviso{background:var(--conflito);color:#fff;padding:8px 12px;border-radius:8px;margin-bottom:10px;font-weight:600}
.faixa-aviso[hidden]{display:none}
/* Formulário */
dialog{border:1px solid var(--borda);border-radius:14px;background:var(--painel);color:var(--texto);padding:18px;width:min(460px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto}
dialog::backdrop{background:rgba(0,0,0,.5)}
dialog h2{font-family:var(--fonte-titulo);margin:0 0 10px;font-size:1.15rem}
.campo{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;font-size:.85rem;color:var(--suave)}
.campo input,.campo select,.campo textarea{width:100%;color:var(--texto)}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.aviso{min-height:1.3em;margin:4px 0 10px;font-size:.88rem;font-weight:600}
.aviso.erro{color:var(--conflito)}.aviso.ok{color:var(--pago)}
.acoes{display:flex;gap:8px;flex-wrap:wrap}
.acoes .esp{flex:1}
button.perigo{color:var(--conflito);border-color:var(--conflito)}
button.perigo.confirmar{background:var(--conflito);color:#fff}
button:disabled{opacity:.5;cursor:not-allowed}
#toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--texto);color:var(--fundo);padding:9px 16px;border-radius:10px;display:none;z-index:50;max-width:90vw}

/* Importação */
dialog.larga{width:min(1180px,calc(100vw - 16px))}
.conts{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.cont{border:1px solid var(--borda);border-radius:10px;padding:5px 12px;font-size:.88rem;background:var(--fundo)}
.cont b{font-size:1.1rem;margin-left:4px}
.sem{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;background:var(--pendente)}
.sem.ok{background:var(--pago)}.sem.aviso{background:var(--parcial)}.sem.erro{background:var(--conflito)}.sem.ign{background:var(--pendente)}
#impTab td,#impTab th{font-size:.82rem;padding:5px 7px}
#impTab tr.imp-ign{opacity:.6}
#impTab tr.imp-erro td:first-child{box-shadow:inset 4px 0 var(--conflito)}
#impTab input[type=date],#impTab select{padding:3px 5px;font-size:.82rem;max-width:140px}
.sub{font-family:var(--fonte-titulo);font-size:1rem;margin:14px 0 6px}
.espera-item{border:1px solid var(--borda);border-radius:8px;padding:5px 9px;margin-bottom:4px;font-size:.82rem}
button.perigo.confirmar{background:var(--conflito);color:#fff}
/* Camareiras */
.rotulo-inline{display:inline-flex;gap:6px;align-items:center;font-size:.9rem}
.cam-cab{font-family:var(--fonte-titulo);font-size:1.2rem;margin:8px 0 12px;font-weight:700}
.cam-dia{margin-bottom:18px}
.cam-dia h2{font-family:var(--fonte-titulo);font-size:1.15rem;margin:0 0 8px;padding-bottom:4px;border-bottom:2px solid var(--texto);text-transform:capitalize}
.cam-dia h2 small{font-family:var(--fonte);font-weight:500;font-size:.85rem;color:var(--suave);text-transform:none;margin-left:8px}
.cam-un{display:flex;gap:12px;align-items:flex-start;background:var(--painel);border:1px solid var(--borda);border-radius:10px;padding:10px 12px;margin-bottom:8px;break-inside:avoid}
.cam-un.duplo{border:4px solid var(--texto)}
.cam-apto{font-family:var(--fonte-titulo);font-size:1.5rem;font-weight:700;min-width:84px}
.cam-mov{flex:1}
.cam-alerta{display:inline-block;background:var(--texto);color:var(--fundo);font-weight:800;letter-spacing:.04em;padding:2px 10px;border-radius:4px;margin-bottom:6px}
.mov{margin:3px 0;font-size:1rem}
.tag{display:inline-block;font-weight:800;font-size:.85rem;padding:1px 9px;border-radius:4px;margin-right:6px;border:2px solid var(--texto)}
.tag.saida{background:var(--texto);color:var(--fundo)}
.tag.entrada{background:transparent;color:var(--texto);border-width:3px}
.tag.estadia{border-style:dashed;font-weight:600}
input.feito{appearance:none;-webkit-appearance:none;width:30px;height:30px;border:3px solid var(--texto);border-radius:5px;background:var(--painel);cursor:pointer;flex:0 0 30px;margin:0;position:relative;padding:0}
input.feito:checked::after{content:"\2713";position:absolute;inset:0;text-align:center;font-size:24px;line-height:24px;font-weight:800;color:var(--texto)}
.cam-rotulo-feito{font-size:.7rem;color:var(--suave);display:block;text-align:center}
@media (max-width:480px){
  main{padding:10px 12px}
  header{padding:8px 12px}
  .lab{flex-basis:68px;font-size:.8rem}
}

.so-impressao{display:none}   /* título que só aparece ao imprimir a folha */
/* Impressão compacta em A4. A orientação vem da escolha "Papel" na tela (classe orient-retrato no body;
   sem ela, paisagem). A densidade (den-1/2/3) é escolhida pelo app.js conforme o número de linhas,
   para caber o máximo possível em uma página. */
@page{size:A4 landscape;margin:8mm}
@page retrato{size:A4 portrait;margin:8mm}
@media print{
  body.orient-retrato{page:retrato}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html,body{background:#fff!important;color:#000!important;font-size:10pt}
  header,.nao-imprimir,#toast,dialog,.legenda{display:none!important}
  .aba,.aba.ativa{display:none!important}
  body:not(.imp-folha) #aba-camareiras{display:block!important}
  body.imp-folha #aba-folha{display:block!important}
  body.imp-folha .so-impressao{display:block;font-size:14pt;font-weight:700;margin:0 0 5pt}
  body.imp-folha .tabela-wrap{overflow:visible;border:0}
  body.imp-folha #tabFolha{width:100%;border-collapse:collapse;font-size:8.5pt;color:#000}
  body.imp-folha #tabFolha th{background:#ddd!important;color:#000!important;border:1pt solid #000;padding:2pt 4pt;text-align:left}
  body.imp-folha #tabFolha td{border:1pt solid #000;padding:2pt 4pt;vertical-align:top;color:#000}
  body.imp-folha #tabFolha tr{break-inside:avoid}
  body.imp-folha .suave{color:#000!important}
  main{padding:0}
  .cam-cab{font-size:14pt;color:#000;border-bottom:2px solid #000;padding-bottom:2px;margin:0 0 4pt}
  .cam-dia{margin-bottom:6pt}
  .cam-dia h2{font-size:12pt;color:#000;border-bottom:1.5pt solid #000;margin:0 0 3pt;padding-bottom:1pt;break-after:avoid}
  .cam-dia h2 small{color:#000;font-size:9pt}
  /* Sem "uma página por dia": a lista inteira corre em colunas, um dia depois do outro.
     Com "uma página por dia": cada dia tem as suas colunas. */
  #camLista{column-gap:5mm}
  #camLista.den-1:not(.cam-pagina){column-count:2}
  #camLista.den-2:not(.cam-pagina){column-count:3}
  #camLista.den-3:not(.cam-pagina){column-count:4}
  .cam-pagina .cam-un-lista{column-gap:5mm}
  .cam-pagina.den-1 .cam-un-lista{column-count:2}
  .cam-pagina.den-2 .cam-un-lista{column-count:3}
  .cam-pagina.den-3 .cam-un-lista{column-count:4}
  .cam-un{background:#fff;border:1pt solid #000;border-radius:0;color:#000;padding:2pt 4pt;gap:5pt;margin-bottom:2pt;break-inside:avoid;align-items:center}
  .cam-un.duplo{border:2.5pt solid #000}
  .cam-apto{font-size:12pt;min-width:13mm}
  .mov{font-size:10pt;color:#000;margin:1pt 0;line-height:1.2}
  .den-2 .mov{font-size:8.5pt}
  .den-3 .mov{font-size:7pt}
  .den-2 .cam-apto{font-size:10.5pt;min-width:11mm}
  .den-3 .cam-apto{font-size:9pt;min-width:9mm}
  .tag{border-color:#000;border-width:1pt;font-size:.8em;padding:0 3pt;margin-right:3pt}
  .tag.entrada{border-width:1.5pt}
  .tag.saida{background:#000!important;color:#fff!important}
  .tag.entrada{background:#fff!important;color:#000!important}
  .cam-alerta{background:#000!important;color:#fff!important;font-size:.8em;padding:0 4pt;margin-bottom:1pt}
  input.feito{border:1.5pt solid #000;background:#fff;width:5mm;height:5mm;flex-basis:5mm}
  .cam-rotulo-feito{display:none}
  .suave{color:#000!important}
  .cam-pagina .cam-dia + .cam-dia{break-before:page;page-break-before:always}

  /* Retrato: página mais estreita (190 mm úteis), então menos colunas e letra um pouco menor. */
  body.orient-retrato #camLista.den-1:not(.cam-pagina){column-count:2}
  body.orient-retrato #camLista.den-2:not(.cam-pagina){column-count:3}
  body.orient-retrato #camLista.den-3:not(.cam-pagina){column-count:3}
  body.orient-retrato .cam-pagina.den-1 .cam-un-lista{column-count:2}
  body.orient-retrato .cam-pagina.den-2 .cam-un-lista{column-count:3}
  body.orient-retrato .cam-pagina.den-3 .cam-un-lista{column-count:3}
  body.orient-retrato .den-1 .mov{font-size:9.5pt}
  body.orient-retrato .den-2 .mov{font-size:7.5pt}
  body.orient-retrato .den-3 .mov{font-size:6.5pt}
  body.orient-retrato .den-2 .cam-apto{font-size:9.5pt;min-width:10mm}
  body.orient-retrato .den-3 .cam-apto{font-size:8.5pt;min-width:9mm}
  body.orient-retrato.imp-folha #tabFolha{font-size:8pt}
}

/* Logo do clube ao lado do nome. O selo branco garante contraste nos temas claro e escuro. */
.marca{display:flex;align-items:center;gap:10px;min-width:0}
.logo{display:block;height:40px;width:auto;background:#fff;border-radius:10px;padding:3px 5px;flex:0 0 auto}
.logo-login{height:58px}
@media (max-width:480px){ .logo{height:32px} .logo-login{height:50px} }

/* Tela de login */
.login-caixa{max-width:380px;margin:12vh auto 0;background:var(--painel);border:1px solid var(--borda);border-radius:14px;padding:22px}
.login-caixa h1{color:var(--accent);margin-bottom:4px}
.login-caixa p{margin:0 0 14px}

/* Antes eram estilos inline (a política de segurança do navegador não permite) */
.oculto{display:none}
.campo-busca{flex:1;min-width:200px}
.dica-imp{margin:0 0 8px;font-size:.85rem}
.acoes-imp{margin-top:12px}
.espaco-cima{margin-top:6px}
.legenda i.cor-pago{background:var(--pago)}.legenda i.cor-parcial{background:var(--parcial)}.legenda i.cor-pousada{background:var(--pousada)}
.legenda i.cor-gratis{background:var(--gratis)}.legenda i.cor-pendente{background:var(--pendente)}.legenda i.cor-conflito{background:var(--conflito)}

.dica-horario{margin:0 0 10px;font-size:.82rem}
.abas-form{display:flex;gap:6px;margin-bottom:12px}
.abas-form button.ativo{background:var(--accent);color:var(--accent-contraste);border-color:var(--accent)}
.bloco-cancelar{border:1px solid var(--conflito);border-radius:10px;padding:10px;margin-bottom:10px}
.oculto-sempre{display:none}
/* Aba Usuários */
.sit{display:inline-block;font-weight:700;font-size:.8rem;padding:1px 9px;border-radius:999px;border:1.5px solid currentColor}
.sit-ativo{color:var(--pago)}.sit-inativo{color:var(--conflito)}
tr.inativo td{opacity:.65}
.sub-perfis{font-family:var(--fonte-titulo);font-size:1rem;margin:18px 0 6px}
.lista-perfis{margin:0;padding-left:20px;line-height:1.5;font-size:.9rem}
#tabUsuarios td.acoes{white-space:nowrap}
#tabHistForm td,#tabHistForm th,#tabHistorico td,#tabHistorico th,#tabCanceladas td,#tabCanceladas th{font-size:.82rem;padding:5px 7px}