/* Overlay oscuro */
#overlay {
    position:fixed;
    inset:0;
    background:rgba(0, 0, 0, 0.75);
    backdrop-filter:blur(4px);
    z-index:999;
    display:none;
    animation:fadeIn 0.3s ease-out;
}

/* Panel flotante */
#floating-panel {
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:90%;
    max-width:800px;
    min-width:min(90%, 800px); /* Asegura al menos ~80-90% en pantallas grandes */
    max-height:90vh;
    overflow-y:auto;
    padding:32px;
    background:#1e1e1e;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0, 0, 0, 0.6);
    z-index:1000;
    display:none;
    animation:slideUp 0.3s ease-out;
}

#panel-close {
    position:absolute;
    top:16px;
    right:20px;
    font-size:28px;
    color:#aaa;
    cursor:pointer;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    transition:all 0.2s;
    &:hover {
        background:#333;
        color:#fff;
    }
}

#panel-title {
    margin:0 0 20px 0;
    font-size:1.8rem;
    color:#ffffff;
}

#panel-content {
    line-height:1.6;
    margin-bottom:20px;
    color:#e0e0e0;
    ul {
        li {
            list-style:none;
            padding:0;
            margin:0;

            .item-key {
                text-transform: uppercase;
                font-size: 0.9rem;
                opacity: 0.6;
            }
        }
    }
}

#panel-tags {
    font-size:0.9rem;
    color:#bbbbbb;
}

/* Notificación sutil */
#notification {
    position:fixed;
    bottom:20px;
    right:20px;
    padding:12px 20px;
    background:#442c2e;
    color:#f5c6cb;
    border-radius:6px;
    opacity:0;
    transition:opacity 0.4s;
    z-index:999;
    &.show { opacity:1; }
}


/* Animaciones */
@keyframes fadeIn {
    from { opacity:0; }
    to { opacity:1; }
}
@keyframes slideUp {
    from { opacity:0; transform:translate(-50%, -40%); }
    to { opacity:1; transform:translate(-50%, -50%); }
}