/* BOTOES */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-2) var(--e-4);
  border-radius: var(--raio-2);
  border: 1px solid transparent;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transicao), border-color var(--transicao);
  text-decoration: none;
  font-family: var(--fonte-corpo);
}

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.loading { color: transparent; position: relative; }
.btn.loading::after {
  content: "";
  position: absolute; width: 16px; height: 16px;
  border: 2px solid #fff; border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-primario {
  background-color: var(--cor-acao);
  color: #fff;
}
.btn-primario:hover:not(:disabled) { background-color: var(--cor-acao-hover); }
.btn-primario:active:not(:disabled) { transform: scale(0.98); }

.btn-secundario {
  background-color: transparent;
  color: var(--cor-texto);
  border-color: var(--cor-borda);
}
.btn-secundario:hover:not(:disabled) { background-color: var(--areia-hover); }

.btn-texto {
  background-color: transparent;
  color: var(--cor-acao);
  padding: var(--e-1) var(--e-2);
}
.btn-texto:hover:not(:disabled) { background-color: var(--ameixa-suave); }

/* Destrutivo comum */
.btn-destrutivo {
  background-color: transparent;
  color: var(--tinta);
  border-color: var(--cor-borda);
}

/* FORMULARIO */
.campo { margin-bottom: var(--e-4); display: flex; flex-direction: column; }
.campo label { font-weight: 700; margin-bottom: var(--e-1); font-size: var(--t-sm); }
.campo input, .campo textarea, .campo select {
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-1);
  background-color: var(--cor-superficie);
  color: var(--cor-texto);
  transition: border-color var(--transicao);
}
.campo input:focus, .campo textarea:focus { border-color: var(--cor-acao); }
.campo .ajuda { font-size: var(--t-xs); color: var(--cor-texto-suave); margin-top: var(--e-1); }
.campo .erro { color: var(--tinta); font-weight: bold; font-size: var(--t-xs); margin-top: var(--e-1); display:none; }
.campo.has-error input { border-color: var(--tinta); }
.campo.has-error .erro { display: block; }
.contador { font-size: var(--t-xs); color: var(--cor-texto-suave); align-self: flex-end; }

/* CARD */
.card {
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-3);
  padding: var(--e-5);
  box-shadow: var(--sombra-1);
}

/* BADGE */
.badge {
  display: inline-block;
  padding: var(--e-1) var(--e-2);
  border-radius: var(--raio-1);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  background-color: var(--cor-borda);
  color: var(--cor-texto);
}
.badge-sucesso { background-color: var(--musgo-suave); color: var(--cor-sucesso); }

/* AVISOS */
.aviso {
  padding: var(--e-3) var(--e-4);
  border-radius: var(--raio-2);
  border-left: 4px solid var(--cor-borda);
  background-color: var(--cor-superficie);
  margin-bottom: var(--e-4);
}
.aviso-info { border-left-color: var(--cor-acao); background-color: var(--ameixa-suave); }
.aviso-atencao { border-left-color: var(--cor-atencao); }

/* 
==================================================
AVISO DE CRISE (Uso exclusivo das cores de crise)
==================================================
*/
.aviso-crise {
  border-left-color: var(--cor-crise);
  background-color: rgba(180, 71, 46, 0.05); /* Derivação da cor brasa */
  color: var(--cor-texto);
}
.aviso-crise h4 { color: var(--cor-crise); }
.aviso-crise strong { color: var(--brasa); }

/* MODAL */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(31,27,36,0.8);
  display: flex; justify-content: center; align-items: center;
  z-index: 100;
}
.modal {
  background: var(--cor-fundo);
  padding: var(--e-5);
  border-radius: var(--raio-3);
  max-width: 500px; width: 100%;
  box-shadow: var(--sombra-2);
}

/* TOAST */
.toast {
  position: fixed; bottom: var(--e-5); right: var(--e-5);
  background: var(--tinta); color: var(--papel);
  padding: var(--e-3) var(--e-4); border-radius: var(--raio-2);
  box-shadow: var(--sombra-2); z-index: 200;
}

/* SKELETON */
.skeleton {
  background: linear-gradient(90deg, var(--cor-borda) 25%, var(--areia-hover) 50%, var(--cor-borda) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: var(--raio-1);
}
@keyframes loading { to { background-position: -200% 0; } }

/* PAGINACAO & AVATAR */
.avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 1px solid var(--cor-borda); }
.paginacao { display: flex; gap: var(--e-2); }
.paginacao .pagina { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--cor-borda); border-radius: var(--raio-1); cursor: pointer; }
.paginacao .pagina.ativa { background: var(--cor-acao); color: #fff; border-color: var(--cor-acao); }

/* ABAS e ACORDEAO */
.abas { display: flex; border-bottom: 1px solid var(--cor-borda); gap: var(--e-4); }
.aba { padding: var(--e-2) 0; cursor: pointer; border-bottom: 2px solid transparent; }
.aba.ativa { border-bottom-color: var(--cor-acao); font-weight: bold; color: var(--cor-acao); }

.acordeao { border-bottom: 1px solid var(--cor-borda); }
.acordeao-titulo { padding: var(--e-3) 0; cursor: pointer; font-weight: bold; display: flex; justify-content: space-between; }
.acordeao-conteudo { display: none; padding-bottom: var(--e-3); color: var(--cor-texto-suave); }
.acordeao.ativo .acordeao-conteudo { display: block; }

/* 
==================================================
COMPONENTE-ASSINATURA: GRADE DE HORÁRIOS
==================================================
*/
.grade-horarios {
  display: grid;
  /* Uma coluna por dia, quantos dias vierem — fixar em 7 fazia o 8º dia
     quebrar para uma segunda linha e ficar sozinho no canto.
     Coluna estreita: a célula só precisa caber "09:00" e um primeiro nome;
     antes eram 7 colunas de 1fr esticadas na largura toda, e cada horário
     ficava perdido dentro de um retângulo largo. */
  grid-auto-flow: column;
  grid-auto-columns: 104px;
  justify-content: center;
  gap: var(--e-1);
  width: 100%;
  font-family: var(--fonte-dados);
  font-variant-numeric: tabular-nums;
  animation: fade-in 400ms ease-out;
}

@keyframes fade-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.grade-dia { display: flex; flex-direction: column; gap: var(--e-1); }
.grade-cabecalho { text-align: center; font-size: var(--t-xs); font-weight: bold; text-transform: uppercase; color: var(--cor-texto-suave); padding-bottom: var(--e-1); border-bottom: 1px solid var(--cor-borda); margin-bottom: var(--e-1); line-height: 1.25; }

.slot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  border-radius: var(--raio-1);
  font-size: var(--t-xs);
  line-height: 1.2;
  cursor: pointer;
  transition: all var(--transicao);
  border: 1px solid var(--cor-borda);
}

.slot.livre { background-color: var(--cor-superficie); color: var(--cor-acao); border-color: var(--cor-acao); }
.slot.livre:hover { background-color: var(--ameixa-suave); }
.slot.ocupado { background-color: var(--areia); color: var(--cor-texto-suave); cursor: not-allowed; border-color: transparent; opacity: 0.6; }
.slot.selecionado { background-color: var(--cor-sucesso); color: #fff; border-color: var(--cor-sucesso); }

@media (max-width: 768px) {
  .grade-horarios {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--e-3);
  }
  .grade-dia { min-width: 92px; scroll-snap-align: start; }

/* Barra de "saiu versao nova".
   Fica no rodape da janela, nao no topo: no topo ela empurraria o conteudo e
   a pessoa perderia o lugar onde estava lendo. */
.barra-versao {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: var(--e-4); z-index: 90;
  display: flex; align-items: center; gap: var(--e-3);
  max-width: min(46rem, calc(100vw - var(--e-6)));
  padding: var(--e-3) var(--e-4);
  background: var(--tinta); color: var(--papel);
  border-radius: var(--raio-3); box-shadow: var(--sombra-2);
  font-size: var(--t-sm);
  animation: fade-in 300ms ease-out;
}
.barra-versao span { flex: 1; min-width: 0; }
.barra-versao .btn { flex: none; font-size: var(--t-sm); padding: 0.4rem 0.9rem; }
.barra-versao-fechar {
  flex: none; background: none; border: 0; cursor: pointer;
  color: var(--papel); opacity: 0.6; font-size: var(--t-lg);
  line-height: 1; padding: 0 var(--e-1);
}
.barra-versao-fechar:hover { opacity: 1; }

@media (max-width: 560px) {
  .barra-versao { flex-wrap: wrap; }
  .barra-versao span { flex-basis: 100%; }
}