/* ==========================================================================
   Carnet — Credit-card-sized athlete credential (scaled 40% from original)
   ========================================================================== */

.carnet-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-8);
}

.carnet-actions {
    display: flex;
    gap: var(--sp-4);
}

/* Card container */
.carnet__card {
    width: 155mm;
    min-height: 90mm;
    background: var(--jno-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    font-size: 13pt;
    line-height: 1.3;
}

/* Header */
.carnet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4mm 6mm;
    background: linear-gradient(135deg, var(--jno-blue) 0%, var(--jno-green-dark) 100%);
    color: var(--jno-white);
}

.carnet__logo img {
    max-height: 44px;
    width: auto;
}

.carnet__logo strong {
    font-family: var(--font-heading);
    font-size: 14pt;
}

.carnet__event {
    text-align: right;
    display: flex;
    flex-direction: column;
}

.carnet__event-title {
    font-family: var(--font-heading);
    font-size: 10pt;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.carnet__event-subtitle {
    font-size: 8.5pt;
    opacity: 0.8;
}

.carnet__event-location {
    font-size: 10pt;
    font-weight: var(--fw-bold);
    color: var(--jno-yellow);
}

/* Body */
.carnet__body {
    display: flex;
    gap: 4mm;
    padding: 4mm 6mm;
}

.carnet__photo {
    flex-shrink: 0;
}

.carnet__photo img {
    width: 31mm;
    height: 41mm;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--jno-gray-200);
}

.carnet__details {
    flex: 1;
    min-width: 0;
}

.carnet__field {
    margin-bottom: 1.5mm;
}

.carnet__label {
    display: block;
    font-size: 7pt;
    color: var(--jno-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.carnet__value {
    font-size: 11pt;
    font-weight: var(--fw-semibold);
    color: var(--jno-gray-900);
    word-break: break-word;
}

.carnet__deportes {
    font-size: 10pt;
    color: var(--jno-blue);
}

/* Footer */
.carnet__footer {
    display: flex;
    align-items: center;
    gap: 5mm;
    padding: 3mm 6mm 4mm;
    border-top: 1px solid var(--jno-gray-100);
    background: var(--jno-gray-50);
}

.carnet__qr img {
    width: 26mm;
    height: 26mm;
}

.carnet__dates {
    font-size: 8.5pt;
    color: var(--jno-gray-600);
    font-weight: var(--fw-semibold);
}

/* Internal verified badge */
.carnet__verified {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2mm;
    padding: 2mm 6mm;
    background: rgba(0, 132, 61, 0.1);
    color: var(--jno-green-dark);
    font-family: var(--font-heading);
    font-size: 9pt;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Verification badge */
.verify-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-6);
    border-radius: var(--radius-lg);
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
}

.verify-badge--valid {
    background: rgba(0, 132, 61, 0.1);
    color: var(--jno-green-dark);
    border: 2px solid var(--jno-green-dark);
}

.verify-badge--invalid {
    background: rgba(230, 57, 70, 0.08);
    color: #E63946;
    border: 2px solid #E63946;
}

.verify-badge--invalid h2 {
    margin: 0;
    font-size: var(--fs-xl);
}

.verify-badge--invalid p {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal);
    opacity: 0.8;
}

/* Responsive — fill screen on mobile */
@media (max-width: 600px) {
    .carnet-page {
        padding: 0 10px;
    }

    .carnet__card {
        width: 100%;
        min-height: auto;
    }

    .carnet__photo img {
        width: 25mm;
        height: 33mm;
    }

    .carnet__qr img {
        width: 20mm;
        height: 20mm;
    }
}