/*
 * Socios › Ajustes › «Carnet impreso» (/gestion/diseno-carnet,
 * docs/credenciales.md «Carnets impresos»): cómo queda el carnet de
 * plástico, con la tarjeta de muestra al lado que cambia mientras se elige.
 * Se imprimen desde la lista de socios (19 oct 2026); la hoja de impresión
 * tiene su propia hoja de estilos (carnets.css).
 *
 * Solo la carga plantillas/gestion/diseno-carnet.php, después de panel.css,
 * gestion.css y carnet-tarjeta.css. De gestion.css salen la tarjeta, las
 * opciones grandes (.elecciones) y los campos; de carnet-tarjeta.css, la
 * tarjeta en sí (la del móvil del socio): aquí solo su tamaño en la muestra.
 * Las piezas van en el orden en que salen:
 *
 *   1. La página: lo que se elige y, al lado, la muestra
 *   2. Lo que se elige: los grupos, sin cajas dentro de la tarjeta
 *   3. La muestra y, debajo, el código corto e ir a imprimir
 *
 * Colores, radios y espacios, de tokens de base.css; el móvil, junto a cada
 * pieza.
 */

/* #region 1. La página: lo que se elige y, al lado, la muestra */
.diseno-carnet {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--espacio-5);
    align-items: start;
}

/* En una pantalla estrecha, la muestra arriba: se ve cómo queda antes de cambiar nada. */
@media (max-width: 960px) {
    .diseno-carnet {
        grid-template-columns: minmax(0, 1fr);
    }

    .diseno-carnet__vista {
        order: -1;
    }
}
/* #endregion */

/* #region 2. Lo que se elige: los grupos, sin cajas dentro de la tarjeta */
.diseno-carnet__formulario {
    display: grid;
    gap: var(--espacio-5);
}

.diseno-carnet__formulario > fieldset.campo {
    margin: 0;
    padding: 0;
    border: 0;
}

/* La leyenda de un fieldset no ocupa sitio en la rejilla: se le da su propia línea. */
.diseno-carnet__formulario > fieldset.campo > legend {
    float: left;
    width: 100%;
    margin: 0 0 var(--espacio-3);
    padding: 0;
    font-weight: 700;
}

.diseno-carnet__formulario > fieldset.campo > legend + * {
    clear: both;
}

.diseno-carnet__formulario > .campo,
.diseno-carnet__formulario .acciones-formulario {
    margin: 0;
}

/* Qué datos lleva el carnet, en columnas. */
.diseno-carnet__que-sale {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--espacio-1) var(--espacio-3);
}
/* #endregion */

/* #region 3. La muestra y, debajo, el código corto e ir a imprimir */
.diseno-carnet__vista {
    position: sticky;
    /* Por debajo de la barra de arriba del panel, que también se queda fija. */
    top: calc(var(--alto-superior) + var(--espacio-4));
    display: grid;
    justify-items: center;
    gap: var(--espacio-3);
}

.diseno-carnet__vista-titulo {
    margin: 0;
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.diseno-carnet__caras {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espacio-3);
    justify-items: center;
    width: 100%;
}

.diseno-carnet__caras .carnet-impreso {
    width: 26rem;
    max-width: 100%;
}

/* El código corto, explicado en una línea con su icono, del ancho de la tarjeta. */
.diseno-carnet__nota {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
    max-width: 26rem;
    margin: var(--espacio-2) 0 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    line-height: 1.5;
}

.diseno-carnet__nota .icono {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--marca-acento);
}

@media (max-width: 960px) {
    .diseno-carnet__vista {
        position: static;
    }
}
/* #endregion */