/*
 * Carnets y títulos (23 oct 2026, migración 0213, docs/carnets-titulos.md):
 * la pantalla de la Junta, las ventanas que comparte con la ficha del socio
 * (acreditaciones-ventanas.js) y el bloque de la ficha.
 */

/* #region Sin tipos todavía */
.acreditaciones-vacio {
    display: grid;
    justify-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-6) var(--espacio-4);
    text-align: center;
}

.acreditaciones-vacio h2 {
    margin: 0;
    font-size: 1.125rem;
}

.acreditaciones-vacio p {
    max-width: 52ch;
    margin: 0;
    color: var(--rs-texto-secundario);
}

.acreditaciones-vacio__icono {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--rs-azul-suave);
    color: var(--rs-azul-texto);
}

.acreditaciones-vacio__botones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--espacio-2);
    margin-top: var(--espacio-2);
}
/* #endregion */

/* #region Los tipos y las cifras de colores */
.acreditaciones-tipos {
    margin-bottom: var(--espacio-2);
}

/* Cuántos tiene cada carnet (o, en rojo, cuántos piden algo): su pastilla, con los estilos aquí y no de la Tienda. */
.acreditaciones-tipos__numero {
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: var(--radio-pildora);
    background: var(--rs-cian-suave);
    color: var(--rs-cian-texto);
    font-size: var(--texto-pequeno);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tienda-filtro:has(.acreditaciones-tipos__numero) {
    padding-right: var(--espacio-2);
}

/* Alguno caducado o por comprobar: un aviso junto al nombre. */
.acreditaciones-tipos__aviso {
    display: inline-grid;
    color: var(--rs-peligro);
}

.acreditaciones-tipos__aviso .icono {
    width: 14px;
    height: 14px;
}

.acreditaciones-tipo-resumen {
    margin: 0 0 var(--espacio-3);
}

.acreditaciones-cifras {
    display: grid;
    /* Repartidas a lo ancho y en una fila (3 nov 2026). */
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-4);
}

.acreditaciones-cifra {
    display: grid;
    gap: 2px;
    padding: var(--espacio-3);
    border: 1px solid var(--rs-borde-tarjeta);
    border-left: 4px solid var(--rs-borde-fuerte);
    border-radius: var(--radio-md);
    background: var(--rs-fondo);
    color: var(--rs-texto);
    text-align: left;
    cursor: pointer;
}

.acreditaciones-cifra strong {
    font-size: 1.5rem;
    line-height: 1.1;
}

.acreditaciones-cifra span {
    color: var(--rs-texto-secundario);
    font-size: 0.875rem;
}

.acreditaciones-cifra:hover {
    background: var(--rs-hover);
}

.acreditaciones-cifra[aria-pressed="true"] {
    background: color-mix(in srgb, var(--marca-acento) 6%, var(--rs-superficie-1));
    box-shadow: inset 0 0 0 1px var(--marca-acento);
}

.acreditaciones-cifra--en_regla {
    border-left-color: var(--rs-exito);
}

.acreditaciones-cifra--pronto {
    border-left-color: var(--rs-aviso);
}

.acreditaciones-cifra--caducado,
.acreditaciones-cifra--rechazado {
    border-left-color: var(--rs-peligro);
}

.acreditaciones-cifra--por_comprobar {
    border-left-color: var(--rs-azul);
}
/* #endregion */

/* #region La lista */
.acreditaciones-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
    margin-bottom: var(--espacio-3);
}

.acreditaciones-barra input[type="search"] {
    flex: 1 1 16rem;
    max-width: 24rem;
}

.acreditaciones-barra__total {
    color: var(--rs-texto-secundario);
    font-size: 0.875rem;
}

.acreditaciones-barra .informe-exportar {
    margin-left: auto;
}

.acreditaciones-personas {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.acreditaciones-persona {
    display: grid;
    /* Las acciones, con su ancho fijo: los estados quedan en columna (3 nov 2026). */
    grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr) 21rem;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
    min-width: 0;
    padding: var(--espacio-2) 0 var(--espacio-2) var(--espacio-3);
    border-bottom: 1px solid var(--rs-borde-sutil);
    border-left: 3px solid transparent;
}

.acreditaciones-persona--caducado,
.acreditaciones-persona--rechazado {
    border-left-color: var(--rs-peligro);
}

.acreditaciones-persona--pronto {
    border-left-color: var(--rs-aviso);
}

.acreditaciones-persona--por_comprobar {
    border-left-color: var(--rs-azul);
}

.acreditaciones-persona__nombre {
    display: grid;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.acreditaciones-persona__nombre:hover strong {
    color: var(--marca-acento);
}

.acreditaciones-persona__estado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-1) var(--espacio-2);
    min-width: 0;
    font-size: 0.875rem;
}

.acreditaciones-persona__acciones {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--espacio-1);
}

/* Con la casilla para quitárselo a varios (9 nov 2026). */
.acreditaciones-persona--con-casilla {
    grid-template-columns: auto minmax(12rem, 18rem) minmax(0, 1fr) 21rem;
}

@media (max-width: 760px) {
    .acreditaciones-persona {
        grid-template-columns: minmax(0, 1fr);
    }

    .acreditaciones-persona--con-casilla {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .acreditaciones-persona--con-casilla > :not(.casilla-fila) {
        grid-column: 2;
    }

    .acreditaciones-persona__acciones {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}
/* #endregion */

/* #region Los tipos (configurar) */
.acreditaciones-config__cabecera {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-3);
}

.acreditaciones-config__cabecera h2 {
    margin: 0;
    font-size: 1.125rem;
}

.acreditaciones-tipos-lista {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.acreditaciones-tipo p {
    margin: var(--espacio-1) 0 0;
}

.acreditaciones-tipo__resumen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1);
}

.acreditaciones-tipo__acciones {
    display: flex;
    align-items: center;
    gap: var(--espacio-1);
}

/* Quién lo apunta: dos botones grandes. */
.acreditaciones-quien {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--espacio-2);
}

.acreditaciones-quien__opcion {
    position: relative;
    cursor: pointer;
}

.acreditaciones-quien__opcion input {
    position: absolute;
    opacity: 0;
}

.acreditaciones-quien__opcion > span {
    display: grid;
    gap: 2px;
    height: 100%;
    padding: var(--espacio-3);
    border: 1px solid var(--rs-borde-control);
    border-radius: var(--radio-md);
}

.acreditaciones-quien__opcion small {
    color: var(--rs-texto-secundario);
}

.acreditaciones-quien__opcion input:checked + span {
    border-color: var(--rs-azul);
    background: var(--rs-azul-suave);
    box-shadow: 0 0 0 1px var(--rs-azul);
}

.acreditaciones-quien__opcion input:focus-visible + span {
    outline: 2px solid var(--rs-azul);
    outline-offset: 2px;
}

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

.acreditaciones-avisar__fila input {
    width: 6rem;
}
/* #endregion */

/* #region Las ventanas (apuntar, comprobar, historial, pedir) */
.acreditacion-foto__zona {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-3);
    cursor: pointer;
}

.acreditacion-foto__zona img,
.acreditacion-foto__vacia {
    width: 7rem;
    height: 4.5rem;
    border-radius: var(--radio-sm);
    object-fit: cover;
}

.acreditacion-foto__vacia {
    display: grid;
    place-items: center;
    border: 1px dashed var(--rs-borde-fuerte);
    color: var(--rs-texto-tenue);
}

.acreditacion-comprobar__foto img {
    display: block;
    width: 100%;
    max-height: 22rem;
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    object-fit: contain;
    background: var(--rs-hover);
}

.acreditacion-dato {
    margin: 0;
    font-weight: 600;
}

.acreditacion-historial {
    display: grid;
    gap: var(--espacio-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.acreditacion-historial li p {
    margin: var(--espacio-1) 0 0;
}

.acreditacion-historial--antes {
    opacity: 0.75;
}

.acreditacion-historial__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

.acreditacion-resultados {
    display: grid;
    justify-items: start;
    gap: var(--espacio-1);
    margin-top: var(--espacio-1);
}

.acreditacion-elegidos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1);
    /* Con un tipo de socio entero pueden ser muchos: la lista no empuja el botón fuera de la ventana. */
    max-height: 12rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.acreditacion-elegidos__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2);
}

/* Varios de golpe: por tipo de socio, etiqueta o edad (9 nov 2026). */
.acreditacion-grupo {
    display: grid;
    gap: var(--espacio-2);
    margin: 0;
    padding: var(--espacio-3);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-md);
}

.acreditacion-grupo legend {
    padding: 0 var(--espacio-1);
}

.acreditacion-grupo .ayuda-campo {
    margin: 0;
}

.acreditacion-grupo__campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--espacio-2);
}

.acreditacion-grupo__campos .campo {
    margin: 0;
}

.acreditacion-grupo__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

.acreditacion-elegidos .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    padding: 2px 4px 2px var(--espacio-2);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-pildora);
    background: var(--rs-azul-suave);
}

.acreditacion-elegidos .chip__quitar {
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}
/* #endregion */

/* #region En la ficha del socio (pestaña «Carnet») */
.ficha-acreditaciones h2 {
    margin: 0 0 var(--espacio-2);
    font-size: 1.0625rem;
}

.ficha-acreditaciones__lista {
    display: grid;
    margin: 0 0 var(--espacio-3);
    padding: 0;
    list-style: none;
}

.ficha-acreditaciones__lista > li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-2) 0;
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.ficha-acreditaciones__dato {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ficha-acreditaciones__dato span {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    font-size: 0.875rem;
}

.ficha-acreditaciones__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1);
}

.ficha-acreditaciones__pedir {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

.ficha-acreditaciones__pedir select {
    flex: 1 1 12rem;
}
/* #endregion */

/* #region Los tres pasos, arriba: solo mientras no hay ningún carnet creado */
.acreditaciones-pasos[hidden] {
    display: none;
}

.acreditaciones-pasos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--espacio-2);
    margin: 0 0 var(--espacio-4);
    padding: 0;
    list-style: none;
}

.acreditaciones-pasos li {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
    padding: var(--espacio-3);
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-md);
    background: var(--rs-fondo);
}

.acreditaciones-pasos li > span:last-child {
    display: grid;
    gap: 2px;
}

.acreditaciones-pasos small {
    color: var(--rs-texto-secundario);
}

.acreditaciones-pasos__numero {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--rs-azul-suave);
    color: var(--rs-azul-texto);
    font-weight: 700;
}
/* #endregion */

/* #region En el móvil, los pasos en poco sitio (solo el título de cada uno) */
@media (max-width: 760px) {
    .acreditaciones-pasos {
        gap: var(--espacio-1);
    }

    .acreditaciones-pasos li {
        align-items: center;
        padding: var(--espacio-2);
    }

    .acreditaciones-pasos small {
        display: none;
    }
}
/* #endregion */