/* =================================================================
   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. */
:root {
  --cor-fundo: #f7f2e9;
  --cor-cartao: #ffffff;
  --cor-borda: #e6dcc8;
  --cor-texto: #3a3226;
  --cor-texto-suave: #8a7d68;
  /* --cor-primaria mais escura que um dourado "puro" de propósito: um
     dourado claro atrás de texto branco (botões, aba ativa) fica com
     contraste baixo demais pra ler bem - essa tonalidade já passa no
     mínimo recomendado (WCAG AA, 4.5:1). */
  --cor-primaria: #8c6a1f;
  --cor-primaria-escura: #6f5518;
  --cor-primaria-suave: #f6ecd7;
  --cor-sidebar: #2f2617;
  --cor-sidebar-texto: #f0e6d2;
  --cor-sidebar-texto-suave: #b8a888;
  --cor-perigo: #c0473f;
  --fonte-corpo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-titulo: "Fraunces", Georgia, serif;
  --raio: 14px;
  --raio-pequeno: 10px;
  --sombra: 0 4px 16px rgba(60, 39, 51, 0.06);
  --sombra-elevada: 0 10px 30px rgba(60, 39, 51, 0.12);
}

/* 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);
  background: var(--cor-fundo);
  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;
}

.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 */
.pantalla-centrada {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

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

.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;
  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);
}

/* ---------------------------- 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;
}

/* .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;
}

/* -------------------- 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-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)
  );
}

/* 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;
}

/* 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);
}

.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);
}

.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;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--cor-borda);
}

.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;
}

.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;
}

.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;
}

/* ------------------------ 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);
}