/* =================================================================
   estilo.css — aparência do sistema.
   CSS puro, sem framework, para ficar fácil de entender e alterar.
   ================================================================= */

/* As "variáveis" abaixo concentram as cores em um só lugar.
   Trocando aqui, muda o site inteiro. */

/* Tema Lumy (15/10/2026, direção A «Calma»): creme, tinta e terracota,
   a mesma identidade dos Reels da Lumy. Lora nos títulos, Poppins no resto. */
:root {
  --fondo: #F4F0E9;
  --tarjeta: #FDFBF7;
  --tarjeta-suave: #F8F4ED;
  --borde: #DED7CB;
  --borde-fuerte: #CFC6B8;
  --texto: #1E1B17;
  --texto-2: #4F483F;
  /* --texto-3 é o mais claro permitido pra texto (contraste 4,5:1 no fundo) */
  --texto-3: #6E665B;
  /* Primário = tinta: botões principais e itens selecionados */
  --primario: #1E1B17;
  --primario-oscuro: #000000;
  --primario-suave: #EAE3D7;
  /* Acento terracota: UM destaque por tela (números da Lumy, avisos suaves).
     --acento só em elementos grandes ou decoração; texto pequeno usa --acento-texto. */
  --acento: #A9714B;
  --acento-texto: #8A5634;
  --acento-suave: #F1E4D8;
  --sidebar: #EFE9DF;
  --sidebar-texto: #1E1B17;
  --peligro: #9A2F28;

  /* Nomes antigos (usados nas ~3000 linhas de baixo) apontando pros
     valores novos - assim o resto do arquivo herda a paleta nova sem
     precisar reescrever cada regra. */
  --cor-fundo: var(--fondo);
  --cor-cartao: var(--tarjeta);
  --cor-borda: var(--borde);
  --cor-texto: var(--texto);
  --cor-texto-suave: var(--texto-3);
  --cor-primaria: var(--primario);
  --cor-primaria-escura: var(--primario-oscuro);
  --cor-primaria-suave: var(--primario-suave);
  --cor-sidebar: var(--sidebar);
  --cor-sidebar-texto: var(--sidebar-texto);
  --cor-sidebar-texto-suave: #6E665B;
  --cor-perigo: var(--peligro);
  --fonte-corpo: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-titulo: "Lora", Georgia, serif;
  --raio: 14px;
  --raio-pequeno: 10px;
  --sombra: 0 1px 2px rgba(30, 27, 23, 0.05);
  --sombra-elevada: 0 12px 32px rgba(30, 27, 23, 0.14);
  --altura-barra-inferior: 80px;
}

/* Reset básico: remove margens padrão e facilita o cálculo de tamanhos */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--fonte-corpo);
  /* Tema Lumy: creme liso (o degradê dourado era da Skin Up). */
  background: var(--fondo);
  color: var(--cor-texto);
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ------------------------- Estrutura geral ------------------------- */
/* .app-shell só existe depois do login: sidebar fixa + conteúdo rolável. */
.app-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.conteudo-principal {
  flex: 1;
  min-width: 0; /* deixa o conteúdo encolher em telas estreitas */
}

@media (max-width: 900px) {
  .app-shell {
    flex-direction: column;
  }
}

/* ---------------------------- Sidebar ---------------------------- */
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--cor-sidebar);
  color: var(--cor-sidebar-texto);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
}

@media (max-width: 900px) {
  .sidebar {
    width: 100%;
    padding: 16px;
  }
}

.sidebar-marca {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  margin-bottom: 28px;
}

.sidebar-marca-icone {
  color: var(--cor-primaria);
  font-size: 1.1rem;
}

.sidebar-marca-nome {
  font-family: var(--fonte-titulo);
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
}

.sidebar-seccion {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-sidebar-texto-suave);
  padding: 16px 8px 6px;
}

.sidebar-seccion:first-child {
  padding-top: 0;
}

.sidebar-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: none;
  border-radius: var(--raio-pequeno);
  background: none;
  color: var(--cor-sidebar-texto);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
}

.sidebar-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.sidebar-item.ativa {
  background: var(--cor-primaria);
  color: #fff;
  font-weight: 600;
}

.sidebar-item-desabilitado {
  color: var(--cor-sidebar-texto-suave);
  cursor: default;
  opacity: 0.6;
}

.sidebar-item-desabilitado:hover {
  background: none;
}

/* Item de menu com contador de não lidas ("Mensajes") - os outros
   itens são "display: block" (texto só); este precisa do texto de um
   lado e o círculo do outro. */
.sidebar-item-com-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.badge-nao-lidas {
  background: var(--cor-perigo);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.sidebar-rodape {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-usuario {
  font-size: 0.82rem;
  color: var(--cor-sidebar-texto-suave);
  padding: 0 8px;
}

/* Botão claro, para ficar legível sobre o fundo escuro da sidebar */
.botao-claro {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.botao-claro:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ---------------------------- Painel Inicio ---------------------------- */
.inicio-cabecalho {
  margin-bottom: 20px;
}

.inicio-cabecalho h2 {
  font-size: 1.6rem;
}

/* ------------------- Telas de acesso / carga ------------------- */
/* Centraliza o cartão de login no meio da janela (só usada pela tela
   de "Cargando…" - login e configuração inicial usam .pantalla-acceso). */
.pantalla-centrada {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Login e configuração inicial: painel com a imagem da marca à
   esquerda + formulário à direita. Em telas estreitas, a imagem vira
   uma faixa mais baixa no topo (ver media query lá embaixo). */
.pantalla-acceso {
  min-height: 100vh;
  display: flex;
}

.pantalla-acceso-imagen {
  flex: 1 1 45%;
  max-width: 720px;
  /* A proporção do quadro é a MESMA da foto (1196×1151px) - assim
     "cover" (ver abaixo) não precisa cortar quase nada pra preencher o
     quadro inteiro, em vez de sobrar uma faixa vazia como no ajuste
     anterior (que deixava o painel esticar até 100% da altura da
     tela, bem mais alto que a foto). "align-self: center" impede esse
     quadro de esticar verticalmente também - ele fica do tamanho da
     própria foto, centralizado na coluna. */
  aspect-ratio: 1196 / 1151;
  align-self: center;
  border-radius: var(--raio);
  box-shadow: var(--sombra-elevada);
  overflow: hidden;
  background: var(--cor-primaria-suave);
}

.pantalla-acceso-imagen img {
  width: 100%;
  height: 100%;
  /* Com o quadro já na mesma proporção da foto, "cover" só entra pra
     cobrir arredondamentos de conta - na prática não amplia além da
     resolução nativa (720px de largura máxima vs. 1196px reais). */
  object-fit: cover;
  display: block;
}

.pantalla-acceso-formulario {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

@media (max-width: 900px) {
  .pantalla-acceso {
    flex-direction: column;
  }

  .pantalla-acceso-imagen {
    /* Desfaz o "quadro do tamanho da foto" do desktop: aqui é uma
       faixa cheia (largura toda, 200px de altura), sem cantos
       arredondados nem sombra - o recorte generoso (cover) nunca
       chega a precisar ampliar, porque 200px é bem menor que os
       1151px reais de altura da foto. */
    max-width: none;
    aspect-ratio: auto;
    align-self: stretch;
    height: 200px;
    border-radius: 0;
    box-shadow: none;
  }
}

.cartao-acceso {
  width: 100%;
  max-width: 380px;
  margin-bottom: 0;
}

/* Seletor composto (".cartao.cartao-acceso"), não só ".cartao-acceso":
   precisa vencer o "border" (as quatro bordas de uma vez) que ".cartao"
   define mais abaixo no arquivo - com a mesma especificidade, quem vem
   depois no arquivo venceria e apagaria esse fio dourado do topo. */
.cartao.cartao-acceso {
  /* Sombra mais forte e um fio dourado no topo - é a primeira tela que
     a pessoa vê, então ganha um pouco mais de destaque que os cards
     do resto do sistema. */
  box-shadow: var(--sombra-elevada);
  border-top: 3px solid var(--cor-primaria);
}

.cartao-acceso h1 {
  font-size: 1.3rem;
  margin-bottom: 6px;
}

.texto-suave {
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
}

.botao-largo {
  width: 100%;
  justify-content: center;
  padding: 11px 14px;
}

/* ------------------------ Layout de colunas ------------------------ */
.painel {
  display: grid;
  grid-template-columns: 320px 1fr; /* lista fixa | detalhe elástico */
  gap: 20px;
  padding: 20px 32px 48px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

/* Em telas pequenas (celular), as colunas viram uma só, empilhadas */
@media (max-width: 820px) {
  .painel {
    grid-template-columns: 1fr;
    padding: 16px;
  }
}

.coluna-lista {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px;
}

.coluna-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.coluna-cabecalho h2 {
  font-size: 1rem;
}

/* Uma linha só com um botão, alinhado à direita (ex.: "+ Nuevo
   producto" no topo de uma sub-vista do Inventario). */
.acoes-alinhadas-direita {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}

.inventario-rodape {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--cor-borda);
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

.aviso-stock-bajo {
  color: var(--cor-perigo);
  font-weight: 600;
  font-size: 0.8rem;
}

/* -------------------------- Busca e lista -------------------------- */
.campo-busca {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.lista-clientes {
  list-style: none;
  max-height: 60vh;
  overflow-y: auto;
}

.lista-clientes li {
  padding: 10px 12px;
  border-radius: var(--raio);
  cursor: pointer;
  border: 1px solid transparent;
}

.lista-clientes li:hover {
  background: var(--cor-fundo);
}

/* Classe aplicada pelo JavaScript no cliente que está aberto */
.lista-clientes li.ativo {
  background: var(--cor-primaria-suave);
  border-color: var(--cor-primaria);
}

.lista-clientes .nome {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
}

.lista-clientes .contato {
  display: block;
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
}

/* ---------------------------- Cartões ---------------------------- */
.cartao {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 20px;
  margin-bottom: 20px;
}

.cartao h2 {
  font-size: 1.15rem;
  margin-bottom: 14px;
}

.cartao h3 {
  font-size: 0.98rem;
  margin-bottom: 14px;
}

.ficha-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ficha-cabecalho h2,
.ficha-cabecalho h3 {
  margin-bottom: 0;
}

/* -------------------------- Formulários -------------------------- */
label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  margin-bottom: 4px;
  margin-top: 12px;
}

input,
textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  font-size: 0.9rem;
  font-family: inherit;
  background: #fff;
  color: var(--cor-texto);
}

input:focus,
textarea:focus {
  outline: 2px solid var(--cor-primaria);
  outline-offset: -1px;
}

/* Campo de importe/forma de pago quando a cita usa um bono: ja esta
   pago, entao fica visualmente "apagado" em vez de editavel. */
input:disabled,
select:disabled {
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
  cursor: not-allowed;
}

textarea {
  resize: vertical;
}

/* Duas caixas lado a lado (ex.: telefone + e-mail) */
.linha-dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 560px) {
  .linha-dupla {
    grid-template-columns: 1fr;
  }
}

.acoes {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.ficha-cabecalho .acoes {
  margin-top: 0;
}

/* ---------------------------- Botões ---------------------------- */
.botao {
  padding: 8px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: #fff;
  color: var(--cor-texto);
  font-size: 0.85rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

.botao:hover {
  background: var(--cor-fundo);
}

.botao-primario {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: #fff;
}

.botao-primario:hover {
  background: var(--cor-primaria-escura);
}

.botao-perigo {
  color: var(--cor-perigo);
  border-color: #e8c9c7;
}

.botao-perigo:hover {
  background: #fdf2f1;
}

/* ------------------------ Ficha do cliente ------------------------ */
.ficha-360 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.ficha-360-card {
  background: var(--cor-primaria-suave);
  border-radius: var(--raio);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ficha-360-etiqueta {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-primaria-escura);
}

.ficha-360-valor {
  font-size: 0.95rem;
  font-weight: 600;
}

.dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.dados dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave);
}

.dados dd {
  font-size: 0.92rem;
}

.observacoes {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--cor-borda);
  font-size: 0.88rem;
  color: var(--cor-texto-suave);
  white-space: pre-wrap; /* preserva as quebras de linha digitadas */
}

.observacoes:empty {
  display: none;
}

/* -------------------------- Histórico -------------------------- */
.lista-atendimentos {
  list-style: none;
}

.lista-atendimentos li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--cor-borda);
}

.lista-atendimentos li:first-child {
  border-top: none;
  padding-top: 0;
}

/* -------------------------- Bonos -------------------------- */
.lista-bonos {
  list-style: none;
}

.lista-bonos li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid var(--cor-borda);
}

.lista-bonos li:first-child {
  border-top: none;
  padding-top: 0;
}

.lista-bonos li.bono-inativo {
  opacity: 0.55;
}

.atendimento-data {
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
}

.atendimento-procedimento {
  font-weight: 600;
  font-size: 0.92rem;
}

.atendimento-observacoes {
  font-size: 0.83rem;
  color: var(--cor-texto-suave);
  white-space: pre-wrap;
}

.atendimento-valor {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.etiqueta {
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
}

/* Contadores do historial (total/atendidas/canceladas/reagendadas/
   no-shows) na ficha do cliente - uma fileira de "etiqueta"s. */
.historico-contadores {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.historico-contadores span {
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
}

/* ---------------------------- Agenda ---------------------------- */
.painel-agenda {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 32px 48px;
}

@media (max-width: 820px) {
  .painel-agenda {
    padding: 16px;
  }
}

.agenda-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.agenda-navegacao {
  display: flex;
  align-items: center;
  gap: 12px;
}

.agenda-navegacao h2 {
  font-size: 1.1rem;
  min-width: 200px;
}

.agenda-acoes {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filtro-agenda {
  width: auto;
  padding: 8px 10px;
  font-size: 0.85rem;
}

.filtro-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  cursor: pointer;
  white-space: nowrap;
}

/* O checkbox herdava width: 100% dos inputs e empurrava o texto pra 2 linhas */
.filtro-checkbox input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* .campo-busca sozinho é width:100% (pensado pra coluna da lista de
   clientes) - numa barra de filtros horizontal precisa de largura fixa. */
.campo-busca-estreito {
  width: 220px;
  margin-bottom: 0;
}

.linha-tabela-clicavel {
  cursor: pointer;
}

.linha-tabela-clicavel:hover {
  background: var(--cor-fundo);
}

.agenda-vista {
  display: flex;
  gap: 4px;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 3px;
}

.agenda-vista .botao {
  border: none;
  background: none;
}

.agenda-vista .botao.ativa {
  background: var(--cor-primaria);
  color: #fff;
}

/* Botão "Bloquear horario" (só gerente) quando o modo de 1 clique está
   armado - mesmo visual de "ativo" que as outras abas/vistas usam. */
#botao-bloquear-horario.armado {
  background: var(--cor-primaria);
  color: #fff;
}

/* Aviso do modo armado, logo abaixo da barra de ações da Agenda */
.aviso-modo-bloqueio {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: var(--raio-pequeno);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
  font-size: 0.85rem;
  font-weight: 600;
}

.aviso-modo-bloqueio button {
  border: none;
  background: none;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* Enquanto o modo está armado, a grade avisa com o cursor que o
   próximo clique num espaço vazio vai bloquear, não abrir "Nueva cita". */
.grade-profesionais.modo-bloqueio-ativo .grade-profesionais-corpo {
  cursor: crosshair;
}

/* -------------------- Vista de día: lista de citas -------------------- */
.lista-agenda {
  list-style: none;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.lista-agenda li {
  padding: 14px 18px;
}

.agenda-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--cor-borda);
}

.lista-agenda li:first-child {
  border-top: none;
}

.agenda-hora {
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
}

.agenda-cliente {
  font-weight: 600;
  font-size: 0.94rem;
}

.agenda-profissional {
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
}

.agenda-item-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Cita cancelada: fica visualmente "apagada", sem sumir da lista */
.agenda-item.estado-cancelado {
  opacity: 0.55;
}

.agenda-item.estado-cancelado .agenda-cliente,
.agenda-item.estado-cancelado .atendimento-procedimento {
  text-decoration: line-through;
}

.etiqueta-pendente {
  background: #fdf3e3;
  border-color: #f0d9a8;
  color: #96701c;
}

.etiqueta-realizado {
  background: #e7f4ec;
  border-color: #b9ddc6;
  color: #2f7a48;
}

.etiqueta-cancelado {
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
}

/* "Ausente" (no-show) fica destacado, ao contrario de cancelado: é o
   caso que mais interessa notar de relance na agenda. */
.etiqueta-ausente {
  background: #fbe7e5;
  border-color: #f0c1bc;
  color: var(--cor-perigo);
}

.agenda-item.estado-ausente .agenda-cliente {
  color: var(--cor-perigo);
}

/* -------------- Vista de día: grade por profesional -------------- */
/* Layout: uma coluna de horas fixa à esquerda + uma coluna por
   profissional. As citas são <div> posicionados com position:absolute
   dentro de ".grade-profesionais-corpo", calculados em JavaScript
   (ver GRADE_PX_POR_MINUTO em app.js) - por isso a altura de tudo aqui
   vem inline (style="height:...") e não neste arquivo. */
.grade-profesionais {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.grade-profesionais-horas {
  flex-shrink: 0;
  width: 52px;
}

.grade-profesionais-horas-spacer {
  height: 44px;
}

.grade-profesionais-horas-corpo {
  position: relative;
}

.grade-profesionais-hora {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  font-size: 0.72rem;
  color: var(--cor-texto-suave);
}

.grade-profesionais-colunas {
  flex: 1;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  min-width: 0;
}

.grade-profesionais-coluna {
  flex: 1 0 190px;
  min-width: 190px;
}

.grade-profesionais-cabecalho {
  height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 12px;
  border-radius: var(--raio-pequeno) var(--raio-pequeno) 0 0;
  border-top: 3px solid var(--cor-prof, var(--cor-primaria));
  background: var(--cor-cartao);
  box-shadow: var(--sombra);
}

.grade-profesionais-cabecalho-arrastavel {
  cursor: grab;
}

.grade-profesionais-cabecalho-arrastavel:active {
  cursor: grabbing;
}

.grade-profesionais-nome {
  font-weight: 600;
  font-size: 0.88rem;
}

.grade-profesionais-contagem {
  font-size: 0.72rem;
  color: var(--cor-texto-suave);
}

.grade-profesionais-corpo {
  position: relative;
  background: var(--cor-cartao);
  border-radius: 0 0 var(--raio-pequeno) var(--raio-pequeno);
  box-shadow: var(--sombra);
  /* Clicar num espaço vazio abre "Nueva cita" já com esse horário e
     profissional preenchidos (ver criarColunaDeProfissional em app.js);
     o cursor "grab" do .cita-card, por cima, sobrescreve isso nos cards. */
  cursor: pointer;
  /* Uma linha horizontal a cada hora, so com CSS - sem <div> nenhuma */
  background-image: repeating-linear-gradient(
    to bottom,
    var(--cor-borda) 0,
    var(--cor-borda) 1px,
    transparent 1px,
    transparent var(--grade-altura-hora, 60px)
  );
}

/* Faixa de horário bloqueado (ex.: "Almuerzo") - hachurada, atrás dos
   cards de cita (entram antes no DOM, ver criarColunaDeProfissional em
   app.js). Motivo escrito verticalmente centralizado. */
.grade-profesionais-bloqueio {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(138, 125, 104, 0.1);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(138, 125, 104, 0.12),
    rgba(138, 125, 104, 0.12) 8px,
    transparent 8px,
    transparent 16px
  );
  border-top: 1px solid var(--cor-borda);
  border-bottom: 1px solid var(--cor-borda);
}

.grade-profesionais-bloqueio span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.grade-profesionais-bloqueio-clicable {
  cursor: pointer;
}

.grade-profesionais-bloqueio-clicable:hover {
  background-color: rgba(138, 125, 104, 0.18);
}

/* Card de uma cita dentro da grade. A cor de fundo/borda vem de
   --cor-prof (definida na coluna) via as variaveis --cor-prof-suave. */
.cita-card {
  position: absolute;
  left: 4px;
  right: 4px;
  overflow: hidden;
  padding: 4px 8px;
  border-radius: 8px;
  border-left: 3px solid var(--cor-prof, var(--cor-primaria));
  background: var(--cor-prof-suave, var(--cor-primaria-suave));
  font-size: 0.76rem;
  line-height: 1.3;
  cursor: grab;
}

.cita-card:active {
  cursor: grabbing;
}

.cita-card-hora {
  font-weight: 600;
}

.cita-card-cliente {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cita-card-procedimento {
  color: var(--cor-texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Indicadores pequenos dentro do card (cliente novo / última sesión de
   pack) - um ponto colorido antes do texto, com tooltip explicando.
   Não mudam a cor de fundo do card (essa já indica o profissional). */
.cita-card-indicador {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 4px;
  flex-shrink: 0;
}

.cita-card-indicador-novo {
  background: #2e9e5b;
}

.cita-card-indicador-ultima-sesion {
  background: var(--cor-primaria);
}

/* Cita que não está "pendente" não pode ser arrastada (ver
   `draggable` do Sortable em app.js) - fica com aparência apagada,
   igual à vista de lista. */
.cita-card.estado-cancelado,
.cita-card.estado-realizado,
.cita-card.estado-ausente {
  cursor: default;
  opacity: 0.6;
}

/* Classes que o SortableJS aplica sozinho durante o arrastar */
.sortable-ghost {
  opacity: 0.35;
}

/* O card "fantasma" que segue o mouse/dedo durante o arrastar (com
   forceFallback+fallbackOnBody, ele fica solto no <body>). Sem
   pointer-events:none, ele mesmo aparecia como resultado de
   document.elementFromPoint() no momento de soltar - impedindo a
   detecção da coluna de baixo dele (ver aoSoltarCard em app.js). */
.sortable-fallback {
  pointer-events: none;
}

.sortable-chosen {
  box-shadow: var(--sombra-elevada);
}

.sortable-drag {
  box-shadow: var(--sombra-elevada);
}

/* -------------------- Vista de semana: grade -------------------- */
.grade-semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

@media (max-width: 820px) {
  .grade-semana {
    grid-template-columns: 1fr;
  }
}

.grade-semana-dia {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 10px;
  min-height: 90px;
  cursor: pointer;
}

.grade-semana-dia.hoy {
  border-color: var(--cor-primaria);
}

.grade-semana-cabecalho {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--cor-texto-suave);
  margin-bottom: 8px;
}

.grade-semana-dia.hoy .grade-semana-cabecalho {
  color: var(--cor-primaria);
}

.grade-semana-cita {
  font-size: 0.78rem;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--cor-fundo);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grade-semana-cita:hover {
  background: var(--cor-primaria-suave);
}

.grade-semana-cita.estado-cancelado {
  opacity: 0.5;
  text-decoration: line-through;
}

.grade-semana-cita.estado-ausente {
  background: #fbe7e5;
  color: var(--cor-perigo);
}

.grade-semana-cita.estado-realizado {
  background: #e7f4ec;
}

/* -------------------- Vista de mes: calendário -------------------- */
.grade-mes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

@media (max-width: 820px) {
  .grade-mes {
    grid-template-columns: repeat(7, minmax(36px, 1fr));
    gap: 4px;
  }
}

.grade-mes-cabecalho-dia {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cor-texto-suave);
  padding-bottom: 4px;
}

.grade-mes-dia {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  box-shadow: var(--sombra);
  padding: 8px;
  min-height: 76px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.grade-mes-dia:hover {
  border-color: var(--cor-primaria);
}

.grade-mes-dia.fora-do-mes {
  opacity: 0.45;
}

.grade-mes-dia.hoy {
  border-color: var(--cor-primaria);
  border-width: 2px;
}

.grade-mes-numero {
  font-size: 0.85rem;
  font-weight: 600;
}

.grade-mes-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.grade-mes-contagem {
  font-size: 0.72rem;
  color: var(--cor-texto-suave);
}

/* Pontinho vermelho: pelo menos um "no presentado" naquele dia - mesma
   cor de alerta usada em Informes/Agenda pra no-show. */
.grade-mes-alerta {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cor-perigo);
  flex-shrink: 0;
}

/* -------------------- Autocompletar de cliente -------------------- */
.lista-sugerencias {
  list-style: none;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  margin-top: 4px;
  max-height: 180px;
  overflow-y: auto;
}

.lista-sugerencias li {
  padding: 8px 12px;
  font-size: 0.87rem;
  cursor: pointer;
}

.lista-sugerencias li:hover {
  background: var(--cor-fundo);
}

.lista-sugerencias li.vazio {
  cursor: default;
}

.lista-sugerencias li.vazio:hover {
  background: none;
}

.sugerencia-crear-cliente {
  color: var(--cor-primaria);
  font-weight: 600;
  border-top: 1px solid var(--cor-borda);
}

/* Mini-formulario para crear un cliente sin salir de "Nueva cita" */
.cartao-mini {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-fundo);
  padding: 12px;
  margin: 8px 0;
}

/* ---------------------------- Informes ---------------------------- */
.informe-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.informe-card {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.informe-card-valor {
  font-size: 1.4rem;
  font-weight: 700;
}

.informe-card-etiqueta {
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
}

/* O card de "No presentados" fica destacado, igual a etiqueta na agenda */
.informe-card-alerta .informe-card-valor {
  color: var(--cor-perigo);
}

/* Form pequeno dentro de um informe-card (ex.: "Objetivo del mes" sin
   definir) - input + botão numa linha só, sem quebrar o tamanho do card. */
.informe-card-form {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

.informe-card-form input {
  min-width: 0;
  flex: 1;
  padding: 4px 6px;
  font-size: 0.8rem;
}

.informe-card-form button {
  padding: 4px 10px;
  font-size: 0.8rem;
}

.tabla-informe {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.tabla-informe th,
.tabla-informe td {
  text-align: left;
  padding: 8px 6px;
  border-top: 1px solid var(--cor-borda);
}

.tabla-informe th {
  border-top: none;
  border-bottom: 2px solid var(--cor-borda);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cor-texto-suave);
}

.tabla-informe td.vazio {
  color: var(--cor-texto-suave);
  text-align: center;
  padding: 16px 6px;
}

/* ------------------------ Janela de equipe ------------------------ */
.dialogo {
  width: min(560px, calc(100vw - 32px));
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 24px;
  background: var(--cor-cartao);
  color: var(--cor-texto);
  /* O navegador centraliza o <dialog> com "margin: auto" - o reset
     "* { margin: 0 }" do topo deste arquivo apagava isso e toda janela
     abria no canto superior esquerdo. Devolve a centralização. */
  margin: auto;
}

.dialogo h2 {
  font-size: 1.15rem;
}

.dialogo h3 {
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* Diálogo maior, para caber o formulário de edição + o histórico do
   cliente (janela de detalhe de uma cita). Rola por dentro em vez de
   crescer além da tela em notebooks pequenos. */
.dialogo-grande {
  width: min(680px, calc(100vw - 32px));
  max-height: 85vh;
  overflow-y: auto;
}

.dialogo-secao-titulo {
  margin-top: 18px;
}

/* ::backdrop é o fundo escurecido atrás da janela modal */
.dialogo::backdrop {
  background: rgba(47, 42, 40, 0.45);
}

.separador {
  border: none;
  border-top: 1px solid var(--cor-borda);
  margin: 24px 0 18px;
}

.lista-equipo {
  list-style: none;
}

.lista-equipo li {
  display: flex;
  /* Quebra em mais de uma linha: com Sede + Rol + Atiende + Editar +
     Sustituir + Quitar acceso, uma linha só passava da largura do diálogo
     e os botões da direita ficavam cortados (invisíveis). */
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--cor-borda);
}

#lista-equipo li > div:first-child {
  flex: 1 1 100%;
}

.lista-equipo li:first-child {
  border-top: none;
}

.lista-equipo .nome {
  font-weight: 600;
  font-size: 0.9rem;
}

.lista-equipo .contato {
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
}

.select-sede-equipo {
  width: auto;
  padding: 6px 8px;
  font-size: 0.8rem;
}

.linha-atende-clientes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  white-space: nowrap;
  color: var(--cor-texto-suave);
}

.lista-sedes {
  list-style: none;
}

.lista-sedes li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 0.9rem;
  border-top: 1px solid var(--cor-borda);
}

.lista-sedes li:first-child {
  border-top: none;
}

.campo-nombre-sede {
  flex: 1;
}

/* Usado pela lista de Tratamientos, que reaproveita .lista-sedes -
   nome vira um <div> comum (não um input, o nome não é editável ali,
   só o preço), então precisa de flex:1 à parte pra ocupar o espaço. */
.lista-sedes li .nome {
  flex: 1;
  font-weight: 600;
}

.lista-sedes li:first-child {
  border-top: none;
}

/* Formulário compacto de uma linha só (ex.: "+ Añadir sede") */
.form-en-linea {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.form-en-linea input {
  flex: 1;
}

.campo-preco-tratamento {
  flex: 0 0 110px;
}

/* Bloqueos de horario: o <li> empilha cabecalho + painel de excepciones
   (diferente do padrao "espaco entre 2 itens" de .lista-equipo li). */
.lista-equipo li.item-bloqueio {
  display: block;
}

.item-bloqueio-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.item-bloqueio-excecoes {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--cor-fundo);
  border-radius: 8px;
}

.linha-excecao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--cor-texto-suave);
  padding: 3px 0;
}

.form-excecao {
  margin-top: 6px;
}

.form-excecao input,
.form-excecao select {
  flex: 1;
  font-size: 0.82rem;
}

/* Solicitudes de horario extraordinario: linha ja atendida fica opaca,
   pra chamar menos atencao sem sumir do historico. */
.lista-equipo li.item-solicitud-atendida {
  opacity: 0.55;
}

/* Acción correctiva (Incidentes): muitos campos editáveis numa linha
   só - quebra em várias linhas conforme o espaço, com o "seguimiento"
   sempre ocupando a linha inteira sozinho. */
.lista-atendimentos li.item-accion-corretiva {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.item-accion-corretiva input[type='text'],
.item-accion-corretiva select {
  flex: 1 1 140px;
  min-width: 100px;
}

.item-accion-corretiva input[type='date'] {
  flex: 0 0 140px;
}

.item-accion-corretiva textarea {
  flex: 1 1 100%;
  resize: vertical;
}

.item-accion-corretiva .etiqueta {
  flex: 0 0 auto;
}

/* Comentario de seguimiento (Reuniones mensuales): empilhado, não em
   linha - mesmo espírito de .item-bloqueio (bloco, não space-between). */
.lista-atendimentos li.item-comentario {
  display: block;
}

.item-comentario .contato {
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
  margin-bottom: 2px;
}

/* Panel de Dirección: las 2 sedes lado a lado (una embaixo da outra em
   telas estreitas) */
.direccion-sedes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

/* Itens do "Necesita mi atención" - empilhados (bloco), não em linha -
   mesmo espírito de .item-comentario. */
.lista-atendimentos li.item-atencion {
  display: block;
}

.item-atencion .contato {
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
}

/* ------------------------ Estados auxiliares ------------------------ */
.oculto {
  display: none !important;
}

.aviso-vazio {
  text-align: center;
  padding: 64px 20px;
  color: var(--cor-texto-suave);
  font-size: 0.92rem;
}

.vazio {
  color: var(--cor-texto-suave);
  font-size: 0.87rem;
  padding: 8px 0;
}

/* Aviso flutuante no canto inferior */
.mensagem {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 11px 20px;
  border-radius: var(--raio);
  background: var(--cor-texto);
  color: #fff;
  font-size: 0.87rem;
  box-shadow: 0 4px 14px rgba(47, 42, 40, 0.25);
  z-index: 10;
}

.mensagem.erro {
  background: var(--cor-perigo);
}

/* -------------------------- Galeria de fotos -------------------------- */
.galeria-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

.galeria-foto-item {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  overflow: hidden;
  background: var(--cor-fundo);
}

.galeria-foto-item img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

.galeria-foto-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
}

.galeria-foto-info button {
  border: none;
  background: none;
  color: var(--cor-perigo);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0;
}

/* ---------------------------- Mensajes ---------------------------- */
/* Bandeja única WhatsApp + Instagram (ver src/mensagens.js). Duas
   colunas: lista de conversas | conversa aberta. Em telas pequenas
   vira uma só - a coluna de conversa cobre a tela inteira quando uma
   conversa está aberta (classe "mostrando-conversa" no painel),
   voltando pra lista com o botão "← Volver". */
.painel-mensagens {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  padding: 20px 32px 48px;
  max-width: 1200px;
  margin: 0 auto;
  height: calc(100vh - 40px);
  align-items: stretch;
}

@media (max-width: 900px) {
  .painel-mensagens {
    padding: 16px;
    height: calc(100vh - 32px);
  }
}

.mensagens-coluna-lista,
.mensagens-coluna-conversa {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 0; /* deixa a lista/histórico rolar dentro do card, não a página */
}

.mensagens-filtro-canal {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.mensagens-filtro-item {
  flex: 1;
  padding: 6px 8px;
  font-size: 0.78rem;
}

.mensagens-filtro-item.ativa {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: #fff;
}

.mensagens-lista-conversas {
  list-style: none;
  overflow-y: auto;
  flex: 1;
}

.mensagens-lista-conversas li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--raio-pequeno);
  cursor: pointer;
  border: 1px solid transparent;
}

.mensagens-lista-conversas li:hover {
  background: var(--cor-fundo);
}

.mensagens-lista-conversas li.ativa {
  background: var(--cor-primaria-suave);
  border-color: var(--cor-primaria);
}

.mensagens-item-linha1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.mensagens-item-nombre {
  font-weight: 600;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mensagens-item-canal {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cor-texto-suave);
}

.mensagens-item-linha2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.mensagens-item-preview {
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.mensagens-item-hora {
  font-size: 0.72rem;
  color: var(--cor-texto-suave);
  flex-shrink: 0;
}

.mensagens-item-tag-bot {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--cor-primaria);
}

/* Estado de seguimiento (lista, cabeçalho e ficha). Cores discretas:
   verde = avançou, cinza = parado/encerrado, dourado = em andamento. */
.mensagens-item-linha3 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.etiqueta-estado-conversa {
  font-size: 0.68rem;
  padding: 1px 8px;
}

.estado-conversa-em_conversa {
  color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}

.estado-conversa-cita_agendada,
.estado-conversa-cliente {
  color: #2e6b3a;
  border-color: #9cc7a5;
  background: #eef7f0;
}

.estado-conversa-no_interesada,
.estado-conversa-perdida {
  color: var(--cor-texto-suave);
  text-decoration: none;
  opacity: 0.8;
}

/* Chegou a data de "Recordarme el…" */
.etiqueta-seguir {
  font-size: 0.68rem;
  padding: 1px 8px;
  color: #fff;
  background: #c77a1a;
  border-color: #c77a1a;
}

.mensagens-lista-conversas li.seguir-agora {
  box-shadow: inset 3px 0 0 #c77a1a;
}

/* ------------------------ Coluna da conversa ------------------------ */
.mensagens-conversa {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.mensagens-botao-volver {
  display: none;
}

@media (max-width: 900px) {
  /* No celular, as duas colunas viram uma só: por padrão só a lista
     aparece; ao abrir uma conversa, o JS troca pra "mostrando-conversa"
     e é a hora do botão "Volver" aparecer pra trocar de volta. */
  .painel-mensagens {
    grid-template-columns: 1fr;
    height: auto;
  }
  .mensagens-coluna-lista,
  .mensagens-coluna-conversa {
    height: calc(100vh - 32px);
  }
  .mensagens-coluna-conversa {
    display: none;
  }
  .painel-mensagens.mostrando-conversa .mensagens-coluna-lista {
    display: none;
  }
  .painel-mensagens.mostrando-conversa .mensagens-coluna-conversa {
    display: flex;
  }
  .mensagens-botao-volver {
    display: inline-block;
  }
}

.mensagens-conversa-cabecalho {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cor-borda);
  margin-bottom: 12px;
}

.mensagens-conversa-titulo {
  flex: 1;
  min-width: 120px;
}

.mensagens-conversa-titulo h3 {
  font-size: 1rem;
}

.mensagens-conversa-acoes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mensagens-estado {
  width: auto;
  padding: 6px 10px;
  font-size: 0.85rem;
}

.mensagens-form-motivo {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.mensagens-form-motivo input {
  flex: 1;
}

/* Resumo da clienta ligada, logo abaixo do cabeçalho */
.mensagens-resumo-cliente {
  font-size: 0.8rem;
  margin-bottom: 10px;
}

.mensagens-resumo-alerta {
  background: #fbe7e5;
  border: 1px solid var(--cor-perigo);
  border-radius: var(--raio-pequeno);
  color: #8e2a23;
  font-weight: 600;
  padding: 6px 10px;
  margin-bottom: 6px;
  white-space: pre-wrap;
}

.mensagens-resumo-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  color: var(--cor-texto-suave);
}

.mensagens-resumo-linha strong {
  color: var(--cor-texto);
  font-weight: 600;
}

/* "Seguimiento y notas" (fechado por padrão) */
.mensagens-seguimiento {
  font-size: 0.85rem;
  margin-bottom: 10px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  padding: 6px 10px;
}

.mensagens-seguimiento.seguir-agora {
  border-color: #c77a1a;
  box-shadow: inset 3px 0 0 #c77a1a;
}

.mensagens-seguimiento summary {
  cursor: pointer;
  font-weight: 600;
}

.mensagens-form-seguimiento,
.mensagens-form-notas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
  margin-top: 8px;
}

.mensagens-form-seguimiento label,
.mensagens-form-notas label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
}

.mensagens-form-notas label {
  flex: 1 1 100%;
}

/* Seção "Conversaciones" da ficha */
.ficha-conversa + .ficha-conversa {
  margin-top: 16px;
}

.ficha-conversa-cabecalho {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ficha-conversa-cabecalho .botao {
  margin-left: auto;
}

.ficha-conversa-historico {
  max-height: 360px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
}

#mensagens-botao-bot.bot-pausado {
  color: var(--cor-perigo);
  border-color: #e8c9c7;
}

/* Ocupa o espaço que o histórico ocupava antes; o histórico rola aqui
   dentro, e o botão "Nuevos mensajes" flutua no rodapé dele. */
.mensagens-historico-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mensagens-botao-novas {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  background: var(--cor-primaria);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.mensagens-botao-novas.oculto {
  display: none;
}

.mensagens-historico {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 4px;
}

.mensagens-bolha-linha {
  display: flex;
  flex-direction: column;
  max-width: 75%;
}

.mensagens-bolha-linha.entrada {
  align-items: flex-start;
  align-self: flex-start;
}

.mensagens-bolha-linha.saida {
  align-items: flex-end;
  align-self: flex-end;
}

.mensagens-bolha-autor {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  margin-bottom: 2px;
  padding: 0 4px;
}

.mensagens-bolha {
  padding: 8px 12px;
  border-radius: var(--raio-pequeno);
  font-size: 0.88rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.mensagens-bolha-linha.entrada .mensagens-bolha {
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
}

.mensagens-bolha-linha.saida .mensagens-bolha {
  background: var(--cor-primaria);
  color: #fff;
}

.mensagens-bolha-hora {
  font-size: 0.68rem;
  color: var(--cor-texto-suave);
  margin-top: 2px;
  padding: 0 4px;
}

.aviso-ventana-cerrada {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: var(--raio-pequeno);
  background: #fdf2f1;
  color: var(--cor-perigo);
  font-size: 0.82rem;
  font-weight: 600;
}

.mensagens-responder {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-top: 8px;
}

.mensagens-responder textarea {
  flex: 1;
  resize: none;
  padding: 8px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  font-family: inherit;
  font-size: 0.88rem;
}

.mensagens-responder textarea:disabled {
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
}

/* -------------- Aviso médico (contraindicações) -------------- */
/* Vermelho forte de propósito: é informação de segurança, precisa ser
   a primeira coisa que a profissional vê ao abrir a ficha/cita. */
.alerta-medica {
  background: #fbe7e5;
  border: 2px solid var(--cor-perigo);
  border-radius: var(--raio-pequeno);
  color: #8e2a23;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.alerta-medica-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.alerta-medica-texto {
  margin-top: 6px;
  white-space: pre-line; /* cada linha acrescentada pelo bot numa linha própria */
}

.alerta-medica-edicao textarea {
  width: 100%;
  margin-top: 6px;
}

.botao-anadir-alerta {
  margin-bottom: 16px;
}

/* Ponto vermelho ao lado do nome na Agenda (tooltip com o texto) */
.cita-card-indicador-alerta {
  background: var(--cor-perigo);
}

.indicador-alerta-lista {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cor-perigo);
  margin-right: 6px;
  vertical-align: middle;
}

/* -------------- Recordatorio / confirmação da cita -------------- */
.etiquetas-recordatorio {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.etiquetas-recordatorio:empty {
  display: none;
}

.etiqueta-recordada {
  background: #f0eeea;
  border-color: #d9d4ca;
  color: #6b6458;
}

.etiqueta-confirmada {
  background: #e7f4ec;
  border-color: #b9ddc6;
  color: #2f7a48;
}

/* Versão mini dentro do card da grade (espaço curto) */
.cita-card-etiqueta {
  display: inline-block;
  font-size: 0.65rem;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid;
  margin-top: 2px;
}

/* -------------- Promo flash -------------- */
.etiqueta-promo-flash {
  display: inline-block;
  background: #e8731a;
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  border-radius: 999px;
  padding: 4px 12px;
  margin: -16px 8px 20px;
}

.etiqueta-promo-flash.oculto {
  display: none;
}

.form-promo-flash {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 420px;
}

/* -------------- Días cerrados (festivos) -------------- */
.aviso-dia-cerrado {
  background: #eceae6;
  border: 1px dashed #a39c8f;
  border-radius: var(--raio-pequeno);
  color: #4d473d;
  font-weight: 600;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.etiqueta-dia-cerrado {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #4d473d;
  background: #eceae6;
  border-radius: 6px;
  padding: 1px 6px;
  margin: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grade-semana-dia.dia-cerrado,
.grade-mes-dia.dia-cerrado {
  background: repeating-linear-gradient(135deg, #f4f2ee, #f4f2ee 6px, #ebe8e2 6px, #ebe8e2 12px);
}

/* -------------- Cita cancelada / no presentada = hora LIBRE --------------
   Continua visível (histórico), mas não ocupa o horário: fica apagada,
   riscada, estreita à direita da coluna - o lado esquerdo continua
   clicável pra marcar outra cliente na mesma hora, e uma cita nova por
   cima encolhe pra esquerda (ver criarColunaDeProfissional). */
.cita-card.cita-card-liberada {
  left: 58%;
  opacity: 0.55;
  z-index: 1;
  background: repeating-linear-gradient(135deg, #f7f5f1, #f7f5f1 5px, #efece6 5px, #efece6 10px);
  border-left-style: dashed;
}

.cita-card.cita-card-liberada .cita-card-cliente,
.cita-card.cita-card-liberada .cita-card-procedimento {
  text-decoration: line-through;
}

.cita-card.cita-card-liberada .cita-card-etiqueta-estado {
  display: inline-block;
  text-decoration: none;
  font-size: 0.62rem;
  font-weight: 600;
  margin-top: 2px;
}

.cita-card.cita-card-ao-lado-de-liberada {
  right: 44%;
  z-index: 2;
}

.agenda-item.estado-ausente .agenda-cliente,
.agenda-item.estado-ausente .atendimento-procedimento {
  text-decoration: line-through;
}

.agenda-item.estado-cancelado,
.agenda-item.estado-ausente {
  opacity: 0.7;
}

/* Copias de seguridad (Equipo) - aviso de falha / sem nuvem */
.backups-aviso {
  background: #fdf0e1;
  border: 1px solid #c77a1a;
  border-radius: var(--raio-pequeno);
  color: #7a4a0f;
  padding: 8px 12px;
  font-size: 0.85rem;
}

/* Reactivación */
.reactivacion-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.reactivacion-barra select {
  width: auto;
}

.reactivacion-progreso {
  flex-basis: 100%;
  margin: 0;
  font-weight: 600;
}

.reactivacion-fallos {
  flex-basis: 100%;
  margin: 0;
  padding-left: 18px;
  color: var(--cor-perigo);
  font-size: 0.85rem;
}

.reactivacion-fallos:empty {
  display: none;
}

tr.reactivacion-bloqueada td {
  color: var(--cor-texto-suave);
}

/* Ajustes > Notificaciones */
.ajustes-push-estado {
  font-weight: 600;
}

/* Rodapé da sidebar: "Ajustes" e "Salir" um embaixo do outro */
#botao-ajustes {
  margin-bottom: 8px;
}

/* Informes: aviso de "datos parciales" (packs pasados desde papel) */
.aviso-datos-parciales {
  background: #fdf0e1;
  border: 1px solid #c77a1a;
  border-radius: var(--raio-pequeno);
  color: #7a4a0f;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 0.88rem;
}

.informe-subtitulo {
  margin: 18px 0 8px;
  font-size: 0.95rem;
}

/* Packs com dinheiro (25/09/2026) */
.bono-atajos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.bono-resumo-linha {
  font-weight: 600;
  font-size: 0.88rem;
}

.bono-saldo {
  font-weight: 700;
  color: #2e6b3a;
}

.bono-saldo.bono-saldo-pendente {
  color: #b86a12;
}

.bono-papel-aviso {
  background: #fdf0e1;
  border: 1px solid #c77a1a;
  border-radius: var(--raio-pequeno);
  color: #7a4a0f;
  padding: 8px 12px;
  margin: 8px 0;
  font-size: 0.85rem;
}

.pagamento-confirmar-data {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.pagamento-confirmar-data input {
  width: auto;
}

.etiqueta-papel {
  margin-left: 6px;
  color: #7a4a0f;
  border-color: #c77a1a;
}

.etiqueta-saldo {
  margin-left: 6px;
  color: #fff;
  background: #c77a1a;
  border-color: #c77a1a;
}

.etiqueta-alerta-pack {
  margin-left: 6px;
  color: #fff;
  background: var(--cor-perigo);
  border-color: var(--cor-perigo);
}

/* Pack no card da Agenda e no detalhe da cita (26/09/2026) */
.cita-card-pack {
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.9;
}

.cita-card-pack-saldo {
  color: #b86a12;
}

.cita-card-pack-alerta {
  color: var(--cor-perigo);
}

.cita-card-pack-sem-dados {
  font-style: italic;
}

.detalhe-pack {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  padding: 10px 12px;
  margin: 10px 0;
  background: var(--cor-fundo);
}

.detalhe-pack-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.detalhe-pack-ultima {
  color: var(--cor-perigo);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.detalhe-cobro-acoes {
  margin: 6px 0 12px;
}

/* Recuperar leads (27/09/2026): telefone, janela, filtros, plantilla */
.telefone-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.botao-mini {
  padding: 2px 10px;
  font-size: 0.75rem;
}

.mensagens-item-telefone {
  font-size: 0.72rem;
  color: var(--cor-texto-suave);
}

.mensagens-ponto-esperando {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e07b12;
  margin-right: 6px;
  vertical-align: middle;
}

.etiqueta-janela-fechando {
  font-size: 0.68rem;
  padding: 1px 8px;
  color: #fff;
  background: #e07b12;
  border-color: #e07b12;
}

.etiqueta-janela-fechada {
  font-size: 0.68rem;
  padding: 1px 8px;
  color: var(--cor-texto-suave);
}

.mensagens-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.mensagens-filtros select {
  width: auto;
  font-size: 0.8rem;
  padding: 4px 8px;
}

.mensagens-filtro-extra {
  font-size: 0.75rem;
  padding: 4px 10px;
}

.mensagens-filtro-extra.ativa {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: #fff;
}

.mensagens-filtro-destaque:not(.ativa) {
  border-color: #e07b12;
  color: #a85a0c;
  font-weight: 700;
}

.mensagens-lote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.mensagens-lote select {
  width: auto;
}

.mensagens-lote-progreso {
  font-size: 0.8rem;
  font-weight: 600;
}

.mensagens-lote-check {
  margin-right: 6px;
}

.aviso-ventana-cerrada {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.form-plantilla {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  padding: 10px 12px;
  margin: 8px 0;
  font-size: 0.85rem;
}

.plantilla-campos label {
  display: block;
  margin-top: 6px;
}

.plantilla-previa {
  background: var(--cor-fundo);
  border-radius: var(--raio-pequeno);
  padding: 8px 10px;
  white-space: pre-wrap;
}

.plantilla-aviso {
  color: #a85a0c;
  font-weight: 600;
}

.botao-alerta-suave {
  width: 100%;
  margin: 6px 0;
  border-color: #c77a1a;
  color: #7a4a0f;
  font-size: 0.8rem;
}

/* Equipo: editar / sustituir (27/09/2026) */
.form-editar-equipo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 12px;
  margin: 4px 0 10px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-fundo);
}

.form-editar-equipo label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  flex: 1 1 200px;
}

.form-editar-equipo .acoes,
.form-editar-equipo p {
  flex-basis: 100%;
  margin: 0;
}

.sustituir-opcao {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  align-items: start;
  padding: 10px 12px;
  margin: 8px 0;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  cursor: pointer;
}

.sustituir-opcao .texto-suave {
  grid-column: 2;
  font-size: 0.85rem;
}

.aviso-sustituir {
  background: #fdf0e1;
  border: 1px solid #c77a1a;
  border-radius: var(--raio-pequeno);
  color: #7a4a0f;
  padding: 8px 12px;
  font-size: 0.85rem;
}

.sustituir-choques {
  color: var(--cor-perigo);
  font-size: 0.85rem;
  padding-left: 18px;
}

/* Sesiones de un pack (27/09/2026) */
.tabla-sessoes {
  font-size: 0.82rem;
}

.tabla-sessoes td {
  vertical-align: top;
}

.sessao-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sessao-acoes .botao {
  padding: 2px 10px;
  font-size: 0.75rem;
}

.etiqueta-sessao-pendente {
  color: var(--cor-texto-suave);
}

.etiqueta-sessao-reservada {
  color: #fff;
  background: #6d8fb3;
  border-color: #6d8fb3;
}

.etiqueta-sessao-usada {
  color: #fff;
  background: #2e6b3a;
  border-color: #2e6b3a;
}

.marca-importado {
  font-size: 0.72rem;
  color: #a85a0c;
  font-weight: 600;
}

.form-sessao input,
.form-sessao select {
  width: auto;
}

.vincular-detalhe {
  margin-top: 8px;
}

.vincular-caso {
  display: block;
  padding: 6px 8px;
  margin: 4px 0;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  cursor: pointer;
}

.vincular-caso .texto-suave {
  display: block;
  margin-left: 22px;
}

.vincular-caso.desabilitado {
  opacity: 0.6;
  cursor: not-allowed;
}

.aviso-arquivado {
  display: block;
  margin: 8px 0;
  padding: 8px 10px;
  border: 2px solid var(--cor-perigo);
  border-radius: var(--raio-pequeno);
  background: #fbe7e5;
  color: #8e2a23;
  font-weight: 600;
}

.nota-observacoes {
  font-size: 0.78rem;
  font-style: italic;
  margin: 0 0 4px;
}

li.bono-com-sessoes {
  flex-wrap: wrap;
}

li.bono-com-sessoes > .sessoes-pack {
  flex-basis: 100%;
  margin-top: 8px;
}

/* Importar sesiones de Observaciones */
.dialogo-importar {
  width: min(1100px, calc(100vw - 32px));
}

.importar-resumo {
  font-weight: 600;
}

.importar-texto {
  white-space: pre-wrap;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.78rem;
}

.importar-linha {
  font-size: 0.8rem;
}

.importar-importar {
  color: #2e6b3a;
  font-weight: 600;
}

.importar-ja_registrada {
  color: var(--cor-texto-suave);
}

.importar-sem_sessao_livre,
.importar-data_futura,
.importar-nao-lida {
  color: #a85a0c;
}

/* Botão "Pack" curto da cita na Agenda (28/09/2026) */
.pack-cita-cabecalho {
  margin: 0 0 12px;
  line-height: 1.5;
}
.pack-cita-atual {
  display: block;
  margin-top: 4px;
  font-weight: 600;
  color: var(--cor-primaria);
}
.pack-cita-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.pack-cita-opcao {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 200px;
}
.pack-cita-opcao .botao {
  width: 100%;
  padding: 12px;
}
.pack-cita-opcoes .botao.ativo,
.bono-atajos .botao.ativo {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 1px;
}
.pack-cita-sessao {
  margin: 10px 0;
}
.pack-cita-sessao select {
  width: auto;
  margin-left: 6px;
}
.pack-cita-lista-packs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}
.pack-cita-linha-pack {
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  cursor: pointer;
}
.pack-cita-linha-pack:has(input:checked) {
  border-color: var(--cor-primaria);
  background: var(--cor-fundo);
}

/* Link discreto ("cambiar", "quitar") */
.botao-link {
  background: none;
  border: 0;
  padding: 0 4px;
  color: var(--cor-primaria);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
}

/* Notas da clienta (ficha e pack) */
.lista-notas {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lista-notas .nota-cliente {
  padding: 8px 0;
  border-bottom: 1px solid var(--cor-borda);
}
.lista-notas .nota-cliente p {
  margin: 2px 0 0;
  white-space: pre-wrap;
}
.bono-validade-info {
  margin: 4px 0 8px;
}

/* Rádio/checkbox dentro destes rótulos: na mesma linha do texto (o
   "input { width: 100% }" geral os jogava pra uma linha própria). */
.vincular-caso,
.pack-cita-linha-pack {
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--cor-texto, inherit);
  text-transform: none;
  letter-spacing: normal;
}
.vincular-caso input[type='radio'],
.pack-cita-linha-pack input[type='radio'],
.aviso-arquivado input[type='checkbox'] {
  width: auto;
  margin: 0 6px 0 0;
  padding: 0;
  vertical-align: middle;
  box-shadow: none;
}
.pack-cita-linha-pack {
  margin-top: 0;
}

/* =================================================================
   Importe da cita, regalo do pack (01/10/2026)
   ================================================================= */

/* Erro que fica no formulário até a próxima tentativa (mostrarErroNoFormulario) */
.erro-formulario {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--cor-perigo);
  border-radius: 8px;
  background: #fbeceb;
  color: #8f2f28;
  font-size: 0.9rem;
}

/* "Importe corregido por Yurleny: 45 € → 49 €" */
.correcoes-importe {
  margin: 6px 0 10px;
  font-size: 0.82rem;
  color: var(--cor-texto-suave);
}
.correcoes-importe p {
  margin: 2px 0;
}

/* Pergunta "¿qué es este dinero?" numa sessão de pack */
.importe-pack {
  margin: 10px 0;
  padding: 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-primaria-suave);
}
.importe-pack .linha-dupla {
  margin-top: 8px;
  gap: 8px;
}

#detalhe-anadir-importe {
  margin-top: 4px;
  font-size: 0.85rem;
}

/* "🎁 Incluye: Hidratación de piel" + "Regalo entregado" */
.pack-obsequio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0;
  font-size: 0.88rem;
  color: var(--cor-primaria-escura);
}
.pack-obsequio .botao {
  padding: 3px 10px;
  font-size: 0.8rem;
}
.etiqueta-obsequio-entregado {
  color: #2f6b3a;
  border-color: #6aa676;
}


/* =================================================================
   REDESENHO 10/2026 — FASE 0: base visual
   Fica no FIM do arquivo de propósito: mesma especificidade, quem vem
   depois vence - assim as regras antigas continuam valendo onde este
   bloco não mexe.
   ================================================================= */

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fonte-corpo);
}

h1, h2, h3,
.titulo-serif {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  letter-spacing: 0;
}

/* Ícones do sprite (index.html) - traço 1.8, sem preenchimento */
.sprite-icones {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.icone {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------- Botões ---------------------------- */
/* Tudo que se toca: no mínimo 44×44px. */
.botao {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 12px;
  background: var(--tarjeta);
  color: var(--texto);
  font-size: 0.9rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.botao:hover {
  background: var(--tarjeta-suave);
}
.botao-primario {
  min-height: 48px;
  background: var(--primario);
  border-color: var(--primario);
  color: #fff;
  border-radius: 14px;
}
.botao-primario:hover {
  background: var(--primario-oscuro);
  border-color: var(--primario-oscuro);
}
.botao-primario:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.botao-perigo {
  color: var(--peligro);
  border-color: #E3C3BF;
}
.botao-sucesso,
.botao-sucesso:disabled {
  background: #E2F0E7;
  border-color: #9CC8AC;
  color: #25603F;
  opacity: 1;
}
.botao-link {
  min-height: 44px;
  color: var(--primario-oscuro);
}
/* Botão só com ícone (fechar, sair...) */
.botao-icone {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 12px;
  background: var(--tarjeta);
  color: var(--texto-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.botao-icone:hover {
  background: var(--tarjeta-suave);
}
.botao-icone-claro {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--sidebar-texto);
}
.botao-icone-claro:hover {
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 767px) {
  .botao-primario {
    min-height: 52px;
    font-size: 1rem;
  }
}

/* --------------------------- Campos --------------------------- */
input,
textarea,
select {
  border-color: var(--borde-fuerte);
  border-radius: 12px;
  font-family: inherit;
  color: var(--texto);
}
input:not([type="checkbox"]):not([type="radio"]),
select {
  min-height: 44px;
}
select {
  padding: 8px 12px;
  background: var(--tarjeta);
  border: 1px solid var(--borde-fuerte);
  font-size: 0.9rem;
}
label {
  color: var(--texto-3);
}

/* ----------------------- Chips / píldoras ----------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: var(--tarjeta-suave);
  color: var(--texto-2);
  border: 1px solid var(--borde);
}
/* Estados da cita (chipEstadoCita em app.js) */
.chip-sin-confirmar { background: #F6E9DE; color: #6E4428; border-color: #F6E9DE; }
.chip-confirmada    { background: #E3ECF6; color: #24507D; border-color: #E3ECF6; }
.chip-realizada     { background: #E2F0E7; color: #25603F; border-color: #E2F0E7; }
.chip-no-vino       { background: #F8E3E1; color: #9A2F28; border-color: #F8E3E1; }
.chip-anulada       { background: #F1ECE2; color: #4F483F; border-color: #F1ECE2; }

/* Aviso médico: âmbar com triângulo (antes vermelho) */
.alerta-medica {
  background: #F6E9DE;
  border: 1px solid #F0D6A6;
  color: #7A4A06;
  border-radius: 12px;
}
.aviso-medico {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #F6E9DE;
  color: #7A4A06;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.9rem;
  white-space: pre-line;
}

/* ------------------ Seletor de opções em grade ------------------ */
/* Substitui <select> em forma de pago, cuotas, tipo de cobro, pack. */
.opcoes-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}
.opcao {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 12px;
  background: var(--tarjeta);
  color: var(--texto);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.opcao:hover {
  background: var(--tarjeta-suave);
}
.opcao[aria-pressed="true"] {
  border: 2px solid var(--primario);
  background: var(--primario-suave);
  padding: 9px 11px; /* compensa a borda de 2px */
}

/* Controle segmentado (Gastos | Inventario, Día | Semana...) */
.segmentado {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--tarjeta-suave);
  border: 1px solid var(--borde);
  margin-bottom: 16px;
}
.segmentado button {
  min-height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-family: inherit;
  font-weight: 600;
  color: var(--texto-2);
  cursor: pointer;
}
.segmentado button.ativo {
  background: var(--tarjeta);
  color: var(--texto);
  box-shadow: 0 1px 3px rgba(46, 38, 25, 0.12);
}

/* Avatar com iniciais */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primario-suave);
  color: var(--texto);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.avatar-pequeno {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
}

/* ------------- Painel lateral (desktop) / gaveta (celular) -------------
   Um componente só (abrirPainelLateral em app.js): painel de 420px à
   direita a partir de 1024px, sem escurecer a página; abaixo disso,
   gaveta que sobe de baixo com fundo escurecido. */
.painel-lateral {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--tarjeta);
  border-left: 1px solid var(--borde);
  box-shadow: -12px 0 32px rgba(46, 38, 25, 0.12);
  z-index: 60;
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.22s ease;
  visibility: hidden;
}
.painel-lateral.aberto {
  transform: none;
  visibility: visible;
}
.painel-lateral-asa {
  display: none;
}
.painel-lateral-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 10px;
}
.painel-lateral-corpo {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 20px;
  overscroll-behavior: contain;
}
.painel-lateral-pe {
  border-top: 1px solid var(--borde);
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  background: var(--tarjeta);
}
.painel-lateral-pe:empty {
  display: none;
}
.painel-lateral-fundo {
  position: fixed;
  inset: 0;
  background: rgba(30, 24, 14, 0.45);
  z-index: 59;
}
/* No desktop o painel não escurece a página (a agenda continua usável) */
@media (min-width: 1024px) {
  .painel-lateral-fundo {
    display: none;
  }
  /* Conteúdo abre espaço pro painel, pra nada ficar escondido atrás dele */
  body.painel-lateral-aberto .conteudo-principal {
    margin-right: 420px;
  }
}
@media (max-width: 1023px) {
  .painel-lateral {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 92vh;
    border-left: none;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 32px rgba(46, 38, 25, 0.18);
    transform: translateY(105%);
  }
  .painel-lateral-asa {
    display: block;
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: var(--borde-fuerte);
    margin: 10px auto 0;
  }
}

/* ------------------------- Navegação ------------------------- */
.sidebar {
  width: 232px;
  padding: 20px 14px;
  gap: 4px;
}
.sidebar-marca {
  justify-content: space-between;
  margin-bottom: 14px;
}
.sidebar-marca-nome {
  font-size: 1.5rem;
  font-weight: 400;
}
.sidebar-fechar,
.sidebar-asa {
  display: none;
}
.sidebar-centro-rotulo {
  margin: 0 8px 4px;
  color: var(--cor-sidebar-texto-suave);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sidebar-centro {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--sidebar-texto);
  margin-bottom: 10px;
}
.sidebar-centro option {
  color: var(--texto);
}
.sidebar-centro:disabled {
  background: rgba(255, 255, 255, 0.04);
  color: var(--sidebar-texto);
  opacity: 0.8;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 0.9rem;
  color: var(--sidebar-texto);
}
.sidebar-item .icone {
  opacity: 0.9;
}
.sidebar-item-com-badge .badge-nao-lidas {
  margin-left: auto;
}
.sidebar-item-interno {
  display: none !important;
}
.sidebar-chevron {
  margin-left: auto;
  width: 16px;
  height: 16px;
  transition: transform 0.15s;
}
#botao-mas.aberto .sidebar-chevron {
  transform: rotate(180deg);
}
.sidebar-mas .sidebar-item {
  padding-left: 40px;
  font-size: 0.86rem;
}
.sidebar-rodape {
  gap: 6px;
}
.sidebar-pessoa {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 0;
}
.sidebar-pessoa-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.sidebar-usuario {
  color: #fff;
  font-weight: 600;
  font-size: 0.86rem;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-papel {
  color: var(--cor-sidebar-texto-suave);
  font-size: 0.75rem;
}
.sidebar .avatar {
  background: #EAE3D7;
  color: var(--sidebar);
}

/* 768-900px: o CSS antigo empilhava o menu em cima; agora ele fica ao lado */
@media (min-width: 768px) and (max-width: 900px) {
  .app-shell {
    flex-direction: row;
  }
  .sidebar {
    width: 232px;
    padding: 20px 14px;
  }
}

/* Barra inferior: só no celular */
.barra-inferior {
  display: none;
}
.sidebar-fundo {
  display: none;
}

@media (max-width: 767px) {
  .app-shell {
    display: block;
  }
  .conteudo-principal {
    padding-bottom: calc(var(--altura-barra-inferior) + env(safe-area-inset-bottom));
  }
  .barra-inferior {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    height: calc(var(--altura-barra-inferior) + env(safe-area-inset-bottom));
    padding: 6px 4px env(safe-area-inset-bottom);
    background: var(--tarjeta);
    border-top: 1px solid var(--borde);
    box-shadow: 0 -4px 16px rgba(46, 38, 25, 0.06);
  }
  .barra-inferior-item {
    position: relative;
    flex: 1;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: none;
    background: none;
    border-radius: 12px;
    color: var(--texto-3);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
  }
  .barra-inferior-item .icone {
    width: 24px;
    height: 24px;
  }
  .barra-inferior-item.ativa {
    color: var(--primario);
  }
  .badge-barra {
    position: absolute;
    top: 4px;
    left: calc(50% + 6px);
  }

  /* O menu lateral vira a gaveta «Más» */
  .sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 88vh;
    z-index: 70;
    border-radius: 24px 24px 0 0;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
    transform: translateY(105%);
    transition: transform 0.22s ease;
    visibility: hidden;
    overflow-y: auto;
  }
  body.sidebar-aberta .sidebar {
    transform: none;
    visibility: visible;
  }
  .sidebar-asa {
    display: block;
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    margin: 2px auto 10px;
  }
  .sidebar-fechar {
    display: inline-flex;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--sidebar-texto);
  }
  .sidebar-fundo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 69;
    background: rgba(30, 24, 14, 0.45);
  }
  .sidebar-fundo.oculto {
    display: none !important;
  }
  /* O que já está na barra de baixo não repete na gaveta */
  #aba-inicio,
  #aba-agenda,
  #aba-clientes,
  #aba-mensagens,
  .sidebar-nav > .sidebar-seccion:first-child {
    display: none;
  }
}

/* Ajustes da fase 0 vistos nas capturas */
.sidebar-item-com-badge {
  justify-content: flex-start;
}
.com-icone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.com-icone .icone {
  width: 18px;
  height: 18px;
}
.pack-obsequio .icone {
  width: 18px;
  height: 18px;
}
@media (max-width: 767px) {
  /* Na gaveta, a gaveta inteira rola (não uma caixinha dentro dela) */
  .sidebar {
    display: block;
  }
  .sidebar-nav {
    overflow: visible;
  }
}
@media (min-width: 768px) {
  /* Menu fixo na altura da janela; só a lista rola (com «Más» aberto). */
  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }
  .sidebar-nav {
    overflow-y: auto;
    min-height: 0;
  }
}


/* =================================================================
   REDESENHO 10/2026 — FASE 1: a cita no painel / gaveta + calendário
   ================================================================= */

/* Texto só pra leitor de tela */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.painel-lateral-titulo {
  flex: 1;
  min-width: 0;
}
.painel-lateral-acoes {
  display: flex;
  gap: 8px;
}
.painel-lateral-corpo > * + * {
  margin-top: 14px;
}

/* Cabeçalho: nome em serif 30px (link pra ficha), telefone · origem */
.pc-nome {
  display: block;
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  font-family: var(--fonte-titulo);
  font-size: 30px;
  line-height: 1.1;
  color: var(--texto);
  cursor: pointer;
  min-height: 44px;
}
.pc-nome:hover {
  color: var(--primario-oscuro);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.pc-sub {
  color: var(--texto-3);
  font-size: 0.86rem;
}
.botao-whatsapp {
  color: #1F7A45;
}
.pc-titulo-acao {
  font-size: 1.7rem;
  margin-top: 2px;
}
.pc-voltar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  font-weight: 600;
  cursor: pointer;
}

/* Dados */
.pc-estado {
  display: flex;
  gap: 6px;
}
.pc-dados {
  display: grid;
  gap: 8px;
  margin: 0;
}
.pc-dado {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pc-dado dt {
  color: var(--texto-3);
  display: flex;
}
.pc-dado dd {
  margin: 0;
  color: var(--texto);
}

/* Progresso Reservada -> Confirmada -> Realizada */
.pc-progresso {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.pc-etapa {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pc-barra {
  height: 4px;
  border-radius: 999px;
  background: var(--borde);
}
.pc-etapa.feita .pc-barra {
  background: var(--primario);
}
.pc-etapa.ruim .pc-barra {
  background: var(--peligro);
}
.pc-etapa-texto {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--texto-3);
}
.pc-etapa.feita .pc-etapa-texto {
  color: var(--texto-2);
}
.pc-etapa.ruim .pc-etapa-texto {
  color: var(--peligro);
}
.pc-anulada-texto {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  color: #4F483F;
}

/* Blocos */
.pc-bloco {
  background: var(--tarjeta-suave);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 12px 14px;
}
.pc-bloco-titulo {
  font-family: var(--fonte-corpo);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-3);
  margin-bottom: 8px;
}
.pc-pack .pc-bloco-titulo {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  color: var(--texto);
}
.pc-cobro-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.pc-cobrado {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #E2F0E7;
  color: #25603F;
  border-radius: 12px;
  padding: 8px 8px 8px 12px;
}
.pc-cobrado strong {
  flex: 1;
}
.pc-correcao {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--texto-3);
}
.pc-pack-sessao {
  font-weight: 600;
  margin-bottom: 6px;
}
.pc-barra-progresso {
  height: 6px;
  border-radius: 999px;
  background: var(--borde);
  overflow: hidden;
}
.pc-barra-progresso span {
  display: block;
  height: 100%;
  background: var(--primario);
}
.pc-pack-pago,
.pc-regalo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.pc-pack-pago span,
.pc-regalo span {
  flex: 1;
}
.pc-nota p {
  margin-top: 4px;
  white-space: pre-line;
}
.pc-ver-ficha {
  padding: 0;
  border: none;
  background: none;
  font-weight: 600;
  cursor: pointer;
}

/* Pé fixo */
.painel-lateral-pe {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pc-principal {
  font-size: 1rem;
}
.pc-secundarias {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pc-acao {
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 12px;
  background: var(--tarjeta);
  color: var(--texto-2);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.pc-acao:hover:not(:disabled) {
  background: var(--tarjeta-suave);
}
.pc-acao:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.pc-acao-perigo {
  color: var(--peligro);
}

/* 1.1 Cobrar */
.pc-cobro-form label,
.pc-rotulo {
  display: block;
  margin: 14px 0 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto-3);
}
.pc-importe-grande {
  font-size: 32px;
  font-weight: 700;
  border: 2px solid var(--borde-fuerte) !important;
  border-radius: 14px;
  min-height: 64px !important;
  padding: 8px 14px;
}
.pc-importe-grande:focus {
  border-color: var(--primario) !important;
  outline: none;
}
.pc-ajuda {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--texto-3);
}
.pc-nota-corrigir {
  background: var(--primario-suave);
  color: var(--primario-oscuro);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.86rem;
}
.pc-tipo-cobro {
  display: flex;
  width: 100%;
}
.pc-tipo-cobro button {
  flex: 1;
}
.pc-produtos {
  margin-top: 10px;
}
.pc-produto-linha {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 8px;
}
.pc-produto-ok {
  font-size: 0.85rem;
  color: #25603F;
  margin-top: 6px;
}
.pc-packs {
  display: grid;
  gap: 8px;
}
.pc-pack-opcao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}
.pc-pack-opcao span {
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--texto-2);
}
.pc-pergunta-pago input {
  margin-top: 8px;
}
.pc-cobro-pe {
  display: contents;
}

/* Pantalla de éxito */
.pc-exito {
  text-align: center;
  padding: 32px 0 8px;
}
.pc-exito-icone {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #E2F0E7;
  color: #25603F;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pc-exito-icone .icone {
  width: 32px;
  height: 32px;
}
.pc-exito-titulo {
  font-size: 2.2rem;
}

/* «Editar» dentro do painel: o diálogo de sempre, sem moldura */
.pc-edicao .ficha-cabecalho h2 {
  display: none;
}

/* ------------------- 1.2 Calendário (computador) ------------------- */
.agenda-navegacao {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}
.agenda-titulo {
  font-size: 2rem;
  min-width: 260px;
  text-align: center;
}
.agenda-busca {
  margin: 0 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 12px;
  background: var(--tarjeta);
  color: var(--texto-3);
  width: min(300px, 100%);
}
.agenda-busca input {
  border: none;
  padding: 0;
  min-height: 40px;
  background: transparent;
  outline: none;
}
.agenda-cabecalho {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

/* Card de cita: fundo suave da profissional, sem borda colorida, raio 10 */
.cita-card {
  border-left: none;
  border-radius: 10px;
  background: var(--cor-prof-suave, var(--primario-suave));
  padding: 5px 8px;
  font-size: 0.78rem;
  color: var(--texto);
}
.cita-card-hora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-weight: 600;
}
.cita-card-estado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  background: none !important;
  border: none !important;
  padding: 0;
  white-space: nowrap;
}
.cita-card-ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.cita-card-cliente {
  font-weight: 700;
}
.cita-card.estado-realizado {
  opacity: 1;
}
.cita-card.estado-ausente {
  opacity: 0.6;
}
.cita-card-selecionada {
  box-shadow: 0 0 0 2px var(--primario);
  z-index: 2;
}
.cita-card-pack {
  font-weight: 600;
}
.grade-profesionais-cabecalho {
  border-top-color: var(--cor-prof, var(--primario));
}

/* Ajustes da fase 1 vistos nas capturas */
.agenda-navegacao .agenda-titulo {
  font-size: 1.9rem;
  font-weight: 400;
}
/* As 4 formas de pago: 4 colunas no painel; 2x2 no celular */
.painel-lateral .opcoes-grade {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 767px) {
  .painel-lateral .opcoes-grade {
    grid-template-columns: repeat(2, 1fr);
  }
}
.painel-lateral .opcao {
  padding-left: 6px;
  padding-right: 6px;
}


/* =================================================================
   REDESENHO 10/2026 — FASE 2: agenda no celular (lista do dia)
   ================================================================= */
.agenda-celular,
.agenda-fab {
  display: none;
}

@media (max-width: 767px) {
  /* A agenda do computador (cabeçalho, grade, semana, mes) some no celular */
  #painel-agenda .agenda-cabecalho,
  #painel-agenda #aviso-modo-bloqueio,
  #painel-agenda #grade-profesionais,
  #painel-agenda #lista-agenda-dia,
  #painel-agenda #grade-semana,
  #painel-agenda #grade-mes {
    display: none !important;
  }
  .agenda-celular {
    display: block;
  }
  #painel-agenda {
    padding: 12px 16px 24px;
  }

  .ac-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  .ac-centro {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--texto-3);
  }
  .ac-data {
    font-size: 34px;
    line-height: 1.05;
    margin-top: 2px;
  }
  .ac-busca {
    margin-top: 10px;
  }
  .ac-busca input {
    width: 100%;
  }

  /* Tira de 7 dias */
  .ac-dias {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 14px -4px 0;
  }
  .ac-semana {
    width: 32px;
    min-width: 32px;
    height: 44px;
    border: none;
    background: none;
  }
  .ac-dia {
    flex: 1;
    min-height: 52px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: none;
    font-family: inherit;
    color: var(--texto);
    cursor: pointer;
  }
  .ac-dia-letra {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--texto-3);
  }
  .ac-dia-numero {
    font-size: 1rem;
    font-weight: 700;
  }
  .ac-dia.hoje {
    border-color: var(--borde-fuerte);
  }
  .ac-dia.domingo .ac-dia-numero,
  .ac-dia.domingo .ac-dia-letra {
    color: #9A8E78;
  }
  .ac-dia.escolhido {
    background: var(--primario);
    border-color: var(--primario);
  }
  .ac-dia.escolhido .ac-dia-letra,
  .ac-dia.escolhido .ac-dia-numero {
    color: #fff;
  }

  /* Chips de profissional (desliza pro lado) */
  .ac-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 0 4px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    scrollbar-width: none;
  }
  .ac-chips::-webkit-scrollbar {
    display: none;
  }
  .ac-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    background: var(--tarjeta);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--texto-2);
    cursor: pointer;
  }
  .ac-chip[aria-pressed="true"] {
    border: 2px solid var(--primario);
    background: var(--primario-suave);
    color: var(--texto);
  }
  .ac-chip-ponto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .ac-resumo {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
  }

  /* Lista de citas */
  .ac-lista {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
  }
  .ac-item {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 10px;
    align-items: start;
  }
  .ac-hora {
    display: flex;
    flex-direction: column;
    padding-top: 12px;
    font-size: 0.95rem;
  }
  .ac-hora span {
    font-size: 0.72rem;
    color: var(--texto-3);
  }
  .ac-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-height: 44px;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid var(--borde);
    border-radius: 16px;
    background: var(--tarjeta);
    font-family: inherit;
    color: var(--texto);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(46, 38, 25, 0.06);
  }
  .ac-card-no-vino {
    opacity: 0.6;
  }
  .ac-card-linha1 {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .ac-card-nome {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ac-card-alerta {
    color: #7A4A06;
    width: 18px;
    height: 18px;
  }
  .ac-card-tratamento {
    color: var(--texto-2);
    font-size: 0.9rem;
  }
  .ac-card-linha3 {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--texto-3);
    font-size: 0.82rem;
    font-weight: 600;
  }
  .ac-vazio {
    text-align: center;
    padding: 32px 0;
    color: var(--texto-3);
    display: grid;
    gap: 12px;
    justify-items: center;
  }

  /* Botão flutuante «+» acima da barra de baixo */
  #painel-agenda:not(.oculto) ~ .agenda-fab,
  .agenda-fab {
    position: fixed;
    right: 16px;
    bottom: calc(var(--altura-barra-inferior) + env(safe-area-inset-bottom) + 16px);
    z-index: 45;
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    background: var(--primario);
    color: #fff;
    box-shadow: 0 8px 20px rgba(111, 85, 24, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .agenda-fab .icone {
    width: 28px;
    height: 28px;
    stroke-width: 2.2;
  }
  #painel-agenda.oculto .agenda-fab {
    display: none;
  }

  /* Diálogos (ex.: «Nueva cita») viram gaveta que sobe de baixo */
  .dialogo {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    margin: auto 0 0;
    border-radius: 24px 24px 0 0;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  }
  .dialogo::backdrop {
    background: rgba(30, 24, 14, 0.45);
  }
}

/* Ajustes da fase 2 vistos nas capturas */
.dialogo h2 {
  font-size: 1.6rem;
}
@media (max-width: 767px) {
  .dialogo select {
    width: 100%;
  }
}


/* =================================================================
   REDESENHO 10/2026 — FASE 3: ficha da clienta
   ================================================================= */

/* Computador: com a ficha aberta, a lista sai e a ficha ocupa tudo */
.painel.com-ficha {
  grid-template-columns: 1fr;
  max-width: 1280px;
}
.painel.com-ficha .coluna-lista {
  display: none;
}

.fc-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.fc-voltar {
  display: none;
}
.fc-rota {
  flex: 1;
  color: var(--texto-3);
  font-size: 0.9rem;
}
.fc-rota .botao-link {
  padding: 0;
  border: none;
  background: none;
  min-height: 0;
  font-weight: 600;
  cursor: pointer;
}
.fc-topo-acoes {
  display: flex;
  gap: 8px;
}

.fc-grade {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  align-items: start;
}
.fc-lado > .cartao,
.fc-lado > .alerta-medica,
.fc-lado > button,
.fc-lado > form {
  margin-bottom: 16px;
}

/* Cartão do cabeçalho */
.fc-heroi {
  text-align: left;
}
.fc-avatar {
  width: 64px;
  height: 64px;
  font-size: 1.3rem;
  background: var(--primario-suave);
}
.fc-nome {
  font-size: 40px;
  line-height: 1.05;
  margin: 10px 0 4px;
  word-break: break-word;
}
.fc-sub {
  color: var(--texto-3);
  font-size: 0.9rem;
}
.fc-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.chip-pack-ativo {
  background: var(--primario-suave);
  color: var(--primario-oscuro);
  border-color: var(--primario-suave);
}
.fc-acoes-rapidas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}
.fc-acao {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 12px;
  background: var(--tarjeta);
  color: var(--texto);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
}
.fc-acao:hover {
  background: var(--tarjeta-suave);
}
.fc-acao-principal {
  background: var(--primario);
  border-color: var(--primario);
  color: #fff;
}
.fc-acao-principal:hover {
  background: var(--primario-oscuro);
}
.fc-acao-pack {
  border-color: var(--primario);
  color: var(--primario-oscuro);
  background: var(--primario-suave);
}
.fc-acao.desabilitado {
  opacity: 0.45;
}
.fc-dados {
  margin-top: 16px;
  font-size: 0.85rem;
}

/* En números */
.fc-numeros dl {
  display: grid;
  gap: 8px;
}
.fc-numeros dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.fc-numeros dt {
  color: var(--texto-3);
  font-size: 0.86rem;
}
.fc-numeros dd {
  margin: 0;
  font-weight: 700;
  font-size: 1.1rem;
}

/* Abas */
.fc-abas {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--tarjeta-suave);
  border: 1px solid var(--borde);
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.fc-abas::-webkit-scrollbar {
  display: none;
}
.fc-abas button {
  flex: 1 0 auto;
  min-height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-family: inherit;
  font-weight: 600;
  color: var(--texto-2);
  cursor: pointer;
  white-space: nowrap;
}
.fc-abas button.ativo,
.fc-abas button[aria-selected="true"] {
  background: var(--tarjeta);
  color: var(--texto);
  box-shadow: 0 1px 3px rgba(46, 38, 25, 0.12);
}
.fc-aba-acoes {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

/* Resumen */
.fc-resumo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.fc-resumo .cartao {
  margin-bottom: 0;
}
.fc-cartao-resumo h3 {
  font-family: var(--fonte-corpo);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-3);
  margin-bottom: 8px;
}
.fc-cartao-nota {
  grid-column: 1 / -1;
}
.fc-cartao-nota p {
  white-space: pre-line;
  margin-bottom: 6px;
}
.fc-linha-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fc-tabela-historial {
  margin-top: 16px;
}
.fc-historial td {
  vertical-align: middle;
}
.fc-importe small {
  display: block;
}
.fc-corrigido {
  color: var(--texto-3);
}
.fc-lapis {
  width: 40px;
  height: 40px;
  min-width: 40px;
}

/* Packs: sessões e cuotas */
.fc-sessoes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.fc-sessao {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--borde-fuerte);
  background: var(--tarjeta);
}
.fc-sessao.usada {
  background: var(--primario);
  border-color: var(--primario);
}
.fc-cuotas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* Notas */
.fc-nota-form {
  margin-bottom: 16px;
}
.fc-nota-form label {
  margin-top: 0;
}

/* «Eliminar clienta» no fim de «Editar datos» */
.fc-zona-perigo {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ------------------------------ Celular ------------------------------ */
@media (max-width: 1100px) {
  .fc-grade {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  /* Lista OU ficha, nunca as duas */
  .painel.com-detalhe .coluna-lista {
    display: none;
  }
  .fc-voltar {
    display: inline-flex;
  }
  .fc-rota {
    visibility: hidden;
  }
  .fc-topo-acoes #botao-exportar-cliente {
    display: none;
  }
  .fc-heroi {
    text-align: center;
  }
  .fc-avatar {
    width: 72px;
    height: 72px;
    font-size: 1.5rem;
  }
  .fc-nome {
    font-size: 36px;
  }
  .fc-chips {
    justify-content: center;
  }
  /* As 4 ações: ícones de 56px numa fila */
  .fc-acoes-rapidas {
    grid-template-columns: repeat(4, 1fr);
  }
  .fc-acao {
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    border: none;
    background: none;
    font-size: 0.75rem;
    color: var(--texto-2);
  }
  .fc-acao .icone {
    width: 56px;
    height: 56px;
    padding: 15px;
    border-radius: 50%;
    border: 1px solid var(--borde-fuerte);
    background: var(--tarjeta);
    color: var(--texto);
  }
  .fc-acao-principal,
  .fc-acao-principal:hover,
  .fc-acao-pack {
    background: none;
    border: none;
    color: var(--texto-2);
  }
  .fc-acao-pack .icone {
    background: var(--primario);
    border-color: var(--primario);
    color: #fff;
  }
  .fc-dados,
  .fc-numeros,
  .fc-tabela-historial {
    display: none;
  }
  .fc-resumo {
    grid-template-columns: 1fr;
  }
  .fc-abas {
    margin-left: -16px;
    margin-right: -16px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

/* Ajustes da fase 3 vistos nas capturas */
/* Filhos de grid podem encolher (a barra de abas rolável esticava a ficha
   além da tela no celular). */
.painel > *,
.fc-grade > *,
.fc-principal,
.fc-lado {
  min-width: 0;
}
.fc-heroi .fc-nome {
  font-size: 40px;
  margin: 10px 0 4px;
}
/* Serif 400 precisa de tamanho maior pra ter o mesmo peso visual */
.cartao h2 {
  font-size: 1.6rem;
}
.cartao h3 {
  font-size: 1.3rem;
}
@media (max-width: 767px) {
  .fc-heroi .fc-nome {
    font-size: 36px;
  }
}
.fc-resumo .fc-cartao-resumo h3 {
  font-family: var(--fonte-corpo);
  font-size: 0.78rem;
}
.acoes > .etiqueta {
  align-self: center;
}

/* =================================================================
   REDESENHO 10/2026 — FASE 4: vender pack
   ================================================================= */
.vp-corpo > label,
.vp-corpo > .pc-rotulo {
  display: block;
  margin: 16px 0 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto-3);
}
.vp-cartoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.vp-cartao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 132px;
  padding: 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 14px;
  background: var(--tarjeta);
  font-family: inherit;
  text-align: left;
  color: var(--texto);
  cursor: pointer;
}
.vp-cartao[aria-pressed="true"] {
  border: 2px solid var(--primario);
  background: var(--primario-suave);
  padding: 11px;
}
.vp-preco {
  font-family: var(--fonte-titulo);
  font-size: 34px;
  line-height: 1;
}
.vp-sessoes {
  font-weight: 700;
  font-size: 0.9rem;
}
.vp-desc {
  font-size: 0.78rem;
  color: var(--texto-2);
}
.vp-regalo {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primario-oscuro);
}
.vp-regalo .icone {
  width: 16px;
  height: 16px;
}
.vp-outro {
  margin-top: 10px;
}
.vp-outro.ativo {
  border: 2px solid var(--primario);
  background: var(--primario-suave);
}
.vp-caixa-outro {
  margin-top: 8px;
}
.vp-paga-outro {
  margin-top: 8px;
}
.vp-corpo select,
.vp-corpo input {
  width: 100%;
}
.vp-sugestoes {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.vp-sugestao {
  width: 100%;
  min-height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--tarjeta);
  font-family: inherit;
  cursor: pointer;
}
.vp-resumo-hoy {
  font-weight: 700;
  font-size: 1rem;
}
.vp-resumo-pendiente {
  font-size: 0.85rem;
  color: var(--texto-3);
  margin-top: -6px;
}
@media (max-width: 400px) {
  .vp-preco {
    font-size: 28px;
  }
  .vp-cartao {
    padding: 10px 8px;
  }
}


/* =================================================================
   REDESENHO 10/2026 — FASE 5: Ajustes
   ================================================================= */
.aj-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}
.aj-layout > * {
  min-width: 0;
}
.aj-menu {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aj-grupo {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-3);
  padding: 14px 10px 4px;
}
.aj-grupo:first-child {
  padding-top: 0;
}
.aj-menu button {
  min-height: 44px;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: none;
  text-align: left;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texto-2);
  cursor: pointer;
}
.aj-menu button:hover {
  background: var(--tarjeta-suave);
}
.aj-menu button.ativo {
  background: var(--primario-suave);
  color: var(--texto);
}
.aj-cabecalho {
  margin-bottom: 14px;
}
.aj-cabecalho h2 {
  font-size: 2.2rem;
}
.aj-cartao h3 {
  font-size: 1.3rem;
}
.aj-equipo-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.aj-equipo-topo .segmentado {
  margin-bottom: 0;
}
.aj-vista-anterior {
  margin-top: 20px;
  border-top: 1px solid var(--borde);
  padding-top: 12px;
}
.aj-vista-anterior summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  color: var(--texto-3);
}

/* Tabela da equipe */
.aj-equipo td {
  vertical-align: middle;
}
.aj-grupo-linha {
  display: none;
}
.aj-pessoa-botao {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--texto);
}
.aj-pessoa-textos {
  display: flex;
  flex-direction: column;
}
.aj-pessoa-textos .texto-suave {
  font-size: 0.78rem;
}
.aj-pessoa-botao:hover strong {
  text-decoration: underline;
}
.aj-chip-gerente { background: #F1ECE2; color: #4F483F; border-color: #F1ECE2; }
.aj-chip-responsable_operaciones { background: #E3ECF6; color: #24507D; border-color: #E3ECF6; }
.aj-chip-encargada { background: #F6E9DE; color: #6E4428; border-color: #F6E9DE; }
.aj-chip-profissional { background: #E2F0E7; color: #25603F; border-color: #E2F0E7; }

/* Interruptor (checkbox com role="switch") */
.interruptor {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  cursor: pointer;
}
.interruptor input {
  position: absolute;
  opacity: 0;
  width: 44px;
  height: 26px;
  margin: 0;
  cursor: pointer;
}
.interruptor-trilho {
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--borde-fuerte);
  position: relative;
  transition: background 0.15s;
}
.interruptor-trilho::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s;
}
.interruptor input:checked + .interruptor-trilho {
  background: var(--primario);
}
.interruptor input:checked + .interruptor-trilho::after {
  transform: translateX(18px);
}
.interruptor input:focus-visible + .interruptor-trilho {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
}
.interruptor input:disabled + .interruptor-trilho {
  opacity: 0.55;
}

/* Painel da pessoa / invitar */
.aj-painel .aj-campo label,
.aj-painel .pc-rotulo {
  display: block;
  margin: 14px 0 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto-3);
}
.aj-painel input,
.aj-painel select {
  width: 100%;
}
.aj-papeis {
  display: grid;
  gap: 8px;
}
.aj-papel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 12px;
  background: var(--tarjeta);
  font-family: inherit;
  text-align: left;
  color: var(--texto);
  cursor: pointer;
}
.aj-papel span {
  font-size: 0.82rem;
  color: var(--texto-2);
}
.aj-papel[aria-checked="true"] {
  border: 2px solid var(--primario);
  background: var(--primario-suave);
  padding: 9px 11px;
}
.aj-semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.aj-dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  border-radius: 10px;
  background: var(--tarjeta-suave);
  font-size: 0.7rem;
  text-align: center;
}
.aj-outras {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
}
.aj-atende {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 8px;
  font-weight: 600;
  color: var(--texto-2);
}
.aj-senha-linha {
  display: flex;
  gap: 8px;
  align-items: center;
}
.aj-senha {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--tarjeta-suave);
  font-size: 1rem;
  letter-spacing: 0.04em;
}
.aj-packs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.aj-pack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--tarjeta-suave);
}
.aj-packs-nota {
  grid-column: 1 / -1;
}

@media (max-width: 767px) {
  .aj-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* Submenu vira chips que deslizam pro lado */
  .aj-menu {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    margin: 0 -16px;
    padding: 0 16px 4px;
    scrollbar-width: none;
  }
  .aj-menu::-webkit-scrollbar {
    display: none;
  }
  .aj-grupo {
    display: none;
  }
  .aj-menu button {
    flex-shrink: 0;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    background: var(--tarjeta);
    white-space: nowrap;
    padding: 0 14px;
  }
  .aj-menu button.ativo {
    border: 2px solid var(--primario);
  }
  .aj-cabecalho h2 {
    font-size: 1.8rem;
  }
  /* Tabela da equipe vira lista agrupada por centro */
  .aj-equipo thead {
    display: none;
  }
  .aj-equipo,
  .aj-equipo tbody,
  .aj-equipo tr,
  .aj-equipo td {
    display: block;
    width: 100%;
  }
  .aj-grupo-linha {
    display: block;
  }
  .aj-grupo-linha th {
    display: block;
    text-align: left;
    padding: 14px 0 6px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--texto-3);
    border: none;
  }
  .aj-pessoa-linha {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--borde);
  }
  .aj-pessoa-linha td {
    padding: 0;
    border: none;
  }
  .aj-pessoa-linha td:nth-child(1) {
    grid-column: 1 / 2;
  }
  .aj-pessoa-linha td:nth-child(4) {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    align-self: center;
    width: auto;
  }
  .aj-pessoa-linha .aj-centro {
    display: none;
  }
  .aj-pessoa-linha td:nth-child(2),
  .aj-pessoa-linha td:nth-child(5) {
    font-size: 0.8rem;
    color: var(--texto-3);
  }
  .aj-packs {
    grid-template-columns: 1fr;
  }
}
.aj-equipo th,
.aj-hoy {
  white-space: nowrap;
}
.aj-equipo td {
  font-size: 0.88rem;
}

/* =================================================================
   REDESENHO 10/2026 — FASE 6: app no celular (PWA)
   ================================================================= */
/* «Hay una versión nueva · Actualizar» */
.aviso-versao-nova {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 8px 8px 18px;
  border-radius: 16px;
  background: var(--sidebar);
  color: var(--sidebar-texto);
  font-weight: 600;
  box-shadow: var(--sombra-elevada);
}
@media (max-width: 767px) {
  .aviso-versao-nova {
    bottom: calc(var(--altura-barra-inferior) + env(safe-area-inset-bottom) + 12px);
    width: calc(100% - 32px);
    justify-content: space-between;
  }
}
/* Aberto como app (sem barra do navegador): respeita o entalhe do iPhone */
@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
  }
}
.aj-instalado {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #25603F;
  font-weight: 600;
}
.aj-instalar-passos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
}
.aj-instalar-passos ol {
  margin: 6px 0 0 18px;
  color: var(--texto-2);
  font-size: 0.9rem;
}
@media (max-width: 767px) {
  .aj-instalar-passos {
    grid-template-columns: 1fr;
  }
}

/* =================================================================
   REDESENHO 10/2026 — FASE 7: tela «Hoy»
   ================================================================= */
.hoy-cabecalho {
  margin-bottom: 18px;
}
.hoy-saludo {
  color: var(--texto-3);
  font-weight: 600;
}
.hoy-fecha {
  font-size: 2.6rem;
  line-height: 1.05;
}
.hoy-grupos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  align-items: start;
}
.hoy-grupos .cartao {
  margin-bottom: 0;
}
.hoy-grupo-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.hoy-grupo-cabecalho h3 {
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  font-weight: 700;
}
.hoy-contador {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--primario-suave);
  color: var(--primario-oscuro);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hoy-grupo-cobrar .hoy-contador,
.hoy-grupo-leads .hoy-contador {
  background: #F8E3E1;
  color: var(--peligro);
}
.hoy-linhas {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hoy-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--borde);
}
.hoy-linha-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hoy-linha-texto .icone {
  color: var(--primario-oscuro);
  margin-bottom: 2px;
}
.hoy-linha-texto strong,
.hoy-linha-texto span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.hoy-linha-texto span {
  font-size: 0.82rem;
}
.hoy-acoes {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.hoy-tudo-em-dia {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #25603F;
}
.hoy-tudo-em-dia .icone {
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: 50%;
  background: #E2F0E7;
}
.hoy-agenda {
  margin-top: 20px;
}
.hoy-agenda-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.hoy-agenda-item {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--tarjeta);
  font-family: inherit;
  text-align: left;
  color: var(--texto);
  cursor: pointer;
}
.hoy-mes {
  margin-top: 20px;
}
@media (max-width: 767px) {
  .hoy-fecha {
    font-size: 34px;
  }
  .hoy-grupos {
    grid-template-columns: 1fr;
  }
  .hoy-linha {
    flex-wrap: wrap;
  }
}
.vp-nova-clienta {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 12px;
  border-radius: 12px;
  background: var(--tarjeta-suave);
}

/* =================================================================
   Versão de prueba (DEMO_MODE=1): franja fina no topo de todas as telas
   ================================================================= */
.franja-demo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: 22px;
  line-height: 22px;
  padding-top: env(safe-area-inset-top);
  box-sizing: content-box;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #7A4A06;
  color: #F6E9DE;
}
body.modo-demo {
  padding-top: 22px;
}
body.modo-demo .sidebar {
  top: 22px;
  height: calc(100vh - 22px);
}
body.modo-demo .painel-lateral {
  top: 22px;
}
@media (max-width: 1023px) {
  body.modo-demo .painel-lateral {
    top: auto;
  }
}
@media (max-width: 767px) {
  body.modo-demo .sidebar {
    top: auto;
    height: auto;
  }
}

/* ---------------------------------------------------------------
   Informes › Leads (fase 8)
   --------------------------------------------------------------- */
.troca-informes { margin-bottom: 12px; }
.leads-rango { display: inline-flex; gap: 6px; }
.leads-explicacion { color: var(--cor-texto-suave, #6b6b6b); font-size: 0.85rem; margin: 4px 0 12px; }
.leads-tabela-cartao { overflow-x: auto; }
.tabela-leads td.numero { text-align: right; white-space: nowrap; }
.leads-pessoas { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.leads-pessoa { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--cor-borda, #e6e0d6); border-radius: 10px; }
.leads-pessoa-detalhe { font-size: 0.85rem; color: var(--cor-texto-suave, #6b6b6b); }

.dica-origem-automatica { display: block; font-size: 0.8rem; color: var(--cor-texto-suave); margin-top: -4px; }
/* Celular: cada linha do informe de leads vira um cartão (sem rolar de lado) */
@media (max-width: 767px) {
  .tabela-leads thead { display: none; }
  .tabela-leads, .tabela-leads tbody { display: block; }
  .tabela-leads tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--cor-borda); }
  .tabela-leads td { display: flex; flex-direction: column; border: 0; padding: 0; text-align: left !important; white-space: normal !important; }
  .tabela-leads td::before { content: attr(data-rotulo); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cor-texto-suave); }
  .tabela-leads td:nth-child(2) { grid-column: 2 / 3; }
  .leads-tabela-cartao { overflow-x: visible; }
}

/* ---------------------------------------------------------------
   Reactivación › Anularon o no vinieron (fase 9)
   --------------------------------------------------------------- */
.troca-reactivacion { margin-bottom: 12px; }
.recuperar-explicacion { margin: 0 0 12px; font-size: 0.85rem; }
.recuperar-lista { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.recuperar-item { display: grid; gap: 4px; margin: 0; }
.recuperar-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.recuperar-nome { font-size: 1.05rem; margin-right: auto; }
.recuperar-linha { margin: 0; overflow-wrap: anywhere; }
.recuperar-contato { font-size: 0.85rem; color: var(--cor-texto-suave); font-style: italic; }
.recuperar-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.recuperar-acoes a.botao { text-decoration: none; display: inline-flex; align-items: center; }
.recuperar-painel { display: grid; gap: 10px; }
.recuperar-opcoes { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.recuperar-texto { width: 100%; font: inherit; }
.recuperar-plantilla-previa { font-size: 0.85rem; color: var(--cor-texto-suave); }
@media (max-width: 767px) {
  .recuperar-lista { grid-template-columns: 1fr; }
}

/* Cobro do pack desde a cita (02/10/2026) */
.pc-pack-saldo { background: var(--aviso-fundo, #F6E9DE); color: var(--aviso-texto, #6E4428); border-radius: 10px; padding: 8px 10px; flex-wrap: wrap; gap: 8px; }
.pc-pack-saldo-texto { color: #6E4428; background: #F6E9DE; border-radius: 10px; padding: 8px 10px; margin: 0; font-weight: 600; }
.detalhe-sessao-pack { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.detalhe-sessao-pack p { margin: 0; width: 100%; color: var(--cor-texto-suave); }
.ac-pack-saldo { color: #6E4428; background: #F6E9DE; border-radius: 6px; padding: 0 6px; font-weight: 600; }

/* =================================================================
   «Hoy» mais clara (02/10/2026): 4 tarjetas + lista ao lado + agenda
   ================================================================= */
.hoy-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hoy-saludo-serif { font-family: var(--fonte-titulo); font-size: 2.4rem; line-height: 1.05; font-weight: 400; margin: 0; }
.hoy-fecha-linha { margin: 4px 0 0; color: var(--texto-3); }
.hoy-troca-dia button { min-height: 44px; min-width: 88px; }
.hoy-tarjetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.hoy-tarjetas.hoy-tarjetas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hoy-tarjeta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 104px;
  padding: 14px 16px; text-align: left; cursor: pointer;
  background: var(--superficie, #fff); border: 1px solid var(--cor-borda); border-radius: 16px;
  font: inherit; color: inherit;
}
.hoy-tarjeta[aria-pressed="true"] { border-color: var(--cor-primaria); box-shadow: 0 0 0 2px var(--cor-primaria) inset; }
.hoy-tarjeta-cab { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--texto-2, inherit); }
.hoy-tarjeta-ponto { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.hoy-tarjeta-numero { font-family: var(--fonte-titulo); font-size: 2.6rem; line-height: 1; }
.hoy-tarjeta-zero .hoy-tarjeta-numero { color: var(--texto-3); }
.hoy-corpo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.hoy-lista-titulo { margin: 0; }
.hoy-lista-ajuda { margin: 4px 0 12px; font-size: 0.9rem; }
.hoy-lista-vazia { display: flex; align-items: center; gap: 8px; color: var(--texto-3); margin: 8px 0; }
.hoy-ver-todas { margin-top: 8px; min-height: 44px; }
.hoy-acoes .botao { min-height: 44px; }
.hoy-agenda-item { min-height: 44px; }
@media (max-width: 767px) {
  .hoy-saludo-serif { font-size: 2rem; }
  .hoy-tarjetas, .hoy-tarjetas.hoy-tarjetas-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hoy-tarjeta { min-height: 92px; padding: 12px; }
  .hoy-tarjeta-numero { font-size: 2.2rem; }
  .hoy-corpo { grid-template-columns: 1fr; }
}

/* =================================================================
   Agenda no celular: «Lista | Rejilla» (02/10/2026, agendaRejilla.js)
   ================================================================= */
.ac-troca-modo { margin: 8px 0; }
.ac-troca-modo button { min-height: 44px; min-width: 96px; }
.rj-centros { margin-bottom: 4px; }
.rj-centros .ac-chip { min-height: 44px; }
.rj-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 8px; }
.rj-nav .botao-icone { min-width: 44px; min-height: 44px; }
.rj-so-huecos { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; }
.rj-so-huecos input { width: 20px; height: 20px; }
.rj-scroll {
  overflow: auto; max-height: calc(100dvh - 300px); min-height: 360px;
  border: 1px solid var(--cor-borda); border-radius: 14px; background: #fff;
  overscroll-behavior-x: contain;
}
.rj-grade { display: grid; position: relative; }
.rj-grade.rj-larga { width: max-content; }
.rj-canto, .rj-cab { position: sticky; top: 0; z-index: 3; background: #fff; border-bottom: 1px solid var(--cor-borda); }
.rj-canto { left: 0; z-index: 5; }
.rj-cab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; min-height: 64px; text-align: center; }
.rj-avatar { width: 26px; height: 26px; font-size: 0.7rem; color: #1E1B17; }
.rj-cab-nome { font-weight: 600; font-size: 0.85rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rj-cab-livres { font-size: 0.72rem; color: #25603F; }
.rj-horas { position: sticky; left: 0; z-index: 2; background: #fff; border-right: 1px solid var(--cor-borda); }
.rj-hora { position: absolute; left: 0; right: 4px; text-align: right; font-size: 0.72rem; color: var(--texto-3); transform: translateY(2px); }
.rj-coluna {
  position: relative; border-left: 1px solid #F0EAE0;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rj-px-hora) - 1px), #EFE8DC calc(var(--rj-px-hora) - 1px), #EFE8DC var(--rj-px-hora));
}
.rj-hueco {
  position: absolute; left: 3px; right: 3px; z-index: 1;
  border: 1.5px dashed #CDB8A6; border-radius: 10px; background: transparent;
  color: #8A6A1F; font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.rj-hueco:active, .rj-hueco:focus-visible { background: #F6EEE6; }
.rj-cita {
  position: absolute; left: 3px; right: 3px; z-index: 2; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 4px 6px;
  border: 0; border-left: 3px solid #B08466; border-radius: 8px; background: #F4EEE3;
  font: inherit; text-align: left; cursor: pointer; color: #1E1B17;
}
.rj-cita-nome, .rj-cita-trat { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rj-cita-nome { font-weight: 600; font-size: 0.8rem; }
.rj-cita-trat { font-size: 0.72rem; color: #4F483F; }
/* «Solo huecos libres»: citas cinza e sem texto, huecos em destaque */
.rj-modo-huecos .rj-cita { background: #E6E3DE !important; border-left-color: #CFCAC2 !important; }
.rj-modo-huecos .rj-cita span { visibility: hidden; }
.rj-modo-huecos .rj-hueco { background: #FBF0D9; border-style: solid; border-color: #A9714B; color: #6E4E0E; }

/* lista da tarjeta: texto encolhe, o botão fica sempre à direita */
.hoy-lista .hoy-linha { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; }
.hoy-lista .hoy-linha-texto { flex: 1; min-width: 0; }
.hoy-lista .hoy-acoes { flex: none; }
.hoy-corpo > .cartao { margin-top: 0; }
/* a coluna de horas e o cabeçalho ficam por cima das citas ao deslizar */
.rj-horas { z-index: 4; }
.rj-cab { z-index: 5; }
.rj-canto { z-index: 6; }

/* =================================================================
   Bloqueios: o MESMO visual no computador, na Rejilla e na Lista
   (02/10/2026, bloqueiosAgenda.js) - cinza com rayas diagonais,
   candado e o motivo. Fora do horário: cinza claro liso, sem texto.
   ================================================================= */
.bloqueio-visual {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 4px 8px; border-radius: 8px; overflow: hidden;
  color: #4F483F; font-size: 0.78rem; font-weight: 600; text-align: center;
  background-color: #ECE8E1;
  background-image: repeating-linear-gradient(45deg, rgba(94, 84, 68, 0.13) 0, rgba(94, 84, 68, 0.13) 6px, transparent 6px, transparent 12px);
  border: 1px solid #D8D1C4;
}
.bloqueio-visual .icone { width: 15px; height: 15px; flex: none; }
.bloqueio-visual-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bloqueio-fechado { background-color: #E4DFD6; }
/* computador: o bloco preenche a faixa já posicionada */
.grade-profesionais-bloqueio { background: none; }
.grade-profesionais-bloqueio .bloqueio-visual-preenche { position: absolute; inset: 1px 2px; }
.grade-profesionais-bloqueio .bloqueio-visual-texto { font-size: 0.75rem; text-transform: none; letter-spacing: 0; color: #4F483F; }
.grade-fechado { position: absolute; inset: 0; border-radius: 0; z-index: 1; pointer-events: none; align-items: flex-start; padding-top: 16px; }
.fora-do-horario { position: absolute; left: 0; right: 0; background: #F1EFEB; pointer-events: none; }
/* Rejilla */
.rj-bloqueio { position: absolute; left: 3px; right: 3px; z-index: 1; cursor: pointer; flex-direction: column; gap: 2px; font-size: 0.72rem; line-height: 1.15; }
.rj-bloqueio .bloqueio-visual-texto { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rj-fechado { position: absolute; inset: 0; border-radius: 0; z-index: 1; align-items: flex-start; padding-top: 14px; flex-direction: column; justify-content: flex-start; }
.rj-modo-huecos .rj-bloqueio { opacity: 1; } /* «Solo huecos libres»: o bloqueio continua rayado */
/* Lista */
.ac-item-bloqueio .ac-bloqueio { flex: 1; justify-content: flex-start; min-height: 44px; padding: 8px 12px; cursor: pointer; }
.ac-topo-botoes { display: flex; align-items: center; gap: 8px; }
.bq-botao-cabecalho { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
/* Gaveta «Bloquear horario» */
.bq-form { display: grid; gap: 12px; }
.bq-campo { display: grid; gap: 4px; }
.bq-campo select, .bq-campo input { min-height: 44px; width: 100%; }
.bq-horas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bq-atalhos { display: flex; flex-wrap: wrap; gap: 6px; }
.bq-atalho { min-height: 40px; }
.bq-dias { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.bq-dia { min-width: 44px; min-height: 44px; border-radius: 50%; }
.bq-dia[aria-pressed="true"] { background: var(--cor-primaria); color: #fff; border-color: var(--cor-primaria); }
.bq-aviso { margin: 0; padding: 10px 12px; border-radius: 10px; background: #F6E9DE; color: #6E4428; font-weight: 600; }
.bq-escolha { display: grid; gap: 12px; }
.bq-escolha-botao { min-height: 56px; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.bq-detalhe { display: grid; gap: 12px; }
.bq-detalhe-faixa { min-height: 56px; font-size: 0.95rem; }
.bq-dados { display: grid; gap: 8px; margin: 0; }
.bq-dados div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.bq-dados dt { color: var(--texto-3); }
.bq-dados dd { margin: 0; font-weight: 600; }
.bq-pe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.bq-pe .botao { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.bq-pergunta { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--cor-borda); }

/* =================================================================
   Semana e Mes no celular (02/10/2026, agendaSemanaMes.js)
   ================================================================= */
.ac-troca-vista { margin: 8px 0 4px; display: grid; grid-template-columns: repeat(3, 1fr); }
.ac-troca-vista button { min-height: 44px; }
.sm-nav { display: grid; grid-template-columns: 44px 1fr 44px auto; align-items: center; gap: 8px; margin: 6px 0 8px; }
.sm-nav .botao-icone { min-width: 44px; min-height: 44px; }
.sm-titulo { margin: 0; text-align: center; font-size: 1rem; }
.sm-hoy { min-height: 44px; }
.sm-chips-prof .ac-chip { min-height: 44px; }
/* Semana */
.sm-semana {
  overflow-y: auto; max-height: calc(100dvh - 330px); min-height: 380px;
  border: 1px solid var(--cor-borda); border-radius: 14px; background: #fff; overscroll-behavior: contain;
}
.sm-semana-grade { display: grid; grid-template-columns: 30px repeat(7, minmax(0, 1fr)); position: relative; }
.sm-canto, .sm-dia-cab { position: sticky; top: 0; z-index: 4; background: #fff; border-bottom: 1px solid var(--cor-borda); }
.sm-dia-cab {
  display: flex; flex-direction: column; align-items: center; gap: 0; min-height: 70px; padding: 4px 0;
  border: 0; border-bottom: 1px solid var(--cor-borda); border-left: 1px solid #F0EAE0; font: inherit; cursor: pointer; color: inherit;
}
.sm-dia-letra { font-size: 0.7rem; color: var(--texto-3); }
.sm-dia-num { font-weight: 700; font-size: 1rem; }
.sm-dia-info { font-size: 0.58rem; line-height: 1.15; color: var(--texto-3); white-space: nowrap; }
.sm-dia-livres { color: #25603F; }
.sm-dia-cab.sm-hoje .sm-dia-num { background: var(--cor-primaria); color: #fff; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.sm-dia-cab.sm-fechado {
  background-color: #ECE8E1;
  background-image: repeating-linear-gradient(45deg, rgba(94, 84, 68, 0.13) 0, rgba(94, 84, 68, 0.13) 6px, transparent 6px, transparent 12px);
}
.sm-horas { position: relative; border-right: 1px solid var(--cor-borda); }
.sm-horas .rj-hora { font-size: 0.62rem; }
.sm-coluna {
  position: relative; border-left: 1px solid #F0EAE0;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--sm-px-hora) - 1px), #EFE8DC calc(var(--sm-px-hora) - 1px), #EFE8DC var(--sm-px-hora));
}
.sm-fechado-col { position: absolute; inset: 0; border-radius: 0; z-index: 1; }
.sm-bloqueio { position: absolute; left: 2px; right: 2px; z-index: 1; padding: 2px; border-radius: 6px; cursor: pointer; }
.sm-bloqueio .icone { width: 12px; height: 12px; }
.sm-cita { position: absolute; left: 2px; right: 2px; z-index: 2; border: 0; border-left: 3px solid #B08466; border-radius: 6px; background: #F4EEE3; cursor: pointer; padding: 0; }
.sm-hueco { position: absolute; left: 1px; right: 1px; z-index: 1; border: 1.5px dashed transparent; border-radius: 8px; background: #fff; cursor: pointer; }
.sm-hueco:active, .sm-hueco:focus-visible { border-color: #CDB8A6; background: #F6EEE6; }
/* Semana «Todas»: barrinhas por profissional */
.sm-celda { position: absolute; left: 1px; right: 1px; z-index: 1; display: flex; gap: 2px; padding: 3px; border: 0; border-radius: 6px; background: #fff; cursor: pointer; }
.sm-barra { flex: 1; border-radius: 3px; background: transparent; }
.sm-celda-cheia { background: #EDE6DA; }
.sm-celda-livre { background: #fff; box-shadow: inset 0 0 0 1.5px #E2D6CA; }
.sm-celda-passada { background: #F6F4F0; box-shadow: none; }
/* Mes */
.sm-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.sm-mes-letra { text-align: center; font-size: 0.72rem; color: var(--texto-3); padding: 2px 0; }
.sm-mes-dia {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  min-height: 60px; padding: 4px 4px 6px; border: 1px solid var(--cor-borda); border-radius: 10px; background: #fff;
  font: inherit; color: inherit; cursor: pointer; overflow: hidden;
}
.sm-mes-dia.sm-fora { opacity: 0.45; }
.sm-mes-dia.sm-hoje { border-color: var(--cor-primaria); box-shadow: inset 0 0 0 1px var(--cor-primaria); }
.sm-mes-dia.sm-escolhido { background: #F6EEE6; border-color: #A9714B; }
.sm-mes-dia.sm-fechado {
  background-color: #ECE8E1;
  background-image: repeating-linear-gradient(45deg, rgba(94, 84, 68, 0.13) 0, rgba(94, 84, 68, 0.13) 6px, transparent 6px, transparent 12px);
}
.sm-mes-num { font-weight: 700; font-size: 0.9rem; }
.sm-mes-citas { position: absolute; top: 4px; right: 5px; font-size: 0.72rem; font-weight: 700; color: #4F483F; }
.sm-mes-cerrado { font-size: 0.6rem; font-weight: 700; color: #4F483F; }
.sm-mes-candado { position: absolute; top: 22px; right: 4px; }
.sm-mes-candado .icone { width: 12px; height: 12px; color: #4F483F; }
.sm-ocupacao { display: block; width: 100%; height: 6px; border-radius: 3px; background: #EFEAE1; overflow: hidden; }
.sm-ocupacao span { display: block; height: 100%; }
.sm-ocupacao-livre { background: #DDF0E4; }
.sm-ocupacao-livre span { background: #8CC7A1; }
.sm-ocupacao-pouco { background: #F6E9DE; }
.sm-ocupacao-pouco span { background: #E0A43A; }
.sm-ocupacao-cheio span { background: #A9A39A; }
.sm-mes-detalhe { margin-top: 12px; }
.sm-mes-detalhe:empty { display: none; }
.sm-detalhe-titulo { margin: 0 0 6px; }
.sm-detalhe-texto { margin: 0 0 10px; }
.sm-detalhe-fechado { min-height: 44px; margin-bottom: 10px; }
.sm-detalhe-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sm-detalhe-acoes .botao { min-height: 48px; }

/* =================================================================
   Mensajes como app de mensagens (02/10/2026, mensagensCelular.js)
   Filas e bolhas: celular E computador. O resto: só abaixo de 768 px.
   ================================================================= */
.so-celular { display: none !important; }

/* ---- Filas da lista (estilo WhatsApp) ---- */
.mensagens-lista-conversas li.mc-linha {
  display: flex; flex-direction: row; align-items: center; gap: 12px; min-height: 76px; padding: 8px 12px;
  border: 0; border-bottom: 1px solid #EFE9DF; border-radius: 0; background: transparent; cursor: pointer;
}
.mensagens-lista-conversas li.mc-linha.ativa { background: #F6EFE2; }
.mensagens-lista-conversas li.mc-linha.mc-esperando { background: #FFF8EA; }
.mc-avatar {
  position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #EDE4D3; color: #4F483F; font-weight: 700; font-size: 1rem;
}
.mc-avatar-canal { position: absolute; right: -1px; bottom: -1px; width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff; }
.mc-canal-whatsapp { background: #25D366; }
.mc-canal-instagram { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); }
.mc-corpo { flex: 1; min-width: 0; display: grid; gap: 1px; }
.mc-l1, .mc-l2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.mc-nome { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-nao-lida .mc-nome { font-weight: 800; }
.mc-hora { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 0.76rem; color: var(--texto-3); }
.mc-nao-lida .mc-hora { color: #1E9E52; font-weight: 700; }
.mc-icone-pausa { width: 13px; height: 13px; }
.mc-preview { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4F483F; font-size: 0.9rem; }
.mc-badge { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #25A35A; color: #fff; font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.mc-l3 { display: flex; align-items: center; gap: 2px; font-size: 0.74rem; color: var(--texto-3); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mc-ponto { width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; flex: none; background: #A9A39A; }
.mc-ponto-nova { background: #2F6FAF; }
.mc-ponto-em_conversa { background: #1E9E52; }
.mc-ponto-cita_agendada { background: #8A5634; }
.mc-ponto-no_interesada { background: #B3412F; }
.mc-ponto-perdida { background: #A9A39A; }
.mc-ponto-cliente { background: #6A4FA3; }
.mc-extra-laranja { color: #B86A00; font-weight: 600; }
.mc-extra-cinza { color: #8A8378; }
.mensagens-lista-conversas .mensagens-lote-check { width: 22px; height: 22px; flex: none; }

/* ---- Bolhas: hora dentro, separadores de dia ---- */
.mensagens-bolha-linha { max-width: 80%; }
.mensagens-bolha { position: relative; padding: 6px 10px 18px; min-width: 64px; border-radius: 12px; box-shadow: 0 1px 1px rgba(46, 38, 25, 0.08); }
.mensagens-bolha .mensagens-bolha-autor { display: block; padding: 0; margin: 0 0 2px; font-size: 0.7rem; font-weight: 700; }
.mensagens-bolha-texto { white-space: pre-wrap; word-break: break-word; }
.mensagens-bolha .mensagens-bolha-hora { position: absolute; right: 8px; bottom: 3px; font-size: 0.66rem; opacity: 0.75; }
.mensagens-bolha-linha.entrada .mensagens-bolha { background: #fff; border: 1px solid #E4DDD1; color: #1E1B17; }
.mensagens-bolha-linha.autor-bot .mensagens-bolha { background: #F3EBDC; color: #1E1B17; border: 1px solid #E6D9BF; }
.mensagens-bolha-linha.autor-bot .mensagens-bolha-autor { color: #8A5634; }
.mensagens-bolha-linha.autor-equipe .mensagens-bolha { background: #8A5634; color: #fff; border: 0; }
.mensagens-bolha-linha.autor-equipe .mensagens-bolha-autor { color: #EFE3D6; }
.mensagens-bolha-linha.autor-equipe .mensagens-bolha-hora { color: #EFE3D6; opacity: 0.9; }
/* «El asistente responde solo» é só do celular */
.mc-linha-bot { display: none; }
.mensagens-separador-dia { align-self: center; margin: 8px 0; }
.mensagens-separador-dia span { display: inline-block; padding: 3px 10px; border-radius: 10px; background: #EFE8DB; color: #4F483F; font-size: 0.74rem; font-weight: 600; }

/* ---- Respuestas rápidas (celular e computador) ---- */
.mensagens-respostas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 6px 0 2px; }
.mensagens-respostas.oculto { display: none; }
.mensagens-respostas::-webkit-scrollbar { display: none; }
.mc-resposta { flex: none; min-height: 36px; padding: 0 12px; border: 1px solid #E2D6CA; border-radius: 18px; background: #F8F3EC; color: #5E4A1A; font: inherit; font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
.mc-sem-icone { display: inline; }
.mc-so-icone { display: none; }
/* Ajustes › Respuestas rápidas */
.aj-respuestas { display: grid; gap: 12px; margin: 12px 0; }
.aj-resposta { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--cor-borda); border-radius: 12px; background: #fff; }
.aj-resposta-inativa { opacity: 0.6; }
.aj-resposta input[type="text"], .aj-resposta textarea { width: 100%; font: inherit; }
.aj-resposta-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.aj-resposta-acoes .botao { min-height: 40px; }
.aj-resposta-ativa { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; }

@media (max-width: 767px) {
  .so-celular { display: revert !important; }

  /* ---------------- Lista ---------------- */
  .painel-mensagens .mensagens-coluna-lista .coluna-cabecalho,
  .painel-mensagens .mensagens-filtro-canal,
  .painel-mensagens .mensagens-filtros { display: none !important; }
  /* a fila de chips rola dentro dela - não pode alargar a coluna */
  .painel-mensagens { grid-template-columns: minmax(0, 1fr); }
  .mensagens-coluna-lista { height: auto; padding: 0; border: 0; background: transparent; box-shadow: none; min-width: 0; }
  .mc-topo { display: flex !important; align-items: center; justify-content: space-between; margin: 0 0 6px; }
  .mc-titulo { font-family: var(--fonte-titulo); font-size: 1.8rem; line-height: 1.1; font-weight: 400; margin: 0; }
  .mc-botao-filtros { min-height: 44px; }
  #mensagens-busca { min-height: 44px; margin: 0; }
  .mc-chips { display: flex !important; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 6px 16px; }
  .mc-chips::-webkit-scrollbar { display: none; }
  .mc-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid #E3D9C8; border-radius: 22px; background: #fff; font: inherit; font-size: 0.88rem; color: #1E1B17; cursor: pointer; }
  .mc-chip-n { font-size: 0.78rem; color: var(--texto-3); }
  .mc-chip-verde .mc-chip-n { color: #fff; background: #25A35A; border-radius: 9px; padding: 0 6px; }
  .mc-chip[aria-pressed="true"] { background: #1E1B17; color: #fff; border-color: #1E1B17; }
  .mc-chip[aria-pressed="true"] .mc-chip-n { color: #E9DFC9; }
  .mensagens-lista-conversas { margin: 0 -16px; }
  .mensagens-lista-conversas li.mc-linha { padding: 8px 16px; }
  .mensagens-lote { flex-wrap: wrap; }
  #badge-mensagens-barra { background: #25A35A; }

  /* ---------------- Chat em tela cheia ---------------- */
  body.mc-chat-aberto .barra-inferior,
  body.mc-chat-aberto .agenda-fab { display: none !important; }
  /* chat aberto: a página por trás não rola (só o histórico rola) */
  body.mc-chat-aberto { overflow: hidden; height: 100dvh; }
  body.mc-chat-aberto .app-shell, body.mc-chat-aberto .conteudo-principal { height: 100dvh; min-height: 0; overflow: hidden; padding-bottom: 0; }
  /* versão de prueba: a franja de 22 px fica visível em cima do chat */
  body.mc-chat-aberto.modo-demo .app-shell, body.mc-chat-aberto.modo-demo .conteudo-principal { height: calc(100dvh - 22px); }
  body.mc-chat-aberto.modo-demo .painel-mensagens.mostrando-conversa .mensagens-coluna-conversa { top: 22px; height: calc(100dvh - 22px); }
  body.mc-chat-aberto .painel-mensagens.mostrando-conversa .mensagens-coluna-conversa {
    position: fixed; left: 0; right: 0; top: 0; z-index: 45;
    height: 100dvh; margin: 0; padding: 0; border: 0; border-radius: 0;
    background: #F4EFE6; display: flex; flex-direction: column;
  }
  .mensagens-coluna-conversa .mensagens-conversa { display: flex; flex-direction: column; height: 100%; min-height: 0; }
  .mensagens-coluna-conversa .mensagens-conversa.oculto { display: none; }
  .mensagens-conversa-cabecalho,
  #mensagens-resumo-cliente,
  #mensagens-seguimiento,
  #mensagens-form-motivo { display: none !important; }
  .mc-cabecalho { display: flex !important; align-items: center; gap: 8px; height: 64px; flex: none; padding: 0 8px; background: #1E1B17; color: #fff; }
  .mc-voltar, .mc-acao-cab { min-width: 44px; min-height: 44px; color: #fff; background: transparent; border: 0; display: inline-flex; align-items: center; justify-content: center; }
  .mc-acao-cab.oculto { display: none; }
  .mc-acao-cab .icone, .mc-voltar .icone { width: 22px; height: 22px; }
  .mc-cabecalho .mc-avatar { width: 40px; height: 40px; font-size: 0.9rem; }
  .mc-cabecalho .mc-avatar-canal { border-color: #1E1B17; }
  .mc-nome-chat { flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: transparent; border: 0; color: #fff; font: inherit; text-align: left; padding: 0; cursor: pointer; }
  .mc-nome-texto { font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mc-subtitulo { font-size: 0.74rem; color: #D9CDB5; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mc-franja { display: flex !important; align-items: center; gap: 2px; flex: none; min-height: 36px; padding: 0 12px; border: 0; border-bottom: 1px solid #E6DCC9; background: #FBF7EF; font: inherit; font-size: 0.8rem; color: #4F483F; text-align: left; white-space: nowrap; overflow: hidden; cursor: pointer; }
  .mc-franja-estado { font-weight: 600; }
  .mc-franja-info { overflow: hidden; text-overflow: ellipsis; }
  .mc-franja-alerta { color: #B86A00; font-weight: 700; flex: none; }
  .mc-franja-link { color: #8A5634; font-weight: 700; text-decoration: underline; }
  .mensagens-coluna-conversa .mensagens-historico-wrap { flex: 1; min-height: 0; position: relative; }
  .mensagens-coluna-conversa .mensagens-historico { height: 100%; max-height: none; overflow-y: auto; padding: 8px 10px; border: 0; border-radius: 0; background: transparent; }
  .mensagens-coluna-conversa .mensagens-respostas { flex: none; padding: 6px 10px 2px; background: #F4EFE6; }
  .mensagens-coluna-conversa .mensagens-respostas.oculto { display: none; }
  .mc-linha-bot { display: flex !important; flex: none; align-items: center; gap: 4px; padding: 2px 12px; font-size: 0.78rem; color: #1E7A44; background: #F4EFE6; }
  .mc-linha-bot.oculto { display: none !important; }
  .mc-linha-bot .botao-link { min-height: 32px; font-weight: 700; }
  .mensagens-coluna-conversa .mensagens-responder { flex: none; display: flex; align-items: flex-end; gap: 8px; margin: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: #F4EFE6; border: 0; }
  .mensagens-coluna-conversa #mensagem-texto { flex: 1; min-height: 44px; max-height: none; padding: 11px 14px; border-radius: 22px; border: 1px solid #DCCFB7; background: #fff; resize: none; font-size: 16px; line-height: 20px; }
  .mensagens-botao-enviar { flex: none; width: 46px; height: 46px; min-width: 46px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
  .mc-sem-icone { display: none; }
  .mc-so-icone { display: inline; width: 22px; height: 22px; }
  /* Ventana cerrada: aviso curto + «Enviar plantilla» e «Llamar» no lugar da caixa */
  .painel-mensagens.mc-janela-fechada .mensagens-responder,
  .painel-mensagens.mc-janela-fechada .mensagens-respostas,
  .painel-mensagens.mc-janela-fechada .mc-linha-bot { display: none !important; }
  .mensagens-coluna-conversa .aviso-ventana-cerrada:not(.oculto) { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); border-radius: 0; background: #F6EEE6; font-size: 0.82rem; }
  .aviso-ventana-cerrada #mensagens-aviso-ventana-texto { grid-column: 1 / -1; }
  .aviso-ventana-cerrada .botao { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
  .aviso-ventana-cerrada #botao-retomar-conversa.oculto + .mc-ligar-ventana { grid-column: 1 / -1; }
  .mc-ligar-ventana.oculto { display: none !important; }

  /* ---------------- Gavetas ---------------- */
  .mc-filtros, .mc-opcoes { display: grid; gap: 10px; }
  .mc-filtros-pe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  .mc-opcoes-nome { font-family: var(--fonte-titulo); font-size: 1.6rem; font-weight: 400; margin: 0; }
  .mc-opcoes-topo p { margin: 0; }
  .mc-motivo { display: flex; gap: 8px; }
  .mc-motivo input { flex: 1; min-height: 44px; }
  .mc-motivo.oculto { display: none; }
  .mc-opcoes input[type="datetime-local"], .mc-opcoes select { width: 100%; min-height: 44px; }
  .mc-opcoes input[type="datetime-local"].oculto { display: none; }
  .mc-rotulo-campo { display: grid; gap: 4px; font-size: 0.85rem; }
  .mc-filas { display: grid; border-top: 1px solid #EFE9DF; margin-top: 6px; }
  .mc-fila { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 4px; border: 0; border-bottom: 1px solid #EFE9DF; background: transparent; font: inherit; color: #1E1B17; text-align: left; cursor: pointer; }
  .mc-fila .icone { width: 20px; height: 20px; color: #8A5634; flex: none; }
  .mc-fila-extra { margin-left: auto; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-3); font-size: 0.82rem; }
  .mc-notas { display: grid; gap: 8px; padding: 8px 0; }
  .mc-notas.oculto { display: none; }
  .mc-notas textarea { width: 100%; font: inherit; }
}

/* =================================================================
   CANALES (03/10/2026, public/canales.js) - WhatsApp e Instagram
   conectados pelo app Lumy, Templates e posts do Instagram.
   ================================================================= */
.painel-canales { display: grid; gap: 16px; align-content: start; }
.canales-cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.canales-cabecalho h2 { margin-right: auto; }
.canales-abas { display: inline-flex; border: 1px solid var(--borde); border-radius: 999px; padding: 3px; background: var(--tarjeta); }
.canales-abas .botao { border: 0; border-radius: 999px; background: transparent; padding: 6px 14px; }
.canales-abas .botao.ativo { background: var(--primario); color: #fff; }
.canales-idioma { font-size: 0.85rem; }
.canales-aviso { border: 1px solid #E2C3AB; background: #F8EFE7; color: var(--texto-2); border-radius: var(--raio-pequeno); padding: 10px 14px; display: grid; gap: 4px; font-size: 0.9rem; }
.canales-erro { color: var(--peligro); }
.canales-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.canal-cartao { display: grid; gap: 8px; align-content: start; }
.canal-cartao-cab { display: flex; align-items: center; gap: 10px; }
.canal-cartao-cab h3 { margin: 0; flex: 1; }
.canal-icone { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #fff; background: #25D366; }
.canal-icone-instagram { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
.canal-estado { font-size: 0.8rem; padding: 3px 10px; border-radius: 999px; background: var(--tarjeta-suave); color: var(--texto-3); border: 1px solid var(--borde); white-space: nowrap; }
.canal-estado-on { background: #E5F5EA; color: #1E6B3A; border-color: #B9E2C6; }
.canal-numero { font-size: 1.35rem; font-weight: 700; margin: 4px 0 0; overflow-wrap: anywhere; }
.canal-nome { margin: 0; color: var(--texto-2); }
.canal-cartao .acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.canal-desconectar { color: var(--peligro); }
.canal-perfil { display: flex; align-items: center; gap: 12px; }
.canal-perfil-foto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--borde); }
.canal-numeros { display: flex; gap: 24px; }
.canal-numeros div { display: grid; }
.canal-numeros strong { font-size: 1.2rem; }
.canal-numeros span { color: var(--texto-3); font-size: 0.85rem; }
.canales-posts h3 { margin: 0 0 10px; }
.canales-posts-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 180px), 1fr)); gap: 12px; }
.canal-post { display: grid; gap: 4px; color: inherit; text-decoration: none; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--raio-pequeno); overflow: hidden; }
.canal-post img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--tarjeta-suave); }
.canal-post-legenda { padding: 0 8px; font-size: 0.82rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.canal-post-data { padding: 0 8px 8px; font-size: 0.75rem; color: var(--texto-3); }
.canales-templates { display: grid; gap: 14px; }
.canales-templates-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.canales-templates-cab h3 { margin: 0; margin-right: auto; overflow-wrap: anywhere; }
.template-form { display: grid; gap: 10px; }
.template-form.oculto { display: none; }
.template-form h4 { margin: 0; }
.template-campo { display: grid; gap: 4px; }
.template-campo span { font-size: 0.85rem; color: var(--texto-2); }
.template-campo input, .template-campo select, .template-campo textarea { width: 100%; font: inherit; }
.template-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.template-exemplos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.template-form .botao-mini { justify-self: start; }
.templates-lista { display: grid; gap: 10px; }
.template-item { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--raio-pequeno); padding: 12px 14px; display: grid; gap: 4px; }
.template-item-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.template-nome { overflow-wrap: anywhere; }
.template-meta { margin: 0; font-size: 0.8rem; }
.template-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.template-estado { font-size: 0.75rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.template-estado-ok { background: #E5F5EA; color: #1E6B3A; }
.template-estado-pendente { background: #FFF1D6; color: #8A5A00; }
.template-estado-erro { background: #FBE4E1; color: var(--peligro); }
.mc-etiqueta-instagram { font-size: 0.7rem; font-weight: 600; color: #fff; background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); border-radius: 999px; padding: 1px 7px; margin-right: 6px; }
.canal-perfil > div { min-width: 0; }
@media (max-width: 767px) {
  .canal-perfil .canal-numero { font-size: 1.1rem; overflow-wrap: normal; word-break: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .canales-cabecalho h2 { width: 100%; margin-right: 0; }
}
.canal-sincronizacao { border: 1px solid #E2C3AB; background: #F8EFE7; border-radius: var(--raio-pequeno); padding: 10px 12px; display: grid; gap: 8px; font-size: 0.9rem; color: var(--texto-2); }
.canal-sincronizacao .botao { justify-self: start; }
.canal-manual { margin-top: 14px; border-top: 1px solid var(--borda, #E8E1D8); padding-top: 10px; font-size: 0.9rem; }
.canal-manual summary { cursor: pointer; color: var(--texto-2); font-weight: 500; }
.canal-manual[open] { display: grid; gap: 8px; }
.canal-manual .campo { display: grid; gap: 4px; font-size: 0.82rem; color: var(--texto-2); }
.canal-manual .campo input { width: 100%; box-sizing: border-box; }
/* Copias de seguridad: nube sin cifrar (auditoría 04/10/2026, B1) */
.backups-aviso-grave { background: #FBE4E1; color: var(--peligro); border-color: #E8B4AE; font-weight: 600; }

/* ---------------------------------------------------------------
   Sessão de pack reservada ≠ usada (06/10/2026)
   Barra de segmentos: cheio = usada, listrado = reservada, vazio = livre.
   --------------------------------------------------------------- */
.barra-sessoes-pack {
  display: flex;
  gap: 3px;
  margin: 6px 0 2px;
}
.barra-sessoes-seg {
  flex: 1 1 0;
  min-width: 6px;
  height: 10px;
  border-radius: 3px;
  border: 1.5px solid var(--borde-fuerte);
  background: var(--tarjeta);
}
.barra-sessoes-seg.usada {
  background: var(--primario);
  border-color: var(--primario);
}
.barra-sessoes-seg.reservada,
.fc-sessao.reservada {
  border-color: var(--primario);
  background: repeating-linear-gradient(135deg, var(--primario) 0 2px, transparent 2px 5px);
}
.chip-sessao-reservada {
  display: inline-block;
  margin-left: 4px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px dashed var(--primario);
  color: var(--primario);
  background: transparent;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}
.fc-sessoes-texto,
.pc-pack-numeros {
  margin: 4px 0 0;
  font-size: 0.85rem;
}
.titulo-devolucoes-sessao {
  margin: 12px 0 4px;
  font-size: 0.9rem;
}
.lista-devolucoes-sessao {
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 0.85rem;
}
/* «Citas sin cerrar» na Hoy: um aviso âmbar acima das tarjetas. */
.hoy-sin-cerrar {
  border-left: 4px solid #C27C0E;
  margin-bottom: 14px;
}
.hoy-sin-cerrar-titulo {
  margin: 0 0 2px;
}

/* ---------------------------------------------------------------
   Ajustes › Marketing (07/10/2026, public/marketingAjustes.js)
   --------------------------------------------------------------- */
.mk-avisos {
  margin: 0 0 14px;
  padding: 10px 14px 10px 30px;
  border-left: 4px solid #C27C0E;
  border-radius: 8px;
  background: #F8EFE7;
  color: #6B4A0E;
}
.mk-avisos li + li { margin-top: 4px; }
.mk-rolagem { overflow-x: auto; }
.mk-tabela select { min-width: 150px; }
.mk-tabela .mk-erro { color: #A3341F; font-weight: 600; }
.mk-tabela .mk-ok { color: #2E6B3A; }
.mk-tabela tr.mk-sin-asignar td { background: #F8EFE7; }
.mk-iva { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Formulários da seção: quebram a linha no celular, nenhum campo espremido. */
#ajustes-marketing-conteudo .form-en-linea { flex-wrap: wrap; }
#ajustes-marketing-conteudo .form-en-linea input:not([type="checkbox"]),
#ajustes-marketing-conteudo .form-en-linea select { flex: 1 1 140px; min-width: 0; }
#ajustes-marketing-conteudo .mk-tabela td { vertical-align: middle; }

/* =================================================================
   «Trabajar en otro centro este día» (07/10/2026, otroCentro.js)
   ================================================================= */
.grade-profesionais-cabecalho, .rj-cab { position: relative; }
.grade-profesionais-cabecalho:has(.oc-menu) { padding-right: 34px; }
.oc-menu {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  min-width: 28px; height: 28px; padding: 0 6px;
  border: 1px solid transparent; border-radius: var(--raio-pequeno);
  background: transparent; color: var(--cor-texto-suave);
  font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.oc-menu:hover, .oc-menu:focus-visible { background: var(--cor-fundo); border-color: var(--cor-borda); color: var(--cor-texto); }
.rj-cab .oc-menu { top: 2px; right: 2px; transform: none; min-width: 24px; height: 24px; font-size: 1rem; }
.oc-etiqueta {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
  background: var(--cor-primaria-suave); color: var(--cor-primaria-escura);
  font-size: 0.68rem; font-weight: 600; white-space: nowrap; vertical-align: 1px;
}
.rj-cab .oc-etiqueta { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.grade-profesionais-contagem:has(.oc-etiqueta) { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.grade-profesionais-contagem .oc-etiqueta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.oc-linha-celular {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 4px 0 8px; padding: 8px 10px;
  border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); background: var(--cor-cartao);
}
.oc-linha-celular .oc-linha-nome { font-weight: 600; }
.oc-linha-celular .oc-etiqueta { margin-left: 0; }
.oc-linha-celular .oc-menu { position: static; transform: none; margin-left: auto; height: 32px; font-size: 0.85rem; border-color: var(--cor-borda); }
.oc-dialogo { width: min(440px, calc(100vw - 32px)); }
.oc-dialogo h2 { margin-bottom: 4px; }
.oc-campo { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.oc-campo > span { font-size: 0.85rem; font-weight: 600; }
.oc-aviso { margin-top: 12px; padding: 10px 12px; border-radius: var(--raio-pequeno); background: var(--cor-primaria-suave); color: var(--cor-texto); }
.oc-aviso:empty { display: none; }
.oc-erro { margin-top: 12px; color: var(--cor-perigo); }
.oc-lista { margin: 8px 0 0 18px; }
.oc-dias { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.oc-dia { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); }
.oc-dia-textos { display: flex; flex-direction: column; flex: 1; min-width: 0; }

/* Clienta de WhatsApp sem telefone (10/10/2026) */
.chip-sem-telefone { background: #EEF0F3; color: #4A5260; border-color: #EEF0F3; }
.etiqueta-sem-telefone { display: inline-block; margin-top: 4px; font-size: 0.78rem; color: #4A5260; background: #EEF0F3; border-radius: 999px; padding: 2px 9px; }
.etiqueta-sem-telefone.oculto { display: none; }
.mc-etiqueta-sem-telefone { font-size: 0.7rem; font-weight: 600; color: #4A5260; background: #EEF0F3; border-radius: 999px; padding: 1px 7px; margin-right: 6px; }
#mc-ligar.desabilitado { opacity: 0.35; pointer-events: none; }

/* =================================================================
   CITA NUM PAINEL SÓ (10/10/2026, painelCita.js)
   ================================================================= */
.pc-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.pc-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pc-campo > label { font-size: 0.8rem; font-weight: 600; color: var(--texto-2, var(--cor-texto-suave)); }
.pc-campo input, .pc-campo select, .pc-campo textarea { width: 100%; box-sizing: border-box; }
.pc-campo-largo { grid-column: 1 / -1; }
.pc-campo.oculto { display: none; }
.pc-bloco-pago .pc-rotulo { margin-top: 12px; }
.pc-pack-escolha { margin-top: 12px; }
.pc-info-pago { margin: 10px 0 0; font-weight: 600; }
.pc-pagos-lista:empty { display: none; }
.pc-pagos-lista .pc-cobrado { margin-top: 6px; }
.pc-estado .botao-link { margin-left: 8px; }
.pc-pergunta-cita-hoy { font-size: 1.15rem; font-weight: 600; margin: 0 0 4px; }
@media (max-width: 420px) {
  .pc-campos { grid-template-columns: 1fr; }
}

/* Calendário (10/10/2026): Realizada mais clara (fundo quase branco,
   texto suave); Anulada e No vino continuam visíveis, nome riscado e cinza. */
.cita-card.estado-realizado {
  background: #fcfbf9;
  color: var(--texto-3, #8a8478);
  box-shadow: inset 0 0 0 1px #ece8e1;
}
.cita-card.estado-realizado .cita-card-cliente,
.cita-card.estado-realizado .cita-card-procedimento { color: var(--texto-3, #8a8478); }
.cita-card.estado-cancelado .cita-card-cliente,
.cita-card.estado-ausente .cita-card-cliente,
.ac-card.ac-estado-cancelado .ac-card-nome,
.ac-card.ac-estado-ausente .ac-card-nome {
  text-decoration: line-through;
  color: #9a958d;
}
.cita-card.estado-cancelado,
.cita-card.estado-ausente { color: #9a958d; }
.ac-card.ac-estado-realizado { background: #fcfbf9; color: var(--texto-3, #8a8478); }
.ac-card.ac-estado-cancelado,
.ac-card.ac-estado-ausente { color: #9a958d; background: #f6f5f3; }
.opcoes-grade.pc-sim-nao { grid-template-columns: 1fr 1fr; }
.pc-secundarias.pc-secundarias-3 { grid-template-columns: repeat(3, 1fr); }
.pc-acao.pc-guardar { color: var(--texto); }
.ac-card.ac-estado-realizado { border-color: #efebe4; box-shadow: none; }
.ac-card.ac-estado-realizado .ac-card-nome,
.ac-card.ac-estado-realizado .ac-card-tratamento,
.ac-card.ac-estado-realizado .ac-card-linha3 { color: var(--texto-3, #8a8478); }

/* =================================================================
   PAINEL DA CITA: origem, produtos e «Deshacer» (11/10/2026)
   ================================================================= */
.pc-campo.pc-origem-vazia select { background: #fff8db; border-color: #ecd98a; }
.pc-origem-dica { font-weight: 500; color: #8a6d0b; }
.pc-deshacer { margin-left: 8px; }
.pc-aviso-deshacer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: 10px; background: #fff4e0; color: #6b4a07; font-size: 0.86rem; }
.pc-produtos { margin-top: 12px; }
.pp-linhas { display: flex; flex-direction: column; gap: 10px; }
.pp-linha { padding: 10px; border: 1px solid var(--borde, #e6e1d8); border-radius: 10px; background: var(--tarjeta, #fff); }
.pp-campo { display: flex; flex-direction: column; gap: 3px; font-size: 0.76rem; font-weight: 600; color: var(--texto-3, #8a8478); }
.pp-campo input { width: 100%; box-sizing: border-box; }
.pp-adicionar { margin-top: 8px; }
.pp-vendas { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.pp-venda { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.88rem; }
.pc-total-hoy { margin: 12px 0 0; font-weight: 700; }
.pc-total-hoy.oculto { display: none; }

/* Desplegable «Pack» (11/10/2026): «Vender otro pack» / «Cancelar» */
.pc-links-pack { display: flex; gap: 14px; margin-top: 6px; }
.pc-links-pack .oculto { display: none; }
.pc-info-sessoes { margin: 8px 0 0; }
.pc-info-sessoes.oculto { display: none; }
/* Produtos: «¿Qué vende?» | «Importe» | × (12/10/2026) */
.pp-linha { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 8px; align-items: end; }
.pp-linha .pp-campo-descricao { grid-column: 1 / -1; }
.sessao-total td { font-weight: 700; padding-top: 10px; }
.titulo-pagos-sem-sessao { margin: 14px 0 6px; }

/* Tabela «Sesiones» no celular (12/10/2026): cada sessão vira um cartão,
   sem rolagem horizontal; «Editar pago» quebra linha. */
@media (max-width: 640px) {
  .tabla-sessoes, .tabla-pagos-sem-sessao { display: block; width: 100%; min-width: 0; }
  .tabla-sessoes thead { display: none; }
  .tabla-sessoes tbody, .tabla-sessoes tfoot, .tabla-pagos-sem-sessao tbody { display: block; }
  .tabla-sessoes tr, .tabla-pagos-sem-sessao tr { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--borde, #e6e1d8); }
  .tabla-sessoes td, .tabla-pagos-sem-sessao td { display: block; border: none; padding: 0; }
  .tabla-sessoes td:first-child::before { content: 'Sesión '; }
  .tabla-sessoes td:first-child { font-weight: 700; }
  .tabla-sessoes .sessao-pagado { width: 100%; }
  .tabla-sessoes .sessao-pagado::before { content: 'Pagado: '; font-weight: 600; }
  .tabla-sessoes .sessao-acoes, .tabla-pagos-sem-sessao .sessao-acoes { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  .tabla-sessoes .sessao-form-linha td { width: 100%; font-weight: 400; }
  .tabla-sessoes .sessao-form-linha td::before { content: none; }
  .tabla-sessoes .sessao-pagado div { display: inline; }
  .tabla-sessoes .sessao-total td::before { content: none; }
  .form-editar-pago { display: flex; flex-wrap: wrap; gap: 8px; }
  .form-editar-pago input, .form-editar-pago select { flex: 1 1 120px; min-width: 0; }
  .form-editar-pago .botao { flex: 1 1 auto; }
  .form-editar-pago p { width: 100%; margin: 0; }
}

/* Formaciones (11/10/2026): o item do menu é um <a> (link pra página
   /formacion), não um <button> - tira o sublinhado e a cor de link. */
a.sidebar-item {
  text-decoration: none;
  box-sizing: border-box;
}


/* =================================================================
   TEMA LUMY (15/10/2026) — direção A «Calma»
   Fica no FIM do arquivo de propósito: ganha das regras antigas sem
   precisar mexer nas ~6000 linhas de cima. Cores em :root (topo).
   ================================================================= */

/* Títulos em Lora: peso médio, sem apertar as letras */
h1, h2, h3 {
  font-weight: 500;
  letter-spacing: 0;
}

/* --- Menu lateral claro (antes era marrom-escuro) --- */
.sidebar {
  border-right: 1px solid var(--borde);
}
.sidebar-marca-nome {
  color: var(--texto);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.sidebar-item:hover {
  background: rgba(30, 27, 23, 0.06);
}
.sidebar-item.ativa {
  background: #E4DCCE;
  color: var(--texto);
  font-weight: 600;
}
.sidebar-item.ativa .icone {
  color: var(--acento-texto);
  opacity: 1;
}
.sidebar-centro {
  background: var(--tarjeta);
  border-color: var(--borde);
  color: var(--texto);
}
.sidebar-centro:disabled {
  background: var(--tarjeta-suave);
  color: var(--texto-2);
}
.sidebar-rodape {
  border-top-color: var(--borde);
}
.sidebar-usuario {
  color: var(--texto);
}
.sidebar .avatar {
  background: var(--primario);
  color: var(--fondo);
}
.sidebar .botao-claro,
.botao-claro {
  background: transparent;
  border-color: var(--borde-fuerte);
  color: var(--texto);
}
.sidebar .botao-claro:hover,
.botao-claro:hover {
  background: rgba(30, 27, 23, 0.06);
}
/* Contador de não lidas: terracota em vez de vermelho de alerta */
.sidebar .badge-nao-lidas {
  background: var(--acento-texto);
}

/* --- Faixa «Versión de prueba» --- */
.franja-demo {
  background: var(--primario);
  color: var(--fondo);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* --- Cartões: borda fina no lugar da sombra, como no protótipo --- */
.cartao {
  border: 1px solid var(--borde);
  box-shadow: none;
}

/* --- Foco visível (teclado) com a cor da marca --- */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* --- Tela de acesso: painel da marca Lumy no lugar da foto da Skin Up --- */
.pantalla-acceso-imagen.lumy-painel-marca {
  aspect-ratio: auto;
  align-self: stretch;
  min-height: 420px;
  background: var(--primario);
  color: var(--fondo);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  box-sizing: border-box;
}
.lumy-marca-nome {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: 0.32em;
}
.lumy-marca-frase {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: 1.15;
  max-width: 14ch;
}
.lumy-marca-frase em {
  font-style: normal;
  color: #D9A27C;
}
.lumy-marca-sub {
  font-size: 0.85rem;
  color: #CFC6B8;
  letter-spacing: 0.04em;
}
@media (max-width: 767px) {
  .pantalla-acceso-imagen.lumy-painel-marca {
    min-height: 0;
    height: auto;
    padding: 28px 24px;
    gap: 16px;
  }
  .lumy-marca-frase {
    font-size: 1.5rem;
  }
}

/* =================================================================
   Informes › gráficos (Tema Lumy, 15/10/2026) — public/informeGraficos.js
   ================================================================= */
.ig {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.ig .cartao {
  margin-bottom: 0;
}
.ig h3 {
  font-size: 1.15rem;
  margin-bottom: 4px;
}
.ig-topo {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.ig-linha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
@media (max-width: 899px) {
  .ig-topo,
  .ig-linha {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Destaque: o número grande */
.ig-destaque {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ig-rotulo {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.ig-destaque-valor {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 2.6rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.ig-comparacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--texto-2);
}
.ig-variacao {
  font-weight: 600;
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 999px;
}
.ig-sobe {
  background: #E2F0E7;
  color: #25603F;
}
.ig-desce {
  background: #F8E3E1;
  color: #8E2A23;
}
.ig-composicao {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}
.ig-composicao-pedaco {
  flex-basis: 0;
  min-width: 4px;
}
.ig-legenda-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ig-legenda-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto 3.2em;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
}
.ig-legenda-nome {
  color: var(--texto-2);
}
.ig-legenda-valor {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ig-legenda-pct {
  color: var(--texto-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ig-amostra {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}
.ig-amostra-tracejada {
  height: 2px;
  width: 14px;
  border-radius: 0;
  background: none !important;
  border-top: 2px dashed #9A9185;
}

/* Cartões dos gráficos */
.ig-cartao {
  min-width: 0;
}
.ig-subtitulo {
  font-size: 0.84rem;
  margin-bottom: 8px;
}
.ig-legenda-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 6px 0 10px;
  font-size: 0.82rem;
  color: var(--texto-2);
}
.ig-legenda-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ig-area {
  position: relative;
}
.ig-area svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.ig-eixo {
  font-family: var(--fonte-corpo);
  font-size: 11px;
  fill: var(--texto-3);
}
.ig-eixo-hoje {
  fill: var(--texto);
  font-weight: 600;
}
.ig-barra {
  transition: opacity 0.12s;
}
.ig-barra.ig-apagada {
  opacity: 0.35;
}
.ig-alvo {
  cursor: default;
  outline: none;
}
.ig-alvo:focus-visible {
  stroke: var(--acento);
  stroke-width: 2;
}
.ig-aviso {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  text-align: center;
}

/* Dica (tooltip) */
.ig-dica {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  min-width: 170px;
  background: var(--primario);
  color: var(--fondo);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: var(--sombra-elevada);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
}
.ig-dica-linha {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ig-dica-nome {
  flex: 1;
}
.ig-dica-valor {
  font-variant-numeric: tabular-nums;
}
.ig-dica-forte {
  font-weight: 600;
}
.ig-dica .ig-amostra-tracejada {
  border-top-color: #CFC6B8;
}

/* Barras horizontais por profissional */
.ig-barras-h {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.ig-barra-h {
  display: grid;
  grid-template-columns: minmax(80px, 9rem) minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
}
.ig-barra-h-nome {
  font-weight: 500;
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ig-barra-h-trilho {
  height: 12px;
  background: var(--tarjeta-suave);
  border-radius: 0 4px 4px 0;
}
.ig-barra-h-preench {
  display: block;
  height: 100%;
  background: #B4652F;
  border-radius: 0 4px 4px 0;
}
.ig-barra-h-valor {
  font-weight: 600;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ig-barra-h-extra {
  grid-column: 1;
  font-size: 0.75rem;
  color: var(--texto-3);
}

/* Tabela «Ver los datos» */
.ig-tabela {
  margin-top: 10px;
  font-size: 0.85rem;
}
.ig-tabela summary {
  cursor: pointer;
  color: var(--texto-2);
  min-height: 32px;
  display: flex;
  align-items: center;
}
.ig-tabela-rolagem {
  overflow-x: auto;
  max-height: 320px;
  overflow-y: auto;
}

/* ---------------------------------------------------------------
   Ajustes › Asistente (15/10/2026, public/asistenteAjustes.js)
   --------------------------------------------------------------- */
#ajustes-asistente-conteudo { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
#ajustes-asistente-conteudo .aj-cartao > .texto-suave { margin-top: 4px; }
.as-estado-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.as-estado-marca { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.as-estado-marca h3 { margin: 0; }
.as-estado-marca p { margin: 2px 0 0; }
.as-ponto {
  flex: none; width: 12px; height: 12px; margin-top: 9px; border-radius: 50%;
  background: var(--borde-fuerte); box-shadow: 0 0 0 4px var(--tarjeta-suave);
}
.as-ponto-on { background: #2E7D4F; box-shadow: 0 0 0 4px #DCEFE2; }
.as-pendientes {
  margin-top: 14px; padding: 10px 14px; border-left: 4px solid var(--acento);
  border-radius: var(--raio-pequeno); background: var(--acento-suave); color: var(--texto);
}
.as-pendientes ul { margin: 6px 0 0; padding-left: 18px; }
.as-pendientes li + li { margin-top: 2px; }
.as-completo { margin: 12px 0 0; color: #2E6B3A; font-weight: 600; }
.as-aviso-ia { margin: 12px 0 0; padding: 8px 12px; border-radius: var(--raio-pequeno); background: var(--primario-suave); color: var(--texto-2); font-size: 0.85rem; }
.as-consumo { margin: 12px 0 0; font-size: 0.85rem; color: var(--texto-2); font-variant-numeric: tabular-nums; }

.as-grupo { border: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--borde); min-width: 0; }
.as-grupo legend {
  padding: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--texto-3);
}
.as-campo { position: relative; min-width: 0; }
.as-campo label, .as-rotulo { display: block; margin: 12px 0 4px; font-size: 0.8rem; font-weight: 600; color: var(--texto-2); }
.as-ajuda { display: block; margin: 0 0 6px; font-size: 0.78rem; color: var(--texto-3); }
.as-campo .as-ajuda:last-child { margin: 6px 0 0; }
.as-contador { display: block; margin-top: 3px; text-align: right; font-size: 0.72rem; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.as-contador-excesso { color: var(--peligro); font-weight: 700; }
.as-campo select { width: 100%; }

.as-tonos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.as-tono {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--borde); border-radius: var(--raio-pequeno); background: var(--tarjeta);
  color: var(--texto); font-size: 0.9rem; font-weight: 400;
}
.as-tono:has(input:checked) { border-color: var(--primario); background: var(--tarjeta-suave); }
.as-tono input, .as-interruptor input { width: auto; flex: none; margin: 3px 0 0; accent-color: var(--primario); }
.as-tono strong, .as-interruptor strong { display: block; font-weight: 600; }
.as-tono .as-ajuda, .as-interruptor .as-ajuda { margin: 0; }

.as-interruptor {
  display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; cursor: pointer;
  font-size: 0.9rem; font-weight: 400; color: var(--texto);
}

.as-avanzado { margin-top: 18px; border-top: 1px solid var(--borde); padding-top: 6px; }
.as-avanzado summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--texto-2); }

.as-rodape {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borde);
}
.as-tamanho { margin-right: auto; font-size: 0.8rem; color: var(--texto-3); }
.as-manual .as-rodape {
  position: sticky; bottom: 0; z-index: 2; margin: 18px -20px -20px; padding: 12px 20px;
  background: var(--tarjeta); border-radius: 0 0 var(--raio) var(--raio);
}

.as-centro { padding: 14px 0 4px; border-top: 1px solid var(--borde); margin-top: 14px; }
.as-centro h4 { margin: 0; font-family: var(--fonte-titulo); font-size: 1.05rem; }
.as-centro > .botao { margin-top: 10px; }

.as-filtros { margin: 12px 0; flex-wrap: wrap; }
.as-filtros .botao { min-height: 36px; padding: 0 12px; border: none; background: transparent; box-shadow: none; color: var(--texto-2); }
.as-filtros .botao.ativo { background: var(--tarjeta); color: var(--texto); box-shadow: 0 1px 3px rgba(46, 38, 25, 0.12); }

.as-lista-fichas { list-style: none; margin: 0; padding: 0; border: 1px solid var(--borde); border-radius: var(--raio-pequeno); overflow: hidden; }
.as-ficha + .as-ficha { border-top: 1px solid var(--borde); }
.as-ficha-cab {
  width: 100%; min-height: 52px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: 12px; padding: 8px 14px; border: none; background: var(--tarjeta); cursor: pointer;
  font: inherit; text-align: left; color: var(--texto);
}
.as-ficha-cab:hover { background: var(--tarjeta-suave); }
.as-ficha-cab[aria-expanded="true"] { background: var(--tarjeta-suave); }
.as-ficha-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-ficha-meta { grid-column: 1; grid-row: 2; font-size: 0.78rem; color: var(--texto-3); }
.as-ficha-meta:empty { display: none; }
.as-chip { grid-column: 2; grid-row: 1 / span 2; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.as-chip-ok { background: #DCEFE2; color: #23593A; }
.as-chip-parcial { background: var(--acento-suave); color: var(--acento-texto); }
.as-chip-falta { background: #F6E1DE; color: var(--peligro); }
.as-chip-oculto { background: var(--primario-suave); color: var(--texto-2); }
.as-ficha-form { padding: 4px 14px 14px; background: var(--tarjeta-suave); border-top: 1px solid var(--borde); }
.as-ficha-form textarea, .as-ficha-form input[type="text"], .as-ficha-form select { background: var(--tarjeta); }
.as-ficha-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 16px; align-items: end; }
.as-vazio { padding: 14px; }

@media (max-width: 640px) {
  #ajustes-asistente-conteudo .linha-dupla { grid-template-columns: 1fr; gap: 0; }
  /* No celular a barra de baixo cobriria o rodapé fixo: fica no fim do formulário. */
  .as-manual .as-rodape { position: static; margin: 18px 0 0; padding: 14px 0 0; background: none; }
}

/* ---------------------------------------------------------------
   Ajustes › Probar el asistente (15/10/2026, public/asistenteProbar.js)
   --------------------------------------------------------------- */
#ajustes-probar-conteudo { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.pr-intro p { margin: 0; }
.pr-intro .as-ajuda { margin-top: 4px; }
.pr-como { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pr-como .as-campo { flex: 1 1 260px; }
.pr-chat { display: flex; flex-direction: column; gap: 12px; padding-bottom: 14px; }
.pr-chat .as-aviso-ia { margin: 0; }
.pr-log {
  min-height: 260px; max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border: 1px solid var(--borde); border-radius: var(--raio-pequeno); background: var(--fondo);
}
.pr-vazio { margin: auto; text-align: center; }
.pr-msg { display: flex; flex-direction: column; max-width: min(78%, 560px); }
.pr-msg-clienta { align-self: flex-end; align-items: flex-end; }
.pr-msg-bot { align-self: flex-start; }
.pr-bolha { padding: 9px 13px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.pr-msg-clienta .pr-bolha { background: var(--primario); color: var(--fondo); border-bottom-right-radius: 4px; }
.pr-msg-bot .pr-bolha { background: var(--tarjeta); border: 1px solid var(--borde); border-bottom-left-radius: 4px; }
.pr-pensando { color: var(--texto-3); font-style: italic; }
.pr-detalhes { margin-top: 4px; font-size: 0.8rem; color: var(--texto-3); }
.pr-detalhes summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.pr-passos { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--texto-2); }
.pr-passos ul { margin: 4px 0 0; padding-left: 18px; }
.pr-codigo {
  display: block; margin-top: 3px; padding: 4px 8px; border-radius: 6px; background: var(--tarjeta-suave);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.72rem; white-space: pre-wrap; overflow-wrap: anywhere;
}
.pr-resultado { max-height: 120px; overflow-y: auto; color: var(--texto-3); }
.pr-rascunho { margin: 4px 0 0; padding: 6px 8px; border-left: 3px solid var(--peligro); background: #F6E1DE; color: var(--texto); }
.pr-form { display: flex; gap: 10px; align-items: flex-end; }
.pr-form textarea { flex: 1; min-height: 44px; resize: none; }
@media (max-width: 640px) {
  .pr-msg { max-width: 92%; }
  .pr-log { max-height: 55vh; }
}