/* Perfil: nombre, cara y cuenta. */

.account { max-width: 46rem; margin-inline: auto; display: grid; gap: var(--space-4); }

.account-head {
    display: flex; align-items: center; gap: var(--space-4);
    padding-bottom: var(--space-4); border-bottom: 1px solid var(--line);
}
.account-avatar { flex: none; width: 6rem; height: 6rem; }
.account-avatar :is(svg, img) {
    width: 100%; height: 100%; border-radius: 50%;
    border: 2px solid var(--line); background: var(--surface);
}
.account-identity h1 { font-size: clamp(1.4rem, 4vw, 2rem); margin-bottom: var(--space-1); }
.account-status { color: var(--text-dim); margin: 0; font-size: .9rem; }

.inline-form { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.inline-form input { flex: 1 1 12rem; }
.stack-form { display: grid; gap: var(--space-2); }
.stack-form label { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); }
.stack-form button { margin-top: var(--space-2); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ─── Pestañas ─────────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.tab {
    background: transparent; color: var(--text-dim);
    border: 1px solid var(--line); border-radius: 999px; padding: var(--space-2) var(--space-4);
}
.tab[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ─── Generador ────────────────────────────────────────────────────────────── */
.editor { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 45rem) { .editor { grid-template-columns: 11rem 1fr; align-items: start; } }

.editor-preview {
    display: grid; place-items: start center;
    position: sticky;
    /* Se pega POR DEBAJO de la cabecera, no detrás de ella. */
    top: calc(var(--header-h) + var(--space-3));
    z-index: 1;
    padding-block: var(--space-2);
}
.editor-preview svg {
    border-radius: 50%; border: 2px solid var(--line); background: var(--surface-2);
    width: 10rem; height: 10rem;
}

.editor-layers { display: grid; gap: var(--space-3); }
.layer { border: 1px solid var(--line); border-radius: var(--radius-1); padding: var(--space-3); margin: 0; }
.layer legend {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-dim); padding: 0 var(--space-2);
}

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
    background: var(--surface-2); color: var(--text); border: 1px solid transparent;
    border-radius: 999px; padding: var(--space-1) var(--space-3); font-size: .85rem; font-weight: 500;
}
.chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); font-weight: 700; }
/* Ni el color ni el peso son la única pista: el elegido lleva además una marca. */
.chip[aria-pressed="true"]::before { content: "✓ "; }

.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.swatch {
    width: 1.8rem; height: 1.8rem; border-radius: 50%; padding: 0;
    border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25);
}
.swatch[aria-pressed="true"] { border-color: var(--text); transform: scale(1.12); }

.editor-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }

/* ─── Subida y recorte ─────────────────────────────────────────────────────── */
.file-drop {
    display: grid; place-items: center; gap: var(--space-2);
    border: 2px dashed var(--line); border-radius: var(--radius-2);
    padding: var(--space-6); text-align: center; cursor: pointer; color: var(--text-dim);
}
.file-drop:hover { border-color: var(--accent); color: var(--text); }
.file-drop input { position: absolute; opacity: 0; width: 0; height: 0; }

.cropper { display: grid; gap: var(--space-3); justify-items: center; margin-top: var(--space-4); }
.cropper canvas {
    width: min(20rem, 100%); height: auto; aspect-ratio: 1;
    border-radius: var(--radius-2); background: var(--bg-deep);
    touch-action: none; cursor: grab;
}
.cropper canvas:active { cursor: grabbing; }
.zoom { display: flex; align-items: center; gap: var(--space-3); width: min(20rem, 100%); }
.zoom span { font-size: .78rem; color: var(--text-dim); white-space: nowrap; }

.account-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); }
.account-facts dt { color: var(--text-dim); font-size: .85rem; }
.account-facts dd { margin: 0; }

details summary { cursor: pointer; color: var(--accent); margin-bottom: var(--space-3); }
.login-details { margin-top: var(--space-4); border-top: 1px solid var(--line); padding-top: var(--space-4); }

/* Volver tenía que ser un destino visible, no una nota al pie en gris. */
.account-back { display: grid; justify-items: center; margin-top: var(--space-4); }
.back-link {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: var(--surface-2); color: var(--text); text-decoration: none;
    border: 1px solid var(--line); border-radius: 999px;
    padding: var(--space-3) var(--space-5); font-weight: 600;
}
.back-link:hover { border-color: var(--accent); color: var(--accent); }
.back-link[data-resume="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ─── Cabecera ─────────────────────────────────────────────────────────────── */
.header-account {
    display: flex; align-items: center; gap: var(--space-2);
    text-decoration: none; color: var(--text);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
    border: 1px solid var(--line); border-radius: 999px;
}
.header-account:hover { border-color: var(--accent); }
.header-avatar { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; }
.header-avatar :is(svg, img) { width: 100%; height: 100%; border-radius: 50%; }
.header-name { font-size: .85rem; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 30rem) { .header-name { display: none; } }

/* Caras en las listas de jugadores. */
.avatar-img { border-radius: 50%; object-fit: cover; background: var(--surface-2); }