/*
 * Chapas de personaje de los niños (13 nov 2026, migración 0430, docs/puerta.md): el personaje en su
 * círculo, la tarjeta de la ficha del evento, la rejilla para elegirlo y la chapa en la cuidadora y la puerta.
 */

/* #region El personaje en un círculo con el aro del color del evento */
.avatar-personaje {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--avatar-personaje-lado, 56px);
    height: var(--avatar-personaje-lado, 56px);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #fff 0, #fdf1ea 70%);
    box-shadow: inset 0 0 0 3px var(--avatar-personaje-color, #6b7c94);
}

.avatar-personaje img {
    width: 74%;
    height: 74%;
    object-fit: contain;
}
/* #endregion */

/* #region «¿Cómo se reconoce a los niños?» en la ficha del evento */
.identificar-ninos {
    margin: var(--espacio-4) 0 0;
    padding: 0;
    border: 0;
}

.identificar-ninos__opciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--espacio-3);
}
/* #endregion */

/* #region La tarjeta «Chapas de personaje» */
.chapas-evento__botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

.chapas-evento__imprimir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0 0 var(--espacio-4);
}

.chapas-evento__imprimir .ayuda-campo {
    flex-basis: 100%;
    margin: 0;
}

.chapas-evento__nino {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--espacio-3);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.chapas-evento__nino .pulseras-evento__quien {
    flex: 1;
}

.chapas-evento__nino:focus-visible {
    outline: 2px solid var(--marca-acento);
    outline-offset: 4px;
    border-radius: var(--radio-md);
}
/* #endregion */

/* #region La rejilla para elegir el personaje */
.chapas-elegir {
    width: min(36rem, calc(100vw - 2rem));
}

.chapas-elegir__caja h3 {
    margin: 0 0 var(--espacio-1);
}

.chapas-elegir__grupo {
    margin: var(--espacio-3) 0 var(--espacio-2);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.chapas-elegir__personajes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: var(--espacio-2);
}

.chapas-elegir__personaje {
    display: grid;
    justify-items: center;
    gap: var(--espacio-1);
    padding: var(--espacio-2) var(--espacio-1);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.chapas-elegir__personaje img {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
}

.chapas-elegir__personaje[aria-pressed="true"] {
    border: 3px solid var(--marca-acento);
    background: color-mix(in srgb, var(--marca-acento) 10%, transparent);
}

.chapas-elegir__hecho {
    min-height: 1.4em;
    margin: var(--espacio-3) 0 0;
    color: var(--rs-exito);
    font-weight: 600;
}

.chapas-elegir__botones {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--espacio-3);
}
/* #endregion */

/* #region Configuración → La puerta: los personajes */
.personajes-config__grupo {
    display: grid;
    gap: var(--espacio-2);
    margin: var(--espacio-3) 0;
}

.personajes-config__muestra {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1);
}

.personajes-config__muestra img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

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

.personajes-config__propio {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
}

.personajes-config__propio img {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: contain;
}

.personajes-config__propio span {
    flex: 1;
}

.personajes-config__nuevo {
    display: grid;
    gap: var(--espacio-2);
    margin-top: var(--espacio-3);
}
/* #endregion */

/* #region La chapa en la cuidadora y en la puerta */
.chapa-leida {
    display: flex;
    justify-content: center;
    filter: drop-shadow(0 8px 18px rgb(0 0 0 / 0.35));
}

.chapa-leida .chapa {
    width: min(210px, 60vw);
    height: auto;
}
/* #endregion */