/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  THE MASK CUP — PELE DAS TELAS ANTIGAS                               ║
   ║  Admin, sala de veto e personalizar perfil ainda têm estilos         ║
   ║  próprios (cantos arredondados, títulos em fonte pesada). O body     ║
   ║  dessas telas ganha a classe .adm-skin e estas regras as alinham     ║
   ║  ao resto do site: cantos retos/cortados, títulos em Bebas, campos   ║
   ║  e cores da marca — sem mexer no HTML nem no JavaScript delas.       ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Cantos: o site é angular ─────────────────────────────────────── */
.adm-skin main *:not(svg):not(svg *) { border-radius: 0 !important; }
/* …exceto o que é redondo de propósito: pontos, indicadores, spinners */
.adm-skin main [class*="dot"], .adm-skin main [class*="spinner"], .adm-skin main [class*="spin "],
.adm-skin main [class*="pulse"], .adm-skin main [class*="knob"],
/* "led"/"ring" só como palavra inteira: senão pega "scheduled", "cancelled", "filled", "expiring"… */
.adm-skin main [class~="led"], .adm-skin main [class$="-led"], .adm-skin main [class*="-led "],
.adm-skin main [class~="ring"], .adm-skin main [class$="-ring"], .adm-skin main [class*="-ring "],
.adm-skin main [class*="presence"], .adm-skin main [class*="online"] { border-radius: 50% !important; }

/* Cards e painéis com o corte diagonal da marca */
.adm-skin main [class$="-card"], .adm-skin main [class*="-card "], .adm-skin main [class$="-panel"], .adm-skin main [class*="-panel "],
.adm-skin main .create-card, .adm-skin main .admin-card, .adm-skin main .er-card, .adm-skin main .edit-card {
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

/* Avatares em hexágono, como no resto do site */
.adm-skin main img[class*="av"]:not([class*="save"]), .adm-skin main img[class*="avatar"] {
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); border: 0 !important;
}

/* ── Títulos de página ───────────────────────────────────────────── */
.adm-skin main :is(.page-title, .rw-title, .rf-title, .create-title, .reg-title, .sp-title, .rd-title,
  .er-title, .edit-title, .dp-title, .mp-title, .cc-title, .bl-title) {
  font-family: 'Bebas Neue', sans-serif !important; font-weight: 400 !important; letter-spacing: .5px !important;
  font-size: clamp(44px, 6.5vw, 80px) !important; line-height: .92 !important; color: var(--silver-hi);
  text-transform: none;
}
.adm-skin main :is(.page-title, .rw-title, .rf-title, .create-title, .reg-title, .er-title, .edit-title) :is(.dim, span) { color: var(--text-mute); }
.adm-skin main .create-title .highlight, .adm-skin main .create-title span:last-child { color: var(--teal-hi); }

/* Sobretítulo vira a etiqueta da marca */
.adm-skin main :is(.page-eyebrow, .rw-eyebrow, .rf-eyebrow, .create-eyebrow, .reg-eyebrow, .sp-eyebrow, .rd-eyebrow,
  .er-eyebrow, .edit-eyebrow, .dp-eyebrow, .mp-eyebrow) {
  display: inline-flex !important; align-items: center; gap: 7px; width: max-content; padding: 6px 14px 6px 11px !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  background: linear-gradient(100deg, var(--teal-deep), rgba(44,102,99,.25)); color: var(--teal-hi) !important;
  font-family: 'Rajdhani', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.6px !important;
}
.adm-skin main :is(.page-eyebrow, .rw-eyebrow, .rf-eyebrow, .create-eyebrow, .reg-eyebrow, .sp-eyebrow, .rd-eyebrow,
  .er-eyebrow, .edit-eyebrow, .dp-eyebrow, .mp-eyebrow)::before { display: none !important; }

/* Link "voltar" */
.adm-skin main :is(.back-link, .dp-back) { color: var(--text-dim); font-family: 'Rajdhani', sans-serif; letter-spacing: 1.4px; }
.adm-skin main :is(.back-link, .dp-back):hover { color: var(--teal-hi) !important; }

/* Rótulos de seção com a linha da marca */
.adm-skin main :is(.sec-label, .section-label) { color: var(--teal-hi); }

/* ── Campos ───────────────────────────────────────────────────────── */
.adm-skin main :is(input[type=text], input[type=number], input[type=search], input[type=email], input[type=url],
  input[type=datetime-local], input[type=date], select, textarea):not([class*="range"]) {
  background-color: var(--bg1) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--border) !important; color: var(--text);
}
.adm-skin main :is(input, select, textarea):focus { box-shadow: inset 0 0 0 1px var(--teal) !important; outline: none; }
.adm-skin main select option { background: #0E0F12; background: light-dark(#f8f9fa, #0E0F12); }

/* ── Botões ───────────────────────────────────────────────────────── */
.adm-skin main button, .adm-skin main a[class*="btn"] { letter-spacing: 1px; }

/* ── Sala de veto ─────────────────────────────────────────────────── */
.adm-skin main :is(.waiting-title, .finished-title) {
  font-family: 'Bebas Neue', sans-serif !important; font-weight: 400 !important; letter-spacing: .5px !important;
  font-size: clamp(30px, 4vw, 44px) !important; color: var(--silver-hi) !important;
}
/* Aviso escondido não fica "fora da tela" (antes gerava rolagem para o lado) */
.adm-skin .toast:not(.show) { transform: translateY(-12px) !important; opacity: 0; pointer-events: none; }
.adm-skin .toast { transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .3s !important; }
@media (max-width: 600px) {
  .adm-skin .veto-header { flex-wrap: wrap; row-gap: 8px; }
}

/* Tema claro: sobretítulo com fundo suave e texto escuro */
[data-theme="light"] .adm-skin main :is(.page-eyebrow, .rw-eyebrow, .rf-eyebrow, .create-eyebrow, .reg-eyebrow, .sp-eyebrow, .rd-eyebrow,
  .er-eyebrow, .edit-eyebrow, .dp-eyebrow, .mp-eyebrow) { background: linear-gradient(100deg, rgba(47,138,132,.24), rgba(47,138,132,.06)); }