@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ─── Variáveis globais ─── */
:root {
  --bs-font-sans-serif: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --arena-header-height: 52px;
  --arena-radius: 8px;
  --arena-transition: 0.15s ease;
}

body {
  font-family: var(--bs-font-sans-serif);
  -webkit-font-smoothing: antialiased;
}

/* ─── Material Symbols ─── */
.material-symbols-outlined {
  font-size: 1.1em;
  line-height: 1;
  vertical-align: -0.15em;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
.mat-fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.mat-sm {
  font-size: 0.95em;
}
.mat-lg {
  font-size: 1.4em;
  vertical-align: -0.2em;
}

/* ─── Brand / Logo ─── */
:root {
  --arena-brand-color: var(--bs-primary, #0d6efd);
}

.arena-logo {
  height: 22px;
  width: auto;
  color: var(--arena-brand-color);
  flex-shrink: 0;
}

.arena-brand-text {
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  line-height: 1;
}
.arena-brand-aovivo {
  font-weight: 700;
  color: var(--arena-brand-color);
}
.arena-brand-tec {
  font-weight: 400;
  color: var(--bs-secondary-color);
}

/* ─── Navbar do admin ─── */
.arena-navbar {
  height: var(--arena-header-height);
  border-bottom: 1px solid var(--bs-border-color);
  padding: 0 1rem;
}
.arena-navbar .navbar-brand {
  font-weight: 600;
  font-size: 1rem;
  gap: 0.4rem;
  display: flex;
  align-items: center;
}

/* ─── Tipografia ─── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.text-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bs-secondary-color);
}

/* ─── Tabelas admin ─── */
.arena-table thead th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bs-secondary-color);
  border-bottom-width: 1px;
}
.arena-table tbody tr {
  transition: background-color var(--arena-transition);
}

/* ─── Badges de status do evento ─── */
.badge-rascunho {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color);
}
.badge-aovivo {
  background-color: var(--bs-success);
  color: #fff;
}
.badge-finalizado {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
}

/* ─── Botões com ícone ─── */
.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

/* ─── Card padrão ─── */
.arena-card {
  border-radius: var(--arena-radius);
  border: 1px solid var(--bs-border-color);
}

/* ─── Página de login ─── */
.arena-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bs-body-bg);
}
.arena-login-card {
  width: 100%;
  max-width: 380px;
  border-radius: var(--arena-radius);
}

/* ─── Conteúdo no log de posts (latest) ─── */
.latest-content {
  font-size: 0.82rem;
  line-height: 1.5;
}

/* ─── Guia visual: swatches ─── */
.color-swatch {
  height: 56px;
  border-radius: var(--arena-radius);
  margin-bottom: 0.25rem;
}
.icon-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  color: var(--bs-secondary-color);
}
.icon-demo .material-symbols-outlined {
  font-size: 1.6rem;
  vertical-align: unset;
}

/* ─── Liveadmin ─── */
#presets { font-size: 0.8rem; }
#latest_posts { font-size: 0.85rem; }

/* ─── Presets de tick ─── */
.admin_tick span[data-value] {
  display: inline-block;
  border-radius: 5px;
  background-color: var(--bs-tertiary-bg, #f5f5f5);
  padding: 1px 5px 0;
  min-width: 28px;
  text-align: center;
  margin: 1px 1px;
  border: 1px solid var(--bs-border-color, #d9d9d9);
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
  color: var(--bs-body-color, #212529);
  font-variant-numeric: tabular-nums;
}
.admin_tick span[data-value]:hover {
  background-color: var(--bs-secondary-bg, #efefef);
  border-color: var(--bs-primary, #0d6efd);
  color: var(--bs-primary, #0d6efd);
}
.admin_tick span[data-value].active {
  background-color: var(--bs-primary, #0d6efd);
  border-color: var(--bs-primary, #0d6efd);
  color: #fff;
}