/* ==========================================================================
   HALOS — anillos resplandecientes alrededor del avatar/logo (Orden 130)

   Mismo lenguaje visual que el resplandor de las Stories (_StoriesWidget):
   box-shadow de color + @keyframes de pulso.

   El color lo pone cada instancia con la variable --halo-color, que el partial
   _Avatar.cshtml escribe inline desde la definición cacheada.

   Fichero .css de verdad (no inline en los 5 layouts) por dos razones:
   se descarga y cachea UNA vez, y aquí @keyframes no hay que doblarlo
   (en un .cshtml Razor obliga a escribir @@keyframes).
   ========================================================================== */

.tlrd-halo {
    --halo-color: #0982ad;
    --halo-oro: #f5c451;     /* solo lo usa Legendario (ver RAREZA, más abajo) */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    /* El anillo se dibuja FUERA del contenido, en un ::before. El avatar de dentro
       no se toca: el halo añade, nunca sustituye. */
}

.tlrd-halo > * {
    position: relative;
    z-index: 1;
}

.tlrd-halo::before {
    content: '';
    position: absolute;
    inset: -3px;             /* se adapta solo al tamaño del avatar que envuelve */
    border-radius: inherit;  /* hereda la forma del envoltorio: círculo por defecto, pero un logo
                                cuadrado-redondeado pasa su propio radio y el anillo lo respeta */
    pointer-events: none;
    z-index: 0;
}

/* ── Fijo: anillo sólido con resplandor suave, sin animación ─────────────── */
.tlrd-halo--fijo::before {
    border: 2px solid var(--halo-color);
    box-shadow: 0 0 8px color-mix(in srgb, var(--halo-color) 55%, transparent);
}

/* ── Pulso: el latido de las Stories ─────────────────────────────────────── */
.tlrd-halo--pulso::before {
    border: 2px solid var(--halo-color);
    animation: tlrd-halo-pulso 2.2s ease-in-out infinite alternate;
}

@keyframes tlrd-halo-pulso {
    from {
        box-shadow: 0 0 4px color-mix(in srgb, var(--halo-color) 35%, transparent),
                    0 0 0 0 transparent;
    }
    to {
        box-shadow: 0 0 14px color-mix(in srgb, var(--halo-color) 70%, transparent),
                    0 0 22px color-mix(in srgb, var(--halo-color) 28%, transparent);
    }
}

/* ── Rotación: un arco de color girando alrededor ────────────────────────── */
.tlrd-halo--rotacion::before {
    inset: -3px;
    background: conic-gradient(from 0deg,
                var(--halo-color) 0deg,
                color-mix(in srgb, var(--halo-color) 15%, transparent) 130deg,
                transparent 210deg,
                var(--halo-color) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
    animation: tlrd-halo-giro 3.4s linear infinite;
}

@keyframes tlrd-halo-giro {
    to { transform: rotate(360deg); }
}

/* ── Degradado: anillo bicolor con brillo que respira ────────────────────── */
.tlrd-halo--degradado::before {
    background: conic-gradient(from 0deg,
                var(--halo-color),
                color-mix(in srgb, var(--halo-color) 40%, #ffffff),
                var(--halo-color));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
    animation: tlrd-halo-brillo 2.8s ease-in-out infinite alternate;
}

@keyframes tlrd-halo-brillo {
    from { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--halo-color) 40%, transparent)); }
    to   { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--halo-color) 75%, transparent)); }
}

/* ==========================================================================
   MODO CAJA — el anillo se dibuja SOBRE el propio contenedor del avatar.

   Hace falta porque media docena de sitios del proyecto ponen el tamaño en el
   CONTENEDOR (.av es 36px, .tl-topbar-avatar 32px, .ag-avatar 36px...) con
   overflow:hidden y su propio border-radius. Ahí el modo envoltorio falla dos veces:
     · el <img> de dentro es width:100% y se colapsa al no tener el padre tamaño;
     · el overflow:hidden del contenedor RECORTA el ::before, que se dibuja fuera.

   La solución es box-shadow sobre el elemento: un box-shadow propio NO lo recorta
   el overflow del mismo elemento, y sigue automáticamente su border-radius (así el
   avatar cuadrado-redondeado de 8px conserva su forma en vez de forzarse a círculo).
   ========================================================================== */

.tlrd-halo-caja {
    --halo-color: #0982ad;
    --halo-oro: #f5c451;

    /* 🔴 LA CAPA DE RAREZA VIVE EN UNA VARIABLE, y no es un capricho.
       En modo caja el anillo ES el box-shadow del elemento, y los @keyframes de abajo
       REDECLARAN el box-shadow entero. Si la rareza se añadiera en una regla aparte
       (.tlrd-halo-caja--r2 { box-shadow: ... }), cualquier halo animado la perdería en
       cuanto arrancara su animación: la última declaración gana, y la animación siempre
       llega después. Metiéndola en una variable que TODAS las declaraciones incluyen,
       la rareza sobrevive al estilo de animación, sea cual sea.

       El valor por defecto es una capa INVISIBLE, no la cadena vacía: con la cadena vacía
       el `box-shadow: A, B, ;` queda sintácticamente inválido y el navegador tira la
       declaración ENTERA — el anillo desaparecería en todos los halos comunes. */
    --halo-capa-rareza: 0 0 0 0 transparent;

    box-shadow: 0 0 0 2px var(--halo-color),
                0 0 8px color-mix(in srgb, var(--halo-color) 50%, transparent),
                var(--halo-capa-rareza);
}

.tlrd-halo-caja.tlrd-halo--pulso {
    animation: tlrd-halo-caja-pulso 2.2s ease-in-out infinite alternate;
}

@keyframes tlrd-halo-caja-pulso {
    from {
        box-shadow: 0 0 0 2px var(--halo-color),
                    0 0 4px color-mix(in srgb, var(--halo-color) 30%, transparent),
                    var(--halo-capa-rareza);
    }
    to {
        box-shadow: 0 0 0 2px var(--halo-color),
                    0 0 16px color-mix(in srgb, var(--halo-color) 70%, transparent),
                    0 0 26px color-mix(in srgb, var(--halo-color) 25%, transparent),
                    var(--halo-capa-rareza);
    }
}

/* Rotación y degradado necesitan un gradiente cónico, que un box-shadow no puede dar:
   en modo caja se resuelven como un brillo que respira. Es una degradación consciente,
   no un olvido: el color y la identidad del halo se conservan. */
.tlrd-halo-caja.tlrd-halo--rotacion,
.tlrd-halo-caja.tlrd-halo--degradado {
    animation: tlrd-halo-caja-brillo 2.8s ease-in-out infinite alternate;
}

@keyframes tlrd-halo-caja-brillo {
    from {
        box-shadow: 0 0 0 2px var(--halo-color),
                    0 0 6px color-mix(in srgb, var(--halo-color) 35%, transparent),
                    var(--halo-capa-rareza);
    }
    to {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--halo-color) 70%, #ffffff),
                    0 0 18px color-mix(in srgb, var(--halo-color) 75%, transparent),
                    var(--halo-capa-rareza);
    }
}

/* ==========================================================================
   RAREZA (Orden 135, 6b) — .tlrd-halo--r0 … --r3

   La rareza NO sustituye al estilo de animación: se superpone. Un halo puede ser
   "Épico + Pulso". Por eso ocupa un canal distinto en cada mecanismo:

     · envoltorio → el ::after, que hasta ahora estaba LIBRE (el anillo de identidad
       es el ::before, y los 4 estilos ya lo tienen todo ocupado);
     · caja       → la variable --halo-capa-rareza, que todas las declaraciones de
       box-shadow incluyen (ver el comentario de arriba).

   Común (r0) no escribe NADA. Ni una regla, ni un pseudo-elemento: un halo común se
   pinta hoy exactamente igual que antes de esta orden.

   🔴 Los dos mecanismos no dan la misma figura, y es a propósito. En modo caja un
   box-shadow no puede dejar un HUECO entre dos anillos: las capas se pintan una detrás
   de otra y una capa transparente deja ver la siguiente, no el fondo de la página (que
   además cambia entre los temas claro y oscuro). Así que el "doble anillo" de Épico es
   un anillo de dos bandas en caja y dos anillos separados en envoltorio. Lo que se
   conserva en ambos es LA JERARQUÍA: cada escalón añade presencia sobre el anterior.
   Misma degradación consciente que ya se aceptó para rotación y degradado.
   ========================================================================== */

/* ── Envoltorio ─────────────────────────────────────────────────────────────
   El ::after de r2/r3 se dibuja a -7px, o sea 4px por fuera del anillo de identidad
   (que ocupa de -3px a -1px). Ese hueco de 2px es lo que hace que se lean como DOS
   anillos y no como uno gordo, y sigue funcionando en el avatar de 34px del kanban.
   Es un pseudo-elemento ABSOLUTO: crece hacia fuera sin empujar el layout. */
/* 🔴 Los tres selectores empiezan por `.tlrd-halo` A PROPÓSITO, y no es redundante.
   Las clases de rareza (.tlrd-halo--rN) las llevan LOS DOS modos: el partial las añade
   al mismo elemento en caja y en envoltorio. Sin el `.tlrd-halo` delante, un avatar en
   modo CAJA recibiría el ::after de envoltorio ADEMÁS de su banda de box-shadow — doble
   tratamiento, y encima recortado por el overflow:hidden que es la razón de que el modo
   caja exista. El modo caja emite `tlrd-halo-caja`, que es otro token de clase distinto
   de `tlrd-halo`, así que este prefijo separa limpiamente los dos mundos.

   ⚠️ Y no, las reglas de estilo de más arriba (.tlrd-halo--pulso::before y compañía) no
   tienen el mismo problema aunque tampoco lleven prefijo: `content` se declara SOLO en
   `.tlrd-halo::before`, que sí está acotado, y un pseudo-elemento sin `content` no genera
   caja ninguna. Allí el que acota es `content`, no el selector.
   La regla del fichero, entonces: **quien declara `content` es quien tiene que acotarse
   al modo.** */
.tlrd-halo.tlrd-halo--r1::after,
.tlrd-halo.tlrd-halo--r2::after,
.tlrd-halo.tlrd-halo--r3::after {
    content: '';
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

/* Raro: mismo anillo, resplandor exterior más ancho. Sin geometría nueva, así que
   se lee igual de bien a 32px que a 150px. */
.tlrd-halo.tlrd-halo--r1::after {
    inset: -3px;
    box-shadow: 0 0 16px 3px color-mix(in srgb, var(--halo-color) 26%, transparent);
}

/* Épico: segundo anillo concéntrico. */
.tlrd-halo.tlrd-halo--r2::after {
    inset: -7px;
    border: 2px solid color-mix(in srgb, var(--halo-color) 55%, transparent);
}

/* Legendario: segundo anillo DORADO sobre el color del halo, con destello.
   El anillo de identidad (::before) conserva el color propio del halo: el oro
   marca el rango, no reemplaza la identidad. */
.tlrd-halo.tlrd-halo--r3::after {
    inset: -7px;
    border: 2px solid var(--halo-oro);
    box-shadow: 0 0 12px color-mix(in srgb, var(--halo-oro) 45%, transparent);
}

/* ── Caja ───────────────────────────────────────────────────────────────────
   Bandas de spread. El anillo de identidad ocupa 0→2px; cada capa de rareza se
   pinta DETRÁS y asoma a partir de ahí. */
.tlrd-halo-caja.tlrd-halo--r1 {
    --halo-capa-rareza: 0 0 14px 3px color-mix(in srgb, var(--halo-color) 24%, transparent);
}

.tlrd-halo-caja.tlrd-halo--r2 {
    --halo-capa-rareza: 0 0 0 4px color-mix(in srgb, var(--halo-color) 42%, transparent);
}

.tlrd-halo-caja.tlrd-halo--r3 {
    --halo-capa-rareza: 0 0 0 4px var(--halo-oro),
                        0 0 14px 2px color-mix(in srgb, var(--halo-oro) 42%, transparent);
}

/* ==========================================================================
   ETIQUETA DEL HALO (Orden 135, 6b) — partial ~/Pages/Shared/_HaloEtiqueta.cshtml

   El anillo dice que alguien TIENE un halo; la etiqueta dice CUÁL. Va en los perfiles
   públicos, donde quien mira no tiene forma de saber qué significa el aro de color.

   Se apoya en el mismo --halo-color inline, así que hereda la identidad del halo sin
   una sola regla por halo.
   ========================================================================== */

.tlrd-halo-etq {
    --halo-color: #0982ad;
    --halo-oro: #f5c451;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .22rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 100%;
    color: var(--halo-color);
    background: color-mix(in srgb, var(--halo-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--halo-color) 35%, transparent);
}

.tlrd-halo-etq-punto {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--halo-color);
    box-shadow: 0 0 6px color-mix(in srgb, var(--halo-color) 60%, transparent);
}

.tlrd-halo-etq-nombre {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El rango solo aparece a partir de Raro. Común no emite este <span> siquiera. */
.tlrd-halo-etq-rango {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 0 .35rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--halo-color) 20%, transparent);
}

.tlrd-halo-etq-rango--r3 {
    color: color-mix(in srgb, var(--halo-oro) 80%, #000000);
    background: color-mix(in srgb, var(--halo-oro) 28%, transparent);
}

/* ── Accesibilidad: quien pide menos movimiento, se queda con el anillo quieto ── */
@media (prefers-reduced-motion: reduce) {
    .tlrd-halo::before {
        animation: none !important;
        box-shadow: 0 0 8px color-mix(in srgb, var(--halo-color) 55%, transparent);
    }

    /* 🔴 Este box-shadow REDECLARA la lista entera, así que tiene que volver a incluir
       la capa de rareza o el halo Épico/Legendario perdería su segundo anillo justo
       para quien pide menos movimiento. La rareza no es movimiento: es rango, y se
       queda. Lo que se apaga es la animación, nada más. */
    .tlrd-halo-caja {
        animation: none !important;
        box-shadow: 0 0 0 2px var(--halo-color),
                    0 0 8px color-mix(in srgb, var(--halo-color) 50%, transparent),
                    var(--halo-capa-rareza);
    }

    /* El ::after de rareza en modo envoltorio no lleva animación ninguna, así que
       aquí no hay nada que apagar: sobrevive intacto sin tocarlo. */
}