/* Variables de marca y paleta de colores para onlydoit.fans. */
:root {
  --color-primario-oscuro: #0026CF;
  --color-primario: #1B96FF;
  --color-primario-claro: #9CD7FF;
  --color-acento: #FCF300;
  --color-acento-dorado: #FFC600;
}

/* Logotipo oficial de onlydoit.fans (idéntico al del splash screen).
   Reutilizable en cualquier cabecera del sistema. */
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--color-primario-oscuro), var(--color-primario));
  padding: 0.35rem 0.75rem;
  border-radius: 0.75rem;
  line-height: 1;
}

.brand-logo-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
}

.brand-logo-icon svg {
  width: 100%;
  height: 100%;
}

/* Bandera de país junto al nombre de un fan/creador (ver app/helpers/paises.php).
   Tamaño fijo y discreto para no competir con avatares/nombres. */
.flag-icon {
  width: 16px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  vertical-align: middle;
}

.brand-logo-wordmark {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #ffffff, var(--color-acento-dorado));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}