/* Estilo personalizado para el borde punteado que Bootstrap no tiene */
.border-dashed {
    border-style: dashed !important;
}

/* Altura mínima para que el body ocupe toda la pantalla */
.min-h-100vh {
    min-height: 100vh;
}

/* Estilos para el modal con Material Design */
.modal-content {
    border: none;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.modal-header {
    background-color: #3f51b5 !important; /* Color primario de Material Design */
    color: white;
    border-bottom: none;
}

.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-footer {
    background-color: #f5f5f5;
    border-top: none;
}

/* Estilos para los cards dentro del modal */
.card {
    border: none;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

.card-title {
    font-weight: 500;
}

/* Estilos para los botones con esquinas redondeadas */
.btn.rounded-pill {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Estilos para los selects flotantes */
.form-floating > .form-select {
    padding-top: 1.2rem;
}

#previewTable thead th {
    background: #42a5f5;
    color: white;
}

.text-center {
    text-align: center;
}