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



.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; }


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); }

/* ─── Tu cuenta ────────────────────────────────────────────────────────────────
 *
 * Tres bloques en el orden en que se buscan: quién eres, cómo entras y tus datos. Una
 * columna siempre —también en escritorio— porque son formularios cortos y en dos columnas
 * habría que ir y volver con la vista.
 */

.cuenta {
    max-width: 40rem;
    margin-inline: auto;
    display: grid;
    gap: var(--space-4);
    padding-block-end: var(--space-6);
}

.cuenta-cabecera {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-4);
}

/* La cara es el botón que abre el editor. */
.cuenta-cara {
    position: relative;
    flex: none;
    width: 5.5rem;
    height: 5.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

.cuenta-cara-imagen { display: block; width: 100%; height: 100%; }

.cuenta-cara-imagen :is(svg, img) {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* El lápiz dice que se puede tocar. Sin él, una cara redonda no se lee como un botón. */
.cuenta-cara-lapiz {
    position: absolute;
    inset-block-end: -2px;
    inset-inline-end: -2px;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    border: 2px solid var(--bg);
}

.cuenta-cara-lapiz svg { width: 1rem; height: 1rem; }
.cuenta-cara:active { transform: scale(.97); }

.cuenta-identidad { min-width: 0; }
.cuenta-identidad h1 { margin: 0 0 var(--space-1); font-size: clamp(1.35rem, 5vw, 1.9rem); }
.cuenta-usuario { margin: 0; color: var(--text-dim); font-size: .95rem; }
.cuenta-publico { font-size: .88rem; }

/* Un campo: etiqueta, fila de edición y explicación debajo. */
.campo { display: grid; gap: var(--space-2); }
.campo + .campo { margin-block-start: var(--space-5); }

.campo > label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-dim);
}

.campo-fila { display: flex; gap: var(--space-2); }
.campo-fila input { flex: 1 1 auto; min-width: 0; }
.campo .hint { margin: 0; }

/*
 * En móvil, cada dato en dos líneas: etiqueta encima y valor debajo.
 *
 * Con dos columnas en 360 px, un correo largo se parte por donde cae —«cta-ei863t@example.t
 * est»— y deja de poder leerse de un vistazo. A partir de 26rem sí caben las dos columnas.
 */
.cuenta-datos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-1) var(--space-4);
    margin: 0 0 var(--space-4);
}

@media (min-width: 26rem) {
    .cuenta-datos { grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); }
}

.cuenta-datos dt { color: var(--text-dim); font-size: .85rem; }
.cuenta-datos dd { margin: 0; overflow-wrap: anywhere; }

/* Google: texto a la izquierda, acción a la derecha; apilado en móvil estrecho. */
.cuenta-google {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    margin-block-end: var(--space-4);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-2);
}

.cuenta-google-texto { display: grid; gap: var(--space-1); min-width: 12rem; flex: 1 1 14rem; }
.cuenta-google-texto span { color: var(--text-dim); font-size: .85rem; }
.cuenta-google [role="button"] { text-decoration: none; }

.cuenta-plegable summary { cursor: pointer; font-weight: 600; padding-block: var(--space-2); }

.cuenta-acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cuenta-acciones [role="button"] { text-decoration: none; }
.cuenta-pie { margin: 0; }

/* ─── El editor de cara, en modal ──────────────────────────────────────────────
 *
 * Ocupaba media pantalla en mitad de los datos. Ahora no ocupa nada hasta que se abre.
 */

.modal-cara { position: fixed; inset: 0; z-index: 80; }
.modal-cara-fondo { position: absolute; inset: 0; background: rgb(0 0 0 / .55); backdrop-filter: blur(2px); }

.modal-cara-caja {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: var(--space-3);
    max-height: 88vh;
    max-height: 88dvh;
    padding: var(--space-4);
    padding-block-end: max(var(--space-4), env(safe-area-inset-bottom));
    background: var(--surface);
    border-start-start-radius: var(--radius-3);
    border-start-end-radius: var(--radius-3);
    border-block-start: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    animation: mesas-sube 240ms cubic-bezier(.2, .9, .3, 1);
}

@media (min-width: 40rem) {
    .modal-cara-caja {
        inset: 50% auto auto 50%;
        translate: -50% -50%;
        width: min(34rem, calc(100vw - 2rem));
        max-height: min(88vh, 44rem);
        max-height: min(88dvh, 44rem);
        border-radius: var(--radius-3);
        border: 1px solid var(--line);
        animation-name: mesas-aparece;
    }
}

.modal-cara-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.modal-cara-cabecera h2 { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--text); text-transform: none; letter-spacing: -.01em; }

/* Lo único que se desplaza es el cuerpo del editor, dentro del modal. */
.modal-cara-cuerpo { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.modal-cara .tabs { margin-bottom: 0; }

/* El aviso de confirmar el correo. Amarillo y no rojo: no está roto, falta un paso. */
.cuenta-verificar {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    margin-block-end: var(--space-4);
    background: var(--warn);
    background: color-mix(in srgb, var(--warn) 12%, transparent);
    border: var(--warn);
    border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
    border-radius: var(--radius-2);
}

.cuenta-verificar p { margin: 0; font-size: .9rem; }

/* El rango en la cuenta: chapa, barra y lo que falta. */
.cuenta-rango { display: grid; gap: var(--space-3); justify-items: start; }
.cuenta-rango .rango-barra { width: 100%; }
.cuenta-rango .hint { margin: 0; }