/* ============================================================================
   avatar.css — Botón de perfil con avatar + modal de selección (home).
   Acento morado de marca (var(--brand-purple)). Solo se carga en index.html.
   ============================================================================ */

/* ---------- Botón de perfil en el header (el avatar reemplaza el icono) ----- */
/* Nombre del perro junto al avatar (a su izquierda) */
.profile-name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-color);
    text-shadow: var(--title-shadow);
    max-width: 96px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-name[hidden] { display: none; }
/* En pantallas muy estrechas no caben marca + nombre + avatar: la MARCA manda,
   así que el nombre se oculta (el avatar ya identifica al perro). */
@media (max-width: 380px) {
    .profile-name { display: none; }
}

.profile-btn { position: relative; overflow: visible; padding: 0; }
/* Con avatar, el botón crece para que el perro se vea grande y protagonista. */
.profile-btn--has-avatar { width: 46px; height: 46px; }
.profile-btn__avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9),
                0 2px 9px rgba(0, 0, 0, 0.38);
}
/* Una vez elegido el perro, el icono de cuenta (emoticono) NO debe existir.
   `hidden` solo no basta porque `.header-svg { display:block }` lo anula;
   esta regla (más específica) lo elimina de verdad. */
.profile-btn--has-avatar .profile-btn__fallback { display: none; }

.profile-btn--has-avatar:hover { background-color: transparent; }
.profile-btn--has-avatar:hover .profile-btn__avatar {
    box-shadow: 0 0 0 2px var(--brand-purple, #8A2BE2),
                0 3px 12px rgba(0, 0, 0, 0.42);
}

/* ---------- Modal ---------- */
.avatar-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.avatar-modal[hidden] { display: none; }

.avatar-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 10, 24, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: avatar-fade 0.25s ease both;
}
@keyframes avatar-fade { from { opacity: 0; } to { opacity: 1; } }

.avatar-modal__panel {
    position: relative;
    width: min(94vw, 440px);
    max-height: 86dvh;
    overflow-y: auto;
    padding: 1.6rem 1.4rem 1.4rem;
    border-radius: 26px;
    background: linear-gradient(165deg, #FFFFFF 0%, #F6F2FF 100%);
    box-shadow: 0 24px 70px rgba(20, 8, 50, 0.35),
                inset 0 0 0 1px rgba(138, 43, 226, 0.12);
    text-align: center;
    animation: avatar-pop 0.3s cubic-bezier(0.2, 0.9, 0.25, 1.1) both;
}
@keyframes avatar-pop {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

.avatar-modal__title {
    margin: 0;
    font-family: "Nunito", system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #2A1A4A 0%, var(--brand-purple, #8A2BE2) 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.avatar-modal__subtitle {
    margin: 0.4rem 0 1.2rem;
    font-family: "Nunito", system-ui, sans-serif;
    font-size: 0.92rem;
    color: #6A5B86;
}

/* ---------- Rejilla de avatares ---------- */
.avatar-modal__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 14px;
    margin-bottom: 1.3rem;
}

.avatar-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}
.avatar-opt__circle {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #ECE6F8;
    overflow: hidden;
    box-shadow: 0 0 0 2px transparent, 0 3px 10px rgba(20, 8, 50, 0.10);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.avatar-opt:hover  .avatar-opt__circle { transform: translateY(-2px) scale(1.04); }
.avatar-opt:active .avatar-opt__circle { transform: scale(0.96); }
.avatar-opt__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.avatar-opt__name {
    font-family: "Nunito", system-ui, sans-serif;
    font-size: 0.74rem;
    font-weight: 800;
    color: #4A3A66;
    line-height: 1;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.16s ease;
}

/* Seleccionado: aro morado + check + nombre morado */
.avatar-opt.is-selected .avatar-opt__circle {
    box-shadow: 0 0 0 3px var(--brand-purple, #8A2BE2),
                0 6px 16px rgba(138, 43, 226, 0.35);
    transform: translateY(-2px) scale(1.04);
}
.avatar-opt.is-selected .avatar-opt__name { color: var(--brand-purple, #8A2BE2); }
.avatar-opt.is-selected .avatar-opt__circle::after {
    content: "✓";
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-purple, #8A2BE2);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* Marcador de posición numerado (mientras no esté la imagen real) */
.avatar-opt__circle--placeholder {
    background: linear-gradient(150deg, #B79CEB 0%, var(--brand-purple, #8A2BE2) 100%);
}
.avatar-opt__circle--placeholder::before {
    content: var(--ph-num, "");
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-family: "Nunito", system-ui, sans-serif;
    font-size: 1.4rem;
    font-weight: 900;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ---------- Acciones ---------- */
.avatar-modal__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.avatar-modal__confirm,
.avatar-modal__cancel {
    font-family: "Nunito", system-ui, sans-serif;
    font-weight: 800;
    font-size: 1rem;
    border: none;
    border-radius: 14px;
    padding: 0.8rem 1.6rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.avatar-modal__confirm {
    flex: 1 1 auto;
    color: #fff;
    background: linear-gradient(135deg, #A45BF0 0%, var(--brand-purple, #8A2BE2) 95%);
    box-shadow: 0 6px 18px rgba(138, 43, 226, 0.4);
}
.avatar-modal__confirm:hover:not(:disabled)  { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(138, 43, 226, 0.5); }
.avatar-modal__confirm:active:not(:disabled) { transform: scale(0.98); }
.avatar-modal__confirm:disabled { opacity: 0.45; cursor: default; }

.avatar-modal__cancel {
    color: #6A5B86;
    background: #EEE8F8;
}
.avatar-modal__cancel:hover  { background: #E4DBF5; }
.avatar-modal__cancel:active { transform: scale(0.97); }

/* Bloquea el scroll del fondo mientras el modal está abierto */
body.avatar-modal-open { overflow: hidden; }