/* ===========================================
   Café 360 — Componentes UI
   Header, navegação, FAB, empty states.
   =========================================== */

/* ====== APP CONTAINER ====== */

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-content {
  flex: 1;
  animation: fadeInUp var(--transicao-media) ease-out;
  /* Reserva espaço pra barra de gestos do Android (sem isso, botões fixos
     no rodapé das páginas ficam embaixo da nav bar do sistema) */
  padding-bottom: env(safe-area-inset-bottom);
}

/* Header e drawer estão definidos em layout.css. */

/* Status pill (offline/sync) */
.status-pill {
  font-size: 10px;
  font-weight: var(--peso-bold);
  padding: 4px 10px;
  border-radius: var(--raio-full);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  display: none;
  align-items: center;
  gap: 4px;
}
.status-pill.offline {
  display: inline-flex;
  background: var(--alerta);
  color: var(--branco);
}
.status-pill.offline::before {
  content: '';
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  animation: pulseGentle 1.5s ease-in-out infinite;
}
.status-pill.sync {
  display: inline-flex;
  background: var(--dourado);
  color: #2A2520;
}
.status-pill.ok { display: none; }

/* ====== FAB ====== */

.fab {
  position: fixed;
  bottom: calc(var(--gap-lg) + env(safe-area-inset-bottom));
  right: var(--gap-lg);
  z-index: 90;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--verde-medio), var(--verde-escuro));
  color: var(--texto-invertido);
  font-size: 32px;
  font-weight: var(--peso-light);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-fab);
  transition: transform var(--bounce), box-shadow var(--transicao-rapida);
  border: none;
  cursor: pointer;
}

.fab:active {
  transform: scale(0.92);
  background: var(--verde-escuro);
  box-shadow: var(--sombra-leve);
}

/* Pulse leve quando lista está vazia */
.fab.pulsando {
  animation: pulseGentle 2.4s ease-in-out infinite;
}

/* ====== EMPTY STATE — acolhedor e direcional ====== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--gap-3xl) var(--gap-xl);
  gap: var(--gap-md);
  animation: fadeInUp var(--transicao-lenta) ease-out;
}

.empty-state-ilustracao {
  width: 120px;
  height: 120px;
  margin-bottom: var(--gap-md);
  opacity: 0.85;
}

.empty-state .empty-icon {
  font-size: 56px;
  opacity: 0.6;
  filter: grayscale(0.2);
  margin-bottom: var(--gap-sm);
}

.empty-state h3,
.empty-state .empty-titulo {
  font-family: var(--fonte-manuscrita);
  font-size: var(--fs-cursive-lg);
  font-weight: 700;
  color: var(--verde-escuro);
  line-height: 1.1;
}

.empty-state p,
.empty-state .empty-mensagem {
  color: var(--texto-secundario);
  font-size: var(--fs-pequeno);
  max-width: 280px;
  line-height: var(--lh-relaxed);
}

.empty-state .empty-acao {
  margin-top: var(--gap-md);
  min-width: 200px;
}

.empty-state .empty-dica {
  font-size: var(--fs-mini);
  color: var(--texto-claro);
  font-style: italic;
  max-width: 260px;
  line-height: var(--lh-relaxed);
  margin-top: var(--gap-sm);
}

/* ====== LOADING ====== */

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-xxl);
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--bege-medio);
  border-top-color: var(--verde-medio);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loader-mini {
  color: var(--texto-claro);
  font-size: var(--fs-pequeno);
  padding: var(--gap-md) 0;
  text-align: center;
  font-style: italic;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ====== LISTA SIMPLES ====== */

.lista-item {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  padding: var(--gap-md) var(--gap-lg);
  border-bottom: 1px solid var(--linha-caderno);
  min-height: var(--toque-minimo);
  background: var(--branco);
  transition: background var(--transicao-rapida);
}

.lista-item:last-child { border-bottom: none; }

.lista-item.clicavel {
  cursor: pointer;
}
.lista-item.clicavel:active {
  background: var(--bege-suave);
}

/* ====== SEPARADOR DE DATA — manuscrita acolhedora ====== */

.separador-data {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  padding: var(--gap-lg) 0 var(--gap-sm);
}

.separador-data-texto {
  font-family: var(--fonte-manuscrita);
  font-size: var(--fs-cursive-md);
  font-weight: 700;
  color: var(--verde-medio);
  flex-shrink: 0;
  line-height: 1;
}

.separador-data::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--linha-fina);
}

/* ====== CHIPS / FILTROS ====== */

.filtro-chip {
  padding: 7px var(--gap-lg);
  border: 1.5px solid var(--linha-fina);
  border-radius: var(--raio-full);
  background: var(--branco);
  font-size: var(--fs-pequeno);
  font-weight: var(--peso-medio);
  color: var(--texto-secundario);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transicao-rapida);
  font-family: inherit;
}

.filtro-chip:active {
  transform: scale(0.96);
}

.filtro-chip.active,
.filtro-chip.ativo {
  background: var(--verde-medio);
  color: var(--texto-invertido);
  border-color: var(--verde-medio);
}

/* ====== DICA CONTEXTUAL (não tour) ====== */

.dica-contextual {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-md);
  padding: var(--gap-md) var(--gap-lg);
  background: var(--dourado-suave);
  border-left: 3px solid var(--dourado);
  border-radius: 0 var(--raio-md) var(--raio-md) 0;
  margin-bottom: var(--gap-md);
  animation: fadeInUp var(--transicao-media) ease-out;
}

.dica-contextual .dica-icone {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.dica-contextual .dica-texto {
  font-size: var(--fs-pequeno);
  color: var(--texto-dourado);
  line-height: var(--lh-relaxed);
}

.dica-contextual .dica-fechar {
  background: none;
  border: none;
  color: var(--texto-dourado);
  opacity: 0.6;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: var(--gap-sm);
}

/* Card de dicas (mescla época + dica do dia) */
.dicas-card {
  background: var(--dourado-suave);
  border-left: 3px solid var(--dourado);
  border-radius: 0 var(--raio-md) var(--raio-md) 0;
  padding: var(--gap-md) var(--gap-lg);
  margin-bottom: var(--gap-md);
  animation: fadeInUp var(--transicao-media) ease-out;
}
.dicas-topo {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.dicas-titulo {
  flex: 1;
  font-weight: var(--peso-bold);
  color: var(--texto-dourado);
  font-size: var(--fs-pequeno);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.dicas-fechar {
  background: none;
  border: none;
  color: var(--texto-dourado);
  opacity: 0.6;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.dica-linha {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sm);
  font-size: var(--fs-pequeno);
  color: var(--texto-dourado);
  line-height: var(--lh-relaxed);
  padding: 3px 0;
}
.dica-linha-ic { flex-shrink: 0; margin-top: 1px; }
.dica-linha strong { font-weight: var(--peso-bold); }