/* ============================================================
 * styles/theme-v2.css — identidade visual da Fase 5
 * ------------------------------------------------------------
 * Fundo off-white, dourado só como destaque (nunca preenchimento),
 * texto escuro, visual leve e responsivo. NÃO reaproveita
 * styles.css do v1 (tema escuro) — é uma folha nova, isolada, para
 * não arriscar a aparência do app v1 em produção.
 *
 * Namespace: toda classe começa com `v2-` para nunca colidir com
 * `styles.css` do v1, mesmo que algum dia os dois acabem carregados
 * na mesma página por engano.
 * ============================================================ */

:root {
  --v2-bg: #faf8f4;
  --v2-surface: #ffffff;
  --v2-border: #ece5d8;
  --v2-text: #2a241c;
  --v2-text-muted: #7a7266;
  --v2-gold: #c9a227;
  --v2-gold-dark: #a3811c;
  --v2-gold-soft: #f6ecc9;
  --v2-danger: #b3402f;
  --v2-danger-soft: #f7e4e0;
  --v2-success: #4c7a4c;
  --v2-radius: 14px;
  --v2-radius-sm: 9px;
  --v2-shadow: 0 1px 3px rgba(42, 36, 28, 0.06), 0 1px 2px rgba(42, 36, 28, 0.04);
  --v2-nav-height: 62px;
  --v2-sidebar-width: 232px;
}

* { box-sizing: border-box; }

/*
 * CORREÇÃO (item 1/3 do pedido de melhorias do catálogo/painel —
 * "painel se comporta como se desse para dar pinch-zoom / overflow
 * horizontal efetivo"): a viewport meta tag do index-v2.html já
 * estava correta (width=device-width, initial-scale=1) — o problema
 * real é CSS: linhas de flexbox sem `min-width: 0` assumem
 * `min-width: auto` por padrão, ou seja, NUNCA encolhem além do
 * conteúdo (um nome de cliente comprido, um e-mail longo em
 * Configurações etc.), empurrando o container inteiro para além da
 * largura da tela — isso é o que "parece" precisar de pinch-zoom
 * (na real, é overflow horizontal de verdade). `html, body` com
 * `overflow-x: hidden` é o último cinto de segurança (nunca deveria
 * ser necessário se cada container encolher direito, mas evita
 * qualquer rolagem lateral acidental residual); `min-width: 0` nos
 * containers flex abaixo é a correção de verdade.
 */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* FASE 11, seção 6 — mesma segunda camada de defesa do catalogo-v2.css: garante que um eventual link automático do navegador (telefone/data) herde a cor do texto em vez do azul padrão. */
a { color: inherit; text-decoration: none; }

img, video {
  max-width: 100%;
  height: auto;
}

.v2-root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--v2-bg);
  color: var(--v2-text);
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
}

/* ---------------- Login ---------------- */

.v2-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, #fffdf8 0%, var(--v2-bg) 100%);
}

.v2-login-card {
  width: 100%;
  max-width: 360px;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  box-shadow: var(--v2-shadow);
  padding: 32px 28px;
}

.v2-login-brand { text-align: center; margin-bottom: 22px; }
.v2-login-brand .v2-spark { font-size: 30px; }
.v2-login-brand h1 { font-size: 19px; margin: 6px 0 2px; font-weight: 600; }
.v2-login-brand p { font-size: 13px; color: var(--v2-text-muted); margin: 0; }

/* ---------------- Shell (header + nav + conteúdo) ---------------- */

/*
 * SEÇÃO 2 (fase anterior) / ITEM 23 (nova rodada) — cabeçalho do painel
 * ADM modernizado outra vez: o gradiente antigo (creme quase branco,
 * `#fdf6e3` → `#f3e2b8`) era claro/discreto DEMAIS — visualmente quase
 * imperceptível, o que motivou o pedido explícito de um gradiente MAIS
 * FORTE. A barra externa (`.v2-header`) continua neutra/clara (fundo da
 * página, nunca dourado saturado atrás de tudo); o gradiente forte de
 * verdade agora vive no bloco de marca (`.v2-header-brand`) — nome da
 * empresa + "Painel administrativo" dentro de um cartão com borda
 * arredondada e gradiente dourado saturado, texto branco por cima
 * (contraste alto), exatamente como o layout de exemplo pedido. Quem
 * está logada/o papel dela viraram informação secundária ao lado do
 * botão "Sair" (`.v2-header-user`) — nunca removidos, só reposicionados
 * para abrir espaço ao bloco de marca. Funciona igual em mobile e
 * desktop, sem media query.
 */
.v2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--v2-bg, #fff);
  border-bottom: 1px solid var(--v2-border);
  position: sticky;
  top: 0;
  z-index: 5;
  min-width: 0;
}

.v2-header-brand {
  background: linear-gradient(120deg, var(--v2-gold) 0%, var(--v2-gold-dark) 100%);
  border: 1px solid var(--v2-gold-dark);
  border-radius: 14px;
  padding: 8px 16px;
  min-width: 0;
  box-shadow: 0 2px 10px rgba(163, 129, 28, 0.25);
}

.v2-header-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.v2-header-sub { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.88); overflow-wrap: anywhere; letter-spacing: 0.02em; }
.v2-header-brand { min-width: 0; }

.v2-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.v2-header-user { font-size: 12px; color: var(--v2-text-muted); overflow-wrap: anywhere; text-align: right; max-width: 140px; }
@media (max-width: 480px) {
  /* Item 21 — em telas bem estreitas, o nome de quem está logada some
     (cabe só empresa + botão Sair); o papel dela continua acessível em
     Configurações, então não é perda de informação essencial. */
  .v2-header-user { display: none; }
}

.v2-layout {
  display: flex;
  min-height: 100vh;
  max-width: 100%;
}

.v2-sidebar {
  width: var(--v2-sidebar-width);
  flex-shrink: 0;
  background: var(--v2-surface);
  border-right: 1px solid var(--v2-border);
  padding: 18px 10px;
  display: none; /* aparece a partir de --breakpoint-desktop, ver media query abaixo */
}

.v2-sidebar .v2-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--v2-radius-sm);
  border: none;
  background: transparent;
  color: var(--v2-text);
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 2px;
}
.v2-sidebar .v2-nav-item:hover { background: var(--v2-gold-soft); }
.v2-sidebar .v2-nav-item.v2-nav-active {
  background: var(--v2-gold-soft);
  color: var(--v2-gold-dark);
  font-weight: 600;
}

.v2-main { flex: 1; min-width: 0; max-width: 100%; display: flex; flex-direction: column; }

.v2-content {
  padding: 16px 16px calc(var(--v2-nav-height) + 24px);
  max-width: 880px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
}

/* Navegação inferior (mobile) */
.v2-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  overflow-x: auto;
  background: var(--v2-surface);
  border-top: 1px solid var(--v2-border);
  height: var(--v2-nav-height);
  z-index: 5;
}

.v2-bottom-nav .v2-nav-item {
  flex: 1 0 auto;
  min-width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  background: transparent;
  font-size: 11px;
  color: var(--v2-text-muted);
  padding: 6px 4px;
}
.v2-bottom-nav .v2-nav-item.v2-nav-active { color: var(--v2-gold-dark); font-weight: 600; }
.v2-bottom-nav .v2-nav-icon { font-size: 18px; }

@media (min-width: 860px) {
  .v2-sidebar { display: block; }
  .v2-bottom-nav { display: none; }
  .v2-content { padding: 24px 32px; max-width: 960px; margin: 0; }
}

/* ---------------- Componentes genéricos ---------------- */

.v2-section-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--v2-text-muted);
  margin: 22px 0 10px;
}
.v2-section-title:first-child { margin-top: 0; }

/* FASE 11, seção 11 — título de grupo (agrupamento visual de serviços por categoria dentro do painel; nunca muda a ordem real usada pelo catálogo público). */
.v2-services-group-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--v2-gold-dark);
  margin: 18px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--v2-border);
}
.v2-services-group-title:first-child { margin-top: 0; }

/*
 * SEÇÕES 1/3/6/31 desta atualização — cards da Agenda (e de Clientes,
 * Profissionais, Serviços, Custos — todos reaproveitam esta mesma
 * classe) reorganizados para mobile: `flex-wrap: wrap` deixa o bloco
 * de status/ações cair para uma segunda linha SÓ quando não cabe ao
 * lado das informações (nunca força um empilhamento desnecessário em
 * telas largas o suficiente); `min-width: 0` nos dois blocos filhos é
 * a correção do overflow horizontal em si — sem isso, um nome de
 * cliente comprido ou várias linhas de texto empurram o card (e a
 * página inteira) para além da largura da tela. O nome da profissional
 * continua sempre visível (nunca removido do card — só reflui de
 * lugar quando o espaço aperta).
 */
.v2-card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  max-width: 100%;
}
.v2-card > * { min-width: 0; }
.v2-card > *:first-child { flex: 1 1 200px; overflow-wrap: anywhere; }
.v2-card > *:last-child { flex: 0 1 auto; }

/*
 * Item 25 (nova rodada) — cabeçalho "AGENDA" com o mesmo tratamento visual
 * do cabeçalho do painel (item 23): bloco próprio, borda arredondada,
 * gradiente dourado saturado, texto forte em branco. "Próximos
 * agendamentos" vira um subtítulo pequeno logo abaixo, nunca mais do
 * mesmo tamanho/peso do bloco "AGENDA".
 */
.v2-agenda-header {
  background: linear-gradient(120deg, var(--v2-gold) 0%, var(--v2-gold-dark) 100%);
  border: 1px solid var(--v2-gold-dark);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 4px;
  box-shadow: 0 2px 10px rgba(163, 129, 28, 0.25);
}
.v2-agenda-header-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.v2-agenda-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-text-muted);
  margin: 14px 0 10px;
}

/*
 * Item 25 (nova rodada) — card do agendamento reorganizado: nome da
 * cliente em destaque + selo de status sempre juntos no topo (nunca
 * escondidos rolando a tela), informações secundárias (profissional,
 * serviço, preço, data/horário) em linhas próprias abaixo, e os botões
 * de ação numa faixa final que já quebra em várias linhas no celular
 * (herdado de `.v2-row-gap`) — nunca estoura a largura da tela.
 */
/*
 * Item 3 (nova rodada) — BUG REAL: a linha/borda que separa um
 * agendamento do próximo ficava quase invisível — `--v2-border`
 * (#ece5d8, um bege bem claro) sobre `--v2-surface` (#fff) tem
 * contraste muito baixo (diferença de ~20 por canal de cor), fácil de
 * "desaparecer" dependendo da tela/iluminação — foi exatamente o que
 * as fotos anexadas mostraram. Corrigido especificamente para o card
 * de agendamento (onde vários itens ficam em sequência numa lista, e
 * a separação entre eles importa mais do que num card isolado): borda
 * mais escura/contrastada + uma sombra suave, para a separação ficar
 * inconfundível em qualquer tela.
 */
.v2-appointment-card {
  background: var(--v2-surface);
  border: 1px solid #d8ccb4;
  border-radius: var(--v2-radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 100%;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 4px rgba(42, 36, 28, 0.08);
}
.v2-appointment-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.v2-appointment-client { font-size: 15px; font-weight: 700; color: var(--v2-text); overflow-wrap: anywhere; }
.v2-appointment-professional { font-weight: 600; font-size: 13px; }
.v2-appointment-actions { margin-top: 8px; }

.v2-form-card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  max-width: 100%;
  min-width: 0;
}

.v2-input, .v2-select {
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--v2-radius-sm);
  border: 1px solid var(--v2-border);
  background: #fff;
  color: var(--v2-text);
  /* FASE 11, seção 26 — BUG REAL: "zoom de pinça" indesejado no painel
     ADM no celular. Diagnóstico correto (não é o viewport — já estava
     certo, ver <meta name="viewport"> em index-v2.html): o Safari/Chrome
     no iOS aplica zoom AUTOMÁTICO da página inteira ao focar qualquer
     campo (input/select/textarea) com `font-size` computado MENOR que
     16px — é assim que o navegador "ajuda" a evitar texto ilegível, mas
     o efeito colateral é exatamente o zoom que a admin queria evitar.
     Correção estrutural (não é desabilitar zoom no viewport, o que
     prejudicaria acessibilidade — pedido explícito desta fase): manter
     16px aqui, o único ponto de estilo de todos os campos do painel. */
  font-size: 16px;
}
.v2-input:focus, .v2-select:focus { outline: 2px solid var(--v2-gold); outline-offset: 1px; }

.v2-row-gap { display: flex; gap: 8px; flex-wrap: wrap; max-width: 100%; }
.v2-row-gap > * { min-width: 0; }

.v2-btn-gold, .v2-btn-outline, .v2-btn-danger {
  border: none;
  border-radius: var(--v2-radius-sm);
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.08s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.v2-btn-gold {
  background: linear-gradient(135deg, var(--v2-gold) 0%, var(--v2-gold-dark) 100%);
  color: #fff;
}
.v2-btn-gold:hover { filter: brightness(1.04); }
.v2-btn-outline {
  background: transparent;
  border: 1px solid var(--v2-border);
  color: var(--v2-text);
}
.v2-btn-danger { background: var(--v2-danger-soft); color: var(--v2-danger); }
.v2-btn-sm { padding: 7px 12px; font-size: 13px; }

/*
 * SEÇÃO 4/8/27 desta atualização — feedback visual de toque/clique.
 * Antes NENHUM botão tinha um estado `:active` — clicar não dava
 * nenhuma pista visual de "recebi seu toque" (mais perceptível em
 * touch, onde não existe `:hover`). `:active` aqui é o evento
 * "pressionado agora", nunca confundir com `.v2-nav-active`
 * (selecionado/persistente) — os dois efeitos se somam quando o
 * usuário toca num item já selecionado.
 */
.v2-btn-gold:active, .v2-btn-outline:active, .v2-btn-danger:active, .v2-nav-item:active {
  transform: scale(0.97);
  filter: brightness(0.97);
}

/*
 * SEÇÃO 4/27 — estado "selecionado" para filtros que reaproveitam
 * `.v2-nav-active` FORA da navegação lateral/inferior (Hoje/Semana/
 * Mês/Personalizado em Relatórios e no histórico da Agenda — ambos
 * montam o botão como `.v2-btn-outline.v2-btn-sm.v2-nav-active`).
 * CORREÇÃO: antes, `.v2-nav-active` só tinha estilo quando aninhada
 * dentro de `.v2-sidebar`/`.v2-bottom-nav` — um `.v2-btn-outline` com
 * essa classe fora delas não recebia NENHUM destaque visual (o filtro
 * "ativo" ficava visualmente idêntico aos outros). Esta regra cobre
 * exatamente esse caso, com o mesmo tom dourado já usado em todo o
 * resto do app.
 */
.v2-btn-outline.v2-nav-active {
  background: var(--v2-gold-soft);
  border-color: var(--v2-gold);
  color: var(--v2-gold-dark);
  box-shadow: inset 0 0 0 1px var(--v2-gold);
}

.v2-empty-state {
  text-align: center;
  color: var(--v2-text-muted);
  padding: 28px 12px;
  font-size: 14px;
}

.v2-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.v2-badge-agendado { background: var(--v2-gold-soft); color: var(--v2-gold-dark); }
.v2-badge-concluido { background: #e5efe1; color: var(--v2-success); }
.v2-badge-cancelado { background: var(--v2-danger-soft); color: var(--v2-danger); }
.v2-badge-ativo { background: #e5efe1; color: var(--v2-success); }
.v2-badge-inativo { background: #eee; color: var(--v2-text-muted); }

.v2-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--v2-nav-height) + 12px);
  transform: translate(-50%, 12px);
  background: var(--v2-text);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 20;
}
.v2-toast.v2-toast-show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* Ícone minimalista de categoria (item 12) dentro do painel ADM — mesmo SVG usado no catálogo público. */
.v2-cat-icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--v2-gold-dark); }
.v2-cat-icon svg { width: 100%; height: 100%; display: block; }

/* FASE 11, seção 9/10 — selo de "categoria em destaque" no painel ADM (estrela, só quando category.highlight === true, nunca automático). */
.v2-cat-icon-highlight { width: 16px; height: 16px; color: var(--v2-gold-dark); }
.v2-cat-icon-highlight svg { width: 100%; height: 100%; display: block; }

.v2-error-text { color: var(--v2-danger); font-size: 13px; min-height: 16px; overflow-wrap: anywhere; }
.v2-muted-text { color: var(--v2-text-muted); font-size: 13px; overflow-wrap: anywhere; }
.v2-report-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 6px 0; font-size: 14px; }
.v2-gold-text { color: var(--v2-gold-dark); }

/* Campos de formulário nunca vazam da tela, mesmo com placeholder longo. */
.v2-input, .v2-select { max-width: 100%; min-height: 42px; }

/* ============================================================
 * FASE 10, seções 2/7/9 — upload direto de imagem/vídeo (banner do
 * catálogo e mídia dos serviços). Nunca um campo de URL — o input de
 * arquivo real fica oculto atrás do botão "+ Adicionar imagem/vídeo"
 * (ver utils/mediaUploadControls.js); o CSS aqui só cuida da prévia e
 * da grade da galeria dentro do painel ADM.
 * ============================================================ */
.v2-file-input-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.v2-file-picker { display: inline-block; }

.v2-media-preview { margin: 8px 0; }
.v2-media-preview-img, .v2-media-preview-video { max-width: 100%; max-height: 220px; border-radius: 12px; display: block; object-fit: cover; }

.v2-media-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 8px 0; }
.v2-media-gallery-item { position: relative; border-radius: 10px; overflow: hidden; background: #eee; }
.v2-media-gallery-item img { width: 100%; height: 84px; object-fit: cover; display: block; }
.v2-media-gallery-item-main { outline: 2px solid var(--v2-gold-dark); }
.v2-media-gallery-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }