/* Fondo general con gradiente */
body {
    background: linear-gradient(to right, #667eea, #764ba2);
}

/* Contenedor principal con efecto glass */
.glass-container {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    color: white;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    /* ✅ Agregamos esto para permitir interacción con modales */
    position: relative;
    z-index: auto;
}

/* Estilo para tablas con efecto glass */
.glass-table {
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 10px;
}

    /* Encabezados de tabla */
    .glass-table th {
        background-color: rgba(255, 255, 255, 0.5);
        color: #333;
    }

    /* Celdas de tabla */
    .glass-table td {
        color: #212529;
        background-color: rgba(255, 255, 255, 0.25);
    }

/* Botón con efecto glass */
.btn-glass {
    background-color: #444;
    color: white;
    border: 1px solid #666;
    transition: background-color 0.2s ease, transform 0.2s ease;
    margin: 6px;
}

    /* Hover para el botón */
    .btn-glass:hover {
        background-color: rgba(255, 255, 255, 0.4);
        color: black;
    }

/* Estilo de inputs en grupo (buscador) */
.input-group .form-control {
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    color: #212529;
}

    /* Placeholder de inputs */
    .input-group .form-control::placeholder {
        color: #6c757d;
    }

/* Hacer tabla horizontalmente desplazable si es necesario */
.table-responsive {
    overflow-x: auto;
}

/* Estructura de tabla flexible */
.table {
    table-layout: auto;
}

/* Fondo para el login a pantalla completa */
.login-fullscreen {
    min-height: 100vh;
    padding: 3rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Tarjeta con efecto glass para productos */
.glass-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 2rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    color: white;
    margin: 0 auto; /* Centrado horizontal */
}

/* Botón del login */
.btn-login {
    background-color: #5a67d8;
    border: none;
    width: 100%;
    padding: 0.6rem;
    color: white;
    font-weight: bold;
    border-radius: 0.5rem;
    transition: 0.3s;
}

    /* Hover para el botón del login */
    .btn-login:hover {
        background-color: #434190;
    }

/* Fondo especial para el login */
.login-bg {
    background: linear-gradient(to right, #667eea, #764ba2);
    margin: 0;
}

/* Contenedor del formulario de login */
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Enlace para registrarse en el login */
.enlace-registro {
    color: white !important;
}

/* ------------------------------------------ */
/* ESTILO CORRECTO PARA EL MODAL - BOOTSTRAP */
/* ------------------------------------------ */

.glass-modal {
    margin: auto;
    max-width: 500px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    color: white;
    /* ✅ Claves para que el modal responda bien */
    position: relative;
    z-index: 1060;
    pointer-events: auto;
}