/*
 * Cómo se ve una prenda (imagen-prenda.js, migración 0333): su foto, su dibujo o la inicial de su nombre.
 * Los dibujos van con los dos colores de cada asociación: el principal, entre el de sus botones y su versión
 * legible en claro y en oscuro, para que no se apague ni pierda su tono; y el secundario para los detalles
 * (--marca-detalle). Lo usan el socio y la Junta.
 */

/* #region Los dibujos */
.dibujo-prenda {
    --prenda: color-mix(in oklch, var(--marca-boton) 55%, var(--marca-acento));
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 7px 9px rgb(0 0 0 / 0.22));
}

.dibujo-prenda .c1 {
    fill: var(--prenda);
}

.dibujo-prenda .c2 {
    fill: var(--marca-detalle);
}

.dibujo-prenda .s {
    fill: #000000;
    opacity: 0.2;
}

.dibujo-prenda .b {
    fill: #FFFFFF;
}

.dibujo-prenda .l1 {
    fill: none;
    stroke: var(--prenda);
    stroke-width: 2.4;
    stroke-linecap: round;
}

.dibujo-prenda .l2 {
    fill: none;
    stroke: var(--marca-detalle);
    stroke-width: 2.4;
}
/* #endregion */

/* #region Su foto */
.foto-prenda {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* #endregion */

/* #region Su inicial */
.inicial-prenda {
    color: var(--marca-acento);
    font-family: var(--fuente-display);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}
/* #endregion */