/*
 * Requisitos que se comprueban solos (26 oct 2026, migración 0237,
 * docs/requisitos.md): la pestaña de la Junta en Amonestaciones, el
 * formulario de una norma, quién la cumple, la ficha del socio y «Mis
 * requisitos» del socio.
 */

/* #region Pantalla de la Junta: las normas */

.requisitos-normas,
.requisitos-excepciones,
.requisito-quienes {
    display: grid;
    gap: var(--espacio-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.requisito-norma {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espacio-3);
    padding: var(--espacio-4);
    border: 1px solid var(--rs-borde);
    border-left: 3px solid var(--rs-inactivo);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

.requisito-norma--encendida {
    border-left-color: var(--rs-exito);
}

.requisito-norma--avisar {
    border-left-color: var(--rs-aviso);
}

.requisito-norma--apagada {
    opacity: 0.85;
}

.requisito-norma__cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espacio-3);
}

.requisito-norma__textos {
    min-width: 0;
    flex: 1 1 18rem;
}

.requisito-norma__pide {
    margin: var(--espacio-1) 0 0;
}

.requisito-norma__estado button[aria-pressed="true"][data-estado="encendida"] {
    color: var(--rs-exito-texto);
}

.requisito-norma__estado button[aria-pressed="true"][data-estado="avisar"] {
    color: var(--rs-aviso-texto);
}

.requisito-norma__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    margin: 0;
}

.requisito-norma__chips .etiqueta {
    max-width: 100%;
    white-space: normal;
}

.requisito-norma__chips .etiqueta .icono {
    width: 0.9rem;
    height: 0.9rem;
    margin-right: var(--espacio-1);
}

.requisito-norma__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    padding-top: var(--espacio-3);
    border-top: 1px dashed var(--rs-borde);
}

.requisito-norma__cifras {
    font-variant-numeric: tabular-nums;
}

.requisito-norma__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-1);
}

.requisitos-vacio__ejemplos {
    display: grid;
    gap: var(--espacio-2);
    max-width: 40rem;
    margin: var(--espacio-3) auto 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.requisitos-vacio__ejemplos li,
.requisitos-carnets {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
}

.requisitos-vacio__ejemplos .icono,
.requisitos-carnets > .icono {
    flex: none;
    color: var(--rs-oro-texto);
}

.requisitos-carnets {
    margin-top: var(--espacio-4);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-md);
}

.requisitos-carnets p {
    margin: var(--espacio-1) 0 0;
}
/* #endregion */

/* #region Quién la cumple y excepciones */
.requisito-quienes__filtros {
    flex-wrap: wrap;
}

.requisito-quien {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

.requisito-quien > div:first-child {
    min-width: 0;
    flex: 1 1 16rem;
}

.requisito-quien p {
    margin: var(--espacio-1) 0 0;
}

/* Su nombre lleva a su ficha: en el color del texto y, al pasar, en el de la asociación; sin azul ni subrayado. */
.requisito-quien__nombre {
    color: var(--rs-texto);
    text-decoration: none;
    transition: color var(--duracion-hover) var(--curva);
}

.requisito-quien__nombre:hover,
.requisito-quien__nombre:focus-visible {
    color: var(--marca-acento);
}

.requisito-quien--pasada {
    opacity: 0.7;
}

.requisito-quien__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}
/* #endregion */

/* #region El formulario de una norma */
.dialogo--ancho {
    width: min(52rem, calc(100vw - 2 * var(--espacio-4)));
}

.requisito-formulario {
    display: grid;
    gap: var(--espacio-4);
}

.requisito-paso {
    display: grid;
    gap: var(--espacio-3);
    margin: 0;
    padding: var(--espacio-4);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-1);
}

.requisito-paso > legend {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    padding: 0 var(--espacio-2);
    font-family: var(--fuente-display);
    font-weight: 600;
}

.requisito-paso__numero {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--marca-acento) 16%, transparent);
    color: var(--rs-texto);
    font-size: var(--texto-pequeno);
}

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

.requisito-opciones-cortas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--espacio-2);
}

.requisito-condiciones .opcion-tarjeta small,
.requisito-opciones-cortas .opcion-tarjeta small {
    display: block;
    color: var(--rs-texto-tenue);
}

.requisito-datos {
    display: grid;
    gap: var(--espacio-3);
}

/* El ejemplo de cada paso: para que se entienda de qué va, sin rellenar nada. */
.requisito-ejemplo {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
    margin: 0;
    padding: var(--espacio-3);
    border-radius: var(--radio-md);
    background: var(--rs-oro-suave);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.requisito-ejemplo .icono {
    flex: none;
    color: var(--rs-oro-texto);
}

.requisito-ejemplo strong {
    color: var(--rs-texto);
}

.requisito-ambitos {
    display: grid;
    gap: var(--espacio-2);
}

.requisito-ambito {
    display: grid;
    gap: var(--espacio-2);
}

.requisito-ambito__cuales {
    display: grid;
    gap: var(--espacio-2);
    margin-left: var(--espacio-6);
}

.requisito-estado--encendida:has(input:checked) {
    border-color: var(--rs-exito);
}

.requisito-estado--avisar:has(input:checked) {
    border-color: var(--rs-aviso);
}

.requisito-efecto {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid color-mix(in srgb, var(--rs-azul) 35%, var(--rs-borde));
    border-radius: var(--radio-md);
    background: var(--rs-azul-suave);
}

.requisito-efecto .icono {
    flex: none;
    color: var(--rs-azul-texto);
}

.requisito-efecto p {
    margin: var(--espacio-1) 0 0;
    font-variant-numeric: tabular-nums;
}

.campo--corto {
    max-width: 14rem;
}
/* #endregion */

/* #region La ficha del socio */
.ficha-requisitos__cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-3);
}

.ficha-requisitos__cabeza h2 {
    margin: 0;
}

/* Las que cumple, plegadas en una línea verde: lo que importa es lo que no cumple. */
.ficha-requisitos__cumplidas > summary > .icono:first-child {
    color: var(--rs-exito);
}

.ficha-requisitos__cumplidas > .requisito-quienes {
    margin-top: var(--espacio-2);
}

/* Sin nada a la vista encima, sin la raya de separación. */
.ficha-requisitos__cabeza + .ficha-requisitos__cumplidas {
    border-top: 0;
}
/* #endregion */

/* #region «Mis requisitos» del socio */
/* Arriba, cuántas le faltan: la frase grande y una marca de color por cada norma. */
.mis-requisitos-resumen {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--espacio-2) clamp(16px, 2.4vw, 32px);
}

.mis-requisitos-resumen[hidden] {
    display: none;
}

/* Su escudo, en grande: lo primero que se ve. */
.escudo-requisitos {
    grid-row: 1 / span 2;
    width: clamp(4.5rem, 8vw, 7.5rem);
    height: auto;
    filter: drop-shadow(0 12px 18px rgb(0 0 0 / 0.22));
}

.escudo-requisitos--cumple {
    color: #1B8A55;
}

.escudo-requisitos--ojo {
    color: #C98A12;
}

.escudo-requisitos--falta {
    color: #C22F26;
}

.mis-requisitos-resumen p {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: clamp(1.75rem, 3.2vw, 3rem);
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.mis-requisitos-resumen__marcas {
    display: flex;
    gap: 6px;
    max-width: 22rem;
}

.mis-requisitos-resumen__marcas span {
    flex: 1;
    height: 6px;
    border-radius: var(--radio-pildora);
}

.mis-requisitos-resumen__marca--falta {
    background: var(--rs-peligro-solido);
}

.mis-requisitos-resumen__marca--ojo {
    background: var(--rs-aviso);
}

.mis-requisitos-resumen__marca--cumple {
    background: var(--rs-exito);
}

.mis-requisitos,
.mis-requisitos__cumplidas ul {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mi-requisito p {
    margin: 0;
}

/* Lo que no cumple: qué pide a la izquierda, en grande, y lo que le toca hacer a la derecha. */
.mi-requisito--abierta {
    --color-requisito: var(--rs-aviso-texto);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--espacio-4) clamp(var(--espacio-8), 6vw, 6rem);
    padding-block: var(--espacio-6);
    border-top: 1px solid var(--rs-borde-sutil);
}

.mi-requisito--falta {
    --color-requisito: var(--rs-peligro);
}

.mi-requisito__textos {
    display: grid;
    align-content: start;
    gap: var(--espacio-2);
    min-width: 0;
    color: var(--rs-texto-secundario);
}

.mi-requisito__estado {
    color: var(--color-requisito);
    font-size: var(--texto-etiqueta);
    font-weight: 700;
}

.mi-requisito--abierta h2 {
    margin: 0 0 var(--espacio-2);
    color: var(--rs-texto);
    font-family: var(--fuente-display);
    font-size: clamp(1.375rem, 2vw, 1.875rem);
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.mi-requisito__hacer {
    display: grid;
    align-content: start;
    gap: var(--espacio-3);
    min-width: 0;
}

/* Cómo va: una marca por cada uno que pide (o una barra, si son muchos). */
.mi-requisito__como-va {
    display: grid;
    gap: var(--espacio-3);
}

.mi-requisito__como-va > p {
    font-family: var(--fuente-display);
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    font-weight: 650;
    letter-spacing: -0.01em;
}

.mi-requisito__marcas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

.mi-requisito__marcas span {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--rs-borde);
    border-radius: 50%;
}

.mi-requisito__marcas .mi-requisito__marca--hecha {
    border-color: var(--rs-exito);
    background: var(--rs-exito);
}

.mi-requisito--falta .mi-requisito__marcas .mi-requisito__marca--hecha,
.mi-requisito--ojo .mi-requisito__marcas .mi-requisito__marca--hecha {
    border-color: var(--rs-aviso);
    background: var(--rs-aviso);
}

.mi-requisito__barra {
    height: 0.5rem;
    overflow: hidden;
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-3);
}

.mi-requisito__barra > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--rs-exito);
}

.mi-requisito--falta .mi-requisito__barra > span,
.mi-requisito--ojo .mi-requisito__barra > span {
    background: var(--rs-aviso);
}

.mi-requisito__aviso {
    color: var(--rs-aviso-texto);
    font-weight: 500;
}

/* Lo que debe: una fila por cosa, con su cifra, y cada una lleva a lo suyo. */
.mi-requisito__deudas {
    margin-block: 0;
}

.mi-requisito__hacer > .plegable,
.mi-requisito__dentro > .plegable {
    border-top: 0;
}

.mi-requisito__hacer > .plegable > summary,
.mi-requisito__dentro > .plegable > summary {
    min-height: 32px;
    padding: 0;
    color: var(--rs-texto-secundario);
    font-weight: 500;
}

.mi-requisito__actos {
    margin: 0;
    padding-left: var(--espacio-5);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

/* Lo que ya cumple: en líneas que se abren, en dos columnas a lo ancho. */
.mis-requisitos__cumplidas {
    padding-top: var(--espacio-6);
    border-top: 1px solid var(--rs-borde-sutil);
}

.mis-requisitos__cumplidas:first-child {
    padding-top: 0;
    border-top: 0;
}

.mis-requisitos__cumplidas h2 {
    margin: 0 0 var(--espacio-3);
    font-family: var(--fuente-display);
    font-size: var(--texto-grande);
    font-weight: 600;
}

.mis-requisitos__cumplidas ul {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    align-items: start;
    column-gap: clamp(var(--espacio-8), 6vw, 6rem);
}

.mi-requisito > .plegable {
    border-top: 0;
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.mi-requisito > .plegable > summary {
    gap: var(--espacio-3);
    min-height: 56px;
}

.mi-requisito h3 {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--fuente-ui);
    font-size: var(--texto-base);
    font-weight: 600;
    word-spacing: 0;
}

.mi-requisito > .plegable > summary > .mi-requisito__cumple {
    display: inline-flex;
    flex: none;
    color: var(--rs-exito);
}

.mi-requisito__dentro {
    display: grid;
    gap: var(--espacio-2);
    padding-bottom: var(--espacio-4);
    color: var(--rs-texto-secundario);
}

@media (max-width: 899px) {
    .mis-requisitos-resumen {
        margin-top: var(--espacio-2);
    }

    .mi-requisito--abierta {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* #endregion */