/*
 * Styles for the URL Modal using jQuery UI Dialog
 * Estilos para la Modal de URL usando jQuery UI Dialog
 */

/* Estilos para el iframe dentro de la modal */
/* Esto asegura que el iframe ocupe el espacio disponible y sea responsive */
.modal-url-iframe-container {
    position: relative;
    overflow: hidden; /* Oculta cualquier desbordamiento */
    width: 100%;
    /* Define una relación de aspecto si es necesario, o ajusta según contenido */
    /* Ejemplo para 16:9: padding-top: 56.25%; */
    /* O define una altura fija o máxima */
    height: 500px; /* Altura de ejemplo, ajusta según tus necesidades */
    max-height: 80vh; /* Altura máxima, 80% del viewport height */
}

.modal-url-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* Eliminar el borde por defecto del iframe */
}

/* Estilos para el título del diálogo de jQuery UI */
/* Puedes personalizar la apariencia del título de la modal */
.ui-dialog-titlebar {
    background-color: #f0f0f0; /* Color de fondo del título */
    border: none;
    padding: 10px;
    font-size: 1.2em;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
}

/* Estilos para el botón de cerrar del diálogo de jQuery UI */
.ui-dialog-titlebar-close {
    /* Puedes ajustar la posición, tamaño, color, etc. */
}

/* Estilos para el contenido del diálogo (el contenedor del iframe) */
.ui-dialog-content {
    padding: 0 !important; /* Eliminar padding por defecto para que el iframe ocupe todo */
    overflow: hidden; /* Asegurarse de que el contenido del diálogo no haga scroll */
}

/* Ajustes responsive básicos para el diálogo */
/* Puedes añadir más media queries si necesitas control más fino */
.ui-dialog {
    max-width: 95%; /* Ancho máximo en pantallas pequeñas */
    width: auto !important; /* Permitir que el ancho se ajuste */
}