/*
 * Página pública de verificación de certificados (usa la base de panel.css).
 */

.cvv {
    max-width: 40rem;
}

.cvv-resultado {
    background: var(--cvp-superficie);
    border: 1px solid var(--cvp-borde);
    border-left-width: 8px;
    border-radius: var(--cvp-radio);
    padding: 1.25rem 1.5rem;
    margin: 0 0 2rem;
}

.cvv-resultado--si {
    border-left-color: var(--cvp-ok);
}

.cvv-resultado--anulado,
.cvv-resultado--no {
    border-left-color: var(--cvp-peligro);
}

.cvv-estado {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.cvv-resultado--si .cvv-estado {
    color: var(--cvp-ok);
}

.cvv-resultado--anulado .cvv-estado,
.cvv-resultado--no .cvv-estado {
    color: var(--cvp-peligro);
}

.cvv-datos {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.25rem;
    margin: 0 0 1rem;
}

.cvv-datos dt {
    color: var(--cvp-suave);
}

.cvv-datos dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cvv-formulario {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.cvv-formulario label {
    flex-basis: 100%;
    font-weight: 600;
}

.cvv-formulario input {
    flex: 1 1 12rem;
    min-height: 48px;
    padding: 0.5rem 0.75rem;
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 2px solid var(--cvp-borde);
    border-radius: var(--cvp-radio);
}

@media (max-width: 480px) {
    .cvv-datos {
        grid-template-columns: 1fr;
        gap: 0.125rem;
    }

    .cvv-datos dd {
        margin-bottom: 0.5rem;
    }
}