/* Marca Goner Music para Postiz (redes.gonermusic.com) — issue #21, 2026-09-26.
   Lo inyecta el nginx postiz-marca antes de </head>; la imagen de Postiz no se toca.
   Amarillo de la casa #EEEE22 donde Postiz pone su morado, y texto negro encima. */
@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --goner-amarillo: #EEEE22;
  --goner-amarillo-hover: #d9d91a;
  --goner-negro: #000;
}

/* ---- Variables de color de Postiz (modo oscuro y claro) ---- */
:root .dark,
:root .light {
  --new-btn-primary: var(--goner-amarillo) !important;
  --color-forth: var(--goner-amarillo) !important;
  --color-seventh: var(--goner-amarillo) !important;
  --color-custom4: var(--goner-amarillo) !important;
  --color-custom7: var(--goner-amarillo) !important;
  --color-custom45: var(--goner-amarillo) !important;
  --color-custom28: #f5f58a !important;
}
:root .dark {
  --new-table-text-focused: var(--goner-amarillo) !important;
}
:root .light {
  /* En claro estas son de texto o de fondo suave: amarillo sobre blanco no se lee */
  --new-textItemFocused: #000 !important;
  --new-table-text-focused: #000 !important;
  --new-boxFocused: #fbfbc8 !important;
  --new-back-drop: #1a1919 !important;
  --popup-color: #00000033 !important;
}

/* ---- Morados escritos a mano en las clases de Tailwind ---- */
.bg-\[\#612BD3\], .bg-\[\#612bd3\],
.hover\:bg-\[\#612BD3\]\/80:hover,
.hover\:bg-\[\#5023b8\]:hover {
  background-color: var(--goner-amarillo) !important;
}
.bg-\[\#612bd3\]\/10 { background-color: #eeee221a !important; }
.hover\:border-\[\#612BD3\]\/40:hover,
.hover\:border-\[\#612bd3\]\/50:hover { border-color: #eeee2280 !important; }
.text-\[\#612bd3\] { color: var(--goner-amarillo) !important; }
.scrollbar-thumb-\[\#612AD5\] { --scrollbar-thumb: var(--goner-amarillo) !important; }

/* SVG y cargadores con el morado puesto como atributo */
[fill="#612BD3" i], [fill="#612ad5" i], [fill="#7236f1" i] { fill: var(--goner-amarillo) !important; }
[stroke="#612BD3" i], [stroke="#612ad5" i], [stroke="#7236f1" i] { stroke: var(--goner-amarillo) !important; }
[color="#612bd3" i] { color: var(--goner-amarillo) !important; }

/* ---- Texto negro sobre amarillo (en blanco no se lee) ---- */
.bg-btnPrimary, .bg-btnPrimary *,
.group:hover .group-hover\:bg-btnPrimary, .group:hover .group-hover\:bg-btnPrimary *,
.bg-forth, .bg-forth *,
.hover\:bg-forth:hover, .hover\:bg-forth:hover *,
.bg-seventh, .bg-seventh *, .\!bg-seventh, .\!bg-seventh *,
.hover\:bg-seventh:hover, .hover\:bg-seventh:hover *,
.bg-customColor4, .bg-customColor4 *,
.bg-\[\#612BD3\], .bg-\[\#612BD3\] *,
.bg-\[\#612bd3\], .bg-\[\#612bd3\] *,
.hover\:bg-\[\#612BD3\]\/80:hover, .hover\:bg-\[\#612BD3\]\/80:hover *,
.forceChange .changeColor, .forceChange .changeColor *,
.react-tags__tag, .react-tags__tag * {
  color: var(--goner-negro) !important;
}
.bg-btnPrimary:hover, .bg-\[\#612BD3\]:hover, .bg-\[\#612bd3\]:hover {
  background-color: var(--goner-amarillo-hover) !important;
}

/* ---- Tipografía: League Spartan en titulares, Inter en el cuerpo ---- */
body, button, input, textarea, select {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
h1, h2, h3,
.text-\[24px\].font-\[600\],
.text-\[20px\].font-\[600\],
.text-\[36px\] {
  font-family: "League Spartan", "Inter", sans-serif !important;
  letter-spacing: -0.01em;
}

/* ---- Logo ---- */
/* Login y registro: el SVG de 101 x 33 con el texto "Postiz" */
svg[viewBox="0 0 101 33"] {
  width: 72px !important;
  height: 72px !important;
  background: url("/goner-marca/logo.png") center / contain no-repeat;
}
svg[viewBox="0 0 101 33"] > * { display: none !important; }

/* Dentro de la app: el SVG de 60 x 60 de la barra lateral */
#left-menu svg[viewBox="0 0 60 60"],
svg.min-w-\[60px\][viewBox="0 0 60 60"] {
  background: url("/goner-marca/logo.png") center / contain no-repeat;
}
#left-menu svg[viewBox="0 0 60 60"] > *,
svg.min-w-\[60px\][viewBox="0 0 60 60"] > * { display: none !important; }

/* Login: la columna de la derecha anuncia Postiz ("20,000+ Entrepreneurs...").
   Se vacía y va una FOTO a toda la columna (Mario, 2026-09-27: el logo gigante no; "ahí
   molaría meter esta"). La foto vive en /opt/goner/postiz-marca/marca/fondo-login.jpg. */
.text-\[36px\].flex-1.pt-\[88px\] > * { display: none !important; }
.text-\[36px\].flex-1.pt-\[88px\] {
  background: #000 url("/goner-marca/fondo-login.jpg") center / cover no-repeat;
  border-radius: 12px;
}