/* assets/css/postos-selecao.css - componente de seleção partilhado: cartões de postos
   (planta/grelha), cartões de sala e barra de seleção. Usado por reserva.php (incl. o
   assistente "Ajude-me a escolher") e espaco.php. Só tokens do DS/Incuba (--color_*,
   --brand-*); sem azul. Linguagem de estados única (alternativa B):
     repouso -> hover (borda amarela fina + anel vazio) -> selecionado (borda amarela forte
     + halo + visto, e tinta/preenchimento) -> foco por teclado (anel branco/preto) -> bloqueado.
   O hover só existe em dispositivos com hover (@media (hover: hover)); em ecrãs táteis o
   estado selecionado tem de bastar sozinho (feedback imediato = :active). */

.postos-sel, .sel-card, .ps-barra {
  --ps-page: var(--brand-surface-dark);
  --ps-card: var(--brand-surface-dark-raised);
  --ps-card-2: var(--color_gray_800);
  --ps-line: var(--color_gray_700);
  --ps-text: var(--color_white);
  --ps-mute: var(--color_gray_300);
  --ps-mute-2: var(--color_gray_500);
  --ps-accent: var(--brand-accent);
  --ps-on-accent: var(--brand-on-accent);
  --ps-accent-strong: var(--color_yellow_600);
  --ps-ok: var(--color_success_400);
  --ps-ok-ring: var(--color_success_200);
  --ps-glow: rgba(255, 212, 81, .25);
  --ps-focus: var(--color_white);            /* foco: nunca amarelo (amarelo = escolhido) */
  --ps-hover-line: var(--color_yellow_400);  /* borda de hover (amarelo fino) */
}
body:not(.dark-mode) .postos-sel, body:not(.dark-mode) .sel-card, body:not(.dark-mode) .ps-barra {
  --ps-page: var(--color_gray_100);
  --ps-card: var(--brand-surface-light);
  --ps-card-2: var(--color_gray_200);
  --ps-line: var(--color_gray_300);
  --ps-text: var(--color_gray_800);
  --ps-mute: var(--color_gray_500);
  --ps-mute-2: var(--color_gray_400);
  --ps-accent-strong: var(--color_yellow_800);
  --ps-glow: rgba(180, 130, 0, .28);
  --ps-focus: var(--color_gray_900);
  --ps-hover-line: var(--color_yellow_800); /* sobre claro, o amarelo 400 quase não se vê */
}
.postos-sel { color: var(--ps-text); margin-bottom: 8px; }
.postos-sel, .postos-sel * { box-sizing: border-box; }

/* título da secção: igual ao dos cartões de espaço (.gra-card-informative .details .title:
   24px/700, gray_700 no claro e gray_300 no escuro) */
.ps-titulo { color: var(--color_gray_700); }
.dark-mode .ps-titulo { color: var(--color_gray_300); }

/* ---------- cartão de posto (base, planta e grelha) ---------- */
/* .ps-item agrupa o cartão selecionável (label) e o botão de detalhes, que é
   IRMÃO do label - assim abrir os detalhes nunca alterna a seleção. */
.postos-sel .ps-item { position: relative; display: flex; min-width: 0; }
.postos-sel .ps-cd {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-width: 0; min-height: 96px; margin: 0; padding: 34px 6px 10px;
  font: inherit; color: var(--ps-text); background: var(--ps-card);
  border: 1px solid var(--ps-line); border-radius: 12px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}
/* o número é o elemento principal do cartão (primeiro na ordem e na hierarquia) */
.postos-sel .ps-num { font-weight: 700; line-height: 1; font-size: clamp(1.125rem, 4.6vw, 1.625rem); text-align: center; white-space: nowrap; }
.postos-sel .ps-piso { font-size: .75rem; color: var(--ps-mute); text-align: center; }

/* estado no canto superior esquerdo: visto (selecionado), cadeado (bloqueado), anel vazio (hover) */
.postos-sel .ps-st, .sel-card .sel-badge { display: none; position: absolute; top: 9px; left: 9px; line-height: 1; align-items: center; justify-content: center; pointer-events: none; }
.postos-sel .ps-st i { font-size: 1rem; }

/* HOVER (B): borda amarela fina + anel vazio - convite a selecionar. Só com hover real. */
@media (hover: hover) {
  /* linha amarela fina por outline sobre a borda (mudar border-color no hover bloqueava a pintura no Chrome, tema claro) */
  .postos-sel .ps-cd:not(.ps-bloq):not(:has(input:checked)):hover { outline: 1px solid var(--ps-hover-line); outline-offset: -1px; }
  /* anel vazio: pseudo-elemento (não se alterna o ícone do visto) */
  .postos-sel .ps-cd:not(.ps-bloq):not(:has(input:checked)):hover::before { content: ""; position: absolute; top: 9px; left: 9px; width: 18px; height: 18px; border: 2px solid var(--ps-hover-line); border-radius: 50%; pointer-events: none; }
}
/* PRESSIONADO: o feedback imediato em ecrãs táteis */
.postos-sel .ps-cd:not(.ps-bloq):active { transform: scale(.985); }

/* detalhes: botão no canto superior direito do cartão (irmão do label), 36px; 44px em toque */
.postos-sel .ps-info,
.sel-card .ps-info {
  position: absolute; top: 2px; right: 2px; width: 36px; height: 36px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  font: inherit; color: var(--ps-mute); background: transparent; border: 0; border-radius: 50%; cursor: pointer;
}
.postos-sel .ps-info i, .postos-sel .ps-info i::before,
.sel-card .ps-info i, .sel-card .ps-info i::before { font-size: 1.5rem; line-height: 1; color: inherit; }
.postos-sel .ps-item:has(input:checked) .ps-info { color: var(--ps-on-accent); }
@media (hover: hover) {
  .postos-sel .ps-info:hover { color: var(--ps-text); background: var(--ps-card-2); }
  .postos-sel .ps-item:has(input:checked) .ps-info:hover { background: rgba(0, 0, 0, .12); }
}
.postos-sel .ps-info:focus-visible, .sel-card .ps-info:focus-visible { outline: 3px solid var(--ps-focus); outline-offset: 2px; }
@media (pointer: coarse) { .postos-sel .ps-info { width: 44px; height: 44px; top: 0; right: 0; } }

/* FOCO POR TECLADO: anel exterior branco (escuro) / preto (claro); visível sobre repouso e sobre selecionado */
.postos-sel .ps-cd:has(input:focus-visible) { outline: 3px solid var(--ps-focus); outline-offset: 4px; }

/* SELECIONADO: preenchimento amarelo + visto + halo */
.postos-sel .ps-cd:has(input:checked) { background: var(--ps-accent); color: var(--ps-on-accent); border: 2px solid var(--ps-accent-strong); box-shadow: 0 0 0 4px var(--ps-glow); }
.postos-sel .ps-cd:has(input:checked) .ps-st { display: inline-flex; }
.postos-sel .ps-cd:has(input:checked) .ps-st i, .postos-sel .ps-cd:has(input:checked) .ps-st i::before { color: var(--ps-on-accent); }
.postos-sel .ps-cd:has(input:checked) .ps-piso { color: var(--ps-on-accent); }
.postos-sel .ps-cd:has(input:checked) .ps-chair { background: var(--ps-on-accent); }
.postos-sel .ps-cd:has(input:checked) .ps-mons i { background: transparent; border-color: var(--ps-on-accent); }

/* BLOQUEADO (apenas pessoal interno) */
.postos-sel .ps-cd.ps-bloq { cursor: not-allowed; background: var(--ps-card-2); border-color: transparent; color: var(--ps-mute-2); }
.postos-sel .ps-cd.ps-bloq .ps-num { text-decoration: line-through; text-decoration-thickness: 2px; }
.postos-sel .ps-cd.ps-bloq .ps-st { display: inline-flex; color: var(--ps-mute-2); }
.postos-sel .ps-cd.ps-bloq .ps-chair, .postos-sel .ps-cd.ps-bloq .ps-mons i { opacity: .4; }

/* ---------- grelha simples (sem planta confirmada) ---------- */
.postos-sel .ps-grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.postos-sel .ps-grelha .ps-cd { justify-content: center; min-height: 96px; padding-top: 34px; }
.postos-sel .ps-grelha .ps-num { font-size: 1rem; line-height: 1.25; }

/* ---------- planta ---------- */
.postos-sel .ps-sala { --gap: clamp(8px, 3.4vw, 44px); --divw: clamp(8px, 1.8vw, 12px); }
.postos-sel .ps-faixa { display: flex; align-items: center; justify-content: center; height: 30px; background: var(--ps-card-2); font-size: .8125rem; font-weight: 700; color: var(--ps-mute); }
.postos-sel .ps-parede { border-radius: 8px 8px 0 0; margin-bottom: 12px; }
.postos-sel .ps-corredor { height: 40px; margin-top: 12px; border-radius: 0 0 8px 8px; border-top: 2px dashed var(--ps-line); }
.postos-sel .ps-ilhas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); position: relative; }
.postos-sel .ps-ilha { position: relative; min-width: 0; }
.postos-sel .ps-ilha + .ps-ilha::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); border-left: 2px dotted var(--ps-mute-2); }
.postos-sel .ps-ilha-nome { margin: 0 0 6px; text-align: center; font-size: .8125rem; font-weight: 700; color: var(--ps-text); }
.postos-sel .ps-corpo { display: grid; grid-template-columns: minmax(0, 1fr) var(--divw) minmax(0, 1fr); }
.postos-sel .ps-col { display: grid; gap: 6px; align-content: stretch; min-width: 0; }
.postos-sel .ps-vdiv { background: var(--ps-ok); border-radius: 4px; box-shadow: 0 0 0 1.5px var(--ps-ok-ring); margin: 0 3px; }

/* mobiliário, DEPOIS do número: cadeira no extremo exterior da ilha e os dois
   monitores do lado da divisória. Coluna esquerda: cadeira | monitores (para a
   divisória, à direita); coluna direita espelhada. */
.postos-sel--planta .ps-cd { flex-direction: row; flex-wrap: nowrap; gap: 10px; padding: 34px 6px 8px; min-height: 96px; align-items: center; }
.postos-sel .ps-mob { flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; }
.postos-sel .ps-dir .ps-mob { flex-direction: row-reverse; }
/* coluna direita espelhada por inteiro: divisória | monitores cadeira número */
.postos-sel--planta .ps-dir .ps-cd { flex-direction: row-reverse; }
/* cadeira: barra rectangular simples, mais baixa que os dois monitores juntos */
.postos-sel .ps-chair { flex: none; width: 8px; height: 16px; border-radius: 3px; background: var(--ps-mute-2); }
.postos-sel .ps-mons { flex: none; display: flex; flex-direction: column; gap: 2px; }
.postos-sel .ps-mons i { display: block; width: 7px; height: 16px; border-radius: 2px; background: var(--ps-card-2); border: 1px solid var(--ps-mute-2); }
/* os dois monitores são iguais e ficam um por baixo do outro, cada um com a linha
   (o ecrã) virada para o lado da divisória */
.postos-sel .ps-esq .ps-mons i { border-right: 2px solid var(--ps-mute); }
.postos-sel .ps-dir .ps-mons i { border-left: 2px solid var(--ps-mute); }
.postos-sel .ps-cd:has(input:checked) .ps-mons i { border-left-color: var(--ps-on-accent); border-right-color: var(--ps-on-accent); }

/* ≤ 640px (M1): ilhas EMPILHADAS, cada uma a toda a largura com 2 colunas - os cartões
   mantêm o tamanho de desktop (número, mobiliário, alvos de 44px) em vez de encolherem. */
@media (max-width: 640px) {
  .postos-sel .ps-ilhas { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .postos-sel .ps-ilha + .ps-ilha::before { content: none; }
  .postos-sel .ps-sala { --divw: 10px; }
  .postos-sel .ps-ilha-nome { font-size: .875rem; }
  .postos-sel .ps-num { font-size: 1.625rem; }
  .postos-sel .ps-info { width: 44px; height: 44px; top: 0; right: 0; }
}
@media (prefers-reduced-motion: reduce) { .postos-sel .ps-cd, .sel-card { transition: none; } .postos-sel .ps-cd:active { transform: none; } }

/* ======================================================================
   Cartão de sala/espaço (reserva.php, espaco.php e assistente) - vertical, imagem no topo.
   <div class="gra-card-informative card-vertical sel-card" data-selecionavel>
     <input class="visually-hidden js-espaco-checkbox"> + <label class="sel-hit"> (cobre o cartão)
     <span class="sel-badge"> + <button class="ps-info ps-info--foto"> (irmão, nunca dentro do label)
   Reutiliza gra-card-informative; só acrescenta estados (o DS não tem cartão selecionável).
   ====================================================================== */
.gra-card-informative.sel-card { position: relative; padding: 24px; border: 1px solid var(--ps-line); transition: border-color .15s, box-shadow .15s, background .15s, transform .1s; }
/* imagem quadrada (1:1), centrada; a caixa nunca passa da largura do cartão */
.gra-card-informative.sel-card.card-vertical .image img { min-height: 0; max-height: none; height: auto; aspect-ratio: 1 / 1; width: 100%; object-fit: cover; object-position: center; border-radius: 8px; display: block; }
.sel-card .sel-hit { position: absolute; inset: 0; z-index: 1; margin: 0; border-radius: inherit; cursor: pointer; }
.sel-card .meta i, .sel-card .meta i::before { color: var(--ps-accent); }
body:not(.dark-mode) .sel-card .meta i, body:not(.dark-mode) .sel-card .meta i::before { color: var(--brand-text-on-light); }

.sel-card .sel-badge { top: 34px; left: 34px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; }
.sel-card .sel-badge i { font-size: 20px; line-height: 1; }

/* detalhes sobre a fotografia (canto superior direito da imagem) */
.sel-card .ps-info--foto { top: 32px; right: 32px; z-index: 2; width: 44px; height: 44px; color: #fff; background: rgba(0, 0, 0, .72); border: 1px solid rgba(255, 255, 255, .45); }
body:not(.dark-mode) .sel-card .ps-info--foto { color: var(--color_gray_900); background: rgba(255, 255, 255, .92); border-color: var(--color_gray_400); }
@media (hover: hover) { .sel-card .ps-info--foto:hover { box-shadow: 0 0 0 2px var(--ps-focus); } }

/* HOVER (B) */
@media (hover: hover) {
  .sel-card[data-selecionavel]:not(:has(input:checked)):hover { outline: 1px solid var(--ps-hover-line); outline-offset: -1px; }
  .sel-card[data-selecionavel]:not(:has(input:checked)):hover::before { content: ""; position: absolute; top: 34px; left: 34px; z-index: 2; width: 28px; height: 28px; border: 2px solid var(--ps-hover-line); border-radius: 50%; pointer-events: none; }
}
.sel-card[data-selecionavel]:active { transform: scale(.985); }
/* SELECIONADO */
.gra-card-informative.sel-card:has(input:checked) { border: 2px solid var(--ps-accent); padding: 23px; box-shadow: 0 0 0 4px var(--ps-glow); }
/* tinta amarela suave sobre o fundo do DS (gradiente de uma cor: sem tocar no background-color nem usar color-mix, que bloqueou a pintura no Chrome) */
body.dark-mode .gra-card-informative.sel-card:has(input:checked) { background-image: linear-gradient(rgba(255, 212, 81, .14), rgba(255, 212, 81, .14)); }
body:not(.dark-mode) .gra-card-informative.sel-card:has(input:checked) { border-color: var(--ps-accent-strong); }
.sel-card:has(input:checked) .sel-badge { display: inline-flex; background: var(--ps-accent); }
.sel-card:has(input:checked) .sel-badge i, .sel-card:has(input:checked) .sel-badge i::before { color: var(--ps-on-accent); }
/* FOCO */
.sel-card:has(input:focus-visible) { outline: 3px solid var(--ps-focus); outline-offset: 4px; }
/* BLOQUEADO: variante .disabled do DS + cadeado; sem hover; detalhes continuam acessíveis */
.sel-card.is-bloq { cursor: not-allowed; }
body:not(.dark-mode) .gra-card-informative.sel-card.is-bloq { background-color: var(--color_gray_200) !important; }
body.dark-mode .gra-card-informative.sel-card.is-bloq { background-color: var(--color_gray_800) !important; }
.sel-card.is-bloq .image img { opacity: .45; }
.sel-card.is-bloq .details .title, .sel-card.is-bloq .meta { color: var(--color_gray_500); }
.sel-card.is-bloq .sel-badge { display: inline-flex; background: var(--color_gray_700); }
.sel-card.is-bloq .sel-badge i, .sel-card.is-bloq .sel-badge i::before { color: var(--color_gray_100); }
body:not(.dark-mode) .sel-card.is-bloq .sel-badge { background: var(--color_gray_400); }
body:not(.dark-mode) .sel-card.is-bloq .sel-badge i, body:not(.dark-mode) .sel-card.is-bloq .sel-badge i::before { color: var(--color_gray_900); }
.sel-card .badges .gra-tag { flex: none; }
.sel-card .badges .gra-tag.primary.info { color: var(--ps-on-accent); } /* texto escuro sobre o amarelo (no tema claro o DS dá branco: ilegível) */

/* assistente: bloco "Porque sugerimos" (a única parte própria do assistente) */
.sel-card .rec { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ps-line); font-size: .875rem; }
.sel-card .rec .tit { font-weight: 700; margin-bottom: 6px; }
.sel-card .rec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sel-card .rec li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.35; }
.sel-card .rec li i { flex: none; margin-top: 1px; }
.sel-card .rec li.ok i, .sel-card .rec li.ok i::before { color: var(--ps-ok); }
.sel-card .rec li.aviso i, .sel-card .rec li.aviso i::before { color: var(--ps-accent); }
body:not(.dark-mode) .sel-card .rec li.aviso i, body:not(.dark-mode) .sel-card .rec li.aviso i::before { color: var(--brand-text-on-light); }
body:not(.dark-mode) .sel-card .rec li.ok i, body:not(.dark-mode) .sel-card .rec li.ok i::before { color: var(--color_success_600); }

/* ---------- barra única de seleção/avanço (sticky ao fundo) ---------- */
/* Sempre visível: com 0 espaços mostra a instrução; com 1+ mostra a contagem. Cola-se ao
   fundo do ecrã enquanto o fim da lista estiver abaixo. */
.ps-barra { position: sticky; bottom: 8px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  margin: 12px 0 8px; padding: 10px 16px; box-shadow: 0 -2px 14px rgba(0, 0, 0, .28); }
.ps-barra .ps-barra-txt { display: flex; flex-direction: column; min-width: 0; }
.ps-barra .ps-barra-n { font-weight: 700; }
.ps-barra .ps-barra-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* «Continuar» desativado (sem escolha): o override da marca pinta .btn-primary de amarelo com !important,
   por isso o estado desativado repete o prefixo de especificidade do DS/Incuba */
body:not(.templateDetailsBackoffice):not(.bo-login-body) .ps-barra .gra-btn.btn-primary[disabled] { background-color: var(--color_gray_700) !important; border-color: var(--color_gray_700) !important; color: var(--color_gray_300) !important; cursor: not-allowed; }
body:not(.templateDetailsBackoffice):not(.bo-login-body):not(.dark-mode) .ps-barra .gra-btn.btn-primary[disabled] { background-color: var(--color_gray_200) !important; border-color: var(--color_gray_200) !important; color: var(--color_gray_500) !important; }
body:not(.templateDetailsBackoffice):not(.bo-login-body):not(.dark-mode) .ps-barra .gra-text-blue-800 { color: var(--brand-text-on-light) !important; } /* texto da barra legível sobre o fundo claro */
/* barra do assistente: dentro do painel, não cola ao ecrã */
.ps-barra--painel { position: static; box-shadow: none; margin: 12px 0 0; }
@media (max-width: 640px) {
  .ps-barra { padding: 8px 56px 8px 12px; bottom: 6px; gap: 6px 12px; } /* folga à direita para o botão flutuante «voltar ao topo» */
  .ps-barra .ps-barra-n { font-size: .875rem; }
  .ps-barra .gra-btn { flex: 1 1 auto; padding-top: 8px; padding-bottom: 8px; }
  .ps-barra .ps-barra-acoes { flex: 1 1 auto; }
}

/* Grelha de equipamentos do Passo 3 (reserva.php): 2 colunas em mobile (min. 140px por item), colunas de 200px a partir de 576px. */
.reserva-equip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
@media (min-width: 576px) { .reserva-equip-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }