/* Insignia exclusiva del fundador/dueño ("admin-founder-signature",
   2026-07-27, pedido explícito) — SOLO se aplica cuando el servidor manda
   isFounder=true (ver founder.js y avatar.js decoratedNameParts). Archivo
   propio para no mezclar esta paleta fija/exclusiva con los tokens de tema
   normales de variables.css (que sí pueden cambiar si se agrega un
   selector de temas a futuro) — misma idea de "centralizar sin duplicar"
   pedida, pero deliberadamente separada de --accent-gold/--accent-cyan
   (esos ya se usan para VIP/admin en general, con otros valores).
   Patrón de "ícono flotando arriba del nombre sin mover el layout" tomado
   tal cual de .name-mariposa-wrap/.name-mariposa-icon (components.css). */

:root {
  --founder-gold: #F7C948;
  --founder-gold-light: #FFE8A3;
  --founder-turquoise: #20E3D2;
  --founder-blue: #3B82F6;
  --founder-silver: #F1F5F9;
}

/* Ancla de posicionamiento (igual que .name-mariposa-wrap) — el nombre en
   sí no se mueve, la corona flota arriba sin agregar altura a la fila. */
.founder-name-anchor {
  position: relative;
  display: inline-block;
}

.founder-crown-wrap {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 10px;
  color: var(--founder-gold);
  filter: drop-shadow(0 0 2px rgba(247, 201, 72, 0.55));
  pointer-events: none;
  animation: founder-crown-float 3s ease-in-out infinite;
}
.founder-crown-wrap svg { display: block; width: 100%; height: 100%; }

@keyframes founder-crown-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-2px); }
}

/* Texto metálico animado (plateado -> dorado -> turquesa, transición
   continua y suave) + destello horizontal periódico. Gradiente simétrico
   (plateado en 0% Y en 100%) a propósito: al reiniciar el loop no hay salto
   de color perceptible. Segunda capa de fondo = la barra del destello,
   aparcada fuera de la vista casi todo el ciclo (ver @keyframes abajo).
   2026-07-27, bug real reportado ("el nombre sale verde"): el texto real
   vive en el <span class="decorated-name" style="color:..."> que arma
   avatar.js DENTRO de .founder-nickname, no en .founder-nickname mismo —
   background-clip:text puesto acá no tenía ningún glifo propio que recortar
   (todo el texto está un nivel más adentro), así que no se veía nada y
   ganaba el color inline (name_color elegido por el usuario, en este caso
   verde). El estilo tiene que ir en el selector descendiente de abajo, con
   color:transparent !important porque un estilo inline SIEMPRE le gana a
   una clase por especificidad, sin importar el orden en el CSS. */
.founder-nickname {
  display: inline-block;
}
.founder-nickname .decorated-name {
  font-weight: 700;
  background-image:
    linear-gradient(100deg,
      var(--founder-silver) 0%,
      var(--founder-gold-light) 25%,
      var(--founder-gold) 45%,
      var(--founder-turquoise) 68%,
      var(--founder-silver) 100%),
    linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.85) 50%, transparent 58%);
  background-size: 220% 100%, 60% 100%;
  background-position: 0% 50%, -160% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-stroke: 0.4px rgba(247, 201, 72, 0.9);
  text-shadow:
    0 0 6px rgba(32, 227, 210, 0.45),
    0 0 12px rgba(59, 130, 246, 0.25),
    0 1px 1px rgba(0, 0, 0, 0.55);
  animation: founder-nickname-shift 4.5s ease-in-out infinite;
}

/* 0%-84%: recorrido lento y continuo plateado->dorado->turquesa->plateado.
   84%-100% (~700ms de los 4.5s, dentro del rango pedido de 600-900ms): la
   segunda capa (destello) cruza de lado a lado; el resto del tiempo queda
   aparcada en -160% (invisible) o 220% (invisible), sin parpadear. */
@keyframes founder-nickname-shift {
  0%     { background-position: 0% 50%,   -160% 0%; }
  84%    { background-position: 100% 50%, -160% 0%; }
  84.5%  { background-position: 100% 50%, -160% 0%; }
  100%   { background-position: 100% 50%, 220% 0%; }
}

/* Cápsula del fundador — imagen propia (2026-07-27, assets/badges/
   founder-badge.png, corona + "DUEÑO"), reemplaza la cápsula VIP/Premium
   (nunca conviven, ver avatar.js). Deliberadamente más grande que
   .tier-badge-premium (2026-07-27, pedido explícito: "se mira muy chico
   tanto en pc como en móviles") — usa margin negativo vertical para
   compensar el alto extra y no empujar la altura real de la fila del
   mensaje/roster (el line-height del texto de al lado sigue mandando). */
.founder-badge {
  height: 40px;
  width: auto;
  object-fit: contain;
  margin: -8px 0 -8px 0.35rem;
  vertical-align: middle;
  cursor: default;
  filter: drop-shadow(0 0 4px rgba(247, 201, 72, 0.35));
}
.founder-badge:focus-visible {
  outline: 2px solid var(--founder-turquoise);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Partículas al llegar un mensaje nuevo (2026-07-27, spawnFounderParticles
   en founder.js) — position:absolute sobre el ancla del nombre, nunca
   bloquean clics (pointer-events:none) ni empujan layout (el wrap en sí no
   ocupa espacio, mismo truco que la corona). Máximo 800ms de vida real. */
.founder-particles {
  position: absolute;
  top: -6px;
  left: 0;
  width: 100%;
  height: 0;
  pointer-events: none;
}
.founder-particle {
  position: absolute;
  top: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0;
  animation: founder-particle-float 700ms ease-out forwards;
}
.founder-particle-gold { background: var(--founder-gold); box-shadow: 0 0 4px var(--founder-gold); }
.founder-particle-cyan { background: var(--founder-turquoise); box-shadow: 0 0 4px var(--founder-turquoise); }

@keyframes founder-particle-float {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-18px) scale(1); }
}

/* Accesibilidad: sin depender solo del color/movimiento — ver aria-label y
   title en founderBadgeHTML (founder.js). prefers-reduced-motion: se quita
   toda animación (corona flotante, destello, partículas) pero se conserva
   el diseño estático (degradé fijo en un tono dorado intermedio, cápsula y
   corona sin cambios de layout). */
@media (prefers-reduced-motion: reduce) {
  .founder-crown-wrap { animation: none; }
  .founder-nickname .decorated-name {
    animation: none;
    background-position: 45% 50%, -160% 0%;
  }
  .founder-particle { animation: none; opacity: 0; }
}

/* Móvil (mismo breakpoint que el resto del proyecto, cubre 360/390px) —
   sigue siendo grande (pedido explícito), un poco menos que escritorio
   para no competir con el ancho angosto; el nickname/corona ya son
   livianos y no necesitan ajuste aparte. No se recorta el nombre ni se
   superpone al avatar/mensaje/botones (la corona sigue sin ocupar espacio
   en el flujo, y el margin negativo evita que la cápsula estire la fila). */
@media (max-width: 767px) {
  .founder-badge {
    height: 32px;
    margin: -6px 0 -6px 0.25rem;
  }
  .founder-crown-wrap {
    width: 13px;
    height: 9px;
    top: -10px;
  }
}