/* ===== Área do Cliente (core neutro mínimo) ===== */
/* Regra:
   - este arquivo cuida apenas da casca/base comum da Área do Cliente
   - não estiliza componente compartilhado
   - não estiliza Tela 1/Tela 2 por dentro
   - não encosta em card, fila, modal, botão, input ou auth visual
   - controla shell, largura, empilhamento e viewport estrutural
*/

.sfv-scope{
  --sfv-client-shell-maxw: 540px;
  --sfv-client-shell-pad-y: 20px;
  --sfv-client-shell-pad-x: 20px;

  /* viewport da área */
  --sfv-client-vh-offset: 112px;
  --sfv-client-vh-max: 980px;

  /* topo comum */
  --sfv-client-topbar-gap: 16px;
  --sfv-client-topbar-bottom: 18px;
  --sfv-client-topbar-btn-minw: 56px;
  --sfv-client-topbar-subtitle-gap: 6px;
  --sfv-client-topbar-maxw: 540px;

  /* empilhamento entre os 2 blocos da Tela 2 */
  --sfv-client-stack-gap: 12px;

  /* bloco fila virtual */
  --sfv-client-fila-shell-maxw: 540px;
  --sfv-client-fila-shell-pad-y: 18px;
  --sfv-client-fila-shell-pad-x: 18px;
  --sfv-client-fila-shell-title-gap: 12px;
}

/* ===== Wrapper geral da composição ===== */
.sfv-scope{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sfv-client-stack-gap);
}

/* ===== Casca-base + root da área ===== */
.sfv-scope #sfv-area-cliente.sfv-client-wrap{
  position: relative;
  width: 100%;
  max-width: var(--sfv-client-shell-maxw);
  margin: 0 auto;
  padding: var(--sfv-client-shell-pad-y) var(--sfv-client-shell-pad-x);
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  min-height: 0;

  background: var(--sfv-panel-bg, var(--sfv-surface, #fff));
  border: 1px solid var(--sfv-panel-border, var(--sfv-border, rgba(0,0,0,.12)));
  border-radius: var(--sfv-r12, 14px);
  box-shadow: var(--sfv-shadow-2, 0 12px 30px rgba(15,23,42,.08));
}

/* ===== Estados com viewport controlada ===== */
/* login / seleção / serviços: área fixa, scroll interno */
/* área do cliente (Tela 2): conteúdo natural em 2 blocos irmãos */
.sfv-scope #sfv-area-cliente.sfv-client-wrap--auth,
.sfv-scope #sfv-area-cliente.sfv-client-wrap--select,
.sfv-scope #sfv-area-cliente.sfv-client-wrap--servicos{
  height: min(calc(100dvh - var(--sfv-client-vh-offset)), var(--sfv-client-vh-max));
  max-height: min(calc(100dvh - var(--sfv-client-vh-offset)), var(--sfv-client-vh-max));
  overflow: hidden;
}

.sfv-scope #sfv-area-cliente.sfv-client-wrap--fila{
  height: auto;
  max-height: none;
  overflow: visible;
}

/* ===== Login ===== */
.sfv-scope .sfv-client-auth{
  width: 100%;
  min-width: 0;
}

/* ===== Topbar ===== */
.sfv-scope .sfv-client-topbar{
  width: 100%;
  max-width: var(--sfv-client-topbar-maxw);
  margin: 0 auto var(--sfv-client-topbar-bottom);

  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: var(--sfv-client-topbar-gap);

  flex: 0 0 auto;
  min-width: 0;
}

.sfv-scope .sfv-client-greeting{
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.sfv-scope .sfv-client-greeting__title{
  margin: 0;
  line-height: 1.05;
}

.sfv-scope .sfv-client-greeting__subtitle{
  margin: var(--sfv-client-topbar-subtitle-gap) 0 0;
}

.sfv-scope .sfv-client-topbar-actions{
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.sfv-scope .sfv-client-topbar-actions > .sfv-link-logout{
  min-width: var(--sfv-client-topbar-btn-minw);
  text-decoration: none;
}

/* ===== Wrapper base do conteúdo logado ===== */
.sfv-scope .sfv-client-body{
  width: 100%;
  min-width: 0;
  min-height: 0;
}

/* Tela 1 / Tela 2 reservada: viewport interna */
.sfv-scope .sfv-client-body--select,
.sfv-scope .sfv-client-body--servicos{
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Tela 2: conteúdo natural */
.sfv-scope .sfv-client-body--fila{
  display: block;
  overflow: visible;
}

/* ===== Telas ===== */
.sfv-scope .sfv-client-screen{
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.sfv-scope .sfv-client-screen--select,
.sfv-scope .sfv-client-screen--servicos{
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sfv-scope .sfv-client-screen--fila{
  display: block;
}

/* ===== Bloco irmão da fila (Tela 2) ===== */
.sfv-scope .sfv-client-fila-shell{
  width: 100%;
  max-width: var(--sfv-client-fila-shell-maxw);
  margin: 0 auto;
  box-sizing: border-box;
}

.sfv-scope .sfv-client-fila-shell__panel{
  width: 100%;
  max-width: 100%;
  padding: var(--sfv-client-fila-shell-pad-y) var(--sfv-client-fila-shell-pad-x);
  box-sizing: border-box;

  background: var(--sfv-panel-bg, var(--sfv-surface, #fff));
  border: 1px solid var(--sfv-panel-border, var(--sfv-border, rgba(0,0,0,.12)));
  border-radius: var(--sfv-r12, 14px);
  box-shadow: var(--sfv-shadow-2, 0 12px 30px rgba(15,23,42,.08));
}

.sfv-scope .sfv-client-fila-shell__head{
  margin-bottom: var(--sfv-client-fila-shell-title-gap);
}

.sfv-scope .sfv-client-fila-shell__title{
  margin: 0;
  color: var(--sfv-panel-title, var(--sfv-color-text-strong, #111827));
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}

.sfv-scope .sfv-client-fila-shell__body{
  width: 100%;
  min-width: 0;
}

/* ===== Ajuste estrutural do root da fila pública dentro do bloco 2 ===== */
/* Mantém o shortcode intacto e força a fila a ocupar toda a largura disponível do painel */
.sfv-scope .sfv-client-fila-shell__body > .sfv-scope{
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.sfv-scope .sfv-client-fila-shell__body > .sfv-scope > #sfv-public-fila,
.sfv-scope .sfv-client-fila-shell__body > .sfv-scope > .sfv-public-fila-root{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* =======================================================================
   Responsivo
   ======================================================================= */
@media (max-width: 640px){
  .sfv-scope{
    --sfv-client-shell-pad-y: 18px;
    --sfv-client-shell-pad-x: 16px;
    --sfv-client-vh-offset: 96px;

    --sfv-client-topbar-gap: 12px;
    --sfv-client-topbar-bottom: 16px;
    --sfv-client-topbar-btn-minw: 52px;
    --sfv-client-topbar-subtitle-gap: 4px;

    --sfv-client-stack-gap: 10px;
    --sfv-client-fila-shell-pad-y: 16px;
    --sfv-client-fila-shell-pad-x: 16px;
    --sfv-client-fila-shell-title-gap: 10px;
  }
}

@media (max-width: 520px){
  .sfv-scope{
    --sfv-client-shell-pad-y: 16px;
    --sfv-client-shell-pad-x: 14px;
    --sfv-client-vh-offset: 88px;

    --sfv-client-topbar-gap: 10px;
    --sfv-client-topbar-bottom: 14px;
    --sfv-client-topbar-btn-minw: 50px;
    --sfv-client-topbar-subtitle-gap: 4px;

    --sfv-client-stack-gap: 10px;
    --sfv-client-fila-shell-pad-y: 14px;
    --sfv-client-fila-shell-pad-x: 14px;
    --sfv-client-fila-shell-title-gap: 10px;
  }
}