/* Contenedor que centra la carta en la pantalla */
.carta-wrapper {
    width: 100%;
    max-width: 800px;
    /* Ancho máximo en ordenadores para que no se desparrame */
    margin: 20px auto;
    /* Centra el bloque y le da separación arriba/abajo */
    padding: 0 15px;
    /* Colchón para que en móviles no pegue contra los bordes */
}

/* La caja mágica con la proporción exacta de un A4 */
.visor-a4 {
    position: relative;
    width: 100%;
    /* Relación de aspecto exacta del formato A4 (Ancho / Alto) */
    aspect-ratio: 1 / 1.4142;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* Sombra elegante tipo papel */
    border-radius: 4px;
    overflow: hidden;
    background-color: #ffffff;
}

/* El iframe se adapta al 100% de la caja A4 */
.visor-a4 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.btn-outline-secondary .active {
    color: #fff;
    background-color: #000;
    border-color: #000;
}