/*
 * «Lo mío», cada cosa como lo que es (socio/objetos.js): en la portada y en la página de «Lo mío». Sus colores son
 * los del objeto, no los del tema, así que se ven igual en claro y en oscuro; el monedero, del color de la asociación.
 * Desde el 7 nov 2026, cada casilla con el objeto de su pantalla: convocatoria, prenda, chapa, nombramiento y nota;
 * la prenda y la chapa, en la línea del pie para no quitar sitio al texto, y las filas parejas en la portada.
 */

/* #region Las piezas */
.objetos-socio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 18px;
}

/* En la portada, filas parejas (--columnas, de columnasPara en objetos.js): 8 casillas, 4 y 4, nunca 5 y 3. Si no
 * caben, la rejilla baja las que haga falta, igual que sin él. */
.objetos-socio--parejas {
    grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 16rem), calc((100% - (var(--columnas, 5) - 1) * 18px) / var(--columnas, 5) - 1px)), 1fr));
}

.objeto {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 210px;
    padding: 24px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 240ms var(--curva);
}

.objeto:hover {
    text-decoration: none;
    transform: translateY(-5px);
}

.objeto:focus-visible {
    outline: 2px solid var(--marca-acento);
    outline-offset: 3px;
}

.objeto__de {
    font-size: 14px;
    font-weight: 600;
}

.objeto__valor {
    margin-top: var(--espacio-2);
    font-family: var(--fuente-display);
    font-size: clamp(2rem, 2.8vw, 3rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.objeto__pie {
    margin-top: auto;
    padding-top: var(--espacio-3);
    font-size: 15px;
}

.objeto__pie-texto {
    min-width: 0;
}

/* En el móvil, una casilla debajo de otra: sin tanto alto vacío. */
@media (max-width: 520px) {
    .objeto {
        min-height: 160px;
        padding: 20px;
    }
}

/* El monedero: de piel del color de la asociación, con su costura y su broche. */
.objeto--monedero {
    border-radius: 22px 22px 26px 26px;
    background: linear-gradient(150deg, oklch(from var(--marca-principal) 0.36 min(c, 0.1) h), oklch(from var(--marca-principal) 0.2 min(c, 0.06) h));
    box-shadow: inset 0 0 0 7px rgb(0 0 0 / 0.14), inset 0 1px 0 8px rgb(255 255 255 / 0.05);
    color: #FFFFFF;
}

.objeto--monedero:hover {
    color: #FFFFFF;
}

.objeto--monedero::before {
    content: "";
    position: absolute;
    inset: 11px;
    z-index: -1;
    border: 1.5px dashed rgb(255 255 255 / 0.26);
    border-radius: 16px;
}

.objeto--monedero::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 62px;
    height: 56px;
    transform: translateY(-50%);
    border-radius: 28px 0 0 28px;
    background:
        radial-gradient(circle at 26px 50%, #FFF3C7 0, #C9973B 11px, transparent 11.5px),
        oklch(from var(--marca-principal) 0.17 min(c, 0.05) h);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}

.objeto--monedero .objeto__de,
.objeto--monedero .objeto__pie {
    color: rgb(255 255 255 / 0.82);
}

.objeto--monedero .objeto__pie {
    max-width: 70%;
}

/* El montepío: lo que lleva guardado, en monedas. */
.objeto--hucha {
    border-radius: 22px;
    background: linear-gradient(155deg, #F6DE9B, #D3A349);
    color: #2E2103;
}

.objeto--hucha:hover {
    color: #2E2103;
}

.objeto__monedas {
    position: absolute;
    right: 14px;
    bottom: 12px;
    z-index: -1;
    width: 118px;
    height: auto;
}

.objeto--hucha .objeto__pie {
    max-width: calc(100% - 118px);
}

/* Un papel: lo que tiene que ver con la asociación, con la esquina doblada. La convocatoria, también. */
.objeto--papel,
.objeto--convocatoria {
    border-radius: 6px;
    background: #F6F1E4;
    box-shadow: 0 16px 30px rgb(0 0 0 / 0.2);
    color: #1D1A12;
    clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}

.objeto--papel:hover,
.objeto--convocatoria:hover {
    color: #1D1A12;
}

.objeto--papel::after,
.objeto--convocatoria::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 34px;
    height: 34px;
    background: linear-gradient(225deg, transparent 50%, #D8CFB6 50%);
}

/* El título, sin meterse bajo la esquina doblada. */
.objeto--papel .objeto__de,
.objeto--convocatoria .objeto__de {
    padding-right: 28px;
}

.objeto--papel .objeto__de,
.objeto--convocatoria .objeto__de,
.objeto--material .objeto__de,
.objeto--prenda .objeto__de,
.objeto--nombramiento .objeto__de,
.objeto--nota .objeto__de {
    color: #6D6552;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.objeto--papel .objeto__valor,
.objeto--convocatoria .objeto__valor,
.objeto--material .objeto__valor,
.objeto--prenda .objeto__valor,
.objeto--nombramiento .objeto__valor,
.objeto--nota .objeto__valor {
    font-size: clamp(1.45rem, 1.9vw, 2rem);
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.12;
}

.objeto--papel .objeto__pie,
.objeto--convocatoria .objeto__pie,
.objeto--material .objeto__pie,
.objeto--prenda .objeto__pie,
.objeto--nombramiento .objeto__pie,
.objeto--nota .objeto__pie {
    color: #4A4434;
}

/* Un partido: su hora, en un marcador. */
.objeto--marcador {
    border-radius: 22px;
    background: #0B0D11;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
    color: #FFFFFF;
}

.objeto--marcador:hover {
    color: #FFFFFF;
}

.objeto--marcador .objeto__valor {
    color: #FFC84A;
    font-size: clamp(3rem, 4.4vw, 4.6rem);
    letter-spacing: -0.02em;
    text-shadow: 0 0 22px rgb(255 200 74 / 0.4);
}

.objeto--marcador .objeto__de,
.objeto--marcador .objeto__pie {
    color: rgb(255 255 255 / 0.78);
}

/* Con letra («Puesto 2 de 3»): el mismo marcador, con la cifra más pequeña para que quepa la frase. */
.objeto--marcador-texto .objeto__valor {
    font-size: clamp(2rem, 2.6vw, 2.8rem);
    line-height: 1.08;
}
/* #endregion */

/* #region La convocatoria: el día, en su hoja de calendario */
.objeto--convocatoria .objeto__pie {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
}

.objeto__calendario {
    display: grid;
    flex: none;
    grid-template-rows: auto 1fr;
    width: 3.6rem;
    height: 3.8rem;
    overflow: hidden;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 6px 12px rgb(0 0 0 / 0.12);
    color: #1B1A17;
    text-align: center;
}

.objeto__calendario small {
    padding: 2px 0;
    background: var(--marca-boton);
    color: var(--marca-boton-texto, #FFFFFF);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.objeto__calendario b {
    display: grid;
    place-items: center;
    font-family: var(--fuente-display);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}
/* #endregion */

/* #region El material: la prenda que tiene, como en «Mi material», y la chapa con su número */
.objeto--prenda,
.objeto--material {
    border-radius: 18px;
    background: linear-gradient(160deg, #F4EFE4, #E8E0CF);
    box-shadow: 0 16px 30px rgb(0 0 0 / 0.16);
    color: #1D1A12;
}

.objeto--prenda:hover,
.objeto--material:hover {
    color: #1D1A12;
}

/* Abajo, el texto a la izquierda y el objeto a la derecha, en grande: el texto de arriba tiene todo el ancho. */
.objeto--prenda .objeto__pie,
.objeto--material .objeto__pie {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--espacio-3);
}

.objeto__prenda {
    display: grid;
    flex: none;
    place-items: center;
    width: 112px;
    height: 120px;
    margin: -10px -8px -10px auto;
}

/* Con su foto, la foto en su marco; el dibujo, suelto, con su sombra. */
.objeto__prenda:has(.foto-prenda) {
    margin: 0 0 0 auto;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 6px 14px rgb(0 0 0 / 0.2);
}

.objeto__prenda .inicial-prenda {
    font-size: 4rem;
}

/* La chapa: latón, con sus dos remaches, igual que en «Mi material». */
.objeto__chapa {
    position: relative;
    display: grid;
    flex: none;
    place-content: center;
    justify-items: center;
    min-width: 100px;
    height: 68px;
    margin-left: auto;
    padding-inline: 18px;
    border-radius: 7px;
    background: linear-gradient(135deg, #F2DC9A, #D6AE55 45%, #B88A32 75%, #E5C678);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5), inset 0 0 0 3px rgb(90 60 10 / 0.25), 0 4px 9px rgb(0 0 0 / 0.25);
    color: #3A2A0C;
    transform: rotate(-4deg);
}

.objeto__chapa::before,
.objeto__chapa::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFF3C9, #8A6A22);
    box-shadow: 0 0 0 1px rgb(90 60 10 / 0.4);
}

.objeto__chapa::before {
    left: 7px;
}

.objeto__chapa::after {
    right: 7px;
}

.objeto__chapa small {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.objeto__chapa b {
    font-family: var(--fuente-display);
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-shadow: 0 1px 0 rgb(255 255 255 / 0.5);
    white-space: nowrap;
}

@media (max-width: 520px) {
    .objeto__prenda {
        width: 92px;
        height: 100px;
    }
}
/* #endregion */

/* #region Un cargo: su nombramiento, enmarcado como en «Cargos de la fiesta» */
.objeto--nombramiento {
    border-radius: 6px;
    outline: 2px solid var(--marca-detalle);
    outline-offset: -9px;
    background:
        radial-gradient(90% 70% at 50% 0, color-mix(in srgb, var(--marca-detalle) 16%, transparent), transparent 70%),
        #FBF8F0;
    box-shadow: 0 16px 30px rgb(0 0 0 / 0.2);
    color: #1D1A12;
}

.objeto--nombramiento:hover {
    color: #1D1A12;
}

.objeto--nombramiento::after {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: -1;
    border: 1px solid color-mix(in srgb, var(--marca-detalle) 55%, transparent);
    border-radius: 2px;
    pointer-events: none;
}

/* Como un nombramiento de verdad: todo centrado y, en medio, el escudo de la asociación. */
.objeto--nombramiento {
    align-items: center;
    padding-inline: 30px;
    text-align: center;
}

.objeto--nombramiento .objeto__valor {
    text-wrap: balance;
}

.objeto--nombramiento .objeto__pie {
    margin-top: 0;
}

/* El escudo de la asociación, como el sello de un nombramiento: su logo tal cual o, sin él, sus iniciales en su color. */
.objeto__escudo {
    display: grid;
    place-items: center;
    height: 64px;
    margin-block: auto;
}

.objeto__escudo img {
    max-width: 96px;
    max-height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 3px 5px rgb(0 0 0 / 0.18));
}

.objeto__escudo--iniciales {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--marca-boton);
    box-shadow: 0 0 0 3px #FBF8F0, 0 0 0 4px var(--marca-detalle), 0 4px 10px rgb(0 0 0 / 0.2);
    color: var(--marca-boton-texto, #FFFFFF);
    font-family: var(--fuente-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
/* #endregion */

/* #region La ayuda que se busca: una nota en el tablón, con su chincheta */
.objeto--nota {
    border-radius: 3px;
    background: linear-gradient(175deg, #FFF4B8, #FBE78E);
    box-shadow: 0 14px 26px rgb(0 0 0 / 0.18);
    color: #2B2408;
    transform: rotate(-1.2deg);
}

.objeto--nota:hover {
    color: #2B2408;
    transform: translateY(-5px) rotate(-1.2deg);
}

.objeto--nota::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 16px;
    height: 16px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--marca-boton) 45%, #FFFFFF), var(--marca-boton) 60%);
    box-shadow: 0 3px 5px rgb(0 0 0 / 0.35);
}

.objeto--nota .objeto__de {
    margin-top: var(--espacio-2);
}
/* #endregion */