/* ============================================
   Remédios App - Estilos Customizados
   ============================================ */

:root {
  --cor-primaria: #259bef;
  --cor-primaria-hover: #1a7fd4;
  --cor-fundo: #f8f9fa;
  --cor-texto: #333;
  --cor-borda: #dee2e6;
  --cor-quantidade-bg: #e9ecef;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  margin: 0;
  padding: 0;
}

/* Header */
.header-app {
  background-color: var(--cor-primaria);
  padding: 15px 0;
}

.header-app h2 {
  margin: 0;
  font-weight: 600;
}

.header-app .brasao {
  height: 83px;
  margin-right: 50px;
}

/* Conteúdo principal */
.conteudo-principal {
  padding: 30px 50px;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .conteudo-principal {
    padding: 15px;
  }
}

/* Informações */
.info-section {
  margin: 20px 0;
  padding: 15px 0;
}

.info-section .bi {
  font-size: 1.3rem;
  color: var(--cor-primaria);
}

.info-section a {
  color: var(--cor-primaria);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.info-section a:hover {
  color: var(--cor-primaria-hover);
}

/* Accordion de farmácias */
.accordion-item {
  border: 1px solid var(--cor-borda);
  margin-bottom: 4px;
  border-radius: 6px;
  overflow: hidden;
}

.accordion-button {
  padding: 12px 20px;
  font-weight: 500;
  background-color: #fff;
  flex-wrap: wrap;
}

.accordion-button:not(.collapsed) {
  background-color: #f0f7ff;
  color: var(--cor-primaria);
}

.accordion-button h4 {
  margin: 0;
  font-size: 1.1rem;
}

.accordion-button .endereco {
  font-size: 0.9rem;
  color: #666;
  padding-left: 35px;
  width: 100%;
}

/* Linha de remédio */
.remedio-row {
  display: flex;
  align-items: center;
  padding: 6px 15px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.15s;
}

.remedio-row:hover {
  background-color: #f5f9ff;
}

.remedio-row:last-child {
  border-bottom: none;
}

.remedio-icon {
  color: var(--cor-primaria);
  margin-right: 12px;
  min-width: 20px;
  text-align: center;
}

.remedio-nome {
  flex: 1;
  font-size: 0.95rem;
}

.remedio-qtd {
  background-color: var(--cor-quantidade-bg);
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: 700;
  min-width: 60px;
  text-align: center;
  font-size: 0.9rem;
}

.remedio-qtd.zerado {
  background-color: #f8d7da;
  color: #842029;
}

.remedio-qtd.disponivel {
  background-color: #d1e7dd;
  color: #0f5132;
}

/* Loading */
.loading-container {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.loading-container .spinner-border {
  width: 3rem;
  height: 3rem;
  color: var(--cor-primaria);
}

/* Sem dados */
.sem-dados {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.sem-dados .bi {
  font-size: 3rem;
  display: block;
  margin-bottom: 15px;
}

/* Footer */
.footer-app {
  text-align: center;
  padding: 20px;
  color: #999;
  font-size: 0.85rem;
  margin-top: 40px;
  border-top: 1px solid var(--cor-borda);
}

/* Admin page */
.admin-menu {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-menu .btn-carregar {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  padding: 6px 16px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.admin-menu .btn-carregar:hover {
  background-color: rgba(255, 255, 255, 0.35);
}

.admin-menu .btn-publicar {
  background-color: #198754;
  border: none;
  color: #fff;
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.admin-menu .btn-publicar:hover {
  background-color: #157347;
}

.admin-menu .btn-publicar:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.user-info {
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-sair {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px 8px;
  transition: opacity 0.2s;
}

.btn-sair:hover {
  opacity: 0.7;
}