/* ===== Paleta/variáveis da área do cliente ===== */
.sfv-scope{
  --sfv-panel-bg: #C18056;                /* fundo do painel (contraste com cartão branco) */
  --sfv-panel-border: #e6ebf2;
  --sfv-text-strong: #ffffff;

  --space-1: 8px;
  --space-2: 25px;
  --space-3: 16px;
  --space-4: 20px;

  --sfv-red: #8b0000;
  --sfv-red-ring: rgba(255, 255, 255, 0.18);

  /* ===== Tokens específicos dos inputs (login) ===== */
  --sfv-input-bg:           #ffffff;              /* fundo do input */
  --sfv-input-text:         #0f172a;              /* texto digitado (preto) */
  --sfv-input-placeholder:  #94a3b8;              /* placeholder (cinza claro) */
  --sfv-input-border:       #cbd5e1;              /* borda padrão */
  --sfv-input-focus-border: #94a3b8;              /* borda no foco */
  --sfv-input-focus-ring:   rgba(148,163,184,.18);/* anel no foco */
}

/* ===== Painel (refino de contraste e acabamento) ===== */
.sfv-scope .sfv-client-wrap{
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 25px 25px 25px 25px;
  background: var(--sfv-panel-bg);
  border: 1px solid var(--sfv-panel-border);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
}

/* Título central no topo (com respiro melhor) */
.sfv-scope .sfv-title-center{
  margin: 0 0 var(--space-2);
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--sfv-text-strong);
}

/* Link “Sair” no canto sup. direito */
.sfv-scope .sfv-link-logout{
  position: absolute;
  top: 22px;
  right: 25px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  font-weight: 600;
  color: var(--sfv-text-strong);
  background: rgba(175, 2, 11, 0.836);
  color: #ffffff;
  border: 1px solid rgba(15,23,42,.18);
  border-radius: 10px;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, filter .15s ease;
}
.sfv-scope .sfv-link-logout:hover{
  background: rgba(228, 4, 15, 0.897);
  border-color: rgba(15,23,42,.25);
  filter: brightness(1.03);
}

/* ===== Ritmo e organização do conteúdo logado ===== */
#sfv-card-cliente{
  margin-top: 30px;
  margin-bottom: 30px;
  width: 100%;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.sfv-scope .sfv-actions{
  margin-top: var(--space-2);
  display: flex; gap: var(--space-2); align-items: center;
  width: 100%;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Botão vermelho escuro ===== */
.sfv-scope .sfv-cta{
  appearance: none;
  border: 1px solid var(--sfv-red);
  border-radius: 12px;
  padding: .72rem 1.06rem;
  min-width: 170px;
  font-size: .95rem; font-weight: 700; line-height: 1;
  cursor: pointer;
  background: var(--sfv-red);
  color: #fff;
  transition: filter .15s ease, transform .04s ease, box-shadow .2s ease;
}
.sfv-scope .sfv-cta:hover   { filter: brightness(1.03); }
.sfv-scope .sfv-cta:active  { transform: translateY(1px); }
.sfv-scope .sfv-cta:focus   { outline: none; box-shadow: 0 0 0 4px var(--sfv-red-ring); }
.sfv-scope .sfv-cta:disabled{ opacity: .65; cursor: not-allowed; }

/* ===== Login ===== */
.sfv-scope .sfv-login{ display: grid; gap: var(--space-3); }
.sfv-scope .sfv-field{ display: grid; gap: 6px; }
.sfv-scope .sfv-label{ font-size: .95rem; color: var(--sfv-text-strong); }

/* Inputs blindados (texto preto, placeholder cinza, fundo branco) */
.sfv-scope .sfv-input,
.sfv-scope input.sfv-input{
  width: 100%;
  border: 1px solid var(--sfv-input-border) !important;
  background: var(--sfv-input-bg) !important;
  color: var(--sfv-input-text) !important;
  border-radius: 12px;
  padding: .72rem .9rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  caret-color: var(--sfv-input-text);
}

/* Placeholder (cross-browser) */
.sfv-scope .sfv-input::placeholder{ color: var(--sfv-input-placeholder) !important; opacity:1 !important; }
.sfv-scope .sfv-input::-webkit-input-placeholder{ color: var(--sfv-input-placeholder) !important; opacity:1 !important; }
.sfv-scope .sfv-input::-moz-placeholder{ color: var(--sfv-input-placeholder) !important; opacity:1 !important; }
.sfv-scope .sfv-input:-ms-input-placeholder{ color: var(--sfv-input-placeholder) !important; opacity:1 !important; }
.sfv-scope .sfv-input::-ms-input-placeholder{ color: var(--sfv-input-placeholder) !important; opacity:1 !important; }

/* Foco consistente */
.sfv-scope .sfv-input:focus{
  background: #ffffff !important;
  color: var(--sfv-input-text) !important;
  border-color: var(--sfv-input-focus-border) !important;
  box-shadow: 0 0 0 4px var(--sfv-input-focus-ring) !important;
}

/* Autofill (Chrome/Safari) – remove amarelo e mantém texto preto */
.sfv-scope .sfv-input:-webkit-autofill,
.sfv-scope .sfv-input:-webkit-autofill:hover,
.sfv-scope .sfv-input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--sfv-input-text) !important;
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0px 1000px var(--sfv-input-bg) inset !important;
  border-color: var(--sfv-input-border) !important;
}

/* Estados opcionais */
.sfv-scope .sfv-input[readonly],
.sfv-scope .sfv-input:disabled{
  background: #f8fafc !important;
  color: #475569 !important;
  border-color: #e2e8f0 !important;
  cursor: not-allowed;
}

/* Erros */
.sfv-scope .sfv-erro{
  border: 1px solid #fecaca; background: #fef2f2; color: #991b1b;
  padding: .625rem .75rem; border-radius: 10px;
}

/* ===== Linha do botão + pill ===== */
.sfv-scope .sfv-actions-row{
  justify-content: flex-start;   /* botão à esquerda no desktop */
}

.sfv-scope .sfv-turno-pill{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.55);
  color: #0f172a;
  border-radius: 12px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}
.sfv-scope .sfv-turno-dot{ 
  opacity:.55; 
}

/* ===== Responsivo ===== */
@media (max-width: 520px){
  .sfv-scope .sfv-client-wrap{ padding: 18px 16px 18px; }

  /* "Sair" fixo no canto superior direito no mobile */
  .sfv-scope .sfv-link-logout{
    position: absolute;
    top: 18px;
    right: 16px;
    margin: 0;
  }

  /* equaliza margens e largura no mobile */
  #sfv-card-cliente{
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
    max-width: 100%;
  }

  /* empilha: PILL EM CIMA, BOTÃO EMBAIXO (full-width), espaçamentos iguais */
  .sfv-scope .sfv-actions,
  .sfv-scope .sfv-actions-row{
    max-width: 100%;
    display: flex;
    flex-direction: column;      /* empilhar */
    align-items: stretch;
    gap: var(--space-2);         /* espaços iguais entre itens */
  }

  /* pill ocupa toda a largura, acima do botão */
  .sfv-scope .sfv-turno-pill{
    order: 1;
    margin: 0;
    width: 100%;
    justify-content: center;     /* pode trocar para flex-start se preferir à esquerda */
  }

  /* botão full-width abaixo do pill */
  .sfv-scope .sfv-cta{
    order: 2;
    width: 100%;
    min-width: 0;
  }
}

/* opcional: telas ultra estreitas */
@media (max-width: 360px){
  .sfv-scope .sfv-turno-pill{ padding: 8px 10px; }
}