/* ==========================================================================
   Monte Casa Branca — app.css (Etapa G · G4b · 13/9/2026) · v=20
   --------------------------------------------------------------------------
   Folha de estilo NOVA da ferramenta de gestão, nascida do assets/ficha.css
   (o sistema aprovado a 4/9) e do protótipo aprovado do #90 (13/9, v5) e do
   #95 (v4). Nasceu em duas páginas (reserva.php e equipa.php); desde o
   fecho do G4 (3/10/2026) é o ÚNICO CSS da app (o estilo.css e o etapa4.css
   foram apagados; o Cockpit junta o cockpit.css e a ficha do hóspede tem o
   ficha.css).

   Duas metades:
     1. o sistema (tokens, tipos, cartões, atalhos, folhas, «…»);
     2. as classes «antigas» que os pedaços partilhados continuam a usar
        (lib/avaliacoes.php, lib/vistas.php: .botao, .barra, .rotulo, dl.ficha,
        table, .par, .opcao, .av-*…) — aqui ganham a cara nova sem se tocar
        no PHP delas.

   Regras que vêm de longe: nunca peso 600+; um só azul (#1B4DB1); terra nos
   avisos, nunca vermelho; fundos claros; alvo de toque ≥ 44px; um valor em €
   nunca parte de linha; nada sai do ecrã (T12).
   ========================================================================== */

:root {
  --azul:        #1B4DB1;
  --azul-esc:    #163F92;
  --azul-lav:    #F1F5FC;
  --tinta:       #0F1B2D;
  --cinza:       #5A6B85;
  --apagado:     #8F9AAD;
  --borda:       #D9DEE7;   /* contorno dos campos e dos cartões */
  --filete:      #E3EAF4;   /* separadores */
  --terra:       #B8623C;
  --terra-caixa: #FAF3EE;
  --terra-letra: #6B4A3A;
  --verde:       #2E7D5B;
  --verde-caixa: #EAF5EE;
  --verde-linha: #CFE6D8;
  --verde-letra: #1F4D33;
  --amarelo-caixa:#FFF8E6;
  --amarelo-linha:#EAD9A6;
  --fundo2:      #F6F8FB;
  --fora:        #ECEEF2;
  /* modo escuro (4/10, preparação): o que era #fff ou cor fixa passa a token, para o escuro.css trocar tudo num sítio */
  --branco:      #fff;                     /* fundo da app, cartões, campos, folhas */
  --vidro:       rgba(255,255,255,.96);    /* topo fixo e barra de baixo (com blur) */
  --azul-cheio:  var(--azul);              /* botões e chips a cheio (texto branco por cima) */
  --direto-caixa:#F4F7FD; --direto-linha:#B9C8EA;   /* faixas e cartões por tipo: direto · plataforma · uso próprio */
  --plat-caixa:  #FBF4EF; --plat-linha:  #E4C6B5;
  --uso-caixa:   #EEF7F1; --uso-linha:   #C4DFCF;
  --choque-caixa:#FDF0EB; --bloq:        #E6E9EF; --terra-linha: #E8CDBF;
  /* #165 (4/10) · os gráficos do kpi.js/kpi_aval.js leem estes (valores exatos dos ficheiros JS de sempre) */
  --grafico-azul: #1B4DB1; --grafico-ocre: #E0A03A; --grafico-cinza: #5B6B82; --grafico-terra: #B5533C; --grafico-verde: #2E7D4F;
  --grafico-amarelo: #B07A20; --grafico-tinta: #0F1B2D; --grafico-antigas: #B9C2D0;
  --lado:        16px;
  --coluna:      474px;
  --raio:        6px;
  --raio-cartao: 8px;
  --topo:        52px;
  --safe:        env(safe-area-inset-bottom, 0px);

  /* nomes antigos que os pedaços partilhados ainda usam */
  --tinta2: var(--cinza);
  --linha:  var(--filete);
  --papel:  var(--fundo2);
  --ok:     var(--verde);
  --ocre:   #B07A20;   /* o ocre dos KPI (ano anterior, aviso ocre) — bloco #61-b */
  --tinta3: var(--apagado);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: clip; }   /* T12 · nada sai do ecrã */

body {
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.45;
}
@media (min-width: 640px) { body { background: var(--fora); } }

a { color: var(--azul); }
b, strong { font-weight: 500; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.2; margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
svg.ic { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5;
         stroke-linecap: round; stroke-linejoin: round; flex: none; }
.app { max-width: var(--coluna); margin: 0 auto; min-height: 100vh; min-height: 100dvh; background: var(--branco); position: relative; }
.app * { min-width: 0; }

/* ---------------------------------------------------------------- topo fixo */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: var(--vidro);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--filete);
  height: var(--topo); display: flex; align-items: center; padding: 0 8px;
}
.topo .voltar { display: flex; align-items: center; gap: 4px; color: var(--azul); font-weight: 400;
                font-size: 17px; padding: 10px 8px; border-radius: var(--raio); text-decoration: none; white-space: nowrap; }
.topo .voltar:active { background: var(--fundo2); }
.topo .titulo { flex: 1; text-align: center; font-weight: 500; font-size: 16px; letter-spacing: .02em;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo .titulo.leve { font-weight: 300; font-size: 14px; color: var(--cinza); }
.topo .mais { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 22px; flex: none; }
.topo .mais:active { background: var(--fundo2); }

/* ---------------------------------------------------------------- cabeçalho da reserva */
.ecra { padding: 0 var(--lado) calc(var(--safe) + 40px); }
.cab { padding: 20px 0 14px; }
.cab .nome { font-size: 26px; font-weight: 500; line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
.cab .linha { color: var(--cinza); font-size: 15px; margin-top: 6px; }
.cab .datas { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 400; flex-wrap: wrap; }
.cab .datas .seta { color: var(--cinza); }
.cab .datas .noites { color: var(--cinza); font-weight: 300; margin-left: auto; font-size: 15px; white-space: nowrap; }
.chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.chip { border: 1px solid var(--borda); border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 400; white-space: nowrap; }
.chip.azul { border-color: var(--azul); color: var(--azul); }
.chip.cinza { color: var(--cinza); }
.chip.terra { border-color: var(--terra); color: var(--terra); }
.chip.verde { border-color: var(--verde); color: var(--verde); }
.chip.pq { padding: 2px 10px; font-size: 13px; }
.repete-linha { font-size: 15px; color: var(--cinza); margin: 12px 0 0; }
.repete-linha a, .repete-linha button { color: var(--azul); font-weight: 400; text-decoration: none; }
.repete-faixa { display: block; width: 100%; margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--azul);
                border-radius: var(--raio); color: var(--azul); font-size: 15px; font-weight: 400; text-align: left; }
.repete-faixa:active { background: var(--azul-lav); }
.faltam, .fecho-faltam { font-size: 15px; color: var(--cinza); margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--filete); }

/* mensagens da página */
.feito, .erro, .aviso {
  margin: 12px 0 0; padding: 12px 14px; border-radius: var(--raio-cartao); font-size: 15px; font-weight: 300;
}
.feito { border: 1px solid var(--verde-linha); background: var(--verde-caixa); color: var(--verde-letra); }
.erro  { border-left: 2px solid var(--terra); background: var(--terra-caixa); color: var(--terra-letra); border-radius: 0 var(--raio-cartao) var(--raio-cartao) 0; }
.aviso { border: 1px solid var(--amarelo-linha); background: var(--amarelo-caixa); color: var(--tinta); }
.aviso.grave { border-color: var(--terra); background: var(--terra-caixa); }
.aviso h3 { font-size: 16px; margin: 0 0 6px; }
.aviso ul { margin: 0; padding: 0; list-style: none; }
.aviso li { padding: 4px 0; font-size: 15px; }
.aviso li span { display: block; color: var(--cinza); font-size: 14px; }
.aviso p { margin: 0; }

/* ---------------------------------------------------------------- atalhos */
.atalhos { display: flex; justify-content: space-between; gap: 6px; padding: 14px 0 4px;
           border-top: 1px solid var(--filete); margin-top: 14px; }
.atalhos > a, .atalhos > button, .atalhos > form > button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--tinta); font-weight: 400; padding: 4px 0; border-radius: var(--raio); text-decoration: none;
  transition: transform .12s ease; text-align: center; line-height: 1.2; width: 100%;
}
.atalhos > form { flex: 1; display: flex; margin: 0; padding: 0; background: none; border: 0; }
.atalhos a:active, .atalhos button:active { transform: scale(.94); }
.atalhos .b { width: 52px; height: 52px; border-radius: 26px; border: 1px solid var(--borda); display: flex;
              align-items: center; justify-content: center; color: var(--azul); background: var(--branco);
              transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.atalhos .b.cheio { background: var(--azul-cheio); border-color: var(--azul); color: #fff; }
/* G4b·b (C2) · semáforo leve nos documentos: verde claro = já existe · terra claro = falta */
.atalhos .b.ok    { background: var(--verde-caixa); border-color: var(--verde-linha); color: var(--verde); }
.atalhos .b.falta { background: var(--terra-caixa); border-color: var(--terra-linha); color: var(--terra); }
.atalhos .apagado, .atalhos .apagado .b { color: var(--apagado); }
.atalhos .sub-at { display: none; opacity: 0; transform: translateX(-14px) scale(.85); }
.atalhos.aberto .sub-at { display: flex; animation: entra .22s cubic-bezier(.2,.8,.2,1) forwards; }
.atalhos.aberto #atAd { animation-delay: 0s; } .atalhos.aberto #atFi { animation-delay: .06s; }
.atalhos.aberto #atFat .b { background: var(--fundo2); transform: rotate(90deg); }
.atalhos.aberto > *:not(.sub-at):not(#atFat) { display: none; }
@keyframes entra { to { opacity: 1; transform: none; } }
/* #104 (16/9) · leque do WhatsApp: o botão abre as seis mensagens (topo e cartão Contacto), como o «Emitir fatura».
   Seis cabem em duas filas; a terra clara no círculo diz «ainda não está ok» (a nota sai ao tocar). */
.atalhos > .sub-l, .redondos > .sub-l { display: none; opacity: 0; transform: translateX(-14px) scale(.85); }
.leque-aberto { flex-wrap: wrap; justify-content: flex-start; row-gap: 12px; }
.atalhos.leque-aberto > .sub-l, .redondos.leque-aberto > .sub-l { display: flex; animation: entra .22s cubic-bezier(.2,.8,.2,1) forwards; flex: 0 0 calc(25% - 5px); }
.leque-aberto .sub-l:nth-child(3) { animation-delay: .04s; } .leque-aberto .sub-l:nth-child(4) { animation-delay: .08s; }
.leque-aberto .sub-l:nth-child(5) { animation-delay: .12s; } .leque-aberto .sub-l:nth-child(6) { animation-delay: .16s; }
.leque-aberto .sub-l:nth-child(7) { animation-delay: .20s; }
.leque-aberto .leque-bt { flex: 0 0 calc(25% - 5px); }
.leque-aberto .leque-bt .b { background: var(--fundo2); transform: rotate(90deg); }
.atalhos.leque-aberto > *:not(.sub-l):not(.leque-bt), .redondos.leque-aberto > *:not(.sub-l):not(.leque-bt) { display: none !important; }
.redondos .b.falta { background: var(--terra-caixa); border-color: var(--terra-linha); color: var(--terra); }
.redondos .leque-bt { background: none; border: 0; padding: 0; font-family: inherit; font-size: 12.5px; cursor: pointer; }

/* ---------------------------------------------------------------- cartões */
.cartoes { margin-top: 8px; }
.rot-grupo { font-size: 13px; color: var(--cinza); letter-spacing: .04em; text-transform: uppercase; margin: 22px 0 2px; font-weight: 400; }
.cartao {
  border: 1px solid var(--borda); border-radius: var(--raio-cartao); margin: 10px 0; background: var(--branco);
  overflow: hidden; scroll-margin-top: calc(var(--topo) + 10px);
}
.cartao.amarelo { border-color: var(--amarelo-linha); background: var(--amarelo-caixa); }
.cartao .cabc { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px; transition: background .12s ease; text-align: left; }
button.cabc:active { background: var(--fundo2); }
.cartao .cabc .ico { color: var(--azul); display: flex; }
.cartao .cabc .txt { flex: 1; min-width: 0; }
.cartao .cabc .n { font-size: 17px; font-weight: 400; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cartao .cabc .s { font-size: 15px; color: var(--cinza); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao .cabc .s.quebra { white-space: normal; overflow-wrap: anywhere; }
.cartao .cabc .s.terra { color: var(--terra); font-weight: 400; }
.cartao .cabc .s.terra.quebra { white-space: normal; overflow-wrap: anywhere; }
.cartao .cabc .setinha { color: var(--cinza); transition: transform .25s ease; }
.cartao.aberto .cabc .setinha { transform: rotate(180deg); }
.cartao .corpo { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.2,.8,.2,1); }
.cartao.aberto .corpo { max-height: 4000px; }
.cartao.semanim .corpo { transition: none; }
.cartao .dentro { padding: 2px 14px 14px; border-top: 1px solid var(--filete); }
.cartao.fechado-fixo .cabc { cursor: default; }
.rodape { display: flex; gap: 10px; padding-top: 14px; flex-wrap: wrap; }
.rodape form { margin: 0; padding: 0; background: none; border: 0; flex: 1 1 calc(50% - 5px); min-width: 0; display: flex; }
.rodape form .btn { flex: 1; }

/* conteúdo dos cartões */
.sub { font-size: 15px; color: var(--cinza); margin: 10px 0 4px; overflow-wrap: anywhere; }
.p { margin: 10px 0 0; font-size: 16px; overflow-wrap: anywhere; }
.vazio { color: var(--cinza); font-size: 15px; margin: 10px 0 0; }
.linha { font-size: 15px; margin: 10px 0 0; }
.rot, .rotulo { font-size: 13px; color: var(--cinza); letter-spacing: .04em; text-transform: uppercase; margin: 16px 0 4px; font-weight: 400; display: block; }
.rotulo .editar-inline { text-transform: none; letter-spacing: 0; margin-left: 8px; font-size: 14px; color: var(--azul); text-decoration: none; }
.kv, dl.ficha { margin: 0; padding: 0; }
.kv div, dl.ficha .l { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--filete); font-size: 16px; }
.kv div:last-child { border-bottom: 0; }
.kv dt { color: var(--cinza); font-weight: 300; flex: none; }
.kv dd { margin: 0; text-align: right; font-weight: 400; min-width: 0; overflow-wrap: anywhere; }
.kv dd.n { white-space: nowrap; }
.kv dd.q { text-align: left; flex: 1; font-weight: 300; padding-left: 6px; }
.kv dd small, .kv dd .peq { display: block; color: var(--cinza); font-weight: 300; font-size: 14px; }
.kv dd.terra, .kv .terra { color: var(--terra); }
.kv dd.verde { color: var(--verde); }
.kv dd.destaque { font-weight: 500; }
.kv dd.desvio.bom { color: var(--verde); }
.kv dd.desvio.mau { color: var(--terra); }
/* dl.ficha (formato antigo, dt/dd em sequência) — usado pela secção Avaliação */
dl.ficha { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; }
dl.ficha dt { color: var(--cinza); font-weight: 300; padding: 9px 0; border-bottom: 1px solid var(--filete); font-size: 15px; }
dl.ficha dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--filete); text-align: right; font-size: 15px; font-weight: 400; }
dl.ficha dt:last-of-type, dl.ficha dd:last-of-type { border-bottom: 0; }

table, .tab { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 4px; }
th { font-weight: 400; color: var(--cinza); text-align: left; padding: 8px 0; border-bottom: 1px solid var(--filete); font-size: 14px; }
td { padding: 9px 0; border-bottom: 1px solid var(--filete); vertical-align: top; overflow-wrap: anywhere; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; white-space: nowrap; overflow-wrap: normal; padding-left: 8px; }
tr.tot td { font-weight: 400; }
tr.terra td, .tab .terra { color: var(--terra); }
tr.sel td { color: var(--azul); font-weight: 400; }
tr.sel td:first-child::before { content: "● "; font-size: 9px; vertical-align: 2px; }
.eur { white-space: nowrap; }

.caixa { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; font-size: 15px; color: var(--cinza); margin: 12px 0 4px; display: flex; gap: 8px; align-items: flex-start; }
.caixa.marcada { border-color: var(--azul); color: var(--tinta); }
.caixa .tick { display: inline-flex; width: 18px; height: 18px; border: 1px solid var(--borda); border-radius: 4px; align-items: center; justify-content: center; flex: none; margin-top: 2px; }
.caixa.marcada .tick { background: var(--azul-cheio); border-color: var(--azul); color: #fff; }
.caixa .tick svg { width: 14px; height: 14px; stroke-width: 2.5; }

/* botões (novos) */
.btn { min-height: 46px; padding: 0 16px; border-radius: var(--raio); border: 1px solid var(--azul); color: var(--azul);
       font-weight: 400; font-size: 15.5px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       transition: transform .1s ease, background .1s ease; white-space: nowrap; text-decoration: none; background: var(--branco); cursor: pointer; }
.btn:active { transform: scale(.97); background: var(--fundo2); }
.btn.cheio { background: var(--azul-cheio); color: #fff; }
.btn.cheio:active { background: var(--azul-esc); }
.btn.largo { flex: 1 1 100%; }
.btn.meio { flex: 1 1 calc(50% - 5px); min-width: 0; white-space: normal; text-align: center; line-height: 1.2; padding: 8px 10px; }
.btn.meio svg.ic { width: 18px; height: 18px; }
.btn.texto { border-color: transparent; padding: 0 8px; }
.btn.cinza { border-color: var(--borda); color: var(--cinza); }
.btn.terra { border-color: var(--terra); color: var(--terra); }
.btn.pq { min-height: 38px; font-size: 14px; padding: 0 12px; }
.btn:disabled { color: var(--apagado); border-color: var(--filete); cursor: default; }
.redondos { display: flex; gap: 6px; margin-top: 12px; }
.redondos > a, .redondos > button, .redondos > form > button { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12.5px;
  color: var(--tinta); font-weight: 400; flex: 1; transition: transform .1s ease; text-align: center; line-height: 1.2; text-decoration: none; width: 100%; }
.redondos > form { flex: 1; display: flex; margin: 0; padding: 0; background: none; border: 0; }
.redondos a:active, .redondos button:active { transform: scale(.94); }
.redondos .b { width: 48px; height: 48px; border-radius: 24px; border: 1px solid var(--borda); display: flex; align-items: center; justify-content: center; color: var(--azul); background: var(--branco); }
.tel { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tel .bandeira { font-size: 18px; line-height: 1; flex: none; }
.telmenu { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.telmenu a { color: var(--azul); font-weight: 400; font-size: 15px; padding: 6px 12px; border: 1px solid var(--borda); border-radius: 999px; text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; }
.liga { color: var(--azul); font-weight: 400; word-break: break-all; white-space: normal; text-decoration: none; }
/* #161 (4/10, Diogo) · nunca mais uma palavra em cascata: numa tabela, a ligação de uma coluna estreita (td.n) não parte;
   o nome de um ficheiro quebra por palavra, não letra a letra (o break-all do .liga é para emails e endereços) */
td.n a, th.n a { white-space: nowrap; word-break: normal; }
.tab a.nome-doc, td a.nome-doc { word-break: normal; overflow-wrap: anywhere; }
.hist { margin: 0; padding: 0; list-style: none; }
.hist li { padding: 8px 0; border-bottom: 1px solid var(--filete); font-size: 15px; word-break: break-word; }
.hist li:last-child { border-bottom: 0; }
.hist .q { color: var(--cinza); font-size: 13px; }
.hist .m { color: var(--cinza); }

/* ---------------------------------------------------------------- folhas e «…» */
.veu { position: fixed; inset: 0; z-index: 80; background: rgba(15,27,45,.25); opacity: 0; pointer-events: none; transition: opacity .2s; }
.veu.on { opacity: 1; pointer-events: auto; }
.menu, .folha {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 81; max-width: var(--coluna); margin: 0 auto; background: var(--branco);
  border-radius: 14px 14px 0 0; transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
  padding: 8px 16px calc(16px + var(--safe)); max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.menu.on, .folha.on { transform: translateY(0); }
.puxa { width: 36px; height: 4px; border-radius: 2px; background: var(--borda); margin: 4px auto 12px; }
.menu .t { font-size: 13px; color: var(--cinza); letter-spacing: .04em; text-transform: uppercase; padding: 12px 4px 4px; }
.menu a, .menu button { width: 100%; padding: 13px 4px; border-bottom: 1px solid var(--filete); font-size: 17px; font-weight: 400;
                        display: flex; justify-content: space-between; align-items: center; color: var(--tinta); text-decoration: none; text-align: left; }
.menu form { margin: 0; padding: 0; background: none; border: 0; }
.menu a:last-child, .menu button:last-child, .menu form:last-child button { border-bottom: 0; }
.menu .agora { color: var(--azul); font-size: 14px; }
.menu .terra { color: var(--terra); }
.menu .cinza { color: var(--cinza); }
.menu .sub { padding: 0 4px; }
.folha h3 { font-size: 18px; font-weight: 500; margin: 6px 0 4px; }
.folha .fechar { position: absolute; right: 12px; top: 10px; width: 36px; height: 36px; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: var(--cinza); border: 1px solid var(--borda); background: var(--branco); font-size: 18px; line-height: 1; }
.folha form { margin: 0; padding: 0; background: none; border: 0; }
.folha .btn { margin-top: 20px; width: 100%; }
body:not(.js) .veu { display: none; }
body:not(.js) .menu, body:not(.js) .folha { position: static; transform: none; border: 1px solid var(--borda); border-radius: var(--raio-cartao); margin: 12px 0; max-height: none; }

#toast { position: fixed; left: 50%; bottom: calc(var(--safe) + 20px); transform: translateX(-50%) translateY(20px); background: var(--tinta); color: #fff;
         padding: 10px 16px; border-radius: var(--raio); font-size: 14px; opacity: 0; transition: .2s; z-index: 90; pointer-events: none; max-width: 90%; text-align: center; }

/* ---------------------------------------------------------------- campos (do ficha.css) */
label { display: block; margin: 20px 0 6px; font-size: 15px; font-weight: 400; color: var(--cinza); }
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
select, textarea {
  width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco);
  color: var(--tinta); font-family: inherit; font-size: 17px; font-weight: 400; line-height: 1.4;
}
input::placeholder { color: var(--apagado); opacity: 1; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: inset 0 0 0 .5px var(--azul); }
select { appearance: none; -webkit-appearance: none; padding-right: 32px; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235A6B85' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
textarea { height: auto; min-height: 110px; padding: 12px; resize: vertical; line-height: 1.5; }
input[type=file] { font-size: 15px; margin-top: 4px; }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.par > div > label:first-child { margin-top: 20px; }
.opcao { display: flex; align-items: flex-start; gap: 12px; margin: 14px 0 0; min-height: 44px; }
.opcao input[type=checkbox], .opcao input[type=radio] { width: 22px; height: 22px; margin: 11px 0 0; flex: 0 0 auto; accent-color: var(--azul); }
.opcao label { margin: 0; padding: 10px 0; font-size: 16px; font-weight: 300; color: var(--tinta); }

/* ---------------------------------------------------------------- classes antigas (pedaços partilhados) */
.botao { min-height: 46px; padding: 0 16px; border: 1px solid var(--azul); border-radius: var(--raio); background: var(--azul-cheio); color: #fff;
         font-family: inherit; font-size: 15.5px; font-weight: 400; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; }
.botao.sec { background: var(--branco); color: var(--azul); }
.botao.perigo { background: var(--branco); color: var(--terra); border-color: var(--terra); }
.botao:active { transform: scale(.97); }
.barra { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.barra > * { flex: 1 1 45%; }
.barra form { margin: 0; padding: 0; background: none; border: 0; display: flex; }
.barra form .botao { flex: 1; }
.editar-inline { font-size: 14px; color: var(--azul); text-decoration: none; margin-left: 8px; }
details { margin-top: 12px; }
summary { cursor: pointer; color: var(--azul); font-size: 15px; font-weight: 400; list-style: none; padding: 8px 0; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "▸ "; color: var(--cinza); }
details[open] > summary::before { content: "▾ "; }
.link-ficha span { font-size: 14px; color: var(--azul); word-break: break-all; }
.tel-menu summary::before { content: none; }

/* Avaliação (lib/avaliacoes.php) */
.av-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 10px; font-size: 15px; color: var(--cinza); }
.av-global { font-size: 30px; font-weight: 500; line-height: 1; white-space: nowrap; }
.av-global small { font-size: 14px; color: var(--cinza); font-weight: 300; }
.av-orig { display: block; font-size: 12px; color: var(--apagado); font-weight: 300; text-align: right; }
.av-estrelas { display: inline-flex; gap: 2px; }
.av-est { position: relative; display: inline-block; color: var(--filete); line-height: 1; }
.av-est-f { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; }
.av-trac { color: var(--apagado); letter-spacing: .1em; }
.av-caps dd { white-space: nowrap; }
.av-sug { border: 1px solid var(--borda); border-radius: var(--raio); padding: 4px 12px 10px; margin-top: 8px; }
.av-sug summary { font-size: 15px; color: var(--tinta); }
.av-sug-est { font-size: 13px; color: var(--cinza); }
.av-sug-est.equipa, .av-sug-est.feita { color: var(--verde); }
.av-sug-est.alerta, .av-sug-est.decidir { color: var(--terra); }

/* Hóspede repetente (janela) */
.pop { position: fixed; inset: 0; z-index: 85; background: rgba(15,27,45,.25); display: none; align-items: flex-end; justify-content: center; }
.pop.on { display: flex; }
.pop .cart { position: relative; width: 100%; max-width: var(--coluna); background: var(--branco); border-radius: 14px 14px 0 0; padding: 20px 16px calc(20px + var(--safe)); max-height: 85vh; overflow-y: auto; }
.pop .cart .x { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border-radius: 18px; border: 1px solid var(--borda); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--cinza); }
.pop .cart .n { font-size: 13px; color: var(--cinza); letter-spacing: .04em; text-transform: uppercase; }
.pop .cart h3 { font-size: 20px; margin: 4px 0 10px; }
.pop .cart h4 { font-size: 15px; color: var(--cinza); font-weight: 400; margin: 12px 0 4px; }
.pop .cart ul { margin: 0; padding: 0; list-style: none; }
.pop .cart li { padding: 8px 0; border-bottom: 1px solid var(--filete); font-size: 15px; }

/* ---------------------------------------------------------------- página da equipa (#95) */
.marca { padding: 22px 0 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.marca .m { font-size: 13px; color: var(--cinza); letter-spacing: .04em; text-transform: uppercase; font-weight: 400; }
.marca .m b { display: block; font-size: 15px; color: var(--tinta); font-weight: 500; letter-spacing: 0; text-transform: none; margin-top: 2px; }
.marca .hoje { font-size: 14px; color: var(--cinza); white-space: nowrap; }
.cab-eq { padding: 22px 0 8px; }
.cab-eq h1 { font-size: 26px; }
.cab-eq p { color: var(--cinza); font-size: 15px; margin: 8px 0 0; }
.nota-eq { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--terra); border-radius: var(--raio); color: var(--terra); font-size: 15px; font-weight: 400; overflow-wrap: anywhere; }
.repete-eq { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--azul); border-radius: var(--raio); color: var(--azul); font-size: 15px; font-weight: 400; display: flex; gap: 8px; align-items: flex-start; }
.repete-eq svg { width: 18px; height: 18px; stroke: var(--azul); fill: none; stroke-width: 1.4; flex: none; margin-top: 3px; }
.sug { list-style: none; margin: 0; padding: 0; }
.sug li { padding: 10px 0; border-bottom: 1px solid var(--filete); font-size: 15.5px; line-height: 1.4; }
.sug li:last-child { border-bottom: 0; }
.sug li small { display: block; color: var(--cinza); font-size: 14px; margin-top: 2px; }
.sug li.feita { color: var(--cinza); }
/* sugestões → equipa (5/10) · o «Feita ✓» por baixo de cada sugestão aberta */
.sug li form.sug-feita { margin-top: 8px; }
.sug li form.sug-feita .btn { min-height: 40px; }
.rodape-eq { font-size: 14px; color: var(--cinza); margin: 28px 0 0; line-height: 1.5; }
.pronta { margin-top: 14px; }
.pronta form { margin: 0; padding: 0; background: none; border: 0; }
.pronta .btn { width: 100%; }
.pronta .ok { font-size: 15px; color: var(--verde); font-weight: 400; }

/* ---------------------------------------------------------------- miudezas */
.etiq { display: inline-block; border: 1px solid var(--borda); border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 400; white-space: nowrap; }
.etiq.rec, .etiq.verde { border-color: var(--verde); color: var(--verde); }
@media (max-width: 380px) { :root { --lado: 14px; } .cab .nome { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------------------------------------------------------------- G4b·a · botão flutuante «Voltar ao cartão» (reserva_editar.php) */
.flutua { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
          display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 23px;
          background: var(--azul, #1B4DB1); color: #fff; font-size: 15px; font-weight: 500; text-decoration: none;
          box-shadow: 0 6px 18px rgba(15,27,45,.22); }
.flutua:active { transform: scale(.97); }

/* ==========================================================================
   Desktop (14/9/2026; ecrã inteiro #102) · a página da reserva em duas colunas
   a partir de 900 px. No telemóvel nada muda. Só se aplica ao .app.larga (reserva.php):
     · a app ocupa a largura toda do browser (sem faixas cinzentas aos lados);
     · cabeçalho + atalhos ficam à esquerda, presos ao topo enquanto se rola;
     · os cartões ocupam a direita, com o comportamento de sempre (um aberto);
     · «…», folhas e janelas abrem ao centro, como diálogos, e não do fundo;
     · o rato ganha realce leve nos cartões e atalhos (no toque continua igual).
   ========================================================================== */
@media (min-width: 900px) {
  .app.larga { max-width: none; --coluna: none; min-height: 100vh; }
  body:has(.app.larga) { background: var(--branco); }
  .app.larga .topo { padding: 0 24px; }
  .app.larga .ecra {
    display: grid; grid-template-columns: 360px minmax(0, 1fr); column-gap: 40px;
    padding: 0 32px 48px; align-items: start;
  }
  .app.larga .lado { position: sticky; top: calc(var(--topo) + 8px); }
  .app.larga .cab { padding-top: 28px; }
  .app.larga .cab .nome { font-size: 30px; }
  .app.larga .atalhos { flex-wrap: wrap; justify-content: flex-start; gap: 10px 4px; }
  .app.larga .atalhos > a, .app.larga .atalhos > button, .app.larga .atalhos > form { flex: 0 0 calc(33.333% - 3px); }
  .app.larga .atalhos > form > button { flex: 1; }
  .app.larga .cartoes { margin-top: 24px; }
  .app.larga .cartao:first-child { margin-top: 0; }
  .app.larga .cartao .cabc { padding: 16px 18px; }
  .app.larga .cartao .dentro { padding: 4px 18px 18px; }
  .app.larga .kv div, .app.larga dl.ficha .l { font-size: 15.5px; }

  /* menus e folhas viram diálogos centrados */
  .app.larga .menu, .app.larga .folha {
    left: 50%; right: auto; bottom: auto; top: 50%; width: 480px; max-width: calc(100vw - 48px);
    max-height: 85vh; border-radius: 14px; padding: 12px 20px 20px;
    transform: translate(-50%, -50%) scale(.96); opacity: 0; pointer-events: none;
    transition: transform .2s ease, opacity .2s ease; box-shadow: 0 18px 48px rgba(15,27,45,.22);
  }
  .app.larga .menu.on, .app.larga .folha.on { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
  .app.larga .puxa { display: none; }
  .app.larga .pop { align-items: center; }
  .app.larga .pop .cart { width: 480px; max-width: calc(100vw - 48px); border-radius: 14px; padding: 20px 20px 24px;
                          box-shadow: 0 18px 48px rgba(15,27,45,.22); }
}
@media (min-width: 1200px) {
  .app.larga .ecra { grid-template-columns: 400px minmax(0, 1fr); column-gap: 56px; padding: 0 48px 56px; }
  .app.larga .topo { padding: 0 32px; }
}
@media (hover: hover) and (pointer: fine) {
  button.cabc:hover { background: var(--fundo2); }
  .cartao.amarelo button.cabc:hover { background: rgba(255,255,255,.5); }
  .atalhos a:hover .b, .atalhos button:hover .b { border-color: var(--azul); background: var(--azul-lav); }
  .atalhos .b.cheio:hover, .atalhos a:hover .b.cheio { background: var(--azul-esc); }
  .topo .voltar:hover, .topo .mais:hover { background: var(--fundo2); }
  .menu a:hover, .menu button:hover { background: var(--fundo2); }
}

/* ==========================================================================
   23/9/2026 · Telemóvel: o cabeçalho da reserva (nome, datas, chips, «Faltam»)
   e os atalhos ficam PRESOS por baixo da barra do topo; só os cartões rolam
   por baixo. Pedido do Diogo: ver sempre o essencial e ter meio ecrã para os
   cartões. Em ecrãs muito baixos (< 560 px de altura) não prende, para não
   tapar o ecrã inteiro. No desktop continua a coluna da esquerda de sempre.
   23/9 (noite) · só prende com os cartões TODOS fechados: com um cartão aberto
   (.app.cartao-aberto, posto pelo JS) o cabeçalho rola com a página e o cartão
   tem o ecrã inteiro; ao fechar, volta a prender.
   ========================================================================== */
@media (max-width: 899px) and (min-height: 560px) {
  .app.larga:not(.cartao-aberto) .lado {
    position: sticky; top: var(--topo); z-index: 40; background: var(--branco);
    margin: 0 calc(-1 * var(--lado)); padding: 0 var(--lado) 10px;
    border-bottom: 1px solid var(--filete);
  }
  .app.larga .cartoes { padding-top: 14px; }
}

/* ==========================================================================
   P14 · Calendário (D «faixas», 27/9/2026) — só o calendario.php usa estas
   classes (prefixo «cal-»); a barra de separadores «.tabs» é a do Cockpit
   (cockpit.css .ck-tabs) copiada para aqui, para o G4 a ter num só sítio.
   Protótipo aprovado: docs/desenho_G/calendario_P14/P14_D.html.
   ========================================================================== */
.app.cal { --barra: 58px; --cabh: 168px; padding-bottom: calc(var(--barra) + var(--safe) + 24px); }
.app.cal.com-sel { padding-bottom: calc(var(--barra) + var(--safe) + 210px); }   /* barra de escolha aberta */
.app.cal .folha { max-height: 72vh; touch-action: pan-y; overscroll-behavior: contain; }
/* com uma folha aberta a página por trás não rola: o véu engole o gesto (overflow:hidden no body partia o cabeçalho sticky) */
.app.cal .veu { touch-action: none; }
.app.cal .folha.arrasta { transition: none; }
.app.cal .folha h3 { padding-right: 48px; }
/* a pega, o «×» e o título ficam presos no topo da folha; só o conteúdo rola */
.app.cal .folha .folha-cab { position: sticky; top: 0; z-index: 2; background: var(--branco); margin: -8px -16px 0; padding: 8px 16px 10px; border-bottom: 1px solid var(--filete); }
.app.cal .folha .folha-cab .fechar { top: 10px; right: 12px; }
.app.cal .folha .folha-cab .sub { margin-bottom: 0; }
.app.cal .folha .folha-cab + .chips, .app.cal .folha .folha-cab + .aviso, .app.cal .folha .folha-cab + .kv { margin-top: 12px; }
.app.cal .folha .sub { margin: 0 0 6px; }
.app.cal .folha .chips { margin-top: 12px; }
.app.cal .folha .aviso { margin: 12px 0 0; }
.app.cal .folha .nota-l { font-size: 15px; color: var(--cinza); margin: 12px 0 0; }
.app.cal .folha .ligacao { display: block; text-align: center; margin: 14px 0 0; font-size: 15px; color: var(--cinza); text-decoration: none; font-weight: 400; padding: 8px; }
.app.cal .folha form { margin: 0; padding: 0; background: none; border: 0; }
.app.cal .folha .btn { margin-top: 20px; width: 100%; }
.app.cal .kv dd small { display: block; color: var(--cinza); font-weight: 300; font-size: 14px; }
.app.cal .feito, .app.cal .erro { margin: 12px 0 0; }

/* cabeçalho fixo: título · Hoje · «+» · seletor mês/ano · legenda · dias da semana */
.cal-cab { position: sticky; top: 0; z-index: 50; background: var(--branco); border-bottom: 1px solid var(--filete); padding: 10px var(--lado) 0; }
.cal-cab .l1 { display: flex; align-items: center; gap: 8px; height: 44px; }
.cal-cab h1 { font-size: 22px; font-weight: 500; margin: 0; flex: 1; }
.cal-cab .hoje-b { font-size: 14px; color: var(--azul); text-decoration: none; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--borda); font-weight: 400; }
.cal-cab .hoje-b:active { background: var(--azul-lav); }
.cal-cab .mais-cab { width: 40px; height: 40px; border-radius: 20px; background: var(--azul-cheio); color: #fff; font-size: 24px; font-weight: 300; line-height: 1; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 2px 8px rgba(27,77,177,.25); }
.cal-cab .mais-cab:active { background: var(--azul-esc); }
.cal-cab .l2 { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.cal-cab .l2 select { width: auto; height: 40px; font-size: 16px; font-weight: 500; padding: 0 30px 0 10px; }
/* #128 · doze pontos, um por mês do ano do seletor: cheio > 60 % · meio 20–60 % · vazio < 20 % */
.cal-ano { display: grid; grid-template-columns: repeat(12, 1fr); margin-top: 8px; }
.cal-ano a { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--apagado); padding: 2px 0; }
.cal-ano i { width: 9px; height: 9px; border-radius: 5px; border: 1px solid var(--azul); background: var(--branco); }
.cal-ano i.p-cheio { background: var(--azul-cheio); }
.cal-ano i.p-meio { background: linear-gradient(90deg, var(--azul) 50%, var(--branco) 50%); }
.cal-ano i.p-semdados { border-color: var(--borda); }
.cal-legenda { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--cinza); margin: 8px 0 0; }
.cal-legenda span { display: inline-flex; align-items: center; white-space: nowrap; }
.cal-legenda i { display: inline-block; width: 16px; height: 9px; border-radius: 5px; margin-right: 5px; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 8px; }
.cal-dow div { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--apagado); text-align: center; padding: 2px 0 8px; }

/* o corpo que rola: meses seguidos, nome do mês preso por baixo do cabeçalho */
.cal-corpo { padding: 0 var(--lado); }
#inicioLista { height: 1px; }
.cal-ajuda { margin: 12px 0 4px; font-size: 13.5px; color: var(--cinza); line-height: 1.4; }
.cal-mes { margin: 0 0 22px; }
.cal-mes h2 { position: sticky; top: var(--cabh); z-index: 20; background: var(--branco); font-size: 18px; font-weight: 500; padding: 12px 0 8px; margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; }
.cal-mes h2 small { font-weight: 300; color: var(--cinza); font-size: 12.5px; margin-left: auto; white-space: nowrap; }
.cal-sem { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dia { position: relative; height: 56px; display: block; text-decoration: none; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cal-dia .n { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 400; }
.cal-dia.fora { visibility: hidden; }
.cal-dia.hoje .n { border: 1.5px solid var(--tinta); }
.cal-dia.sel-in .n, .cal-dia.sel-out .n { background: var(--azul-cheio); color: #fff; font-weight: 500; }
.cal-dia.sel-meio::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 0; right: 0; background: var(--azul-lav); }
.cal-dia.sel-in::before  { content: ""; position: absolute; top: 8px; bottom: 8px; left: 50%; right: 0; background: var(--azul-lav); }
.cal-dia.sel-out::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 0; right: 50%; background: var(--azul-lav); }
/* a faixa de uma estadia: do meio do dia de entrada ao meio do dia de saída */
.cal-faixa { position: absolute; bottom: 6px; height: 22px; border-radius: 11px; font-size: 11px; font-weight: 400; line-height: 22px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; pointer-events: none; }
.cal-faixa.cont  { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 6px; }
.cal-faixa.segue { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* regra única (28/9): as três cores de tipo são as do Cockpit (fundo + contorno dos mosaicos .ck-res) */
.cal-faixa.direto     { background: var(--direto-caixa); color: var(--azul);  box-shadow: inset 0 0 0 1px var(--direto-linha); }
.cal-faixa.plataforma { background: var(--plat-caixa); color: var(--terra); box-shadow: inset 0 0 0 1px var(--plat-linha); }
.cal-faixa.uso        { background: var(--uso-caixa); color: var(--verde); box-shadow: inset 0 0 0 1px var(--uso-linha); }
.cal-faixa.pre  { background: var(--branco); color: var(--terra); border: 1.5px dashed var(--terra); line-height: 19px; }
.cal-faixa.pre.choque { background: var(--choque-caixa); }
.cal-faixa.bloq { background: var(--bloq); color: var(--cinza); }
.cal-faixa.orfa { background: repeating-linear-gradient(45deg, var(--bloq) 0 3px, var(--branco) 3px 6px); color: var(--cinza); }
.cal-mais { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--borda); border-radius: var(--raio); color: var(--azul); text-decoration: none; font-size: 15px; font-weight: 400; margin: 4px 0 10px; }

/* barra de escolha (#21 · #71): cartão, sem contorno azul */
.cal-sel { position: fixed; left: 50%; transform: translateX(-50%); width: calc(100% - 20px); max-width: calc(var(--coluna) - 20px); bottom: calc(var(--barra) + var(--safe) + 10px); z-index: 44;
           background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-cartao); padding: 14px 16px 12px; box-shadow: 0 10px 30px rgba(15,27,45,.14); display: none; }
.cal-sel.on { display: block; }
.cal-sel .rot { margin: 0 0 2px; }
.cal-sel .datas { font-size: 17px; font-weight: 400; margin: 0 0 12px; }
.cal-sel .datas .n { color: var(--cinza); font-weight: 300; margin-left: 8px; font-size: 15px; }
.cal-sel .duo { display: flex; gap: 10px; }
.cal-sel .duo .botao { flex: 1; }
.cal-sel .botao.desl { opacity: .45; pointer-events: none; }
.cal-sel .rodape-sel { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; font-size: 14px; }
.cal-sel .rodape-sel a { text-decoration: none; color: var(--cinza); font-weight: 400; padding: 4px 0; }
.cal-sel .rodape-sel a.bloq { color: var(--terra); }
.cal-sel .sel-bloq { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--filete); }
.cal-sel .sel-bloq.on { display: block; }
.cal-sel .sel-bloq form { margin: 0; padding: 0; background: none; border: 0; }
.cal-sel .sel-bloq label { margin: 0 0 6px; }
.cal-sel .sel-bloq input { margin-bottom: 10px; }
.cal-sel .sel-bloq .botao { width: 100%; }
.cal-sel .sel-bloq .sub { font-size: 14px; margin: 10px 0 0; }

/* barra de separadores em baixo (= .ck-tabs do cockpit.css) */
.tabs { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--coluna); z-index: 45;
        background: var(--vidro); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
        border-top: 1px solid var(--filete); display: flex; height: calc(var(--barra) + var(--safe)); padding-bottom: var(--safe); }
.tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 400;
          color: var(--cinza); text-decoration: none; position: relative; transition: transform .12s ease; }
.tabs a:active { transform: scale(.92); }
.tabs a.on { color: var(--azul); }
.tabs svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tabs .selo { position: absolute; top: 7px; left: calc(50% + 5px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
              background: var(--terra); color: #fff; font-size: 11px; font-weight: 500; display: flex; align-items: center; justify-content: center; line-height: 1; }
.app.com-tabs .ecra { padding-bottom: calc(58px + var(--safe) + 32px); }
@media (min-width: 900px) {
  .app.cal, .app.cal .tabs, .app.cal .folha { max-width: 640px; }
  .app.larga.com-tabs .tabs { max-width: 100%; }
  .app.cal .cal-sel { max-width: 620px; }
}
@media (hover: hover) and (pointer: fine) { .tabs a:hover { color: var(--azul); } }

/* ---------------------------------------------------------------- G4 · lista de Reservas (28/9, decisão B: docs/desenho_G/G4_reservas/) */
.lst .ecra { padding-top: 4px; }
.lst-cab { position: sticky; top: 0; z-index: 50; background: var(--vidro); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
           border-bottom: 1px solid var(--filete); padding: 10px var(--lado) 10px; }
.lst-cab .l1 { display: flex; align-items: center; gap: 8px; height: 44px; }
.lst-cab h1 { font-size: 22px; font-weight: 500; margin: 0; flex: 1; }
.lst-cab .mais-cab { width: 40px; height: 40px; border-radius: 20px; background: var(--azul-cheio); color: #fff; font-size: 24px; font-weight: 300; line-height: 1;
                     display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 2px 8px rgba(27,77,177,.25); }
.lst-cab .mais-cab:active { background: var(--azul-esc); }
.lst-cab .procura { display: flex; gap: 8px; margin: 6px 0 0; padding: 0; background: none; border: 0; }
/* correção b (28/9): no Safari um input com width:100% não encolhe no flex e entrava por baixo do «Procurar» */
.lst-cab .procura input { flex: 1 1 auto; width: auto; min-width: 0; height: 44px; font-size: 16px; }
.lst-cab .procura .btn { flex: none; min-height: 44px; }
/* correção c (28/9, Diogo): «Filtrar» à direita, mesmo por baixo do «Procurar» e com a mesma largura; à esquerda só os
   filtros escolhidos na janela (nada quando não há nenhum), a rolar com esbatido se não couberem */
.lst-cab .btn { min-width: 112px; }
.fil-resumo { display: flex; gap: 8px; align-items: center; margin-top: 8px; min-height: 38px; }
.fil-resumo .resumo-chips { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0;
                            -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); }
.fil-resumo .resumo-chips:empty { mask-image: none; -webkit-mask-image: none; }
.fil-resumo .chip { color: var(--cinza); flex: none; }
.fil-resumo .btn.pq { flex: none; margin-left: auto; }
.lst .conta { margin: 12px 0 4px; }
.res { display: block; text-decoration: none; color: var(--tinta); border: 1px solid var(--borda); border-radius: var(--raio-cartao); padding: 12px 14px; margin: 10px 0; background: var(--branco); }
.res:active { background: var(--fundo2); }
.res.passado { opacity: .55; }
.res .nome { font-size: 17px; font-weight: 400; overflow-wrap: anywhere; }
.res .dados { font-size: 15px; color: var(--cinza); margin-top: 2px; }
.res .dados b { color: var(--tinta); font-weight: 400; white-space: nowrap; }
.res .chips { margin-top: 8px; gap: 6px; align-items: center; }
.res .cod { margin-left: auto; font-size: 13px; color: var(--apagado); font-variant-numeric: tabular-nums; }
.sep { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; color: var(--cinza); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.sep span { flex: 1; border-top: 1px solid var(--filete); }
/* folha «Filtrar»: grupos de chips-ligação; a escolhida a cheio */
.fil { display: flex; gap: 8px; flex-wrap: wrap; }
.fil .chip { color: var(--cinza); text-decoration: none; position: relative; cursor: pointer; }
.fil .chip input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.fil .chip.on, .fil .chip:has(input:checked) { background: var(--azul-lav, #F1F5FC); border-color: var(--azul); color: var(--azul); }
.lst-filtros { margin: 0 auto; }
.lst-filtros .grupo { font-size: 13px; color: var(--cinza); letter-spacing: .04em; text-transform: uppercase; margin: 18px 0 8px; }
.lst-filtros .duo { display: flex; gap: 10px; margin-top: 22px; }
.lst-filtros .duo .btn { flex: 1; }
.lst-filtros .duo button.btn { width: 100%; }
/* sem JavaScript a folha não abre: os filtros aparecem por baixo da lista, em linha */
body:not(.js) .lst-filtros { position: static; transform: none; max-width: var(--coluna); padding: 0 var(--lado) 40px; border-radius: 0; }

/* ---------------------------------------------------------------- G4 · regra única (28/9, docs/desenho_G/G4_unica/REGRA_UNICA.md) */
/* 1. cabeçalho fixo de página-raiz: título 22/500 à esquerda, ações à direita (o Cockpit é a exceção: bloco de marca) */
.pag-cab { position: sticky; top: 0; z-index: 50; background: var(--vidro); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
           border-bottom: 1px solid var(--filete); padding: 10px var(--lado) 10px; }
.pag-cab .l1 { display: flex; align-items: center; gap: 8px; height: 44px; }
.pag-cab h1 { font-size: 22px; font-weight: 500; margin: 0; flex: 1; }
.app.pag .ecra > .sub:first-child, .app.pag .ecra > .feito:first-child, .app.pag .ecra > .erro:first-child { margin-top: 12px; }
/* 4. linhas de menu («…»): ícone 24 · nome 17/400 · estado 15/300 cinza · contador à direita 15/400 (terra quando pede atenção) */
.mlista { margin-top: 4px; }
.mrow { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 0 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--filete); text-decoration: none; color: var(--tinta); }
.mrow:active { background: var(--fundo2); }
.mrow svg { width: 24px; height: 24px; stroke: var(--cinza); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mrow b { display: block; font-weight: 400; font-size: 17px; line-height: 1.25; }
.mrow span { display: block; font-size: 15px; color: var(--cinza); font-weight: 300; line-height: 1.35; overflow-wrap: anywhere; margin-top: 2px; }
.mrow em { font-style: normal; font-size: 15px; font-weight: 400; color: var(--tinta); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mrow em small { display: block; font-size: 13px; color: var(--terra); font-weight: 400; }
.mrow em.nada { color: var(--apagado); }
.mrow.sair b { color: var(--terra); }
/* 6. avisos: cartão branco com contorno; grave = filete terra à esquerda + fundo terra-caixa (a caixa de erro do sistema); informativo = fundo2 */
.av { border: 1px solid var(--borda); border-radius: var(--raio-cartao); padding: 14px; margin: 10px 0; background: var(--branco); }
.av.grave { border-left: 2px solid var(--terra); background: var(--terra-caixa, #FAF3EE); border-radius: 0 var(--raio-cartao) var(--raio-cartao) 0; }
.av.cinza { background: var(--fundo2); border-color: var(--fundo2); }
.av h3 { font-size: 17px; font-weight: 500; margin: 0 0 4px; }
.av .quem { font-size: 16px; font-weight: 400; }
.av .det { font-size: 15px; color: var(--cinza); margin-top: 2px; overflow-wrap: anywhere; }
.av .accao { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.av .accao form { margin: 0; padding: 0; background: none; border: 0; display: flex; }
.av .accao .btn { min-height: 38px; font-size: 14px; padding: 0 12px; }
.av .linha-f { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--filete); align-items: flex-start; margin-top: 10px; }
.av .linha-f > div { flex: 1; min-width: 0; }
.av .linha-f i { flex: none; width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; color: #fff; margin-top: 2px; }
.av .linha-f i.ok { background: var(--verde); } .av .linha-f i.p { background: var(--terra); } .av .linha-f i.n { background: var(--apagado); }
.av .linha-f .ft { font-size: 16px; font-weight: 400; } .av .linha-f .fe { font-size: 15px; color: var(--cinza); overflow-wrap: anywhere; }
.av .linha-f .fe.nota { font-style: italic; }
.av .linha-f .accao { margin-top: 8px; }
.av .fecho-faltam { border-top: 0; padding-top: 0; margin-top: 10px; }
.grupo-t { font-size: 13px; color: var(--cinza); letter-spacing: .04em; text-transform: uppercase; margin: 22px 0 2px; font-weight: 400; }
.grupo-s { font-size: 15px; color: var(--cinza); margin: 0 0 6px; }

/* ---------------------------------------------------------------- G4 · Nova reserva / Editar (3/10, decisão A: docs/desenho_G/G4_reserva_editar/) */
/* o formulário de sempre do reserva_editar.php, na moldura de página filha; os estilos inline antigos saíram do PHP e vivem aqui */
.app.edit .ecra { padding-top: 4px; }
.app.edit .ecra > .sub:first-child { margin-top: 12px; }
.edit .ler-pdf { margin: 12px 0 4px; }
.edit .ler-pdf summary { font-size: 16px; }
.edit .ler-pdf form { margin: 0; padding: 0 0 8px; background: none; border: 0; }
.edit .ler-pdf .botao { margin-top: 12px; }
.edit .rotulo { margin: 30px 0 0; }
.edit .rotulo + .botao { margin-top: 12px; }
.edit .recuo { margin: 0 0 8px 34px; }          /* a hora do late check-out, recuada por baixo do interruptor */
.edit .feito b { display: block; margin-bottom: 2px; }
.edit .barra { margin-top: 24px; }
.edit .barra .botao { width: 100%; }
.edit .apagar { margin-top: 32px; }
.edit .apagar summary { color: var(--terra); }
/* os saltos para os blocos (#c_estadia, #c_faturacao…) não ficam debaixo da barra do topo (G4b·a, T5) */
.edit p.rotulo[id], .edit details[id], .edit [id^="c_"] { scroll-margin-top: calc(var(--topo) + 12px); }
/* B (3/10, 19h30): as cinco secções em cartões que abrem um de cada vez (as classes .cartao/.cabc/.corpo são as da reserva) e
   os botões «Registar» / «Guardar alterações» presos em baixo, por cima da barra */
.edit .cartoes { margin-top: 12px; }
.edit .cartao { margin-top: 10px; }
.edit .cartao .cabc .s.quebra { white-space: normal; }
.edit .cartao .dentro > label:first-child, .edit .cartao .dentro > .par:first-child > div > label:first-child { margin-top: 12px; }
.edit .cartao .dentro > .botao:first-child { margin-top: 14px; }
.edit .acoes-fixas { position: fixed; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--coluna); z-index: 44;
  bottom: calc(58px + var(--safe)); background: var(--vidro); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--filete); padding: 10px var(--lado); display: flex; flex-wrap: wrap; gap: 10px; }
.edit .acoes-fixas .botao { flex: 1; min-width: 0; white-space: normal; line-height: 1.2; }
.edit .acoes-fixas .sub { flex: 1 1 100%; margin: 0; font-size: 13px; }
.app.edit.com-acoes .ecra { padding-bottom: calc(58px + var(--safe) + 130px); }
/* o «← cartão» flutuante fica por cima dos botões presos e da barra de baixo */
.edit .flutua { bottom: calc(58px + var(--safe) + 120px); }
@media (min-width: 900px) { .edit .acoes-fixas { max-width: 640px; } }

/* ---------------------------------------------------------------- G4 · cabeçalho da reserva mais baixo (3/10, decisão B2: docs/desenho_G/G4_reserva_cab/) */
/* o cabeçalho preso ocupava 73 % do ecrã útil do iPhone; passa a ~45 %: nome 22, filas apertadas, «Faltam» e «Marcar repetente»
   como chips na fila, atalhos redondos de 40 px com o rótulo numa linha. Só o reserva.php; a Susana (equipa.php) não muda. */
.cab { padding: 12px 0 6px; }
.cab .nome { font-size: 22px; }
.cab .linha { margin-top: 2px; font-size: 14px; }
.cab .datas { margin-top: 8px; font-size: 16px; }
.cab .chips { margin-top: 8px; gap: 6px; }
.cab .chips .chip { padding: 2px 10px; font-size: 13px; }
.cab .chips a.chip { text-decoration: none; color: var(--azul); border-color: var(--azul); }
.cab .chips a.chip:active { background: var(--azul-lav); }
.atalhos { margin-top: 8px; padding: 10px 0 2px; }
.atalhos > a, .atalhos > button, .atalhos > form > button { font-size: 12px; gap: 4px; padding: 2px 0; }
.atalhos .b { width: 40px; height: 40px; border-radius: 20px; }
.atalhos .b svg.ic { width: 20px; height: 20px; }
.app.larga .cartoes { padding-top: 10px; }
.cab .chips .chip.terra { white-space: normal; }   /* o «Faltam: …» pode ser comprido (saldo com valor): quebra em vez de sair do ecrã */

/* ---------------------------------------------------------------- G4 · #136 · as nove filhas do «…» (3/10) */
/* kpi · tarifas · avaliacoes · calendarios · equipa_lista · definicoes · higiene · dropbox_setup · toc_setup passam à moldura
   nova (página filha «‹ Mais · Título», barra de baixo) sem mudar de conteúdo. Os <style> inline do tarifas.php e do higiene.php
   vivem aqui; o que o etapa4.css/estilo.css dava a estas páginas (h2, .anos, .cx/.cursor, .link-ficha, .hb, dl.ficha…) ganha a
   cara da regra única (REGRA_UNICA.md): títulos de secção em caixa alta 13 cinza, chips de escolha em azul lavado, cartão branco
   com contorno, botões do sistema, nunca 600. */
.app.fm .ecra { padding-top: 4px; }
.app.fm .ecra > .sub:first-child { margin-top: 14px; }
.app.fm .ecra > .erro:first-child, .app.fm .ecra > .feito:first-child { margin-top: 12px; }
.fm h2 { font-size: 13px; color: var(--cinza); letter-spacing: .04em; text-transform: uppercase; font-weight: 400; margin: 30px 0 2px; }
.fm h2 + .sub { margin-top: 2px; }
.fm h3 { font-size: 17px; font-weight: 500; }
.fm p { overflow-wrap: anywhere; }
.fm form { margin: 0; }
.fm form > .botao { width: 100%; margin-top: 18px; }
.fm form + form { margin-top: 10px; }
.fm details { margin-top: 16px; }
.fm details > .sub:first-of-type { margin-top: 2px; }
/* ano (KPI, Tarifas, Avaliações): chips de escolha, o escolhido em azul lavado (regra 3) */
.fm .anos { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.fm .anos a { border: 1px solid var(--borda); border-radius: 999px; padding: 0 14px; min-height: 36px; display: inline-flex; align-items: center;
              font-size: 14px; font-weight: 400; color: var(--tinta); text-decoration: none; white-space: nowrap; }
.fm .anos a.on { border-color: var(--azul); color: var(--azul); background: var(--azul-lav); }
/* cartões planos (Equipa, Avaliações): nome 17/400, linha de dados 15/300 cinza, sem risco à esquerda (regra 2) */
.fm .cartao.plano { display: block; padding: 14px; color: var(--tinta); text-decoration: none; }
.fm .cartao.plano .nome { font-size: 17px; font-weight: 400; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.fm .cartao.plano .linha { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 15px; color: var(--cinza); margin-top: 6px; }
.fm .cartao.plano.passado { opacity: .6; }
.fm .cartao.plano .barra { margin-top: 12px; }
.app.fm .cartao.plano input[readonly] { height: 44px; font-size: 16px; padding: 0 10px; color: var(--cinza); background: var(--fundo2); }
/* faixa de números (Avaliações): o bloco .av-faixa com as três caixas, como os mosaicos KPI do Cockpit (fundo2) */
.fm .av-faixa { background: var(--fundo2); border-radius: var(--raio-cartao); padding: 14px 14px 62px; margin: 14px 0 10px; position: relative; }
.fm .av-faixa .cursor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fm .av-faixa .cursor > div { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 10px 8px; font-size: 13px; color: var(--cinza); line-height: 1.3; }
.fm .av-faixa .cursor b { display: block; font-size: 22px; font-weight: 500; color: var(--tinta); margin: 4px 0 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fm .av-faixa .cursor b small { font-size: 13px; color: var(--cinza); font-weight: 300; }
.fm .av-faixa .cursor span { display: block; font-size: 13px; color: var(--cinza); }
.fm .av-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.fm .av-chips button { border: 1px solid var(--borda); border-radius: 999px; padding: 0 12px; min-height: 36px; font-size: 14px; font-weight: 400; background: var(--branco); }
.fm .av-chips button.on { border-color: var(--azul); color: var(--azul); background: var(--azul-lav); }
.fm .av-faixa > .info, .fm .av-faixa > .troca { position: absolute; bottom: 12px; width: 38px; height: 38px; border-radius: 19px; border: 1px solid var(--borda); background: var(--branco);
                        color: var(--azul); display: flex; align-items: center; justify-content: center; font-size: 16px; text-decoration: none; }
.fm .av-faixa > .info { left: 14px; font-style: italic; font-weight: 500; }
.fm .av-faixa > .troca { right: 14px; }
.fm .av-nota { font-size: 15px; font-weight: 400; font-variant-numeric: tabular-nums; }
.fm .av-sugl { color: var(--cinza); font-style: italic; }
.fm .av-lista { list-style: none; padding: 0; margin: 4px 0 0; font-size: 15px; }
.fm .av-lista li { padding: 8px 0; border-bottom: 1px solid var(--filete); }
.fm .av-lista li:last-child { border-bottom: 0; }
.fm .av-lista li small { color: var(--cinza); font-size: 14px; }
/* nota por baixo de um campo (Configuração, Calendários): colada ao campo, mais pequena */
.fm .sub.nota { margin-top: 6px; font-size: 14px; }
/* caixa do link (Calendários): o endereço inteiro, quebrado, com o «Copiar» por baixo */
.fm .link-ficha { border: 1px solid var(--borda); border-radius: var(--raio-cartao); padding: 12px 14px; margin-top: 8px; font-size: 14px;
                  word-break: break-all; color: var(--tinta); background: var(--fundo2); font-variant-numeric: tabular-nums; }
.fm .link-ficha .duo { display: flex; gap: 10px; margin-top: 12px; word-break: normal; }
.fm .link-ficha .duo .botao { flex: 1; margin: 0; }
.fm .breve { border: 1px solid var(--borda); border-radius: var(--raio-cartao); padding: 12px 14px; font-size: 15px; color: var(--cinza); margin-top: 12px; }
.fm .breve b { color: var(--tinta); font-weight: 400; }
/* avisos com ações (bloqueios, datas por registar): botões de contorno pequenos (regra 5) */
.fm .aviso .accao { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fm .aviso .accao form { margin: 0; padding: 0; background: none; border: 0; display: flex; }
.fm .aviso .accao a, .fm .aviso .accao button { min-height: 38px; padding: 0 12px; border: 1px solid var(--azul); border-radius: var(--raio); color: var(--azul);
                                                background: var(--branco); font-size: 14px; font-weight: 400; display: inline-flex; align-items: center; text-decoration: none; }
.fm .aviso.cinza { background: var(--fundo2); border-color: var(--fundo2); }
.fm .aviso ul li b { display: block; font-weight: 400; }
/* uso das janelas KPI (Configuração): barras horizontais */
.fm .hb { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 4px; }
.fm .hb-l { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 10px; align-items: center; font-size: 14px; }
.fm .hb-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.fm .hb-n small { display: block; font-size: 13px; color: var(--cinza); font-weight: 300; }
.fm .hb-b { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; }
.fm .hb-b i { display: block; height: 8px; border-radius: 4px; background: var(--azul-cheio); min-width: 3px; }
.fm .hb-b em { font-style: normal; font-size: 13px; color: var(--cinza); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Tarifas: as tabelas largas rolam dentro da página (a página nunca rola na horizontal, T12); campos pequenos nas células */
.fm .tar-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px calc(-1 * var(--lado)) 0; padding: 0 var(--lado); }
.fm table.tar { width: auto; min-width: 100%; margin: 0; }
.fm table.tar th, .fm table.tar td { padding: 6px 8px 6px 0; white-space: nowrap; vertical-align: middle; font-size: 14px; }
.fm table.tar th { font-size: 13px; }
.fm table.tar tr:last-child td { border-bottom: 0; }
.app.fm .tar td input:not([type=checkbox]) { width: 4.4rem; height: 38px; padding: 0 8px; font-size: 15px; margin: 0; display: inline-block; vertical-align: middle; }
.app.fm .tar td input.n { width: 5.4rem; }
.app.fm .tar td input.d { width: 2.7rem; text-align: center; padding: 0 4px; }
.app.fm .tar td input.t { width: 6.6rem; }
.fm .tar input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--azul); vertical-align: middle; margin: 0; }
.fm table.tar .ro { font-variant-numeric: tabular-nums; }
.fm .cadeado { font-size: 13px; color: var(--cinza); }
.fm table.tar label.cadeado { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 0 6px; font-size: 13px; }
.fm .tar-bloq { background: var(--fundo2); border-radius: var(--raio-cartao); padding: 12px 14px; font-size: 15px; color: var(--cinza); margin: 12px 0 4px; }
.fm .prova td.mau { color: var(--terra); font-weight: 500; }
.fm .fichapub { width: 100%; min-height: 12rem; font: 13px/1.45 ui-monospace, Menlo, monospace; padding: 10px 12px; }
/* #121 (4/10) · «Verificar no Airbnb/Booking»: caixa do resultado (verde = bate; terra = há valores abaixo da tabela) */
.fm .verif { margin-top: 14px; border: 1px solid var(--borda); border-radius: var(--raio-cartao); padding: 12px 14px; background: var(--branco); }
.fm .verif.ok { border-color: var(--verde, #2a7a3b); }
.fm .verif.mau { border-color: var(--terra); }
.fm .verif .rotulo { margin: 0 0 4px; }
.fm .verif table.tar td, .fm .verif table.tar th { white-space: normal; } .fm .verif table.tar td.ro, .fm .verif table.tar td.mau { white-space: nowrap; }   /* valores em € nunca partem de linha */
.fm .verif tr.abaixo td, .fm .verif tr.muito_acima td { color: var(--terra); }
.fm .verif .veredito { margin: 10px 0 0; font-size: 15px; font-weight: 500; }
.fm .verif.ok .veredito { color: var(--verde, #2a7a3b); }
.fm .verif.mau .veredito { color: var(--terra); }
/* Higiene dos dados: um cartão por grupo, uma linha por reserva */
.fm .hg-grupo { border: 1px solid var(--borda); border-radius: var(--raio-cartao); padding: 12px 14px; margin: 12px 0; }
.fm .hg-grupo h3 { margin: 0; display: flex; justify-content: space-between; gap: 10px; }
.fm .hg-grupo h3 span { color: var(--terra); font-weight: 400; white-space: nowrap; }
.fm .hg-grupo .afeta { font-size: 14px; color: var(--cinza); margin: 4px 0 0; }
.fm .hg-grupo .afeta b { font-weight: 400; color: var(--tinta); }
.fm .hg-linha { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--filete); font-size: 15px; }
.fm .hg-grupo .afeta + .hg-linha { margin-top: 10px; }
.fm .hg-linha a { text-decoration: none; color: var(--tinta); min-width: 0; }
.fm .hg-linha a b { color: var(--azul); font-weight: 400; }
.fm .hg-linha .x { color: var(--terra); font-size: 14px; }
.fm .hg-linha form { margin: 0; padding: 0; background: none; border: 0; flex: none; }
.fm .hg-linha form button { min-height: 36px; font-size: 14px; padding: 0 12px; border-radius: var(--raio); border: 1px solid var(--azul); color: var(--azul); background: var(--branco); white-space: nowrap; }
/* #159 (4/10) · «Apagar estas N linhas» no fim do grupo das linhas «Plataforma» do corte do Excel: botão de contorno em terra */
.fm .hg-apagar { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--filete); background: none; border-radius: 0; }
.fm .hg-apagar button { min-height: 40px; font-size: 15px; padding: 0 14px; border-radius: var(--raio); border: 1px solid var(--terra); color: var(--terra); background: var(--branco); white-space: nowrap; }
.fm .hg-apagar span { font-size: 14px; color: var(--cinza); }
/* dl.ficha com texto corrido (Dropbox, TOC): o valor por baixo do rótulo, à esquerda */
.fm dl.ficha { display: block; }
.fm dl.ficha dt { padding: 14px 0 2px; border-bottom: 0; font-size: 14px; font-weight: 400; }
.fm dl.ficha dd { text-align: left; padding: 0 0 14px; font-weight: 300; font-size: 15px; border-bottom: 1px solid var(--filete); overflow-wrap: anywhere; }
.fm dl.ficha dd:last-of-type { border-bottom: 0; }
.fm dl.ficha dd form { margin-top: 8px; }
.fm pre { font-size: 13px; white-space: pre-wrap; word-break: break-all; border: 1px solid var(--borda); padding: 10px 12px; border-radius: var(--raio); background: var(--fundo2); margin: 8px 0 0; }
.fm .cod { font-size: 14px; word-break: break-all; border: 1px solid var(--borda); padding: 10px 12px; border-radius: var(--raio); background: var(--fundo2); margin: 8px 0 0; font-family: ui-monospace, Menlo, monospace; }
/* escolhas por rádio (TOC): cada linha é um alvo de toque de 44 px */
.fm label.radio { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 0; min-height: 44px; font-size: 16px; color: var(--tinta); font-weight: 300; }
.fm label.radio input { width: 22px; height: 22px; margin: 0; accent-color: var(--azul); flex: none; }
/* ---------------------------------------------------------------- G4 · Email e Fatura (3/10) */
/* email.php e fatura_toc.php passam à moldura nova (filhas da reserva «‹ 2026_XX · Email/Fatura», classe .fm .ef) sem mudar
   de conteúdo. Os estilos inline das duas páginas vivem aqui. */
.ef textarea.ef-msg { min-height: 6rem; }
.ef iframe.ef-pre { display: block; width: 100%; height: 26rem; border: 1px solid var(--borda); border-radius: var(--raio-cartao); background: var(--branco); margin-top: 4px; }
.ef textarea.ef-wa { min-height: 18rem; font-size: 14px; background: var(--fundo2); }
.ef .aviso .ef-nota { font-size: 14px; color: var(--cinza); margin: 0; }
.ef .ef-total { font-size: 15px; margin: 4px 0 0; }
.ef .ef-total b { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ef .ef-total span { font-size: 14px; color: var(--cinza); }
.ef form .barra { margin-top: 12px; }
/* #123 (4/10) · «Enviar-me um ensaio» por baixo do «Enviar», de contorno, com a nota a seguir */
.ef .ef-ensaio { margin-top: 10px; width: 100%; }
/* pares de campos com rótulos de alturas diferentes (NIF/Email, CP/Localidade, Noites/Preço): as caixas alinham em baixo */
.ef .par > div { display: flex; flex-direction: column; justify-content: flex-end; }

/* ---------------------------------------------------------------- G4 · Entrar e Não encontrado (3/10) · login.php e nao_encontrado.php */
/* as duas páginas sem sessão (sem cabeçalho de página nem barra de baixo) deixam o estilo.css/etapa4.css: a marca como na página da
   equipa, ao centro, e os campos/botões do sistema; nada mais. O recuperar.php (irmão do login) usa o mesmo bloco. */
.app.entrada .ecra { padding-top: 10vh; max-width: 400px; margin: 0 auto; }
.app.entrada .marca { justify-content: center; text-align: center; padding: 0 0 18px; }
.app.entrada .marca .m b { font-size: 22px; font-weight: 500; }
.app.entrada h1 { font-size: 22px; font-weight: 500; margin: 12px 0 0; }
.app.entrada form { margin: 0; }
.app.entrada form > .botao { width: 100%; margin-top: 22px; }
.app.entrada form > .erro { margin-top: 14px; }
.app.entrada .feito { margin-top: 0; }
.app.entrada .esqueci { text-align: center; margin-top: 22px; }
.app.entrada .esqueci a { color: var(--azul); text-decoration: none; }
.app.entrada .sub.nota { margin-top: 26px; font-size: 14px; line-height: 1.5; }
.app.entrada a.botao { margin-top: 22px; width: 100%; }

/* ---------------------------------------------------------------- #61-b (3/10, noite) · as janelas do kpi.js no app.css */
/* O que o etapa4.css dava ao kpi.js (Cockpit: index.php; KPI: kpi.php; faixa das Avaliações) vive aqui, na cara da regra única: a
   janela é uma faixa fundo2 com as três caixas brancas de contorno (como a faixa das Avaliações, #136), o rótulo em caixa alta 13 cinza,
   «⇄» e «i» redondos de 38 px, a folha do «⇄» e a janela «i» são a .folha/.pop do sistema (z 80–85, por cima da barra). Com isto o
   index.php e o kpi.php deixam o estilo.css e o etapa4.css, e os remendos #129 (cockpit.css) e body.kpi-body (#136) saem. */
.cx { background: var(--fundo2); border-radius: var(--raio-cartao); padding: 14px; margin: 14px 0 10px; position: relative; }
.cx.kpi { padding-bottom: 62px; }
.cx * { min-width: 0; }
.cx .topo { position: static; height: auto; display: flex; align-items: flex-start; gap: 10px; padding: 0; border: 0; background: none;
            -webkit-backdrop-filter: none; backdrop-filter: none; z-index: auto; }
.cx .topo h2 { flex: 1; margin: 0; font-size: 17px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--tinta); line-height: 1.25; }
.cx h2 .n { display: block; font-size: 13px; color: var(--cinza); letter-spacing: .04em; text-transform: uppercase; font-weight: 400; margin-bottom: 2px; }
.cx .estrela { color: var(--ocre); font-size: 14px; }
.cx .d { font-size: 14px; color: var(--cinza); margin: 4px 0 12px; overflow-wrap: anywhere; }
.cx svg { width: 100%; max-width: 100%; display: block; touch-action: pan-y; }
.cx .leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--cinza); margin: 4px 0 6px; }
.cx .leg i { display: inline-block; width: 12px; height: 3px; margin-right: 6px; vertical-align: middle; }
.cx .cursor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.cx .cursor.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cx .cursor > div { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 10px 8px; font-size: 13px; color: var(--cinza); line-height: 1.3; overflow: hidden; }
.cx .cursor b { display: block; font-size: 20px; font-weight: 500; color: var(--tinta); margin: 4px 0 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.15; }
.cx .cursor b small { font-size: 13px; color: var(--cinza); font-weight: 300; }
.cx .cursor b.az { color: var(--azul); }
.cx .cursor b.oc { color: var(--ocre); }
.cx .cursor b.te { color: var(--terra); }
.cx .cursor.fixa > div { min-height: 4.3rem; }
.cx .cursor.fixa b { font-size: 18px; }
.cx .quando { font-size: 14px; color: var(--cinza); margin-bottom: 8px; font-variant-numeric: tabular-nums; min-height: 1.2rem; overflow-wrap: anywhere; }
.cx .quando b { color: var(--tinta); font-weight: 500; }
.cx .quando.fixa { min-height: 2.5rem; }
.cx .delta { display: block; font-weight: 500; font-size: 12px; color: var(--verde); line-height: 1.2; }
.cx .delta.down { color: var(--terra); }
.cx input[type=range] { width: 100%; height: 30px; margin: 6px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; accent-color: var(--azul); }
.cx .troca, .cx .info { width: 38px; height: 38px; border-radius: 19px; border: 1px solid var(--borda); background: var(--branco); color: var(--azul);
                        display: flex; align-items: center; justify-content: center; padding: 0; font-size: 16px; line-height: 1; flex: none; text-decoration: none; }
.cx .info { position: absolute; left: 14px; bottom: 12px; font-style: italic; font-weight: 500; }
.cx .troca:active, .cx .info:active { background: var(--azul-lav); }
.cx.vazia { border: 1px dashed var(--borda); background: var(--branco); text-align: center; padding: 20px 14px; }
.cx.vazia p { font-size: 15px; color: var(--cinza); margin: 4px 0 12px; }
.cx .breve { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; font-size: 15px; color: var(--cinza); }
.cx .breve b { color: var(--tinta); display: block; margin-bottom: 2px; font-weight: 400; }
.cx .aviso-ocre { background: var(--amarelo-caixa); border: 1px solid var(--amarelo-linha); border-radius: var(--raio); color: var(--tinta); font-size: 14px; padding: 10px 12px; margin: 0 0 10px; }
/* barras horizontais (antecedência, cancelamento, repetentes, avaliações por capítulo) */
.cx .hb { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 8px; }
.cx .hb-l { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 10px; align-items: center; font-size: 14px; }
.cx .hb-n { color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.cx .hb-n small { display: block; font-size: 13px; color: var(--cinza); font-weight: 300; }
.cx .hb-b { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; }
.cx .hb-b i { display: block; height: 8px; border-radius: 4px; background: var(--azul-cheio); min-width: 3px; }
.cx .hb-b i.b { background: var(--ocre); height: 6px; }
.cx .hb-b em { font-style: normal; font-size: 13px; color: var(--cinza); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx .hb-b em.oc { color: var(--ocre); }
.cx .mini { margin-top: 10px; border-top: 1px solid var(--filete); padding-top: 8px; }
.cx .mini .leg { margin: 0 0 4px; }
/* chips e lista da janela 21 (kpi_aval.js), iguais aos das Avaliações */
.cx .av-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.cx .av-chips button { border: 1px solid var(--borda); border-radius: 999px; padding: 0 12px; min-height: 36px; font-size: 14px; font-weight: 400; background: var(--branco); }
.cx .av-chips button.on { border-color: var(--azul); color: var(--azul); background: var(--azul-lav); }
.cx .av-lista { list-style: none; padding: 0; margin: 4px 0 0; font-size: 15px; }
.cx .av-lista li { padding: 8px 0; border-bottom: 1px solid var(--filete); }
.cx .av-lista li:last-child { border-bottom: 0; }
.cx .av-lista li small { color: var(--cinza); font-size: 14px; }
.rod-kpi { font-size: 13px; color: var(--cinza); text-align: center; margin-top: 10px; }
/* a folha do «⇄» (kpi.js e #112 no Cockpit): cabeçalho, grupos e opções dentro da .folha do sistema */
.folha .cab { position: static; padding: 6px 0 10px; border-bottom: 1px solid var(--filete); }
.folha .cab h3 { margin: 0; font-size: 18px; font-weight: 500; }
.folha .cab p { margin: 4px 0 0; font-size: 14px; color: var(--cinza); }
.folha .lista { padding: 4px 0 12px; }
.folha .lista .grupo { font-size: 13px; color: var(--cinza); letter-spacing: .04em; text-transform: uppercase; margin: 16px 0 6px; }
.folha .opc { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
              padding: 10px 12px; margin: 6px 0; color: var(--tinta); font: inherit; }
.folha .opc .t { flex: 1; }
.folha .opc .t b { display: block; font-weight: 400; font-size: 16px; }
.folha .opc .t > span { display: block; font-size: 14px; color: var(--cinza); }
.folha .opc .t b .estrela { display: inline; color: var(--ocre); font-size: 14px; }
.folha .opc .est { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--cinza); flex: none; }
.folha .opc.usada { opacity: .5; }
.folha .opc.usada .est { color: var(--azul); }
.folha .opc:disabled { cursor: default; }
.folha .fundo { display: flex; gap: 10px; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--filete); }
.folha .fundo .botao { flex: 1; }
/* a janela «i»: .pop/.cart/.x/.n/h3/h4 são as da janela do repetente; aqui só o texto corrido e a avaliação de hoje */
.pop .cart p { font-size: 15px; line-height: 1.45; margin: 4px 0; overflow-wrap: anywhere; }
.pop .cart .aval { border-left: 3px solid var(--verde); background: var(--fundo2); padding: 10px 12px; border-radius: 0 var(--raio) var(--raio) 0; margin-top: 6px; }
.pop .cart .aval.meh { border-color: var(--ocre); }
.pop .cart .aval.mau { border-color: var(--terra); }
.pop .cart .aval b { display: block; font-size: 16px; font-weight: 400; }
.pop .cart .aval span { font-size: 14px; color: var(--cinza); }
/* faixa do choque de datas (Cockpit, Etapa D), por cima dos mosaicos */
.faixa-choque { position: sticky; top: 0; z-index: 35; background: var(--terra); color: #fff; padding: 12px 14px; margin: 8px 0 12px;
                border-radius: var(--raio-cartao); font-size: 15px; box-shadow: 0 3px 12px rgba(184,98,60,.3); }
.faixa-choque b { display: block; font-size: 16px; margin-bottom: 4px; font-weight: 500; }
.faixa-choque a { display: block; color: #fff; text-decoration: underline; margin: 4px 0; line-height: 1.4; }
.faixa-choque span { display: block; font-size: 13px; opacity: .9; margin-top: 6px; }

/* ---------------------------------------------------------------- G4 · fecho (3/10) · visualizador de ficheiros (documento.php, comprovativo.php) */
/* moldura própria dos ficheiros (regra da secção 6): «‹ 2026_XX · nome · Partilhar» na barra do topo, o ficheiro por baixo, sem barra de baixo */
.app.doc .topo .titulo { font-weight: 300; font-size: 14px; color: var(--cinza); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app.doc .topo .partilhar { flex: none; min-height: 34px; padding: 0 12px; border: 1px solid var(--azul); border-radius: var(--raio); color: var(--azul);
                            font-size: 14px; font-weight: 400; display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.app.doc .topo .partilhar:active { background: var(--azul-lav); }
.app.doc .ecra { padding-top: 12px; }
.app.doc h1 { font-size: 20px; margin-top: 8px; }
.app.doc a.botao { margin-top: 16px; }
.doc-corpo img, .doc-corpo iframe, .doc-corpo canvas.pagina { display: block; width: 100%; height: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); }
.doc-corpo iframe { height: 78vh; }
.doc-corpo canvas.pagina { margin-bottom: 10px; }
.doc-corpo .sub { margin-top: 8px; }

/* ---------------------------------------------------------------- G4 · fecho (3/10) · PayPal (paypal.php, página pública do hóspede) */
/* as regras do estilo.css para esta página, com os tokens novos; texto, fotos e passos iguais (B6, aprovado 19/8) */
.app.pp .ecra { max-width: 560px; margin: 0 auto; padding-top: 8px; font-weight: 400; }
.app.pp .pp-voltar { margin: 8px 0 16px; }
.app.pp .pp-voltar a { color: var(--azul); text-decoration: none; font-size: 15px; }
.app.pp header.com-logo { padding: 20px 0 16px; border-bottom: 1px solid var(--filete); margin-bottom: 6px; }
.app.pp header.com-logo .logo { display: block; width: 100%; max-width: 300px; height: auto; }
.app.pp header.com-logo .empresa { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--cinza); margin: 8px 0 0 6px; }
.app.pp h2 { font-size: 17px; font-weight: 500; margin: 18px 0 2px; }
.app.pp h3 { font-size: 16px; font-weight: 500; margin: 0 0 6px; }
.app.pp .en-sub { font-size: 13px; font-style: italic; color: var(--apagado); margin: 2px 0 14px; }
.app.pp .en-sub.colada { margin-bottom: 12px; }
.app.pp .en-sub.sem-margem { margin: 0; }
.app.pp .en-sub.fim { margin-bottom: 0; }
.app.pp .en-inline { display: block; font-size: 13px; font-style: italic; font-weight: 300; color: var(--apagado); margin-top: 2px; }
.app.pp .pp-frase { font-size: 15px; line-height: 1.6; margin: 0 0 2px; }
.app.pp .pp-frase.nota { margin: 14px 0 0; font-size: 14px; }
.app.pp .pp-frase a, .app.pp .en-sub a { color: var(--azul); }
.app.pp .pp-comissoes { border: 1px solid var(--azul); border-radius: var(--raio-cartao); background: var(--azul-lav); padding: 16px 18px; margin: 20px 0 28px; }
.app.pp .pp-comissoes-titulo { font-weight: 500; font-size: 15px; margin: 0; }
.app.pp .pp-comissoes-grelha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.app.pp .pp-pct { font-size: 24px; font-weight: 500; color: var(--azul); font-variant-numeric: tabular-nums; }
.app.pp .pp-pct-rotulo { font-size: 13px; color: var(--cinza); }
.app.pp .pp-passo { display: flex; gap: 14px; align-items: flex-start; border-top: 1px solid var(--filete); padding: 18px 0; }
.app.pp .pp-num { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 16px; background: var(--azul-cheio); color: #fff; font-weight: 500;
                  display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.app.pp .pp-foto { display: block; width: 100%; max-width: 320px; height: auto; border: 1px solid var(--borda); border-radius: var(--raio); margin-top: 12px; }
.app.pp .rodape-pagina { border-top: 1px solid var(--filete); margin-top: 40px; padding-top: 16px; font-size: 13px; color: var(--cinza); line-height: 1.7; }
.app.pp .rodape-pagina a { color: var(--cinza); text-decoration: none; }
@media (max-width: 430px) { .app.pp .pp-comissoes-grelha { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- #64 · notificações push (Configuração) · 3/10/2026
   Só o que a secção «Notificações no iPhone» do definicoes.php precisa; os componentes são os do sistema (.caixa, .botao, .opcao). */
.fm .caixa.push-est { margin-top: 14px; align-items: center; cursor: pointer; }
.fm .caixa.push-est:active { background: var(--fundo2); }
.fm .caixa.push-est .tick { margin-top: 0; }
.fm .caixa.push-est > span:last-child { flex: 1; }
.fm .push-bt .botao { display: block; width: 100%; margin-top: 10px; }
.fm .push-bt .botao[hidden] { display: none; }
.fm .push-prefs .opcao { margin-top: 6px; min-height: 40px; }
.fm .push-prefs .opcao label { padding: 8px 0; }
.fm .push-prefs .opcao label small { display: block; color: var(--cinza); font-size: 14px; font-weight: 300; margin-top: 2px; }
.fm .push-prefs > .botao { margin-top: 18px; }
.fm .caixa.push-est:not(.marcada) .tick svg { visibility: hidden; }

/* ---------------------------------------------------------------- #145 · avisos no telemóvel da equipa · 4/10/2026
   equipa.php: o cartão «Avisos neste telemóvel» (primeiro cartão, decisão A) · equipa_lista.php: o interruptor por pessoa. */
.cartao.push-eq .pronta { margin-top: 10px; }
.cartao.push-eq .pronta .btn { width: 100%; }
.cartao.push-eq .pronta .btn + .btn { margin-top: 8px; }
.cartao.push-eq .pronta .sub { margin-top: 10px; }
.cartao.push-eq .pronta .btn[hidden] { display: none; }
.cartao.push-eq .nota-push { font-size: 15px; color: var(--azul); margin: 10px 0 0; font-weight: 400; min-height: 1em; }
.fm .cartao.plano form.push-op { margin: 0; padding: 0; background: none; border: 0; }
.fm .cartao.plano .opcao { margin: 8px 0 0; min-height: 40px; }
.fm .cartao.plano .opcao label { padding: 6px 0; }
.fm .cartao.plano .opcao label small { display: block; color: var(--cinza); font-size: 14px; font-weight: 300; margin-top: 2px; }
.fm .cartao.plano details.edit-eq { margin-top: 10px; }
.fm .cartao.plano details.edit-eq summary { padding: 6px 0; }
.fm .cartao.plano details.edit-eq label { margin-top: 12px; }
.fm .cartao.plano details.edit-eq form > .botao { margin-top: 14px; }

/* ---------------------------------------------------------------- #107 · Versão (… → Versão) · 4/10/2026
   O carimbo do deploy (caixa do sistema), a lista curta das versões e os ficheiros da pasta sql/ (#109), com o estado em chip. */
.fm.vs .caixa.vs-carimbo { display: block; margin-top: 14px; line-height: 1.5; }
.fm.vs .vs-carimbo b { color: var(--tinta); font-weight: 500; }
.fm.vs .vs-carimbo code { font-family: ui-monospace, Menlo, monospace; font-size: 14px; background: var(--fundo2); padding: 1px 6px; border-radius: 4px; }
.fm.vs .vs-lista { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 14px 0 0; font-size: 15px; }
.fm.vs .vs-lista dt { color: var(--cinza); }
.fm.vs .vs-lista dd { margin: 0; color: var(--tinta); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.fm.vs .vs-aplicar { margin-top: 14px; }
.fm.vs .vs-aplicar .botao { width: 100%; }
.fm.vs .vs-aplicar .sub { display: block; margin-top: 8px; }
.fm.vs .vs-emdia { margin-top: 12px; color: var(--verde); }
.fm.vs .vs-sql { border: 1px solid var(--borda); border-radius: var(--raio-cartao); background: var(--branco); padding: 12px 14px; margin-top: 12px; }
.fm.vs .vs-sql.pend { border-left: 2px solid var(--terra); border-radius: 0 var(--raio-cartao) var(--raio-cartao) 0; }
.fm.vs .vs-sql-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fm.vs .vs-sql-cab b { font-weight: 500; font-size: 16px; overflow-wrap: anywhere; font-family: ui-monospace, Menlo, monospace; }
.fm.vs .vs-sql-est { margin: 6px 0 0; font-size: 14px; color: var(--cinza); font-variant-numeric: tabular-nums; }
.fm.vs .vs-sql details { margin-top: 8px; }
.fm.vs .vs-sql summary { font-size: 15px; color: var(--azul); cursor: pointer; padding: 4px 0; }
.fm.vs .vs-sql pre.cod { white-space: pre-wrap; word-break: break-word; line-height: 1.45; max-height: 60vh; overflow: auto; }
.fm.vs .vs-marcar { margin-top: 10px; }
.fm.vs .vs-marcar button { border: 1px solid var(--borda); border-radius: 999px; background: var(--branco); color: var(--cinza); font-size: 14px; min-height: 36px; padding: 0 12px; }
.fm.vs .feito small { color: var(--verde-letra); }

/* ---------------------------------------------------------------- #173 · Higiene · «Está bem assim» · 5/10/2026
   Em cada linha, à direita, o botão pequeno de contorno cinza (ao lado do «PDF → Dropbox» quando o há); no fim da página a lista
   das marcadas com «Voltar a mostrar». */
.fm .hg-linha .hg-acoes { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex: none; }
.fm .hg-linha form.hg-ok button { border-color: var(--borda); color: var(--cinza); }
.fm .hg-marcadas .hg-linha a { color: var(--cinza); }
.fm .hg-marcadas .hg-linha a b { color: var(--azul); }
.fm .hg-marcadas .hg-linha .x { color: var(--cinza); }
.fm .hg-grupo .hg-impacto b { color: var(--terra); }
.fm .hg-grupo .hg-impacto.nenhum b { color: var(--verde); }   /* #173-a · «Nenhum nas contas»: decisão simples */
/* #175 (5/10) · «Marcar «está bem assim» as N anteriores a 11/ago/2026»: o mesmo botão cinza do «Está bem assim», em fila com a nota */
.fm .hg-lote { flex-wrap: wrap; }
.fm .hg-lote button { border-color: var(--borda); color: var(--cinza); white-space: normal; text-align: left; line-height: 1.25; padding: 8px 14px; }
.fm .hg-lote span { flex: 1 1 100%; }

/* ---------------------------------------------------------------- #180 (5/10) · o «…» arrumado por caixas, o texto de ajuda num «i» */
/* o «i» da barra do topo: o mesmo redondo do «i» dos gráficos (#61-b), à direita, onde as filhas tinham o espaço vazio */
.topo .info-bt { border: 1px solid var(--borda); background: var(--branco); width: 36px; height: 36px; border-radius: 18px; margin-left: 4px;
  font-style: italic; font-weight: 500; font-size: 17px; color: var(--azul); font-family: Georgia, "Times New Roman", serif; line-height: 1; padding: 0; }
.topo .info-bt span { position: relative; top: -1px; }
.topo .info-bt:active { background: var(--fundo2); }
.pop.info-pop .cart h4 { font-size: 13px; color: var(--cinza); letter-spacing: .04em; text-transform: uppercase; font-weight: 400; margin: 16px 0 2px; }
.pop.info-pop .cart h4:first-of-type { margin-top: 10px; }
.pop.info-pop .cart p { margin: 4px 0; }
.pop.info-pop .cart ul { margin: 2px 0 0; }
.pop.info-pop .cart li { padding: 6px 0; }
.pop.info-pop .cart code { font-size: 13px; background: var(--fundo2); padding: 1px 5px; border-radius: 4px; }
/* as caixas: o cartão da reserva (fechado; abre um de cada vez), com formulários e tabelas lá dentro */
.fm .caixas { margin-top: 12px; }
.fm .cartao.caixa-sec { margin: 10px 0; }
.fm .cartao.caixa-sec .cabc .s.quebra { white-space: normal; }
.fm .cartao.caixa-sec .dentro > *:first-child, .fm .cartao.caixa-sec .dentro > form:first-child > *:first-child { margin-top: 12px; }
.fm .cartao.caixa-sec .dentro > .rotulo:first-child, .fm .cartao.caixa-sec .dentro > form:first-child > .rotulo:first-child { margin-top: 14px; }
.fm .cartao.caixa-sec .dentro .vazio { margin-top: 12px; }
.fm .cartao.caixa-sec .dentro form + form { margin-top: 10px; }
.fm .cartao.caixa-sec .dentro .tar-scroll { margin-left: -14px; margin-right: -14px; padding: 0 14px; }
.fm .cartao.caixa-sec .dentro details { margin-top: 12px; }
.fm .cartao.caixa-sec .dentro .cartao.plano { margin: 10px 0 0; }
.fm .cartao.caixa-sec .dentro .cartao.plano:first-child { margin-top: 12px; }
.fm .cartao.caixa-sec .dentro .caixa { margin-top: 12px; }
.fm .cartao.caixa-sec .dentro .erro, .fm .cartao.caixa-sec .dentro .feito, .fm .cartao.caixa-sec .dentro .aviso { margin-top: 12px; }
.fm .cartao.caixa-sec .dentro > p.sub.nota:last-child { margin-bottom: 0; }
/* a Configuração, as Tarifas e os outros deixam de ter o h2 em caixa alta solto: o nome está no cabeçalho da caixa */
.fm .caixas h2 { display: none; }

/* ==========================================================================
   #188-a (5/10) · KPI: os chips dos anos e a caixa «Janelas KPI mais usadas» presos no topo, por baixo da barra
   «‹ Mais · KPI» (pedido do Diogo). O bloco rola com as janelas até encostar à barra e fica lá; a caixa abre dentro
   dele e, aberta, rola por dentro até 40 % do ecrã para nunca tapar as janelas todas. As âncoras #jN das janelas
   ganham margem para não ficarem por baixo do bloco.
   ========================================================================== */
.fm .kpi-cab { position: sticky; top: var(--topo); z-index: 40; background: var(--branco);
  margin: 0 calc(-1 * var(--lado)); padding: 0 var(--lado) 8px; border-bottom: 1px solid var(--filete); }
.fm .kpi-cab .anos { margin: 10px 0 8px; }
.fm .kpi-cab .caixas { margin-top: 0; }
.fm .kpi-cab .cartao.caixa-sec { margin: 0; }
.fm .kpi-cab .cartao.caixa-sec .dentro { max-height: 40vh; overflow: auto; -webkit-overflow-scrolling: touch; }
.fm .kpi-cab + .erro { margin-top: 12px; }
.fm #janelas { padding-top: 12px; }
.fm #janelas > * { scroll-margin-top: calc(var(--topo) + 150px); }