/* Toque de marca sobre django-unfold: tipografía editorial del frontend.
   Los colores (púrpura) ya vienen del dict UNFOLD["COLORS"]. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&family=Hanken+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --font-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
}

/* Glow lavanda del frontend, para que el light mode se sienta como el sitio. */
body {
  background-image: radial-gradient(1100px 460px at 82% -8%, rgba(118, 64, 152, 0.07), transparent 60%),
    radial-gradient(760px 380px at 6% 4%, rgba(154, 109, 187, 0.06), transparent 55%);
  background-attachment: fixed;
}

/* Cuerpo del admin en la sans del frontend */
body,
.unfold-body,
input,
select,
textarea,
button {
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* Títulos y branding en la serif de marca */
#site-name,
a.text-font-important-light,
h1,
h1.text-font-important-light,
.unfold h1,
#content-main > h1,
.text-xl.font-semibold,
.font-serif {
  font-family: var(--font-serif) !important;
  letter-spacing: -0.01em;
  font-weight: 500 !important;
}

/* El logo (luna) un poco más grande y con aire junto al nombre */
#site-name img,
[class*="branding"] img {
  height: 26px;
  width: auto;
}

/* Banner de comentarios pendientes en el dashboard. Colores explícitos (no
   dependemos de clases Tailwind que unfold podría no tener compiladas) para que
   lea con buen contraste tanto en claro como en oscuro. */
.mirajum-pending-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  padding: 15px 20px;
  border-radius: 12px;
  background: linear-gradient(180deg, #764098, #613481);
  color: #fff;
  box-shadow: 0 8px 22px -12px rgba(118, 64, 152, 0.8);
  transition: filter 0.18s, transform 0.18s;
}
.mirajum-pending-banner:hover {
  filter: brightness(1.06);
}
.mirajum-pending-banner .material-symbols-outlined {
  font-size: 22px;
}
.mirajum-pending-text {
  font-weight: 600;
  font-size: 15px;
}
.mirajum-pending-cta {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 600;
  opacity: 0.92;
}