/* ==========================================================
   HAMCONTACT - QSL NO REGISTRO DE CONTATOS
   ========================================================== */

#modalQslContato .modal-dialog{
    max-width:980px;
}

.qsl-contact-modal-grid{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(230px,.65fr);
    gap:14px;
}

.qsl-runtime-card{
    position:relative;
    width:100%;
    aspect-ratio:14/9;
    overflow:hidden;

    background:
        linear-gradient(135deg,#173b64,#0d6efd);

    background-size:cover;
    background-position:center;

    border-radius:8px;
    box-shadow:0 7px 22px rgba(0,0,0,.18);

    container-type:inline-size;
}

.qsl-runtime-element{
    position:absolute;
    z-index:5;
    white-space:nowrap;
    line-height:1.08;
}

.qsl-runtime-signature{
    position:absolute;
    z-index:20;

    left:1.3%;
    right:1.3%;
    bottom:1.2%;

    min-height:6.2%;

    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:.45em;

    padding:.22em .55em;

    background:rgba(255,255,255,.92);
    color:#202733;

    border-radius:.35em;

    font-size:clamp(7px,1.12cqw,12px);
    font-weight:700;

    box-shadow:0 1px 5px rgba(0,0,0,.18);

    pointer-events:none;
}

.qsl-runtime-signature img{
    height:1.7em;
    width:auto;
    object-fit:contain;
}

.qsl-runtime-signature .qsl-signature-email{
    font-weight:600;
}

.qsl-runtime-details{
    border:1px solid var(--bs-border-color);
    border-radius:10px;
    padding:12px;
}

.qsl-runtime-detail{
    margin-bottom:9px;
}

.qsl-runtime-detail:last-child{
    margin-bottom:0;
}

.qsl-runtime-detail-label{
    color:var(--bs-secondary-color);
    font-size:.68rem;
    text-transform:uppercase;
    font-weight:800;
}

.qsl-runtime-detail-value{
    font-size:.9rem;
    font-weight:700;
    overflow-wrap:anywhere;
}

.qsl-email-disabled-help{
    margin-top:5px;
    color:var(--bs-secondary-color);
    font-size:.72rem;
}

#modalQslAposSalvar .qsl-after-save-icon{
    font-size:2.4rem;
}

@media (max-width:767px){

    .qsl-contact-modal-grid{
        grid-template-columns:1fr;
    }

    #modalQslContato .modal-dialog{
        margin:8px;
    }
}

@media print{
    .qsl-runtime-signature{
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }
}


/* ==========================================================
   ASSINATURA QSL MAIS COMPACTA
   ========================================================== */

.qsl-runtime-signature{
    left:auto !important;
    right:1.2% !important;
    bottom:1.2% !important;

    width:auto !important;
    max-width:42% !important;
    min-height:0 !important;

    padding:.18em .42em !important;

    justify-content:flex-end !important;

    font-size:clamp(6px,.90cqw,10px) !important;
}

.qsl-runtime-signature img{
    height:1.45em !important;
}


/* ==========================================================
   ASSINATURA DO CARTÃO QSL - COMPACTA E OBRIGATÓRIA
   Apenas no cartão; não altera o rodapé do site.
   ========================================================== */

.qsl-runtime-signature{
    left:auto !important;
    right:1.2% !important;
    bottom:1.2% !important;

    width:38% !important;
    max-width:38% !important;
    min-height:0 !important;

    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:flex-end !important;

    gap:.12em .35em !important;

    padding:.16em .35em !important;

    font-size:clamp(5px,.72cqw,8px) !important;
    line-height:1.05 !important;
    text-align:right !important;
}

.qsl-runtime-signature img{
    height:1.35em !important;
}


/* ==========================================================
   QSL - ASSINATURA COMPACTA, ALTA E LEGÍVEL
   Somente dentro do cartão.
   ========================================================== */

.qsl-runtime-signature{
    left:auto !important;
    right:1.15% !important;
    bottom:1.15% !important;

    width:max-content !important;
    max-width:39% !important;
    min-width:0 !important;
    min-height:0 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    justify-content:center !important;

    gap:.10em !important;

    padding:.42em .62em !important;

    background:rgba(255,255,255,.94) !important;

    font-size:clamp(8px,1.18cqw,12px) !important;
    line-height:1.14 !important;
    text-align:right !important;

    border-radius:.42em !important;
}

.qsl-runtime-signature .qsl-signature-line{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    width:max-content !important;
    max-width:100% !important;

    gap:.30em !important;

    white-space:nowrap !important;
}

.qsl-runtime-signature img{
    height:1.82em !important;
    width:auto !important;
    max-width:5.2em !important;
    object-fit:contain !important;
}

.qsl-runtime-signature .qsl-signature-brand{
    font-weight:800 !important;
}

.qsl-runtime-signature .qsl-signature-contact{
    font-size:.96em !important;
    font-weight:500 !important;
}


/* ==========================================================
   QSL RUNTIME - COMPONENTE VU
   ========================================================== */

.qsl-runtime-component{
    white-space:normal !important;
}

.qsl-runtime-vu-component{
    --qsl-vu-pos:83.333%;

    position:relative;
    width:100%;
    height:100%;
    background:
        linear-gradient(
            145deg,
            #8b8b8b 0%,
            #d7d7d7 16%,
            #f2f2f2 43%,
            #aaa 77%,
            #777 100%
        );
    border:1px solid #8d8d8d;
    border-radius:.55em;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.9),
        0 .15em .45em rgba(0,0,0,.25);
    padding:2.2%;
    overflow:hidden;
}

.qsl-runtime-vu-screen{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    border:2px solid #151515;
    border-radius:.38em;
    background:radial-gradient(ellipse at center,#17201c 0%,#0c120f 48%,#030504 100%);
    box-shadow:inset 0 0 1em rgba(0,0,0,.9),inset 0 1px 2px rgba(255,255,255,.08);
}

.qsl-runtime-vu-title,
.qsl-runtime-vu-db{
    position:absolute;
    top:7%;
    font-size:clamp(5px,1.1cqw,13px);
    font-weight:800;
}

.qsl-runtime-vu-title{
    left:5%;
    color:#55ffd8;
    letter-spacing:.14em;
    text-shadow:0 0 .35em rgba(60,230,175,.5);
}

.qsl-runtime-vu-db{
    right:5%;
    color:#ff6b63;
}

.qsl-runtime-vu-scale{
    position:absolute;
    left:7%;
    right:7%;
    top:25%;
    height:50%;
}

.qsl-runtime-vu-line{
    position:absolute;
    top:32%;
    height:8%;
    min-height:2px;
    border-radius:999px;
}

.qsl-runtime-vu-green{
    left:0;
    width:83.333%;
    background:linear-gradient(90deg,#2fc69a,#52e5b5);
    box-shadow:0 0 .35em rgba(60,230,180,.55);
}

.qsl-runtime-vu-red{
    left:83.333%;
    right:0;
    background:linear-gradient(90deg,#f05a50,#ff2525);
    box-shadow:0 0 .35em rgba(255,50,40,.58);
}

.qsl-runtime-vu-label,
.qsl-runtime-vu-tick{
    position:absolute;
    transform:translateX(-50%);
}

.qsl-runtime-vu-label{
    top:52%;
    color:#83eac8;
    font-size:clamp(5px,1.15cqw,13px);
    font-weight:750;
    white-space:nowrap;
}

.qsl-runtime-vu-tick{
    top:16%;
    width:2px;
    height:30%;
    background:#72e3bd;
}

.qsl-runtime-vu-p0{left:0%}
.qsl-runtime-vu-p1{left:16.666%}
.qsl-runtime-vu-p2{left:33.333%}
.qsl-runtime-vu-p3{left:50%}
.qsl-runtime-vu-p4{left:66.666%}
.qsl-runtime-vu-p5{left:83.333%}
.qsl-runtime-vu-p6{left:100%}

.qsl-runtime-vu-label.qsl-runtime-vu-p6{
    color:#ff625c;
    transform:translateX(-100%);
}

.qsl-runtime-vu-tick.qsl-runtime-vu-p6{background:#ff4c45}

.qsl-runtime-vu-needle{
    position:absolute;
    left:var(--qsl-vu-pos);
    top:0;
    z-index:2;
    width:max(2px,.7%);
    height:72%;
    border-radius:999px;
    background:linear-gradient(180deg,#ffe96b 0%,#ffba34 25%,#ff4638 100%);
    box-shadow:0 0 .35em rgba(255,80,40,.85);
    transform:translateX(-50%);
}

.qsl-runtime-vu-footer{
    position:absolute;
    left:5%;
    right:5%;
    bottom:4%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#66ddb8;
    font-size:clamp(5px,1.05cqw,12px);
    font-weight:750;
}

.qsl-runtime-vu-meter-name{
    font-weight:800;
    letter-spacing:.08em;
    opacity:.85;
}

.qsl-runtime-vu-value{
    min-width:18%;
    padding:.3% 2%;
    border:1px solid rgba(100,230,190,.24);
    border-radius:.25em;
    background:rgba(0,0,0,.48);
    color:#fff;
    font-weight:800;
    text-align:center;
    box-shadow:inset 0 0 .25em rgba(0,0,0,.5);
}


/* ==========================================================
   QSL RUNTIME - MAPA DO QSO
   ========================================================== */

.qsl-runtime-map{
    overflow:hidden;

    border-radius:.55em;

    box-shadow:
        0 .15em .5em rgba(0,0,0,.26);
}

.qsl-runtime-map-canvas{
    display:block;

    width:100%;
    height:100%;

    border-radius:inherit;

    background:
        linear-gradient(
            145deg,
            #e7f1e2,
            #f7f4e9 48%,
            #dbeaf0
        );
}


/* ==========================================================
   QSL RUNTIME - QR CODE + IMAGEM
   ========================================================== */

.qsl-runtime-qr-component{
    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:4%;

    padding:5%;

    overflow:hidden;

    border-radius:.55em;

    background:
        rgba(255,255,255,.97);

    box-shadow:
        0 .15em .45em rgba(0,0,0,.22);
}

.qsl-runtime-qr-canvas{
    display:block;

    width:auto;
    max-width:96%;

    height:auto;
    max-height:78%;

    aspect-ratio:1;
}

.qsl-runtime-qr-caption{
    width:100%;

    overflow:hidden;

    color:#1c2430;

    font-size:
        clamp(5px,1.05cqw,10px);

    font-weight:700;

    text-align:center;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.qsl-runtime-image,
.qsl-runtime-image-component{
    width:100%;
    height:100%;
}

.qsl-runtime-image-component{
    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    border-radius:.5em;
}

.qsl-runtime-image-component img{
    display:block;

    width:100%;
    height:100%;
}

.qsl-runtime-image-empty{
    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    border:
        1px dashed rgba(255,255,255,.55);

    border-radius:.5em;

    background:
        rgba(0,0,0,.25);

    color:
        rgba(255,255,255,.88);

    font-size:
        clamp(6px,1.1cqw,11px);
}


/* ==========================================================
   QSL RUNTIME - FORMAS / IMAGEM AVANÇADA
   ========================================================== */

.qsl-runtime-shape{
    padding:0 !important;
}

.qsl-runtime-shape-box{
    width:100%;
    height:100%;
}

.qsl-runtime-shape-line{
    position:absolute;
    left:0;
    top:50%;

    width:100%;

    transform:
        translateY(-50%);
}

.qsl-runtime-image-component{
    border-radius:inherit;
}