/* foto de perfil y avatares de mecánico */
.avatar.con-foto{background-size:cover;background-position:center;color:transparent!important;text-shadow:none}
#perfil .avatar.g{cursor:pointer;position:relative}
#perfil .avatar.g::after{content:'';background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EEF1F5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E")!important;background-size:16px!important;background-repeat:no-repeat!important;background-position:center!important;position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;background:var(--panel);border:2px solid var(--menta);display:grid;place-items:center;font-size:var(--t-3);color:var(--tinta);text-shadow:none}
.av-caja{position:fixed!important;inset:0;z-index:100001!important;display:grid;place-items:center;background:rgba(3,4,6,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:16px}
.av-panel{position:relative;width:min(460px,100%);max-height:90vh;overflow:auto;background:var(--sup);border:1px solid rgba(var(--menta-rgb),.35);border-radius:var(--radio-3);padding:20px;box-shadow: var(--sombra-3)}
.av-panel h3{margin:0 0 8px;font:800 var(--t-6) Archivo,sans-serif;color:var(--tinta)}
.av-cerrar{position:absolute;top:8px;right:12px;background:none;border:0;color:var(--gris);font-size:var(--t-7);cursor:pointer}
.av-subir{display:inline-flex;align-items:center;gap:8px;width:auto;cursor:pointer;margin:0}
.av-sub{margin:16px 0 8px;font:700 var(--t-2) 'Barlow Condensed',Archivo,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--menta)}
.av-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:12px}
.av-grid button{background:none;border:2px solid transparent;border-radius:50%;padding:2px;cursor:pointer;aspect-ratio:1;transition:transform var(--dur-1),border-color var(--dur-1)}
.av-grid button:hover,.av-grid button:focus-visible{border-color:var(--menta);transform:scale(1.06);outline:none}
.av-grid img{width:100%;height:100%;display:block;border-radius:50%}
.av-quitar{margin-top:16px}
.av-grupo{margin:12px 0 8px;font:600 var(--t-1) 'Barlow Condensed',Archivo,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.av-sub + .av-grupo{margin-top:0}

/* cada avatar con su nombre abajo (El Señor Don Chuy, La Jefa…) */
.av-grid button{aspect-ratio:auto;border:0;border-radius:var(--radio-2);padding:4px 2px;display:flex;flex-direction:column;align-items:center;gap:4px}
.av-grid button img{aspect-ratio:1;height:auto;border:2px solid transparent;transition:border-color var(--dur-1)}
.av-grid button:hover img,.av-grid button:focus-visible img{border-color:var(--menta)}
.av-nom{font-size:var(--t-1);line-height:1.2;color:var(--gris);text-align:center;font-weight:600}

/* la cámara de la foto de perfil es nuestro ícono (antes un emoji); en EV, trazo oscuro */
html[data-modo="ev"] #perfil .avatar.g::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1713' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E")!important}
/* encabezado de Mi perfil: el nombre no se monta en el @usuario de abajo */
html #perfil .perfil-cab h1{margin-bottom:6px}

/* ---------- avatares con movimiento (solo transform y opacity; nada se mueve si el aparato pide reducir movimiento) ---------- */
/* selector: el elegido respira; al tocarlo rebota y destella con el color de la licencia */
.av-caja{--cn:var(--menta)}
.av-grid button{position:relative}
.av-grid button.on img{box-shadow:0 0 0 3px var(--cn),0 0 14px color-mix(in srgb,var(--cn) 55%,transparent)}
.av-grid button.on img{animation:av-respira 4s ease-in-out infinite}
.av-grid button::after{content:"";position:absolute;top:4px;left:2px;right:2px;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 3px var(--cn),0 0 18px 4px var(--cn);opacity:0;pointer-events:none}
.av-grid button.toca img{animation:av-rebote var(--dur-3) var(--curva-resorte)}
.av-grid button.toca::after{animation:av-destello calc(var(--dur-3) * 1.6) var(--curva-entra)}
@keyframes av-respira{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes av-rebote{0%{transform:scale(1)}35%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes av-destello{0%{opacity:0;transform:scale(.92)}30%{opacity:.9}100%{opacity:0;transform:scale(1.12)}}

/* licencia e Inicio: un brillo del color del nivel recorre el aro cada ~6 s (el aro se recorta con una máscara fija; solo gira la luz) */
.es-foto:has(> .av-aro){isolation:isolate}
.av-aro{position:absolute;inset:-5px;border-radius:calc(var(--radio-2) + 5px);padding:3px;overflow:hidden;pointer-events:none;z-index:-1;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.es-mini .av-aro{border-radius:50%}
.av-aro span{position:absolute;left:50%;top:50%;width:220%;aspect-ratio:1;margin:-110% 0 0 -110%;
  background:conic-gradient(from 0deg,transparent 0 68%,color-mix(in srgb,var(--cn) 60%,transparent) 80%,#fff 86%,var(--cn) 90%,transparent 100%);
  opacity:0;animation:av-recorre 6s var(--curva-entra) 1.2s infinite}
@keyframes av-recorre{0%{transform:rotate(0);opacity:0}6%{opacity:1}42%{transform:rotate(360deg);opacity:1}52%,100%{transform:rotate(360deg);opacity:0}}
/* al subir de nivel: el aro late */
.es-foto.av-pulso .av-aro{animation:av-pulso 1.5s var(--curva-resorte)}
.es-foto.av-pulso .av-aro span{animation:none;opacity:1}
@keyframes av-pulso{0%{transform:scale(1);opacity:1}30%{transform:scale(1.14);opacity:1}60%{transform:scale(.98)}100%{transform:scale(1);opacity:1}}

/* El Club: los avatares van quietos; solo gira el aro de quien tiene una historia nueva */
.cm-aro.on{isolation:isolate}
.cm-aro.on::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;background:inherit;animation:av-gira 3.2s linear infinite}
.cm-aro.on .avatar{position:relative}
@keyframes av-gira{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
  .av-grid button.on img,.av-grid button.toca img,.av-grid button.toca::after,.av-aro span,.es-foto.av-pulso .av-aro,.cm-aro.on::before{animation:none}
  .av-aro span{opacity:0}
}

/* la foto del avatar siempre es un círculo recortado, nunca estirada ni ampliada: los modos de color pintan .avatar con un degradado
   (background:…) que le quitaba el «cover» y la foto salía a tamaño natural, recortada en una esquina */
.avatar{flex-shrink:0;aspect-ratio:1}
.avatar.con-foto,.avatar.foto{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
/* mientras eliges tu foto, el Piloto de la guía se esconde para no tapar los últimos avatares */
body.av-abierta>.guia-piloto{visibility:hidden!important}