/* Aplica esta regla cuando el selector o la condición coincide. */
.qr-record {
    /* Configura esta propiedad visual mediante max-width. */
    max-width:920px;
    /* Define el espacio exterior mediante margin. */
    margin:auto;
    /* Define el espacio interior mediante padding. */
    padding:clamp(16px,4vw,40px);
    /* Controla el contenido que rebasa el contenedor mediante overflow-wrap. */
    overflow-wrap:anywhere;
    /* Fija el color del texto mediante color. */
    color:var(--ink);
    /* Pinta el fondo del elemento mediante background. */
    background:var(--page);
    /* Configura esta propiedad visual mediante min-height. */
    min-height:100vh
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.qr-record>a,.qr-record>p>a {
    /* Fija el color del texto mediante color. */
    color:var(--accent);
    /* Configura la tipografía mediante font-weight. */
    font-weight:700
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.qr-hero {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Pinta el fondo del elemento mediante background. */
    background:linear-gradient(135deg,var(--accent-fill),color-mix(in srgb,var(--accent-fill) 65%,#101826));
    /* Fija el color del texto mediante color. */
    color:white;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:20px;
    /* Define el espacio interior mediante padding. */
    padding:clamp(22px,5vw,40px);
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Dibuja el borde del elemento mediante border-top. */
    border-top:5px solid var(--accent-bright);
    /* Define el espacio exterior mediante margin. */
    margin:18px 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.qr-kicker {
    /* Configura la tipografía mediante font-size. */
    font-size:.75rem;
    /* Configura esta propiedad visual mediante letter-spacing. */
    letter-spacing:.09em;
    /* Configura la tipografía mediante font-weight. */
    font-weight:700;
    /* Fija el color del texto mediante color. */
    color:#fff
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.qr-hero h1 {
    /* Fija el color del texto mediante color. */
    color:#fff;
    /* Define el espacio exterior mediante margin. */
    margin:12px 0 18px;
    /* Configura la tipografía mediante font-size. */
    font-size:clamp(1.6rem,5vw,2.7rem);
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.15
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.qr-id {
    /* Define cómo se distribuye el contenido mediante display. */
    display:inline-block;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Fija el color del texto mediante color. */
    color:var(--accent);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:8px;
    /* Define el espacio interior mediante padding. */
    padding:7px 11px;
    /* Configura la tipografía mediante font-weight. */
    font-weight:700
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.qr-grid {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
    /* Separa elementos vecinos mediante gap. */
    gap:14px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.qr-card {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:16px;
    /* Define el espacio interior mediante padding. */
    padding:18px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.qr-card h2 {
    /* Configura la tipografía mediante font-size. */
    font-size:1.05rem;
    /* Define el espacio exterior mediante margin. */
    margin:0 0 14px;
    /* Fija el color del texto mediante color. */
    color:var(--accent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.qr-fields {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:repeat(auto-fit,minmax(min(100%,128px),1fr));
    /* Separa elementos vecinos mediante gap. */
    gap:12px;
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.qr-fields>div {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:8px;
    /* Define el espacio interior mediante padding. */
    padding:10px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.qr-fields dt {
    /* Configura la tipografía mediante font-size. */
    font-size:.78rem;
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.qr-fields dd {
    /* Define el espacio exterior mediante margin. */
    margin:4px 0 0;
    /* Configura la tipografía mediante font-weight. */
    font-weight:700
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.qr-linked {
    /* Configura esta propiedad visual mediante list-style. */
    list-style:none;
    /* Define el espacio interior mediante padding. */
    padding:0;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap;
    /* Separa elementos vecinos mediante gap. */
    gap:8px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.qr-linked li {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--menu-hover);
    /* Fija el color del texto mediante color. */
    color:var(--accent);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:8px;
    /* Define el espacio interior mediante padding. */
    padding:6px 10px;
    /* Configura la tipografía mediante font-weight. */
    font-weight:700
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.pdf-preview {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Distribuye los elementos mediante justify-items. */
    justify-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:8px;
    /* Define el espacio interior mediante padding. */
    padding:8px;
    /* Configura esta propiedad visual mediante max-height. */
    max-height:55vh;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:auto
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.pdf-preview canvas {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:100%;
    /* Ajusta la altura mediante height. */
    height:auto;
    /* Pinta el fondo del elemento mediante background. */
    background:white
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.pdf-preview[hidden] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.qr-hero-with-photo {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:minmax(0,1fr) minmax(120px,220px);
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:18px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.qr-asset-photo {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Ajusta la altura mediante height. */
    height:145px;
    /* Configura esta propiedad visual mediante object-fit. */
    object-fit:contain;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface,#fff);
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line,#cfdfec);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:520px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .qr-hero-with-photo {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:minmax(0,1fr)
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .qr-asset-photo {
        /* Ajusta la altura mediante height. */
        height:180px
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.qr-hero,.qr-card,.qr-asset-photo {
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:var(--theme-elevation)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.qr-card {
    /* Suaviza el cambio entre estados mediante transition. */
    transition:background-color .18s,border-color .18s,box-shadow .18s
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.qr-card:hover {
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:var(--theme-elevation-hover)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(prefers-reduced-motion:no-preference) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .qr-record {
        /* Aplica una animación mediante animation. */
        animation:qr-arrive .24s ease-out
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@keyframes qr-arrive {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    from {
        /* Regula la transparencia mediante opacity. */
        opacity:.65;
        /* Transforma la geometría visual mediante transform. */
        transform:translateY(4px)
    }
}