/* ============================================================================
   shared.css — TEAPOIO
   Estilos realmente globais (áreas autenticadas + site institucional):
   marca aplicada a componentes Bootstrap usados em todo o sistema,
   utilitários, estados de carregamento/vazio e acessibilidade.
   Importa bootstrap.css obrigatoriamente (general_rules.md).
   ============================================================================ */
@import url("bootstrap.css");

@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap");

/* -- Base ------------------------------------------------------------------- */
body {
  font-family: var(--tea-font-sans);
  background-color: var(--tea-bg);
  color: var(--tea-text);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--tea-primary);
  text-decoration: none;
}
a:hover { color: var(--tea-primary-700); text-decoration: underline; }

/* -- Acessibilidade: foco visível e claro em toda a plataforma -------------- */
:focus-visible {
  outline: 3px solid rgba(var(--tea-primary-rgb), .45);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 2000;
  background: var(--tea-primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 var(--tea-radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; text-decoration: none; }

/* -- Marca aplicada a botões Bootstrap (usados em todas as áreas) ----------- */
.btn { --bs-btn-border-radius: var(--tea-radius-pill); font-weight: 600; }

.btn-primary {
  --bs-btn-bg: var(--tea-primary);
  --bs-btn-border-color: var(--tea-primary);
  --bs-btn-hover-bg: var(--tea-primary-600);
  --bs-btn-hover-border-color: var(--tea-primary-600);
  --bs-btn-active-bg: var(--tea-primary-700);
  --bs-btn-active-border-color: var(--tea-primary-700);
  --bs-btn-disabled-bg: var(--tea-primary);
  --bs-btn-disabled-border-color: var(--tea-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--tea-primary);
  --bs-btn-border-color: var(--tea-primary);
  --bs-btn-hover-bg: var(--tea-primary);
  --bs-btn-hover-border-color: var(--tea-primary);
  --bs-btn-active-bg: var(--tea-primary-700);
}

.btn-secondary {
  --bs-btn-bg: var(--tea-secondary);
  --bs-btn-border-color: var(--tea-secondary);
  --bs-btn-hover-bg: #5b4080;
  --bs-btn-hover-border-color: #5b4080;
}

.text-primary { color: var(--tea-primary) !important; }
.bg-primary-soft { background: var(--tea-primary-050); }

.badge.bg-primary { background-color: var(--tea-primary) !important; }
.badge.bg-gold { background-color: var(--tea-gold) !important; color: #3a2a07; }
.badge-premium {
  background: linear-gradient(90deg, var(--tea-gold), #f0b75f);
  color: #3a2a07; font-weight: 700;
}

/* -- Cartões base ----------------------------------------------------------- */
.card {
  --bs-card-border-color: var(--tea-border);
  --bs-card-border-radius: var(--tea-radius);
  --bs-card-bg: var(--tea-surface);
  box-shadow: var(--tea-shadow-sm);
}

/* -- Formulários ------------------------------------------------------------ */
.form-control, .form-select {
  --bs-border-color: var(--tea-border);
  border-radius: var(--tea-radius-sm);
  padding: .6rem .85rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--tea-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--tea-primary-rgb), .18);
}
.form-label { font-weight: 600; color: var(--tea-text); margin-bottom: .35rem; }

/* -- Carregamento ----------------------------------------------------------- */
.tea-spinner {
  width: 1.4rem; height: 1.4rem;
  border: 3px solid rgba(var(--tea-primary-rgb), .25);
  border-top-color: var(--tea-primary);
  border-radius: 50%;
  animation: tea-spin .7s linear infinite;
  display: inline-block;
}
@keyframes tea-spin { to { transform: rotate(360deg); } }

.tea-loading {
  display: flex; align-items: center; justify-content: center;
  gap: .6rem; padding: 2.5rem 1rem; color: var(--tea-text-muted);
}

/* -- Estado vazio (global) -------------------------------------------------- */
.tea-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--tea-text-muted);
}
.tea-empty .bi { font-size: 2.6rem; color: rgba(var(--tea-primary-rgb), .55); display: block; margin-bottom: .6rem; }
.tea-empty h3 { font-size: 1.15rem; color: var(--tea-text); margin-bottom: .35rem; }

/* -- Avatar ----------------------------------------------------------------- */
.tea-avatar {
  border-radius: 50%;
  object-fit: cover;
  background: var(--tea-surface-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tea-primary); font-weight: 700;
  overflow: hidden; flex: none;
}

/* -- Utilitários ------------------------------------------------------------ */
.tea-muted { color: var(--tea-text-muted); }
.tea-divider { height: 1px; background: var(--tea-border); border: 0; margin: 0; }
.tea-link-muted { color: var(--tea-text-muted); }
.tea-link-muted:hover { color: var(--tea-primary); text-decoration: none; }