/* --- ESTRUCTURA VENTANA WINDOWS 11 --- */
        .modal {
            display: none;
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 500;
            justify-content: center; align-items: center;
        }

        .modal-content {
            background: var(--bg-negro);
            border: 1px solid var(--verde-base);
            width: 95%;
            max-width: 1100px;
            height: 85vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
        }

/* --- ESTILO PARA EL MODAL DE ERROR (ROJO) --- */
    #modal-error .modal-content {
        border-color: var(--rojo-error) !important;
        max-width: 500px;
        height: auto;
        text-align: center;
        box-shadow: 0 0 30px rgba(255, 68, 68, 0.2);
    }

    #modal-error h2 {
        color: var(--rojo-error) !important;
        border-color: var(--rojo-error) !important;
    }

    .modal.opening .modal-content {
        animation: glitch-open 0.4s cubic-bezier(.25,.46,.45,.94) both;
    }

    /* Clase que se activa al cerrar */
    .modal.closing .modal-content {
        animation: glitch-close 0.3s cubic-bezier(.25,.46,.45,.94) both;
    }


    /* --- EFECTO DE CORTES HORIZONTALES (EXTRAS) --- */
    .modal-content::before, .modal-content::after {
        content: "";
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: inherit;
        z-index: -1;
        opacity: 0;
    }

    /* Capa de color parpadeante durante el glitch */
    .modal.opening .modal-content::before {
        animation: glitch-color 0.4s steps(1) infinite;
        opacity: 0.5;
    }