/*
 * La ficha de un socio (/gestion/socios-formulario).
 *
 * Solo la carga plantillas/gestion/socios-formulario.php, después de
 * panel.css, gestion.css y carnet-tarjeta.css. De gestion.css salen la
 * cabecera de una ficha (quién es, su estado y lo que le falta, compartida
 * con la del evento), las pestañas, los campos, las filas con interruptor
 * (.ajuste), el aviso de socios parecidos y la barra de «Guardar»; de
 * carnet-tarjeta.css, la tarjeta del carnet. Las piezas van en el orden en
 * que salen:
 *
 *   1. La cabecera: su foto, «Guardar» de arriba y «De baja»
 *   2. Cada bloque en su tarjeta (y «Registro y estado» a la derecha)
 *   3. Los campos en columnas
 *   4. El DNI
 *   5. Las etiquetas
 *   6. Menores a su cargo
 *   7. Acompañante
 *   8. Tutor y cuenta de familia
 *   9. Sus cuotas
 *  10. Registro y estado
 *  11. Carnets y normas
 *  12. La foto (lo primero de «Datos»)
 *  13. La historia
 *  14. Las notas y los avisos importantes
 *  15. El Resumen del socio: el dinero, lo pendiente y lo suyo
 *
 * Colores, radios y espacios, de tokens de base.css; el modo claro y el
 * móvil, junto a cada pieza.
 */

/* #region Alta de un socio: «¿es la misma persona?» */
.aviso-parecidos {
    display: block;
}

.aviso-parecidos[hidden] {
    display: none;
}

.aviso-parecidos p {
    margin: 0 0 var(--espacio-2);
}

.aviso-parecidos__lista {
    display: grid;
    gap: var(--espacio-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.aviso-parecidos__lista li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--espacio-1) var(--espacio-3);
}
/* #endregion */

/* #region 1. La cabecera: su foto, «Guardar» de arriba y «De baja» */
/* Su foto, en proporción de carnet y tan alta como lo que tiene al lado; sin foto, sus iniciales. */
.ficha-cabecera__foto {
    flex: none;
    align-self: stretch;
    aspect-ratio: 4 / 5;
    min-height: 120px;
    overflow: hidden;
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-2);
    box-shadow: var(--sombra-md);
}

.ficha-cabecera__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ficha-cabecera__foto > span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(140deg, hsl(var(--tono, 210) 55% 46%), hsl(var(--tono, 210) 60% 30%));
    color: #FFFFFF;
    font-family: var(--fuente-display);
    font-size: 1.75rem;
    font-weight: 700;
}

/* Este año cumple 25, 50… años de socio (9 nov 2026): una medalla bajo su nombre, en el color de la asociación. */
.ficha-aniversario {
    display: flex;
    align-self: flex-start;
    width: fit-content;
    align-items: center;
    gap: var(--espacio-2);
    margin: var(--espacio-2) 0 0;
    padding: 4px var(--espacio-3) 4px 10px;
    border: 1px solid color-mix(in srgb, var(--marca-acento) 40%, transparent);
    border-radius: var(--radio-pildora);
    background: color-mix(in srgb, var(--marca-acento) 14%, transparent);
    color: var(--rs-texto);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

.ficha-aniversario .icono {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--marca-acento);
}

/* De baja: lo que le falta, en rojo en vez de ámbar. */
.ficha-socio .ficha-avisos--baja {
    border-color: color-mix(in srgb, var(--rs-peligro) 35%, var(--rs-borde));
    border-left-color: var(--rs-peligro);
    background: color-mix(in srgb, var(--rs-peligro) 6%, var(--rs-superficie-1));
}

.ficha-socio .ficha-avisos--baja .ficha-avisos__titulo {
    color: var(--rs-peligro-texto);
}

@media (max-width: 767px) {
    .ficha-cabecera__foto {
        align-self: flex-start;
        width: 112px;
        min-height: 0;
    }

    /* «Guardar» de arriba, solo en el ordenador: en el móvil ya está el de abajo, que se queda fijo con cambios. */
    #boton-guardar-arriba,
    .ficha-socio .cabecera-pagina__acciones:not(:has(> :not(#boton-guardar-arriba))) {
        display: none;
    }
}
/* #endregion */

/* #region 2. Cada bloque en su tarjeta, por pestañas (datos, familia, cuotas, resumen) */
/* Los datos por grupos (datos personales, contacto, familia…), cada uno en su tarjeta. */
.ficha-formulario {
    display: grid;
    gap: var(--espacio-4);
}

.app-panel .ficha-panel > .ficha-grupo.tarjeta {
    min-width: 0;
    margin: 0;
    padding: var(--espacio-5) var(--espacio-6);
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-lg);
}

/* El título de cada tarjeta, como los de las demás pantallas (la leyenda de un fieldset, en su propia línea). */
.ficha-panel > .ficha-grupo > legend,
.ficha-grupo__titulo {
    margin: 0 0 var(--espacio-4);
    padding: 0;
    font-family: var(--fuente-display);
    font-size: 1.0625rem;
    font-weight: 700;
}

.ficha-panel > .ficha-grupo > legend {
    float: left;
    width: 100%;
}

.ficha-panel > .ficha-grupo > legend + * {
    clear: both;
}

/* Entre la explicación de un bloque y su botón, aire. */
.ficha-socio .ficha-grupo > .ayuda-campo {
    margin: 0 0 var(--espacio-4);
}

.ficha-formulario > .ficha-acciones {
    margin-top: 0;
}

/* Las tarjetas de las otras dos pestañas (carnet y foto, historia y notas), iguales que estas. */
.ficha-socio :is(.ficha-carnet__columna, .ficha-historia, .ficha-historia__lado) > .tarjeta {
    margin: 0;
    padding: var(--espacio-5) var(--espacio-6);
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-lg);
}

.ficha-socio :is(.ficha-carnet, .ficha-historia) h2 {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: 1.0625rem;
    font-weight: 700;
}

/* Un título suelto (sin cabecera con botones), separado de lo que cuenta y con su icono al lado. */
.ficha-socio :is(.ficha-carnet, .ficha-historia) .tarjeta > h2 {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-3);
}

.ficha-socio :is(.ficha-carnet, .ficha-historia) .tarjeta > h2 > .icono {
    flex: none;
    color: var(--marca-acento);
}

/* Cada pestaña de la ficha (26 oct 2026): sus tarjetas, una debajo de otra. */
.ficha-panel {
    display: grid;
    gap: var(--espacio-4);
    min-width: 0;
}

.ficha-panel[hidden] {
    display: none;
}

@media (max-width: 767px) {
    .app-panel .ficha-panel > .ficha-grupo.tarjeta {
        padding: var(--espacio-4);
    }

    .ficha-socio :is(.ficha-carnet__columna, .ficha-historia, .ficha-historia__lado) > .tarjeta {
        padding: var(--espacio-4);
    }
}
/* #endregion */

/* #region 3. Los campos en columnas */
/* Varios campos por fila, alineados arriba: la etiqueta y la caja a la misma altura en cada columna. */
.ficha-campos {
    display: grid;
    gap: 0 var(--espacio-4);
    align-items: start;
}

.ficha-campos--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ficha-campos--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ficha-campos--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ficha-campos--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* La dirección en una fila: la calle, más ancha. */
.ficha-direccion {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr);
}

@media (max-width: 1100px) {
    .ficha-campos--5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .ficha-campos--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .ficha-campos--2,
    .ficha-campos--3,
    .ficha-campos--4,
    .ficha-campos--5,
    .ficha-direccion {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* #endregion */

/* #region 4. El DNI */
/* El DNI guardado, tapado, en una caja del alto de los demás campos y con «Cambiar» dentro. */
.ficha-dni__caja {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2);
    min-height: var(--alto-control);
    padding: 0 6px 0 var(--espacio-3);
    border: 1px solid var(--rs-borde-control);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

.ficha-dni__actual {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--rs-texto-secundario);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sin DNI: el texto normal, más tenue (no es un número tapado). */
.ficha-dni__actual--vacio {
    color: var(--rs-texto-tenue);
    letter-spacing: normal;
}

.ficha-dni__accion {
    display: contents;
}

.ficha-dni__cambiar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 var(--espacio-2);
    border-radius: var(--radio-sm);
    color: var(--marca-acento);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    cursor: pointer;
}

.ficha-dni__cambiar:hover {
    background: color-mix(in srgb, var(--marca-acento) 10%, transparent);
}

.ficha-dni__cambiar:focus-within {
    box-shadow: var(--anillo-foco);
}

.ficha-dni__cambiar .icono {
    width: 14px;
    height: 14px;
}

.ficha-dni #campo-dni-contenedor {
    margin: 0;
}

/* Con la caja, el campo nuevo no repite la etiqueta (ya la lleva arriba). */
.ficha-dni:has(> .ficha-dni__caja:not([hidden]), > .ficha-dni__caja[hidden]) .ficha-dni__etiqueta-campo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* Al dar de alta (sin DNI guardado), el campo lleva su etiqueta: la de arriba y la caja sobran. */
.ficha-dni:has(#dni-actual[hidden]) > .ficha-dni__etiqueta,
.ficha-dni:has(#dni-actual[hidden]) > .ficha-dni__caja {
    display: none;
}

.ficha-dni:has(#dni-actual[hidden]) .ficha-dni__etiqueta-campo {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
}

.ficha-dni__nuevo {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.ficha-dni__nuevo input {
    flex: 1;
    min-width: 0;
}
/* #endregion */

/* #region 5. Las etiquetas */
/* Un solo campo con sus pastillas dentro, donde escribir otra y «+» para añadirla. */
#ficha-antiguedad-etiquetas .ficha-etiquetas {
    grid-column: span 2;
}

/* Con la peña (migración 0327) en la fila, las etiquetas bajan a una línea entera: sus pastillas necesitan sitio. */
#ficha-antiguedad-etiquetas:has(#ficha-pena:not([hidden])) .ficha-etiquetas {
    grid-column: 1 / -1;
}

.ficha-etiquetas__caja {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: var(--alto-control);
    padding: var(--espacio-1) var(--espacio-1) var(--espacio-1) var(--espacio-2);
    border: 1px solid var(--rs-borde-control);
    border-radius: var(--radio-md);
    background: var(--rs-control-fondo);
    transition: border-color var(--duracion-hover) var(--curva), box-shadow var(--duracion-hover) var(--curva);
}

.ficha-etiquetas__caja:focus-within {
    border-color: var(--marca-acento);
    box-shadow: var(--anillo-foco);
}

.ficha-etiquetas__lista {
    display: contents;
}

.app-panel .ficha-etiquetas__caja input {
    flex: 1 1 8rem;
    min-width: 0;
    min-height: 30px;
    padding: 0 var(--espacio-1);
    border: 0;
    background: transparent;
    box-shadow: none;
}

.app-panel .ficha-etiquetas__caja input:focus {
    outline: none;
    box-shadow: none;
}

.ficha-etiquetas__anadir {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--radio-sm);
    background: color-mix(in srgb, var(--marca-acento) 12%, transparent);
    color: var(--marca-acento);
    cursor: pointer;
}

.ficha-etiquetas__anadir:hover {
    background: color-mix(in srgb, var(--marca-acento) 20%, transparent);
}

.ficha-etiquetas__anadir .icono {
    width: 16px;
    height: 16px;
}

@media (max-width: 767px) {
    #ficha-antiguedad-etiquetas .ficha-etiquetas {
        grid-column: auto;
    }
}
/* #endregion */

/* #region 6. Menores a su cargo */
.tutelados-lista {
    list-style: none;
    margin: 0 0 var(--espacio-4);
    padding: 0;
}

.tutelados-lista li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    padding: var(--espacio-3) 0;
    border-bottom: 1px solid var(--rs-borde-sutil);
}

/* Una persona de su familia (menor a cargo, tutor): su cara y su nombre, en el color del texto. */
.persona-familia {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-3);
    color: var(--rs-texto);
    text-decoration: none;
    transition: color var(--duracion-hover) var(--curva);
}

.persona-familia:hover {
    color: var(--marca-acento);
}

/* «No tiene menores a su cargo»: una línea, sin el dibujo de las pantallas vacías. */
.ficha-formulario .estado-vacio {
    padding: var(--espacio-2) 0;
    text-align: left;
    font-size: var(--texto-etiqueta);
}

.ficha-formulario .estado-vacio::before {
    display: none;
}

.menor-anadir {
    display: grid;
    gap: var(--espacio-3);
    margin-top: var(--espacio-3);
}

.menor-anadir__titulo {
    margin: 0;
    font-weight: 600;
}

/* «El menor es socio» / «no es socio»: dos opciones con su icono, que se marcan al elegirlas. */
.menor-opciones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espacio-2);
}

.menor-opcion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-2);
    min-height: 48px;
    padding: 0 var(--espacio-4);
    border: 1px dashed rgb(255 255 255 / 0.12);
    border-radius: 12px;
    background: rgb(255 255 255 / 0.03);
    color: var(--rs-texto-secundario);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.ficha-socio .menor-opcion .icono {
    width: 18px;
    height: 18px;
    color: var(--marca-acento);
}

.menor-opcion[aria-pressed="true"] {
    border-style: solid;
    border-color: var(--marca-acento);
    background: color-mix(in srgb, var(--marca-acento) 14%, transparent);
    color: var(--rs-texto);
}

:root[data-theme="light"] .menor-opcion[aria-pressed="true"] {
    border-color: var(--marca-boton);
    background: color-mix(in srgb, var(--marca-boton) 10%, #FFFFFF);
}

/* Con .ficha-socio delante, para ganar también al modo claro (de gestion.css y el de aquí arriba). */
.ficha-socio .menor-opcion:hover {
    border-color: var(--marca-acento);
    color: var(--rs-texto);
}

.menor-opcion:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

/* Lo que se abre al elegir (buscarlo, o sus datos si no es socio); también el acompañante nuevo. */
.menor-panel {
    display: grid;
    gap: var(--espacio-3);
    justify-items: start;
}

.menor-panel > input[type="search"],
.menor-panel > .ficha-campos,
.menor-panel > .buscador-resultados {
    justify-self: stretch;
}

.menor-no-sale {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

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

/* #region 7. Acompañante */
/* El acompañante: una línea con su nombre, contacto y botones. */
.acompanante-actual {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-4);
    margin: var(--espacio-2) 0;
}

.acompanante-actual__nombre {
    font-weight: 600;
}
/* #endregion */

/* #region 8. Tutor y cuenta de familia */
/* El tutor elegido y «Quitar», en la misma línea; la búsqueda, encima a todo lo ancho. */
#campo-tutor-contenedor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--espacio-3);
}

#campo-tutor-contenedor > :not(#tutor-elegido):not(#boton-quitar-tutor) {
    grid-column: 1 / -1;
}

.ficha-socio .tutor-elegido {
    margin: 0;
    padding: var(--espacio-2) 0;
}

/* La cuenta de familia (quien lo tutela sin ser socio): plegada, con un borde discontinuo. */
.familia-no-socio {
    margin-top: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px dashed rgb(255 255 255 / 0.12);
    border-radius: 12px;
}

.familia-no-socio > summary {
    font-weight: 600;
    cursor: pointer;
}

.familia-no-socio[open] > summary {
    margin-bottom: var(--espacio-2);
}

/* Sus cuatro campos, en una fila. */
.familia-no-socio__campos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .familia-no-socio__campos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .familia-no-socio__campos {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* #endregion */

/* #region 9. Sus cuotas */
/* Cada recibo: qué es, su importe, su estado y lo que se puede hacer con él. */
.socio-cuotas__lista {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.socio-cuotas__recibo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto minmax(14rem, auto);
    align-items: center;
    gap: var(--espacio-2) var(--espacio-4);
    padding: var(--espacio-2) 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.06);
}

:root[data-theme="light"] .socio-cuotas__recibo {
    border-bottom-color: rgb(16 20 26 / 0.08);
}

.socio-cuotas__que {
    display: grid;
}

.socio-cuotas__importe {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.socio-cuotas__acciones {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--espacio-2);
}

.socio-cuotas__acciones select {
    width: auto;
    min-height: 32px;
    padding-block: 0;
}

@media (max-width: 767px) {
    .socio-cuotas__recibo {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .socio-cuotas__acciones {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}
/* #endregion */

/* #region 10. Registro y estado */
/* Cada cosa en su fila con interruptor; se aplica al pulsar «Guardar». */
.registro-casillas {
    display: grid;
    gap: var(--espacio-2);
    margin: 0 0 var(--espacio-3);
}

.registro-casillas > .ajuste:first-child {
    border-top: 0;
}

.registro-casilla-marca--off {
    opacity: 0.6;
}

.registro-enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2) var(--espacio-5);
    margin: var(--espacio-1) 0 0;
}

/* Si un enlace ocupa dos líneas, alineado a la izquierda como el resto de la tarjeta. */
.registro-enlaces .boton-enlace {
    text-align: left;
}

.registro-datos-alta > summary {
    font-weight: 600;
    cursor: pointer;
}

/* De baja, «Borrar definitivamente»: al final de la tarjeta, separado de lo demás. */
.registro-peligro {
    margin-top: var(--espacio-4);
    padding-top: var(--espacio-4);
    border-top: 1px solid var(--rs-borde-sutil);
}

/* En la columna estrecha de la derecha (región 2), el idioma de sus correos a todo lo ancho. */
@media (min-width: 1440px) {
    .ficha-socio #grupo-registro .registro-extra {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* #endregion */

/* #region 11. Carnets y normas */
/* El carnet, protagonista a la izquierda; sus carnets y títulos, amonestaciones y requisitos, al lado y debajo. */
.ficha-carnet {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(16rem, 1fr);
    gap: var(--espacio-4);
    align-items: start;
}

/* Cada columna baja a su aire: una tarjeta corta no deja un hueco al lado de una larga. */
.ficha-carnet__columna {
    display: grid;
    gap: var(--espacio-4);
    min-width: 0;
}

.ficha-carnet__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2) var(--espacio-3);
    margin-bottom: var(--espacio-5);
}

/* «Vigente · Versión 1»: una pastilla verde con su punto. */
.ficha-carnet__estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radio-pildora);
    background: color-mix(in srgb, var(--rs-exito) 13%, transparent);
    color: var(--rs-exito);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

.ficha-carnet__estado::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/*
 * La tarjeta y, a su lado, sus datos en filas con su icono y, debajo de
 * ellos, los botones apilados del mismo ancho: imprimir con contorno,
 * renovar sin caja y revocar en rojo suave, separado.
 */
.ficha-carnet__vigente {
    display: grid;
    grid-template-columns: minmax(15rem, 22rem) minmax(13rem, 1fr);
    gap: var(--espacio-6);
    align-items: stretch;
}

.ficha-carnet__tarjeta .carnet-tarjeta {
    width: 100%;
}

.ficha-carnet__lado {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-5);
    min-width: 0;
}

.ficha-carnet__datos {
    display: grid;
    gap: var(--espacio-3);
    margin: 0;
}

/* Cada dato: su icono en un cuadrito y, al lado, qué es y su valor. */
.ficha-carnet__dato {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: var(--espacio-3);
    align-items: center;
}

.ficha-carnet__dato-icono {
    display: grid;
    grid-row: span 2;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radio-md);
    background: color-mix(in srgb, var(--tono-seccion, var(--marca-acento)) 12%, transparent);
    color: var(--tono-seccion, var(--marca-acento));
}

.ficha-carnet__dato-icono .icono {
    width: 18px;
    height: 18px;
}

.ficha-carnet__dato dt {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
    line-height: 1.3;
}

.ficha-carnet__dato dd {
    margin: 0;
    font-weight: 600;
    line-height: 1.3;
}

.carnet-codigo-corto {
    font-family: var(--fuente-mono);
    letter-spacing: 0.08em;
}

.ficha-carnet__acciones {
    display: grid;
    gap: var(--espacio-2);
    margin-top: auto;
}

.ficha-carnet__acciones .boton {
    justify-content: center;
    width: 100%;
}

/* Revocar, lo que no se deshace: aparte, debajo de una línea. */
.ficha-carnet__acciones #boton-revocar-carnet {
    margin-top: var(--espacio-2);
    position: relative;
}

.ficha-carnet__acciones #boton-revocar-carnet::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--espacio-2) - var(--espacio-1));
    right: 0;
    left: 0;
    height: 1px;
    background: var(--rs-borde-sutil);
}

/* Sin carnet: su icono, una línea y el botón para emitirlo. */
.ficha-carnet__vacio {
    display: grid;
    justify-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-6) var(--espacio-4);
    border: 1px dashed var(--rs-borde);
    border-radius: var(--radio-lg);
    text-align: center;
}

.ficha-carnet__vacio p {
    margin: 0;
    color: var(--rs-texto-secundario);
}

.ficha-carnet__vacio-icono {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radio-lg);
    background: color-mix(in srgb, var(--tono-seccion, var(--marca-acento)) 14%, transparent);
    color: var(--tono-seccion, var(--marca-acento));
}

.ficha-carnet__vacio-icono .icono {
    width: 24px;
    height: 24px;
}

/* El carnet necesita su ancho para la tarjeta y sus datos: por debajo, la foto pasa debajo. */
@media (max-width: 1279px) {
    .ficha-carnet {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* En el móvil, el carnet arriba y sus datos debajo; los botones, en una rejilla del mismo tamaño. */
@media (max-width: 767px) {
    .ficha-carnet__vigente {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--espacio-5);
    }

    .ficha-carnet__acciones {
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
    }

    .ficha-carnet__acciones .boton {
        padding-inline: var(--espacio-2);
    }

    .ficha-carnet__acciones #boton-revocar-carnet {
        margin-top: 0;
    }

    .ficha-carnet__acciones #boton-revocar-carnet::before {
        display: none;
    }
}
/* #endregion */

/* #region 12. La foto (lo primero de «Datos») */
/* Se toca para elegirla o se arrastra encima; se sube al pulsar «Guardar». */
.ficha-foto {
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
    /* Del ancho de lo suyo, no de la tarjeta entera: sin un hueco vacío a la derecha. */
    width: fit-content;
    max-width: 100%;
    padding: var(--espacio-3) var(--espacio-6) var(--espacio-3) var(--espacio-3);
    border: 1px dashed var(--rs-borde);
    border-radius: var(--radio-lg);
    cursor: pointer;
    transition: border-color var(--duracion-hover) var(--curva), background-color var(--duracion-hover) var(--curva);
}

.ficha-foto:hover,
.ficha-foto--encima,
.ficha-foto:focus-within {
    border-color: var(--marca-acento);
    background: color-mix(in srgb, var(--marca-acento) 6%, transparent);
}

.ficha-foto[aria-busy="true"] {
    opacity: 0.6;
    pointer-events: none;
}

.ficha-foto__marco {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 6.5rem;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
    color: var(--rs-texto-tenue);
}

.ficha-foto__marco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ficha-foto__vacia .icono {
    width: 28px;
    height: 28px;
}

.ficha-foto__textos {
    display: grid;
    justify-items: start;
    gap: var(--espacio-2);
    min-width: 0;
}

.ficha-foto__textos small {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
}

/* Es parte de la zona (un <label>): parece un botón, pero el clic lo recibe la zona entera. */
.ficha-foto__elegir {
    pointer-events: none;
}

.seccion-foto .aviso {
    margin: var(--espacio-3) 0 0;
}
/* #endregion */

/* #region 13. La historia */
/* La historia a lo ancho; las notas, en su columna (región 14), fijas al bajar. */
.ficha-historia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: var(--espacio-4);
    align-items: start;
}

.ficha-linea__cabecera,
.ficha-notas__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
}

/* Cada día, su cabecera; y debajo lo que pasó. */
.historia-dias {
    display: grid;
    gap: var(--espacio-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.historia-dia__nombre {
    margin: 0 0 var(--espacio-2);
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Un icono de color por tipo, unidos por una línea. */
.historia-lista {
    position: relative;
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.historia-lista::before {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 23px;
    width: 2px;
    background: var(--rs-borde-sutil);
}

.historia-lista__fila {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-2);
    border-radius: var(--radio-md);
    color: inherit;
}

/* Sin subrayado nunca: al pasar, el fondo y el título en el color de la asociación. */
a.historia-lista__fila,
a.historia-lista__fila:is(:hover, :focus, :focus-visible) * {
    text-decoration: none;
}

a.historia-lista__fila:hover {
    background: color-mix(in srgb, var(--rs-texto) 5%, transparent);
}

a.historia-lista__fila:hover strong {
    color: var(--marca-acento);
}

.historia-lista__icono {
    --tono-historia: var(--rs-texto-secundario);
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radio-md);
    background: color-mix(in srgb, var(--tono-historia) 14%, var(--rs-superficie-1));
    color: var(--tono-historia);
    box-shadow: 0 0 0 4px var(--rs-superficie-1);
}

.historia-lista__icono .icono {
    width: 16px;
    height: 16px;
}

.historia-lista__icono--evento { --tono-historia: var(--marca-acento); }
.historia-lista__icono--pago { --tono-historia: var(--rs-exito); }
.historia-lista__icono--cuota { --tono-historia: var(--rs-info); }
/* Entradas pedidas fuera de plazo (migración 0228): en ámbar, que se vea. */
.historia-lista__icono--fuera_plazo { --tono-historia: var(--rs-aviso); }
.historia-lista__icono--nota { --tono-historia: var(--rs-aviso); }

.historia-lista__texto {
    display: grid;
    flex: 1;
    min-width: 0;
}

.historia-lista__texto strong {
    font-weight: 600;
    transition: color var(--duracion-hover) var(--curva);
}

.historia-lista__texto small {
    color: var(--rs-texto-tenue);
    font-size: 0.8125rem;
}

/* «3 veces»: lo mismo seguido, en una sola línea. */
.historia-lista__veces {
    margin-left: var(--espacio-1);
    padding: 1px 8px;
    border-radius: var(--radio-pildora);
    background: var(--rs-cian-suave);
    color: var(--rs-cian-texto);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.historia-lista__hora {
    flex-shrink: 0;
    color: var(--rs-texto-tenue);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.historia-lista__ir {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--rs-texto-tenue);
}

.historia-lista__ir .icono {
    width: 16px;
    height: 16px;
}

/* «Ver más», centrado debajo: la historia no baja sin fin. */
.ficha-linea__mas {
    display: flex;
    margin: var(--espacio-5) auto 0;
}

@media (max-width: 1023px) {
    .ficha-historia {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    /* Los filtros, en rejilla del mismo tamaño: nada se sale ni se descoloca
       (las pestañas de la ficha ya se apilan solas, gestion.css «pestanas--apilada»). */
    .ficha-socio #historia-filtros {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .ficha-socio #historia-filtros button {
        justify-content: center;
        min-width: 0;
        padding-inline: var(--espacio-2);
        text-align: center;
    }
}
/* #endregion */

/* #region 14. Las notas y los avisos importantes */
/* Las notas arriba y los avisos importantes debajo, en su columna; la columna, fija al bajar la historia. */
.ficha-historia__lado {
    display: grid;
    gap: var(--espacio-4);
    min-width: 0;
}

.app-panel .ficha-historia__lado {
    position: sticky;
    top: calc(var(--alto-superior) + var(--espacio-4));
    /* Si no cabe en la pantalla, baja por dentro: nunca queda cortada abajo (3 nov 2026). */
    max-height: calc(100dvh - var(--alto-superior) - var(--espacio-4) * 2);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* «Solo las ve la Junta»: un candado pequeño, en vez de una frase. */
.ficha-notas__privadas {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
}

.ficha-notas__privadas .icono {
    width: 14px;
    height: 14px;
}

.ficha-notas__nueva {
    display: grid;
    gap: var(--espacio-3);
    margin: 0 0 var(--espacio-4);
}

.ficha-notas__nueva textarea {
    resize: vertical;
}

.ficha-notas__nueva .boton {
    justify-self: end;
}

.ficha-notas__lista {
    display: grid;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ficha-notas__ninguna {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
    text-align: center;
}

/* Cada nota, como un pósit: el texto, cuándo y quién, y la papelera al pasar. */
.ficha-nota {
    position: relative;
    padding: var(--espacio-3) var(--espacio-8) var(--espacio-3) var(--espacio-4);
    border-left: 3px solid var(--rs-aviso);
    border-radius: var(--radio-md);
    background: color-mix(in srgb, var(--rs-aviso) 8%, var(--rs-superficie-1));
}

.ficha-nota p {
    margin: 0 0 var(--espacio-1);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.ficha-nota small {
    color: var(--rs-texto-tenue);
    font-size: 0.75rem;
}

.ficha-nota__quitar {
    position: absolute;
    top: 6px;
    right: 6px;
    opacity: 0.5;
}

.ficha-nota:hover .ficha-nota__quitar,
.ficha-nota__quitar:focus-visible {
    opacity: 1;
}

@media (max-width: 1023px) {
    .app-panel .ficha-historia__lado {
        position: static;
    }
}
/* #endregion */

/* #region Cómo paga sus cuotas (migración 0217) */
.forma-pago__ahora {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0 0 var(--espacio-2);
    font-weight: 600;
}

.forma-pago__cambiar {
    display: grid;
    gap: var(--espacio-2);
    justify-items: start;
}

.forma-pago__cambiar fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-3);
    margin: 0;
    padding: 0;
    border: 0;
}

.forma-pago__historial ul {
    display: grid;
    gap: var(--espacio-1);
    margin: var(--espacio-2) 0 0;
    padding: 0;
    list-style: none;
}

.forma-pago__historial li {
    display: grid;
}
/* #endregion */

/* #region 15. El Resumen del socio (rehecho el 2 nov 2026): el dinero, lo pendiente y lo suyo, a todo el ancho */
/* 1. El dinero: una fila de cifras del mismo tamaño, cada una con su color de estado a la izquierda. */
.lo-suyo__dinero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-6);
}

.lo-suyo__dinero[hidden] {
    display: none;
}

.lo-suyo-cifra {
    --cifra-color: var(--rs-azul);
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
    min-width: 0;
    padding: var(--espacio-4);
    border: 1px solid var(--rs-borde-tarjeta);
    border-left: 3px solid var(--cifra-color);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-1);
    color: var(--rs-texto);
    text-decoration: none;
    transition: background-color var(--duracion-hover) var(--curva);
}

a.lo-suyo-cifra:hover,
a.lo-suyo-cifra:focus-visible {
    background: var(--rs-hover);
    color: var(--rs-texto);
}

.lo-suyo-cifra--exito { --cifra-color: var(--rs-exito); }
.lo-suyo-cifra--aviso { --cifra-color: var(--rs-aviso); }
.lo-suyo-cifra--peligro { --cifra-color: var(--rs-peligro); }

.lo-suyo-cifra__titulo {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

.lo-suyo-cifra__titulo .icono {
    width: 16px;
    height: 16px;
    color: var(--cifra-color);
}

.lo-suyo-cifra__valor {
    font-family: var(--fuente-display);
    font-size: 1.375rem;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    /* Una cifra con su fecha («120,00 € el 22 de noviembre») parte en dos líneas, nunca se sale de su caja. */
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.lo-suyo-cifra--peligro .lo-suyo-cifra__valor {
    color: var(--rs-peligro-texto);
}

.lo-suyo-cifra__detalle {
    overflow: hidden;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* «Cobrárselo todo en el Mostrador»: el único botón del Resumen, abajo de su cifra. */
.lo-suyo-cifra__accion {
    align-self: flex-start;
    margin-top: var(--espacio-2);
}

.lo-suyo-cifra__enlace {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: auto;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    text-decoration: none;
}

.lo-suyo-cifra__enlace:hover {
    color: var(--marca-acento);
}

/* En el móvil, de dos en dos y más juntas: las cuatro a la vista sin bajar tanto. */
@media (max-width: 599px) {
    .lo-suyo__dinero {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--espacio-2);
    }

    .lo-suyo-cifra {
        padding: var(--espacio-3);
    }

    .lo-suyo-cifra__valor {
        font-size: 1.125rem;
    }

    /* «Cobrárselo todo…» a lo ancho de su cifra, que ocupa la fila entera. */
    .lo-suyo-cifra[data-casilla="deuda"] {
        grid-column: 1 / -1;
    }
}

/* 2 y 3. Lo pendiente y lo suyo, lado a lado en pantallas anchas; uno debajo del otro en las estrechas. */
.lo-suyo__columnas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--espacio-6);
    align-items: start;
}

@media (max-width: 1100px) {
    .lo-suyo__columnas {
        grid-template-columns: minmax(0, 1fr);
    }
}

.lo-suyo__bloque h3 {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0 0 var(--espacio-3);
    font-size: var(--texto-base);
    font-weight: 700;
}

.lo-suyo__cuantos {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--radio-pildora);
    background: color-mix(in srgb, var(--rs-aviso) 18%, transparent);
    color: var(--rs-aviso-texto);
    font-size: var(--texto-pequeno);
    font-variant-numeric: tabular-nums;
}

.lo-suyo__cuantos[hidden] {
    display: none;
}

.lo-suyo__nada {
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

/* Cada cosa pendiente, una línea: su icono en su círculo de color, qué es y de dónde, y la flecha. */
.lo-suyo__pendientes {
    display: grid;
    margin: 0;
    padding: 0;
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-1);
    list-style: none;
}

.lo-suyo__pendientes[hidden] {
    display: none;
}

.lo-suyo__pendientes > li + li {
    border-top: 1px solid var(--rs-borde-sutil);
}

.lo-suyo-pendiente {
    --pendiente-color: var(--rs-aviso);
}

.lo-suyo-pendiente--peligro {
    --pendiente-color: var(--rs-peligro);
}

a.lo-suyo-pendiente,
.lo-suyo-pendiente > summary {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
    color: var(--rs-texto);
    text-decoration: none;
    list-style: none;
    cursor: pointer;
    transition: background-color var(--duracion-hover) var(--curva);
}

.lo-suyo-pendiente > summary::-webkit-details-marker {
    display: none;
}

a.lo-suyo-pendiente:hover,
a.lo-suyo-pendiente:focus-visible,
.lo-suyo-pendiente > summary:hover,
.lo-suyo-pendiente > summary:focus-visible {
    background: var(--rs-hover);
    color: var(--rs-texto);
}

.lo-suyo-pendiente__icono {
    display: grid;
    flex: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pendiente-color) 15%, transparent);
    color: var(--pendiente-color);
}

.lo-suyo-pendiente__icono .icono {
    width: 16px;
    height: 16px;
}

.lo-suyo-pendiente__textos {
    display: grid;
    flex: 1;
    gap: 1px;
    min-width: 0;
}

.lo-suyo-pendiente__textos strong {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lo-suyo-pendiente__textos small {
    overflow: hidden;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La flecha (a donde se arregla) o el chevron que gira (los eventos, que se abren). */
:is(a.lo-suyo-pendiente, .lo-suyo-pendiente > summary) > .icono:last-child {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--rs-texto-tenue);
    transition: transform var(--duracion-menu) var(--curva);
}

.lo-suyo-pendiente[open] > summary > .icono:last-child {
    transform: rotate(180deg);
}

/* Los eventos sin confirmar, dentro de su línea: cada uno con su fecha, sangrados bajo el icono. */
.lo-suyo-pendiente__eventos {
    display: grid;
    margin: 0;
    padding: 0 var(--espacio-4) var(--espacio-3) calc(var(--espacio-4) + 2rem + var(--espacio-3));
    list-style: none;
}

.lo-suyo-pendiente__eventos a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espacio-3);
    padding: var(--espacio-1) var(--espacio-2);
    margin: 0 calc(-1 * var(--espacio-2));
    border-radius: var(--radio-sm);
    color: var(--rs-texto);
    font-size: var(--texto-etiqueta);
    text-decoration: none;
}

.lo-suyo-pendiente__eventos a:hover,
.lo-suyo-pendiente__eventos a:focus-visible {
    background: var(--rs-hover);
    color: var(--marca-acento);
}

.lo-suyo-pendiente__eventos span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lo-suyo-pendiente__eventos small {
    flex: none;
    color: var(--rs-texto-tenue);
    font-variant-numeric: tabular-nums;
}

/* Lo suyo: las casillas de lo-tuyo.css, de dos en dos dentro de su columna. */
.lo-suyo__casillas {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
}
/* #endregion */

/* #region 16. «Avisos», el menú de arriba y la cuenta del banco (9 nov 2026) */
/* La cajita de «Avisos» es un botón: se abre su explicación debajo. */
button.registro-casilla {
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

button.registro-casilla:hover {
    border-color: var(--rs-borde-fuerte);
}

button.registro-casilla:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

button.registro-casilla strong::after {
    content: " ›";
    opacity: 0.6;
}

.ficha-llegan {
    display: grid;
    gap: var(--espacio-3);
    margin: 0 0 var(--espacio-4);
    padding: var(--espacio-4);
    border: 1px solid var(--rs-borde);
    border-left: 4px solid var(--rs-exito);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-1);
}

.ficha-llegan[hidden] {
    display: none;
}

.ficha-llegan--parcial {
    border-left-color: var(--rs-aviso);
}

.ficha-llegan--mal {
    border-left-color: var(--rs-peligro);
}

.ficha-llegan__titulo {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    font-weight: 600;
}

.ficha-llegan__titulo .icono {
    flex: none;
    width: 18px;
    height: 18px;
}

.ficha-llegan__canales {
    display: grid;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ficha-llegan__canal {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    line-height: 1.45;
}

.ficha-llegan__canal .icono {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.ficha-llegan__canal--bien .icono { color: var(--rs-exito); }
.ficha-llegan__canal--aviso .icono { color: var(--rs-aviso); }
.ficha-llegan__canal--mal .icono { color: var(--rs-peligro); }

.ficha-llegan__botones,
.cuenta-banco__botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

/* El menú de arriba: dar de baja, de alta, borrar o crear otro. */
.ficha-mas {
    display: inline-block;
}

.ficha-mas[hidden] {
    display: none;
}

.ficha-mas > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
}

.ficha-mas .menu-desplegable__panel {
    min-width: 15rem;
}

/* La cuenta del banco: tapada, con su titular y desde cuándo. */
.cuenta-banco__actual {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin: 0 0 var(--espacio-3);
}

.cuenta-banco__actual > .icono {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--marca-acento);
}

.cuenta-banco__actual > span {
    display: grid;
    gap: 2px;
}

.cuenta-banco__actual small {
    color: var(--rs-texto-tenue);
}

.cuenta-banco__actual--sin {
    color: var(--rs-texto-secundario);
}

.cuenta-banco__editar {
    display: grid;
    gap: var(--espacio-3);
    margin-top: var(--espacio-3);
}

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

/* #endregion */

/* #region Dejarle entrado en su móvil (migración 0342) */
.registro-movil .boton {
    flex-shrink: 0;
}

/* La ventana del QR: grande, para la tablet o el ordenador de la sede. */
.acceso-movil {
    width: min(560px, calc(100vw - 32px));
}

.acceso-movil__cuerpo {
    display: grid;
    justify-items: center;
    gap: var(--espacio-3);
    text-align: center;
}

.acceso-movil__cuerpo[hidden] {
    display: none;
}

.acceso-movil__paso {
    font-size: 1.05rem;
    margin: 0;
}

/* Fondo blanco siempre: la cámara lee mejor un QR oscuro sobre blanco, también con el tema oscuro. */
.acceso-movil__qr {
    background: #FFFFFF;
    padding: var(--espacio-4);
    border-radius: var(--radio-lg);
    line-height: 0;
}

.acceso-movil__qr svg,
.acceso-movil__qr img {
    width: min(320px, 70vw);
    height: auto;
}

.acceso-movil__reloj {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.acceso-movil__codigo-texto {
    margin: 0;
    color: var(--rs-texto-secundario);
}

.acceso-movil__codigo {
    margin: 0;
    font-family: var(--fuente-mono);
    font-size: 2rem;
    letter-spacing: 0.12em;
    font-weight: 700;
}

/* Caducado: el QR se apaga para que nadie lo intente. */
.acceso-movil__cuerpo--caducado .acceso-movil__qr,
.acceso-movil__cuerpo--caducado .acceso-movil__codigo {
    opacity: 0.15;
    filter: blur(3px);
}

.acceso-movil__cuerpo--caducado .acceso-movil__reloj {
    color: var(--rs-peligro, #E5484D);
}

.acceso-movil__listo {
    display: grid;
    justify-items: center;
    gap: var(--espacio-2);
    text-align: center;
    padding: var(--espacio-6) 0;
}

.acceso-movil__listo[hidden] {
    display: none;
}

.acceso-movil__listo-icono .icono {
    width: 64px;
    height: 64px;
    color: var(--rs-exito);
}

.acceso-movil__listo-titulo {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}
/* #endregion */