/*
 * El carnet de socio: la tarjeta en sí (armazón, por delante y por detrás).
 * Sacada de socio-carnet.css el 16 oct 2026 para que el carnet impreso sea
 * exactamente el mismo que el del móvil: la cargan «Mi carnet» del socio,
 * la vista previa de Socios › Carnets impresos y la hoja de imprimir.
 *
 *   3. La tarjeta: armazón y giro
 *   4. La tarjeta: por delante
 *   5. La tarjeta: por detrás
 *   6. El carnet impreso: sin giro ni brillo, a tamaño real
 *
 * Todo se mide en `cqi` (porcentaje del ancho de la tarjeta): igual en un
 * móvil que impreso a 85,6 mm.
 */

/* #region 3. La tarjeta: armazón y giro */
/*
 * Proporción de tarjeta bancaria (85,6 × 54 mm). Dos caras superpuestas que
 * giran juntas dentro de .carnet-tarjeta__giro (darle la vuelta va en
 * `transform`). Encima de todo, un botón transparente que la cubre entera:
 * tocarla abre el modo puerta y arrastrarla la gira (mi-carnet.js).
 */
.carnet-tarjeta {
    --carnet-fondo: var(--color-carnet, var(--marca-fondo));
    --carnet-tinta: var(--color-carnet-texto, var(--marca-sobre));
    /*
     * El color secundario de la asociación, solo si lo eligió (15 oct 2026):
     * mezclado con la tinta para que se lea en cualquier fondo (sobre uno
     * oscuro sale más claro; sobre uno claro, más oscuro). Sin secundario la
     * variable no existe y cada detalle usa su color de siempre. El texto lleva
     * más tinta: tiene que leerse aunque su secundario se parezca al fondo.
     */
    --carnet-acento: color-mix(in oklch, var(--marca-secundaria-elegida) 78%, var(--carnet-tinta));
    --carnet-acento-texto: color-mix(in oklch, var(--marca-secundaria-elegida) 35%, var(--carnet-tinta));
    --carnet-radio: 4.2cqi;
    position: relative;
    container-type: inline-size;
    width: 100%;
    max-width: 500px;
    margin-inline: auto;
    perspective: 1600px;
    -webkit-tap-highlight-color: transparent;
    animation: carnet-entra 0.6s var(--curva) both;
}

/* Al abrir la pantalla, la tarjeta entra subiendo un poco. */
@keyframes carnet-entra {
    from {
        opacity: 0;
        translate: 0 18px;
    }
}

.carnet-tarjeta__giro {
    position: relative;
    aspect-ratio: 85.6 / 54;
    transform: rotateY(var(--giro, 0deg));
    transform-style: preserve-3d;
    transition: transform 0.7s var(--curva), scale 0.15s var(--curva);
    /* En su propia capa: el móvil solo la gira, sin volver a pintar el QR en cada paso. */
    will-change: transform;
}

/* Arrastrándola con el dedo: sigue al dedo sin retraso y el brillo se para (un trabajo menos). */
.carnet-tarjeta--arrastrando .carnet-tarjeta__giro {
    transition: scale 0.15s var(--curva);
}

.carnet-tarjeta--arrastrando .carnet-tarjeta__frente::after {
    animation-play-state: paused;
}

/* Al pulsarla, cede un poco, como al apretar una tarjeta. */
.carnet-tarjeta:has(.carnet-tarjeta__voltear:active) .carnet-tarjeta__giro {
    scale: 0.985;
}

.carnet-tarjeta__cara {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--carnet-radio);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow: 0 3cqi 7cqi -2cqi rgb(0 0 0 / 0.55), 0 1cqi 2cqi rgb(0 0 0 / 0.25);
}

:root[data-theme="light"] .carnet-tarjeta__cara {
    box-shadow: 0 3cqi 7cqi -2.5cqi rgb(16 24 40 / 0.35), 0 0.6cqi 1.5cqi rgb(16 24 40 / 0.15);
}

.carnet-tarjeta__voltear {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 0;
    border: 0;
    border-radius: var(--carnet-radio);
    background: transparent;
    cursor: pointer;
    /* El desplazamiento vertical sigue siendo de la página; el horizontal, del giro. */
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

.carnet-tarjeta__voltear:focus-visible {
    outline: 3px solid var(--rs-azul);
    outline-offset: 4px;
}

/* Sin código (sin carnet, anulado o cuenta de familia): nada que escanear ni enseñar. */
.carnet-tarjeta:has(#carnet-qr-tarjeta[hidden]) .carnet-tarjeta__voltear {
    display: none;
}

/* Darle la vuelta, en su esquina (5 nov 2026): fuera de lo que gira, así sigue ahí para volver. */
.carnet-tarjeta__girar {
    position: absolute;
    top: 4cqi;
    right: 4cqi;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 9.6cqi;
    height: 9.6cqi;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--carnet-tinta) 16%, transparent);
    color: var(--carnet-tinta);
    cursor: pointer;
    transition: background-color var(--duracion-hover) var(--curva);
}

/* Se ve pequeño, pero el dedo tiene sus 44 px. */
.carnet-tarjeta__girar::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
}

.carnet-tarjeta__girar:hover {
    background: color-mix(in srgb, var(--carnet-tinta) 26%, transparent);
}

.carnet-tarjeta__girar:focus-visible {
    outline: 2px solid var(--carnet-tinta);
    outline-offset: 2px;
}

.carnet-tarjeta__girar .icono {
    width: 46%;
    height: 46%;
}

/* El nombre de la asociación no se mete debajo del botón. */
.carnet-tarjeta:has(.carnet-tarjeta__girar) .carnet-tarjeta__arriba {
    padding-right: 11cqi;
}
/* #endregion */

/* #region 4. La tarjeta: por delante */
/*
 * Lo que importa en la puerta y nada más: el emisor (escudo, asociación y
 * tipo de socio), la foto, el nombre, el número y el código en su ventana
 * blanca. Fondo del color del carnet con textura de documento oficial (los
 * anillos finos de los billetes), luz arriba y sombra abajo.
 */
.carnet-tarjeta__frente {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2cqi;
    padding: 4.6cqi 5cqi;
    color: var(--carnet-tinta);
    background:
        repeating-radial-gradient(circle at 118% -20%, rgb(255 255 255 / 0.07) 0 0.25cqi, transparent 0.25cqi 2.4cqi),
        radial-gradient(120% 90% at 100% 0%, rgb(255 255 255 / 0.24), transparent 55%),
        radial-gradient(90% 90% at 0% 100%, rgb(0 0 0 / 0.38), transparent 60%),
        linear-gradient(135deg, var(--carnet-fondo), color-mix(in srgb, var(--carnet-fondo) 52%, #000));
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.28),
        inset 0 0 0 1px rgb(255 255 255 / 0.10),
        0 3cqi 7cqi -2cqi rgb(0 0 0 / 0.55),
        0 1cqi 2cqi rgb(0 0 0 / 0.25);
}

/* El brillo holográfico que la cruza: un carnet «vivo» no es una captura. */
.carnet-tarjeta__frente::after {
    content: "";
    position: absolute;
    inset: -50% -90%;
    background: linear-gradient(105deg,
            transparent 38%,
            rgb(255 255 255 / 0.04) 44%,
            rgb(255 255 255 / 0.22) 48%,
            rgb(170 220 255 / 0.16) 50%,
            rgb(255 214 160 / 0.14) 52%,
            transparent 58%);
    transform: translateX(-55%);
    animation: carnet-brillo 7s ease-in-out infinite;
    pointer-events: none;
}

@keyframes carnet-brillo {
    0%,
    60% {
        transform: translateX(-55%);
    }

    100% {
        transform: translateX(55%);
    }
}

/* El escudo de la asociación, grande y casi transparente, como marca de agua. */
.carnet-tarjeta__marca-agua {
    position: absolute;
    top: 50%;
    right: 18cqi;
    width: 50cqi;
    aspect-ratio: 1;
    opacity: 0.08;
    filter: grayscale(1) brightness(1.9);
    transform: translateY(-46%) rotate(-12deg);
    pointer-events: none;
}

.carnet-tarjeta__marca-agua img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Por encima de la luz y del brillo. */
.carnet-tarjeta__arriba,
.carnet-tarjeta__cuerpo {
    position: relative;
    z-index: 1;
}

/* Arriba: el escudo y la asociación con el tipo de socio. */
.carnet-tarjeta__arriba {
    display: flex;
    align-items: center;
    gap: 2.6cqi;
}

.carnet-tarjeta__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 9cqi;
    height: 9cqi;
    padding: 0.8cqi;
    overflow: hidden;
    border-radius: 2.4cqi;
    background: #fff;
    color: #111827;
    font-size: 3.4cqi;
    font-weight: 800;
    box-shadow: 0 0.4cqi 1.2cqi rgb(0 0 0 / 0.25);
}

.carnet-tarjeta__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.carnet-tarjeta__emisor {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.4cqi;
    min-width: 0;
}

.carnet-tarjeta__organizacion {
    margin: 0;
    overflow: hidden;
    font-size: 3.3cqi;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.carnet-tarjeta__tipo {
    margin: 0;
    color: var(--carnet-acento-texto, color-mix(in srgb, var(--carnet-tinta) 82%, transparent));
    font-size: 2.8cqi;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Abajo: a la izquierda quién es (foto y datos); a la derecha, el código. */
.carnet-tarjeta__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3.4cqi;
}

/* La foto toma el alto del bloque de texto que tiene al lado. */
.carnet-tarjeta__titular {
    display: flex;
    align-items: stretch;
    gap: 3cqi;
    min-width: 0;
}

.carnet-tarjeta__foto {
    flex-shrink: 0;
    width: 18cqi;
    min-height: 22cqi;
    overflow: hidden;
    border: 0.6cqi solid var(--carnet-acento, rgb(255 255 255 / 0.92));
    border-radius: 2.2cqi;
    background: rgb(255 255 255 / 0.18);
    box-shadow: 0 1.2cqi 3cqi rgb(0 0 0 / 0.3);
}

.carnet-tarjeta__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sin foto, sus iniciales en vez de un hueco. */
.carnet-iniciales {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--fuente-display);
    font-size: 6.4cqi;
    font-weight: 700;
}

.carnet-tarjeta__datos {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 0.6cqi;
    min-width: 0;
}

.carnet-nombre {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-family: var(--fuente-display);
    font-size: 5cqi;
    font-weight: 700;
    line-height: 1.12;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* Un nombre largo (más de 20 letras, mi-carnet.js) no se corta: baja de tamaño. */
.carnet-nombre--largo {
    font-size: 4.2cqi;
}

.carnet-numero {
    margin: 0;
    font-size: 3.2cqi;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
    opacity: 0.88;
}

/* Bajo el número, con el código que cambia: «Código dinámico» y su cuenta atrás. */
.carnet-qr-pie {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 1.4cqi;
    margin-top: 1.6cqi;
    padding: 0.8cqi 2.2cqi 0.8cqi 0.9cqi;
    border-radius: 999px;
    background: rgb(0 0 0 / 0.22);
}

.carnet-qr-texto {
    margin: 0;
    font-size: 2.7cqi;
    font-weight: 700;
    white-space: nowrap;
}

/* La cuenta atrás del código que cambia: un aro que se vacía (mi-carnet.js mueve stroke-dashoffset). */
.carnet-anillo {
    position: relative;
    flex-shrink: 0;
    width: 5.6cqi;
    height: 5.6cqi;
}

.carnet-anillo svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.carnet-anillo__fondo,
.carnet-anillo__progreso {
    fill: none;
    stroke-width: 3;
}

.carnet-anillo__fondo {
    stroke: rgb(255 255 255 / 0.25);
}

.carnet-anillo__progreso {
    stroke: var(--carnet-acento, #fff);
    stroke-dasharray: 97.4;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}

.carnet-anillo span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1cqi;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* El código, en su ventana blanca; si no hay (revocado, sin carnet...), el motivo en su lugar. */
.carnet-tarjeta__codigo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35cqi;
    aspect-ratio: 1;
}

/* El margen blanco alrededor del código: los lectores lo necesitan para encontrarlo. */
.carnet-qr-ventana {
    width: 100%;
    height: 100%;
    padding: 3.5cqi;
    border-radius: 2.8cqi;
    background: #fff;
    box-shadow: 0 1.4cqi 3.6cqi rgb(0 0 0 / 0.3);
}

.carnet-qr,
.carnet-qr svg,
.carnet-qr canvas,
.carnet-qr img {
    display: block;
    width: 100%;
    height: 100%;
}

.carnet-estado {
    margin: 0;
    padding: 2cqi;
    border-radius: 2.8cqi;
    background: rgb(0 0 0 / 0.22);
    font-size: 3.2cqi;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.carnet-tarjeta__codigo:has(> .carnet-qr-ventana[hidden]) {
    align-self: end;
    width: auto;
    max-width: 38cqi;
    aspect-ratio: auto;
}

/* Un carnet de verdad no dice que estás al día: «activo» no se enseña, solo los problemas. */
.carnet-estado:empty,
.carnet-estado--activo {
    display: none;
}
/* #endregion */

/* #region 5. La tarjeta: por detrás */
/*
 * Elegante y simétrica: el escudo en el centro sobre un rosetón de líneas
 * finas (el dibujo de seguridad de los billetes), la asociación y el titular
 * debajo y, tras una línea fina, la letra pequeña y el símbolo de Rasedia.
 */
.carnet-tarjeta__dorso {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 6cqi 5.5cqi 4.4cqi;
    color: var(--carnet-tinta);
    text-align: center;
    background:
        repeating-radial-gradient(circle at 50% 36%, rgb(255 255 255 / 0.07) 0 0.25cqi, transparent 0.25cqi 1.9cqi),
        radial-gradient(55% 65% at 50% 36%, rgb(255 255 255 / 0.16), transparent 70%),
        radial-gradient(90% 90% at 100% 100%, rgb(0 0 0 / 0.35), transparent 60%),
        linear-gradient(135deg, var(--carnet-fondo), color-mix(in srgb, var(--carnet-fondo) 52%, #000));
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.28),
        inset 0 0 0 1px rgb(255 255 255 / 0.10),
        0 3cqi 7cqi -2cqi rgb(0 0 0 / 0.55),
        0 1cqi 2cqi rgb(0 0 0 / 0.25);
    transform: rotateY(180deg);
}

.carnet-dorso__emblema {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1cqi;
}

.carnet-dorso__escudo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15cqi;
    height: 15cqi;
    margin-bottom: 1.4cqi;
    padding: 1.4cqi;
    overflow: hidden;
    border-radius: 3.4cqi;
    background: #fff;
    color: #111827;
    font-size: 4.5cqi;
    font-weight: 800;
    box-shadow: 0 1.4cqi 4cqi rgb(0 0 0 / 0.3), 0 0 0 0.8cqi rgb(255 255 255 / 0.18);
}

.carnet-dorso__escudo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.carnet-dorso__organizacion {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: 4cqi;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* «Nombre Apellidos · Socio nº 12»: el punto solo si hay número. */
.carnet-dorso__titular {
    display: flex;
    justify-content: center;
    gap: 1.6cqi;
    margin: 0;
    font-size: 3cqi;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

.carnet-dorso__titular span:empty {
    display: none;
}

.carnet-dorso__titular span + span:not(:empty)::before {
    content: "·";
    margin-right: 1.6cqi;
}

.carnet-dorso__pie {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 3cqi;
    padding-top: 2.6cqi;
    border-top: 1px solid rgb(255 255 255 / 0.22);
    text-align: left;
}

.carnet-dorso__textos {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.4cqi;
    min-width: 0;
}

.carnet-dorso__legal {
    margin: 0;
    font-size: 2.6cqi;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.carnet-dorso__expedido {
    margin: 0;
    font-size: 2.6cqi;
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

.carnet-dorso__plataforma {
    flex-shrink: 0;
    width: 7.5cqi;
    height: 7.5cqi;
    object-fit: contain;
    filter: drop-shadow(0 0.3cqi 0.8cqi rgb(0 0 0 / 0.35));
}
/* #endregion */

/* #region 6. El carnet impreso: sin giro ni brillo, a tamaño real */
/*
 * Una cara por tarjeta (la de delante o la de detrás), quieta: sin entrar
 * animada, sin brillo que cruce y sin sombra (en papel sobraría). El ancho
 * lo pone quien la usa: 85,6 mm en la hoja, más grande en la vista previa.
 */
.carnet-tarjeta--impresa {
    max-width: none;
    margin: 0;
    perspective: none;
    animation: none;
}

.carnet-tarjeta--impresa .carnet-tarjeta__giro {
    transform: none;
    rotate: none;
    transition: none;
    will-change: auto;
}

.carnet-tarjeta--impresa .carnet-tarjeta__dorso {
    transform: none;
}

.carnet-tarjeta--impresa .carnet-tarjeta__frente::after {
    content: none;
}

.carnet-tarjeta--impresa .carnet-tarjeta__cara {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* El código corto, bajo el QR, para teclearlo si no se lee. */
.carnet-qr-corto {
    margin: 1.2cqi 0 0;
    color: #111827;
    font-family: var(--fuente-display);
    font-size: 3.4cqi;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.carnet-tarjeta--impresa .carnet-tarjeta__codigo:has(.carnet-qr-corto) {
    aspect-ratio: auto;
}

/* El QR, del ancho entero de su ventana (como en el móvil); el código, debajo, en la misma ventana. */
/*
 * Con menos margen blanco que en el móvil (16 oct 2026): el QR del plástico
 * tiene muy pocos cuadros (solo el código corto) y cada cuadro es grande, así
 * que con 2,2 cqi le queda el margen que necesitan los lectores.
 */
.carnet-tarjeta--impresa .carnet-qr-ventana:has(.carnet-qr-corto) {
    height: auto;
    padding: 2.2cqi 2.2cqi 1.6cqi;
}

.carnet-tarjeta--impresa .carnet-qr-ventana:has(.carnet-qr-corto) .carnet-qr {
    height: auto;
    aspect-ratio: 1;
}

.carnet-tarjeta--impresa .carnet-qr-corto {
    margin-top: 1cqi;
    line-height: 1;
}
/* #endregion */

/* #region Girar también en Firefox */
/*
 * 9 nov 2026 (Rafa, en Firefox: «cuando le das la vuelta al carnet se rompe»):
 * Firefox no siempre esconde la cara de atrás (backface-visibility) cuando
 * dentro hay capas propias (el brillo, el QR), y se ven las dos caras a la vez,
 * una al revés. Así que cada cara se esconde ella sola a mitad del giro (la
 * transición dura 0,7 s) y, al arrastrarla con el dedo, según el ángulo
 * (mi-carnet.js). En Chrome y Safari no cambia nada de lo que se ve.
 */
.carnet-tarjeta:not(.carnet-tarjeta--impresa) .carnet-tarjeta__frente,
.carnet-tarjeta:not(.carnet-tarjeta--impresa) .carnet-tarjeta__dorso {
    transition: visibility 0s linear 0.35s;
}

.carnet-tarjeta--dorso:not(.carnet-tarjeta--impresa) .carnet-tarjeta__frente,
.carnet-tarjeta:not(.carnet-tarjeta--dorso, .carnet-tarjeta--impresa) .carnet-tarjeta__dorso {
    visibility: hidden;
}

.carnet-tarjeta--arrastrando:not(.carnet-tarjeta--impresa) .carnet-tarjeta__frente,
.carnet-tarjeta--arrastrando:not(.carnet-tarjeta--impresa) .carnet-tarjeta__dorso {
    visibility: visible;
    transition: none;
}

.carnet-tarjeta--arrastrando.carnet-tarjeta--ve-dorso .carnet-tarjeta__frente,
.carnet-tarjeta--arrastrando:not(.carnet-tarjeta--ve-dorso) .carnet-tarjeta__dorso {
    visibility: hidden;
}
/* #endregion */