/*
 * El Museo en el panel de la Junta (/gestion/museo, 28 oct 2026,
 * docs/museo.md): las salas en tarjetas con el color de sus paredes y su
 * primera foto; dentro de una, las fotos (para soltar o elegir) y el libro
 * de honor. Solo lo carga plantillas/gestion/museo.php.
 *
 *  1. El color de las paredes
 *  2. Las salas
 *  3. Una sala: fotos
 *  4. Una sala: libro de honor
 *  5. La ventana
 *  6. La vista previa
 */

/* #region 1. El color de las paredes (los mismos que museo-muro.js) */
.museo-g-sala,
.museo-g-pared {
    --pared: #5b1620;
}

[data-estilo="esmeralda"] { --pared: #14473a; }
[data-estilo="azul"] { --pared: #1b3263; }
[data-estilo="piedra"] { --pared: #7d7465; }
[data-estilo="madera"] { --pared: #6a4428; }
[data-estilo="marca"] { --pared: color-mix(in oklab, var(--marca-principal) 55%, #0b0a0a); }
/* #endregion */

/* #region 2. Las salas */
/* La línea de arriba de cada bloque: lo que dice a la izquierda y su botón a la derecha. */
.museo-g-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2) var(--espacio-4);
}

.museo-g-cabecera > p {
    margin: 0;
}

.museo-g-cabecera--salas {
    margin-bottom: var(--espacio-4);
}

/* Las salas como las ve el socio (3 nov 2026): su puerta en grande, con el color de su pared y su primera foto. */
.museo-g-salas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: var(--espacio-5) var(--espacio-4);
}

.museo-g-sala {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    gap: var(--espacio-3) var(--espacio-2);
    align-content: start;
}

/* La puerta de la sala: arco blanco, su pared y la foto con marco dorado; toda ella abre la sala. */
.museo-g-sala__vista {
    position: relative;
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3.4;
    padding: 0;
    overflow: hidden;
    border: 6px solid #e9dfc8;
    border-bottom: 0;
    border-radius: 50% 50% 6px 6px / 30% 30% 6px 6px;
    background:
        radial-gradient(ellipse 70% 55% at 50% 22%, rgba(255, 232, 180, 0.42), transparent 70%),
        linear-gradient(transparent 82%, rgba(0, 0, 0, 0.28)),
        var(--pared);
    color: #f4e3b0;
    cursor: pointer;
    box-shadow: 0 0 0 1px #b9aa88, var(--sombra-sm);
    transition: transform var(--duracion-hover) var(--curva), box-shadow var(--duracion-hover) var(--curva);
}

.museo-g-sala__vista:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px #b9aa88, var(--sombra-md);
}

.museo-g-sala__vista:focus-visible {
    outline: none;
    box-shadow: 0 0 0 1px #b9aa88, var(--anillo-foco);
}

.museo-g-sala__vista img {
    width: 44%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 5px solid #c99a3d;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.5);
}

.museo-g-sala__vista .icono {
    width: 40px;
    height: 40px;
}

/* El ala (Historia, Hoy…), como una placa al pie de la puerta. */
.museo-g-sala__vista .museo-g-etiqueta {
    position: absolute;
    bottom: var(--espacio-2);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.museo-g-sala__datos {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
}

.museo-g-sala__datos h3 {
    margin: 0;
    font-size: var(--texto-h3);
}

/* Su nombre también abre la sala: sin azul ni subrayado; al pasar, en el color de la asociación. */
.museo-g-sala__nombre {
    padding: 0;
    border: 0;
    background: none;
    color: var(--rs-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: color var(--duracion-hover) var(--curva);
}

.museo-g-sala__nombre:hover,
.museo-g-sala__nombre:focus-visible {
    color: var(--marca-acento);
}

.museo-g-sala__datos small {
    color: var(--rs-texto-secundario);
}

.museo-g-etiqueta {
    justify-self: start;
    padding: 1px 8px;
    border-radius: var(--radio-pildora);
    background: #e9dfc8;
    color: #4a3a1c;
    font-size: var(--texto-pequeno);
    font-weight: 600;
}

.museo-g-fuente {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--rs-exito-texto);
    font-size: var(--texto-pequeno);
}

.museo-g-fuente--apagada {
    color: var(--rs-aviso-texto);
}

.museo-g-fuente[hidden] {
    display: none;
}

.museo-g-fuente .icono {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.museo-g-sala__mas .menu-desplegable__panel {
    right: 0;
    left: auto;
    min-width: 12rem;
}

.museo-g-vacio {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-10) var(--espacio-4);
    border: 2px dashed var(--rs-borde);
    border-radius: var(--radio-xl);
    color: var(--rs-texto-secundario);
    text-align: center;
}

.museo-g-vacio .icono {
    width: 44px;
    height: 44px;
    color: var(--rs-oro);
}

.museo-g-vacio p {
    max-width: 52ch;
    margin: 0;
}
/* #endregion */

/* #region 3. Una sala: fotos */
.museo-g-sala-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-4);
    margin-bottom: var(--espacio-4);
}

.museo-g-sala-cabecera h2 {
    flex: 1;
    margin: 0;
}

.museo-g-acciones {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

/* Lo que trae sola la sala, una línea bajo el título: solo informa. */
.museo-g-sala-fuente {
    display: flex;
    margin: 0 0 var(--espacio-4);
}

/* La sala en 3D y sus fotos a la izquierda, el libro a la derecha; con menos ancho, uno debajo de otro. */
.museo-g-columnas,
.museo-g-columna {
    display: grid;
    gap: var(--espacio-4);
    align-items: start;
    min-width: 0;
}

@media (min-width: 1280px) {
    .museo-g-columnas {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }
}

.museo-g-columnas h3 {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
}

/* Cuántas hay, junto al título: dato discreto. */
.museo-g-columnas h3 .pestanas__contador {
    color: var(--rs-texto-tenue);
    font-weight: 500;
}

.museo-g-columnas h3 .pestanas__contador[hidden] {
    display: none;
}

.museo-g-soltar {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    margin: var(--espacio-3) 0;
    padding: var(--espacio-6) var(--espacio-4);
    border: 2px dashed var(--rs-borde-fuerte);
    border-radius: var(--radio-lg);
    color: var(--rs-texto-secundario);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--duracion-hover) ease, background var(--duracion-hover) ease;
}

.museo-g-soltar .icono {
    width: 32px;
    height: 32px;
    color: var(--rs-azul);
}

.museo-g-soltar strong {
    color: var(--rs-texto);
}

.museo-g-soltar input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.museo-g-soltar:hover,
.museo-g-soltar:focus-within,
.museo-g-soltar--encima {
    border-color: var(--rs-azul);
    background: var(--rs-azul-suave);
}

.museo-g-soltar--ocupado {
    opacity: 0.6;
    pointer-events: none;
}

.museo-g-subiendo {
    margin: 0 0 var(--espacio-3);
    color: var(--rs-azul-texto);
    font-weight: 600;
}

.museo-g-fotos {
    display: grid;
    /* De este ancho, «Cartela», las dos flechas y la papelera caben en una línea. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: var(--espacio-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.museo-g-foto {
    display: grid;
    gap: var(--espacio-1);
    padding: var(--espacio-2);
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

.museo-g-foto__imagen {
    padding: 0;
    border: 3px solid #c99a3d;
    background: #1b1712;
    cursor: zoom-in;
}

.museo-g-foto__imagen img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.museo-g-foto__cartela {
    min-height: 2.4em;
    font-size: var(--texto-pequeno);
    line-height: 1.25;
}

.museo-g-falta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--rs-aviso-texto);
}

.museo-g-falta .icono {
    width: 14px;
    height: 14px;
}

.museo-g-foto__acciones {
    display: flex;
    align-items: center;
    gap: 2px;
}

.museo-g-foto__acciones .boton--contorno {
    margin-right: auto;
}

.museo-g-solas {
    margin-top: var(--espacio-4);
    padding-top: var(--espacio-3);
    border-top: 1px solid var(--rs-borde-sutil);
}

.museo-g-solas p {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0 0 var(--espacio-2);
}

.museo-g-solas .icono {
    width: 16px;
    height: 16px;
    color: var(--rs-oro);
}

.museo-g-muestra {
    display: flex;
    gap: var(--espacio-2);
    overflow-x: auto;
}

.museo-g-muestra img {
    flex: none;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radio-sm);
    opacity: 0.85;
}
/* #endregion */

/* #region 3b. Qué cuadros cuelgan en la sala 3D (migración 0364): el selector, el «12 de 24» y la estrella */
.museo-g-colgar {
    display: grid;
    gap: var(--espacio-2);
    margin: var(--espacio-3) 0 var(--espacio-3);
    padding: var(--espacio-3);
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

.museo-g-colgar legend {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    padding: 0 var(--espacio-1);
    font-weight: 600;
}

.museo-g-colgar legend .icono {
    width: 16px;
    height: 16px;
    color: var(--rs-oro);
}

.museo-g-colgar__opciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--espacio-2);
}

.museo-g-colgar__opcion {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
    padding: var(--espacio-2) var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: var(--rs-superficie);
    cursor: pointer;
}

.museo-g-colgar__opcion:has(input:checked) {
    border-color: var(--rs-azul);
    background: var(--rs-azul-suave);
}

.museo-g-colgar__opcion span {
    display: grid;
}

.museo-g-colgar__opcion small {
    color: var(--rs-texto-secundario);
}

.museo-g-colgar__cuenta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-1) var(--espacio-3);
    margin: 0;
    font-size: var(--texto-pequeno);
    color: var(--rs-texto-secundario);
}

.museo-g-colgar__cuenta strong {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--espacio-2);
    border-radius: 999px;
    background: #2a2116;
    color: #f3d58a;
    font-size: var(--texto-pequeno);
    white-space: nowrap;
}

.museo-g-colgar__cuenta strong .icono {
    width: 14px;
    height: 14px;
}

.museo-g-colgar__cuenta--lleno strong {
    background: var(--rs-aviso-suave);
    color: var(--rs-aviso-texto);
}

/* En qué orden van las fotos: por fecha o el de la Junta, y «Ordenar por fecha» (migración 0435). */
.museo-g-orden {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2) var(--espacio-3);
    margin-block: var(--espacio-3);
}

.museo-g-orden__estado {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
}

.museo-g-orden__estado .icono {
    flex: none;
    width: 16px;
    height: 16px;
}

.museo-g-foto__marco {
    position: relative;
}

/* La estrella: de un toque se cuelga o se quita de la sala 3D. Grande para el dedo. */
.museo-g-foto__colgar {
    position: absolute;
    top: 6px;
    left: 6px;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 2px solid rgb(255 255 255 / 0.85);
    border-radius: 50%;
    background: rgb(20 16 12 / 0.6);
    color: #fff;
    cursor: pointer;
}

.museo-g-foto__colgar .icono {
    width: 20px;
    height: 20px;
}

.museo-g-foto__colgar[aria-pressed="true"] {
    border-color: #f3d58a;
    background: #c99a3d;
    color: #1b1712;
}

.museo-g-foto__colgar[aria-pressed="true"] .icono {
    fill: currentColor;
}

.museo-g-foto__colgar[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

.museo-g-foto__colgar:focus-visible {
    outline: 3px solid #f3d58a;
    outline-offset: 2px;
}

/* Lo que cuelga de verdad: su número en la sala (el 1, al fondo). */
.museo-g-foto__cuelga {
    position: absolute;
    bottom: 6px;
    left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgb(20 16 12 / 0.78);
    color: #f3d58a;
    font-size: var(--texto-pequeno);
    font-weight: 600;
    pointer-events: none;
}

.museo-g-foto--colgada {
    border-color: #c99a3d;
    box-shadow: 0 0 0 1px #c99a3d;
}

.museo-g-previa__nota {
    margin: var(--espacio-2) 0 0;
}
/* #endregion */

/* #region 4. Una sala: libro de honor */
.museo-g-linea {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--espacio-2);
    margin: var(--espacio-3) 0;
}

.museo-g-linea .campo {
    margin: 0;
}

.museo-g-buscar {
    margin-bottom: var(--espacio-2);
}

.museo-g-buscar input {
    width: 100%;
}

/*
 * Se desplaza por dentro, con un degradado al pie para que se vea que sigue
 * (no un nombre cortado de golpe). El hueco de abajo deja el último nombre
 * fuera del degradado al llegar al final.
 */
.museo-g-lineas {
    display: grid;
    max-height: clamp(22rem, calc(100dvh - 22rem), 52rem);
    margin: 0;
    padding: 0 0 var(--espacio-8);
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    -webkit-mask-image: linear-gradient(#000 calc(100% - var(--espacio-8)), transparent);
    mask-image: linear-gradient(#000 calc(100% - var(--espacio-8)), transparent);
}

.museo-g-linea-fila {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-2) 0;
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.museo-g-linea-fila__periodo {
    color: var(--tono-seccion);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.museo-g-linea-fila__nombre {
    display: grid;
    min-width: 0;
}

.museo-g-linea-fila__nombre small {
    color: var(--rs-texto-secundario);
    font-style: italic;
}

.museo-g-linea-fila__acciones {
    display: inline-flex;
}

.museo-g-solas-texto {
    margin: var(--espacio-3) 0 0;
}

@media (max-width: 640px) {
    .museo-g-linea {
        grid-template-columns: 1fr 1fr;
    }

    .museo-g-linea .campo:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .museo-g-linea-fila {
        grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    }
}
/* #endregion */

/* #region 5. La ventana */
.museo-g-idiomas {
    margin: var(--espacio-2) 0 var(--espacio-4);
}

.museo-g-idiomas summary {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    color: var(--rs-azul-texto);
    font-weight: 600;
    cursor: pointer;
}

.museo-g-opciones {
    display: grid;
    gap: var(--espacio-2);
    margin: 0 0 var(--espacio-4);
    padding: 0;
    border: 0;
}

.museo-g-opciones legend {
    margin-bottom: var(--espacio-2);
    font-weight: 600;
}

.museo-g-opcion {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
    padding: var(--espacio-2) var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    cursor: pointer;
}

.museo-g-opcion:has(input:checked) {
    border-color: var(--rs-azul);
    background: var(--rs-azul-suave);
}

.museo-g-opcion span {
    display: grid;
}

.museo-g-opcion small {
    color: var(--rs-texto-secundario);
}

.museo-g-paredes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: var(--espacio-2);
}

.museo-g-pared {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: var(--espacio-2);
    border: 2px solid transparent;
    border-radius: var(--radio-md);
    font-size: var(--texto-pequeno);
    cursor: pointer;
}

.museo-g-pared input {
    position: absolute;
    opacity: 0;
}

.museo-g-pared__muestra {
    width: 52px;
    height: 40px;
    border: 3px solid #c99a3d;
    border-radius: 3px;
    background:
        radial-gradient(ellipse 70% 60% at 50% 20%, rgba(255, 232, 180, 0.35), transparent 70%),
        var(--pared);
}

.museo-g-pared:has(input:checked) {
    border-color: var(--rs-azul);
    background: var(--rs-azul-suave);
}

.museo-g-pared:has(input:focus-visible) {
    box-shadow: var(--anillo-foco);
}

.museo-g-ventana-foto {
    display: block;
    max-width: 100%;
    max-height: 200px;
    margin: 0 auto var(--espacio-3);
    border: 4px solid #c99a3d;
}
/* #endregion */

/* #region 6. La vista previa: el mismo muro del museo (museo-muro.css) */
.museo-g-previa__escena {
    position: relative;
    height: clamp(300px, 42vh, 460px);
    margin-top: var(--espacio-3);
    overflow: hidden;
    border-radius: var(--radio-lg);
    background: #050404;
}

/* Es la pared tal cual, no un título de tarjeta. */
.app-panel .contenido-gestion .tarjeta .museo-g-previa__escena h2 {
    font-family: var(--letra-museo);
    font-size: clamp(2.4rem, 7.4cqi, 9rem);
    letter-spacing: -0.01em;
}
/* #endregion */

/* #region Ajustes: el nombre, el año y cómo queda en la entrada, al momento */
.museo-ajustes__cuerpo {
    display: grid;
    gap: var(--espacio-5);
    margin: var(--espacio-4) 0;
}

.museo-ajustes__campos {
    display: grid;
    gap: var(--espacio-4);
    align-content: start;
    min-width: 0;
}

.museo-ajustes__campos .campo {
    margin: 0;
}

.contenido-gestion .museo-ajustes__campos .campo > input[type="number"] {
    max-width: 11rem;
}

/* Cómo queda la entrada: la misma fachada que ven los socios (museo-fachada.css), al momento. */
.museo-ajustes__muestra {
    display: grid;
    place-items: end center;
    min-height: 15rem;
    padding: var(--espacio-4) var(--espacio-4) 0;
    overflow: hidden;
    border-radius: var(--radio-lg);
}

.museo-ajustes__muestra .museo-fachada3d {
    --fachada-cielo: transparent;
    width: min(26rem, 100%);
}

@media (min-width: 1100px) {
    .museo-ajustes__cuerpo {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}
/* #endregion */