/* =============================================================
   💬 POPUPS.CSS - ESTILOS DE TODOS OS POPUPS DA APLICAÇÃO
   =============================================================
   Este arquivo define:
   - Overlay escuro compartilhado por todos os popups
   - Container de conteúdo centralizado e reutilizável
   - Estilos específicos de cada popup
   - Histórico de consumo diário
   ============================================================= */


/* =============================================================
   🚫 CLASSE UTILITÁRIA DE OCULTAÇÃO
   Força um elemento a ficar oculto (usado por JavaScript)
   ============================================================= */
.hidden {
  display: none !important;
}


/* =============================================================
   🎭 OVERLAY BASE — COMPARTILHADO POR TODOS OS POPUPS
   Cobre toda a tela com fundo escuro semi-transparente.
   Centraliza o conteúdo vertical e horizontalmente.
   Uso: adicionar classe .popup-overlay ao elemento wrapper
   ============================================================= */
.popup-overlay {
  position: fixed;
  inset: 0;

  display: none;
  justify-content: center;
  align-items: center;

  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

/* Ativado via JavaScript adicionando a classe .show */
.popup-overlay.show {
  display: flex;
}


/* =============================================================
   📦 MODAL BASE — COMPARTILHADO POR TODOS OS POPUPS
   Caixa branca centralizada com scroll interno oculto.
   Uso: adicionar classe .popup-modal ao elemento interno
   ============================================================= */
.popup-modal {
  width: 90%;
  max-width: 400px;
  max-height: 90vh;

  background: #fff;
  padding: 20px;
  border-radius: 12px;

  text-align: center;
  overflow-y: auto;
  scrollbar-width: none;        /* Firefox */
}

.popup-modal::-webkit-scrollbar {
  display: none;                /* Chrome, Safari, Edge */
}


/* =============================================================
   🖼️ POPUP DE PERFIL (#perfil)
   Exibe foto e nome do usuário logado via Google.
   ============================================================= */
.popup-modal img {
  width: 50%;
  height: auto;
}


/* =============================================================
   🧮 POPUP DE CALCULADORA (#meu-popup2)
   Permite calcular a meta diária com base no peso corporal.
   ============================================================= */
#calcular-btn,
#peso-input,
#aplicar-meta-btn {
  padding: 20px;
  font-size: 16px;
  margin: auto;
  margin-top: 10px;

  background-color: #ffffff;
  text-align: center;
  cursor: pointer;
}

#calcular-btn,
#aplicar-meta-btn {
  border: none;
}

.calculadora {
  display: flex;
  justify-content: center;

  width: 90%;
  margin: auto;
  margin-top: 20px;

  gap: 10px;
}


/* =============================================================
   📚 POPUP DE HISTÓRICO (#historico-popup)
   Exibe os últimos 7 dias de consumo de água.
   O modal herda .popup-modal e adiciona alinhamento à esquerda.
   ============================================================= */
.historico-modal {
  text-align: left;
}

/* Cabeçalho com título e botão de fechar */
.historico-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.historico-modal-header h2 {
  font-size: 18px;
  margin: 0;
}

.historico-modal-header button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #888;
  line-height: 1;
}

/* Card de cada dia */
.historico-dia {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}

/* Linha superior: data à esquerda, total à direita */
.historico-dia-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.historico-data {
  font-weight: bold;
  font-size: 14px;
  color: #333;
}

.historico-total {
  font-size: 13px;
  color: #666;
}

/* Verde quando a meta do dia foi atingida */
.historico-total.meta-atingida {
  color: #2e7d32;
  font-weight: bold;
}

/* Lista de registros individuais dentro do card */
.historico-registros {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.historico-registro-individual {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
  border-top: 1px solid #f0f0f0;
  color: #555;
}

.registro-hora {
  color: #888;
}

/* Azul para destacar a quantidade registrada */
.registro-quantidade {
  color: #1565c0;
  font-weight: 500;
}

/* Estados de carregamento e lista vazia */
.historico-carregando,
.historico-vazio {
  text-align: center;
  color: #aaa;
  font-size: 14px;
  padding: 24px 0;
}