/*
 * Formas de pago (/gestion/pagos).
 *
 * Solo la carga plantillas/gestion/pagos.php, después de panel.css y
 * gestion.css (de ahí salen las pestañas, las tarjetas, los interruptores
 * .ajuste, las ventanas y los pasos .ventana-paso). Las piezas van en el
 * orden en que salen:
 *
 *   0. De un vistazo: todas las formas arriba con su estado
 *   1. Los grupos: «Por internet» y «En la sede»
 *   2. Cada forma de pago: su tarjeta, su icono y su estado
 *   3. Lo de dentro: el interruptor, sus datos y lo que le falta
 *   4. Las ventanas: las claves secretas y la dirección de aviso
 *   5. Reservas sin pagar
 *   6. En el móvil
 */

/* #region 0. De un vistazo: todas las formas arriba con su estado */
.pagos-vistazo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
}

.pagos-vistazo__titulo {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

.pagos-vistazo ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagos-vistazo a {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    min-height: 40px;
    padding: var(--espacio-1) var(--espacio-2) var(--espacio-1) var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: 999px;
    color: var(--rs-texto);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    text-decoration: none;
}

.pagos-vistazo a:hover {
    border-color: var(--rs-borde-fuerte);
}

.pagos-vistazo .pagos-forma__estado {
    margin: 0;
}
/* #endregion */

/* #region 1. Los grupos: «Por internet» y «En la sede» */

.pagos-formas {
    display: grid;
    gap: var(--espacio-8);
}

/*
 * A lo ancho, de dos en dos (4 nov 2026: a 2.000 px quedaba media pantalla
 * vacía).
 */
@media (min-width: 1400px) {
    .pagos-grupo:has(> .pagos-forma) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pagos-grupo:has(> .pagos-forma) > :not(.pagos-forma) {
        grid-column: 1 / -1;
    }
}

.pagos-grupo {
    display: grid;
    gap: var(--espacio-4);
}

.pagos-grupo__cabecera {
    display: grid;
    gap: 2px;
}

.pagos-grupo__cabecera h2 {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    font-size: var(--texto-grande);
}

.pagos-grupo__cabecera h2 .icono {
    color: var(--rs-texto-tenue);
}

.pagos-grupo__cabecera p {
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

/* Dos columnas: transferencia junto a Bizum, efectivo junto a datáfono, para compararlas de un vistazo. */
.pagos-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--espacio-4);
}

/* Una nota al pie de un grupo, con su icono. */
.pagos-pie {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
    margin: 0;
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
    line-height: 1.45;
}

.pagos-pie > .icono {
    flex: none;
    margin-top: 2px;
}

.pagos-pie a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}
/* #endregion */

/* #region 2. Cada forma de pago: su tarjeta, su icono y su estado */

.app-panel .contenido-gestion .pagos-forma {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-4);
    padding: var(--espacio-5);
    transition: border-color var(--duracion-hover) var(--curva), box-shadow var(--duracion-hover) var(--curva);
}

.pagos-forma:focus {
    outline: none;
}

/* El icono, el nombre con para qué sirve y, a la derecha, si está activa. */
.pagos-forma__cabecera {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--espacio-3) var(--espacio-4);
}

/* Sin configurar o apagada, solo su contorno: un hueco por llenar, no un relleno gris. */
.pagos-forma__icono {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: transparent;
    color: var(--rs-texto-tenue);
    transition: background-color var(--duracion-hover) var(--curva), border-color var(--duracion-hover) var(--curva), color var(--duracion-hover) var(--curva);
}

.pagos-forma__icono .icono {
    width: 22px;
    height: 22px;
}

/* Activa, en el color de la asociación: se ve de lejos qué formas se ofrecen. */
.pagos-forma:has(.pagos-forma__estado.etiqueta--exito) .pagos-forma__icono {
    border-color: transparent;
    background: color-mix(in srgb, var(--tono-seccion, var(--marca-acento)) 14%, transparent);
    color: var(--tono-seccion, var(--marca-acento));
}

/* Efectivo y datáfono siempre se pueden usar (lo decide cada evento): en cian, como su etiqueta. */
.pagos-forma--sencilla .pagos-forma__icono {
    border-color: transparent;
    background: var(--rs-cian-suave);
    color: var(--rs-cian-texto);
}

.pagos-forma__textos {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.app-panel .contenido-gestion .pagos-forma__textos h3 {
    margin: 0;
    font-size: var(--texto-grande);
    font-weight: 600;
}

.pagos-forma__textos p {
    margin: 0;
    max-width: 60ch;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    line-height: 1.45;
}

.pagos-forma__estado {
    margin-top: 2px;
}

/* En la rejilla de dos (y en el móvil), el estado pasa debajo del nombre: el texto tiene todo el ancho. */
.pagos-rejilla .pagos-forma__cabecera {
    grid-template-columns: auto minmax(0, 1fr);
}

.pagos-rejilla .pagos-forma__estado {
    grid-column: 2;
    justify-self: start;
    margin-top: 0;
}

.pagos-forma__estado:empty {
    display: none;
}

/* Las de la sede no se configuran: más compactas. */
.app-panel .contenido-gestion .pagos-forma--sencilla {
    padding: var(--espacio-4) var(--espacio-5);
}

/* Quien llega por un enlace viejo (#tarjeta, #transferencia) ve su forma rodeada un momento. */
.pagos-forma--senalada {
    animation: pagos-senalar 4s var(--curva) both;
}

@keyframes pagos-senalar {
    0%, 70% {
        border-color: var(--marca-acento);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-acento) 22%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pagos-forma--senalada {
        animation: none;
        border-color: var(--marca-acento);
    }
}

/* Abajo del todo, para que en la rejilla los botones de las dos tarjetas queden a la misma altura. */
.pagos-forma__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-5);
    margin-top: auto;
}

.pagos-forma .aviso {
    margin: 0;
}
/* #endregion */

/* #region 3. Lo de dentro: el interruptor, sus datos y lo que le falta */

.pagos-forma__cuerpo {
    display: grid;
    gap: var(--espacio-4);
}

/* El interruptor de la tarjeta, en su franja: es lo que decide si los socios pueden pagar así. */
.ajuste.pagos-forma__interruptor {
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

/* Lo guardado, en pares nombre / valor alineados. */
.pagos-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--espacio-3) var(--espacio-5);
    margin: 0;
    padding-top: var(--espacio-4);
    border-top: 1px solid var(--rs-borde-sutil);
}

.pagos-datos > div {
    display: grid;
    align-content: start;
    gap: 2px;
    min-width: 0;
}

.pagos-datos dt {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-pequeno);
    font-weight: 500;
}

.pagos-datos dd {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.pagos-datos dd .icono {
    width: 14px;
    height: 14px;
    color: var(--rs-exito-texto);
}

/* Cuentas, terminales y teléfonos: cifras de ancho fijo, que se leen y se comparan bien. */
.pagos-numero,
.pagos-datos dd.pagos-numero {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* Lo que falta para encender la tarjeta: lo hecho, en verde; lo pendiente, con su círculo vacío. */
.pagos-falta {
    display: grid;
    gap: var(--espacio-2);
    padding-top: var(--espacio-4);
    border-top: 1px solid var(--rs-borde-sutil);
}

.pagos-falta p {
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

.pagos-falta ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagos-falta li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px var(--espacio-3) 4px var(--espacio-2);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-pildora);
    color: var(--rs-texto);
    font-size: var(--texto-etiqueta);
}

.pagos-falta li .icono {
    width: 16px;
    height: 16px;
}

.pagos-falta__punto {
    width: 14px;
    height: 14px;
    margin: 1px;
    border: 1.5px dashed var(--rs-texto-tenue);
    border-radius: 50%;
}

.pagos-falta li.pagos-falta__hecho {
    border-color: color-mix(in srgb, var(--rs-exito) 24%, transparent);
    background: color-mix(in srgb, var(--rs-exito) 10%, transparent);
    color: var(--rs-exito-texto);
}

/* Una nota con su icono: lo que falta en una forma sin configurar, o por qué no se puede tocar. */
.pagos-forma__nota {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    line-height: 1.45;
}

.pagos-forma__nota > .icono {
    flex: none;
    margin-top: 1px;
    color: var(--rs-texto-tenue);
}
/* #endregion */

/* #region 4. Las ventanas: las claves secretas y la dirección de aviso */

.pagos-ventana--pequena {
    width: min(30rem, calc(100vw - 2 * var(--espacio-4)));
}

/* Cada paso, separado del anterior por su raya (recta: el fieldset trae esquinas redondeadas). */
.pagos-ventana .ventana-paso + .ventana-paso {
    padding-top: var(--espacio-4);
    border-top: 1px solid var(--rs-borde-sutil);
    border-radius: 0;
}

.pagos-ventana .ventana-paso > .ayuda-campo {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
}

.pagos-ventana .ventana-paso > .ayuda-campo > .icono {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 2px;
}

/* Quitar una forma, apartado a la derecha de «Guardar» y «Cancelar». */
.pagos-ventana__quitar {
    margin-left: auto;
}

/* Una clave secreta: su nombre, si hay una guardada y qué hacer con ella; el campo, solo al escribirla. */
.pagos-secreto {
    display: grid;
    gap: var(--espacio-2);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
    transition: border-color var(--duracion-hover) var(--curva), background-color var(--duracion-hover) var(--curva);
}

.pagos-secreto__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
}

.pagos-secreto__cabecera label {
    margin: 0;
    font-weight: 600;
}

.pagos-secreto__estado {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--rs-exito-texto);
    font-size: var(--texto-etiqueta);
    font-weight: 500;
}

.pagos-secreto__estado .icono {
    width: 14px;
    height: 14px;
}

.pagos-secreto__acciones {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--espacio-1) var(--espacio-4);
    margin-left: auto;
}

.pagos-secreto__acciones .icono {
    width: 14px;
    height: 14px;
}

/* La que se quitará al guardar, en rojo suave: que no pase sin verse. */
.pagos-secreto[data-estado="quitar"] {
    border-color: color-mix(in srgb, var(--rs-peligro) 40%, transparent);
    background: color-mix(in srgb, var(--rs-peligro) 6%, var(--rs-superficie-2));
}

.pagos-secreto[data-estado="quitar"] .pagos-secreto__estado {
    color: var(--rs-peligro-texto);
}

/* La dirección de aviso, en letra de máquina, para que se vea bien qué se copia. */
.pagos-direccion {
    display: flex;
    gap: var(--espacio-2);
}

.pagos-direccion input {
    flex: 1;
    min-width: 0;
    font-family: var(--fuente-mono);
    font-size: var(--texto-etiqueta);
}

.pagos-direccion .boton {
    flex: none;
}

.pagos-direccion__copiado .icono {
    color: var(--rs-exito-texto);
}
/* #endregion */

/* #region 5. Reservas sin pagar */

.pagos-reservas .tarjeta {
    display: grid;
    gap: var(--espacio-3);
}

.pagos-reservas h2,
.pagos-reservas .ayuda-campo {
    margin: 0;
}

/* Los desplegables sueltos, de un ancho corto: se elige una opción, no se escribe. */
.contenido-gestion .pagos-reservas .campo > select {
    max-width: 24rem;
}

/* El plazo, justo debajo de su interruptor: se ve que va con él. */
.pagos-reservas__plazo {
    margin: 0;
}

.pagos-reservas .campo {
    margin: 0;
}

/* #endregion */

/* #region 6. En el móvil */

@media (max-width: 767px) {
    .pagos-formas {
        gap: var(--espacio-6);
    }

    .app-panel .contenido-gestion .pagos-forma {
        padding: var(--espacio-4);
    }

    /* También en la tarjeta: el estado, debajo del nombre. */
    .pagos-forma__cabecera {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .pagos-forma__estado {
        grid-column: 2;
        justify-self: start;
        margin-top: 0;
    }

    .pagos-forma__icono {
        width: 2.5rem;
        height: 2.5rem;
    }

    .pagos-forma__acciones .boton {
        flex: 1 1 auto;
    }

    .pagos-ventana__quitar {
        margin-left: 0;
    }

    /* Cambiar o quitar una clave, en su fila y a la izquierda, bajo su nombre. */
    .pagos-secreto__acciones {
        flex-basis: 100%;
        margin-left: 0;
    }

    .pagos-direccion {
        flex-direction: column;
    }

    .pagos-reservas .campo > select {
        max-width: none;
    }
}
/* #endregion */