/*
 * «Mi cuenta»: la del socio (/socio/mi-cuenta) y, desde el 19 oct 2026, la
 * de quien gestiona en el panel (/gestion/mi-cuenta), con las mismas piezas
 * (plantillas/comun/cuenta-*.php y cuenta.js). Antes socio-cuenta.css.
 *
 * La cargan las dos plantillas después de socio.css o de panel.css y
 * gestion.css (de ahí salen la tarjeta, los campos y, en el socio, la foto
 * del carnet y los avisos al móvil).
 *
 *  1. Quién eres (el panel) y los bloques
 *  2. Lo que se abre al pedirlo: la contraseña y el correo nuevo
 *  3. Dónde tienes la cuenta abierta
 *  4. Mis datos: lo apuntado y pedir que lo corrijan
 *  5. La del socio: su ficha y, por partes, sus ajustes
 *
 * Convenciones: cada pieza lleva sus ajustes de móvil justo debajo.
 */

/* #region 1. Quién eres (el panel) y los bloques */
/* Las tarjetas, una debajo de otra. */
.mi-cuenta {
    display: grid;
    align-content: start;
    gap: var(--espacio-4);
}

/* Dos columnas a lo ancho; en pantallas menores, una. */
.mi-cuenta-columnas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--espacio-4);
}

.mi-cuenta-columna {
    display: grid;
    gap: var(--espacio-4);
    min-width: 0;
}

@media (max-width: 1200px) {
    .mi-cuenta-columnas {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Lo que puede usar, plegado: «Ver lo que puedes usar» y su flecha gira al abrir. */
.cuenta-acceso-plegable > summary {
    width: fit-content;
    list-style: none;
}

.cuenta-acceso-plegable > summary::-webkit-details-marker {
    display: none;
}

.cuenta-acceso-plegable > summary .icono {
    transition: transform var(--duracion-hover) var(--curva);
}

.cuenta-acceso-plegable[open] > summary .icono {
    transform: rotate(180deg);
}

.cuenta-acceso-plegable[open] > .cuenta-acceso {
    margin-top: var(--espacio-3);
}

.mi-cuenta > .cabecera-pagina {
    margin-bottom: 0;
}

/* Arriba, quién es: su cara en grande, su nombre, el correo con el que entra y sus cargos. */
.cuenta-perfil {
    display: flex;
    align-items: center;
    gap: var(--espacio-5);
}

.cuenta-perfil__avatar {
    flex: none;
    width: 4rem;
    height: 4rem;
    font-size: 1.25rem;
}

.cuenta-perfil__textos {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.cuenta-perfil__textos h2 {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: 1.25rem;
}

.cuenta-perfil__correo {
    overflow: hidden;
    margin: 0;
    color: var(--rs-texto-secundario);
    text-overflow: ellipsis;
}

.cuenta-perfil__cargos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: var(--espacio-2) 0 0;
    padding: 0;
    list-style: none;
}

.cuenta-perfil__cargos:empty {
    display: none;
}

.cuenta-perfil__cargos li {
    padding: 2px var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-pildora);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

/* Cada bloque, con su aire entre título, campos y botón. */
.mi-cuenta-bloque {
    display: grid;
    gap: var(--espacio-3);
}

.mi-cuenta-bloque[hidden] {
    display: none;
}

.mi-cuenta-bloque h2,
.mi-cuenta-bloque h3,
.mi-cuenta-bloque p {
    margin: 0;
}

.mi-cuenta-bloque .campo,
.mi-cuenta-bloque .campo-checkbox,
.mi-cuenta-bloque .fila-campos {
    margin: 0;
}

.mi-cuenta-bloque > .boton,
.mi-cuenta-bloque form > .boton {
    justify-self: start;
}

.mi-cuenta-bloque .formulario-acciones {
    margin-top: var(--espacio-1);
}

/* Icono, título y para qué; el botón a la derecha (debajo, en el móvil). */
.mi-cuenta-bloque__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-3);
}

.mi-cuenta-bloque__cabecera > div {
    flex: 1 1 14rem;
    display: grid;
    gap: 2px;
}

.mi-cuenta-bloque__cabecera h2 {
    font-size: var(--texto-grande);
}

.mi-cuenta-bloque__cabecera p {
    color: var(--rs-texto-secundario);
}

.mi-cuenta-bloque__icono {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--rs-hover);
    color: var(--rs-texto-secundario);
}

/* El correo con el que se entra, entero aunque sea largo. */
.mi-cuenta-bloque__cabecera .mi-cuenta-correo strong {
    color: var(--rs-texto);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* El correo nuevo que espera a su enlace: qué se espera y qué se puede hacer. */
.mi-cuenta-pendiente {
    display: grid;
    gap: var(--espacio-2);
}

.mi-cuenta-pendiente[hidden] {
    display: none;
}

.mi-cuenta-pendiente__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-4);
}

/* El teléfono del socio y su «Guardar», en una fila. */
.mi-cuenta-telefono {
    display: flex;
    gap: var(--espacio-2);
    max-width: 26rem;
}

.mi-cuenta-telefono :is(input, select) {
    flex: 1;
    min-width: 0;
}

@media (max-width: 767px) {
    .cuenta-perfil {
        gap: var(--espacio-4);
    }

    .cuenta-perfil__avatar {
        width: 3.25rem;
        height: 3.25rem;
        font-size: var(--texto-grande);
    }

    .mi-cuenta-bloque__cabecera .boton {
        flex-basis: 100%;
        justify-content: center;
    }
}
/* Lo que puede usar en el panel (25 oct 2026): una fila por sección con sus partes enlazadas. */
.cuenta-acceso {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cuenta-acceso__seccion {
    display: grid;
    grid-template-columns: minmax(10rem, 14rem) 1fr;
    gap: var(--espacio-2) var(--espacio-4);
    align-items: baseline;
    padding: var(--espacio-3) 0;
    border-top: 1px solid var(--rs-borde-sutil);
}

.cuenta-acceso__titulo {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    font-weight: 600;
}

.cuenta-acceso__titulo .icono {
    width: 18px;
    height: 18px;
    color: var(--rs-texto-tenue);
}

.cuenta-acceso__partes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1) var(--espacio-4);
    font-size: var(--texto-etiqueta);
}

@media (max-width: 40rem) {
    .cuenta-acceso__seccion {
        grid-template-columns: 1fr;
    }
}
/* #endregion */

/* #region 2. Lo que se abre al pedirlo: la contraseña y el correo nuevo */
.mi-cuenta-plegable {
    display: grid;
    gap: var(--espacio-3);
    max-width: 32rem;
    padding-top: var(--espacio-3);
    border-top: 1px solid var(--rs-borde-sutil);
}

.mi-cuenta-plegable[hidden] {
    display: none;
}
/* #endregion */

/* #region 3. Dónde tienes la cuenta abierta (docs/seguridad.md) */
.seguridad-cuenta h3 {
    margin-top: var(--espacio-2);
    font-size: var(--texto-base);
}

.seguridad-sesiones {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cada sesión: ordenador o móvil, el navegador y desde cuándo; «Cerrar» a la derecha. */
.seguridad-sesiones__fila {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding-block: var(--espacio-3);
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.seguridad-sesiones__fila:last-child {
    border-bottom: 0;
}

.seguridad-sesiones__icono {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radio-md);
    background: var(--rs-hover);
    color: var(--rs-texto-secundario);
}

.seguridad-sesiones__textos {
    flex: 1;
    min-width: 0;
}

.seguridad-sesiones__textos small {
    display: block;
    margin-top: 2px;
    color: var(--rs-texto-tenue);
    font-size: var(--texto-pequeno);
}

.seguridad-cuenta .formulario-acciones {
    justify-content: space-between;
}

/* Con una sola sesión no hay nada que cerrar ni que ver: la fila de botones no deja hueco. */
.seguridad-cuenta .formulario-acciones:not(:has(> :not([hidden]))) {
    display: none;
}
/* #endregion */

/* #region 4. Mis datos: lo apuntado y pedir que lo corrijan (migración 0321) */
.mis-datos__lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--espacio-4);
    margin: 0;
}

.mis-datos__lista div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.mis-datos__lista dt {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
}

.mis-datos__lista dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.mis-datos__lista dd.mis-datos__vacio {
    color: var(--rs-texto-tenue);
    font-weight: 400;
}

.mis-datos__peticion {
    display: grid;
    gap: var(--espacio-2);
}

.mis-datos__peticion textarea {
    width: 100%;
    min-height: 5rem;
}

.mis-datos__peticion .boton {
    justify-self: start;
}

.mis-datos__botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-4);
}

@media (max-width: 767px) {
    .mis-datos__lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* #endregion */

/* #region 5. La del socio: su ficha y, por partes, sus ajustes (5 nov 2026) */
/* Dos columnas que coinciden de arriba abajo: la foto y el nombre de cada parte; sus datos y sus ajustes. */
.mi-cuenta-socio {
    --columna-cuenta: minmax(0, 13rem);
    --hueco-cuenta: clamp(var(--espacio-8), 5vw, 5rem);
}

.mi-cuenta-ficha {
    display: grid;
    grid-template-columns: var(--columna-cuenta) minmax(0, 1fr);
    align-items: start;
    gap: var(--espacio-6) var(--hueco-cuenta);
}

.mi-cuenta-ficha:has(> .foto-propuesta[hidden]) {
    grid-template-columns: minmax(0, 1fr);
}

.mi-cuenta-ficha:not(:has(> :not([hidden]))) {
    display: none;
}

/* Su foto como un retrato; si aún no tiene, sus iniciales en el color de la asociación. */
.mi-cuenta-ficha .foto-propuesta {
    position: relative;
    display: grid;
    gap: var(--espacio-3);
}

.mi-cuenta-ficha .foto-propuesta__foto {
    width: 100%;
    border-radius: var(--radio-xl);
    background: linear-gradient(160deg, var(--marca-fondo), color-mix(in srgb, var(--marca-fondo) 58%, #000000));
    color: #FFFFFF;
}

.foto-propuesta__iniciales {
    font-family: var(--fuente-display);
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.04em;
}

.mi-cuenta-ficha .foto-propuesta__miniatura {
    position: absolute;
    top: var(--espacio-2);
    right: var(--espacio-2);
    width: 4rem;
}

.mi-cuenta-ficha .foto-propuesta__textos {
    flex: none;
}

.mi-cuenta-ficha .foto-propuesta__textos h2 {
    font-size: var(--texto-base);
}

.mi-cuenta-ficha .foto-propuesta__textos p {
    font-size: var(--texto-etiqueta);
}

.mi-cuenta-ficha .foto-propuesta__boton {
    justify-self: start;
}

/* Quién es: su nombre muy grande y lo apuntado debajo. */
.app-socio .mis-datos {
    gap: var(--espacio-5);
}

.app-socio .mis-datos > h2 {
    margin-bottom: calc(-1 * var(--espacio-3));
    color: var(--rs-texto-tenue);
    font-family: var(--fuente-ui);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    letter-spacing: 0;
}

.app-socio .mi-cuenta-bloque .mis-datos__nombre {
    color: var(--rs-texto);
    font-family: var(--fuente-display);
    font-size: clamp(2rem, 4vw, 3.75rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

@media (min-width: 1024px) {
    .mi-cuenta-socio .mis-datos__lista {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Cada parte: su nombre a la izquierda y sus ajustes, en filas, a la derecha. */
.mi-cuenta-grupo {
    display: grid;
    grid-template-columns: var(--columna-cuenta) minmax(0, 1fr);
    gap: 0 var(--hueco-cuenta);
    border-top: 1px solid var(--rs-borde-sutil);
}

.mi-cuenta-grupo:not(:has(.mi-cuenta-grupo__filas > :not([hidden]))) {
    display: none;
}

.mi-cuenta-grupo__titulo {
    margin: 0;
    padding-top: var(--espacio-5);
    font-family: var(--fuente-display);
    font-size: clamp(1.25rem, 1.6vw, 1.625rem);
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.mi-cuenta-grupo__filas {
    display: grid;
    min-width: 0;
}

.app-socio .contenido-socio .mi-cuenta-grupo__filas > .tarjeta {
    padding-block: var(--espacio-5);
}

.app-socio .contenido-socio .mi-cuenta-grupo__filas > .tarjeta:not([hidden]) ~ .tarjeta:not([hidden]) {
    border-top: 1px solid var(--rs-borde-sutil);
}

/* Qué es, a la izquierda, y su acción, en texto, a la derecha. */
.app-socio .mi-cuenta-bloque h2 {
    font-family: var(--fuente-ui);
    font-size: var(--texto-base);
    font-weight: 600;
    letter-spacing: 0;
    word-spacing: 0;
}

.app-socio .mi-cuenta-bloque__icono {
    display: none;
}

.app-socio .mi-cuenta-bloque__cabecera {
    flex-wrap: nowrap;
}

.app-socio .mi-cuenta-bloque__cabecera .boton {
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--marca-acento);
}

.app-socio .mi-cuenta-bloque__cabecera .boton:hover {
    color: var(--rs-texto);
}

.app-socio .mi-cuenta-bloque__cabecera .boton .icono {
    display: none;
}

/* El teléfono y la peña: su campo a la derecha; «Guardar», solo si se ha cambiado algo. */
@media (min-width: 768px) {
    .mi-cuenta-bloque--campo {
        grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
        align-items: center;
        column-gap: var(--espacio-6);
    }

    .mi-cuenta-bloque--campo > .aviso {
        grid-column: 1 / -1;
    }

    /* Sus correos: el idioma como el teléfono; las casillas, a lo ancho. */
    #formulario-preferencias .campo {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
        align-items: center;
        column-gap: var(--espacio-6);
    }
}

.mi-cuenta-socio .mi-cuenta-telefono {
    max-width: none;
}

.mi-cuenta-socio .mi-cuenta-telefono .boton:disabled {
    display: none;
}

#formulario-preferencias label {
    font-weight: 400;
}

#formulario-preferencias .ayuda-campo {
    margin-top: calc(-1 * var(--espacio-2));
    padding-inline-start: 30px;
}

/* La seguridad: el título ya es el nombre de la parte. */
.mi-cuenta-grupo .seguridad-cuenta > .mi-cuenta-bloque__cabecera {
    display: none;
}

.mi-cuenta-grupo .seguridad-cuenta h3:first-of-type {
    margin-top: 0;
}

.app-socio .seguridad-sesiones__icono {
    width: auto;
    height: auto;
    background: none;
}

@media (max-width: 767px) {
    .mi-cuenta-ficha,
    .mi-cuenta-grupo {
        grid-template-columns: minmax(0, 1fr);
    }

    /* En el móvil, el retrato pequeño, al lado de lo que dice, y el botón debajo. */
    .mi-cuenta-ficha .foto-propuesta {
        grid-template-columns: 5.5rem minmax(0, 1fr);
        align-items: center;
        column-gap: var(--espacio-4);
    }

    .mi-cuenta-ficha .foto-propuesta__boton {
        grid-column: 1 / -1;
    }

    .foto-propuesta__iniciales {
        font-size: 2.25rem;
    }

    .mi-cuenta-grupo__titulo {
        padding-bottom: 0;
    }
}
/* #endregion */

/* #region 6. Los días del resumen semanal (migración 0345) */
.cuenta-dias {
    margin: var(--espacio-3) 0 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.cuenta-dias legend {
    padding: 0;
    margin-bottom: var(--espacio-2);
    font-weight: 600;
    color: var(--rs-texto-secundario);
}

.cuenta-dias__opciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

.cuenta-dias__dia {
    position: relative;
    cursor: pointer;
}

.cuenta-dias__dia input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}

.cuenta-dias__dia span {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0 var(--espacio-4);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-2);
    color: var(--rs-texto-secundario);
    font-weight: 600;
}

.cuenta-dias__dia input:checked + span {
    border-color: var(--rs-azul);
    background: var(--rs-azul-suave);
    color: var(--rs-texto);
}

.cuenta-dias__dia input:focus-visible + span {
    outline: 2px solid var(--rs-azul);
    outline-offset: 2px;
}
/* #endregion */