/*
 * Estilos reutilizables por distintas zonas/layouts de la aplicación.
 * Mantener aquí únicamente componentes realmente compartidos.
 */

:root {
    /* Forma global de los avatares de usuario. Cambiar a 50% para volver al círculo. */
    --user-avatar-radius: 24%;
}

.user-avatar-shape { border-radius:var(--user-avatar-radius) !important; }

/* Ampliación del avatar al pasar el ratón; conserva la misma forma global. */
.avatar-hover-zoom { --avatar-hover-zoom-size:min(340px,72vw); position:relative; display:inline-flex; flex:0 0 auto; overflow:visible; border-radius:var(--user-avatar-radius); cursor:zoom-in; }
.avatar-hover-zoom > .avatar-hover-zoom__preview { position:absolute !important; z-index:10000; top:50%; left:50%; display:block; width:var(--avatar-hover-zoom-size) !important; height:var(--avatar-hover-zoom-size) !important; max-width:none !important; border:0; border-radius:var(--user-avatar-radius) !important; object-fit:cover !important; background:#eef2f3; box-shadow:0 18px 50px rgba(7,51,68,.26); opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,-50%) scale(.72); transition:opacity .14s ease,transform .16s ease,visibility 0s linear .16s; }
.avatar-hover-zoom:hover > .avatar-hover-zoom__preview { opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); transition-delay:0s; }

/* Rating de 0 a 5 estrellas con relleno fraccional; el tamaño se hereda del contexto. */
.rating-stars { display:inline-flex; align-items:center; gap:.12em; color:var(--brand-primary); line-height:1; vertical-align:middle; }
.rating-stars--sm { font-size:.72rem; }
.rating-stars--md { font-size:1rem; }
.rating-stars--lg { font-size:1.25rem; }
.rating-star { position:relative; display:inline-block; width:1em; height:1em; flex:0 0 1em; line-height:1; }
.rating-star__empty { position:absolute; inset:0; color:var(--brand-primary); }
.rating-star__fill { position:absolute; inset:0 auto 0 0; display:block; overflow:hidden; height:1em; color:var(--brand-primary); white-space:nowrap; }
.rating-star__fill > i { position:absolute; top:0; left:0; width:1em; height:1em; }